@amsterdam/design-system-react 2.0.2 → 2.2.0

package/dist/index.d.ts

@@ -1,32 +1,34 @@
 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 = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+declare const headingSizes: readonly [1, 2, 3, 4];
+type HeadingSize = (typeof headingSizes)[number];
+type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
     color?: 'inverse';
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * 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<HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Heading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
     /** The hierarchical level within the document. */
-    level: 1 | 2 | 3 | 4;
+    level: HeadingSize;
     /**
      * 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 = {
@@ -54,20 +56,20 @@ declare const Accordion: react.ForwardRefExoticComponent<{
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
-    Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Section: react.ForwardRefExoticComponent<{
         expanded?: boolean;
         label: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type AccordionSectionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type AccordionSectionProps = {
     /** Whether the content is displayed initially. */
     expanded?: boolean;
     /** The heading text. */
     label: string;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
@@ -137,7 +139,7 @@ type AvatarColor = (typeof avatarColors)[number];
 type AvatarProps = {
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
@@ -148,7 +150,7 @@ type AvatarProps = {
 declare const Avatar: react.ForwardRefExoticComponent<{
     /** The background colour. */
     color?: AvatarColor;
-    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
+    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
     imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
@@ -156,34 +158,34 @@ declare const Avatar: react.ForwardRefExoticComponent<{
 
 declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
-type BadgeProps = HTMLAttributes<HTMLElement> & {
+type BadgeProps = {
     /** 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<HTMLAttributes<HTMLElement> & {
+declare const Badge: react.ForwardRefExoticComponent<{
     /** The background colour. */
     color?: BadgeColor;
     /** The text content. */
     label: string | number;
-} & react.RefAttributes<HTMLElement>>;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
-type BlockquoteProps = PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> & {
+type BlockquoteProps = {
     /** 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<BlockquoteHTMLAttributes<HTMLQuoteElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Blockquote: react.ForwardRefExoticComponent<{
     /** 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>;
@@ -211,10 +213,10 @@ type GridCellSpanAndStartProps = {
     /** The index of the grid column the cell starts at. */
     start?: GridColumnNumber | GridColumnNumbers;
 };
-type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type GridCellProps = {
     /** The HTML tag to use. */
     as?: GridCellTag;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLElement>> & (GridCellSpanAllProp | GridCellSpanAndStartProps);
 
 type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type GridColumnNumbers = {
@@ -241,12 +243,12 @@ type GridPaddingTopAndBottomProps = {
     paddingTop?: GridPadding;
     paddingVertical?: never;
 };
-type GridProps = (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
     gapVertical?: GridGap;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps);
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
  */
@@ -278,10 +280,10 @@ type BreakoutCellRowSpanAndStartProps = {
     /** The index of the grid row the cell starts at. */
     rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
 };
-type BreakoutCellProps = BreakoutCellRowSpanAndStartProps & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type BreakoutCellProps = {
     /** The HTML element to use. */
     as?: BreakoutCellTag;
-};
+} & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>> & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps);
 
 type BreakoutRowNumber = 1 | 2 | 3 | 4;
 type BreakoutRowNumbers = {
@@ -340,19 +342,21 @@ type IconOnlyProp = {
     /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
     iconOnly?: boolean;
 };
-type IconButtonProps$1 = (IconBeforeProp | IconOnlyProp) & {
+type IconButtonProps$1 = {
     /** 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 = (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+declare const buttonVariants: readonly ["primary", "secondary", "tertiary"];
+type ButtonVariant = (typeof buttonVariants)[number];
+type ButtonProps = {
     /** The level of prominence. Use a primary button only once per page or section. */
-    variant?: 'primary' | 'secondary' | 'tertiary';
-};
+    variant?: ButtonVariant;
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & (IconButtonProps$1 | TextButtonProps);
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
  */
@@ -389,30 +393,30 @@ type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Heading: react.ForwardRefExoticComponent<{
         color?: "inverse";
         level: 1 | 2 | 3 | 4;
         size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
-    } & react.RefAttributes<HTMLHeadingElement>>;
-    HeadingGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    } & HTMLAttributes<HTMLHeadingElement> & {
         children?: react.ReactNode | undefined;
-    } & {
+    } & react.RefAttributes<HTMLHeadingElement>>;
+    HeadingGroup: react.ForwardRefExoticComponent<{
         tagline: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
-    Image: react.ForwardRefExoticComponent<AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & {
+    Image: react.ForwardRefExoticComponent<{
         alt: string;
-    } & react.RefAttributes<HTMLImageElement>>;
+    } & AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
     Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type CardHeadingGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type CardHeadingGroupProps = {
     /** 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>>;
 
@@ -432,7 +436,7 @@ declare const CharacterCount: react.ForwardRefExoticComponent<{
     maxLength: number;
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
-type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+type CheckboxProps = {
     /**
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
@@ -442,13 +446,11 @@ type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement
     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<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
-} & {
+declare const Checkbox: react.ForwardRefExoticComponent<{
     /**
      * An icon to display instead of the default icon.
      * @default CheckboxIcon
@@ -458,13 +460,15 @@ declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes
     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 = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type ColumnProps = {
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -485,13 +489,11 @@ type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * @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<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Column: react.ForwardRefExoticComponent<{
     /**
      * The vertical alignment of the items in the column.
      * @default start
@@ -512,42 +514,44 @@ declare const Column: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement
      * @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 = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
+type DateInputProps = {
     /** 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<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+declare const DateInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: DateInputType;
-} & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
 type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
-type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
+type DescriptionListProps = {
     /** 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<HTMLAttributes<HTMLDListElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const DescriptionList: react.ForwardRefExoticComponent<{
     /** 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;
@@ -564,26 +568,26 @@ type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElem
 
 type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
-type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
+type DialogProps = {
     /** 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<DialogHTMLAttributes<HTMLDialogElement> & {
-    children?: ReactNode | undefined;
-} & {
+declare const Dialog: react.ForwardRefExoticComponent<{
     /** 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;
@@ -613,23 +617,24 @@ declare const ErrorMessage: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
-type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+type FieldProps = {
     /** 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<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Field: react.ForwardRefExoticComponent<{
     /** Whether the field has an input with a validation error */
     invalid?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type HintAndOptionalProps = {
     /** Show a custom hint text. */
     hint?: string;
+    inFieldSet?: boolean;
     /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
     optional?: boolean;
 };
@@ -638,26 +643,47 @@ declare const Hint: react.ForwardRefExoticComponent<HintAndOptionalProps & HTMLA
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
-type FieldSetProps = HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
-    /** Whether the field set has an input with a validation error */
+type FieldSetProps = {
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
+    /** Whether the field set has an input with a validation error. */
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-};
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
  */
 declare const FieldSet: react.ForwardRefExoticComponent<{
+    /**
+     * Whether the fieldset is nested inside another fieldset.
+     * This will show the legend in a lighter style.
+     */
+    inFieldSet?: boolean;
+    /** Whether the field set has an input with a validation error. */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+    /**
+     * Render a level 1 heading in the legend.
+     * Set this if the Field Set is the only content of the page.
+     */
+    legendIsPageHeading?: boolean;
+} & {
     hint?: string;
+    inFieldSet?: boolean;
     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;
-} & react.RefAttributes<HTMLFieldSetElement>>;
+} & HTMLAttributes<HTMLFieldSetElement> & react.RefAttributes<HTMLFieldSetElement>>;
 
 type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
@@ -666,10 +692,10 @@ type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Caption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Caption: react.ForwardRefExoticComponent<{
         color?: "inverse";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
 };
 
@@ -686,15 +712,17 @@ type FileListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLOListElement>> & {
-    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    Item: react.ForwardRefExoticComponent<{
         file: File;
         onDelete?: () => void;
-    } & react.RefAttributes<HTMLLIElement>>;
+    } & HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
 };
 
+declare const iconButtonColors: readonly ["contrast", "inverse"];
+type IconButtonColor = (typeof iconButtonColors)[number];
 type IconButtonProps = {
     /** Changes the text colour for readability on a light or dark background. */
-    color?: 'contrast' | 'inverse';
+    color?: IconButtonColor;
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
     /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
@@ -707,7 +735,7 @@ type IconButtonProps = {
  */
 declare const IconButton: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
-    color?: "contrast" | "inverse";
+    color?: IconButtonColor;
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
     /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
@@ -722,17 +750,17 @@ declare const IconButton: react.ForwardRefExoticComponent<{
  */
 declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
 
-type ImageProps = AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
+type ImageProps = {
     /** 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<AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & {
+declare const Image: react.ForwardRefExoticComponent<{
     /** A textual description of the content of the image. */
     alt: string;
-} & react.RefAttributes<HTMLImageElement>>;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
 
 type ImageSliderImageProps = ImageProps;
 type ImageSliderProps = {
@@ -762,17 +790,17 @@ declare const ImageSlider: react.ForwardRefExoticComponent<{
     /** The label for the ‘previous’ button */
     previousLabel?: string;
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
-    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Item: react.ForwardRefExoticComponent<{
         slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type ImageSliderItemProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+type ImageSliderItemProps = {
     /** 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;
@@ -844,23 +872,35 @@ declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
  */
 declare const Label: react.ForwardRefExoticComponent<{
+    /**
+     * Whether the label is nested inside a fieldset.
+     * This will show the label in a lighter style.
+     */
+    inFieldSet?: boolean;
+    /**
+     * Render a level 1 heading around the label.
+     * Set this if the Field is the only content of the page.
+     */
+    isPageHeading?: boolean;
+} & {
     hint?: string;
+    inFieldSet?: boolean;
     optional?: boolean;
 } & react.HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;
 
-type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
+type LinkProps = {
     /** 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<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
+declare const Link: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
-} & react.RefAttributes<HTMLAnchorElement>>;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 /**
@@ -870,7 +910,7 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
-        color?: "contrast" | "inverse";
+        color?: "inverse" | "contrast";
         icon?: IconProps["svg"];
         size?: "small" | "large";
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -878,9 +918,13 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
+declare const linkListLinkColors: readonly ["contrast", "inverse"];
+type LinkListLinkColor = (typeof linkListLinkColors)[number];
+declare const linkListLinkSizes: readonly ["small", "large"];
+type LinkListLinkSize = (typeof linkListLinkSizes)[number];
 type LinkListLinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
-    color?: 'contrast' | 'inverse';
+    color?: LinkListLinkColor;
     /**
      * An icon to display instead of the default chevron.
      * Don’t mix custom icons with chevrons in one list.
@@ -888,7 +932,7 @@ type LinkListLinkProps = {
      */
     icon?: IconProps['svg'];
     /** The size of the text. Use the same size for all items in the list. */
-    size?: 'small' | 'large';
+    size?: LinkListLinkSize;
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 /**
@@ -897,10 +941,10 @@ type LinkListLinkProps = {
  */
 
 type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
-type LogoProps = SVGProps<SVGSVGElement> & {
+type LogoProps = {
     /** 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}
  */
@@ -914,17 +958,31 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
-type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type MenuProps = {
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-};
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 /**
  * @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;
-} & {
+declare const Menu: react.ForwardRefExoticComponent<{
+    /**
+     * A name for this menu, which screen readers will announce.
+     * Only applies to the `inWideWindow` appearance: otherwise, the menu is in the Page Header, which ensures accessibility itself.
+     * @default Hoofdnavigatie
+     */
     accessibleName?: string;
-} & react.RefAttributes<HTMLElement>> & {
+    /** Hides the component on narrow windows. */
+    inWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<any>> & {
     Link: react.ForwardRefExoticComponent<{
         color?: "contrast" | "inverse";
         icon: IconProps["svg"];
@@ -934,32 +992,35 @@ declare const Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
 };
 
 type MenuLinkProps = {
-    /** Changes the text colour for readability on a light or dark background. */
+    /**
+     * Changes the text colour for readability on a light or dark background.
+     * @deprecated The menu has a dark background now, so this is no longer needed.
+     */
     color?: 'contrast' | 'inverse';
-    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
+    /** The icon to display for the menu icon. Use the filled variant. */
     icon: IconProps['svg'];
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
+type OrderedListProps = {
     /** 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<OlHTMLAttributes<HTMLOListElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const OrderedList: react.ForwardRefExoticComponent<{
     /** 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;
@@ -976,11 +1037,15 @@ declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEle
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type PageProps = {
+    withMenu?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
  */
-declare const Page: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const Page: react.ForwardRefExoticComponent<{
+    withMenu?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
@@ -1008,7 +1073,7 @@ type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchor
 
 type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type PageHeaderProps = HTMLAttributes<HTMLElement> & {
+type PageHeaderProps = {
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -1029,11 +1094,11 @@ type PageHeaderProps = HTMLAttributes<HTMLElement> & {
     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<HTMLAttributes<HTMLElement> & {
+declare const PageHeader: react.ForwardRefExoticComponent<{
     /** The name of the application. */
     brandName?: string;
     /** The accessible name of the logo. */
@@ -1054,35 +1119,39 @@ declare const PageHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLEle
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
     noMenuButtonOnWideWindow?: boolean;
-} & react.RefAttributes<HTMLElement>> & {
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
     GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
-    MenuLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: ReactNode | undefined;
-    } & {
+    MenuLink: react.ForwardRefExoticComponent<{
         fixed?: boolean;
+        icon?: IconProps["svg"];
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type PageHeaderMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> & {
+type PageHeaderMenuLinkProps = {
+    /** Whether the link appears in the Page Header on narrow windows. */
     fixed?: boolean;
-};
+    /** An icon to display at the end of the label. */
+    icon?: IconProps['svg'];
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
+type PageHeadingProps = {
     /** 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<HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const PageHeading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
-type PaginationProps = HTMLAttributes<HTMLElement> & {
+type PaginationProps = {
     /** The accessible name for the Pagination component. */
     accessibleName?: string;
     /**
@@ -1129,11 +1198,11 @@ type PaginationProps = HTMLAttributes<HTMLElement> & {
      * 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<HTMLAttributes<HTMLElement> & {
+declare const Pagination: react.ForwardRefExoticComponent<{
     /** The accessible name for the Pagination component. */
     accessibleName?: string;
     /**
@@ -1180,39 +1249,39 @@ declare const Pagination: react.ForwardRefExoticComponent<HTMLAttributes<HTMLEle
      * Note: must be unique for the page.
      */
     visuallyHiddenLabelId?: string;
-} & react.RefAttributes<HTMLElement>>;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
-type ParagraphProps = PropsWithChildren<HTMLAttributes<HTMLParagraphElement>> & {
+type ParagraphProps = {
     /** 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<HTMLAttributes<HTMLParagraphElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Paragraph: react.ForwardRefExoticComponent<{
     /** 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 = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'> & {
+type PasswordInputProps = {
     /** 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<Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & {
+declare const PasswordInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
+type RadioProps = {
     /**
      * An icon to display instead of the default icon.
      * @default RadioIcon
@@ -1220,13 +1289,11 @@ type RadioProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>,
     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<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: ReactNode | undefined;
-} & {
+declare const Radio: react.ForwardRefExoticComponent<{
     /**
      * An icon to display instead of the default icon.
      * @default RadioIcon
@@ -1234,13 +1301,15 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     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 = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type RowProps = {
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -1266,13 +1335,11 @@ type RowProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * @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<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Row: react.ForwardRefExoticComponent<{
     /**
      * The horizontal alignment of the items in the row.
      * @default start
@@ -1298,6 +1365,8 @@ declare const Row: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> &
      * @default false
      */
     wrap?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
@@ -1585,28 +1654,28 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
-    Input: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
+    Input: react.ForwardRefExoticComponent<{
         invalid?: boolean;
         label?: string;
-    } & react.RefAttributes<HTMLInputElement>>;
+    } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
 };
 
 type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
 
 type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
 
-type SelectProps = PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>> & {
+type SelectProps = {
     /** 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<Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Select: react.ForwardRefExoticComponent<{
     /** 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;
@@ -1628,25 +1697,25 @@ 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 = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type SpotlightProps = {
     /** 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<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Spotlight: react.ForwardRefExoticComponent<{
     /** The HTML element to use. */
     as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
-type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
+type StandaloneLinkProps = {
     /** Changes the text colour for readability on a light or dark background. */
     color?: 'contrast' | 'inverse';
     /**
@@ -1654,11 +1723,11 @@ type StandaloneLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeh
      * @default ChevronForwardIcon
      */
     icon?: IconProps['svg'];
-};
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 /**
  * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-standalone-link--docs Standalone Link docs at Amsterdam Design System}
  */
-declare const StandaloneLink: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
+declare const StandaloneLink: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a light or dark background. */
     color?: "contrast" | "inverse";
     /**
@@ -1666,7 +1735,7 @@ declare const StandaloneLink: react.ForwardRefExoticComponent<Omit<AnchorHTMLAtt
      * @default ChevronForwardIcon
      */
     icon?: IconProps["svg"];
-} & react.RefAttributes<HTMLAnchorElement>>;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
 /**
@@ -1706,7 +1775,7 @@ declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTab
     } & react.RefAttributes<HTMLTableRowElement>>;
 };
 
-type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
+type TableOfContentsProps = {
     /** The text for the Heading. */
     heading?: string;
     /**
@@ -1714,13 +1783,11 @@ type TableOfContentsProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
      * 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<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const TableOfContents: react.ForwardRefExoticComponent<{
     /** The text for the Heading. */
     heading?: string;
     /**
@@ -1728,130 +1795,138 @@ declare const TableOfContents: react.ForwardRefExoticComponent<HTMLAttributes<HT
      * 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<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    Link: react.ForwardRefExoticComponent<{
         label: string;
-    } & react.RefAttributes<HTMLAnchorElement>>;
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
     List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLUListElement>>;
 };
 
-type TableOfContentsLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+type TableOfContentsLinkProps = {
     /** The text for the link. */
     label: string;
-};
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
 
 type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
-type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+type TabsProps = {
     /** 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<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const Tabs: react.ForwardRefExoticComponent<{
     /** 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<react.ButtonHTMLAttributes<HTMLButtonElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Button: react.ForwardRefExoticComponent<{
         'aria-controls': string;
+    } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
     List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
-    Panel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & {
+    Panel: react.ForwardRefExoticComponent<{
         id: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
-type TabsButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
+type TabsButtonProps = {
     /** The identifier of the corresponding tab panel. */
     'aria-controls': string;
-};
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type TabsPanelProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
+type TabsPanelProps = {
     /** The identifier of the Tab Panel. */
     id: string;
-};
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'> & {
+type TextAreaProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    /**
+     * Allows the user to resize the text box. The default is resizing in both directions.
+     * Note: this feature is not fully supported in Safari on iOS.
+     */
     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<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & {
+declare const TextArea: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    /**
+     * Allows the user to resize the text box. The default is resizing in both directions.
+     * Note: this feature is not fully supported in Safari on iOS.
+     */
     resize?: "none" | "horizontal" | "vertical";
-} & react.RefAttributes<HTMLTextAreaElement>>;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 declare const textInputTypes: readonly ["email", "tel", "text", "url"];
 type TextInputType = (typeof textInputTypes)[number];
-type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'> & {
+type TextInputProps = {
     /** 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<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & {
+declare const TextInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
     /** The kind of data that the user should provide. */
     type?: TextInputType;
-} & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
 
-type TimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
+type TimeInputProps = {
     /** 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<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
+declare const TimeInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
-} & react.RefAttributes<HTMLInputElement>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-type UnorderedListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>> & {
+type UnorderedListProps = {
     /** 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<HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode | undefined;
-} & {
+declare const UnorderedList: react.ForwardRefExoticComponent<{
     /** 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;