From 6818f881b95a322122719229da22dc253490761a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Wed, 24 Jan 2024 11:44:02 +0100
Subject: [PATCH 1/8] Add linter rule to use types instead of interfaces

---
 .eslintrc.json    | 2 ++
 .eslintrc.ts.json | 5 +++++
 2 files changed, 7 insertions(+)
 create mode 100644 .eslintrc.ts.json

diff --git a/.eslintrc.json b/.eslintrc.json
index b2130d32ad..cf1f94a27d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -27,6 +27,7 @@
         "plugin:react/recommended",
         "eslint-config-prettier",
         "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json",
         "plugin:mdx/overrides"
       ],
@@ -48,6 +49,7 @@
         "plugin:react/recommended",
         "eslint-config-prettier",
         "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],
diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
new file mode 100644
index 0000000000..c432da3e2b
--- /dev/null
+++ b/.eslintrc.ts.json
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+  }
+}

From 9752372b2efddd8f465ef89f5b8ff4ceea6cabfa Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Wed, 24 Jan 2024 11:45:42 +0100
Subject: [PATCH 2/8] Replace all interfaces with types

---
 packages/react/src/Accordion/Accordion.tsx               | 8 ++++----
 packages/react/src/Accordion/AccordionContext.tsx        | 2 +-
 packages/react/src/Accordion/AccordionSection.tsx        | 4 ++--
 packages/react/src/Alert/Alert.tsx                       | 4 ++--
 packages/react/src/AspectRatio/AspectRatio.tsx           | 4 ++--
 packages/react/src/Blockquote/Blockquote.tsx             | 4 ++--
 packages/react/src/Breadcrumb/Breadcrumb.tsx             | 4 ++--
 packages/react/src/Breadcrumb/BreadcrumbItem.tsx         | 4 ++--
 packages/react/src/Button/Button.tsx                     | 4 ++--
 packages/react/src/Card/Card.tsx                         | 6 +++---
 packages/react/src/Card/CardHeadingGroup.tsx             | 4 ++--
 packages/react/src/Card/CardLink.tsx                     | 2 +-
 packages/react/src/Checkbox/Checkbox.tsx                 | 4 ++--
 packages/react/src/Dialog/Dialog.tsx                     | 4 ++--
 packages/react/src/Footer/Footer.tsx                     | 4 ++--
 packages/react/src/Grid/Grid.tsx                         | 4 ++--
 packages/react/src/Header/Header.tsx                     | 4 ++--
 packages/react/src/Heading/Heading.tsx                   | 4 ++--
 packages/react/src/Icon/Icon.tsx                         | 4 ++--
 packages/react/src/IconButton/IconButton.tsx             | 4 ++--
 packages/react/src/Image/Image.tsx                       | 4 ++--
 packages/react/src/Link/Link.tsx                         | 4 ++--
 packages/react/src/Logo/Logo.tsx                         | 4 ++--
 packages/react/src/Mark/Mark.tsx                         | 2 +-
 packages/react/src/MegaMenu/MegaMenu.tsx                 | 4 ++--
 packages/react/src/OrderedList/OrderedList.tsx           | 8 ++++----
 packages/react/src/PageHeading/PageHeading.tsx           | 4 ++--
 packages/react/src/PageMenu/PageMenu.tsx                 | 4 ++--
 packages/react/src/PageMenu/PageMenuLink.tsx             | 4 ++--
 packages/react/src/Pagination/Pagination.tsx             | 4 ++--
 packages/react/src/Paragraph/Paragraph.tsx               | 4 ++--
 packages/react/src/Screen/Screen.tsx                     | 4 ++--
 packages/react/src/SearchField/SearchField.tsx           | 7 +++----
 packages/react/src/SearchField/SearchFieldButton.tsx     | 2 +-
 packages/react/src/SearchField/SearchFieldInput.tsx      | 4 ++--
 packages/react/src/SkipLink/SkipLink.tsx                 | 2 +-
 packages/react/src/Spotlight/Spotlight.tsx               | 4 ++--
 packages/react/src/Table/Table.tsx                       | 6 +++---
 packages/react/src/Table/TableBody.tsx                   | 2 +-
 packages/react/src/Table/TableCaption.tsx                | 2 +-
 packages/react/src/Table/TableCell.tsx                   | 2 +-
 packages/react/src/Table/TableFooter.tsx                 | 2 +-
 packages/react/src/Table/TableHeader.tsx                 | 2 +-
 packages/react/src/Table/TableHeaderCell.tsx             | 2 +-
 packages/react/src/Table/TableRow.tsx                    | 2 +-
 packages/react/src/TextInput/TextInput.tsx               | 2 +-
 packages/react/src/TopTaskLink/TopTaskLink.tsx           | 4 ++--
 packages/react/src/UnorderedList/UnorderedList.tsx       | 9 ++++-----
 storybook/storybook-react/config/types.ts                | 6 +++---
 .../src/SearchField/SearchField.stories.tsx              | 5 ++++-
 50 files changed, 99 insertions(+), 98 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx
index 61dcffe841..dc12450e68 100644
--- a/packages/react/src/Accordion/Accordion.tsx
+++ b/packages/react/src/Accordion/Accordion.tsx
@@ -11,14 +11,14 @@ import { AccordionSection } from './AccordionSection'
 import useFocusWithArrows from './useFocusWithArrows'
 import { HeadingLevel } from '../Heading/Heading'
 
-export interface AccordionProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AccordionProps = {
   headingLevel: HeadingLevel
   section?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-export interface AccordionComponent extends ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> {
+export type AccordionComponent = {
   Section: typeof AccordionSection
-}
+} & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>
 
 export const Accordion = forwardRef(
   ({ children, className, headingLevel, section = true }: AccordionProps, ref: ForwardedRef<HTMLDivElement>) => {
diff --git a/packages/react/src/Accordion/AccordionContext.tsx b/packages/react/src/Accordion/AccordionContext.tsx
index bce92e71e0..0a563a38ae 100644
--- a/packages/react/src/Accordion/AccordionContext.tsx
+++ b/packages/react/src/Accordion/AccordionContext.tsx
@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 import { HeadingLevel } from '../Heading/Heading'
 
-export interface AccordionContextValue {
+export type AccordionContextValue = {
   headingLevel: HeadingLevel
   section?: boolean
 }
diff --git a/packages/react/src/Accordion/AccordionSection.tsx b/packages/react/src/Accordion/AccordionSection.tsx
index 6908d14c92..b4fb874178 100644
--- a/packages/react/src/Accordion/AccordionSection.tsx
+++ b/packages/react/src/Accordion/AccordionSection.tsx
@@ -11,10 +11,10 @@ import AccordionContext from './AccordionContext'
 import { getHeadingElement } from '../Heading/Heading'
 import { Icon } from '../Icon/Icon'
 
-export interface AccordionSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export type AccordionSectionProps = {
   label: string
   expanded?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const AccordionSection = forwardRef(
   (
diff --git a/packages/react/src/Alert/Alert.tsx b/packages/react/src/Alert/Alert.tsx
index 164d66b5f3..979b0882bc 100644
--- a/packages/react/src/Alert/Alert.tsx
+++ b/packages/react/src/Alert/Alert.tsx
@@ -12,7 +12,7 @@ import type { HeadingProps } from '../Heading'
 import { Icon } from '../Icon'
 import { IconButton } from '../IconButton'
 
-export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AlertProps = {
   /** Whether the alert can be dismissed by the user. Adds a button to the top right. */
   closeable?: boolean
   /**
@@ -26,7 +26,7 @@ export interface AlertProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
   severity?: 'error' | 'info' | 'success' | 'warning'
   /** The title for the alert. */
   title?: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const iconSvgBySeverity = {
   error: AlertIcon,
diff --git a/packages/react/src/AspectRatio/AspectRatio.tsx b/packages/react/src/AspectRatio/AspectRatio.tsx
index 7dadac092b..f95877f0c4 100644
--- a/packages/react/src/AspectRatio/AspectRatio.tsx
+++ b/packages/react/src/AspectRatio/AspectRatio.tsx
@@ -9,9 +9,9 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide'
 
-export interface AspectRatioProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type AspectRatioProps = {
   ratio?: Ratio
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const AspectRatio = forwardRef(
   ({ children, className, ratio = 'square', ...restProps }: AspectRatioProps, ref: ForwardedRef<HTMLDivElement>) => (
diff --git a/packages/react/src/Blockquote/Blockquote.tsx b/packages/react/src/Blockquote/Blockquote.tsx
index 4d5fac6081..65292771a6 100644
--- a/packages/react/src/Blockquote/Blockquote.tsx
+++ b/packages/react/src/Blockquote/Blockquote.tsx
@@ -7,13 +7,13 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { BlockquoteHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface BlockquoteProps extends PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> {
+export type BlockquoteProps = {
   /**
    * De kleur van het citaat.
    * Gebruik deze property om het citaat in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>
 
 export const Blockquote = forwardRef(
   ({ children, className, inverseColor, ...restProps }: BlockquoteProps, ref: ForwardedRef<HTMLQuoteElement>) => (
diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx
index eb50c94944..83ffa8e255 100644
--- a/packages/react/src/Breadcrumb/Breadcrumb.tsx
+++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx
@@ -10,9 +10,9 @@ import { BreadcrumbItem } from './BreadcrumbItem'
 
 export type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-interface BreadcrumbComponent extends ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>> {
+type BreadcrumbComponent = {
   Item: typeof BreadcrumbItem
-}
+} & ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>
 
 export const Breadcrumb = forwardRef(
   ({ children, className, ...restProps }: BreadcrumbProps, ref: ForwardedRef<HTMLElement>) => (
diff --git a/packages/react/src/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
index 29444e3e48..88a2963bc8 100644
--- a/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react/src/Breadcrumb/BreadcrumbItem.tsx
@@ -7,9 +7,9 @@ import { clsx } from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HTMLLIElement>> {
+export type BreadcrumbItemProps = {
   href: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLLIElement>>
 
 export const BreadcrumbItem = forwardRef(
   ({ children, className, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => (
diff --git a/packages/react/src/Button/Button.tsx b/packages/react/src/Button/Button.tsx
index 63ae34338f..43859e9d68 100644
--- a/packages/react/src/Button/Button.tsx
+++ b/packages/react/src/Button/Button.tsx
@@ -9,9 +9,9 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ButtonHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface ButtonProps extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
+export type ButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'
-}
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>
 
 type CommunityButtonAppearance = 'primary-action-button' | 'secondary-action-button' | 'subtle-button'
 
diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx
index 58d0109020..f5f3042cf8 100644
--- a/packages/react/src/Card/Card.tsx
+++ b/packages/react/src/Card/Card.tsx
@@ -9,12 +9,12 @@ import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWith
 import { CardHeadingGroup } from './CardHeadingGroup'
 import { CardLink } from './CardLink'
 
-export interface CardProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
+export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>> {
+export type CardComponent = {
   HeadingGroup: typeof CardHeadingGroup
   Link: typeof CardLink
-}
+} & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>
 
 export const Card = forwardRef(({ children, className, ...restProps }: CardProps, ref: ForwardedRef<HTMLElement>) => (
   <article {...restProps} ref={ref} className={clsx('amsterdam-card', className)}>
diff --git a/packages/react/src/Card/CardHeadingGroup.tsx b/packages/react/src/Card/CardHeadingGroup.tsx
index 2ffff450f5..afe4b5d954 100644
--- a/packages/react/src/Card/CardHeadingGroup.tsx
+++ b/packages/react/src/Card/CardHeadingGroup.tsx
@@ -8,9 +8,9 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { Paragraph } from '../Paragraph'
 
-export interface CardHeadingGroupProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export type CardHeadingGroupProps = {
   tagline: string
-}
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const CardHeadingGroup = forwardRef(
   ({ children, className, tagline, ...restProps }: CardHeadingGroupProps, ref: ForwardedRef<HTMLElement>) => (
diff --git a/packages/react/src/Card/CardLink.tsx b/packages/react/src/Card/CardLink.tsx
index 69c2c8e81a..21f0d293a9 100644
--- a/packages/react/src/Card/CardLink.tsx
+++ b/packages/react/src/Card/CardLink.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface CardLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {}
+export type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
 export const CardLink = forwardRef(
   ({ children, className, ...otherProps }: CardLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index 2763bcf4a3..1c2b8d8a27 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -7,10 +7,10 @@ import clsx from 'clsx'
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes, PropsWithChildren } from 'react'
 
-export interface CheckboxProps extends PropsWithChildren<InputHTMLAttributes<HTMLInputElement>> {
+export type CheckboxProps = {
   invalid?: boolean
   indeterminate?: boolean
-}
+} & PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>
 
 export const Checkbox = forwardRef(
   (
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 7d6ce96a2f..f364793a14 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -8,9 +8,9 @@ import { forwardRef } from 'react'
 import type { DialogHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { IconButton } from '../IconButton'
 
-export interface DialogProps extends PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> {
+export type DialogProps = {
   actions?: ReactNode
-}
+} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
 export const Dialog = forwardRef(
   ({ children, className, title, actions, ...restProps }: DialogProps, ref: ForwardedRef<HTMLDialogElement>) => (
diff --git a/packages/react/src/Footer/Footer.tsx b/packages/react/src/Footer/Footer.tsx
index 9245abd55a..f6b2fc9fad 100644
--- a/packages/react/src/Footer/Footer.tsx
+++ b/packages/react/src/Footer/Footer.tsx
@@ -11,10 +11,10 @@ import { FooterTop } from './FooterTop'
 
 export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-interface FooterComponent extends ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>> {
+type FooterComponent = {
   Top: typeof FooterTop
   Bottom: typeof FooterBottom
-}
+} & ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>
 
 export const Footer = forwardRef(
   ({ children, className, ...restProps }: FooterProps, ref: ForwardedRef<HTMLElement>) => (
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index f010c3e984..7220bc11b5 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -68,9 +68,9 @@ const paddingClasses = (
   return classes
 }
 
-interface GridComponent extends ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>> {
+type GridComponent = {
   Cell: typeof GridCell
-}
+} & ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>
 
 export const Grid = forwardRef(
   (
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index 198007896b..7c301f86e7 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -11,14 +11,14 @@ import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+export type HeaderProps = {
   logoBrand?: LogoBrand
   logoLink?: string
   logoLinkTitle?: string
   title?: string
   links?: ReactNode
   menu?: ReactNode
-}
+} & HTMLAttributes<HTMLElement>
 
 export const Header = forwardRef(
   (
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 0068eeafc7..1906257829 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -11,7 +11,7 @@ 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 PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
+export type HeadingProps = {
   /**
    * Het hiërarchische niveau van de titel.
    */
@@ -26,7 +26,7 @@ export interface HeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadi
    * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>
 
 export function getHeadingElement(level: HeadingLevel) {
   switch (level) {
diff --git a/packages/react/src/Icon/Icon.tsx b/packages/react/src/Icon/Icon.tsx
index 64f56f09a5..ea3f97151b 100644
--- a/packages/react/src/Icon/Icon.tsx
+++ b/packages/react/src/Icon/Icon.tsx
@@ -9,11 +9,11 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+export type IconProps = {
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
   square?: boolean
   svg: Function
-}
+} & HTMLAttributes<HTMLSpanElement>
 
 export const Icon = forwardRef(
   ({ className, size = 'level-3', square, svg, ...otherProps }: IconProps, ref: ForwardedRef<HTMLElement>) => (
diff --git a/packages/react/src/IconButton/IconButton.tsx b/packages/react/src/IconButton/IconButton.tsx
index 7c0dbf5067..14dd77ae37 100644
--- a/packages/react/src/IconButton/IconButton.tsx
+++ b/packages/react/src/IconButton/IconButton.tsx
@@ -10,12 +10,12 @@ import type { ButtonHTMLAttributes, ForwardedRef } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type IconButtonProps = {
   label: string
   onBackground?: 'light' | 'dark'
   size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
   svg?: Function
-}
+} & ButtonHTMLAttributes<HTMLButtonElement>
 
 export const IconButton = forwardRef(
   (
diff --git a/packages/react/src/Image/Image.tsx b/packages/react/src/Image/Image.tsx
index 817a098c38..df35293f1c 100644
--- a/packages/react/src/Image/Image.tsx
+++ b/packages/react/src/Image/Image.tsx
@@ -7,9 +7,9 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, ImgHTMLAttributes } from 'react'
 
-export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+export type ImageProps = {
   cover?: Boolean
-}
+} & ImgHTMLAttributes<HTMLImageElement>
 
 export const Image = forwardRef(
   ({ className, cover = false, ...restProps }: ImageProps, ref: ForwardedRef<HTMLImageElement>) => (
diff --git a/packages/react/src/Link/Link.tsx b/packages/react/src/Link/Link.tsx
index 178ccafd08..5e25ff8a54 100644
--- a/packages/react/src/Link/Link.tsx
+++ b/packages/react/src/Link/Link.tsx
@@ -12,10 +12,10 @@ import { Icon } from '../Icon/Icon'
 type LinkOnBackground = 'default' | 'light' | 'dark'
 type LinkVariant = 'standalone' | 'inline' | 'inList'
 
-interface CommonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> {
+type CommonProps = {
   variant?: LinkVariant
   onBackground?: LinkOnBackground
-}
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>
 
 type ConditionalProps =
   | {
diff --git a/packages/react/src/Logo/Logo.tsx b/packages/react/src/Logo/Logo.tsx
index f5761471b1..28c9b500f4 100644
--- a/packages/react/src/Logo/Logo.tsx
+++ b/packages/react/src/Logo/Logo.tsx
@@ -16,9 +16,9 @@ import {
 
 export type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen'
 
-export interface LogoProps extends SVGProps<SVGSVGElement> {
+export type LogoProps = {
   brand?: LogoBrand
-}
+} & SVGProps<SVGSVGElement>
 
 const logoConfig: Record<
   LogoBrand,
diff --git a/packages/react/src/Mark/Mark.tsx b/packages/react/src/Mark/Mark.tsx
index 0b98436fd8..bc664305f7 100644
--- a/packages/react/src/Mark/Mark.tsx
+++ b/packages/react/src/Mark/Mark.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface MarkProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}
+export type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Mark = forwardRef(({ children, className, ...restProps }: MarkProps, ref: ForwardedRef<HTMLElement>) => (
   <mark {...restProps} ref={ref} className={clsx('amsterdam-mark', className)}>
diff --git a/packages/react/src/MegaMenu/MegaMenu.tsx b/packages/react/src/MegaMenu/MegaMenu.tsx
index 9db41d5ee8..0c8e46139d 100644
--- a/packages/react/src/MegaMenu/MegaMenu.tsx
+++ b/packages/react/src/MegaMenu/MegaMenu.tsx
@@ -9,9 +9,9 @@ import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWith
 
 export type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-interface MegaMenuComponent extends ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>> {
+type MegaMenuComponent = {
   ListCategory: typeof MegaMenuListCategory
-}
+} & ForwardRefExoticComponent<MegaMenuProps & RefAttributes<HTMLDivElement>>
 
 export const MegaMenu = forwardRef(
   ({ children, className, ...restProps }: MegaMenuProps, ref: ForwardedRef<HTMLDivElement>) => (
diff --git a/packages/react/src/OrderedList/OrderedList.tsx b/packages/react/src/OrderedList/OrderedList.tsx
index 16cbbc241d..7c9cf4916f 100644
--- a/packages/react/src/OrderedList/OrderedList.tsx
+++ b/packages/react/src/OrderedList/OrderedList.tsx
@@ -8,13 +8,13 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, OlHTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { OrderedListItem } from './OrderedListItem'
 
-export interface OrderedListProps extends PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> {
+export type OrderedListProps = {
   markers?: boolean
-}
+} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>
 
-interface OrderedListComponent extends ForwardRefExoticComponent<OrderedListProps & RefAttributes<HTMLOListElement>> {
+type OrderedListComponent = {
   Item: typeof OrderedListItem
-}
+} & ForwardRefExoticComponent<OrderedListProps & RefAttributes<HTMLOListElement>>
 
 export const OrderedList = forwardRef(
   ({ children, markers = true, className, ...restProps }: OrderedListProps, ref: ForwardedRef<HTMLOListElement>) => (
diff --git a/packages/react/src/PageHeading/PageHeading.tsx b/packages/react/src/PageHeading/PageHeading.tsx
index c9a2207ebe..989cfcf776 100644
--- a/packages/react/src/PageHeading/PageHeading.tsx
+++ b/packages/react/src/PageHeading/PageHeading.tsx
@@ -7,13 +7,13 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface PageHeadingProps extends PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> {
+export type PageHeadingProps = {
   /**
    * De kleur van de titel
    * Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>
 
 export const PageHeading = forwardRef(
   ({ children, className, inverseColor, ...restProps }: PageHeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => (
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index b592184503..3c27e96670 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -16,9 +16,9 @@ export type PageMenuProps = {
   alignEnd?: boolean
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
-interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>> {
+type PageMenuComponent = {
   Link: typeof PageMenuLink
-}
+} & ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLUListElement>>
 
 export const PageMenu = forwardRef(
   ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => (
diff --git a/packages/react/src/PageMenu/PageMenuLink.tsx b/packages/react/src/PageMenu/PageMenuLink.tsx
index 845a26c02a..8fed195a25 100644
--- a/packages/react/src/PageMenu/PageMenuLink.tsx
+++ b/packages/react/src/PageMenu/PageMenuLink.tsx
@@ -8,9 +8,9 @@ import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 import { Icon } from '../Icon'
 
-export interface PageMenuLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+export type PageMenuLinkProps = {
   icon?: Function
-}
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
 export const PageMenuLink = forwardRef(
   ({ children, className, icon, ...restProps }: PageMenuLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
index fd5c2f9de9..8d6d31f3b5 100644
--- a/packages/react/src/Pagination/Pagination.tsx
+++ b/packages/react/src/Pagination/Pagination.tsx
@@ -9,7 +9,7 @@ import { forwardRef, useMemo, useState } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon/Icon'
 
-export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+export type PaginationProps = {
   /**
    * The maximum amount of pages shown. This has a lower limit of 5
    */
@@ -27,7 +27,7 @@ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
    * The total number of pages.
    */
   totalPages: number
-}
+} & HTMLAttributes<HTMLElement>
 
 /**
  * This returns an array of the range, including spacers
diff --git a/packages/react/src/Paragraph/Paragraph.tsx b/packages/react/src/Paragraph/Paragraph.tsx
index 4a1a10ffed..80a0ec865f 100644
--- a/packages/react/src/Paragraph/Paragraph.tsx
+++ b/packages/react/src/Paragraph/Paragraph.tsx
@@ -8,14 +8,14 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface ParagraphProps extends PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> {
+export type ParagraphProps = {
   size?: 'small' | 'large'
   /**
    * De kleur van de paragraaf
    * Gebruik deze property om de paragraaf in tegenovergestelde kleur te tonen.
    */
   inverseColor?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>
 
 export const Paragraph = forwardRef(
   (
diff --git a/packages/react/src/Screen/Screen.tsx b/packages/react/src/Screen/Screen.tsx
index 52e9669ab4..4eaa606a24 100644
--- a/packages/react/src/Screen/Screen.tsx
+++ b/packages/react/src/Screen/Screen.tsx
@@ -9,9 +9,9 @@ import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 type ScreenMaxWidth = 'wide' | 'x-wide'
 
-export interface ScreenProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+export type ScreenProps = {
   maxWidth?: ScreenMaxWidth
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const Screen = forwardRef(
   ({ children, className, maxWidth = 'wide', ...restProps }: ScreenProps, ref: ForwardedRef<HTMLDivElement>) => (
diff --git a/packages/react/src/SearchField/SearchField.tsx b/packages/react/src/SearchField/SearchField.tsx
index 009d4952d8..41acc05da4 100644
--- a/packages/react/src/SearchField/SearchField.tsx
+++ b/packages/react/src/SearchField/SearchField.tsx
@@ -9,13 +9,12 @@ import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWith
 import { SearchFieldButton } from './SearchFieldButton'
 import { SearchFieldInput } from './SearchFieldInput'
 
-export interface SearchFieldProps extends PropsWithChildren<HTMLAttributes<HTMLFormElement>> {}
+export type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>
 
-export interface SearchFieldComponent
-  extends ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLFormElement>> {
+export type SearchFieldComponent = {
   Input: typeof SearchFieldInput
   Button: typeof SearchFieldButton
-}
+} & ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLFormElement>>
 
 export const SearchField = forwardRef(
   ({ children, className, ...restProps }: SearchFieldProps, ref: ForwardedRef<HTMLFormElement>) => {
diff --git a/packages/react/src/SearchField/SearchFieldButton.tsx b/packages/react/src/SearchField/SearchFieldButton.tsx
index 4557a5559d..87ce5a21f0 100644
--- a/packages/react/src/SearchField/SearchFieldButton.tsx
+++ b/packages/react/src/SearchField/SearchFieldButton.tsx
@@ -10,7 +10,7 @@ import type { ForwardedRef, HTMLAttributes } from 'react'
 import { Icon } from '../Icon'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-interface SearchFieldButtonProps extends HTMLAttributes<HTMLButtonElement> {}
+type SearchFieldButtonProps = HTMLAttributes<HTMLButtonElement>
 
 // TODO: replace this with IconButton when that's done
 // TODO: discuss if IconButton is the right component to replace this
diff --git a/packages/react/src/SearchField/SearchFieldInput.tsx b/packages/react/src/SearchField/SearchFieldInput.tsx
index 0d639a83b8..19978a58c4 100644
--- a/packages/react/src/SearchField/SearchFieldInput.tsx
+++ b/packages/react/src/SearchField/SearchFieldInput.tsx
@@ -8,9 +8,9 @@ import { forwardRef, useId } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-interface SearchFieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
+type SearchFieldInputProps = {
   label?: string
-}
+} & InputHTMLAttributes<HTMLInputElement>
 
 export const SearchFieldInput = forwardRef(
   ({ className, label = 'Zoeken', ...restProps }: SearchFieldInputProps, ref: ForwardedRef<HTMLInputElement>) => {
diff --git a/packages/react/src/SkipLink/SkipLink.tsx b/packages/react/src/SkipLink/SkipLink.tsx
index c4e37c2930..09cd031584 100644
--- a/packages/react/src/SkipLink/SkipLink.tsx
+++ b/packages/react/src/SkipLink/SkipLink.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
 
-export interface SkipLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {}
+export type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
 export const SkipLink = forwardRef(
   ({ children, className, ...restProps }: SkipLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
diff --git a/packages/react/src/Spotlight/Spotlight.tsx b/packages/react/src/Spotlight/Spotlight.tsx
index 47fe31b32d..5769a22abf 100644
--- a/packages/react/src/Spotlight/Spotlight.tsx
+++ b/packages/react/src/Spotlight/Spotlight.tsx
@@ -6,10 +6,10 @@
 import clsx from 'clsx'
 import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface SpotlightProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+export type SpotlightProps = {
   as?: 'article' | 'aside' | 'div' | 'footer' | 'section'
   color?: 'blue' | 'dark-green' | 'green' | 'light-blue' | 'magenta' | 'orange' | 'purple' | 'yellow'
-}
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>
 
 export const Spotlight = forwardRef<HTMLDivElement, SpotlightProps>(
   ({ children, className, as: Tag = 'div', color = 'blue', ...restProps }: SpotlightProps, ref) => (
diff --git a/packages/react/src/Table/Table.tsx b/packages/react/src/Table/Table.tsx
index b3affe9a91..f12e1c68a2 100644
--- a/packages/react/src/Table/Table.tsx
+++ b/packages/react/src/Table/Table.tsx
@@ -20,9 +20,9 @@ import { TableHeader } from './TableHeader'
 import { TableHeaderCell } from './TableHeaderCell'
 import { TableRow } from './TableRow'
 
-export interface TableProps extends PropsWithChildren<TableHTMLAttributes<HTMLTableElement>> {}
+export type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>
 
-export interface TableComponent extends ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>> {
+export type TableComponent = {
   Body: typeof TableBody
   Caption: typeof TableCaption
   Cell: typeof TableCell
@@ -30,7 +30,7 @@ export interface TableComponent extends ForwardRefExoticComponent<TableProps & R
   Header: typeof TableHeader
   HeaderCell: typeof TableHeaderCell
   Row: typeof TableRow
-}
+} & ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>
 
 export const Table = forwardRef(
   ({ children, className, ...restProps }: TableProps, ref: ForwardedRef<HTMLTableElement>) => (
diff --git a/packages/react/src/Table/TableBody.tsx b/packages/react/src/Table/TableBody.tsx
index 1a1cf73410..70a3b2cbd1 100644
--- a/packages/react/src/Table/TableBody.tsx
+++ b/packages/react/src/Table/TableBody.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface TableBodyProps extends PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>> {}
+export type TableBodyProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>
 
 export const TableBody = forwardRef(
   ({ children, className, ...restProps }: TableBodyProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
diff --git a/packages/react/src/Table/TableCaption.tsx b/packages/react/src/Table/TableCaption.tsx
index 66726c2933..288d291359 100644
--- a/packages/react/src/Table/TableCaption.tsx
+++ b/packages/react/src/Table/TableCaption.tsx
@@ -8,7 +8,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface TableCaptionProps extends PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>> {}
+export type TableCaptionProps = PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>>
 
 export const TableCaption = forwardRef(
   ({ children, className, ...restProps }: TableCaptionProps, ref: ForwardedRef<HTMLTableCaptionElement>) => (
diff --git a/packages/react/src/Table/TableCell.tsx b/packages/react/src/Table/TableCell.tsx
index fa5ebc92ba..95e2154087 100644
--- a/packages/react/src/Table/TableCell.tsx
+++ b/packages/react/src/Table/TableCell.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, PropsWithChildren, TdHTMLAttributes } from 'react'
 
-export interface TableCellProps extends PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>> {}
+export type TableCellProps = PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>>
 
 export const TableCell = forwardRef(
   ({ children, className, ...restProps }: TableCellProps, ref: ForwardedRef<HTMLTableCellElement>) => (
diff --git a/packages/react/src/Table/TableFooter.tsx b/packages/react/src/Table/TableFooter.tsx
index 3cd0ab2072..6e5c7c5e8d 100644
--- a/packages/react/src/Table/TableFooter.tsx
+++ b/packages/react/src/Table/TableFooter.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface TableFooterProps extends PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>> {}
+export type TableFooterProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>
 
 export const TableFooter = forwardRef(
   ({ children, className, ...restProps }: TableFooterProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
diff --git a/packages/react/src/Table/TableHeader.tsx b/packages/react/src/Table/TableHeader.tsx
index 14d3fce5a7..3bc07580e2 100644
--- a/packages/react/src/Table/TableHeader.tsx
+++ b/packages/react/src/Table/TableHeader.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface TableHeaderProps extends PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>> {}
+export type TableHeaderProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>
 
 export const TableHeader = forwardRef(
   ({ children, className, ...restProps }: TableHeaderProps, ref: ForwardedRef<HTMLTableSectionElement>) => (
diff --git a/packages/react/src/Table/TableHeaderCell.tsx b/packages/react/src/Table/TableHeaderCell.tsx
index 7b693fe344..e1d70c4106 100644
--- a/packages/react/src/Table/TableHeaderCell.tsx
+++ b/packages/react/src/Table/TableHeaderCell.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, PropsWithChildren, ThHTMLAttributes } from 'react'
 
-export interface TableHeaderCellProps extends PropsWithChildren<ThHTMLAttributes<HTMLTableCellElement>> {}
+export type TableHeaderCellProps = PropsWithChildren<ThHTMLAttributes<HTMLTableCellElement>>
 
 export const TableHeaderCell = forwardRef(
   ({ children, className, ...restProps }: TableHeaderCellProps, ref: ForwardedRef<HTMLTableCellElement>) => (
diff --git a/packages/react/src/Table/TableRow.tsx b/packages/react/src/Table/TableRow.tsx
index adb28e93c6..5df4213018 100644
--- a/packages/react/src/Table/TableRow.tsx
+++ b/packages/react/src/Table/TableRow.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
-export interface TableRowProps extends PropsWithChildren<HTMLAttributes<HTMLTableRowElement>> {}
+export type TableRowProps = PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>
 
 export const TableRow = forwardRef(
   ({ children, className, ...restProps }: TableRowProps, ref: ForwardedRef<HTMLTableRowElement>) => (
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 091bf83aca..c74cdea2b9 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
 
 export const TextInput = forwardRef(
   ({ className, ...restProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>) => (
diff --git a/packages/react/src/TopTaskLink/TopTaskLink.tsx b/packages/react/src/TopTaskLink/TopTaskLink.tsx
index 083284f3e6..01e8e8d7a1 100644
--- a/packages/react/src/TopTaskLink/TopTaskLink.tsx
+++ b/packages/react/src/TopTaskLink/TopTaskLink.tsx
@@ -7,10 +7,10 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { AnchorHTMLAttributes, ForwardedRef } from 'react'
 
-export interface TopTaskLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export type TopTaskLinkProps = {
   label: string
   description: string
-}
+} & AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const TopTaskLink = forwardRef(
   ({ className, label, description, ...restProps }: TopTaskLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
diff --git a/packages/react/src/UnorderedList/UnorderedList.tsx b/packages/react/src/UnorderedList/UnorderedList.tsx
index eba6d74910..b84706967a 100644
--- a/packages/react/src/UnorderedList/UnorderedList.tsx
+++ b/packages/react/src/UnorderedList/UnorderedList.tsx
@@ -8,14 +8,13 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { UnorderedListItem } from './UnorderedListItem'
 
-export interface UnorderedListProps extends PropsWithChildren<HTMLAttributes<HTMLUListElement>> {
+export type UnorderedListProps = {
   markers?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
-interface UnorderedListComponent
-  extends ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>> {
+type UnorderedListComponent = {
   Item: typeof UnorderedListItem
-}
+} & ForwardRefExoticComponent<UnorderedListProps & RefAttributes<HTMLUListElement>>
 
 export const UnorderedList = forwardRef(
   ({ children, markers = true, className, ...restProps }: UnorderedListProps, ref: ForwardedRef<HTMLUListElement>) => {
diff --git a/storybook/storybook-react/config/types.ts b/storybook/storybook-react/config/types.ts
index 0f371f3775..9d5521e2fd 100644
--- a/storybook/storybook-react/config/types.ts
+++ b/storybook/storybook-react/config/types.ts
@@ -1,17 +1,17 @@
 // Some viewport types that Storybook doesn’t seem to export
 // Copied from https://github.com/storybookjs/storybook/blob/next/code/addons/viewport/src/models/Viewport.ts
 
-export interface ViewportMap {
+export type ViewportMap = {
   [key: string]: Viewport
 }
 
-interface Viewport {
+type Viewport = {
   name: string
   styles: ViewportStyles
   type: 'desktop' | 'mobile' | 'tablet' | 'other'
 }
 
-interface ViewportStyles {
+type ViewportStyles = {
   height: string
   width: string
 }
diff --git a/storybook/storybook-react/src/SearchField/SearchField.stories.tsx b/storybook/storybook-react/src/SearchField/SearchField.stories.tsx
index 7c32c8c869..9c12977914 100644
--- a/storybook/storybook-react/src/SearchField/SearchField.stories.tsx
+++ b/storybook/storybook-react/src/SearchField/SearchField.stories.tsx
@@ -8,7 +8,10 @@ import type { SearchFieldProps } from '@amsterdam/design-system-react'
 import { useArgs } from '@storybook/preview-api'
 import { Meta, StoryObj } from '@storybook/react'
 
-type InputProps = { label?: string; placeholder?: string }
+type InputProps = {
+  label?: string
+  placeholder?: string
+}
 type StoryProps = SearchFieldProps & InputProps
 
 const meta = {

From b99d95fee4ef546c2ce6eac6b10887f7de910cff Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Wed, 24 Jan 2024 11:49:54 +0100
Subject: [PATCH 3/8] Remove unused component type exports

---
 packages/react/src/Accordion/Accordion.tsx     | 2 +-
 packages/react/src/Card/Card.tsx               | 2 +-
 packages/react/src/SearchField/SearchField.tsx | 2 +-
 packages/react/src/Table/Table.tsx             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Accordion/Accordion.tsx b/packages/react/src/Accordion/Accordion.tsx
index dc12450e68..48ea7761d8 100644
--- a/packages/react/src/Accordion/Accordion.tsx
+++ b/packages/react/src/Accordion/Accordion.tsx
@@ -16,7 +16,7 @@ export type AccordionProps = {
   section?: boolean
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
-export type AccordionComponent = {
+type AccordionComponent = {
   Section: typeof AccordionSection
 } & ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>
 
diff --git a/packages/react/src/Card/Card.tsx b/packages/react/src/Card/Card.tsx
index f5f3042cf8..deaac93f0d 100644
--- a/packages/react/src/Card/Card.tsx
+++ b/packages/react/src/Card/Card.tsx
@@ -11,7 +11,7 @@ import { CardLink } from './CardLink'
 
 export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
 
-export type CardComponent = {
+type CardComponent = {
   HeadingGroup: typeof CardHeadingGroup
   Link: typeof CardLink
 } & ForwardRefExoticComponent<CardProps & RefAttributes<HTMLElement>>
diff --git a/packages/react/src/SearchField/SearchField.tsx b/packages/react/src/SearchField/SearchField.tsx
index 41acc05da4..466899c8ce 100644
--- a/packages/react/src/SearchField/SearchField.tsx
+++ b/packages/react/src/SearchField/SearchField.tsx
@@ -11,7 +11,7 @@ import { SearchFieldInput } from './SearchFieldInput'
 
 export type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>
 
-export type SearchFieldComponent = {
+type SearchFieldComponent = {
   Input: typeof SearchFieldInput
   Button: typeof SearchFieldButton
 } & ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLFormElement>>
diff --git a/packages/react/src/Table/Table.tsx b/packages/react/src/Table/Table.tsx
index f12e1c68a2..7bc919baf3 100644
--- a/packages/react/src/Table/Table.tsx
+++ b/packages/react/src/Table/Table.tsx
@@ -22,7 +22,7 @@ import { TableRow } from './TableRow'
 
 export type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>
 
-export type TableComponent = {
+type TableComponent = {
   Body: typeof TableBody
   Caption: typeof TableCaption
   Cell: typeof TableCell

From 592318cdc58f23558e77bc11a7397a83246c505f Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Wed, 24 Jan 2024 11:58:50 +0100
Subject: [PATCH 4/8] Add linter rules for explicit type imports and exports

---
 .eslintrc.ts.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
index c432da3e2b..e82fc7cbdd 100644
--- a/.eslintrc.ts.json
+++ b/.eslintrc.ts.json
@@ -1,5 +1,7 @@
 {
   "rules": {
-    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+    "@typescript-eslint/consistent-type-exports": ["error", { "fixMixedExportsWithInlineTypeSpecifier": false }],
+    "@typescript-eslint/consistent-type-imports": "error"
   }
 }

From a5cc150d6f51cd887ce0f1ce48f73d6f40e47408 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Wed, 24 Jan 2024 13:16:11 +0100
Subject: [PATCH 5/8] Revert "Add linter rules for explicit type imports and
 exports"

This reverts commit 592318cdc58f23558e77bc11a7397a83246c505f.
---
 .eslintrc.ts.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
index e82fc7cbdd..c432da3e2b 100644
--- a/.eslintrc.ts.json
+++ b/.eslintrc.ts.json
@@ -1,7 +1,5 @@
 {
   "rules": {
-    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
-    "@typescript-eslint/consistent-type-exports": ["error", { "fixMixedExportsWithInlineTypeSpecifier": false }],
-    "@typescript-eslint/consistent-type-imports": "error"
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
   }
 }

From 2f5a71303324ef8ff254c7308cb21b9076b1dd81 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Fri, 26 Jan 2024 16:39:47 +0100
Subject: [PATCH 6/8] Move new linter rule to existing configuration file

---
 .eslintrc.js.json | 1 +
 .eslintrc.json    | 2 --
 .eslintrc.ts.json | 5 -----
 3 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 .eslintrc.ts.json

diff --git a/.eslintrc.js.json b/.eslintrc.js.json
index ada5cdd195..f58a5492ce 100644
--- a/.eslintrc.js.json
+++ b/.eslintrc.js.json
@@ -1,5 +1,6 @@
 {
   "rules": {
+    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     "array-callback-return": ["error", { "checkForEach": false }],
     "block-scoped-var": "error",
     "consistent-return": "error",
diff --git a/.eslintrc.json b/.eslintrc.json
index cf1f94a27d..b2130d32ad 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -27,7 +27,6 @@
         "plugin:react/recommended",
         "eslint-config-prettier",
         "./.eslintrc.js.json",
-        "./.eslintrc.ts.json",
         "./.eslintrc.react.json",
         "plugin:mdx/overrides"
       ],
@@ -49,7 +48,6 @@
         "plugin:react/recommended",
         "eslint-config-prettier",
         "./.eslintrc.js.json",
-        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],
diff --git a/.eslintrc.ts.json b/.eslintrc.ts.json
deleted file mode 100644
index c432da3e2b..0000000000
--- a/.eslintrc.ts.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/consistent-type-definitions": ["error", "type"]
-  }
-}

From 2cbb3eb6760e40db0a3d9c47ab0f8364ef86406a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Fri, 26 Jan 2024 16:40:51 +0100
Subject: [PATCH 7/8] Rrename configuration file from JS to TS

---
 .eslintrc.json                         | 8 ++++----
 .eslintrc.js.json => .eslintrc.ts.json | 0
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename .eslintrc.js.json => .eslintrc.ts.json (100%)

diff --git a/.eslintrc.json b/.eslintrc.json
index b2130d32ad..b5108421cb 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -26,7 +26,7 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json",
         "plugin:mdx/overrides"
       ],
@@ -37,7 +37,7 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.js", "*.jsx"],
@@ -47,7 +47,7 @@
       "extends": [
         "plugin:react/recommended",
         "eslint-config-prettier",
-        "./.eslintrc.js.json",
+        "./.eslintrc.ts.json",
         "./.eslintrc.react.json"
       ],
       "files": ["*.ts", "*.tsx"],
@@ -55,7 +55,7 @@
       "plugins": ["@typescript-eslint", "import", "jest"]
     },
     {
-      "extends": ["plugin:react/recommended", "eslint-config-prettier", "./.eslintrc.js.json"],
+      "extends": ["plugin:react/recommended", "eslint-config-prettier", "./.eslintrc.ts.json"],
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
       "parserOptions": {
diff --git a/.eslintrc.js.json b/.eslintrc.ts.json
similarity index 100%
rename from .eslintrc.js.json
rename to .eslintrc.ts.json

From 4815c5533499d6edcecd361f89d5f783aee6d41b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <vincent@smedinga.nl>
Date: Fri, 26 Jan 2024 16:42:20 +0100
Subject: [PATCH 8/8] Change Link List interfaces to types

---
 packages/react/src/LinkList/LinkList.tsx     | 6 +++---
 packages/react/src/LinkList/LinkListLink.tsx | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/LinkList/LinkList.tsx b/packages/react/src/LinkList/LinkList.tsx
index 5f14221879..16088d3fe8 100644
--- a/packages/react/src/LinkList/LinkList.tsx
+++ b/packages/react/src/LinkList/LinkList.tsx
@@ -8,11 +8,11 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { LinkListLink } from './LinkListLink'
 
-export interface LinkListProps extends PropsWithChildren<HTMLAttributes<HTMLUListElement>> {}
+export type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
-interface LinkListComponent extends ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>> {
+type LinkListComponent = {
   Link: typeof LinkListLink
-}
+} & ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>>
 
 /** A collection of related links. */
 export const LinkList = forwardRef(
diff --git a/packages/react/src/LinkList/LinkListLink.tsx b/packages/react/src/LinkList/LinkListLink.tsx
index 9b321defba..bddaacbb1a 100644
--- a/packages/react/src/LinkList/LinkListLink.tsx
+++ b/packages/react/src/LinkList/LinkListLink.tsx
@@ -17,7 +17,7 @@ import { Icon } from '../Icon'
 
 type BackgroundName = 'default' | 'light' | 'dark'
 
-export interface LinkListLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+export type LinkListLinkProps = {
   /** The target url for the link. */
   href: string
   /**
@@ -32,10 +32,9 @@ export interface LinkListLinkProps extends PropsWithChildren<AnchorHTMLAttribute
    * Use the same size for all items in the list.
    */
   size?: 'small' | 'large'
-}
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>
 
-interface LinkListLinkComponent
-  extends ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>> {}
+type LinkListLinkComponent = ForwardRefExoticComponent<LinkListLinkProps & RefAttributes<HTMLAnchorElement>>
 
 const iconSizeMap = {
   small: 'level-6',