@amsterdam/design-system-react 1.1.0 → 2.0.1

package/dist/index.d.ts

@@ -1,34 +1,40 @@
 import * as react from 'react';
 import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, ImgHTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, OlHTMLAttributes, LiHTMLAttributes, ComponentType, OptionHTMLAttributes, OptgroupHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
-type HeadingProps = {
+type HeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The hierarchical level within the document. */
     level: 1 | 2 | 3 | 4;
-    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    /**
+     * Uses larger or smaller text without changing its position in the heading hierarchy.
+     * The value ‘level-6’ is deprecated. Use level 5 instead.
+     */
     size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
-} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
  */
-declare const Heading: react.ForwardRefExoticComponent<{
+declare const Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The hierarchical level within the document. */
     level: 1 | 2 | 3 | 4;
-    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    /**
+     * Uses larger or smaller text without changing its position in the heading hierarchy.
+     * The value ‘level-6’ is deprecated. Use level 5 instead.
+     */
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
-} & HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
 type AccordionProps = {
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The value ‘1’ is deprecated.
+     */
     headingLevel: HeadingProps['level'];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: 'div' | 'section';
@@ -40,28 +46,28 @@ declare const Accordion: react.ForwardRefExoticComponent<{
     /**
      * The hierarchical level of this Accordion’s Section Headings within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The value ‘1’ is deprecated.
+     */
     headingLevel: HeadingProps["level"];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: "div" | "section";
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
-    Section: react.ForwardRefExoticComponent<{
+    Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
+    } & {
         expanded?: boolean;
         label: string;
-    } & HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type AccordionSectionProps = {
+type AccordionSectionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** Whether the content is displayed initially. */
     expanded?: boolean;
     /** The heading text. */
     label: string;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 
 type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
@@ -79,11 +85,17 @@ type AlertProps = {
     closeButtonLabel?: string;
     /** The text for the Heading. */
     heading: string;
+    /**
+     * The id of the Heading element, which is used to label the Alert.
+     * Can be set to `null` to explicitly remove the label.
+     * Note: must be unique for the page.
+     */
+    headingId?: string | null;
     /**
      * The hierarchical level of the Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps['level'];
     /** A function to run when dismissing. */
     onClose?: () => void;
@@ -100,11 +112,17 @@ declare const Alert: react.ForwardRefExoticComponent<{
     closeButtonLabel?: string;
     /** The text for the Heading. */
     heading: string;
+    /**
+     * The id of the Heading element, which is used to label the Alert.
+     * Can be set to `null` to explicitly remove the label.
+     * Note: must be unique for the page.
+     */
+    headingId?: string | null;
     /**
      * The hierarchical level of the Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps["level"];
     /** A function to run when dismissing. */
     onClose?: () => void;
@@ -138,34 +156,34 @@ declare const Avatar: react.ForwardRefExoticComponent<{
 
 declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
-type BadgeProps = {
+type BadgeProps = HTMLAttributes<HTMLElement> & {
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
  */
-declare const Badge: react.ForwardRefExoticComponent<{
+declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+} & react.RefAttributes<HTMLElement>>;
 
-type BlockquoteProps = {
+type BlockquoteProps = PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-} & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
  */
-declare const Blockquote: react.ForwardRefExoticComponent<{
+declare const Blockquote: react.ForwardRefExoticComponent<BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
-} & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLQuoteElement>>;
 
 type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -193,10 +211,10 @@ type GridCellSpanAndStartProps = {
     /** The index of the grid column the cell starts at. */
     start?: GridColumnNumber | GridColumnNumbers;
 };
-type GridCellProps = {
+type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML tag to use. */
     as?: GridCellTag;
-} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 
 type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type GridColumnNumbers = {
@@ -223,12 +241,12 @@ type GridPaddingTopAndBottomProps = {
     paddingTop?: GridPadding;
     paddingVertical?: never;
 };
-type GridProps = {
+type GridProps = (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
     gapVertical?: GridGap;
-} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
  */
@@ -260,10 +278,10 @@ type BreakoutCellRowSpanAndStartProps = {
     /** The index of the grid row the cell starts at. */
     rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
 };
-type BreakoutCellProps = {
+type BreakoutCellProps = BreakoutCellRowSpanAndStartProps & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML element to use. */
     as?: BreakoutCellTag;
-} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 
 type BreakoutRowNumber = 1 | 2 | 3 | 4;
 type BreakoutRowNumbers = {
@@ -279,12 +297,15 @@ declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAtt
     Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
 };
 
-declare const iconSizes: readonly ["small", "large", "heading-3", "heading-4", "heading-5", "heading-6"];
+declare const iconSizes: readonly ["small", "large", "heading-0", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6"];
 type IconSize = (typeof iconSizes)[number];
 type IconProps = {
     /** Changes the icon colour for readability on a dark background. */
     color?: 'inverse';
-    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    /**
+     * The size of the icon. Choose the size of the corresponding body text or heading.
+     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
     size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;
@@ -298,7 +319,10 @@ type IconProps = {
 declare const Icon: react.ForwardRefExoticComponent<{
     /** Changes the icon colour for readability on a dark background. */
     color?: "inverse";
-    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    /**
+     * The size of the icon. Choose the size of the corresponding body text or heading.
+     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
     size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;
@@ -316,24 +340,32 @@ type IconOnlyProp = {
     /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
     iconOnly?: boolean;
 };
-type IconButtonProps$1 = {
+type IconButtonProps$1 = (IconBeforeProp | IconOnlyProp) & {
     /** Adds an icon to the button, showing it after the label. */
     icon: IconProps['svg'];
-} & (IconBeforeProp | IconOnlyProp);
+};
 type TextButtonProps = {
     icon?: never;
     iconBefore?: never;
     iconOnly?: never;
 };
-type ButtonProps = {
+type ButtonProps = (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
     /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
-} & (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+type CallToActionLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
+ */
+declare const CallToActionLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
@@ -357,76 +389,82 @@ type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Heading: react.ForwardRefExoticComponent<{
+    Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+        children?: react.ReactNode | undefined;
+    } & {
         color?: "inverse";
         level: 1 | 2 | 3 | 4;
         size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
-    } & HTMLAttributes<HTMLHeadingElement> & {
-        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLHeadingElement>>;
-    HeadingGroup: react.ForwardRefExoticComponent<{
-        tagline: string;
-    } & HTMLAttributes<HTMLElement> & {
+    HeadingGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
+    } & {
+        tagline: string;
     } & react.RefAttributes<HTMLElement>>;
-    Image: react.ForwardRefExoticComponent<{
+    Image: react.ForwardRefExoticComponent<AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & {
         alt: string;
-    } & AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
+    } & react.RefAttributes<HTMLImageElement>>;
     Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type CardHeadingGroupProps = {
+type CardHeadingGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
     tagline: string;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 
 type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
+type CharacterCountProps = {
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
     maxLength: number;
-};
+} & HTMLAttributes<HTMLDivElement>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
  */
-declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const CharacterCount: react.ForwardRefExoticComponent<{
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
     maxLength: number;
-} & react.RefAttributes<HTMLDivElement>>;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
-type CheckboxProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default CheckboxIcon
+     */
+    icon?: Function | ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
  */
-declare const Checkbox: react.ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: ReactNode | undefined;
+} & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default CheckboxIcon
+     */
+    icon?: Function | ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 declare const columnTags: readonly ["article", "div", "section"];
 type ColumnTag = (typeof columnTags)[number];
 declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type ColumnGap = (typeof columnGapSizes)[number];
-type ColumnProps = {
+type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -447,11 +485,13 @@ type ColumnProps = {
      * @default medium
      */
     gap?: ColumnGap;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
  */
-declare const Column: react.ForwardRefExoticComponent<{
+declare const Column: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -472,44 +512,42 @@ declare const Column: react.ForwardRefExoticComponent<{
      * @default medium
      */
     gap?: ColumnGap;
-} & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 declare const dateInputTypes: readonly ["date", "datetime-local"];
 type DateInputType = (typeof dateInputTypes)[number];
-type DateInputProps = {
+type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-input--docs Date Input docs at Amsterdam Design System}
  */
-declare const DateInput: react.ForwardRefExoticComponent<{
+declare const DateInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
 declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
 type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
-type DescriptionListProps = {
+type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     termsWidth?: DescriptionListTermsWidth;
-} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-description-list--docs Description List docs at Amsterdam Design System}
  */
-declare const DescriptionList: react.ForwardRefExoticComponent<{
+declare const DescriptionList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     termsWidth?: DescriptionListTermsWidth;
-} & HTMLAttributes<HTMLDListElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDListElement>> & {
     Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
@@ -522,38 +560,41 @@ declare const DescriptionList: react.ForwardRefExoticComponent<{
     } & react.RefAttributes<HTMLElement>>;
 };
 
-type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-
 type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
-type DialogProps = {
+type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
-} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}
  */
-declare const Dialog: react.ForwardRefExoticComponent<{
+declare const Dialog: react.ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode | undefined;
+} & {
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
     /** Content for the footer, often one Button or an Action Group containing more of them. */
     footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
-} & DialogHTMLAttributes<HTMLDialogElement> & {
-    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDialogElement>> & {
     close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
     open: (id: string) => void;
 };
 
 type ErrorMessageProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: Function;
+    /**
+     * An icon to display instead of the default icon.
+     * @default WarningIcon
+     */
+    icon?: IconProps['svg'];
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
@@ -561,26 +602,29 @@ type ErrorMessageProps = {
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
  */
 declare const ErrorMessage: react.ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: Function;
+    /**
+     * An icon to display instead of the default icon.
+     * @default WarningIcon
+     */
+    icon?: IconProps["svg"];
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
     prefix?: string;
 } & HTMLAttributes<HTMLParagraphElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
-type FieldProps = {
+type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field--docs Field docs at Amsterdam Design System}
  */
-declare const Field: react.ForwardRefExoticComponent<{
+declare const Field: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type HintAndOptionalProps = {
@@ -589,30 +633,30 @@ type HintAndOptionalProps = {
     /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
     optional?: boolean;
 };
-type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
-declare const Hint: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+type HintProps = HintAndOptionalProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const Hint: react.ForwardRefExoticComponent<HintAndOptionalProps & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
-} & HintAndOptionalProps & react.RefAttributes<HTMLElement>>;
+} & react.RefAttributes<HTMLElement>>;
 
-type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
+type FieldSetProps = HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
     /** Whether the field set has an input with a validation error */
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-} & HintProps;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
-declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+declare const FieldSet: react.ForwardRefExoticComponent<{
+    hint?: string;
+    optional?: boolean;
+} & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
-} & {
+} & HTMLAttributes<HTMLFieldSetElement> & {
     /** Whether the field set has an input with a validation error */
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-} & HTMLAttributes<HTMLElement> & {
-    hint?: string;
-    optional?: boolean;
 } & react.RefAttributes<HTMLFieldSetElement>>;
 
 type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
@@ -622,10 +666,10 @@ type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Caption: react.ForwardRefExoticComponent<{
-        color?: "inverse";
-    } & HTMLAttributes<HTMLElement> & {
+    Caption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
+    } & {
+        color?: "inverse";
     } & react.RefAttributes<HTMLElement>>;
 };
 
@@ -635,17 +679,17 @@ type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
  */
 declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
 
-type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+type FileListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-list--docs File List docs at Amsterdam Design System}
  */
 declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLOListElement>> & {
-    Item: react.ForwardRefExoticComponent<{
+    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
         file: File;
         onDelete?: () => void;
-    } & HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
+    } & react.RefAttributes<HTMLLIElement>>;
 };
 
 type IconButtonProps = {
@@ -672,23 +716,23 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     svg?: IconProps["svg"];
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-type ImageProps = {
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
+
+type ImageProps = AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
     /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
  */
-declare const Image: react.ForwardRefExoticComponent<{
+declare const Image: react.ForwardRefExoticComponent<AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & {
     /** A textual description of the content of the image. */
     alt: string;
-} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
-
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
+} & react.RefAttributes<HTMLImageElement>>;
 
 type ImageSliderImageProps = ImageProps;
 type ImageSliderProps = {
@@ -718,17 +762,17 @@ declare const ImageSlider: react.ForwardRefExoticComponent<{
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
-    Item: react.ForwardRefExoticComponent<{
-        slideId: number;
-    } & HTMLAttributes<HTMLDivElement> & {
+    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
+    } & {
+        slideId: number;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type ImageSliderItemProps = {
+type ImageSliderItemProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
     slideId: number;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+};
 
 type ErrorLink = {
     id: string;
@@ -759,8 +803,8 @@ type InvalidFormAlertProps = {
     /**
      * The hierarchical level of the Invalid Form Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps['level'];
 } & HTMLAttributes<HTMLDivElement>;
 /**
@@ -791,32 +835,32 @@ declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
     /**
      * The hierarchical level of the Invalid Form Alert’s Heading within the document.
      * There is no default value; determine the correct level for each instance.
-     * Note: this intentionally does not change the font size.
-     **/
+     * The size of the heading is fixed at level 3.
+     */
     headingLevel: HeadingProps["level"];
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
-declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
-    children?: react.ReactNode | undefined;
-} & react.HTMLAttributes<HTMLElement> & {
+declare const Label: react.ForwardRefExoticComponent<{
     hint?: string;
     optional?: boolean;
-} & react.RefAttributes<HTMLLabelElement>>;
+} & react.HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;
 
-type LinkProps = {
+type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs Link docs at Amsterdam Design System}
  */
-declare const Link: react.ForwardRefExoticComponent<{
+declare const Link: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
+} & react.RefAttributes<HTMLAnchorElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 /**
@@ -827,7 +871,7 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
         color?: "contrast" | "inverse";
-        icon?: Function;
+        icon?: IconProps["svg"];
         size?: "small" | "large";
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
@@ -837,8 +881,12 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
 type LinkListLinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
-    icon?: Function;
+    /**
+     * An icon to display instead of the default chevron.
+     * Don’t mix custom icons with chevrons in one list.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps['svg'];
     /** The size of the text. Use the same size for all items in the list. */
     size?: 'small' | 'large';
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
@@ -849,10 +897,10 @@ type LinkListLinkProps = {
  */
 
 type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
-type LogoProps = {
+type LogoProps = SVGProps<SVGSVGElement> & {
     /** The name of the brand for which to display the logo. */
     brand?: LogoBrand;
-} & SVGProps<SVGSVGElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
  */
@@ -866,26 +914,52 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
-type OrderedListProps = {
+type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+    accessibleName?: string;
+};
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
+ */
+declare const Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & {
+    accessibleName?: string;
+} & react.RefAttributes<HTMLElement>> & {
+    Link: react.ForwardRefExoticComponent<{
+        color?: "contrast" | "inverse";
+        icon: IconProps["svg"];
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+type MenuLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    icon: IconProps['svg'];
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
+type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: 'small';
-} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
  */
-declare const OrderedList: react.ForwardRefExoticComponent<{
+declare const OrderedList: react.ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: "small";
-} & OlHTMLAttributes<HTMLOListElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLOListElement>> & {
     Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
         children?: react.ReactNode | undefined;
@@ -934,7 +1008,7 @@ type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchor
 
 type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type PageHeaderProps = {
+type PageHeaderProps = HTMLAttributes<HTMLElement> & {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -955,11 +1029,11 @@ type PageHeaderProps = {
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
  */
-declare const PageHeader: react.ForwardRefExoticComponent<{
+declare const PageHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -980,144 +1054,193 @@ declare const PageHeader: react.ForwardRefExoticComponent<{
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+} & react.RefAttributes<HTMLElement>> & {
     GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
-    MenuLink: react.ForwardRefExoticComponent<{
-        fixed?: boolean;
-    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    MenuLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: ReactNode | undefined;
+    } & {
+        fixed?: boolean;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type PageHeaderMenuLinkProps = {
+type PageHeaderMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
     fixed?: boolean;
-} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+};
 
-type PageHeadingProps = {
+type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
-} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+};
 /**
+ * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
  */
-declare const PageHeading: react.ForwardRefExoticComponent<{
+declare const PageHeading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
-} & HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
-type PaginationProps = {
+type PaginationProps = HTMLAttributes<HTMLElement> & {
+    /** The accessible name for the Pagination component. */
+    accessibleName?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    accessibleNameId?: string;
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The template used to construct the link hrefs. */
     linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
+    /** The accessible name for the link to the next page. */
+    nextAccessibleName?: string;
     /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the link to the next page. */
+    /**
+     * @deprecated Use `nextAccessibleName` instead.
+     * The accessible name for the link to the next page.
+     */
     nextVisuallyHiddenLabel?: string;
     /** The current page number. */
     page?: number;
+    /** The accessible name for the link to the previous page. */
+    previousAccessibleName?: string;
     /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the link to the previous page. */
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
-    /** The accessible name for the Pagination component. */
+    /**
+     * @deprecated Use `accessibleName` instead.
+     * The accessible name for the Pagination component.
+     */
     visuallyHiddenLabel?: string;
     /**
+     * @deprecated Use `accessibleNameId` instead.
      * Connects the component with an internal element that defines its accessible name.
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & HTMLAttributes<HTMLElement>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
  */
-declare const Pagination: react.ForwardRefExoticComponent<{
+declare const Pagination: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** The accessible name for the Pagination component. */
+    accessibleName?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    accessibleNameId?: string;
     /** The React component to use for the links. */
     linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
     /** The template used to construct the link hrefs. */
     linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
+    /** The accessible name for the link to the next page. */
+    nextAccessibleName?: string;
     /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the link to the next page. */
+    /**
+     * @deprecated Use `nextAccessibleName` instead.
+     * The accessible name for the link to the next page.
+     */
     nextVisuallyHiddenLabel?: string;
     /** The current page number. */
     page?: number;
+    /** The accessible name for the link to the previous page. */
+    previousAccessibleName?: string;
     /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the link to the previous page. */
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
-    /** The accessible name for the Pagination component. */
+    /**
+     * @deprecated Use `accessibleName` instead.
+     * The accessible name for the Pagination component.
+     */
     visuallyHiddenLabel?: string;
     /**
+     * @deprecated Use `accessibleNameId` instead.
      * Connects the component with an internal element that defines its accessible name.
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+} & react.RefAttributes<HTMLElement>>;
 
-type ParagraphProps = {
+type ParagraphProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The size of the text. */
     size?: 'small' | 'large';
-} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-paragraph--docs Paragraph docs at Amsterdam Design System}
  */
-declare const Paragraph: react.ForwardRefExoticComponent<{
+declare const Paragraph: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The size of the text. */
     size?: "small" | "large";
-} & HTMLAttributes<HTMLParagraphElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
-type PasswordInputProps = {
+type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-password-input--docs Password Input docs at Amsterdam Design System}
  */
-declare const PasswordInput: react.ForwardRefExoticComponent<{
+declare const PasswordInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
-type RadioProps = {
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default RadioIcon
+     */
+    icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-radio--docs Radio docs at Amsterdam Design System}
  */
-declare const Radio: react.ForwardRefExoticComponent<{
-    /** An icon to display instead of the default icon. */
-    icon?: ReactNode;
+declare const Radio: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+    children?: ReactNode | undefined;
+} & {
+    /**
+     * An icon to display instead of the default icon.
+     * @default RadioIcon
+     */
+    icon?: Function | ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 declare const rowTags: readonly ["article", "div", "section"];
 type RowTag = (typeof rowTags)[number];
 declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type RowGap = (typeof rowGapSizes)[number];
-type RowProps = {
+type RowProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -1143,11 +1266,13 @@ type RowProps = {
      * @default false
      */
     wrap?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
  */
-declare const Row: react.ForwardRefExoticComponent<{
+declare const Row: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -1173,8 +1298,6 @@ declare const Row: react.ForwardRefExoticComponent<{
      * @default false
      */
     wrap?: boolean;
-} & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
@@ -1311,7 +1434,7 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         onBlurCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
         onChange?: react.FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: react.InputEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
         onInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
         onInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
@@ -1361,8 +1484,6 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         onProgressCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: react.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: react.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: react.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -1464,28 +1585,28 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
-    Input: react.ForwardRefExoticComponent<{
+    Input: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
         invalid?: boolean;
         label?: string;
-    } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+    } & react.RefAttributes<HTMLInputElement>>;
 };
 
 type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
 
 type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
 
-type SelectProps = {
+type SelectProps = PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-select--docs Select docs at Amsterdam Design System}
  */
-declare const Select: react.ForwardRefExoticComponent<{
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLSelectElement>> & {
     Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
         children?: react.ReactNode | undefined;
@@ -1507,39 +1628,45 @@ declare const spotlightTags: readonly ["article", "aside", "div", "footer", "sec
 type SpotlightTag = (typeof spotlightTags)[number];
 declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type SpotlightColor = (typeof spotlightColors)[number];
-type SpotlightProps = {
+type SpotlightProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs Spotlight docs at Amsterdam Design System}
  */
-declare const Spotlight: react.ForwardRefExoticComponent<{
+declare const Spotlight: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
-} & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
-type StandaloneLinkProps = {
+type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
-    /** Adds an icon to the link, showing it before the link text. */
-    icon?: Function;
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+    /**
+     * The icon to show before the link text.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps['svg'];
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
-declare const StandaloneLink: react.ForwardRefExoticComponent<{
+declare const StandaloneLink: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-    /** Adds an icon to the link, showing it before the link text. */
-    icon?: Function;
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
+    /**
+     * The icon to show before the link text.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps["svg"];
+} & react.RefAttributes<HTMLAnchorElement>>;
 
 type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
 /**
@@ -1579,152 +1706,152 @@ declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTab
     } & react.RefAttributes<HTMLTableRowElement>>;
 };
 
-type TableOfContentsProps = {
+type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
     /** The text for the Heading. */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
-     * Note: this intentionally does not change the font size.
+     * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps['level'];
-} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-table-of-contents--docs Table Of Contents docs at Amsterdam Design System}
  */
-declare const TableOfContents: react.ForwardRefExoticComponent<{
+declare const TableOfContents: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** The text for the Heading. */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
-     * Note: this intentionally does not change the font size.
+     * Visually, it always has the size of a level 3 Heading.
      */
     headingLevel?: HeadingProps["level"];
-} & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Link: react.ForwardRefExoticComponent<{
+    Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         label: string;
-    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+    } & react.RefAttributes<HTMLAnchorElement>>;
     List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLUListElement>>;
 };
 
-type TableOfContentsLinkProps = {
+type TableOfContentsLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     /** The text for the link. */
     label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
+};
 
 type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
-type TabsProps = {
+type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
  */
-declare const Tabs: react.ForwardRefExoticComponent<{
+declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
     onTabChange?: (panelId: string) => void;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
-    Button: react.ForwardRefExoticComponent<{
-        'aria-controls': string;
-    } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+    Button: react.ForwardRefExoticComponent<react.ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: react.ReactNode | undefined;
+    } & {
+        'aria-controls': string;
     } & react.RefAttributes<HTMLButtonElement>>;
     List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
-    Panel: react.ForwardRefExoticComponent<{
-        id: string;
-    } & HTMLAttributes<HTMLDivElement> & {
+    Panel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
+    } & {
+        id: string;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type TabsPanelProps = {
-    /** The identifier of the Tab Panel. */
-    id: string;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type TabsButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
+};
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type TabsButtonProps = {
-    /** The identifier of the corresponding tab panel. */
-    'aria-controls': string;
-} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+type TabsPanelProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+    /** The identifier of the Tab Panel. */
+    id: string;
+};
 
-type TextAreaProps = {
+type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: 'none' | 'horizontal' | 'vertical';
-} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-area--docs Text Area docs at Amsterdam Design System}
  */
-declare const TextArea: react.ForwardRefExoticComponent<{
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: "none" | "horizontal" | "vertical";
-} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
+} & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const textInputTypes: readonly ["email", "tel", "text", "url"];
 type TextInputType = (typeof textInputTypes)[number];
-type TextInputProps = {
+type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-input--docs Text Input docs at Amsterdam Design System}
  */
-declare const TextInput: react.ForwardRefExoticComponent<{
+declare const TextInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
-type TimeInputProps = {
+type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-time-input--docs Time Input docs at Amsterdam Design System}
  */
-declare const TimeInput: react.ForwardRefExoticComponent<{
+declare const TimeInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
-type UnorderedListProps = {
+type UnorderedListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>> & {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: 'small';
-} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+};
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-unordered-list--docs Unordered List docs at Amsterdam Design System}
  */
-declare const UnorderedList: react.ForwardRefExoticComponent<{
+declare const UnorderedList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: react.ReactNode | undefined;
+} & {
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
     size?: "small";
-} & HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
         children?: react.ReactNode | undefined;
@@ -1733,5 +1860,5 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
 
 type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
-export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, generateAspectRatioClass };
-export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureProps, FileInputProps, FileListProps, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageHeadingProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };
+export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, CallToActionLink, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, Menu, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, generateAspectRatioClass };
+export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CallToActionLinkProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureProps, FileInputProps, FileListProps, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, MenuLinkProps, MenuProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageHeadingProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };