@amsterdam/design-system-react/dist/index.d.ts

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import * as react from 'react';
import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, ForwardRefExoticComponent, SVGProps, RefAttributes, ImgHTMLAttributes, LabelHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, ComponentType, OptionHTMLAttributes, OptgroupHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';

type HeadingProps = {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
    /** The hierarchical level within the document. */
    level: 1 | 2 | 3 | 4;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
declare const Heading: react.ForwardRefExoticComponent<{
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
    /** The hierarchical level within the document. */
    level: 1 | 2 | 3 | 4;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
} & HTMLAttributes<HTMLHeadingElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLHeadingElement>>;

type AccordionProps = {
    /**
     * The hierarchical level of this Accordion’s Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     * Note: this intentionally does not change the font size.
     **/
    headingLevel: HeadingProps['level'];
    /** The HTML element to use for each Accordion Section. */
    sectionAs?: 'div' | 'section';
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
declare const Accordion: react.ForwardRefExoticComponent<{
    /**
     * The hierarchical level of this Accordion’s Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     * Note: this intentionally does not change the font size.
     **/
    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>>;
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 hierarchical level of the Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * Note: this intentionally does not change the font size.
     **/
    headingLevel: HeadingProps['level'];
    /** A function to run when dismissing. */
    onClose?: () => void;
    /** The significance of the message conveyed. */
    severity?: Severity;
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
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 hierarchical level of the Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * Note: this intentionally does not change the font size.
     **/
    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 center 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>;
declare const Avatar: react.ForwardRefExoticComponent<{
    /** The background colour. */
    color?: AvatarColor;
    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
    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>;
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>>;
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>>;
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;
} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;

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;
};
type GridPaddingSize = 'small' | 'medium' | 'large';
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?: GridPaddingSize;
};
type GridPaddingTopAndBottomProps = {
    /** The amount of space below. */
    paddingBottom?: GridPaddingSize;
    /** The amount of space above. */
    paddingTop?: GridPaddingSize;
    paddingVertical?: never;
};
type GridProps = {
    /** The HTML tag to use. */
    as?: GridTag;
    /** The amount of space between rows. */
    gapVertical?: 'none' | 'small' | 'large';
} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<any>> & {
    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
};

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?: 'article' | 'div' | 'section';
} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;

type BreakoutRowNumber = 1 | 2 | 3 | 4;
type BreakoutRowNumbers = {
    narrow: BreakoutRowNumber;
    medium: BreakoutRowNumber;
    wide: BreakoutRowNumber;
};
type BreakoutProps = GridProps;
declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
    Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
};

declare const iconSizes: string[];
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. */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: Function | ReactNode;
} & HTMLAttributes<HTMLSpanElement>;
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. */
    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;
};
type ButtonProps = {
    /** The level of prominence. Use a primary button only once per page or section. */
    variant?: 'primary' | 'secondary' | 'tertiary';
} & (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    HeadingGroup: react.ForwardRefExoticComponent<{
        tagline: string;
    } & HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLElement>>;
    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 = HTMLAttributes<HTMLDivElement> & {
    /** The current length of the field’s value. */
    length: number;
    /** The maximum length of the field’s value. */
    maxLength: number;
};
declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    /** The current length of the field’s value. */
    length: number;
    /** The maximum length of the field’s value. */
    maxLength: number;
} & react.RefAttributes<HTMLDivElement>>;

type CheckboxProps = {
    /** Allows being neither checked nor unchecked. */
    indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
declare const Checkbox: react.ForwardRefExoticComponent<{
    /** Allows being neither checked nor unchecked. */
    indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLInputElement>>;

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];

declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
type ColumnGap = (typeof columnGaps)[number];
type ColumnTag = 'article' | 'div' | 'section';
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>>;
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'>;
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>>;
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 DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;

type DescriptionListDescriptionProps = 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>>;
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. */
    icon?: Function;
    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
    prefix?: string;
} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
declare const ErrorMessage: react.ForwardRefExoticComponent<{
    /** An icon to display instead of the default icon. */
    icon?: Function;
    /** 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>>;
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;
    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
    optional?: boolean;
};
type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
declare const Hint: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & HintAndOptionalProps & react.RefAttributes<HTMLElement>>;

type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
    /** Whether the field set has an input with a validation error */
    invalid?: boolean;
    /** The text for the caption. */
    legend: string;
} & HintProps;
declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Whether the field set has an input with a validation error */
    invalid?: boolean;
    /** The text for the caption. */
    legend: string;
} & HTMLAttributes<HTMLElement> & {
    hint?: string;
    optional?: boolean;
} & react.RefAttributes<HTMLFieldSetElement>>;

type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
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>;
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;

type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
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>>;
};

type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
declare const Footer: 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 FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;

type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

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>;
declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;

type HeaderProps = {
    /** The name of the application. */
    brandName?: 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 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 Header.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>;
declare const Header: react.ForwardRefExoticComponent<{
    /** The name of the application. */
    brandName?: 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 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 Header.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;
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type HeaderMenuLinkProps = {
    fixed?: boolean;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type IconButtonProps = {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
    /** 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. */
    size?: IconProps['size'];
    /** The component rendering the icon’s markup. */
    svg?: IconProps['svg'];
} & ButtonHTMLAttributes<HTMLButtonElement>;
declare const IconButton: react.ForwardRefExoticComponent<{
    /** Changes the text colour for readability on a light or dark background. */
    color?: "contrast" | "inverse";
    /** 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. */
    size?: IconProps["size"];
    /** The component rendering the icon’s markup. */
    svg?: IconProps["svg"];
} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;

type ImageProps = {
    /**
     * A textual description of the content of the image.
     */
    alt: string;
} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
declare const Image: react.ForwardRefExoticComponent<{
    /**
     * A textual description of the content of the image.
     */
    alt: string;
} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;

declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;

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>;
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.
     * Note: this intentionally does not change the font size.
     **/
    headingLevel: HeadingProps['level'];
} & HTMLAttributes<HTMLDivElement>;
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.
     * Note: this intentionally does not change the font size.
     **/
    headingLevel: HeadingProps["level"];
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;

declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
    children?: react.ReactNode | undefined;
} & react.HTMLAttributes<HTMLElement> & {
    hint?: string;
    optional?: boolean;
} & react.RefAttributes<HTMLLabelElement>>;

type LinkVariant = 'standalone' | 'inline';
type LinkProps = {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
    /** Whether the link is inline or stands alone. */
    variant?: LinkVariant;
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
declare const Link: react.ForwardRefExoticComponent<{
    /** Changes the text colour for readability on a light or dark background. */
    color?: "contrast" | "inverse";
    /** Whether the link is inline or stands alone. */
    variant?: LinkVariant;
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;

type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLUListElement>> & {
    Link: react.ForwardRefExoticComponent<{
        color?: "contrast" | "inverse";
        icon?: Function;
        size?: "small" | "large";
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type LinkListLinkProps = {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
    icon?: Function;
    /** The size of the text. Use the same size for all items in the list. */
    size?: 'small' | 'large';
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>>;

type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/** @deprecated Use child components in Header instead. */
declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>> & {
    ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLDivElement>>;
};

type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

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>>;
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>>;
declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

type PageHeadingProps = {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
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 PageMenuProps = {
    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
    alignEnd?: boolean;
    /** Whether menu items should wrap if they don’t fit on a single row. */
    wrap?: boolean;
} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
declare const PageMenu: react.ForwardRefExoticComponent<{
    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
    alignEnd?: boolean;
    /** Whether menu items should wrap if they don’t fit on a single row. */
    wrap?: boolean;
} & HTMLAttributes<HTMLUListElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLUListElement>> & {
    Link: react.ForwardRefExoticComponent<{
        icon?: Function;
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type PageMenuLinkProps = {
    icon?: Function;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type PaginationProps = {
    /** 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 visible label for the link to the next page. */
    nextLabel?: string;
    /** The accessible name for the link to the next page. */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The accessible name for the link to the previous page. */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /** The accessible name for the Pagination component. */
    visuallyHiddenLabel?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    visuallyHiddenLabelId?: string;
} & HTMLAttributes<HTMLElement>;
declare const Pagination: react.ForwardRefExoticComponent<{
    /** 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 visible label for the link to the next page. */
    nextLabel?: string;
    /** The accessible name for the link to the next page. */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The accessible name for the link to the previous page. */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /** The accessible name for the Pagination component. */
    visuallyHiddenLabel?: string;
    /**
     * 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>>;
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'>;
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. */
    icon?: ReactNode;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
declare const Radio: react.ForwardRefExoticComponent<{
    /** An icon to display instead of the default icon. */
    icon?: ReactNode;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
    children?: ReactNode | undefined;
} & react.RefAttributes<HTMLInputElement>>;

declare const rowGaps: readonly ["none", "x-small", "small", "large", "x-large"];
type RowGap = (typeof rowGaps)[number];
type RowTag = 'article' | 'div' | 'section';
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>>;
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 ScreenMaxWidth = 'wide' | 'x-wide';
type ScreenProps = {
    /** Whether the screen should stretch to the full height of the viewport. */
    fullHeight?: boolean;
    /** The maximum width of the screen. */
    maxWidth?: ScreenMaxWidth;
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
declare const Screen: react.ForwardRefExoticComponent<{
    /** Whether the screen should stretch to the full height of the viewport. */
    fullHeight?: boolean;
    /** The maximum width of the screen. */
    maxWidth?: ScreenMaxWidth;
} & HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
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;
        "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-req