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

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.
     */
    headingLevel: 2 | 3 | 4;
    /** 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.
     */
    headingLevel: 2 | 3 | 4;
    /** The HTML element to use for each Accordion Section. */
    sectionAs?: "div" | "section";
} & HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>> & {
    Section: react.ForwardRefExoticComponent<{
        defaultExpanded?: boolean;
        expanded?: boolean;
        label: string;
    } & HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLDivElement>>;
};

type AccordionSectionProps = {
    /** Whether the content is displayed initially. */
    defaultExpanded?: boolean;
    /**
     * Whether the content is displayed initially.
     * @deprecated Use the `defaultExpanded` prop instead. Will be removed on or after 2026-10-20.
     */
    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>>;

declare const headingLevels: readonly [1, 2, 3, 4];
type HeadingLevel = (typeof headingLevels)[number];
type HeadingProps = {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
    /** The hierarchical level within the document. */
    level: HeadingLevel;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5';
} & 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: HeadingLevel;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5";
} & HTMLAttributes<HTMLHeadingElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLHeadingElement>>;

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 iconSizes: readonly ["small", "large", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5"];
type IconSize = (typeof iconSizes)[number];
/** All valid props for an `<svg>` element in React. */
type SvgProps = SVGProps<SVGSVGElement>;
/** A React element representing an `<svg>` element. */
type SvgElement = ReactElement<SvgProps>;
/**
 * A valid value for the `svg` prop of the `Icon` component. Can be:
 * - A rendered SVG element, e.g. `<WarningIcon />`
 * - An SVG component reference, e.g. `WarningIcon`
 * - A zero-argument function returning an SVG element, e.g. `() => <WarningIcon size="large" />`
 * - A function accepting SVG props and returning an SVG element, e.g. `(props) => <WarningIcon {...props} />`
 */
type IconSvg = SvgElement | ((props: SvgProps) => SvgElement);
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: IconSvg;
} & 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. */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: IconSvg;
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;

declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
type BadgeColor = (typeof badgeColors)[number];
type BadgeProps = {
    /** The background colour. */
    color?: BadgeColor;
    /** The icon to show before the badge text. */
    icon?: IconProps['svg'];
    /** 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 icon to show before the badge text. */
    icon?: IconProps["svg"];
    /** 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 = {
    /** The accessible name for the component. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
} & 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<{
    /** The accessible name for the component. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
} & HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
};

declare const gridCellAppearances: readonly ["flush", "transparent"];
type GridCellAppearance = (typeof gridCellAppearances)[number];
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 = {
    /**
     * Controls the background of the Grid Cell.
     *
     * In Compact Mode, cells have a background colour and padding to set them apart.
     * The flush variant removes the padding but keeps the background colour.
     * The transparent variant removes both background and padding.
     *
     * In Spacious Mode, cells are always transparent and without padding; this prop has no effect.
     */
    appearance?: GridCellAppearance;
    /** The HTML tag to use. */
    as?: GridCellTag;
    /** The amount of grid rows the cell spans. */
    rowSpan?: GridRowNumber | GridRowNumbers;
} & 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;
};
type GridRowNumber = 1 | 2 | 3 | 4;
type GridRowNumbers = {
    narrow: GridRowNumber;
    medium: GridRowNumber;
    wide: GridRowNumber;
};
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<any>>;
};

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

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";
    } & 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?: IconProps['svg'];
    /** 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?: IconProps["svg"];
    /** 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 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<any>>;

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 = {
    /** An optional caption displayed below the image. */
    caption?: string;
} & 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>>;

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

declare const logoBrands: readonly ["amsterdam", "amsterdam-english", "ggd-amsterdam", "ggd-amsterdam-inspectie", "museum-weesp", "stadsarchief", "stadsbank-van-lening", "vga-verzekeringen"];
type LogoBrand = (typeof logoBrands)[number];
type LogoProps = {
    /** The name of the brand for which to display the logo, or configuration for a custom logo. */
    brand?: LogoBrand | LogoBrandConfig;
} & SVGProps<SVGSVGElement>;
type LogoBrandConfig = {
    label: string;
    svg: ComponentType<SVGProps<SVGSVGElement>>;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
 */
declare const Logo: react.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & react.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 Hoofdmenu
     */
    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 Hoofdmenu
     */
    accessibleName?: string;
    /** Hides the component on narrow windows. */
    inWideWindow?: boolean;
} & HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<any>> & {
    Link: react.ForwardRefExoticComponent<{
        icon: IconProps["svg"];
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type MenuLinkProps = {
    /** 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<{
        heading?: string;
        headingLevel?: HeadingProps["level"];
    } & 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 = {
    /**
     * Describes the menu for users of assistive technology.
     * The heading gets visually hidden – sighted users can infer the meaning of the menu from its appearance.
     * @default Over deze website
     */
    heading?: string;
    /**
     * The hierarchical level of the Footer Menu’s Heading within the document.
     * The default value is 2. This will almost always be correct – but verify this yourself.
     */
    headingLevel?: HeadingProps['level'];
} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;

type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

type PageHeaderProps = {
    /** The name of the application. */
    brandName?: string;
    /**
     * A shorter form of the name of the application.
     * Provide this only together with a `brandName`.
     */
    brandNameShort?: string;
    /** The accessible name of the logo. */
    logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    logoBrand?: LogoBrand | LogoBrandConfig;
    /** 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;
    /** An icon to display instead of the default icon. */
    menuButtonIcon?: IconProps['svg'];
    /** The visible text for the menu button. */
    menuButtonText?: string;
    /** The text for screen readers when the button hides the menu. */
    menuButtonTextForHide?: string;
    /** The text for screen readers when the button shows the menu. */
    menuButtonTextForShow?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    menuItems?: ReactNode;
    /**
     * The accessible label for the navigation section.
     * @default Hoofdmenu
     */
    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;
    /**
     * A shorter form of the name of the application.
     * Provide this only together with a `brandName`.
     */
    brandNameShort?: string;
    /** The accessible name of the logo. */
    logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    logoBrand?: LogoBrand | LogoBrandConfig;
    /** 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;
    /** An icon to display instead of the default icon. */
    menuButtonIcon?: IconProps["svg"];
    /** The visible text for the menu button. */
    menuButtonText?: string;
    /** The text for screen readers when the button hides the menu. */
    menuButtonTextForHide?: string;
    /** The text for screen readers when the button shows the menu. */
    menuButtonTextForShow?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    menuItems?: ReactNode;
    /**
     * The accessible label for the navigation section.
     * @default Hoofdmenu
     */
    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 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;
    /** The current page number. */
    page?: number;
    /** The accessible name for the link to the previous page. */
    previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
} & 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;
    /** The current page number. */
    page?: number;
    /** The accessible name for the link to the previous page. */
    previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
} & 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?: 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 ProgressListStepProps = {
    /**
     * Whether the content is initially collapsed.
     * Defaults to `true` when `status` is `'completed'`, and `false` otherwise.
     * Ignored if `collapsible` is `false`.
     */
    defaultCollapsed?: boolean;
    /** Whether the step contains a list of substeps. This is needed to draw the connecting lines correctly. */
    hasSubsteps?: boolean;
    /** The heading text for this step. */
    heading: string;
    /**
     * Callback fired when the step is expanded or collapsed. Receives the new expanded state.
     * Ignored if `collapsible` is `false`.
     */
    onToggle?: (expanded: boolean) => void;
    /** The current progress state of the step. */
    status?: 'current' | 'completed';
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;

declare const progressListHeadingLevels: (2 | 3 | 4)[];
type ProgressListHeadingLevel = (typeof progressListHeadingLevels)[number];
type ProgressListProps = {
    /**
     * Whether the steps can be expanded and collapsed.
     * @default false
     */
    collapsible?: boolean;
    /**
     * An accessible phrase that screen readers announce before a completed step heading.
     * @default Klaar
     */
    completedAccessibleText?: string;
    /**
     * An accessible phrase that screen readers announce before a current step heading.
     * @default Bezig
     */
    currentAccessibleText?: string;
    /**
     * The hierarchical level of this Progress List’s Headings within the document.
     * There is no default value; determine the correct level for this instance.
     */
    headingLevel: ProgressListHeadingLevel;
} & PropsWithChildren<HTMLAttributes<HTMLOListElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-progress-list--docs Progress List docs at Amsterdam Design System}
 */
declare const ProgressList: react.ForwardRefExoticComponent<{
    /**
     * Whether the steps can be expanded and collapsed.
     * @default false
     */
    collapsible?: boolean;
    /**
     * An accessible phrase that screen readers announce before a completed step heading.
     * @default Klaar
     */
    completedAccessibleText?: string;
    /**
     * An accessible phrase that screen readers announce before a current step heading.
     * @default Bezig
     */
    currentAccessibleText?: string;
    /**
     * The hierarchical level of this Progress List’s Headings within the document.
     * There is no default value; determine the correct level for this instance.
     */
    headingLevel: ProgressListHeadingLevel;
} & HTMLAttributes<HTMLOListElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLOListElement>> & {
    Step: react.ForwardRefExoticComponent<{
        defaultCollapsed?: boolean;
        hasSubsteps?: boolean;
        heading: string;
        onToggle?: (expanded: boolean) => void;
        status?: "current" | "completed";
    } & HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLLIElement>>;
    Substep: react.ForwardRefExoticComponent<{
        status?: ProgressListStepProps["status"];
    } & HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLLIElement>>;
    Substeps: react.ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLOListElement>>;
};

type ProgressListSubstepProps = {
    /** The current progress state of the substep. */
    status?: ProgressListStepProps['status'];
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;

type ProgressListSubstepsProps = PropsWithChildren<HTMLAttributes<HTMLOListElement>>;

type RadioProps = {
    /**
     * An icon to display instead of the default icon.
     * @default RadioIcon
     */
    icon?: IconProps['svg'];
    /** 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?: IconProps["svg"];
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
    children?: react.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<any>>;

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<{
        form?: string | undefined | undefined;
        slot?: string | undefined | undefined;
        style?: react.CSSProperties | undefined;
        title?: string | undefined | undefined;
        dir?: string | undefined | undefined;
        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;
        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;
        spellCheck?: (boolean | "true" | "false") | undefined;
        tabIndex?: number | 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;
        children?: react.ReactNode;
        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;
        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<any>>;

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<{
        align?: "center" | "end";
    } & Omit<react.TdHTMLAttributes<HTMLTableCellElement>, "align"> & {
        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<{
        align?: "center" | "end";
    } & Omit<react.ThHTMLAttributes<HTMLTableCellElement>, "align"> & {
        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 TabNavigationProps = {
    /** The accessible name for the navigation. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
    /** The direction in which the links are laid out. */
    orientation?: 'horizontal' | 'vertical';
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-tab-navigation--docs Tab Navigation docs at Amsterdam Design System}
 */
declare const TabNavigation: react.ForwardRefExoticComponent<{
    /** The accessible name for the navigation. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
    /** The direction in which the links are laid out. */
    orientation?: "horizontal" | "vertical";
} & HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        icon?: IconProps["svg"];
        linkComponent?: react.ComponentType<react.AnchorHTMLAttributes<HTMLAnchorElement>>;
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
    List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLUListElement>>;
};

type TabNavigationLinkProps = {
    /** An icon to display before the link text. */
    icon?: IconProps['svg'];
    /**
     * The React component to use for the link.
     * Refs are not forwarded to custom link components.
     */
    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type TabNavigationListProps = 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, Pagination, Paragraph, PasswordInput, ProgressList, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, TabNavigation, 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, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, MenuLinkProps, MenuProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, ProgressListProps, ProgressListStepProps, ProgressListSubstepProps, ProgressListSubstepsProps, RadioProps, RowProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TabNavigationLinkProps, TabNavigationListProps, TabNavigationProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };