@amsterdam/design-system-react 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -1,65 +1,1939 @@
+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';
+
+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: 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<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** The hierarchical level within the document. */
+    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 = {
+    /**
+     * The hierarchical level of this Accordion’s Section Headings within the document.
+     * There is no default value; determine the correct level for each instance.
+     * The value ‘1’ is deprecated.
+     */
+    headingLevel: HeadingProps['level'];
+    /** The HTML element to use for each Accordion Section. */
+    sectionAs?: 'div' | 'section';
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
+ */
+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.
+     * 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<{
+        expanded?: boolean;
+        label: string;
+    } & HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type AccordionSectionProps = {
+    /** Whether the content is displayed initially. */
+    expanded?: boolean;
+    /** The heading text. */
+    label: string;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
+ */
+declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type Severity = 'error' | 'success' | 'warning';
+type AlertProps = {
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
+    closeable?: boolean;
+    /** The label for the button that dismisses the Alert. */
+    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.
+     * The size of the heading is fixed at level 3.
+     */
+    headingLevel: HeadingProps['level'];
+    /** A function to run when dismissing. */
+    onClose?: () => void;
+    /** The significance of the message conveyed. */
+    severity?: Severity;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
+ */
+declare const Alert: react.ForwardRefExoticComponent<{
+    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
+    closeable?: boolean;
+    /** The label for the button that dismisses the Alert. */
+    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.
+     * The size of the heading is fixed at level 3.
+     */
+    headingLevel: HeadingProps["level"];
+    /** A function to run when dismissing. */
+    onClose?: () => void;
+    /** The significance of the message conveyed. */
+    severity?: Severity;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type AvatarColor = (typeof avatarColors)[number];
+type AvatarProps = {
+    /** The background colour. */
+    color?: AvatarColor;
+    /** 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;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
+ */
+declare const Avatar: react.ForwardRefExoticComponent<{
+    /** The background colour. */
+    color?: AvatarColor;
+    /** 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;
+} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+
+declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
+type BadgeColor = (typeof badgeColors)[number];
+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<{
+    /** The background colour. */
+    color?: BadgeColor;
+    /** The text content. */
+    label: string | number;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+
+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<{
+    /** 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>;
+
+type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
+type GridCellTag = (typeof gridCellTags)[number];
+type GridCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    span: 'all';
+    start?: never;
+};
+type GridCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+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 = {
+    narrow: 1 | 2 | 3 | 4;
+    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    wide: GridColumnNumber;
+};
+declare const gridGaps: readonly ["none", "large", "2x-large"];
+type GridGap = (typeof gridGaps)[number];
+declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
+type GridPadding = (typeof gridPaddings)[number];
+declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
+type GridTag = (typeof gridTags)[number];
+type GridPaddingVerticalProp = {
+    paddingBottom?: never;
+    paddingTop?: never;
+    /** The amount of space above and below. */
+    paddingVertical?: GridPadding;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of space below. */
+    paddingBottom?: GridPadding;
+    /** The amount of space above. */
+    paddingTop?: GridPadding;
+    paddingVertical?: never;
+};
+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}
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<any>> & {
+    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
+};
+
+declare const breakoutCellTags: readonly ["article", "div", "section"];
+type BreakoutCellTag = (typeof breakoutCellTags)[number];
+type BreakoutCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    colSpan: 'all';
+    colStart?: never;
+    /** The content of this cell.
+     * The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins.
+     * The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text. */
+    has?: 'spotlight';
+};
+type BreakoutCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    colStart?: GridColumnNumber | GridColumnNumbers;
+    has?: 'figure';
+};
+type BreakoutCellRowSpanAndStartProps = {
+    /** The amount of grid rows the cell spans. */
+    rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
+    /** The index of the grid row the cell starts at. */
+    rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
+};
+type BreakoutCellProps = {
+    /** The HTML element to use. */
+    as?: BreakoutCellTag;
+} & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>> & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps);
+
+type BreakoutRowNumber = 1 | 2 | 3 | 4;
+type BreakoutRowNumbers = {
+    narrow: BreakoutRowNumber;
+    medium: BreakoutRowNumber;
+    wide: BreakoutRowNumber;
+};
+type BreakoutProps = GridProps;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
+ */
+declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
+    Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
+};
+
+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 values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
+ * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
+ */
+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 values ‘heading-0’ and ‘heading-6’ are deprecated.
+     */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
+
+type IconBeforeProp = {
+    /** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
+    iconBefore?: boolean;
+    iconOnly?: never;
+};
+type IconOnlyProp = {
+    iconBefore?: never;
+    /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
+    iconOnly?: boolean;
+};
+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;
+};
+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?: ButtonVariant;
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & (IconButtonProps$1 | TextButtonProps);
+/**
+ * @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
+ */
+declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
+type AspectRatioProps = {
+    /** The aspect ratio to display media content in. */
+    aspectRatio?: (typeof aspectRatioOptions)[number];
+};
+declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
+type CrossAlign = (typeof crossAlignOptions)[number];
+declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
+type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
+declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
+type MainAlign = (typeof mainAlignOptions)[number];
+
+type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
+ */
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Heading: react.ForwardRefExoticComponent<{
+        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> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLElement>>;
+    Image: react.ForwardRefExoticComponent<{
+        alt: string;
+    } & AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
+    Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+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>>;
+
+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<{
+    /** The current length of the field’s value. */
+    length: number;
+    /** The maximum length of the field’s value. */
+    maxLength: number;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+type CheckboxProps = {
+    /**
+     * 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.
+     * @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 = {
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @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<{
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @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 = {
+    /** 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<{
+    /** 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>>;
+
+declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
+type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
+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<{
+    /** 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;
+    } & react.RefAttributes<HTMLElement>>;
+    Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+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<{
+    /** 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.
+     * @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>>;
+/**
+ * @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.
+     * @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 = {
+    /** 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<{
+    /** 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;
+};
+type HintProps = HintAndOptionalProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const Hint: react.ForwardRefExoticComponent<HintAndOptionalProps & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>>;
+
+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> & react.RefAttributes<HTMLFieldSetElement>>;
+
+type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-figure--docs Figure docs at Amsterdam Design System}
+ */
+declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Caption: react.ForwardRefExoticComponent<{
+        color?: "inverse";
+    } & HTMLAttributes<HTMLElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-input--docs File Input docs at Amsterdam Design System}
+ */
+declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
+
+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<{
+        file: File;
+        onDelete?: () => void;
+    } & 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?: 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. */
+    size?: IconProps['size'];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps['svg'];
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
+ */
+declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    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. */
+    size?: IconProps["size"];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps["svg"];
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
+
+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<{
+    /** A textual description of the content of the image. */
+    alt: string;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
+
+type ImageSliderImageProps = ImageProps;
+type ImageSliderProps = {
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
+ */
+declare const ImageSlider: react.ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<{
+        slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<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;
+    label: string;
+};
+type InvalidFormAlertProps = {
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * 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.
+     * The size of the heading is fixed at level 3.
+     */
+    headingLevel: HeadingProps['level'];
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
+ */
+declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * 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.
+     * 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<{
+    /**
+     * 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 = {
+    /** 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<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
+
+type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link-list--docs Link List docs at Amsterdam Design System}
+ */
+declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLUListElement>> & {
+    Link: react.ForwardRefExoticComponent<{
+        color?: "inverse" | "contrast";
+        icon?: IconProps["svg"];
+        size?: "small" | "large";
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: react.ReactNode | undefined;
+    } & 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?: LinkListLinkColor;
+    /**
+     * 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?: LinkListLinkSize;
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-export * from './Accordion';
-export * from './ActionGroup';
-export * from './Alert';
-export * from './Avatar';
-export * from './Badge';
-export * from './Blockquote';
-export * from './Breadcrumb';
-export * from './Breakout';
-export * from './Button';
-export * from './CallToActionLink';
-export * from './Card';
-export * from './CharacterCount';
-export * from './Checkbox';
-export * from './Column';
-export * from './DateInput';
-export * from './DescriptionList';
-export * from './Dialog';
-export * from './ErrorMessage';
-export * from './Field';
-export * from './FieldSet';
-export * from './Figure';
-export * from './FileInput';
-export * from './FileList';
-export * from './Grid';
-export * from './Heading';
-export * from './Hint';
-export * from './Icon';
-export * from './IconButton';
-export * from './Image';
-export * from './ImageSlider';
-export * from './InvalidFormAlert';
-export * from './Label';
-export * from './Link';
-export * from './LinkList';
-export * from './Logo';
-export * from './Mark';
-export * from './Menu';
-export * from './OrderedList';
-export * from './Overlap';
-export * from './Page';
-export * from './PageFooter';
-export * from './PageHeader';
-export * from './PageHeading';
-export * from './Pagination';
-export * from './Paragraph';
-export * from './PasswordInput';
-export * from './Radio';
-export * from './Row';
-export * from './SearchField';
-export * from './Select';
-export * from './SkipLink';
-export * from './Spotlight';
-export * from './StandaloneLink';
-export * from './Switch';
-export * from './Table';
-export * from './TableOfContents';
-export * from './Tabs';
-export * from './TextArea';
-export * from './TextInput';
-export * from './TimeInput';
-export * from './UnorderedList';
+
+type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
+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}
+ */
+declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+
+type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-mark--docs Mark docs at Amsterdam Design System}
+ */
+declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<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<{
+    /**
+     * 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;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<any>> & {
+    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.
+     * @deprecated The menu has a dark background now, so this is no longer needed.
+     */
+    color?: 'contrast' | 'inverse';
+    /** The icon to display for the menu icon. Use the filled variant. */
+    icon: IconProps['svg'];
+} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
+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<{
+    /** 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;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
+
+type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-overlap--docs Overlap docs at Amsterdam Design System}
+ */
+declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<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<{
+    withMenu?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
+declare const PageFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLUListElement>>;
+    MenuLink: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLAnchorElement>>;
+    Spotlight: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type PageFooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+
+type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+
+type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+type PageHeaderProps = {
+    /** The name of the application. */
+    brandName?: string;
+    /** The accessible name of the logo. */
+    logoAccessibleName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    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<{
+    /** The name of the application. */
+    brandName?: string;
+    /** The accessible name of the logo. */
+    logoAccessibleName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The React component to use for the logo link. */
+    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use PageHeader.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
+    MenuLink: react.ForwardRefExoticComponent<{
+        fixed?: boolean;
+        icon?: IconProps["svg"];
+    } & AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
+    } & react.RefAttributes<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 = {
+    /** 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<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLHeadingElement>>;
+
+type PaginationProps = {
+    /** 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;
+    /**
+     * @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;
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
+    previousVisuallyHiddenLabel?: string;
+    /** The total amount of pages. */
+    totalPages: number;
+    /**
+     * @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<{
+    /** 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;
+    /**
+     * @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;
+    /**
+     * @deprecated Use `previousAccessibleName` instead.
+     * The accessible name for the link to the previous page.
+     */
+    previousVisuallyHiddenLabel?: string;
+    /** The total amount of pages. */
+    totalPages: number;
+    /**
+     * @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>>;
+
+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<{
+    /** 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 = {
+    /** 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<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
+
+type RadioProps = {
+    /**
+     * 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.
+     * @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 = {
+    /**
+     * The horizontal alignment of the items in the row.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The vertical alignment of the items in the row.
+     * @default stretch
+     */
+    alignVertical?: CrossAlign;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: RowTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: RowGap;
+    /**
+     * Whether items of the row can wrap onto multiple lines.
+     * @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<{
+    /**
+     * The horizontal alignment of the items in the row.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The vertical alignment of the items in the row.
+     * @default stretch
+     */
+    alignVertical?: CrossAlign;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: RowTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: RowGap;
+    /**
+     * Whether items of the row can wrap onto multiple lines.
+     * @default false
+     */
+    wrap?: boolean;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<unknown>>;
+
+type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-search-field--docs Search Field docs at Amsterdam Design System}
+ */
+declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLFormElement>> & {
+    Button: react.ForwardRefExoticComponent<{
+        children?: react.ReactNode;
+        className?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        defaultChecked?: boolean | undefined | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: react.CSSProperties | undefined;
+        tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: react.AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCopyCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCut?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCutCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPaste?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPasteCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEnd?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEndCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStart?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStartCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdate?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onFocus?: react.FocusEventHandler<HTMLButtonElement> | undefined;
+        onFocusCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlur?: react.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlurCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
+        onChange?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: react.InputEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
+        onLoad?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onError?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onErrorCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyDownCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPress?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPressCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUp?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUpCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onAbort?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAbortCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThrough?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThroughCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptied?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptiedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncrypted?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncryptedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEnded?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEndedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedData?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedDataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadata?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStart?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStartCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPause?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPauseCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlaying?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgress?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgressCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeked?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeking?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalled?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalledCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspend?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspendCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdate?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdateCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaiting?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaitingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAuxClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onAuxClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenu?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenuCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDrag?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnd?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEndCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnter?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnterCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExit?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExitCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeave?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeaveCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOver?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOverCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStart?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStartCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDrop?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onDropCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
+        onMouseDown?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseDownCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseEnter?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseLeave?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMove?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMoveCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOut?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOutCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOver?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOverCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUp?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUpCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
+        onSelect?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSelectCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancel?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancelCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEnd?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEndCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMove?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMoveCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStart?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStartCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
+        onPointerDown?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerDownCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMove?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMoveCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUp?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUpCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancel?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerCancelCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerEnter?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerLeave?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOver?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOverCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOut?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerOutCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
+        onScroll?: react.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollCapture?: react.UIEventHandler<HTMLButtonElement> | undefined;
+        onWheel?: react.WheelEventHandler<HTMLButtonElement> | undefined;
+        onWheelCapture?: react.WheelEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStart?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStartCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEnd?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEndCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIteration?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIterationCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEnd?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEndCapture?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
+        form?: string | undefined | undefined;
+        value?: string | number | readonly string[] | undefined;
+        type?: "submit" | "reset" | "button" | undefined | undefined;
+        disabled?: boolean | undefined | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined | undefined;
+        formMethod?: string | undefined | undefined;
+        formNoValidate?: boolean | undefined | undefined;
+        formTarget?: string | undefined | undefined;
+        name?: string | undefined | undefined;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    Input: react.ForwardRefExoticComponent<{
+        invalid?: boolean;
+        label?: string;
+    } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
+};
+
+type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
+
+type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
+
+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<{
+    /** 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;
+    } & react.RefAttributes<HTMLOptGroupElement>>;
+    Option: react.ForwardRefExoticComponent<SelectOptionProps & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLOptionElement>>;
+};
+
+type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-skip-link--docs Skip Link docs at Amsterdam Design System}
+ */
+declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLAnchorElement>>;
+
+declare const spotlightTags: readonly ["article", "aside", "div", "footer", "section"];
+type SpotlightTag = (typeof spotlightTags)[number];
+declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type SpotlightColor = (typeof spotlightColors)[number];
+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<{
+    /** The HTML element to use. */
+    as?: SpotlightTag;
+    /** The background colour. */
+    color?: SpotlightColor;
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<unknown>>;
+
+type StandaloneLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /**
+     * The icon to show before the link text.
+     * @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<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /**
+     * The icon to show before the link text.
+     * @default ChevronForwardIcon
+     */
+    icon?: IconProps["svg"];
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
+
+type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs Switch docs at Amsterdam Design System}
+ */
+declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-table--docs Table docs at Amsterdam Design System}
+ */
+declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLTableElement>> & {
+    Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableSectionElement>>;
+    Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableCaptionElement>>;
+    Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableCellElement>>;
+    Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableSectionElement>>;
+    Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableSectionElement>>;
+    HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableCellElement>>;
+    Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLTableRowElement>>;
+};
+
+type TableOfContentsProps = {
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * 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<{
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * 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<{
+        label: string;
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+    List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLUListElement>>;
+};
+
+type TableOfContentsLinkProps = {
+    /** The text for the link. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+
+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<{
+    /** 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> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLButtonElement>>;
+    List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Panel: react.ForwardRefExoticComponent<{
+        id: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type TabsButtonProps = {
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+
+type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+type TabsPanelProps = {
+    /** The identifier of the Tab Panel. */
+    id: string;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+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.
+     * 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<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /**
+     * 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"> & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare const textInputTypes: readonly ["email", "tel", "text", "url"];
+type TextInputType = (typeof textInputTypes)[number];
+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<{
+    /** 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>>;
+
+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<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
+
+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<{
+    /** 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;
+    } & react.RefAttributes<HTMLLIElement>>;
+};
+
+type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
+
+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 };