diff --git a/packages/css/src/components/grid/README.md b/packages/css/src/components/grid/README.md
index 09061304ea..f1f7a07a5f 100644
--- a/packages/css/src/components/grid/README.md
+++ b/packages/css/src/components/grid/README.md
@@ -7,7 +7,7 @@ Verdeelt de breedte van het scherm in kolommen waarop de elementen van een pagin
 Elke pagina moet het grid gebruiken als basis voor de layout.
 Het staat dus direct binnen [Screen](?path=/docs/layout-screen--docs).
 
-Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Spotlight](?path=/docs/react_containers-spotlight--docs) zijn iets breder dan het grid.
 Vóór deze componenten sluit je een instantie van het grid af.
 Erbinnen en eventueel erna start je een nieuwe.
 Meerdere instanties van het grid component zijn dus mogelijk op een pagina.
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}