diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx
index 2f65c8ec27..61dcffe841 100644
--- a/packages/react/src/Accordion/Accordion.tsx
+++ b/packages/react/src/Accordion/Accordion.tsx
@@ -4,16 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import AccordionContext from './AccordionContext'
 import { AccordionSection } from './AccordionSection'
 import useFocusWithArrows from './useFocusWithArrows'
diff --git a/packages/react/src/Accordion/AccordionSection.tsx b/packages/react/src/Accordion/AccordionSection.tsx
index 0e4a162649..6908d14c92 100644
--- a/packages/react/src/Accordion/AccordionSection.tsx
+++ b/packages/react/src/Accordion/AccordionSection.tsx
@@ -5,19 +5,20 @@
 
 import { ChevronDownIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, useContext, useId, useState } from 'react'
+import { forwardRef, useContext, useId, useState } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import AccordionContext from './AccordionContext'
 import { getHeadingElement } from '../Heading/Heading'
 import { Icon } from '../Icon/Icon'
 
-export interface AccordionSectionProps extends HTMLAttributes<HTMLElement> {
+export interface AccordionSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
   label: string
   expanded?: boolean
 }
 
 export const AccordionSection = forwardRef(
   (
-    { label, expanded = false, children, className, ...otherProps }: PropsWithChildren<AccordionSectionProps>,
+    { label, expanded = false, children, className, ...otherProps }: AccordionSectionProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
     const { headingLevel, section } = useContext(AccordionContext)
diff --git a/packages/react/src/AspectRatio/AspectRatio.tsx b/packages/react/src/AspectRatio/AspectRatio.tsx
index e3cf5de642..7dadac092b 100644
--- a/packages/react/src/AspectRatio/AspectRatio.tsx
+++ b/packages/react/src/AspectRatio/AspectRatio.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide'
 
diff --git a/packages/react/src/Blockquote/Blockquote.tsx b/packages/react/src/Blockquote/Blockquote.tsx
index 158fdb1322..4d5fac6081 100644
--- a/packages/react/src/Blockquote/Blockquote.tsx
+++ b/packages/react/src/Blockquote/Blockquote.tsx
@@ -4,9 +4,10 @@
  */
 
 import clsx from 'clsx'
-import { BlockquoteHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { BlockquoteHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+export interface BlockquoteProps extends PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> {
   /**
    * De kleur van het citaat.
    * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
@@ -15,10 +16,7 @@ export interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteEleme
 }
 
 export const Blockquote = forwardRef(
-  (
-    { children, className, inverseColor, ...restProps }: PropsWithChildren<BlockquoteProps>,
-    ref: ForwardedRef<HTMLQuoteElement>,
-  ) => (
+  ({ children, className, inverseColor, ...restProps }: BlockquoteProps, ref: ForwardedRef<HTMLQuoteElement>) => (
     <blockquote
       {...restProps}
       ref={ref}
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx
index 4f91b8aedc..814b4470bc 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx
@@ -1,13 +1,12 @@
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
-
-type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+
+export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>> {
   Item: typeof BreadcrumbItem
diff --git a/packages/react/src/Breadcrumb/index.ts b/packages/react/src/Breadcrumb/index.ts
index ad77f3e696..ea5d50941e 100644
--- a/packages/react/src/Breadcrumb/index.ts
+++ b/packages/react/src/Breadcrumb/index.ts
@@ -1,2 +1,2 @@
 export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbItemProps } from './Breadcrumb'
+export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb'
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 1c86db82d7..63ae34338f 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -6,9 +6,10 @@
 
 import { Button as CommunityButton } from '@utrecht/component-library-react'
 import clsx from 'clsx'
-import { ButtonHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
@@ -26,10 +27,7 @@ function getAppearance(variant: ButtonProps['variant']): CommunityButtonAppearan
 }
 
 export const Button = forwardRef(
-  (
-    { children, disabled, variant = 'primary', ...restProps }: PropsWithChildren<ButtonProps>,
-    ref: ForwardedRef<HTMLButtonElement>,
-  ) => {
+  ({ children, disabled, variant = 'primary', ...restProps }: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
     return (
       <CommunityButton
         {...restProps}
diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx
index 1edfe6e855..226feaee76 100644
--- a/packages/react/src/Card/Card.tsx
+++ b/packages/react/src/Card/Card.tsx
@@ -4,10 +4,10 @@
  */
 
 import clsx from 'clsx'
-import {
+import { forwardRef } from 'react'
+import type {
   AnchorHTMLAttributes,
   ForwardedRef,
-  forwardRef,
   ForwardRefExoticComponent,
   HTMLAttributes,
   PropsWithChildren,
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index f43dfd8002..2763bcf4a3 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -4,25 +4,17 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  InputHTMLAttributes,
-  PropsWithChildren,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-} from 'react'
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react'
+import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps extends PropsWithChildren<InputHTMLAttributes<HTMLInputElement>> {
   invalid?: boolean
   indeterminate?: boolean
 }
 
 export const Checkbox = forwardRef(
   (
-    { children, className, invalid, indeterminate, ...restProps }: PropsWithChildren<CheckboxProps>,
+    { children, className, invalid, indeterminate, ...restProps }: CheckboxProps,
     ref: ForwardedRef<HTMLInputElement>,
   ) => {
     const id = useId()
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 13d5ad62b1..7d6ce96a2f 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { DialogHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import type { DialogHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { IconButton } from '../IconButton'
 
 export interface DialogProps extends PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> {
diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
index 57f444cdbb..ce6937c0da 100644
--- a/packages/react/src/Footer/Footer.tsx
+++ b/packages/react/src/Footer/Footer.tsx
@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { Spotlight } from '../Spotlight/Spotlight'
 
 export const FooterTop = forwardRef(
diff --git a/packages/react/src/FormLabel/FormLabel.tsx b/packages/react/src/FormLabel/FormLabel.tsx
index cac1163f45..6b3b738a24 100644
--- a/packages/react/src/FormLabel/FormLabel.tsx
+++ b/packages/react/src/FormLabel/FormLabel.tsx
@@ -5,7 +5,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, LabelHTMLAttributes, PropsWithChildren } from 'react'
 
 export const FormLabel = forwardRef(
   (
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 3074605e68..f010c3e984 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { GridCell } from './GridCell'
 
 export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
diff --git a/packages/react/src/Grid/GridCell.tsx b/packages/react/src/Grid/GridCell.tsx
index 1455757195..0f6ad322ca 100644
--- a/packages/react/src/Grid/GridCell.tsx
+++ b/packages/react/src/Grid/GridCell.tsx
@@ -3,7 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 import clsx from 'clsx'
-import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { GridColumnNumber, GridColumnNumbers } from './Grid'
 import { gridCellClasses } from './gridCellClasses'
 
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 58431439d8..198007896b 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 import { Heading } from '../Heading'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 7caaaf6806..0068eeafc7 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -5,12 +5,13 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type HeadingLevel = 1 | 2 | 3 | 4
 type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'
 
-export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+export interface HeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
   /**
    * Het hiërarchische niveau van de titel.
    */
@@ -42,7 +43,7 @@ export function getHeadingElement(level: HeadingLevel) {
 
 export const Heading = forwardRef(
   (
-    { children, className, inverseColor, level = 1, size, ...restProps }: PropsWithChildren<HeadingProps>,
+    { children, className, inverseColor, level = 1, size, ...restProps }: HeadingProps,
     ref: ForwardedRef<HTMLHeadingElement>,
   ) => {
     const HeadingX = getHeadingElement(level)
diff --git a/packages/react/src/Icon/Icon.tsx b/packages/react/src/Icon/Icon.tsx
index 722f0855d0..64f56f09a5 100644
--- a/packages/react/src/Icon/Icon.tsx
+++ b/packages/react/src/Icon/Icon.tsx
@@ -6,7 +6,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx
index ec866f55a0..7c0dbf5067 100644
--- a/packages/react/src/IconButton/IconButton.tsx
+++ b/packages/react/src/IconButton/IconButton.tsx
@@ -5,7 +5,8 @@
 
 import { CloseIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ButtonHTMLAttributes, ForwardedRef, forwardRef } from 'react'
+import { forwardRef } from 'react'
+import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx
index 2fb6f726ba..817a098c38 100644
--- a/packages/react/src/Image/Image.tsx
+++ b/packages/react/src/Image/Image.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { type ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ImgHTMLAttributes } from 'react'
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   cover?: Boolean
diff --git a/packages/react/src/Image/index.ts b/packages/react/src/Image/index.ts
index d28c8bd778..f9de85a6b9 100644
--- a/packages/react/src/Image/index.ts
+++ b/packages/react/src/Image/index.ts
@@ -1 +1,2 @@
-export { Image, type ImageProps } from './Image'
+export { Image } from './Image'
+export type { ImageProps } from './Image'
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 47e6ce1a4c..178ccafd08 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -5,7 +5,8 @@
 
 import { ChevronRightIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { AnchorHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon/Icon'
 
 type LinkOnBackground = 'default' | 'light' | 'dark'
@@ -26,11 +27,11 @@ type ConditionalProps =
       icon?: Function
     }
 
-export type LinkProps = CommonProps & ConditionalProps
+export type LinkProps = PropsWithChildren<CommonProps & ConditionalProps>
 
 export const Link = forwardRef(
   (
-    { children, variant = 'standalone', icon, onBackground, className, ...otherProps }: PropsWithChildren<LinkProps>,
+    { children, variant = 'standalone', icon, onBackground, className, ...otherProps }: LinkProps,
     ref: ForwardedRef<HTMLAnchorElement>,
   ) => (
     <a
diff --git a/packages/react/src/Logo/Logo.tsx b/packages/react/src/Logo/Logo.tsx
index a50322fb10..f5761471b1 100644
--- a/packages/react/src/Logo/Logo.tsx
+++ b/packages/react/src/Logo/Logo.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, RefAttributes, SVGProps } from 'react'
 import {
   LogoAmsterdam,
   LogoGgdAmsterdam,
diff --git a/packages/react/src/Logo/brand/LogoAmsterdam.tsx b/packages/react/src/Logo/brand/LogoAmsterdam.tsx
index ff77c4d1da..9be9da5ed2 100644
--- a/packages/react/src/Logo/brand/LogoAmsterdam.tsx
+++ b/packages/react/src/Logo/brand/LogoAmsterdam.tsx
@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx b/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
index 4ea716c79f..10b8348ce2 100644
--- a/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
+++ b/packages/react/src/Logo/brand/LogoGgdAmsterdam.tsx
@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoGgdAmsterdam = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/packages/react/src/Logo/brand/LogoStadsarchief.tsx b/packages/react/src/Logo/brand/LogoStadsarchief.tsx
index 627d76b19c..56bfcae2a3 100644
--- a/packages/react/src/Logo/brand/LogoStadsarchief.tsx
+++ b/packages/react/src/Logo/brand/LogoStadsarchief.tsx
@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsarchief = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx b/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
index 95881f6b13..f823fd9ab5 100644
--- a/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
+++ b/packages/react/src/Logo/brand/LogoStadsbankVanLening.tsx
@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoStadsbankVanLening = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx b/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
index 16c43aff02..6302ca859d 100644
--- a/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
+++ b/packages/react/src/Logo/brand/LogoVgaVerzekeringen.tsx
@@ -1,4 +1,5 @@
-import { ForwardedRef, forwardRef, type SVGProps } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, SVGProps } from 'react'
 
 const LogoVgaVerzekeringen = forwardRef((props: SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => (
   <svg
diff --git a/packages/react/src/Mark/Mark.tsx b/packages/react/src/Mark/Mark.tsx
index e8001d53cf..0b98436fd8 100644
--- a/packages/react/src/Mark/Mark.tsx
+++ b/packages/react/src/Mark/Mark.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
 
diff --git a/packages/react/src/MegaMenu/MegaMenu.tsx b/packages/react/src/MegaMenu/MegaMenu.tsx
index bdac9d85a7..6ba66901a4 100644
--- a/packages/react/src/MegaMenu/MegaMenu.tsx
+++ b/packages/react/src/MegaMenu/MegaMenu.tsx
@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 
 type MegaMenuProps = {} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx
index c905c76d9c..55d135b029 100644
--- a/packages/react/src/OrderedList/OrderedList.tsx
+++ b/packages/react/src/OrderedList/OrderedList.tsx
@@ -4,16 +4,15 @@
  */
 
 import clsx from 'clsx'
-import {
+import { forwardRef } from 'react'
+import type {
   ForwardedRef,
-  forwardRef,
   ForwardRefExoticComponent,
   LiHTMLAttributes,
   OlHTMLAttributes,
   PropsWithChildren,
   RefAttributes,
 } from 'react'
-
 export interface OrderedListProps extends PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> {
   markers?: boolean
 }
@@ -23,10 +22,7 @@ interface OrderedListComponent extends ForwardRefExoticComponent<OrderedListProp
 }
 
 export const OrderedList = forwardRef(
-  (
-    { children, markers = true, className, ...restProps }: PropsWithChildren<OrderedListProps>,
-    ref: ForwardedRef<HTMLOListElement>,
-  ) => {
+  ({ children, markers = true, className, ...restProps }: OrderedListProps, ref: ForwardedRef<HTMLOListElement>) => {
     return (
       <ol
         ref={ref}
@@ -41,13 +37,10 @@ export const OrderedList = forwardRef(
 
 OrderedList.displayName = 'OrderedList'
 
-export type OrderedListItemProps = LiHTMLAttributes<HTMLLIElement>
+export type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
 
 export const OrderedListItem = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<OrderedListItemProps>,
-    ref: ForwardedRef<HTMLLIElement>,
-  ) => {
+  ({ children, className, ...restProps }: OrderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => {
     return (
       <li ref={ref} className={clsx('amsterdam-ordered-list__item', className)} {...restProps}>
         {children}
diff --git a/packages/react/src/Overlap/Overlap.tsx b/packages/react/src/Overlap/Overlap.tsx
index 15909896b8..04ac0bccd9 100644
--- a/packages/react/src/Overlap/Overlap.tsx
+++ b/packages/react/src/Overlap/Overlap.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export const Overlap = forwardRef(
   (
diff --git a/packages/react/src/PageHeading/PageHeading.tsx b/packages/react/src/PageHeading/PageHeading.tsx
index 16446fcf56..c9a2207ebe 100644
--- a/packages/react/src/PageHeading/PageHeading.tsx
+++ b/packages/react/src/PageHeading/PageHeading.tsx
@@ -4,9 +4,10 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface PageHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+export interface PageHeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
   /**
    * De kleur van de titel
    * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
@@ -15,10 +16,7 @@ export interface PageHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 
 export const PageHeading = forwardRef(
-  (
-    { children, className, inverseColor, ...restProps }: PropsWithChildren<PageHeadingProps>,
-    ref: ForwardedRef<HTMLHeadingElement>,
-  ) => (
+  ({ children, className, inverseColor, ...restProps }: PageHeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => (
     <h1
       {...restProps}
       ref={ref}
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index bc2ccfadd6..92d9657587 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -4,11 +4,11 @@
  */
 
 import clsx from 'clsx'
-import {
+import { forwardRef } from 'react'
+import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   ForwardedRef,
-  forwardRef,
   ForwardRefExoticComponent,
   HTMLAttributes,
   PropsWithChildren,
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index 6d9c4c7ca4..fd5c2f9de9 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -5,7 +5,8 @@
 
 import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, useMemo, useState } from 'react'
+import { forwardRef, useMemo, useState } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon/Icon'
 
 export interface PaginationProps extends HTMLAttributes<HTMLElement> {
diff --git a/packages/react/src/Paragraph/Paragraph.tsx b/packages/react/src/Paragraph/Paragraph.tsx
index 91f74d3e81..4a1a10ffed 100644
--- a/packages/react/src/Paragraph/Paragraph.tsx
+++ b/packages/react/src/Paragraph/Paragraph.tsx
@@ -5,9 +5,10 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+export interface ParagraphProps extends PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> {
   size?: 'small' | 'large'
   /**
    * De kleur van de paragraaf
@@ -18,7 +19,7 @@ export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
 
 export const Paragraph = forwardRef(
   (
-    { children, className, inverseColor, size, ...otherProps }: PropsWithChildren<ParagraphProps>,
+    { children, className, inverseColor, size, ...otherProps }: ParagraphProps,
     ref: ForwardedRef<HTMLParagraphElement>,
   ) => (
     <p
diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
index cc0e727cc6..52e9669ab4 100644
--- a/packages/react/src/Screen/Screen.tsx
+++ b/packages/react/src/Screen/Screen.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
diff --git a/packages/react/src/SearchField/SearchField.tsx b/packages/react/src/SearchField/SearchField.tsx
index efaf37723f..009d4952d8 100644
--- a/packages/react/src/SearchField/SearchField.tsx
+++ b/packages/react/src/SearchField/SearchField.tsx
@@ -4,14 +4,8 @@
  */
 
 import clsx from 'clsx'
-import {
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  PropsWithChildren,
-  RefAttributes,
-} from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { SearchFieldButton } from './SearchFieldButton'
 import { SearchFieldInput } from './SearchFieldInput'
 
diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
index 721825788c..4557a5559d 100644
--- a/packages/react/src/SearchField/SearchFieldButton.tsx
+++ b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -5,7 +5,8 @@
 
 import { SearchIcon } from '@amsterdam/design-system-react-icons'
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
index 4557cb2cb5..0d639a83b8 100644
--- a/packages/react/src/SearchField/SearchFieldInput.tsx
+++ b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, InputHTMLAttributes, useId } from 'react'
+import { forwardRef, useId } from 'react'
+import type { ForwardedRef, InputHTMLAttributes } from 'react'
 import { VisuallyHidden } from '../VisuallyHidden'
 
 interface SearchFieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
diff --git a/packages/react/src/Switch/Switch.tsx b/packages/react/src/Switch/Switch.tsx
index 15c0f242d9..fd4c589369 100644
--- a/packages/react/src/Switch/Switch.tsx
+++ b/packages/react/src/Switch/Switch.tsx
@@ -1,5 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, InputHTMLAttributes, PropsWithChildren, useId } from 'react'
+import { forwardRef, useId } from 'react'
+import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
 export const Switch = forwardRef(
   (
diff --git a/packages/react/src/Table/TableCaption.tsx b/packages/react/src/Table/TableCaption.tsx
index 71255bdc12..66726c2933 100644
--- a/packages/react/src/Table/TableCaption.tsx
+++ b/packages/react/src/Table/TableCaption.tsx
@@ -5,7 +5,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export interface TableCaptionProps extends PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>> {}
 
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 3df8ce16e2..091bf83aca 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
 export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
diff --git a/packages/react/src/TopTaskLink/TopTaskLink.tsx b/packages/react/src/TopTaskLink/TopTaskLink.tsx
index e4e9d10951..083284f3e6 100644
--- a/packages/react/src/TopTaskLink/TopTaskLink.tsx
+++ b/packages/react/src/TopTaskLink/TopTaskLink.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { AnchorHTMLAttributes, ForwardedRef, forwardRef } from 'react'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
 
 export interface TopTaskLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   label: string
diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx
index 79d57a16c1..e82e77e31c 100644
--- a/packages/react/src/UnorderedList/UnorderedList.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.tsx
@@ -4,9 +4,9 @@
  */
 
 import clsx from 'clsx'
-import {
+import { forwardRef } from 'react'
+import type {
   ForwardedRef,
-  forwardRef,
   ForwardRefExoticComponent,
   HTMLAttributes,
   LiHTMLAttributes,
@@ -39,13 +39,10 @@ export const UnorderedList = forwardRef(
 
 UnorderedList.displayName = 'UnorderedList'
 
-export type UnorderedListItemProps = LiHTMLAttributes<HTMLLIElement>
+export type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>
 
 export const UnorderedListItem = forwardRef(
-  (
-    { children, className, ...restProps }: PropsWithChildren<UnorderedListItemProps>,
-    ref: ForwardedRef<HTMLLIElement>,
-  ) => {
+  ({ children, className, ...restProps }: UnorderedListItemProps, ref: ForwardedRef<HTMLLIElement>) => {
     return (
       <li ref={ref} className={clsx('amsterdam-unordered-list__item', className)} {...restProps}>
         {children}
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index 82edf3da45..64b53c0ac4 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export const VisuallyHidden = forwardRef(
   (