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

type AccordionProps = {
    /**
     * The hierarchical level of the Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     */
    readonly headingLevel: 2 | 3 | 4;
    /** The HTML element to use for each Section. */
    readonly sectionAs?: 'div' | 'section';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
/**
 * A list of headings that each show or hide associated content.
 *
 * @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 the Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     */
    readonly headingLevel: 2 | 3 | 4;
    /** The HTML element to use for each Section. */
    readonly sectionAs?: "div" | "section";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>> & {
    Section: react.ForwardRefExoticComponent<{
        readonly defaultExpanded?: boolean;
        readonly expanded?: boolean;
        readonly label: string;
        readonly onToggle?: (expanded: boolean) => void;
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLDivElement>>;
};

type AccordionSectionProps = {
    /**
     * Whether the content is displayed initially.
     * @default false
     */
    readonly defaultExpanded?: boolean;
    /**
     * Whether the content is displayed initially.
     * @deprecated Use the `defaultExpanded` prop instead. Will be removed on or after 2026-10-20.
     */
    readonly expanded?: boolean;
    /** The heading text. */
    readonly label: string;
    /** Callback fired when the section is expanded or collapsed. Receives the new expanded state. */
    readonly onToggle?: (expanded: boolean) => void;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * Groups one or more related actions and manages their layout.
 *
 * @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. */
    readonly color?: 'inverse';
    /** The hierarchical level within the document. */
    readonly level: HeadingLevel;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    readonly size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>>;
/**
 * Introduces a page section and describes the following content.
 *
 * @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. */
    readonly color?: "inverse";
    /** The hierarchical level within the document. */
    readonly level: HeadingLevel;
    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
    readonly size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>> & react.RefAttributes<HTMLHeadingElement>>;

type Severity = 'error' | 'success' | 'warning';
type AlertProps = {
    /** Whether the user can dismiss the alert. Adds a button to its top right. */
    readonly closeable?: boolean;
    /** The label for the button that dismisses the alert. */
    readonly closeButtonLabel?: string;
    /** The text for the Heading. */
    readonly heading: string;
    /**
     * The id of the Heading element, which is used to label the alert.
     * Defaults to a generated unique id.
     * Provide a custom value to reference the Heading elsewhere; it must then be unique for the page.
     * Can be set to `null` to explicitly remove the label.
     */
    readonly headingId?: string | null;
    /**
     * The hierarchical level of the 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.
     */
    readonly headingLevel: HeadingProps['level'];
    /** A function to run when dismissing. */
    readonly onClose?: () => void;
    /** The significance of the message conveyed. */
    readonly severity?: Severity;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
/**
 * Informs the user of a significant or time-sensitive message without interrupting their task.
 *
 * @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. */
    readonly closeable?: boolean;
    /** The label for the button that dismisses the alert. */
    readonly closeButtonLabel?: string;
    /** The text for the Heading. */
    readonly heading: string;
    /**
     * The id of the Heading element, which is used to label the alert.
     * Defaults to a generated unique id.
     * Provide a custom value to reference the Heading elsewhere; it must then be unique for the page.
     * Can be set to `null` to explicitly remove the label.
     */
    readonly headingId?: string | null;
    /**
     * The hierarchical level of the 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.
     */
    readonly headingLevel: HeadingProps["level"];
    /** A function to run when dismissing. */
    readonly onClose?: () => void;
    /** The significance of the message conveyed. */
    readonly severity?: Severity;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;

declare const avatarColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
type AvatarColor = (typeof avatarColors)[number];
type AvatarProps = {
    /** The background colour. */
    readonly color?: AvatarColor;
    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
    readonly imageSrc?: string;
    /** The accessible name for the Avatar when the label provides initials. */
    readonly initialsAccessibleName?: string;
    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
    readonly label: string;
    /** The accessible name for the Avatar when the label is empty. */
    readonly userAccessibleName?: string;
} & Readonly<HTMLAttributes<HTMLSpanElement>>;
/**
 * A circular badge representing a person.
 *
 * @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. */
    readonly color?: AvatarColor;
    /** The url for the user’s image. Its centre will be displayed. Should be square and scaled down. */
    readonly imageSrc?: string;
    /** The accessible name for the Avatar when the label provides initials. */
    readonly initialsAccessibleName?: string;
    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
    readonly label: string;
    /** The accessible name for the Avatar when the label is empty. */
    readonly userAccessibleName?: string;
} & Readonly<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. */
    readonly color?: 'inverse';
    /** The size of the icon. Choose the size of the corresponding body text or heading. */
    readonly size?: IconSize;
    /** Whether the icon container should be made square. */
    readonly square?: boolean;
    /** The component rendering the icon’s markup. */
    readonly svg: IconSvg;
} & Readonly<HTMLAttributes<HTMLSpanElement>>;
/**
 * A visual symbol that represents an idea, theme, or action.
 * Icons communicate a message at a glance and draw attention to important – often interactive – information.
 *
 * @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. */
    readonly color?: "inverse";
    /** The size of the icon. Choose the size of the corresponding body text or heading. */
    readonly size?: IconSize;
    /** Whether the icon container should be made square. */
    readonly square?: boolean;
    /** The component rendering the icon’s markup. */
    readonly svg: IconSvg;
} & Readonly<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. */
    readonly color?: BadgeColor;
    /** The icon to show before the badge text. */
    readonly icon?: IconProps['svg'];
    /** The text content. */
    readonly label: string | number;
} & Readonly<HTMLAttributes<HTMLElement>>;
/**
 * A prominent label that indicates a category, property or instruction.
 *
 * @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. */
    readonly color?: BadgeColor;
    /** The icon to show before the badge text. */
    readonly icon?: IconProps["svg"];
    /** The text content. */
    readonly label: string | number;
} & Readonly<HTMLAttributes<HTMLElement>> & react.RefAttributes<HTMLElement>>;

type BlockquoteProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
} & Readonly<PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>>;
/**
 * Marks a passage as a quotation, set apart from the surrounding text.
 *
 * @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. */
    readonly color?: "inverse";
} & Readonly<PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>> & react.RefAttributes<HTMLQuoteElement>>;

type BreadcrumbProps = {
    /** The accessible name for the component. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * Shows the location of the page within the hierarchy of a website and allows navigating between levels.
 *
 * @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. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        readonly linkComponent?: react.ElementType;
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
};

type BreadcrumbLinkProps = {
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & AnchorHTMLAttributes<HTMLAnchorElement>;

/**
 * A Subgrid inherits the row gap of the Grid, so it needs a value for the x-large that Grid has by default.
 * Without it, a Subgrid inside a Grid that lowers its gap has no way back to the regular spacing.
 */
declare const gridSubgridGaps: readonly ["none", "large", "x-large", "2x-large"];
type GridSubgridGap = (typeof gridSubgridGaps)[number];
/**
 * A Subgrid can be the list a set of Cells belongs to, but never an item of one:
 * an `li` holds content, which is what a Cell is for.
 */
declare const gridSubgridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "ol", "section", "ul"];
type GridSubgridTag = (typeof gridSubgridTags)[number];
type GridSubgridSpanAllProp = {
    /** Lets the subgrid span the full width of all grid variants. */
    readonly span: 'all';
    readonly start?: never;
};
type GridSubgridSpanAndStartProps = {
    /**
     * The amount of grid columns the subgrid spans, and therefore the amount of columns its children can use.
     * Accepts a number, an object of numbers per grid variant – narrow, medium, and wide – or ‘all’ to span the full width.
     */
    readonly span?: GridColumnNumber | GridColumnNumbers;
    /**
     * The index of the grid column the subgrid starts at.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly start?: GridColumnNumber | GridColumnNumbers;
};
type GridSubgridProps = {
    /**
     * The HTML tag to use.
     * @default div
     */
    readonly as?: GridSubgridTag;
    /**
     * The amount of space between the rows of the subgrid.
     * Defaults to the vertical gap of the Grid.
     */
    readonly gapVertical?: GridSubgridGap;
    /**
     * The amount of grid rows the subgrid spans.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly rowSpan?: GridRowNumber | GridRowNumbers;
    /**
     * The index of the grid row the subgrid starts at.
     * Accepts a number or an object of numbers per grid variant.
     *
     * Only needed to place a subgrid before a sibling that starts at an earlier column:
     * automatic placement never moves back a column without moving down a row.
     */
    readonly rowStart?: GridRowNumber | GridRowNumbers;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & (GridSubgridSpanAllProp | GridSubgridSpanAndStartProps);

declare const gridCellAppearances: readonly ["flush", "transparent"];
type GridCellAppearance = (typeof gridCellAppearances)[number];
declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "li", "main", "nav", "section"];
type GridCellTag = (typeof gridCellTags)[number];
type GridCellSpanAllProp = {
    /** Lets the cell span the full width of all grid variants. */
    readonly span: 'all';
    readonly start?: never;
};
type GridCellSpanAndStartProps = {
    /**
     * The amount of grid columns the cell spans.
     * Accepts a number, an object of numbers per grid variant – narrow, medium, and wide – or ‘all’ to span the full width.
     */
    readonly span?: GridColumnNumber | GridColumnNumbers;
    /**
     * The index of the grid column the cell starts at.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly start?: GridColumnNumber | GridColumnNumbers;
};
type GridCellProps = {
    /**
     * Controls the background of the 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.
     */
    readonly appearance?: GridCellAppearance;
    /**
     * The HTML tag to use.
     * @default div
     */
    readonly as?: GridCellTag;
    /**
     * The amount of grid rows the cell spans.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly rowSpan?: GridRowNumber | GridRowNumbers;
    /**
     * The index of the grid row the cell starts at.
     * Accepts a number or an object of numbers per grid variant.
     *
     * Only needed to place a cell before a sibling that starts at an earlier column:
     * automatic placement never moves back a column without moving down a row.
     */
    readonly rowStart?: GridRowNumber | GridRowNumbers;
} & Readonly<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", "ol", "section", "ul"];
type GridTag = (typeof gridTags)[number];
type GridPaddingVerticalProp = {
    readonly paddingBottom?: never;
    readonly paddingTop?: never;
    /** The amount of space above and below. */
    readonly paddingVertical?: GridPadding;
};
type GridPaddingTopAndBottomProps = {
    /** The amount of space below. */
    readonly paddingBottom?: GridPadding;
    /** The amount of space above. */
    readonly paddingTop?: GridPadding;
    readonly paddingVertical?: never;
};
/** Every prop a Grid and a Breakout share, which is all but the tag: a Breakout is never a list. */
type GridBaseProps = {
    /** The amount of space between rows. */
    readonly gapVertical?: GridGap;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps);
type GridProps = {
    /**
     * The HTML tag to use.
     * @default div
     */
    readonly as?: GridTag;
} & GridBaseProps;
/**
 * Divides the screen into columns to align the elements of a page.
 *
 * @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<HTMLElement>> & {
    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
    Subgrid: react.ForwardRefExoticComponent<GridSubgridProps & react.RefAttributes<HTMLElement>>;
};

declare const breakoutCellTags: readonly ["article", "div", "section"];
type BreakoutCellTag = (typeof breakoutCellTags)[number];
type BreakoutCellSpanAllProps = {
    /** Lets the cell span the full width of all grid variants. */
    readonly colSpan: 'all';
    readonly colStart?: never;
    /**
     * Marks that this cell contains a Spotlight.
     * The cell then expands horizontally and vertically to cover the adjacent gaps and margins.
     */
    readonly has?: 'spotlight';
};
type BreakoutCellSpanAndStartProps = {
    /**
     * The amount of grid columns the cell spans.
     * Accepts a number, an object of numbers per grid variant – narrow, medium, and wide – or ‘all’ to span the full width.
     */
    readonly colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
    /**
     * The index of the grid column the cell starts at.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly colStart?: GridColumnNumber | GridColumnNumbers;
    /**
     * Marks that this cell contains a Figure.
     * The cell then aligns itself to the bottom of the row, in case it is less tall than the text.
     */
    readonly has?: 'figure';
};
type BreakoutCellRowSpanAndStartProps = {
    /**
     * The amount of grid rows the cell spans.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
    /**
     * The index of the grid row the cell starts at.
     * Accepts a number or an object of numbers per grid variant.
     */
    readonly rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
};
type BreakoutCellProps = {
    /**
     * The HTML element to use.
     * @default div
     */
    readonly as?: BreakoutCellTag;
} & Readonly<BreakoutCellRowSpanAndStartProps> & Readonly<BreakoutCellSpanAllProps | BreakoutCellSpanAndStartProps> & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type BreakoutRowNumber = 1 | 2 | 3 | 4;
type BreakoutRowNumbers = {
    narrow: BreakoutRowNumber;
    medium: BreakoutRowNumber;
    wide: BreakoutRowNumber;
};
/** The tags of a Grid without the list elements: a Breakout widens a figure, which is never a list. */
declare const breakoutTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
type BreakoutTag = (typeof breakoutTags)[number];
type BreakoutProps = {
    /**
     * The HTML tag to use.
     * @default div
     */
    readonly as?: BreakoutTag;
} & GridBaseProps;
/**
 * A composition that lets a figure – e.g. an image, video or map – break out of a Spotlight.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
 */
declare const Breakout: react.ForwardRefExoticComponent<BreakoutProps & react.RefAttributes<HTMLElement>> & {
    Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<HTMLElement>>;
};

type IconBeforeProp = {
    /** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
    readonly iconBefore?: boolean;
    readonly iconOnly?: never;
};
type IconOnlyProp = {
    readonly iconBefore?: never;
    /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
    readonly iconOnly?: boolean;
};
type IconButtonProps$1 = {
    /** Adds an icon to the button, showing it after the label. */
    readonly icon: IconProps['svg'];
} & (IconBeforeProp | IconOnlyProp);
type TextButtonProps = {
    readonly icon?: never;
    readonly iconBefore?: never;
    readonly 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. */
    readonly variant?: ButtonVariant;
} & Readonly<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>> & (IconButtonProps$1 | TextButtonProps);
/**
 * Allows the user to perform an action or operate the interface.
 *
 * @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 CalendarProps = {
    /** The text for the internal, visually hidden heading that gives the component an accessible name. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The month shown on first render. Defaults to the current month. */
    readonly defaultMonth?: Date;
    /** The component to render each date link with. Defaults to a plain anchor. */
    readonly linkComponent?: ElementType;
    /** Builds the link target for a date. Return `undefined` to render the date as plain text. */
    readonly linkTemplate?: (date: Date) => string | undefined;
    /** BCP 47 language tag for the weekday names, month caption, and accessible date labels. Defaults to `'nl-NL'`. */
    readonly locale?: string;
    /**
     * The icon for the button that navigates to the next month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronForwardIcon
     */
    readonly nextMonthButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the next month.
     * @default Volgende maand
     */
    readonly nextMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the next year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleForwardIcon
     */
    readonly nextYearButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the next year.
     * @default Volgend jaar
     */
    readonly nextYearButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronBackwardIcon
     */
    readonly previousMonthButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the previous month.
     * @default Vorige maand
     */
    readonly previousMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleBackwardIcon
     */
    readonly previousYearButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the previous year.
     * @default Vorig jaar
     */
    readonly previousYearButtonLabel?: string;
} & Readonly<HTMLAttributes<HTMLElement>>;
/**
 * A visual way to navigate between dates using a calendar view.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-calendar--docs Calendar docs at Amsterdam Design System}
 */
declare const Calendar: react.ForwardRefExoticComponent<{
    /** The text for the internal, visually hidden heading that gives the component an accessible name. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The month shown on first render. Defaults to the current month. */
    readonly defaultMonth?: Date;
    /** The component to render each date link with. Defaults to a plain anchor. */
    readonly linkComponent?: ElementType;
    /** Builds the link target for a date. Return `undefined` to render the date as plain text. */
    readonly linkTemplate?: (date: Date) => string | undefined;
    /** BCP 47 language tag for the weekday names, month caption, and accessible date labels. Defaults to `'nl-NL'`. */
    readonly locale?: string;
    /**
     * The icon for the button that navigates to the next month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronForwardIcon
     */
    readonly nextMonthButtonIcon?: IconProps["svg"];
    /**
     * The accessible label for the button that navigates to the next month.
     * @default Volgende maand
     */
    readonly nextMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the next year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleForwardIcon
     */
    readonly nextYearButtonIcon?: IconProps["svg"];
    /**
     * The accessible label for the button that navigates to the next year.
     * @default Volgend jaar
     */
    readonly nextYearButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronBackwardIcon
     */
    readonly previousMonthButtonIcon?: IconProps["svg"];
    /**
     * The accessible label for the button that navigates to the previous month.
     * @default Vorige maand
     */
    readonly previousMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleBackwardIcon
     */
    readonly previousYearButtonIcon?: IconProps["svg"];
    /**
     * The accessible label for the button that navigates to the previous year.
     * @default Vorig jaar
     */
    readonly previousYearButtonLabel?: string;
} & Readonly<HTMLAttributes<HTMLElement>> & react.RefAttributes<HTMLElement>>;

type CallToActionLinkProps = {
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
/**
 * A link that stands out visually and encourages the user to take a specific action.
 *
 * @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<{
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & 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. */
    readonly 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>>;
/**
 * A brief section of a heading, some text, and optionally an image, that leads to a related page.
 *
 * @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>> & {
    Content: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
    Heading: react.ForwardRefExoticComponent<{
        readonly color?: "inverse";
        readonly level: 1 | 2 | 3 | 4;
        readonly size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5";
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>> & react.RefAttributes<HTMLHeadingElement>>;
    HeadingGroup: react.ForwardRefExoticComponent<{
        readonly tagline?: string;
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;
    Image: react.ForwardRefExoticComponent<{
        readonly alt: string;
    } & Readonly<AspectRatioProps> & Readonly<Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children">> & react.RefAttributes<HTMLImageElement>>;
    Link: react.ForwardRefExoticComponent<{
        readonly linkComponent?: react.ElementType;
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type CardContentProps = Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;

type CardHeadingGroupProps = {
    /**
     * A short phrase of text, e.g. to categorise the card. Displayed above the card heading.
     * @deprecated Add a Metadata as a child instead. Will be removed on or after 2027-02-08.
     */
    readonly tagline?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type CardLinkProps = {
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
type FormatCharacterCountText = (length: number, maxLength: number) => string;
/** Formats the character count in Arabic, e.g. ‘7 من 10 أحرف’. */
declare const formatCharacterCountTextAr: FormatCharacterCountText;
/** Formats the character count in German, e.g. ‘7 von 10 Zeichen’. */
declare const formatCharacterCountTextDe: FormatCharacterCountText;
/** Formats the character count in English, e.g. ‘7 of 10 characters’. */
declare const formatCharacterCountTextEn: FormatCharacterCountText;
/** Formats the character count in French, e.g. ‘7 caractères sur 10’. */
declare const formatCharacterCountTextFr: FormatCharacterCountText;
/** Formats the character count in Dutch, e.g. ‘7 van 10 tekens’. */
declare const formatCharacterCountTextNl: FormatCharacterCountText;
/** Formats the character count in Turkish, e.g. ‘10 karakterden 7’. */
declare const formatCharacterCountTextTr: FormatCharacterCountText;

type CharacterCountProps = {
    /**
     * Returns the text that displays the count, based on the current and maximum length.
     * Formatters for all tested locales are available as exports.
     * @default formatCharacterCountTextNl
     */
    readonly formatText?: FormatCharacterCountText;
    /** The current length of the field’s value. */
    readonly length: number;
    /** The maximum length of the field’s value. */
    readonly maxLength: number;
} & Readonly<HTMLAttributes<HTMLDivElement>>;
/**
 * Shows how many characters remain within a specified limit as the user types.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
 */
declare const CharacterCount: react.ForwardRefExoticComponent<{
    /**
     * Returns the text that displays the count, based on the current and maximum length.
     * Formatters for all tested locales are available as exports.
     * @default formatCharacterCountTextNl
     */
    readonly formatText?: FormatCharacterCountText;
    /** The current length of the field’s value. */
    readonly length: number;
    /** The maximum length of the field’s value. */
    readonly maxLength: number;
} & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;

type CheckboxProps = {
    /**
     * An icon to display instead of the default icon.
     * Websites for the City of Amsterdam must use the default icon.
     * @default CheckboxIcon
     */
    readonly icon?: IconProps['svg'];
    /** Allows being neither checked nor unchecked. */
    readonly indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>>;
/**
 * Allows users to make a selection or agree to terms.
 *
 * @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.
     * Websites for the City of Amsterdam must use the default icon.
     * @default CheckboxIcon
     */
    readonly icon?: IconProps["svg"];
    /** Allows being neither checked nor unchecked. */
    readonly indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type">>> & 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
     */
    readonly align?: MainAlign;
    /**
     * The horizontal alignment of the items in the column.
     * @default stretch
     */
    readonly alignHorizontal?: CrossAlignForColumn;
    /**
     * The HTML element to use.
     * @default div
     */
    readonly as?: ColumnTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    readonly gap?: ColumnGap;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * Stacks its children vertically with gaps between them and offers alignment options.
 *
 * @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
     */
    readonly align?: MainAlign;
    /**
     * The horizontal alignment of the items in the column.
     * @default stretch
     */
    readonly alignHorizontal?: CrossAlignForColumn;
    /**
     * The HTML element to use.
     * @default div
     */
    readonly as?: ColumnTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    readonly gap?: ColumnGap;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;

declare const dateInputTypes: readonly ["date", "datetime-local"];
type DateInputType = (typeof dateInputTypes)[number];
type DateInputProps = {
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
    /** The kind of data that the user should provide. */
    readonly type?: DateInputType;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
/**
 * Helps users enter a date.
 *
 * @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. */
    readonly invalid?: boolean;
    /** The kind of data that the user should provide. */
    readonly type?: DateInputType;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type">> & react.RefAttributes<HTMLInputElement>>;

/** A start and end date. Either side may be `null` while the range is being chosen. */
type DateRange = {
    /** The start of the range, or `null` when nothing is selected. */
    readonly start: Date | null;
    /** The end of the range, or `null` while it is being chosen. */
    readonly end: Date | null;
};
type DatePickerBaseProps = {
    /** The month shown on first render. Defaults to the current month. */
    readonly defaultMonth?: Date;
    /** Prevents selection of individual dates, e.g. dates that are unavailable. They remain reachable by keyboard. */
    readonly isDateDisabled?: (date: Date) => boolean;
    /** BCP 47 language tag for the weekday names, month caption, and accessible date labels. Defaults to `'nl-NL'`. */
    readonly locale?: string;
    /** The latest selectable date. Also bounds month navigation. */
    readonly maxDate?: Date;
    /** The earliest selectable date. Also bounds month navigation. */
    readonly minDate?: Date;
    /**
     * The icon for the button that navigates to the next month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronForwardIcon
     */
    readonly nextMonthButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the next month.
     * @default Volgende maand
     */
    readonly nextMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the next year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleForwardIcon
     */
    readonly nextYearButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the next year.
     * @default Volgend jaar
     */
    readonly nextYearButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous month.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronBackwardIcon
     */
    readonly previousMonthButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the previous month.
     * @default Vorige maand
     */
    readonly previousMonthButtonLabel?: string;
    /**
     * The icon for the button that navigates to the previous year.
     * Websites for the City of Amsterdam must use the default icon.
     * @default ChevronDoubleBackwardIcon
     */
    readonly previousYearButtonIcon?: IconProps['svg'];
    /**
     * The accessible label for the button that navigates to the previous year.
     * @default Vorig jaar
     */
    readonly previousYearButtonLabel?: string;
    /**
     * Appended to the accessible name of the date that ends the range.
     * @default einddatum
     */
    readonly rangeEndAccessibleName?: string;
    /**
     * Appended to the accessible name of the date that starts the range.
     * @default startdatum
     */
    readonly rangeStartAccessibleName?: string;
} & Readonly<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>>;
type DatePickerSingleProps = {
    /** Selects a single date. This is the default mode. */
    readonly mode?: 'single';
    /** Called when the user selects a date. */
    readonly onChange: (value: Date) => void;
    /** The currently selected date, or `null`. */
    readonly value: Date | null;
};
type DatePickerRangeProps = {
    /** Selects a start and end date. */
    readonly mode: 'range';
    /** Called when the user updates the range. */
    readonly onChange: (value: DateRange) => void;
    /** The currently selected range. */
    readonly value: DateRange;
};
type DatePickerProps = DatePickerBaseProps & (DatePickerRangeProps | DatePickerSingleProps);
/**
 * A calendar grid for selecting a single date or a date range.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-picker--docs Date Picker docs at Amsterdam Design System}
 */
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;

declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
type DescriptionListProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
    /** The width of the column containing the terms. */
    readonly termsWidth?: DescriptionListTermsWidth;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDListElement>>>;
/**
 * A collection of terms and their descriptions.
 *
 * @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. */
    readonly color?: "inverse";
    /** The width of the column containing the terms. */
    readonly termsWidth?: DescriptionListTermsWidth;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDListElement>>> & 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 DescriptionListSectionProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;

type DialogProps = {
    /** The label for the button that dismisses the dialog. */
    readonly closeButtonLabel?: string;
    /** Content for the footer, often one Button or an Action Group containing more of them. */
    readonly footer?: ReactNode;
    /** The text for the Heading. */
    readonly heading: string;
} & Readonly<PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>>;
/**
 * A small window over the page that asks the user to confirm an action, answer a short question, or acknowledge a brief message.
 *
 * @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. */
    readonly closeButtonLabel?: string;
    /** Content for the footer, often one Button or an Action Group containing more of them. */
    readonly footer?: ReactNode;
    /** The text for the Heading. */
    readonly heading: string;
} & Readonly<PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>> & react.RefAttributes<HTMLDialogElement>> & {
    close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
    open: (id: string) => void;
};

type ErrorMessageProps = {
    /**
     * An icon to display instead of the default icon.
     * Websites for the City of Amsterdam must use the default icon.
     * @default WarningIcon
     */
    readonly icon?: IconProps['svg'];
    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
    readonly prefix?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>>;
/**
 * Labels a validation error for a specific form field and explains how to resolve it.
 *
 * @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.
     * Websites for the City of Amsterdam must use the default icon.
     * @default WarningIcon
     */
    readonly icon?: IconProps["svg"];
    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
    readonly prefix?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>> & react.RefAttributes<HTMLParagraphElement>>;

type FieldProps = {
    /** Whether the field has an input with a validation error. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
/**
 * Wraps a single input and its related elements. May indicate that the input has a validation error.
 *
 * @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. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;

type HintAndOptionalProps = {
    /** Show a custom hint text. */
    readonly hint?: string;
    readonly inFieldSet?: boolean;
    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
    readonly optional?: boolean;
};
type HintProps = Readonly<HintAndOptionalProps> & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * Optional hint text or an 'optional' indicator associated with a form field.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
 */
declare const Hint: react.ForwardRefExoticComponent<Readonly<HintAndOptionalProps> & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;

type FieldSetProps = {
    /**
     * Whether the fieldset is nested inside another fieldset.
     * This will show the legend in a lighter style.
     */
    readonly inFieldSet?: boolean;
    /** Whether the field set has an input with a validation error. */
    readonly invalid?: boolean;
    /** The text for the caption. */
    readonly legend: string;
    /**
     * Render a level 1 heading in the legend.
     * Set this if the Field Set is the only content of the page.
     */
    readonly legendIsPageHeading?: boolean;
} & HintProps & Readonly<PropsWithChildren<FieldsetHTMLAttributes<HTMLFieldSetElement>>>;
/**
 * Groups a set of Radio buttons or Checkboxes, or other related form fields.
 *
 * @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.
     */
    readonly inFieldSet?: boolean;
    /** Whether the field set has an input with a validation error. */
    readonly invalid?: boolean;
    /** The text for the caption. */
    readonly legend: string;
    /**
     * Render a level 1 heading in the legend.
     * Set this if the Field Set is the only content of the page.
     */
    readonly legendIsPageHeading?: boolean;
} & Readonly<{
    readonly hint?: string;
    readonly inFieldSet?: boolean;
    readonly optional?: boolean;
}> & Readonly<PropsWithChildren<react.HTMLAttributes<HTMLElement>>> & Readonly<PropsWithChildren<FieldsetHTMLAttributes<HTMLFieldSetElement>>> & react.RefAttributes<HTMLFieldSetElement>>;

type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * Groups media content with a caption that describes it.
 *
 * @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<{
        readonly color?: "inverse";
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;
};

type FigureCaptionProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
/**
 * Allows the user to upload one or more files from their device.
 *
 * @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>>;
/**
 * An overview of files, showing their name, type, size, and a preview.
 *
 * @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<HTMLUListElement>> & {
    Item: react.ForwardRefExoticComponent<{
        readonly file: File;
        readonly onDelete?: () => void;
    } & Readonly<HTMLAttributes<HTMLLIElement>> & react.RefAttributes<HTMLLIElement>>;
};

type FileListItemProps = {
    /** The file to display. Shows its name, type, and size, and a thumbnail for images. */
    readonly file: File;
    /** A function to run when the user removes the file. Adds a delete button. */
    readonly onDelete?: () => void;
} & Readonly<HTMLAttributes<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. */
    readonly color?: IconButtonColor;
    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
    readonly label: string;
    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
    readonly size?: IconProps['size'];
    /** The component rendering the icon’s markup. */
    readonly svg?: IconProps['svg'];
} & Readonly<ButtonHTMLAttributes<HTMLButtonElement>>;
/**
 * An icon in a button that can be aligned with text.
 *
 * @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. */
    readonly color?: IconButtonColor;
    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
    readonly label: string;
    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
    readonly size?: IconProps["size"];
    /** The component rendering the icon’s markup. */
    readonly svg?: IconProps["svg"];
} & Readonly<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. */
    readonly alt: string;
} & Readonly<AspectRatioProps> & Readonly<Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>>;
/**
 * Displays an image.
 *
 * @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. */
    readonly alt: string;
} & Readonly<AspectRatioProps> & Readonly<Omit<ImgHTMLAttributes<HTMLImageElement>, "children">> & react.RefAttributes<HTMLImageElement>>;

type ImageSliderImageProps = {
    /** An optional caption displayed below the image. */
    readonly caption?: string;
} & Readonly<ImageProps>;
type ImageSliderProps = {
    /** Display buttons to navigate to the previous or next image. */
    readonly controls?: boolean;
    /** Label for the image if you need to translate the alt text. */
    readonly imageLabel?: string;
    /** The set of images to display. */
    readonly images: ImageSliderImageProps[];
    /** The label for the ‘next’ button. */
    readonly nextLabel?: string;
    /** The label for the ‘previous’ button. */
    readonly previousLabel?: string;
} & Readonly<HTMLAttributes<HTMLDivElement>>;
/**
 * Displays a small set of images in a limited space.
 *
 * @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. */
    readonly controls?: boolean;
    /** Label for the image if you need to translate the alt text. */
    readonly imageLabel?: string;
    /** The set of images to display. */
    readonly images: ImageSliderImageProps[];
    /** The label for the ‘next’ button. */
    readonly nextLabel?: string;
    /** The label for the ‘previous’ button. */
    readonly previousLabel?: string;
} & Readonly<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' }
     */
    readonly errorCountLabel?: {
        plural: string;
        singular: string;
    };
    /** The list of error messages to display. */
    readonly errors: ErrorLink[];
    /**
     * Whether the component receives focus on first render.
     * @default true
     */
    readonly focusOnRender?: boolean;
    /**
     * The text for the Heading.
     * @default Verbeter de fouten voor u verder gaat
     */
    readonly heading?: string;
    /**
     * The hierarchical level of the 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.
     */
    readonly headingLevel: HeadingProps['level'];
} & Readonly<HTMLAttributes<HTMLDivElement>>;
/**
 * Summarises validation errors at the top of a page so users can review and correct them all.
 *
 * @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' }
     */
    readonly errorCountLabel?: {
        plural: string;
        singular: string;
    };
    /** The list of error messages to display. */
    readonly errors: ErrorLink[];
    /**
     * Whether the component receives focus on first render.
     * @default true
     */
    readonly focusOnRender?: boolean;
    /**
     * The text for the Heading.
     * @default Verbeter de fouten voor u verder gaat
     */
    readonly heading?: string;
    /**
     * The hierarchical level of the 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.
     */
    readonly headingLevel: HeadingProps["level"];
} & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;

type LabelProps = {
    /**
     * Whether the label is nested inside a fieldset.
     * This will show the label in a lighter style.
     */
    readonly inFieldSet?: boolean;
    /**
     * Render a level 1 heading around the label.
     * Set this if the Field is the only content of the page.
     */
    readonly isPageHeading?: boolean;
} & HintProps & Readonly<PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>>;
/**
 * Describes a form control.
 *
 * @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.
     */
    readonly inFieldSet?: boolean;
    /**
     * Render a level 1 heading around the label.
     * Set this if the Field is the only content of the page.
     */
    readonly isPageHeading?: boolean;
} & Readonly<{
    readonly hint?: string;
    readonly inFieldSet?: boolean;
    readonly optional?: boolean;
}> & Readonly<PropsWithChildren<react.HTMLAttributes<HTMLElement>>> & Readonly<PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>>> & react.RefAttributes<HTMLLabelElement>>;

type LinkProps = {
    /** Changes the text colour for readability on a light or dark background. */
    readonly color?: 'contrast' | 'inverse';
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>>;
/**
 * Inline navigation for use within text or alongside other content.
 *
 * @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. */
    readonly color?: "contrast" | "inverse";
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder">> & react.RefAttributes<HTMLAnchorElement>>;

type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
/**
 * A collection of related links.
 *
 * @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<{
        readonly color?: "inverse" | "contrast";
        readonly icon?: IconProps["svg"];
        readonly linkComponent?: react.ElementType;
        readonly size?: "small" | "large";
    } & Readonly<PropsWithChildren<react.AnchorHTMLAttributes<HTMLAnchorElement>>> & 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. */
    readonly color?: LinkListLinkColor;
    /**
     * An icon to display instead of the default chevron.
     * Don’t mix custom icons with chevrons in one list.
     * @default ChevronForwardIcon
     */
    readonly icon?: IconProps['svg'];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
    /** The size of the text. Use the same size for all items in the list. */
    readonly size?: LinkListLinkSize;
} & Readonly<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. */
    readonly brand?: LogoBrand | LogoBrandConfig;
} & Readonly<SVGProps<SVGSVGElement>>;
type LogoBrandConfig = {
    label: string;
    svg: ComponentType<SVGProps<SVGSVGElement>>;
};
/**
 * The City’s logo combines an icon – the three Saint Andrew’s crosses – with a wordmark.
 * It has a fixed colour, size, and position and is present on all our websites.
 *
 * @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>>;
/**
 * Highlights a text fragment to draw the reader's attention to it.
 *
 * @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
     */
    readonly accessibleName?: string;
    /** Hides the component on narrow windows. */
    readonly inWideWindow?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * A primary navigation leading to key areas of a website.
 *
 * @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
     */
    readonly accessibleName?: string;
    /** Hides the component on narrow windows. */
    readonly inWideWindow?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        readonly icon: IconProps["svg"];
        readonly linkComponent?: ElementType;
    } & Readonly<PropsWithChildren<react.AnchorHTMLAttributes<HTMLAnchorElement>>> & react.RefAttributes<HTMLAnchorElement>>;
};

type MenuLinkProps = {
    /** The icon to display for the menu icon. Use the filled variant. */
    readonly icon: IconProps['svg'];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>>;

type MetadataProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
    /** The size of the text. */
    readonly size?: 'small';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>>;
/**
 * Supporting information about a piece of content, such as the date it was published or the categories it belongs to.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-metadata--docs Metadata docs at Amsterdam Design System}
 */
declare const Metadata: react.ForwardRefExoticComponent<{
    /** Changes the text colour for readability on a dark background. */
    readonly color?: "inverse";
    /** The size of the text. */
    readonly size?: "small";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>> & react.RefAttributes<HTMLParagraphElement>> & {
    Separator: react.ForwardRefExoticComponent<Readonly<HTMLAttributes<HTMLSpanElement>> & react.RefAttributes<HTMLSpanElement>>;
};

type MetadataSeparatorProps = Readonly<HTMLAttributes<HTMLSpanElement>>;

type ModalDialogProps = {
    /**
     * Whether the Modal Dialog is open, to control it from your application’s state.
     * Leave undefined to open it imperatively with `ModalDialog.open`.
     */
    readonly open?: boolean;
} & Readonly<PropsWithChildren<Omit<DialogHTMLAttributes<HTMLDialogElement>, 'open'>>>;
/**
 * A window that focuses attention on a single task or message, blocking interaction with the underlying page until it is closed.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-modal-dialog--docs Modal Dialog docs at Amsterdam Design System}
 */
declare const ModalDialog: react.ForwardRefExoticComponent<{
    /**
     * Whether the Modal Dialog is open, to control it from your application’s state.
     * Leave undefined to open it imperatively with `ModalDialog.open`.
     */
    readonly open?: boolean;
} & Readonly<PropsWithChildren<Omit<DialogHTMLAttributes<HTMLDialogElement>, "open">>> & react.RefAttributes<HTMLDialogElement>> & {
    Body: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<react.HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
    close: (event: react.MouseEvent<HTMLButtonElement>) => void | undefined;
    Footer: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<react.HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;
    Header: react.ForwardRefExoticComponent<{
        readonly closeButtonAccessibleName?: string;
        readonly closeButtonIcon?: IconProps["svg"];
        readonly closeButtonSize?: Extract<IconProps["size"], `heading-${number}`>;
    } & Readonly<PropsWithChildren<react.HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;
    open: (selector: string) => void;
};

type ModalDialogBodyProps = Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;

type ModalDialogFooterProps = Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type ModalDialogHeaderProps = {
    /**
     * The accessible name of the button that dismisses the Modal Dialog.
     * Will be announced by screen readers.
     * @default Sluiten
     */
    readonly closeButtonAccessibleName?: string;
    /**
     * An icon for the button that dismisses the Modal Dialog, to display instead of the default cross.
     * Websites for the City of Amsterdam must use the default icon.
     */
    readonly closeButtonIcon?: IconProps['svg'];
    /**
     * The size of the button that dismisses the Modal Dialog.
     * Match it to the size of the Heading in the Header.
     * @default heading-2
     */
    readonly closeButtonSize?: Extract<IconProps['size'], `heading-${number}`>;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;

type OrderedListProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
    /** Whether the list items show a marker. */
    readonly markers?: boolean;
    /** The size of the text. */
    readonly size?: 'small';
} & Readonly<PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>>;
/**
 * Presents a sequence of items where the order is meaningful.
 *
 * @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. */
    readonly color?: "inverse";
    /** Whether the list items show a marker. */
    readonly markers?: boolean;
    /** The size of the text. */
    readonly size?: "small";
} & Readonly<PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>> & 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>>;
/**
 * Displays two or more components on top of each other.
 *
 * @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 = {
    /**
     * Whether the page contains a Menu component.
     * This requires the following class names on the appropriate children:
     *   - `ams-page__area--skip-link`
     *   - `ams-page__area--header`
     *   - `ams-page__area--menu`
     *   - `ams-page__area--body`
     *   - `ams-page__area--footer`
     */
    readonly withMenu?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
/**
 * Contains the entire website.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
 */
declare const Page: react.ForwardRefExoticComponent<{
    /**
     * Whether the page contains a Menu component.
     * This requires the following class names on the appropriate children:
     *   - `ams-page__area--skip-link`
     *   - `ams-page__area--header`
     *   - `ams-page__area--menu`
     *   - `ams-page__area--body`
     *   - `ams-page__area--footer`
     */
    readonly withMenu?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;

type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * Provides service information at the bottom of every page.
 *
 * @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<{
        readonly heading?: string;
        readonly headingLevel?: HeadingProps["level"];
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLUListElement>>> & react.RefAttributes<HTMLUListElement>>;
    MenuLink: react.ForwardRefExoticComponent<{
        readonly linkComponent?: react.ElementType;
    } & 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
     */
    readonly heading?: string;
    /**
     * The hierarchical level of the Heading within the document.
     * The default value is 2. This will almost always be correct – but verify this yourself.
     */
    readonly headingLevel?: HeadingProps['level'];
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLUListElement>>>;

type PageFooterMenuLinkProps = {
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

type PageHeaderProps = {
    /** The name of the application. */
    readonly brandName?: string;
    /**
     * A shorter form of the name of the application.
     * Provide this only together with a `brandName`.
     */
    readonly brandNameShort?: string;
    /**
     * Whether the mega menu is open initially.
     * Ignored when `open` is provided.
     * @default false
     */
    readonly defaultOpen?: boolean;
    /** The accessible name of the logo. */
    readonly logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    readonly logoBrand?: LogoBrand | LogoBrandConfig;
    /** The url for the link on the logo. */
    readonly logoLink?: string;
    /** The React component or intrinsic element to use for the logo link. */
    readonly logoLinkComponent?: ElementType;
    /** The accessible text for the link on the logo. */
    readonly logoLinkTitle?: string;
    /**
     * An icon to display instead of the default icon.
     * Websites for the City of Amsterdam must use the default icon.
     * @default PageHeaderMenuIcon
     */
    readonly menuButtonIcon?: IconProps['svg'];
    /** The visible text for the menu button. */
    readonly menuButtonText?: string;
    /** The text for screen readers when the button hides the menu. */
    readonly menuButtonTextForHide?: string;
    /** The text for screen readers when the button shows the menu. */
    readonly menuButtonTextForShow?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    readonly menuItems?: ReactNode;
    /**
     * The accessible label for the navigation section.
     * @default Hoofdmenu
     */
    readonly navigationLabel?: string;
    /** Hides the menu button on wide windows. */
    readonly noMenuButtonOnWideWindow?: boolean;
    /** Callback fired when the mega menu is opened or closed. Receives the new open state. */
    readonly onOpenChange?: (open: boolean) => void;
    /**
     * Whether the mega menu is open.
     * When provided, the component is controlled and internal state is ignored.
     */
    readonly open?: boolean;
} & Readonly<HTMLAttributes<HTMLElement>>;
/**
 * Conveys the identity and authority of the website through a logo and optional navigation links.
 *
 * @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. */
    readonly brandName?: string;
    /**
     * A shorter form of the name of the application.
     * Provide this only together with a `brandName`.
     */
    readonly brandNameShort?: string;
    /**
     * Whether the mega menu is open initially.
     * Ignored when `open` is provided.
     * @default false
     */
    readonly defaultOpen?: boolean;
    /** The accessible name of the logo. */
    readonly logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    readonly logoBrand?: LogoBrand | LogoBrandConfig;
    /** The url for the link on the logo. */
    readonly logoLink?: string;
    /** The React component or intrinsic element to use for the logo link. */
    readonly logoLinkComponent?: ElementType;
    /** The accessible text for the link on the logo. */
    readonly logoLinkTitle?: string;
    /**
     * An icon to display instead of the default icon.
     * Websites for the City of Amsterdam must use the default icon.
     * @default PageHeaderMenuIcon
     */
    readonly menuButtonIcon?: IconProps["svg"];
    /** The visible text for the menu button. */
    readonly menuButtonText?: string;
    /** The text for screen readers when the button hides the menu. */
    readonly menuButtonTextForHide?: string;
    /** The text for screen readers when the button shows the menu. */
    readonly menuButtonTextForShow?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    readonly menuItems?: ReactNode;
    /**
     * The accessible label for the navigation section.
     * @default Hoofdmenu
     */
    readonly navigationLabel?: string;
    /** Hides the menu button on wide windows. */
    readonly noMenuButtonOnWideWindow?: boolean;
    /** Callback fired when the mega menu is opened or closed. Receives the new open state. */
    readonly onOpenChange?: (open: boolean) => void;
    /**
     * Whether the mega menu is open.
     * When provided, the component is controlled and internal state is ignored.
     */
    readonly open?: boolean;
} & Readonly<HTMLAttributes<HTMLElement>> & react.RefAttributes<HTMLElement>> & {
    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
    MenuLink: react.ForwardRefExoticComponent<{
        readonly fixed?: boolean;
        readonly icon?: IconProps["svg"];
        readonly linkComponent?: ElementType;
    } & Readonly<react.PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>> & react.RefAttributes<HTMLAnchorElement>>;
};

type PageHeaderMenuLinkProps = {
    /** Whether the link appears in the Page Header on narrow windows. */
    readonly fixed?: boolean;
    /** An icon to display at the end of the label. */
    readonly icon?: IconProps['svg'];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>>;

type PaginationProps = {
    /** The accessible name for the component. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The accessible name for the link to the current page. The page number is appended. */
    readonly currentPageAccessibleName?: string;
    /** The React component or intrinsic element to use for the links. */
    readonly linkComponent?: ElementType;
    /** The template used to construct the link hrefs. */
    readonly linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    readonly maxVisiblePages?: number;
    /** The accessible name for the link to the next page. */
    readonly nextAccessibleName?: string;
    /** The visible label for the link to the next page. */
    readonly nextLabel?: string;
    /** The current page number. */
    readonly page?: number;
    /** The accessible name for the links to the other pages. The page number is appended. */
    readonly pageAccessibleName?: string;
    /** The accessible name for the link to the previous page. */
    readonly previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    readonly previousLabel?: string;
    /** The total amount of pages. */
    readonly totalPages: number;
} & Readonly<HTMLAttributes<HTMLElement>>;
/**
 * Navigates between multiple pages of content, indicating the current position in the set.
 *
 * @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 component. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The accessible name for the link to the current page. The page number is appended. */
    readonly currentPageAccessibleName?: string;
    /** The React component or intrinsic element to use for the links. */
    readonly linkComponent?: ElementType;
    /** The template used to construct the link hrefs. */
    readonly linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    readonly maxVisiblePages?: number;
    /** The accessible name for the link to the next page. */
    readonly nextAccessibleName?: string;
    /** The visible label for the link to the next page. */
    readonly nextLabel?: string;
    /** The current page number. */
    readonly page?: number;
    /** The accessible name for the links to the other pages. The page number is appended. */
    readonly pageAccessibleName?: string;
    /** The accessible name for the link to the previous page. */
    readonly previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    readonly previousLabel?: string;
    /** The total amount of pages. */
    readonly totalPages: number;
} & Readonly<HTMLAttributes<HTMLElement>> & react.RefAttributes<HTMLElement>>;

type ParagraphProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
    /** The size of the text. */
    readonly size?: 'small' | 'large';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>>;
/**
 * Represents a paragraph of running text, form instructions, and other standalone text fragments.
 *
 * @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. */
    readonly color?: "inverse";
    /** The size of the text. */
    readonly size?: "small" | "large";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>> & react.RefAttributes<HTMLParagraphElement>>;

type PasswordInputProps = {
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>>;
/**
 * Helps users enter a password.
 *
 * @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. */
    readonly invalid?: boolean;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type">> & react.RefAttributes<HTMLInputElement>>;

type ProgressListStepProps = {
    /**
     * Whether the step content is collapsed.
     * @deprecated Use the `expanded` prop instead (its value is inverted). Will be removed on or after 2027-01-10.
     */
    readonly collapsed?: boolean;
    /**
     * Whether the content is initially collapsed.
     * @deprecated Use the `defaultExpanded` prop instead (its value is inverted). Will be removed on or after 2027-01-10.
     */
    readonly defaultCollapsed?: boolean;
    /**
     * Whether the content is initially displayed.
     * Defaults to `false` when `status` is `'completed'`, and `true` otherwise.
     * Ignored when `collapsible` is `false` on the parent, or when `expanded` (or the deprecated `collapsed`) is provided.
     */
    readonly defaultExpanded?: boolean;
    /**
     * Whether the step content is displayed.
     * When provided, the component is controlled and internal state is ignored.
     * Has no effect when `collapsible` is `false` on the parent.
     */
    readonly expanded?: boolean;
    /** Whether the step contains a list of substeps. This is needed to draw the connecting lines correctly. */
    readonly hasSubsteps?: boolean;
    /** The heading text for this step. */
    readonly heading: string;
    /**
     * Callback fired when the step is expanded or collapsed. Receives the new expanded state.
     * Ignored if `collapsible` is `false`.
     */
    readonly onToggle?: (expanded: boolean) => void;
    /** The current progress state of the step. */
    readonly status?: 'current' | 'completed';
} & Readonly<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
     */
    readonly collapsible?: boolean;
    /**
     * An accessible phrase that screen readers announce before a completed step heading.
     * @default Klaar
     */
    readonly completedAccessibleText?: string;
    /**
     * An accessible phrase that screen readers announce before a current step heading.
     * @default Bezig
     */
    readonly currentAccessibleText?: string;
    /**
     * The hierarchical level of the step Headings within the document.
     * There is no default value; determine the correct level for this instance.
     */
    readonly headingLevel: ProgressListHeadingLevel;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLOListElement>>>;
/**
 * Displays the progress of a sequence of steps, with optional additional details per step.
 *
 * @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
     */
    readonly collapsible?: boolean;
    /**
     * An accessible phrase that screen readers announce before a completed step heading.
     * @default Klaar
     */
    readonly completedAccessibleText?: string;
    /**
     * An accessible phrase that screen readers announce before a current step heading.
     * @default Bezig
     */
    readonly currentAccessibleText?: string;
    /**
     * The hierarchical level of the step Headings within the document.
     * There is no default value; determine the correct level for this instance.
     */
    readonly headingLevel: ProgressListHeadingLevel;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLOListElement>>> & react.RefAttributes<HTMLOListElement>> & {
    Step: react.ForwardRefExoticComponent<{
        readonly collapsed?: boolean;
        readonly defaultCollapsed?: boolean;
        readonly defaultExpanded?: boolean;
        readonly expanded?: boolean;
        readonly hasSubsteps?: boolean;
        readonly heading: string;
        readonly onToggle?: (expanded: boolean) => void;
        readonly status?: "current" | "completed";
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLLIElement>>;
    Substep: react.ForwardRefExoticComponent<{
        readonly status?: ProgressListStepProps["status"];
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLLIElement>>;
    Substeps: react.ForwardRefExoticComponent<HTMLAttributes<HTMLOListElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLOListElement>>;
};

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

type ProgressListSubstepsProps = PropsWithChildren<HTMLAttributes<HTMLOListElement>>;

type RadioProps = {
    /**
     * An icon to display instead of the default icon.
     * Websites for the City of Amsterdam must use the default icon.
     * @default RadioIcon
     */
    readonly icon?: IconProps['svg'];
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>>;
/**
 * Allows users to select one option from a list.
 *
 * @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.
     * Websites for the City of Amsterdam must use the default icon.
     * @default RadioIcon
     */
    readonly icon?: IconProps["svg"];
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type">>> & 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
     */
    readonly align?: MainAlign;
    /**
     * The vertical alignment of the items in the row.
     * @default stretch
     */
    readonly alignVertical?: CrossAlign;
    /**
     * The HTML element to use.
     * @default div
     */
    readonly as?: RowTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    readonly gap?: RowGap;
    /**
     * Whether items of the row can wrap onto multiple lines.
     * @default false
     */
    readonly wrap?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * Stacks its children horizontally with gaps between them and offers alignment options.
 *
 * @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
     */
    readonly align?: MainAlign;
    /**
     * The vertical alignment of the items in the row.
     * @default stretch
     */
    readonly alignVertical?: CrossAlign;
    /**
     * The HTML element to use.
     * @default div
     */
    readonly as?: RowTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    readonly gap?: RowGap;
    /**
     * Whether items of the row can wrap onto multiple lines.
     * @default false
     */
    readonly wrap?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;

type SearchFieldProps = {
    /** Whether the Input and Button are unavailable. Neither of them can override this. */
    readonly disabled?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLFormElement>>>;
/**
 * Combines a text input and a submit button for searching page or site content.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-search-field--docs Search Field docs at Amsterdam Design System}
 */
declare const SearchField: react.ForwardRefExoticComponent<{
    /** Whether the Input and Button are unavailable. Neither of them can override this. */
    readonly disabled?: boolean;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLFormElement>>> & react.RefAttributes<HTMLFormElement>> & {
    Button: react.ForwardRefExoticComponent<{
        readonly form?: string | undefined | undefined;
        readonly slot?: string | undefined | undefined;
        readonly style?: react.CSSProperties | undefined;
        readonly title?: string | undefined | undefined;
        readonly dir?: string | undefined | undefined;
        readonly defaultChecked?: boolean | undefined | undefined;
        readonly defaultValue?: string | number | readonly string[] | undefined;
        readonly suppressContentEditableWarning?: boolean | undefined | undefined;
        readonly suppressHydrationWarning?: boolean | undefined | undefined;
        readonly accessKey?: string | undefined | undefined;
        readonly autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
        readonly autoFocus?: boolean | undefined | undefined;
        readonly className?: string | undefined | undefined;
        readonly contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
        readonly contextMenu?: string | undefined | undefined;
        readonly draggable?: (boolean | "true" | "false") | undefined;
        readonly enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
        readonly hidden?: boolean | undefined | undefined;
        readonly id?: string | undefined | undefined;
        readonly lang?: string | undefined | undefined;
        readonly nonce?: string | undefined | undefined;
        readonly spellCheck?: (boolean | "true" | "false") | undefined;
        readonly tabIndex?: number | undefined | undefined;
        readonly translate?: "yes" | "no" | undefined | undefined;
        readonly radioGroup?: string | undefined | undefined;
        readonly role?: react.AriaRole | undefined;
        readonly about?: string | undefined | undefined;
        readonly content?: string | undefined | undefined;
        readonly datatype?: string | undefined | undefined;
        readonly inlist?: any;
        readonly prefix?: string | undefined | undefined;
        readonly property?: string | undefined | undefined;
        readonly rel?: string | undefined | undefined;
        readonly resource?: string | undefined | undefined;
        readonly rev?: string | undefined | undefined;
        readonly typeof?: string | undefined | undefined;
        readonly vocab?: string | undefined | undefined;
        readonly autoCorrect?: string | undefined | undefined;
        readonly autoSave?: string | undefined | undefined;
        readonly color?: string | undefined | undefined;
        readonly itemProp?: string | undefined | undefined;
        readonly itemScope?: boolean | undefined | undefined;
        readonly itemType?: string | undefined | undefined;
        readonly itemID?: string | undefined | undefined;
        readonly itemRef?: string | undefined | undefined;
        readonly results?: number | undefined | undefined;
        readonly security?: string | undefined | undefined;
        readonly unselectable?: "on" | "off" | undefined | undefined;
        readonly inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
        readonly is?: string | undefined | undefined;
        readonly exportparts?: string | undefined | undefined;
        readonly part?: string | undefined | undefined;
        readonly "aria-activedescendant"?: string | undefined | undefined;
        readonly "aria-atomic"?: (boolean | "true" | "false") | undefined;
        readonly "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
        readonly "aria-braillelabel"?: string | undefined | undefined;
        readonly "aria-brailleroledescription"?: string | undefined | undefined;
        readonly "aria-busy"?: (boolean | "true" | "false") | undefined;
        readonly "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
        readonly "aria-colcount"?: number | undefined | undefined;
        readonly "aria-colindex"?: number | undefined | undefined;
        readonly "aria-colindextext"?: string | undefined | undefined;
        readonly "aria-colspan"?: number | undefined | undefined;
        readonly "aria-controls"?: string | undefined | undefined;
        readonly "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
        readonly "aria-describedby"?: string | undefined | undefined;
        readonly "aria-description"?: string | undefined | undefined;
        readonly "aria-details"?: string | undefined | undefined;
        readonly "aria-disabled"?: (boolean | "true" | "false") | undefined;
        readonly "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
        readonly "aria-errormessage"?: string | undefined | undefined;
        readonly "aria-expanded"?: (boolean | "true" | "false") | undefined;
        readonly "aria-flowto"?: string | undefined | undefined;
        readonly "aria-grabbed"?: (boolean | "true" | "false") | undefined;
        readonly "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
        readonly "aria-hidden"?: (boolean | "true" | "false") | undefined;
        readonly "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
        readonly "aria-keyshortcuts"?: string | undefined | undefined;
        readonly "aria-label"?: string | undefined | undefined;
        readonly "aria-labelledby"?: string | undefined | undefined;
        readonly "aria-level"?: number | undefined | undefined;
        readonly "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
        readonly "aria-modal"?: (boolean | "true" | "false") | undefined;
        readonly "aria-multiline"?: (boolean | "true" | "false") | undefined;
        readonly "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
        readonly "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
        readonly "aria-owns"?: string | undefined | undefined;
        readonly "aria-placeholder"?: string | undefined | undefined;
        readonly "aria-posinset"?: number | undefined | undefined;
        readonly "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
        readonly "aria-readonly"?: (boolean | "true" | "false") | undefined;
        readonly "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
        readonly "aria-required"?: (boolean | "true" | "false") | undefined;
        readonly "aria-roledescription"?: string | undefined | undefined;
        readonly "aria-rowcount"?: number | undefined | undefined;
        readonly "aria-rowindex"?: number | undefined | undefined;
        readonly "aria-rowindextext"?: string | undefined | undefined;
        readonly "aria-rowspan"?: number | undefined | undefined;
        readonly "aria-selected"?: (boolean | "true" | "false") | undefined;
        readonly "aria-setsize"?: number | undefined | undefined;
        readonly "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
        readonly "aria-valuemax"?: number | undefined | undefined;
        readonly "aria-valuemin"?: number | undefined | undefined;
        readonly "aria-valuenow"?: number | undefined | undefined;
        readonly "aria-valuetext"?: string | undefined | undefined;
        readonly children?: react.ReactNode;
        readonly dangerouslySetInnerHTML?: {
            __html: string | TrustedHTML;
        } | undefined | undefined;
        readonly onCopy?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onCopyCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onCut?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onCutCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onPaste?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onPasteCapture?: react.ClipboardEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionEnd?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionEndCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionStart?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionStartCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionUpdate?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLButtonElement> | undefined;
        readonly onFocus?: react.FocusEventHandler<HTMLButtonElement> | undefined;
        readonly onFocusCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
        readonly onBlur?: react.FocusEventHandler<HTMLButtonElement> | undefined;
        readonly onBlurCapture?: react.FocusEventHandler<HTMLButtonElement> | undefined;
        readonly onChange?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onChangeCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onBeforeInput?: react.InputEventHandler<HTMLButtonElement> | undefined;
        readonly onBeforeInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onInput?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onInputCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onReset?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onResetCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onSubmit?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onSubmitCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onInvalid?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onInvalidCapture?: react.FormEventHandler<HTMLButtonElement> | undefined;
        readonly onLoad?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onError?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onErrorCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyDown?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyDownCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyPress?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyPressCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyUp?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onKeyUpCapture?: react.KeyboardEventHandler<HTMLButtonElement> | undefined;
        readonly onAbort?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onAbortCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onCanPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onCanPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onCanPlayThrough?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onCanPlayThroughCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onDurationChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onDurationChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEmptied?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEmptiedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEncrypted?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEncryptedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEnded?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onEndedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadedData?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadedDataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadedMetadata?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadedMetadataCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadStart?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onLoadStartCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPause?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPauseCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPlay?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPlayCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPlaying?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onPlayingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onProgress?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onProgressCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onRateChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onRateChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSeeked?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSeekedCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSeeking?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSeekingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onStalled?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onStalledCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSuspend?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSuspendCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onTimeUpdate?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onTimeUpdateCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onVolumeChange?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onVolumeChangeCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onWaiting?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onWaitingCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onAuxClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onAuxClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onContextMenu?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onContextMenuCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onDoubleClick?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onDoubleClickCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onDrag?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragEnd?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragEndCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragEnter?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragEnterCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragExit?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragExitCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragLeave?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragLeaveCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragOver?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragOverCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragStart?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDragStartCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDrop?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onDropCapture?: react.DragEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseDown?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseDownCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseEnter?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseLeave?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseMove?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseMoveCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseOut?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseOutCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseOver?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseOverCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseUp?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onMouseUpCapture?: react.MouseEventHandler<HTMLButtonElement> | undefined;
        readonly onSelect?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onSelectCapture?: react.ReactEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchCancel?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchCancelCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchEnd?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchEndCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchMove?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchMoveCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchStart?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onTouchStartCapture?: react.TouchEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerDown?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerDownCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerMove?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerMoveCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerUp?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerUpCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerCancel?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerCancelCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerEnter?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerLeave?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerOver?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerOverCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerOut?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onPointerOutCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onGotPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onLostPointerCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLButtonElement> | undefined;
        readonly onScroll?: react.UIEventHandler<HTMLButtonElement> | undefined;
        readonly onScrollCapture?: react.UIEventHandler<HTMLButtonElement> | undefined;
        readonly onWheel?: react.WheelEventHandler<HTMLButtonElement> | undefined;
        readonly onWheelCapture?: react.WheelEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationStart?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationStartCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationEnd?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationEndCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationIteration?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onAnimationIterationCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
        readonly onTransitionEnd?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
        readonly onTransitionEndCapture?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
        readonly value?: string | number | readonly string[] | undefined;
        readonly type?: "submit" | "reset" | "button" | undefined | undefined;
        readonly disabled?: boolean | undefined | undefined;
        readonly formAction?: string | undefined;
        readonly formEncType?: string | undefined | undefined;
        readonly formMethod?: string | undefined | undefined;
        readonly formNoValidate?: boolean | undefined | undefined;
        readonly formTarget?: string | undefined | undefined;
        readonly name?: string | undefined | undefined;
    } & react.RefAttributes<HTMLButtonElement>>;
    Input: react.ForwardRefExoticComponent<{
        readonly invalid?: boolean;
        readonly label?: string;
    } & Readonly<react.InputHTMLAttributes<HTMLInputElement>> & react.RefAttributes<HTMLInputElement>>;
};

type SelectProps = {
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>>;
/**
 * A form control that allows users to select one or more options from a list.
 *
 * @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. */
    readonly invalid?: boolean;
} & Readonly<PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid">>> & react.RefAttributes<HTMLSelectElement>> & {
    Group: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<react.OptgroupHTMLAttributes<HTMLOptGroupElement>>> & react.RefAttributes<HTMLOptGroupElement>>;
    Option: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<react.OptionHTMLAttributes<HTMLOptionElement>>> & react.RefAttributes<HTMLOptionElement>>;
};

type SelectOptionProps = Readonly<PropsWithChildren<OptionHTMLAttributes<HTMLOptionElement>>>;

type SelectOptionGroupProps = Readonly<PropsWithChildren<OptgroupHTMLAttributes<HTMLOptGroupElement>>>;

type SkeletonProps = Readonly<PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>, 'aria-hidden'>>>;
/**
 * Grey shapes that stand in for content while it loads.
 * Compose its parts to mirror the content to come, so the layout barely shifts once it arrives.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-skeleton--docs Skeleton docs at Amsterdam Design System}
 */
declare const Skeleton: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>, "aria-hidden">>> & react.RefAttributes<HTMLDivElement>> & {
    Heading: react.ForwardRefExoticComponent<{
        readonly lines?: number;
    } & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
    Image: react.ForwardRefExoticComponent<Readonly<AspectRatioProps> & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
    List: react.ForwardRefExoticComponent<{
        readonly lines?: number;
    } & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
    Paragraph: react.ForwardRefExoticComponent<{
        readonly lines?: number;
    } & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
    Table: react.ForwardRefExoticComponent<{
        readonly columns?: number;
        readonly rows?: number;
    } & Readonly<HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
};

type SkeletonHeadingProps = {
    /**
     * The number of lines the heading spans.
     * @default 1
     */
    readonly lines?: number;
} & Readonly<HTMLAttributes<HTMLDivElement>>;

type SkeletonImageProps = Readonly<AspectRatioProps> & Readonly<HTMLAttributes<HTMLDivElement>>;

type SkeletonListProps = {
    /**
     * The number of list items.
     * @default 3
     */
    readonly lines?: number;
} & Readonly<HTMLAttributes<HTMLDivElement>>;

type SkeletonParagraphProps = {
    /**
     * The number of lines the paragraph spans.
     * @default 3
     */
    readonly lines?: number;
} & Readonly<HTMLAttributes<HTMLDivElement>>;

type SkeletonTableProps = {
    /**
     * The number of columns.
     * @default 3
     */
    readonly columns?: number;
    /**
     * The number of rows.
     * @default 3
     */
    readonly rows?: number;
} & Readonly<HTMLAttributes<HTMLDivElement>>;

type SkipLinkProps = {
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
/**
 * Allows skipping past recurring navigation blocks at the top of a page.
 *
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-skip-link--docs Skip Link docs at Amsterdam Design System}
 */
declare const SkipLink: react.ForwardRefExoticComponent<{
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & 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.
     * @default div
     */
    readonly as?: SpotlightTag;
    /** The background colour. */
    readonly color?: SpotlightColor;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * Emphasizes a section on a page through a distinctive background colour.
 *
 * @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.
     * @default div
     */
    readonly as?: SpotlightTag;
    /** The background colour. */
    readonly color?: SpotlightColor;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>>;

type StandaloneLinkProps = {
    /** Changes the text colour for readability on a light or dark background. */
    readonly color?: 'contrast' | 'inverse';
    /**
     * The icon to show before the link text.
     * @default ChevronForwardIcon
     */
    readonly icon?: IconProps['svg'];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>>;
/**
 * A navigation element that is separated from the text around it.
 *
 * @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. */
    readonly color?: "contrast" | "inverse";
    /**
     * The icon to show before the link text.
     * @default ChevronForwardIcon
     */
    readonly icon?: IconProps["svg"];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder">> & react.RefAttributes<HTMLAnchorElement>>;

type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
/**
 * Toggles a binary setting immediately, without requiring form submission.
 *
 * @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>>;
/**
 * Presents related values in rows and columns.
 *
 * @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<{
        readonly align?: "center" | "end";
    } & Readonly<PropsWithChildren<Omit<react.TdHTMLAttributes<HTMLTableCellElement>, "align">>> & 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<{
        readonly align?: "center" | "end";
    } & Readonly<PropsWithChildren<Omit<react.ThHTMLAttributes<HTMLTableCellElement>, "align">>> & react.RefAttributes<HTMLTableCellElement>>;
    Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLTableRowElement>>;
};

type TableBodyProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;

type TableCaptionProps = PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>>;

declare const tableCellAlignOptions: readonly ["center", "end"];
type TableCellAlign = (typeof tableCellAlignOptions)[number];
type TableCellProps = {
    /** The horizontal alignment of the cell’s content. */
    readonly align?: TableCellAlign;
} & Readonly<PropsWithChildren<Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>>>;

type TableFooterProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;

type TableHeaderProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;

type TableHeaderCellAlign = (typeof tableCellAlignOptions)[number];
type TableHeaderCellProps = {
    /** The horizontal alignment of the cell’s content. */
    readonly align?: TableHeaderCellAlign;
} & Readonly<PropsWithChildren<Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'>>>;

type TableRowProps = PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>;

type TableOfContentsProps = {
    /**
     * Whether list items that contain a nested list can be expanded and collapsed.
     * @default false
     */
    readonly collapsible?: boolean;
    /** The text for the Heading. */
    readonly heading?: string;
    /**
     * The hierarchical level of the Heading within the document.
     * Visually, it always has the size of a level 3 Heading.
     */
    readonly headingLevel?: HeadingProps['level'];
    /**
     * An accessible phrase used in the toggle button label when a section is expanded.
     * @default Verberg submenu van
     */
    readonly hideAccessibleLabel?: string;
    /**
     * An accessible phrase used in the toggle button label when a section is collapsed.
     * @default Toon submenu van
     */
    readonly showAccessibleLabel?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * A navigation list for linking to sections on the current page, or between a set of related pages.
 *
 * @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<{
    /**
     * Whether list items that contain a nested list can be expanded and collapsed.
     * @default false
     */
    readonly collapsible?: boolean;
    /** The text for the Heading. */
    readonly heading?: string;
    /**
     * The hierarchical level of the Heading within the document.
     * Visually, it always has the size of a level 3 Heading.
     */
    readonly headingLevel?: HeadingProps["level"];
    /**
     * An accessible phrase used in the toggle button label when a section is expanded.
     * @default Verberg submenu van
     */
    readonly hideAccessibleLabel?: string;
    /**
     * An accessible phrase used in the toggle button label when a section is collapsed.
     * @default Toon submenu van
     */
    readonly showAccessibleLabel?: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        readonly defaultExpanded?: boolean;
        readonly expanded?: boolean;
        readonly label: string;
        readonly linkComponent?: react.ElementType;
        readonly onToggle?: (expanded: boolean) => void;
    } & Readonly<react.AnchorHTMLAttributes<HTMLAnchorElement>> & react.RefAttributes<HTMLAnchorElement>>;
    List: react.ForwardRefExoticComponent<{
        readonly defaultExpanded?: boolean;
    } & HTMLAttributes<HTMLUListElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLUListElement>>;
};

type TableOfContentsLinkProps = {
    /**
     * Whether the nested list is initially expanded.
     * Ignored when the parent `TableOfContents` is not `collapsible`, when there is no nested list, or when `expanded` is provided.
     * @default false
     */
    readonly defaultExpanded?: boolean;
    /**
     * Whether the nested list is expanded.
     * When provided, the component is controlled and internal state is ignored.
     * Ignored when the parent `TableOfContents` is not `collapsible` or when there is no nested list.
     */
    readonly expanded?: boolean;
    /** The text for the link. */
    readonly label: string;
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
    /**
     * Callback fired when the nested list is expanded or collapsed. Receives the new expanded state.
     * Ignored when the parent `TableOfContents` is not `collapsible` or when there is no nested list.
     */
    readonly onToggle?: (expanded: boolean) => void;
} & Readonly<AnchorHTMLAttributes<HTMLAnchorElement>>;

type TableOfContentsListProps = {
    /**
     * Whether items with nested lists in this list start expanded.
     * When this list is nested inside a Link, this also controls whether that Link starts expanded.
     * Inherits from the parent list when omitted.
     * @default false
     */
    readonly defaultExpanded?: boolean;
} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;

type TabNavigationProps = {
    /** The accessible name for the navigation. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The direction in which the links are laid out. */
    readonly orientation?: 'horizontal' | 'vertical';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>>;
/**
 * A horizontal or vertical list of links, styled as tabs, to navigate between a set of related pages.
 *
 * @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. */
    readonly accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    readonly accessibleNameId?: string;
    /** The direction in which the links are laid out. */
    readonly orientation?: "horizontal" | "vertical";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLElement>>> & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        readonly icon?: IconProps["svg"];
        readonly linkComponent?: react.ElementType;
    } & Readonly<PropsWithChildren<react.AnchorHTMLAttributes<HTMLAnchorElement>>> & 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. */
    readonly icon?: IconProps['svg'];
    /**
     * The React component or intrinsic element to use for the link.
     * Refs are forwarded only to a plain anchor (the default, or `linkComponent="a"`), not to any other `linkComponent`.
     */
    readonly linkComponent?: ElementType;
} & Readonly<PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>>;

type TabNavigationListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;

type TabsProps = {
    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
    readonly activeTab?: string;
    /** A function to run when another Tab is activated. Provides the id of its Panel. */
    readonly onTabChange?: (panelId: string) => void;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;
/**
 * Discloses related pieces of content in a secondary area on the page.
 *
 * @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. */
    readonly activeTab?: string;
    /** A function to run when another Tab is activated. Provides the id of its Panel. */
    readonly onTabChange?: (panelId: string) => void;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>> & {
    Button: react.ForwardRefExoticComponent<{
        readonly 'aria-controls': string;
    } & Readonly<PropsWithChildren<react.ButtonHTMLAttributes<HTMLButtonElement>>> & react.RefAttributes<HTMLButtonElement>>;
    List: react.ForwardRefExoticComponent<Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
    Panel: react.ForwardRefExoticComponent<{
        readonly id: string;
    } & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & react.RefAttributes<HTMLDivElement>>;
};

type TabsButtonProps = {
    /** The identifier of the corresponding tab panel. */
    readonly 'aria-controls': string;
} & Readonly<PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>>;

type TabsListProps = Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;

type TabsPanelProps = {
    /** The identifier of the Tab Panel. */
    readonly id: string;
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>;

type TextAreaProps = {
    /** Whether the value fails a validation rule. */
    readonly 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.
     */
    readonly resize?: 'none' | 'horizontal' | 'vertical';
} & Readonly<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>>;
/**
 * A form field that allows the user to input text over multiple lines.
 *
 * @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. */
    readonly 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.
     */
    readonly resize?: "none" | "horizontal" | "vertical";
} & Readonly<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. */
    readonly invalid?: boolean;
    /** The kind of data that the user should provide. */
    readonly type?: TextInputType;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>>;
/**
 * A form field in which a user can enter text.
 *
 * @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. */
    readonly invalid?: boolean;
    /** The kind of data that the user should provide. */
    readonly type?: TextInputType;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid">> & react.RefAttributes<HTMLInputElement>>;

type TimeInputProps = {
    /** Whether the value fails a validation rule. */
    readonly invalid?: boolean;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
/**
 * Helps users enter time.
 *
 * @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. */
    readonly invalid?: boolean;
} & Readonly<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type">> & react.RefAttributes<HTMLInputElement>>;

type UnorderedListProps = {
    /** Changes the text colour for readability on a dark background. */
    readonly color?: 'inverse';
    /** Whether the list items show a marker. */
    readonly markers?: boolean;
    /** The size of the text. */
    readonly size?: 'small';
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLUListElement>>>;
/**
 * Groups related items where the order does not matter.
 *
 * @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. */
    readonly color?: "inverse";
    /** Whether the list items show a marker. */
    readonly markers?: boolean;
    /** The size of the text. */
    readonly size?: "small";
} & Readonly<PropsWithChildren<HTMLAttributes<HTMLUListElement>>> & 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, Calendar, CallToActionLink, Card, CharacterCount, Checkbox, Column, DateInput, DatePicker, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, Menu, Metadata, ModalDialog, OrderedList, Overlap, Page, PageFooter, PageHeader, Pagination, Paragraph, PasswordInput, ProgressList, Radio, Row, SearchField, Select, Skeleton, SkipLink, Spotlight, StandaloneLink, Switch, TabNavigation, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, UnorderedList, formatCharacterCountTextAr, formatCharacterCountTextDe, formatCharacterCountTextEn, formatCharacterCountTextFr, formatCharacterCountTextNl, formatCharacterCountTextTr, generateAspectRatioClass };
export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CalendarProps, CallToActionLinkProps, CardContentProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DatePickerProps, DateRange, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListSectionProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureCaptionProps, FigureProps, FileInputProps, FileListItemProps, FileListProps, FormatCharacterCountText, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, GridRowNumber, GridRowNumbers, GridSubgridProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderImageProps, ImageSliderProps, InvalidFormAlertProps, LabelProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoBrandConfig, LogoProps, MarkProps, MenuLinkProps, MenuProps, MetadataProps, MetadataSeparatorProps, ModalDialogBodyProps, ModalDialogFooterProps, ModalDialogHeaderProps, ModalDialogProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, ProgressListProps, ProgressListStepProps, ProgressListSubstepProps, ProgressListSubstepsProps, RadioProps, RowProps, SearchFieldProps, SelectOptionGroupProps, SelectOptionProps, SelectProps, SkeletonHeadingProps, SkeletonImageProps, SkeletonListProps, SkeletonParagraphProps, SkeletonProps, SkeletonTableProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TabNavigationLinkProps, TabNavigationListProps, TabNavigationProps, TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TableRowProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };