From 9e48aec0444fe5c378614b9ffb2efc3b847f6b7a Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:58:53 +0100
Subject: [PATCH 1/2] fix: Refactor subcomponents (#1050)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 packages/react/package.json                   |   1 +
 packages/react/rollup.config.mjs              |  15 +-
 .../react/src/Breadcrumb/Breadcrumb.test.tsx  |  19 +
 packages/react/src/Breadcrumb/Breadcrumb.tsx  |  30 +-
 .../src/Breadcrumb/BreadcrumbItem.test.tsx    |  41 ++
 .../react/src/Breadcrumb/BreadcrumbItem.tsx   |  24 +
 packages/react/src/Breadcrumb/index.ts        |   3 +-
 packages/react/src/Card/Card.test.tsx         |  52 +-
 packages/react/src/Card/Card.tsx              |  40 +-
 .../react/src/Card/CardHeadingGroup.test.tsx  |  48 ++
 packages/react/src/Card/CardHeadingGroup.tsx  |  24 +
 packages/react/src/Card/CardLink.test.tsx     |  41 ++
 packages/react/src/Card/CardLink.tsx          |  20 +
 packages/react/src/Card/index.ts              |   2 +
 packages/react/src/Footer/Footer.test.tsx     |  50 +-
 packages/react/src/Footer/Footer.tsx          |  31 +-
 .../react/src/Footer/FooterBottom.test.tsx    |  41 ++
 packages/react/src/Footer/FooterBottom.tsx    |  20 +
 packages/react/src/Footer/FooterTop.test.tsx  |  41 ++
 packages/react/src/Footer/FooterTop.tsx       |  21 +
 packages/react/src/Footer/index.ts            |   3 +
 .../src/OrderedList/OrderedList.test.tsx      |  25 +-
 .../react/src/OrderedList/OrderedList.tsx     |  45 +-
 .../src/OrderedList/OrderedListItem.test.tsx  |  39 ++
 .../react/src/OrderedList/OrderedListItem.tsx |  20 +
 packages/react/src/OrderedList/index.ts       |   1 +
 packages/react/src/PageMenu/PageMenu.test.tsx |   2 +-
 packages/react/src/PageMenu/PageMenu.tsx      |  60 +-
 .../react/src/PageMenu/PageMenuLink.test.tsx  |  68 +++
 packages/react/src/PageMenu/PageMenuLink.tsx  |  26 +
 packages/react/src/PageMenu/index.ts          |   3 +-
 .../src/UnorderedList/UnorderedList.test.tsx  |  25 +-
 .../react/src/UnorderedList/UnorderedList.tsx |  24 +-
 .../UnorderedList/UnorderedListItem.test.tsx  |  39 ++
 .../src/UnorderedList/UnorderedListItem.tsx   |  20 +
 packages/react/src/UnorderedList/index.ts     |   1 +
 packages/react/tsconfig.json                  |   1 +
 pnpm-lock.yaml                                | 569 +-----------------
 38 files changed, 702 insertions(+), 833 deletions(-)
 create mode 100644 packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
 create mode 100644 packages/react/src/Breadcrumb/BreadcrumbItem.tsx
 create mode 100644 packages/react/src/Card/CardHeadingGroup.test.tsx
 create mode 100644 packages/react/src/Card/CardHeadingGroup.tsx
 create mode 100644 packages/react/src/Card/CardLink.test.tsx
 create mode 100644 packages/react/src/Card/CardLink.tsx
 create mode 100644 packages/react/src/Footer/FooterBottom.test.tsx
 create mode 100644 packages/react/src/Footer/FooterBottom.tsx
 create mode 100644 packages/react/src/Footer/FooterTop.test.tsx
 create mode 100644 packages/react/src/Footer/FooterTop.tsx
 create mode 100644 packages/react/src/OrderedList/OrderedListItem.test.tsx
 create mode 100644 packages/react/src/OrderedList/OrderedListItem.tsx
 create mode 100644 packages/react/src/PageMenu/PageMenuLink.test.tsx
 create mode 100644 packages/react/src/PageMenu/PageMenuLink.tsx
 create mode 100644 packages/react/src/UnorderedList/UnorderedListItem.test.tsx
 create mode 100644 packages/react/src/UnorderedList/UnorderedListItem.tsx

diff --git a/packages/react/package.json b/packages/react/package.json
index 072de123b3..274851c20d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -63,6 +63,7 @@
     "react-dom": "18.2.0",
     "rollup": "4.9.4",
     "rollup-plugin-delete": "2.0.0",
+    "rollup-plugin-dts": "6.1.0",
     "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-node-externals": "6.1.2",
     "rollup-plugin-node-polyfills": "0.2.1",
diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs
index b8dd0d2570..fa3a4fdee0 100644
--- a/packages/react/rollup.config.mjs
+++ b/packages/react/rollup.config.mjs
@@ -7,6 +7,8 @@ import nodeExternal from 'rollup-plugin-node-externals'
 import nodePolyfills from 'rollup-plugin-node-polyfills'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import typescript from 'rollup-plugin-typescript2'
+import dts from 'rollup-plugin-dts'
+import del from 'rollup-plugin-delete'
 
 const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'))
 
@@ -46,7 +48,7 @@ export default [
         include: /node_modules/,
       }),
       nodePolyfills(),
-      typescript({ includeDependencies: false }),
+      typescript({ includeDependencies: false, useTsconfigDeclarationDir: true }),
       babel({
         presets: ['@babel/preset-react'],
         babelHelpers: 'runtime',
@@ -58,4 +60,15 @@ export default [
       filesize(),
     ],
   },
+  {
+    input: './dist/dts/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    plugins: [
+      dts(),
+      del({
+        targets: 'dist/dts',
+        hook: 'buildEnd',
+      }),
+    ],
+  },
 ]
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
index d5420454df..591dc45b36 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx
@@ -4,6 +4,25 @@ import { Breadcrumb } from './Breadcrumb'
 import '@testing-library/jest-dom'
 
 describe('Breadcrumb', () => {
+  it('renders', () => {
+    render(<Breadcrumb />)
+    const component = screen.getByRole('navigation')
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<Breadcrumb />)
+    const component = screen.getByRole('navigation')
+    expect(component).toHaveClass('amsterdam-breadcrumb')
+  })
+
+  it('renders an additional class name', () => {
+    render(<Breadcrumb className="extra" />)
+    const component = screen.getByRole('navigation')
+    expect(component).toHaveClass('amsterdam-breadcrumb extra')
+  })
+
   it('renders Breadcrumb component with children', () => {
     const breadcrumbItems = [
       { label: 'Item 1', href: '/item-1' },
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx
index 814b4470bc..eb50c94944 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx
@@ -3,8 +3,10 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { BreadcrumbItem } from './BreadcrumbItem'
 
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
@@ -12,31 +14,15 @@ interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps
   Item: typeof BreadcrumbItem
 }
 
-export const Breadcrumb = forwardRef(({ children, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => {
-  return (
-    <nav {...restProps} className="amsterdam-breadcrumb" ref={ref}>
+export const Breadcrumb = forwardRef(
+  ({ children, className, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => (
+    <nav {...restProps} className={clsx('amsterdam-breadcrumb', className)} ref={ref}>
       <ol className="amsterdam-breadcrumb__list">{children}</ol>
     </nav>
-  )
-}) as BreadcrumbComponent
+  ),
+) as BreadcrumbComponent
 
 Breadcrumb.displayName = 'Breadcrumb'
 
-export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
-  href: string
-}
-
-const BreadcrumbItem = forwardRef(
-  ({ children, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-    return (
-      <li {...restProps} className="amsterdam-breadcrumb__item" ref={ref}>
-        <a className="amsterdam-breadcrumb__link" href={href}>
-          {children}
-        </a>
-      </li>
-    )
-  },
-)
-
-BreadcrumbItem.displayName = 'BreadcrumbItem'
 Breadcrumb.Item = BreadcrumbItem
+Breadcrumb.Item.displayName = 'Breadcrumb.Item'
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
new file mode 100644
index 0000000000..fb79350423
--- /dev/null
+++ b/packages/react/src/Breadcrumb/BreadcrumbItem.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { BreadcrumbItem } from './BreadcrumbItem'
+import '@testing-library/jest-dom'
+
+describe('BreadcrumbItem', () => {
+  it('renders', () => {
+    render(<BreadcrumbItem href="/" />)
+    const component = screen.getByRole('listitem')
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<BreadcrumbItem href="/" />)
+    const item = screen.getByRole('listitem')
+    expect(item).toHaveClass('amsterdam-breadcrumb__item')
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('amsterdam-breadcrumb__link')
+  })
+
+  it('renders an additional class name', () => {
+    render(<BreadcrumbItem href="/" className="extra" />)
+    const component = screen.getByRole('listitem')
+    expect(component).toHaveClass('amsterdam-breadcrumb__item extra')
+  })
+
+  it('renders the href attribute', () => {
+    render(<BreadcrumbItem href="/" />)
+    const component = screen.getByRole('link')
+    expect(component).toHaveAttribute('href', '/')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLLIElement>()
+    render(<BreadcrumbItem href="/" ref={ref} />)
+    const component = screen.getByRole('listitem')
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
new file mode 100644
index 0000000000..29444e3e48
--- /dev/null
+++ b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { clsx } from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
+  href: string
+}
+
+export const BreadcrumbItem = forwardRef(
+  ({ children, className, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => (
+    <li {...restProps} className={clsx('amsterdam-breadcrumb__item', className)} ref={ref}>
+      <a className="amsterdam-breadcrumb__link" href={href}>
+        {children}
+      </a>
+    </li>
+  ),
+)
+
+BreadcrumbItem.displayName = 'BreadcrumbItem'
diff --git a/packages/react/src/Breadcrumb/index.ts b/packages/react/src/Breadcrumb/index.ts
index ea5d50941e..e1bc40d871 100644
--- a/packages/react/src/Breadcrumb/index.ts
+++ b/packages/react/src/Breadcrumb/index.ts
@@ -1,2 +1,3 @@
 export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb'
+export type { BreadcrumbProps } from './Breadcrumb'
+export type { BreadcrumbItemProps } from './BreadcrumbItem'
diff --git a/packages/react/src/Card/Card.test.tsx b/packages/react/src/Card/Card.test.tsx
index 788c3238cf..cbbd74de48 100644
--- a/packages/react/src/Card/Card.test.tsx
+++ b/packages/react/src/Card/Card.test.tsx
@@ -14,60 +14,28 @@ describe('Card', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const cardRender = render(<Card />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" />)
-    const cardLinkRender = render(<Card.Link href="/" />)
+    render(<Card />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(card).toHaveClass('amsterdam-card')
-    expect(cardHeadingGroup).toHaveClass('amsterdam-card__heading-group')
-    expect(cardLink).toHaveClass('amsterdam-card__link')
+    expect(component).toHaveClass('amsterdam-card')
   })
 
   it('renders an additional class name', () => {
-    const cardRender = render(<Card className="extra" />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" className="extra" />)
-    const cardLinkRender = render(<Card.Link href="/" className="extra" />)
+    render(<Card className="extra" />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(card).toHaveClass('extra')
-    expect(cardHeadingGroup).toHaveClass('extra')
-    expect(cardLink).toHaveClass('extra')
-
-    expect(card).toHaveClass('amsterdam-card')
-    expect(cardHeadingGroup).toHaveClass('amsterdam-card__heading-group')
-    expect(cardLink).toHaveClass('amsterdam-card__link')
-  })
-
-  it('renders a tagline', () => {
-    render(<Card.HeadingGroup tagline="tagline" />)
-
-    const tagline = screen.getByText('tagline')
-
-    expect(tagline).toBeInTheDocument()
+    expect(component).toHaveClass('amsterdam-card extra')
   })
 
   it('supports ForwardRef in React', () => {
-    const cardRef = createRef<HTMLElement>()
-    const cardHeadingGroupRef = createRef<HTMLElement>()
-    const cardLinkRef = createRef<HTMLAnchorElement>()
+    const ref = createRef<HTMLElement>()
 
-    const cardRender = render(<Card ref={cardRef} />)
-    const { container: cardHeadingGroupRender } = render(<Card.HeadingGroup tagline="test" ref={cardHeadingGroupRef} />)
-    const cardLinkRender = render(<Card.Link href="/" ref={cardLinkRef} />)
+    render(<Card ref={ref} />)
 
-    const card = cardRender.getByRole('article')
-    const cardHeadingGroup = cardHeadingGroupRender.querySelector(':only-child')
-    const cardLink = cardLinkRender.getByRole('link')
+    const component = screen.getByRole('article')
 
-    expect(cardRef.current).toBe(card)
-    expect(cardHeadingGroupRef.current).toBe(cardHeadingGroup)
-    expect(cardLinkRef.current).toBe(cardLink)
+    expect(ref.current).toBe(component)
   })
 })
diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx
index 226feaee76..58d0109020 100644
--- a/packages/react/src/Card/Card.tsx
+++ b/packages/react/src/Card/Card.tsx
@@ -5,43 +5,9 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type {
-  AnchorHTMLAttributes,
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
-import { Paragraph } from '../Paragraph'
-
-export interface CardHeadingProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
-  tagline: string
-}
-
-export const CardHeadingGroup = forwardRef(
-  ({ children, className, tagline, ...restProps }: CardHeadingProps, ref: ForwardedRef<HTMLElement>) => (
-    <hgroup {...restProps} ref={ref} className={clsx('amsterdam-card__heading-group', className)}>
-      {children}
-      <Paragraph size="small">{tagline}</Paragraph>
-    </hgroup>
-  ),
-)
-
-CardHeadingGroup.displayName = 'CardHeadingGroup'
-
-export const CardLink = forwardRef(
-  (
-    { children, className, ...otherProps }: PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>,
-    ref: ForwardedRef<HTMLAnchorElement>,
-  ) => (
-    <a {...otherProps} ref={ref} className={clsx('amsterdam-card__link', className)}>
-      {children}
-    </a>
-  ),
-)
-
-CardLink.displayName = 'CardLink'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { CardHeadingGroup } from './CardHeadingGroup'
+import { CardLink } from './CardLink'
 
 export interface CardProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
 
diff --git a/packages/react/src/Card/CardHeadingGroup.test.tsx b/packages/react/src/Card/CardHeadingGroup.test.tsx
new file mode 100644
index 0000000000..f32a476c45
--- /dev/null
+++ b/packages/react/src/Card/CardHeadingGroup.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { CardHeadingGroup } from './CardHeadingGroup'
+import '@testing-library/jest-dom'
+
+describe('CardHeadingGroup', () => {
+  it('renders', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-card__heading-group')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<CardHeadingGroup tagline="test" className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-card__heading-group extra')
+  })
+
+  it('renders a tagline', () => {
+    render(<CardHeadingGroup tagline="tagline" />)
+
+    const tagline = screen.getByText('tagline')
+
+    expect(tagline).toBeInTheDocument()
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+    const { container } = render(<CardHeadingGroup tagline="test" ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/Card/CardHeadingGroup.tsx b/packages/react/src/Card/CardHeadingGroup.tsx
new file mode 100644
index 0000000000..2ffff450f5
--- /dev/null
+++ b/packages/react/src/Card/CardHeadingGroup.tsx
@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { Paragraph } from '../Paragraph'
+
+export interface CardHeadingGroupProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+  tagline: string
+}
+
+export const CardHeadingGroup = forwardRef(
+  ({ children, className, tagline, ...restProps }: CardHeadingGroupProps, ref: ForwardedRef<HTMLElement>) => (
+    <hgroup {...restProps} ref={ref} className={clsx('amsterdam-card__heading-group', className)}>
+      {children}
+      <Paragraph size="small">{tagline}</Paragraph>
+    </hgroup>
+  ),
+)
+
+CardHeadingGroup.displayName = 'CardHeadingGroup'
diff --git a/packages/react/src/Card/CardLink.test.tsx b/packages/react/src/Card/CardLink.test.tsx
new file mode 100644
index 0000000000..77fe610cf0
--- /dev/null
+++ b/packages/react/src/Card/CardLink.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { CardLink } from './CardLink'
+import '@testing-library/jest-dom'
+
+describe('CardLink', () => {
+  it('renders', () => {
+    render(<CardLink href="/" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<CardLink href="/" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-card__link')
+  })
+
+  it('renders an additional class name', () => {
+    render(<CardLink href="/" className="extra" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-card__link extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLAnchorElement>()
+
+    render(<CardLink href="/" ref={ref} />)
+
+    const component = screen.getByRole('link')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/Card/CardLink.tsx b/packages/react/src/Card/CardLink.tsx
new file mode 100644
index 0000000000..69c2c8e81a
--- /dev/null
+++ b/packages/react/src/Card/CardLink.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
+
+export interface CardLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {}
+
+export const CardLink = forwardRef(
+  ({ children, className, ...otherProps }: CardLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
+    <a {...otherProps} ref={ref} className={clsx('amsterdam-card__link', className)}>
+      {children}
+    </a>
+  ),
+)
+
+CardLink.displayName = 'CardLink'
diff --git a/packages/react/src/Card/index.ts b/packages/react/src/Card/index.ts
index 66e2db12a6..99779f5614 100644
--- a/packages/react/src/Card/index.ts
+++ b/packages/react/src/Card/index.ts
@@ -1,2 +1,4 @@
 export { Card } from './Card'
 export type { CardProps } from './Card'
+export type { CardHeadingGroupProps } from './CardHeadingGroup'
+export type { CardLinkProps } from './CardLink'
diff --git a/packages/react/src/Footer/Footer.test.tsx b/packages/react/src/Footer/Footer.test.tsx
index 7997750954..33a649b062 100644
--- a/packages/react/src/Footer/Footer.test.tsx
+++ b/packages/react/src/Footer/Footer.test.tsx
@@ -7,59 +7,35 @@ describe('Footer', () => {
   it('renders an HTML footer element', () => {
     render(<Footer />)
 
-    const footer = screen.getByRole('contentinfo')
+    const component = screen.getByRole('contentinfo')
 
-    expect(footer).toBeInTheDocument()
-    expect(footer).toBeVisible()
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    const footerRender = render(<Footer />)
-    const { container: footerTopRender } = render(<Footer.Top />)
-    const { container: footerBottomRender } = render(<Footer.Bottom />)
+    render(<Footer />)
 
-    const footer = footerRender.getByRole('contentinfo')
-    const footerTop = footerTopRender.querySelector(':only-child')
-    const footerBottom = footerBottomRender.querySelector(':only-child')
+    const component = screen.getByRole('contentinfo')
 
-    expect(footer).toHaveClass('amsterdam-footer')
-    expect(footerTop).toHaveClass('amsterdam-footer__top')
-    expect(footerBottom).toHaveClass('amsterdam-footer__bottom')
+    expect(component).toHaveClass('amsterdam-footer')
   })
 
   it('renders an additional class name', () => {
-    const footerRender = render(<Footer className="extra" />)
-    const { container: footerTopRender } = render(<Footer.Top className="extra" />)
-    const { container: footerBottomRender } = render(<Footer.Bottom className="extra" />)
-
-    const footer = footerRender.getByRole('contentinfo')
-    const footerTop = footerTopRender.querySelector(':only-child')
-    const footerBottom = footerBottomRender.querySelector(':only-child')
+    render(<Footer className="extra" />)
 
-    expect(footer).toHaveClass('extra')
-    expect(footerTop).toHaveClass('extra')
-    expect(footerBottom).toHaveClass('extra')
+    const component = screen.getByRole('contentinfo')
 
-    expect(footer).toHaveClass('amsterdam-footer')
-    expect(footerTop).toHaveClass('amsterdam-footer__top')
-    expect(footerBottom).toHaveClass('amsterdam-footer__bottom')
+    expect(component).toHaveClass('amsterdam-footer extra')
   })
 
   it('supports ForwardRef in React', () => {
-    const footerRef = createRef<HTMLElement>()
-    const footerTopRef = createRef<HTMLDivElement>()
-    const footerBottomRef = createRef<HTMLDivElement>()
+    const ref = createRef<HTMLElement>()
 
-    const footerRender = render(<Footer ref={footerRef} />)
-    const { container: footerTopRender } = render(<Footer.Top ref={footerTopRef} />)
-    const { container: footerBottomRender } = render(<Footer.Bottom ref={footerBottomRef} />)
+    render(<Footer ref={ref} />)
 
-    const footer = footerRender.getByRole('contentinfo')
-    const footerTop = footerTopRender.querySelector(':only-child')
-    const footerBottom = footerBottomRender.querySelector(':only-child')
+    const component = screen.getByRole('contentinfo')
 
-    expect(footerRef.current).toBe(footer)
-    expect(footerTopRef.current).toBe(footerTop)
-    expect(footerBottomRef.current).toBe(footerBottom)
+    expect(ref.current).toBe(component)
   })
 })
diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
index ce6937c0da..9245abd55a 100644
--- a/packages/react/src/Footer/Footer.tsx
+++ b/packages/react/src/Footer/Footer.tsx
@@ -6,35 +6,10 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
-import { Spotlight } from '../Spotlight/Spotlight'
+import { FooterBottom } from './FooterBottom'
+import { FooterTop } from './FooterTop'
 
-export const FooterTop = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
-      {children}
-    </Spotlight>
-  ),
-)
-
-FooterTop.displayName = 'FooterTop'
-
-export const FooterBottom = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => (
-    <div {...restProps} ref={ref} className={clsx('amsterdam-footer__bottom', className)}>
-      {children}
-    </div>
-  ),
-)
-
-FooterBottom.displayName = 'FooterBottom'
-
-type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 interface FooterComponent extends ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>> {
   Top: typeof FooterTop
diff --git a/packages/react/src/Footer/FooterBottom.test.tsx b/packages/react/src/Footer/FooterBottom.test.tsx
new file mode 100644
index 0000000000..28e79a2ff8
--- /dev/null
+++ b/packages/react/src/Footer/FooterBottom.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { FooterBottom } from './FooterBottom'
+import '@testing-library/jest-dom'
+
+describe('Footer', () => {
+  it('renders', () => {
+    const { container } = render(<FooterBottom />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<FooterBottom />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-footer__bottom')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<FooterBottom className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-footer__bottom extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<FooterBottom ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/Footer/FooterBottom.tsx b/packages/react/src/Footer/FooterBottom.tsx
new file mode 100644
index 0000000000..0d5a75f2f1
--- /dev/null
+++ b/packages/react/src/Footer/FooterBottom.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const FooterBottom = forwardRef(
+  ({ children, className, ...restProps }: FooterBottomProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-footer__bottom', className)}>
+      {children}
+    </div>
+  ),
+)
+
+FooterBottom.displayName = 'FooterBottom'
diff --git a/packages/react/src/Footer/FooterTop.test.tsx b/packages/react/src/Footer/FooterTop.test.tsx
new file mode 100644
index 0000000000..57efd153b9
--- /dev/null
+++ b/packages/react/src/Footer/FooterTop.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { FooterTop } from './FooterTop'
+import '@testing-library/jest-dom'
+
+describe('Footer', () => {
+  it('renders', () => {
+    const { container } = render(<FooterTop />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<FooterTop />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-footer__top')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<FooterTop className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-footer__top extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLDivElement>()
+
+    const { container } = render(<FooterTop ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
new file mode 100644
index 0000000000..101fbe8a3c
--- /dev/null
+++ b/packages/react/src/Footer/FooterTop.tsx
@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { Spotlight } from '../Spotlight/Spotlight'
+
+export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const FooterTop = forwardRef(
+  ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('amsterdam-footer__top', className)}>
+      {children}
+    </Spotlight>
+  ),
+)
+
+FooterTop.displayName = 'FooterTop'
diff --git a/packages/react/src/Footer/index.ts b/packages/react/src/Footer/index.ts
index 0302b4ab03..de5c50f382 100644
--- a/packages/react/src/Footer/index.ts
+++ b/packages/react/src/Footer/index.ts
@@ -1 +1,4 @@
 export { Footer } from './Footer'
+export type { FooterProps } from './Footer'
+export type { FooterBottomProps } from './FooterBottom'
+export type { FooterTopProps } from './FooterTop'
diff --git a/packages/react/src/OrderedList/OrderedList.test.tsx b/packages/react/src/OrderedList/OrderedList.test.tsx
index 8933a3e7e6..b4c22cd773 100644
--- a/packages/react/src/OrderedList/OrderedList.test.tsx
+++ b/packages/react/src/OrderedList/OrderedList.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { OrderedList } from './OrderedList'
 import '@testing-library/jest-dom'
@@ -12,25 +12,28 @@ describe('Ordered List', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<OrderedList />)
-    const list = container.querySelector(':only-child')
+    render(<OrderedList />)
+
+    const component = screen.getByRole('list')
 
-    expect(list).toHaveClass('amsterdam-ordered-list')
+    expect(component).toHaveClass('amsterdam-ordered-list')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<OrderedList className="large" />)
-    const list = container.querySelector(':only-child')
+    render(<OrderedList className="extra" />)
+
+    const component = screen.getByRole('list')
 
-    expect(list).toHaveClass('large')
-    expect(list).toHaveClass('amsterdam-ordered-list')
+    expect(component).toHaveClass('amsterdam-ordered-list extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLOListElement>()
-    const { container } = render(<OrderedList ref={ref} />)
-    const list = container.querySelector(':only-child')
 
-    expect(ref.current).toBe(list)
+    render(<OrderedList ref={ref} />)
+
+    const component = screen.getByRole('list')
+
+    expect(ref.current).toBe(component)
   })
 })
diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx
index 55d135b029..16cbbc241d 100644
--- a/packages/react/src/OrderedList/OrderedList.tsx
+++ b/packages/react/src/OrderedList/OrderedList.tsx
@@ -5,14 +5,9 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type {
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  LiHTMLAttributes,
-  OlHTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, OlHTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { OrderedListItem } from './OrderedListItem'
+
 export interface OrderedListProps extends PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> {
   markers?: boolean
 }
@@ -22,32 +17,16 @@ interface OrderedListComponent extends ForwardRefExoticComponent<OrderedListProp
 }
 
 export const OrderedList = forwardRef(
-  ({ children, markers = true, className, ...restProps }: OrderedListProps, ref: ForwardedRef<HTMLOListElement>) => {
-    return (
-      <ol
-        ref={ref}
-        className={clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)}
-        {...restProps}
-      >
-        {children}
-      </ol>
-    )
-  },
+  ({ children, markers = true, className, ...restProps }: OrderedListProps, ref: ForwardedRef<HTMLOListElement>) => (
+    <ol
+      ref={ref}
+      className={clsx('amsterdam-ordered-list', !markers && 'amsterdam-ordered-list--no-markers', className)}
+      {...restProps}
+    >
+      {children}
+    </ol>
+  ),
 ) as OrderedListComponent
 
 OrderedList.displayName = 'OrderedList'
-
-export type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
-
-export const OrderedListItem = forwardRef(
-  ({ children, className, ...restProps }: OrderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-    return (
-      <li ref={ref} className={clsx('amsterdam-ordered-list__item', className)} {...restProps}>
-        {children}
-      </li>
-    )
-  },
-)
-
-OrderedListItem.displayName = 'OrderedListItem'
 OrderedList.Item = OrderedListItem
diff --git a/packages/react/src/OrderedList/OrderedListItem.test.tsx b/packages/react/src/OrderedList/OrderedListItem.test.tsx
new file mode 100644
index 0000000000..119c058360
--- /dev/null
+++ b/packages/react/src/OrderedList/OrderedListItem.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { OrderedListItem } from './OrderedListItem'
+import '@testing-library/jest-dom'
+
+describe('Ordered List Item', () => {
+  it('renders', () => {
+    render(<OrderedListItem />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toBeInTheDocument()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<OrderedListItem />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toHaveClass('amsterdam-ordered-list__item')
+  })
+
+  it('renders an additional class name', () => {
+    render(<OrderedListItem className="extra" />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toHaveClass('amsterdam-ordered-list__item extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLLIElement>()
+    render(<OrderedListItem ref={ref} />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/OrderedList/OrderedListItem.tsx b/packages/react/src/OrderedList/OrderedListItem.tsx
new file mode 100644
index 0000000000..fb7f1d6c38
--- /dev/null
+++ b/packages/react/src/OrderedList/OrderedListItem.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, LiHTMLAttributes, PropsWithChildren } from 'react'
+
+export type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
+
+export const OrderedListItem = forwardRef(
+  ({ children, className, ...restProps }: OrderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => (
+    <li ref={ref} className={clsx('amsterdam-ordered-list__item', className)} {...restProps}>
+      {children}
+    </li>
+  ),
+)
+
+OrderedListItem.displayName = 'OrderedListItem'
diff --git a/packages/react/src/OrderedList/index.ts b/packages/react/src/OrderedList/index.ts
index bd4ae47b5b..0d863b25f4 100644
--- a/packages/react/src/OrderedList/index.ts
+++ b/packages/react/src/OrderedList/index.ts
@@ -1,2 +1,3 @@
 export { OrderedList } from './OrderedList'
 export type { OrderedListProps } from './OrderedList'
+export type { OrderedListItemProps } from './OrderedListItem'
diff --git a/packages/react/src/PageMenu/PageMenu.test.tsx b/packages/react/src/PageMenu/PageMenu.test.tsx
index bf35e241a7..c6153156b5 100644
--- a/packages/react/src/PageMenu/PageMenu.test.tsx
+++ b/packages/react/src/PageMenu/PageMenu.test.tsx
@@ -36,7 +36,7 @@ describe('Page menu', () => {
   })
 
   it('is able to pass a React ref', () => {
-    const ref = createRef<HTMLElement>()
+    const ref = createRef<HTMLUListElement>()
     const { container } = render(
       <PageMenu ref={ref}>
         <PageMenu.Link href="#">English</PageMenu.Link>
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index 92d9657587..b592184503 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -5,18 +5,10 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
-import { Icon } from '../Icon'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { PageMenuLink } from './PageMenuLink'
 
-type PageMenuProps = {
+export type PageMenuProps = {
   /**
    * Whether the page menu’s items align to its end.
    * If the menu itself aligns to the end of its container, you should set this to `true`.
@@ -24,46 +16,22 @@ type PageMenuProps = {
   alignEnd?: boolean
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
-interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLElement>> {
+interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>> {
   Link: typeof PageMenuLink
 }
 
 export const PageMenu = forwardRef(
-  ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => {
-    return (
-      <ul
-        {...restProps}
-        className={clsx('amsterdam-page-menu', alignEnd && `amsterdam-page-menu--align-end`, className)}
-        ref={ref}
-      >
-        {children}
-      </ul>
-    )
-  },
+  ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => (
+    <ul
+      {...restProps}
+      className={clsx('amsterdam-page-menu', alignEnd && `amsterdam-page-menu--align-end`, className)}
+      ref={ref}
+    >
+      {children}
+    </ul>
+  ),
 ) as PageMenuComponent
 
-export interface PageMenuLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
-  icon?: Function
-}
-
-export interface PageMenuButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
-  icon?: Function
-  showOnMobile?: boolean
-}
-
-const PageMenuLink = forwardRef(
-  ({ children, icon, ...restProps }: PageMenuLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
-    return (
-      <li className="amsterdam-page-menu__item">
-        <a {...restProps} ref={ref} className="amsterdam-page-menu__link">
-          {children}
-          {icon && <Icon svg={icon} size="level-6" />}
-        </a>
-      </li>
-    )
-  },
-)
-
 PageMenu.displayName = 'PageMenu'
-PageMenuLink.displayName = 'PageMenu.Link'
 PageMenu.Link = PageMenuLink
+PageMenu.Link.displayName = 'PageMenu.Link'
diff --git a/packages/react/src/PageMenu/PageMenuLink.test.tsx b/packages/react/src/PageMenu/PageMenuLink.test.tsx
new file mode 100644
index 0000000000..b5911620dd
--- /dev/null
+++ b/packages/react/src/PageMenu/PageMenuLink.test.tsx
@@ -0,0 +1,68 @@
+import { ChevronRightIcon } from '@amsterdam/design-system-react-icons'
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { PageMenuLink } from './PageMenuLink'
+import '@testing-library/jest-dom'
+
+describe('PageMenuLink', () => {
+  it('renders with href attribute', () => {
+    render(<PageMenuLink href="#">Link</PageMenuLink>)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toHaveAttribute('href', '#')
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<PageMenuLink href="#">Link</PageMenuLink>)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-page-menu__link')
+  })
+
+  it('renders an additional class name', () => {
+    render(
+      <PageMenuLink href="#" className="extra">
+        Link
+      </PageMenuLink>,
+    )
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-page-menu__link extra')
+  })
+
+  it('does not render an icon by default', () => {
+    const { container } = render(<PageMenuLink href="#">Link</PageMenuLink>)
+
+    const svg = container.querySelector('.amsterdam-icon')
+
+    expect(svg).not.toBeInTheDocument()
+  })
+
+  it('renders an icon when specified', () => {
+    const { container } = render(
+      <PageMenuLink href="#" icon={ChevronRightIcon}>
+        Link
+      </PageMenuLink>,
+    )
+
+    const svg = container.querySelector('.amsterdam-icon')
+
+    expect(svg).toBeInTheDocument()
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLAnchorElement>()
+    render(
+      <PageMenuLink href="#" className="extra" ref={ref}>
+        Link
+      </PageMenuLink>,
+    )
+
+    const component = screen.getByRole('link')
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/PageMenu/PageMenuLink.tsx b/packages/react/src/PageMenu/PageMenuLink.tsx
new file mode 100644
index 0000000000..845a26c02a
--- /dev/null
+++ b/packages/react/src/PageMenu/PageMenuLink.tsx
@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
+import { Icon } from '../Icon'
+
+export interface PageMenuLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  icon?: Function
+}
+
+export const PageMenuLink = forwardRef(
+  ({ children, className, icon, ...restProps }: PageMenuLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
+    <li>
+      <a {...restProps} ref={ref} className={clsx('amsterdam-page-menu__link', className)}>
+        {children}
+        {icon && <Icon svg={icon} size="level-6" />}
+      </a>
+    </li>
+  ),
+)
+
+PageMenuLink.displayName = 'PageMenuLink'
diff --git a/packages/react/src/PageMenu/index.ts b/packages/react/src/PageMenu/index.ts
index e193be8541..2382fd2d4b 100644
--- a/packages/react/src/PageMenu/index.ts
+++ b/packages/react/src/PageMenu/index.ts
@@ -1,2 +1,3 @@
 export { PageMenu } from './PageMenu'
-export type { PageMenuLinkProps } from './PageMenu'
+export type { PageMenuProps } from './PageMenu'
+export type { PageMenuLinkProps } from './PageMenuLink'
diff --git a/packages/react/src/UnorderedList/UnorderedList.test.tsx b/packages/react/src/UnorderedList/UnorderedList.test.tsx
index d18ad19f1f..004ccd36ae 100644
--- a/packages/react/src/UnorderedList/UnorderedList.test.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { UnorderedList } from './UnorderedList'
 import '@testing-library/jest-dom'
@@ -12,25 +12,28 @@ describe('Unordered List', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<UnorderedList />)
-    const list = container.querySelector(':only-child')
+    render(<UnorderedList />)
+
+    const component = screen.getByRole('list')
 
-    expect(list).toHaveClass('amsterdam-unordered-list')
+    expect(component).toHaveClass('amsterdam-unordered-list')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<UnorderedList className="large" />)
-    const list = container.querySelector(':only-child')
+    render(<UnorderedList className="extra" />)
+
+    const component = screen.getByRole('list')
 
-    expect(list).toHaveClass('large')
-    expect(list).toHaveClass('amsterdam-unordered-list')
+    expect(component).toHaveClass('amsterdam-unordered-list extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLUListElement>()
-    const { container } = render(<UnorderedList ref={ref} />)
-    const list = container.querySelector(':only-child')
 
-    expect(ref.current).toBe(list)
+    render(<UnorderedList ref={ref} />)
+
+    const component = screen.getByRole('list')
+
+    expect(ref.current).toBe(component)
   })
 })
diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx
index e82e77e31c..eba6d74910 100644
--- a/packages/react/src/UnorderedList/UnorderedList.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.tsx
@@ -5,14 +5,8 @@
 
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import type {
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  LiHTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { UnorderedListItem } from './UnorderedListItem'
 
 export interface UnorderedListProps extends PropsWithChildren<HTMLAttributes<HTMLUListElement>> {
   markers?: boolean
@@ -38,18 +32,4 @@ export const UnorderedList = forwardRef(
 ) as UnorderedListComponent
 
 UnorderedList.displayName = 'UnorderedList'
-
-export type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
-
-export const UnorderedListItem = forwardRef(
-  ({ children, className, ...restProps }: UnorderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-    return (
-      <li ref={ref} className={clsx('amsterdam-unordered-list__item', className)} {...restProps}>
-        {children}
-      </li>
-    )
-  },
-)
-
-UnorderedListItem.displayName = 'UnorderedListItem'
 UnorderedList.Item = UnorderedListItem
diff --git a/packages/react/src/UnorderedList/UnorderedListItem.test.tsx b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
new file mode 100644
index 0000000000..7e3e8f7542
--- /dev/null
+++ b/packages/react/src/UnorderedList/UnorderedListItem.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { UnorderedListItem } from './UnorderedListItem'
+import '@testing-library/jest-dom'
+
+describe('Ordered List Item', () => {
+  it('renders', () => {
+    render(<UnorderedListItem />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toBeInTheDocument()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<UnorderedListItem />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toHaveClass('amsterdam-unordered-list__item')
+  })
+
+  it('renders an additional class name', () => {
+    render(<UnorderedListItem className="extra" />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(component).toHaveClass('amsterdam-unordered-list__item extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLLIElement>()
+    render(<UnorderedListItem ref={ref} />)
+
+    const component = screen.getByRole('listitem')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/UnorderedList/UnorderedListItem.tsx b/packages/react/src/UnorderedList/UnorderedListItem.tsx
new file mode 100644
index 0000000000..a34a9b6e3c
--- /dev/null
+++ b/packages/react/src/UnorderedList/UnorderedListItem.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, LiHTMLAttributes, PropsWithChildren } from 'react'
+
+export type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
+
+export const UnorderedListItem = forwardRef(
+  ({ children, className, ...restProps }: UnorderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => (
+    <li ref={ref} className={clsx('amsterdam-unordered-list__item', className)} {...restProps}>
+      {children}
+    </li>
+  ),
+)
+
+UnorderedListItem.displayName = 'UnorderedListItem'
diff --git a/packages/react/src/UnorderedList/index.ts b/packages/react/src/UnorderedList/index.ts
index b5ffc752b8..946b701d6c 100644
--- a/packages/react/src/UnorderedList/index.ts
+++ b/packages/react/src/UnorderedList/index.ts
@@ -1,2 +1,3 @@
 export { UnorderedList } from './UnorderedList'
 export type { UnorderedListProps } from './UnorderedList'
+export type { UnorderedListItemProps } from './UnorderedListItem'
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 68a99b5261..c100abae79 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -4,6 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "declaration": true,
+    "declarationDir": "dist/dts",
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 334aebbfce..eb0f9cec5b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,6 +205,9 @@ importers:
       rollup-plugin-delete:
         specifier: 2.0.0
         version: 2.0.0
+      rollup-plugin-dts:
+        specifier: 6.1.0
+        version: 6.1.0(rollup@4.9.4)(typescript@5.3.3)
       rollup-plugin-filesize:
         specifier: 10.0.0
         version: 10.0.0
@@ -411,10 +414,10 @@ importers:
         version: 7.6.7
       '@storybook/addon-docs':
         specifier: 7.6.7
-        version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/addon-essentials':
         specifier: 7.6.7
-        version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/addon-interactions':
         specifier: 7.6.7
         version: 7.6.7
@@ -429,10 +432,10 @@ importers:
         version: 7.6.7(react-dom@18.2.0)(react@18.2.0)
       '@storybook/blocks':
         specifier: 7.6.7
-        version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/components':
         specifier: 7.6.7
-        version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
       '@storybook/core-events':
         specifier: 7.6.7
         version: 7.6.7
@@ -477,7 +480,7 @@ importers:
         version: 7.6.7
       vite:
         specifier: 5.0.11
-        version: 5.0.11
+        version: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
 
 packages:
 
@@ -2780,7 +2783,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.3.3)
       typescript: 5.3.3
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
     dev: true
 
   /@jridgewell/gen-mapping@0.3.3:
@@ -3632,26 +3635,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-arrow@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -3676,29 +3659,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-collection@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.47)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -3766,30 +3726,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-dismissable-layer@1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.47)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
@@ -3827,28 +3763,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-focus-scope@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-id@1.0.1(@types/react@18.2.47)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -3894,35 +3808,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-popper@1.1.2(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@floating-ui/react-dom': 2.0.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
@@ -3944,26 +3829,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-portal@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
@@ -3985,26 +3850,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-primitive@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
@@ -4034,34 +3879,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-roving-focus@1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-select@1.2.2(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
     peerDependencies:
@@ -4103,46 +3920,6 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.47)(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-select@1.2.2(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.47)(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
     peerDependencies:
@@ -4164,26 +3941,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-separator@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.47)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -4226,32 +3983,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-toggle-group@1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toggle': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
     peerDependencies:
@@ -4275,28 +4006,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-toggle@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==}
     peerDependencies:
@@ -4324,32 +4033,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-toolbar@1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-separator': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toggle-group': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.47)(react@18.2.0):
     resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
     peerDependencies:
@@ -4473,26 +4156,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  /@radix-ui/react-visually-hidden@1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.8
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.47
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: true
-
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
     dependencies:
@@ -4562,20 +4225,6 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@rollup/pluginutils@5.1.0:
-    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@types/estree': 1.0.2
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@rollup/pluginutils@5.1.0(rollup@4.9.4):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -4853,21 +4502,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-controls@7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-DJ3gfvcdCgqi7AQxu83vx0AEUKiuJrNcSATfWV3Jqi8dH6fYO2yqpemHEeWOEy+DAHxIOaqLKwb1QjIBj+vSRQ==}
-    dependencies:
-      '@storybook/blocks': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      lodash: 4.17.21
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - react
-      - react-dom
-      - supports-color
-    dev: true
-
   /@storybook/addon-docs@7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2dfajNhweofJ3LxjGO83UE5sBMvKtJB0Agj7q8mMtK/9PUCUcbvsFSyZnO/s6X1zAjSn5ZrirbSoTXU4IqxwSA==}
     peerDependencies:
@@ -4902,40 +4536,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-docs@7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2dfajNhweofJ3LxjGO83UE5sBMvKtJB0Agj7q8mMtK/9PUCUcbvsFSyZnO/s6X1zAjSn5ZrirbSoTXU4IqxwSA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@jest/transform': 29.7.0
-      '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@storybook/blocks': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.6.7
-      '@storybook/components': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/csf-plugin': 7.6.7
-      '@storybook/csf-tools': 7.6.7
-      '@storybook/global': 5.0.0
-      '@storybook/mdx2-csf': 1.1.0
-      '@storybook/node-logger': 7.6.7
-      '@storybook/postinstall': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
-      fs-extra: 11.2.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      remark-external-links: 8.0.0
-      remark-slug: 6.1.0
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
-    dev: true
-
   /@storybook/addon-essentials@7.6.7(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-nNLMrpIvc04z4XCA+kval/44eKAFJlUJeeL2pxwP7F/PSzjWe5BXv1bQHOiw8inRO5II0PzqwWnVCI9jsj7K5A==}
     peerDependencies:
@@ -4965,35 +4565,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/addon-essentials@7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-nNLMrpIvc04z4XCA+kval/44eKAFJlUJeeL2pxwP7F/PSzjWe5BXv1bQHOiw8inRO5II0PzqwWnVCI9jsj7K5A==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@storybook/addon-actions': 7.6.7
-      '@storybook/addon-backgrounds': 7.6.7
-      '@storybook/addon-controls': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-docs': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-highlight': 7.6.7
-      '@storybook/addon-measure': 7.6.7
-      '@storybook/addon-outline': 7.6.7
-      '@storybook/addon-toolbars': 7.6.7
-      '@storybook/addon-viewport': 7.6.7
-      '@storybook/core-common': 7.6.7
-      '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/node-logger': 7.6.7
-      '@storybook/preview-api': 7.6.7
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
-    dev: true
-
   /@storybook/addon-highlight@7.6.7:
     resolution: {integrity: sha512-2F/tJdn45d4zrvf/cmE1vsczl99wK8+I+kkj0G7jLsrJR0w1zTgbgjy6T9j86HBTBvWcnysNFNIRWPAOh5Wdbw==}
     dependencies:
@@ -5107,44 +4678,6 @@ packages:
       - supports-color
     dev: true
 
-  /@storybook/blocks@7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-+QEvGQ0he/YvFS3lsZORJWxhQIyqcCDWsxbJxJiByePd+Z4my3q8xwtPhHW0TKRL0xUgNE/GnTfMMqJfevTuSw==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@storybook/channels': 7.6.7
-      '@storybook/client-logger': 7.6.7
-      '@storybook/components': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/core-events': 7.6.7
-      '@storybook/csf': 0.1.2
-      '@storybook/docs-tools': 7.6.7
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/preview-api': 7.6.7
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
-      '@types/lodash': 4.14.202
-      color-convert: 2.0.1
-      dequal: 2.0.3
-      lodash: 4.17.21
-      markdown-to-jsx: 7.2.0(react@18.2.0)
-      memoizerific: 1.11.3
-      polished: 4.2.2
-      react: 18.2.0
-      react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0)
-      react-dom: 18.2.0(react@18.2.0)
-      telejson: 7.2.0
-      tocbot: 4.21.0
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
-    dev: true
-
   /@storybook/builder-manager@7.6.7:
     resolution: {integrity: sha512-6HYpj6+g/qbDMvImVz/G/aANbkhppyBa1ozfHxLK7tRD79YvozCWmj2Z9umRekPv9VIeMxnI5EEzJXOsoMX5DQ==}
     dependencies:
@@ -5201,7 +4734,7 @@ packages:
       magic-string: 0.30.5
       rollup: 3.29.4
       typescript: 5.3.3
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -5320,29 +4853,6 @@ packages:
       - '@types/react-dom'
     dev: true
 
-  /@storybook/components@7.6.7(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-1HN4p+MCI4Tx9VGZayZyqbW7SB7mXQLnS5fUbTE1gXaMYHpzFvcrRNROeV1LZPClJX6qx1jgE5ngZojhxGuxMA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@radix-ui/react-select': 1.2.2(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toolbar': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/client-logger': 7.6.7
-      '@storybook/csf': 0.1.2
-      '@storybook/global': 5.0.0
-      '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/types': 7.6.7
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-    dev: true
-
   /@storybook/core-client@7.6.7:
     resolution: {integrity: sha512-ZQivyEzYsZok8vRj5Qan7LbiMUnO89rueWzTnZs4IS6JIaQtjoPI1rGVq+h6qOCM6tki478hic8FS+zwGQ6q+w==}
     dependencies:
@@ -5572,7 +5082,7 @@ packages:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.3.3)(vite@5.0.11)
-      '@rollup/pluginutils': 5.1.0
+      '@rollup/pluginutils': 5.1.0(rollup@4.9.4)
       '@storybook/builder-vite': 7.6.7(typescript@5.3.3)(vite@5.0.11)
       '@storybook/react': 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)
       '@vitejs/plugin-react': 3.1.0(vite@5.0.11)
@@ -5580,7 +5090,7 @@ packages:
       react: 18.2.0
       react-docgen: 7.0.1
       react-dom: 18.2.0(react@18.2.0)
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -6591,7 +6101,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -6607,7 +6117,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.11
+      vite: 5.0.11(@types/node@20.10.7)(sass@1.69.7)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -11708,7 +11218,7 @@ packages:
     dependencies:
       '@babel/core': 7.23.7
       '@babel/generator': 7.23.6
-      '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.7)
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7)
       '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.23.7)
       '@babel/types': 7.23.6
       '@jest/expect-utils': 29.7.0
@@ -15721,6 +15231,20 @@ packages:
       del: 5.1.0
     dev: true
 
+  /rollup-plugin-dts@6.1.0(rollup@4.9.4)(typescript@5.3.3):
+    resolution: {integrity: sha512-ijSCPICkRMDKDLBK9torss07+8dl9UpY9z1N/zTeA1cIqdzMlpkV3MOOC7zukyvQfDyxa1s3Dl2+DeiP/G6DOw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
+    dependencies:
+      magic-string: 0.30.5
+      rollup: 4.9.4
+      typescript: 5.3.3
+    optionalDependencies:
+      '@babel/code-frame': 7.23.5
+    dev: true
+
   /rollup-plugin-filesize@10.0.0:
     resolution: {integrity: sha512-JAYYhzCcmGjmCzo3LEHSDE3RAPHKIeBdpqRhiyZSv5o/3wFhktUOzYAWg/uUKyEu5dEaVaql6UOmaqHx1qKrZA==}
     engines: {node: '>=16.0.0'}
@@ -17666,41 +17190,6 @@ packages:
       vfile-message: 4.0.2
     dev: true
 
-  /vite@5.0.11:
-    resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
-    engines: {node: ^18.0.0 || >=20.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || >=20.0.0
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      esbuild: 0.19.7
-      postcss: 8.4.33
-      rollup: 4.9.4
-    optionalDependencies:
-      fsevents: 2.3.3
-    dev: true
-
   /vite@5.0.11(@types/node@20.10.7)(sass@1.69.7):
     resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
     engines: {node: ^18.0.0 || >=20.0.0}

From d346cdfd2b3c7fab08e6bae10314420f1fde8a5f Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 26 Jan 2024 13:30:14 +0100
Subject: [PATCH 2/2] feat: Add Badge component (#1045)

Co-authored-by: Vincent Smedinga <vincent@smedinga.nl>
Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 documentation/storybook.md                    |  3 +-
 packages/css/src/components/badge/README.md   | 10 +++
 packages/css/src/components/badge/badge.scss  | 58 ++++++++++++++++
 packages/css/src/components/index.scss        |  1 +
 packages/react/src/Badge/Badge.test.tsx       | 67 +++++++++++++++++++
 packages/react/src/Badge/Badge.tsx            | 36 ++++++++++
 packages/react/src/Badge/README.md            |  3 +
 packages/react/src/Badge/index.ts             |  2 +
 packages/react/src/index.ts                   |  1 +
 .../components/amsterdam/badge.tokens.json    | 49 ++++++++++++++
 .../src/Accordion/Accordion.stories.tsx       |  8 ++-
 .../storybook-react/src/Badge/Badge.docs.mdx  | 15 +++++
 .../src/Badge/Badge.stories.tsx               | 30 +++++++++
 .../storybook-react/src/Grid/Grid.stories.tsx | 20 ++++--
 .../src/Header/Header.stories.tsx             |  2 +-
 .../storybook-react/src/Icon/Icon.stories.tsx | 12 +++-
 .../src/IconButton/IconButton.stories.tsx     |  4 +-
 .../storybook-react/src/Link/Link.stories.tsx | 11 ++-
 .../storybook-react/src/Logo/Logo.stories.tsx |  2 +-
 .../src/Paragraph/Paragraph.stories.tsx       |  2 +-
 .../src/Spotlight/Spotlight.stories.tsx       |  8 ++-
 21 files changed, 324 insertions(+), 20 deletions(-)
 create mode 100644 packages/css/src/components/badge/README.md
 create mode 100644 packages/css/src/components/badge/badge.scss
 create mode 100644 packages/react/src/Badge/Badge.test.tsx
 create mode 100644 packages/react/src/Badge/Badge.tsx
 create mode 100644 packages/react/src/Badge/README.md
 create mode 100644 packages/react/src/Badge/index.ts
 create mode 100644 proprietary/tokens/src/components/amsterdam/badge.tokens.json
 create mode 100644 storybook/storybook-react/src/Badge/Badge.docs.mdx
 create mode 100644 storybook/storybook-react/src/Badge/Badge.stories.tsx

diff --git a/documentation/storybook.md b/documentation/storybook.md
index b7c0374ecf..107101c91b 100644
--- a/documentation/storybook.md
+++ b/documentation/storybook.md
@@ -19,7 +19,8 @@ We write our documentation in Dutch.
 
 ## Best practices for controls
 
-1. For props offering five options or less, use radio buttons rather than a dropdown. This makes it easier to compare the options. It saves the user a click to select each option and clearly shows all of them up front.
+1. For props offering five options or less, use radio buttons rather than a select. This makes it easier to compare the options. It saves the user a click to select each option and clearly shows all of them up front.
+2. Don’t use inline radios. Their options appear rather small, making them difficult to target with a pointing device.
 
 More to follow.
 
diff --git a/packages/css/src/components/badge/README.md b/packages/css/src/components/badge/README.md
new file mode 100644
index 0000000000..740d4831b0
--- /dev/null
+++ b/packages/css/src/components/badge/README.md
@@ -0,0 +1,10 @@
+# Badge
+
+A prominently coloured box containing 1 or 2 words.
+Guides the user in taking a specific action or describes its surrounding content.
+
+## Design
+
+The badge can contain a short text or a number.
+The default background colour is dark green.
+Suggestions on when to use the other colours will follow soon.
diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
new file mode 100644
index 0000000000..1c20a45492
--- /dev/null
+++ b/packages/css/src/components/badge/badge.scss
@@ -0,0 +1,58 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+.amsterdam-badge {
+  display: inline-block;
+  font-family: var(--amsterdam-badge-font-family);
+  font-size: var(--amsterdam-badge-spacious-font-size);
+  font-weight: var(--amsterdam-badge-font-weight);
+  line-height: var(--amsterdam-badge-spacious-line-height);
+  padding-inline: var(--amsterdam-badge-padding-inline);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-badge-compact-font-size);
+    line-height: var(--amsterdam-badge-compact-line-height);
+  }
+}
+
+.amsterdam-badge--blue {
+  background-color: var(--amsterdam-badge-blue-background-color);
+  color: var(--amsterdam-badge-blue-color);
+}
+
+.amsterdam-badge--dark-blue {
+  background-color: var(--amsterdam-badge-dark-blue-background-color);
+  color: var(--amsterdam-badge-dark-blue-color);
+}
+
+.amsterdam-badge--dark-green {
+  background-color: var(--amsterdam-badge-dark-green-background-color);
+  color: var(--amsterdam-badge-dark-green-color);
+}
+
+.amsterdam-badge--green {
+  background-color: var(--amsterdam-badge-green-background-color);
+  color: var(--amsterdam-badge-green-color);
+}
+
+.amsterdam-badge--magenta {
+  background-color: var(--amsterdam-badge-magenta-background-color);
+  color: var(--amsterdam-badge-magenta-color);
+}
+
+.amsterdam-badge--orange {
+  background-color: var(--amsterdam-badge-orange-background-color);
+  color: var(--amsterdam-badge-orange-color);
+}
+
+.amsterdam-badge--purple {
+  background-color: var(--amsterdam-badge-purple-background-color);
+  color: var(--amsterdam-badge-purple-color);
+}
+
+.amsterdam-badge--yellow {
+  background-color: var(--amsterdam-badge-yellow-background-color);
+  color: var(--amsterdam-badge-yellow-color);
+}
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index f4374cd68d..247c622e19 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./badge/badge";
 @import "./table/table";
 @import "./mega-menu/mega-menu";
 @import "./icon-button/icon-button";
diff --git a/packages/react/src/Badge/Badge.test.tsx b/packages/react/src/Badge/Badge.test.tsx
new file mode 100644
index 0000000000..5d029e2d57
--- /dev/null
+++ b/packages/react/src/Badge/Badge.test.tsx
@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { Badge, badgeColors } from './Badge'
+import '@testing-library/jest-dom'
+
+describe('Badge', () => {
+  it('renders', () => {
+    const { container } = render(<Badge label="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<Badge label="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<Badge label="test" className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<Badge label="test" ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+
+  it('renders with a number label', () => {
+    const { container } = render(<Badge label={1} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveTextContent('1')
+  })
+
+  it('renders with default color', () => {
+    const { container } = render(<Badge label="test" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-badge--dark-green')
+  })
+
+  badgeColors.map((color) =>
+    it(`renders with ${color} color`, () => {
+      const { container } = render(<Badge label="test" color={color} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-badge--${color}`)
+    }),
+  )
+})
diff --git a/packages/react/src/Badge/Badge.tsx b/packages/react/src/Badge/Badge.tsx
new file mode 100644
index 0000000000..56a1571aaa
--- /dev/null
+++ b/packages/react/src/Badge/Badge.tsx
@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
+
+export const badgeColors = [
+  'blue',
+  'dark-blue',
+  'dark-green',
+  'green',
+  'magenta',
+  'orange',
+  'purple',
+  'yellow',
+] as const
+
+type BadgeColor = (typeof badgeColors)[number]
+
+export type BadgeProps = {
+  color?: BadgeColor
+  label: string | number
+} & HTMLAttributes<HTMLElement>
+
+export const Badge = forwardRef(
+  ({ label, className, color = 'dark-green', ...restProps }: BadgeProps, ref: ForwardedRef<HTMLElement>) => (
+    <span {...restProps} ref={ref} className={clsx('amsterdam-badge', `amsterdam-badge--${color}`, className)}>
+      {label}
+    </span>
+  ),
+)
+
+Badge.displayName = 'Badge'
diff --git a/packages/react/src/Badge/README.md b/packages/react/src/Badge/README.md
new file mode 100644
index 0000000000..b34e77c7c1
--- /dev/null
+++ b/packages/react/src/Badge/README.md
@@ -0,0 +1,3 @@
+# React Badge component
+
+[Badge documentation](../../../css/src/badge/README.md)
diff --git a/packages/react/src/Badge/index.ts b/packages/react/src/Badge/index.ts
new file mode 100644
index 0000000000..292a59dbf2
--- /dev/null
+++ b/packages/react/src/Badge/index.ts
@@ -0,0 +1,2 @@
+export { Badge } from './Badge'
+export type { BadgeProps } from './Badge'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 992c789f5c..9df069b981 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './Badge'
 export * from './Table'
 export * from './MegaMenu'
 export * from './IconButton'
diff --git a/proprietary/tokens/src/components/amsterdam/badge.tokens.json b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
new file mode 100644
index 0000000000..0a722c1226
--- /dev/null
+++ b/proprietary/tokens/src/components/amsterdam/badge.tokens.json
@@ -0,0 +1,49 @@
+{
+  "amsterdam": {
+    "badge": {
+      "font-family": { "value": "{amsterdam.typography.font-family}" },
+      "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
+      "padding-inline": { "value": "0.5rem" },
+      "spacious": {
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
+      },
+      "compact": {
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
+      },
+      "blue": {
+        "background-color": { "value": "{amsterdam.color.blue}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "dark-blue": {
+        "background-color": { "value": "{amsterdam.color.primary-blue}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "dark-green": {
+        "background-color": { "value": "{amsterdam.color.dark-green}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "green": {
+        "background-color": { "value": "{amsterdam.color.green}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "magenta": {
+        "background-color": { "value": "{amsterdam.color.magenta}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "orange": {
+        "background-color": { "value": "{amsterdam.color.orange}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      },
+      "purple": {
+        "background-color": { "value": "{amsterdam.color.purple}" },
+        "color": { "value": "{amsterdam.color.primary-white}" }
+      },
+      "yellow": {
+        "background-color": { "value": "{amsterdam.color.yellow}" },
+        "color": { "value": "{amsterdam.color.primary-black}" }
+      }
+    }
+  }
+}
diff --git a/storybook/storybook-react/src/Accordion/Accordion.stories.tsx b/storybook/storybook-react/src/Accordion/Accordion.stories.tsx
index 3108a2106e..6b2cc639ee 100644
--- a/storybook/storybook-react/src/Accordion/Accordion.stories.tsx
+++ b/storybook/storybook-react/src/Accordion/Accordion.stories.tsx
@@ -24,11 +24,15 @@ const meta = {
       },
     },
     headingLevel: {
-      control: { type: 'select' },
+      control: {
+        type: 'radio',
+      },
       options: [1, 2, 3, 4],
     },
     section: {
-      control: { type: 'boolean' },
+      control: {
+        type: 'boolean',
+      },
     },
   },
 } satisfies Meta<typeof Accordion>
diff --git a/storybook/storybook-react/src/Badge/Badge.docs.mdx b/storybook/storybook-react/src/Badge/Badge.docs.mdx
new file mode 100644
index 0000000000..2a21267d46
--- /dev/null
+++ b/storybook/storybook-react/src/Badge/Badge.docs.mdx
@@ -0,0 +1,15 @@
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as BadgeStories from "./Badge.stories.tsx";
+import README from "../../../../packages/css/src/components/badge/README.md?raw";
+
+<Meta of={BadgeStories} />
+
+<Markdown>{README}</Markdown>
+
+## Stories
+
+### Default
+
+<Primary />
+
+<Controls />
diff --git a/storybook/storybook-react/src/Badge/Badge.stories.tsx b/storybook/storybook-react/src/Badge/Badge.stories.tsx
new file mode 100644
index 0000000000..130951da4d
--- /dev/null
+++ b/storybook/storybook-react/src/Badge/Badge.stories.tsx
@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+import { Badge } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Feedback/Badge',
+  component: Badge,
+  args: {
+    label: 'Tip',
+  },
+  argTypes: {
+    color: {
+      control: {
+        type: 'select',
+      },
+      options: ['blue', 'dark-blue', 'dark-green', 'green', 'magenta', 'orange', 'purple', 'yellow'],
+      selected: 'dark-green',
+    },
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
index f6af49f610..12af326926 100644
--- a/storybook/storybook-react/src/Grid/Grid.stories.tsx
+++ b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -18,7 +18,9 @@ const argTypes = {
 
 const gridArgTypes = {
   compact: {
-    control: { type: 'boolean' },
+    control: {
+      type: 'boolean',
+    },
   },
   gapVertical: {
     control: {
@@ -34,14 +36,24 @@ const gridArgTypes = {
 
 const gridCellArgTypes = {
   as: {
-    control: { type: 'inline-radio' },
+    control: {
+      type: 'radio',
+    },
     options: ['article', 'div', 'section'],
   },
   span: {
-    control: { type: 'number', min: 1, max: 12 },
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+    },
   },
   start: {
-    control: { type: 'number', min: 1, max: 12 },
+    control: {
+      type: 'number',
+      min: 1,
+      max: 12,
+    },
   },
 }
 
diff --git a/storybook/storybook-react/src/Header/Header.stories.tsx b/storybook/storybook-react/src/Header/Header.stories.tsx
index f269d04b37..15f1bc5297 100644
--- a/storybook/storybook-react/src/Header/Header.stories.tsx
+++ b/storybook/storybook-react/src/Header/Header.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
   argTypes: {
     logoBrand: {
       control: {
-        type: 'select',
+        type: 'radio',
       },
       options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'],
     },
diff --git a/storybook/storybook-react/src/Icon/Icon.stories.tsx b/storybook/storybook-react/src/Icon/Icon.stories.tsx
index d7a2b0cc4c..802db0ccf7 100644
--- a/storybook/storybook-react/src/Icon/Icon.stories.tsx
+++ b/storybook/storybook-react/src/Icon/Icon.stories.tsx
@@ -12,14 +12,20 @@ const meta = {
   component: Icon,
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: {
+        type: 'radio',
+      },
       options: ['level-3', 'level-4', 'level-5', 'level-6'],
     },
     square: {
-      control: { type: 'boolean' },
+      control: {
+        type: 'boolean',
+      },
     },
     svg: {
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
       options: Object.keys(Icons),
       mapping: Icons,
     },
diff --git a/storybook/storybook-react/src/IconButton/IconButton.stories.tsx b/storybook/storybook-react/src/IconButton/IconButton.stories.tsx
index 19e887e650..abb9b0ba19 100644
--- a/storybook/storybook-react/src/IconButton/IconButton.stories.tsx
+++ b/storybook/storybook-react/src/IconButton/IconButton.stories.tsx
@@ -31,7 +31,9 @@ const meta = {
       options: ['level-3', 'level-4', 'level-5', 'level-6'],
     },
     svg: {
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
       options: Object.keys(Icons),
       mapping: Icons,
     },
diff --git a/storybook/storybook-react/src/Link/Link.stories.tsx b/storybook/storybook-react/src/Link/Link.stories.tsx
index c058718a02..44d37aaff2 100644
--- a/storybook/storybook-react/src/Link/Link.stories.tsx
+++ b/storybook/storybook-react/src/Link/Link.stories.tsx
@@ -14,7 +14,9 @@ const meta = {
   component: Link,
   argTypes: {
     icon: {
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
       options: Object.keys(Icons),
       mapping: Icons,
       table: {
@@ -22,7 +24,10 @@ const meta = {
       },
     },
     onBackground: {
-      control: { type: 'select', labels: { undefined: 'default', light: 'light', dark: 'dark' } },
+      control: {
+        type: 'radio',
+        labels: { undefined: 'default', light: 'light', dark: 'dark' },
+      },
       options: [undefined, 'light', 'dark'],
       table: {
         category: 'API',
@@ -30,7 +35,7 @@ const meta = {
     },
     variant: {
       control: {
-        type: 'select',
+        type: 'radio',
         labels: { standalone: 'standalone', inline: 'inline', inList: 'inList' },
       },
       options: ['standalone', 'inline', 'inList'],
diff --git a/storybook/storybook-react/src/Logo/Logo.stories.tsx b/storybook/storybook-react/src/Logo/Logo.stories.tsx
index de319d64ca..634e024fbb 100644
--- a/storybook/storybook-react/src/Logo/Logo.stories.tsx
+++ b/storybook/storybook-react/src/Logo/Logo.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
   argTypes: {
     brand: {
       control: {
-        type: 'select',
+        type: 'radio',
       },
       options: ['amsterdam', 'ggd-amsterdam', 'stadsarchief', 'stadsbank-van-lening', 'vga-verzekeringen'],
     },
diff --git a/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx b/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx
index d52efb3473..c73887c059 100644
--- a/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx
+++ b/storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   argTypes: {
     size: {
       control: {
-        type: 'select',
+        type: 'radio',
         labels: { undefined: 'default', large: 'large', small: 'small' },
       },
       options: [undefined, 'large', 'small'],
diff --git a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx
index b106b0af84..fc6427a8c4 100644
--- a/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx
+++ b/storybook/storybook-react/src/Spotlight/Spotlight.stories.tsx
@@ -14,13 +14,14 @@ const meta = {
   component: Spotlight,
   argTypes: {
     as: {
-      control: { type: 'inline-radio' },
+      control: {
+        type: 'radio',
+      },
       options: ['article', 'aside', 'div', 'footer', 'section'],
     },
     color: {
-      options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'],
       control: {
-        type: 'radio',
+        type: 'select',
         labels: {
           blue: 'Blauw',
           'dark-green': 'Donkergroen',
@@ -32,6 +33,7 @@ const meta = {
           yellow: 'Geel',
         },
       },
+      options: ['blue', 'dark-green', 'green', 'light-blue', 'magenta', 'orange', 'purple', 'yellow'],
     },
     children: {
       control: {