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

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

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

type HeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
    /** The hierarchical level within the document. */
    level: 1 | 2 | 3 | 4;
    /**
     * Uses larger or smaller text without changing its position in the heading hierarchy.
     * The value ‘level-6’ is deprecated. Use level 5 instead.
     */
    size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
 */
declare const Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
    /** The hierarchical level within the document. */
    level: 1 | 2 | 3 | 4;
    /**
     * Uses larger or smaller text without changing its position in the heading hierarchy.
     * The value ‘level-6’ is deprecated. Use level 5 instead.
     */
    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
} & react.RefAttributes<HTMLHeadingElement>>;

type AccordionProps = {
    /**
     * The hierarchical level of this Accordion’s Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     * The value ‘1’ is deprecated.
     */
    headingLevel: HeadingProps['level'];
    /** The HTML element to use for each Accordion Section. */
    sectionAs?: 'div' | 'section';
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
 */
declare const Accordion: react.ForwardRefExoticComponent<{
    /**
     * The hierarchical level of this Accordion’s Section Headings within the document.
     * There is no default value; determine the correct level for each instance.
     * The value ‘1’ is deprecated.
     */
    headingLevel: HeadingProps["level"];
    /** The HTML element to use for each Accordion Section. */
    sectionAs?: "div" | "section";
} & HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>> & {
    Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & {
        expanded?: boolean;
        label: string;
    } & react.RefAttributes<HTMLDivElement>>;
};

type AccordionSectionProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    /** Whether the content is displayed initially. */
    expanded?: boolean;
    /** The heading text. */
    label: string;
};

type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs Action Group docs at Amsterdam Design System}
 */
declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

type Severity = 'error' | 'success' | 'warning';
type AlertProps = {
    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
    closeable?: boolean;
    /** The label for the button that dismisses the Alert. */
    closeButtonLabel?: string;
    /** The text for the Heading. */
    heading: string;
    /**
     * The id of the Heading element, which is used to label the Alert.
     * Can be set to `null` to explicitly remove the label.
     * Note: must be unique for the page.
     */
    headingId?: string | null;
    /**
     * The hierarchical level of the Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * The size of the heading is fixed at level 3.
     */
    headingLevel: HeadingProps['level'];
    /** A function to run when dismissing. */
    onClose?: () => void;
    /** The significance of the message conveyed. */
    severity?: Severity;
} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-alert--docs Alert docs at Amsterdam Design System}
 */
declare const Alert: react.ForwardRefExoticComponent<{
    /** Whether the user can dismiss the Alert. Adds a button to its top right. */
    closeable?: boolean;
    /** The label for the button that dismisses the Alert. */
    closeButtonLabel?: string;
    /** The text for the Heading. */
    heading: string;
    /**
     * The id of the Heading element, which is used to label the Alert.
     * Can be set to `null` to explicitly remove the label.
     * Note: must be unique for the page.
     */
    headingId?: string | null;
    /**
     * The hierarchical level of the Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * The size of the heading is fixed at level 3.
     */
    headingLevel: HeadingProps["level"];
    /** A function to run when dismissing. */
    onClose?: () => void;
    /** The significance of the message conveyed. */
    severity?: Severity;
} & HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

declare const avatarColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
type AvatarColor = (typeof avatarColors)[number];
type AvatarProps = {
    /** The background colour. */
    color?: AvatarColor;
    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
    imageSrc?: string;
    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
    label: string;
} & HTMLAttributes<HTMLSpanElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-avatar--docs Avatar docs at Amsterdam Design System}
 */
declare const Avatar: react.ForwardRefExoticComponent<{
    /** The background colour. */
    color?: AvatarColor;
    /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
    imageSrc?: string;
    /** The text content. Should be the user’s initials. The first two characters will be displayed. */
    label: string;
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;

declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
type BadgeColor = (typeof badgeColors)[number];
type BadgeProps = HTMLAttributes<HTMLElement> & {
    /** The background colour. */
    color?: BadgeColor;
    /** The text content. */
    label: string | number;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-feedback-badge--docs Badge docs at Amsterdam Design System}
 */
declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    /** The background colour. */
    color?: BadgeColor;
    /** The text content. */
    label: string | number;
} & react.RefAttributes<HTMLElement>>;

type BlockquoteProps = PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>> & {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-blockquote--docs Blockquote docs at Amsterdam Design System}
 */
declare const Blockquote: react.ForwardRefExoticComponent<BlockquoteHTMLAttributes<HTMLQuoteElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
} & react.RefAttributes<HTMLQuoteElement>>;

type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;

type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-breadcrumb--docs Breadcrumb docs at Amsterdam Design System}
 */
declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
};

declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
type GridCellTag = (typeof gridCellTags)[number];
type GridCellSpanAllProp = {
    /** Lets the cell span the full width of all grid variants. */
    span: 'all';
    start?: never;
};
type GridCellSpanAndStartProps = {
    /** The amount of grid columns the cell spans. */
    span?: GridColumnNumber | GridColumnNumbers;
    /** The index of the grid column the cell starts at. */
    start?: GridColumnNumber | GridColumnNumbers;
};
type GridCellProps = (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    /** The HTML tag to use. */
    as?: GridCellTag;
};

type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
type GridColumnNumbers = {
    narrow: 1 | 2 | 3 | 4;
    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
    wide: GridColumnNumber;
};
declare const gridGaps: readonly ["none", "large", "2x-large"];
type GridGap = (typeof gridGaps)[number];
declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
type GridPadding = (typeof gridPaddings)[number];
declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
type GridTag = (typeof gridTags)[number];
type GridPaddingVerticalProp = {
    paddingBottom?: never;
    paddingTop?: never;
    /** The amount of space above and below. */
    paddingVertical?: GridPadding;
};
type GridPaddingTopAndBottomProps = {
    /** The amount of space below. */
    paddingBottom?: GridPadding;
    /** The amount of space above. */
    paddingTop?: GridPadding;
    paddingVertical?: never;
};
type GridProps = (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
    /** The HTML tag to use. */
    as?: GridTag;
    /** The amount of space between rows. */
    gapVertical?: GridGap;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
 */
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<any>> & {
    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
};

declare const breakoutCellTags: readonly ["article", "div", "section"];
type BreakoutCellTag = (typeof breakoutCellTags)[number];
type BreakoutCellSpanAllProp = {
    /** Lets the cell span the full width of all grid variants. */
    colSpan: 'all';
    colStart?: never;
    /** The content of this cell.
     * The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins.
     * The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text. */
    has?: 'spotlight';
};
type BreakoutCellSpanAndStartProps = {
    /** The amount of grid columns the cell spans. */
    colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
    /** The index of the grid column the cell starts at. */
    colStart?: GridColumnNumber | GridColumnNumbers;
    has?: 'figure';
};
type BreakoutCellRowSpanAndStartProps = {
    /** The amount of grid rows the cell spans. */
    rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
    /** The index of the grid row the cell starts at. */
    rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
};
type BreakoutCellProps = BreakoutCellRowSpanAndStartProps & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    /** The HTML element to use. */
    as?: BreakoutCellTag;
};

type BreakoutRowNumber = 1 | 2 | 3 | 4;
type BreakoutRowNumbers = {
    narrow: BreakoutRowNumber;
    medium: BreakoutRowNumber;
    wide: BreakoutRowNumber;
};
type BreakoutProps = GridProps;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-breakout--docs Breakout docs at Amsterdam Design System}
 */
declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
    Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
};

declare const iconSizes: readonly ["small", "large", "heading-0", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6"];
type IconSize = (typeof iconSizes)[number];
type IconProps = {
    /** Changes the icon colour for readability on a dark background. */
    color?: 'inverse';
    /**
     * The size of the icon. Choose the size of the corresponding body text or heading.
     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
     */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: Function | ReactNode;
} & HTMLAttributes<HTMLSpanElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
 * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
 */
declare const Icon: react.ForwardRefExoticComponent<{
    /** Changes the icon colour for readability on a dark background. */
    color?: "inverse";
    /**
     * The size of the icon. Choose the size of the corresponding body text or heading.
     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
     */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: Function | ReactNode;
} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;

type IconBeforeProp = {
    /** Shows the icon before the label. Requires a value for `icon`. Cannot be used together with `iconOnly`. */
    iconBefore?: boolean;
    iconOnly?: never;
};
type IconOnlyProp = {
    iconBefore?: never;
    /** Shows the icon without the label. Requires a value for `icon`. Cannot be used together with `iconBefore`. */
    iconOnly?: boolean;
};
type IconButtonProps$1 = (IconBeforeProp | IconOnlyProp) & {
    /** Adds an icon to the button, showing it after the label. */
    icon: IconProps['svg'];
};
type TextButtonProps = {
    icon?: never;
    iconBefore?: never;
    iconOnly?: never;
};
type ButtonProps = (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> & {
    /** The level of prominence. Use a primary button only once per page or section. */
    variant?: 'primary' | 'secondary' | 'tertiary';
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
 */
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;

type CallToActionLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-call-to-action-link--docs CallToActionLink docs at Amsterdam Design System}
 */
declare const CallToActionLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLAnchorElement>>;

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
declare const aspectRatioOptions: readonly ["9:16", "3:4", "1:1", "4:3", "16:9", "16:5"];
type AspectRatioProps = {
    /** The aspect ratio to display media content in. */
    aspectRatio?: (typeof aspectRatioOptions)[number];
};
declare const crossAlignOptions: readonly ["start", "center", "baseline", "end"];
type CrossAlign = (typeof crossAlignOptions)[number];
declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
type MainAlign = (typeof mainAlignOptions)[number];

type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
 */
declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
        children?: react.ReactNode | undefined;
    } & {
        color?: "inverse";
        level: 1 | 2 | 3 | 4;
        size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
    } & react.RefAttributes<HTMLHeadingElement>>;
    HeadingGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & {
        tagline: string;
    } & react.RefAttributes<HTMLElement>>;
    Image: react.ForwardRefExoticComponent<AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & {
        alt: string;
    } & react.RefAttributes<HTMLImageElement>>;
    Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type CardHeadingGroupProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    /** A short phrase of text, e.g. to categorise the card. Displayed above the card heading. */
    tagline: string;
};

type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type CharacterCountProps = {
    /** The current length of the field’s value. */
    length: number;
    /** The maximum length of the field’s value. */
    maxLength: number;
} & HTMLAttributes<HTMLDivElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
 */
declare const CharacterCount: react.ForwardRefExoticComponent<{
    /** The current length of the field’s value. */
    length: number;
    /** The maximum length of the field’s value. */
    maxLength: number;
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;

type CheckboxProps = PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>> & {
    /**
     * An icon to display instead of the default icon.
     * @default CheckboxIcon
     */
    icon?: Function | ReactNode;
    /** Allows being neither checked nor unchecked. */
    indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
 */
declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
    children?: ReactNode | undefined;
} & {
    /**
     * An icon to display instead of the default icon.
     * @default CheckboxIcon
     */
    icon?: Function | ReactNode;
    /** Allows being neither checked nor unchecked. */
    indeterminate?: boolean;
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
} & react.RefAttributes<HTMLInputElement>>;

declare const columnTags: readonly ["article", "div", "section"];
type ColumnTag = (typeof columnTags)[number];
declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
type ColumnGap = (typeof columnGapSizes)[number];
type ColumnProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    /**
     * The vertical alignment of the items in the column.
     * @default start
     */
    align?: MainAlign;
    /**
     * The horizontal alignment of the items in the column.
     * @default stretch
     */
    alignHorizontal?: CrossAlignForColumn;
    /**
     * The HTML element to use.
     * @default div
     */
    as?: ColumnTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    gap?: ColumnGap;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-column--docs Column docs at Amsterdam Design System}
 */
declare const Column: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & {
    /**
     * The vertical alignment of the items in the column.
     * @default start
     */
    align?: MainAlign;
    /**
     * The horizontal alignment of the items in the column.
     * @default stretch
     */
    alignHorizontal?: CrossAlignForColumn;
    /**
     * The HTML element to use.
     * @default div
     */
    as?: ColumnTag;
    /**
     * The amount of space between items.
     * @default medium
     */
    gap?: ColumnGap;
} & react.RefAttributes<unknown>>;

declare const dateInputTypes: readonly ["date", "datetime-local"];
type DateInputType = (typeof dateInputTypes)[number];
type DateInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'> & {
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
    /** The kind of data that the user should provide. */
    type?: DateInputType;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-date-input--docs Date Input docs at Amsterdam Design System}
 */
declare const DateInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
    /** Whether the value fails a validation rule. */
    invalid?: boolean;
    /** The kind of data that the user should provide. */
    type?: DateInputType;
} & react.RefAttributes<HTMLInputElement>>;

declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
    termsWidth?: DescriptionListTermsWidth;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-description-list--docs Description List docs at Amsterdam Design System}
 */
declare const DescriptionList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
    termsWidth?: DescriptionListTermsWidth;
} & react.RefAttributes<HTMLDListElement>> & {
    Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLElement>>;
    Section: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLDivElement>>;
    Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLElement>>;
};

type DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;

type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;

type DialogProps = PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>> & {
    /** The label for the button that dismisses the Dialog. */
    closeButtonLabel?: string;
    /** Content for the footer, often one Button or an Action Group containing more of them. */
    footer?: ReactNode;
    /** The text for the Heading. */
    heading: string;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-dialog--docs Dialog docs at Amsterdam Design System}
 */
declare const Dialog: react.ForwardRefExoticComponent<DialogHTMLAttributes<HTMLDialogElement> & {
    children?: ReactNode | undefined;
} & {
    /** The label for the button that dismisses the Dialog. */
    closeButtonLabel?: string;
    /** Content for the footer, often one Button or an Action Group containing more of them. */
    footer?: ReactNode;
    /** The text for the Heading. */
    heading: string;
} & react.RefAttributes<HTMLDialogElement>> & {
    close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
    open: (id: string) => void;
};

type ErrorMessageProps = {
    /**
     * An icon to display instead of the default icon.
     * @default WarningIcon
     */
    icon?: IconProps['svg'];
    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
    prefix?: string;
} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-error-message--docs Error Message docs at Amsterdam Design System}
 */
declare const ErrorMessage: react.ForwardRefExoticComponent<{
    /**
     * An icon to display instead of the default icon.
     * @default WarningIcon
     */
    icon?: IconProps["svg"];
    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
    prefix?: string;
} & HTMLAttributes<HTMLParagraphElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLParagraphElement>>;

type FieldProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
    /** Whether the field has an input with a validation error */
    invalid?: boolean;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field--docs Field docs at Amsterdam Design System}
 */
declare const Field: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Whether the field has an input with a validation error */
    invalid?: boolean;
} & react.RefAttributes<HTMLDivElement>>;

type HintAndOptionalProps = {
    /** Show a custom hint text. */
    hint?: string;
    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
    optional?: boolean;
};
type HintProps = HintAndOptionalProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
declare const Hint: react.ForwardRefExoticComponent<HintAndOptionalProps & HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>>;

type FieldSetProps = HintProps & PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
    /** Whether the field set has an input with a validation error */
    invalid?: boolean;
    /** The text for the caption. */
    legend: string;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-field-set--docs Field Set docs at Amsterdam Design System}
 */
declare const FieldSet: react.ForwardRefExoticComponent<{
    hint?: string;
    optional?: boolean;
} & HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & HTMLAttributes<HTMLFieldSetElement> & {
    /** Whether the field set has an input with a validation error */
    invalid?: boolean;
    /** The text for the caption. */
    legend: string;
} & react.RefAttributes<HTMLFieldSetElement>>;

type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-figure--docs Figure docs at Amsterdam Design System}
 */
declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Caption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
        children?: react.ReactNode | undefined;
    } & {
        color?: "inverse";
    } & react.RefAttributes<HTMLElement>>;
};

type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-input--docs File Input docs at Amsterdam Design System}
 */
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;

type FileListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-list--docs File List docs at Amsterdam Design System}
 */
declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLOListElement>> & {
    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
        file: File;
        onDelete?: () => void;
    } & react.RefAttributes<HTMLLIElement>>;
};

type IconButtonProps = {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
    label: string;
    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
    size?: IconProps['size'];
    /** The component rendering the icon’s markup. */
    svg?: IconProps['svg'];
} & ButtonHTMLAttributes<HTMLButtonElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-icon-button--docs Icon Button docs at Amsterdam Design System}
 */
declare const IconButton: react.ForwardRefExoticComponent<{
    /** Changes the text colour for readability on a light or dark background. */
    color?: "contrast" | "inverse";
    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
    label: string;
    /** The size of the icon. Match it to the text that the Icon Buttons aligns with. */
    size?: IconProps["size"];
    /** The component rendering the icon’s markup. */
    svg?: IconProps["svg"];
} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;

type ImageProps = AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
    /** A textual description of the content of the image. */
    alt: string;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image--docs Image docs at Amsterdam Design System}
 */
declare const Image: react.ForwardRefExoticComponent<AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & {
    /** A textual description of the content of the image. */
    alt: string;
} & react.RefAttributes<HTMLImageElement>>;

type ImageSliderImageProps = ImageProps;
type ImageSliderProps = {
    /** Display buttons to navigate to the previous or next image. */
    controls?: boolean;
    /** Label for the image if you need to translate the alt text. */
    imageLabel?: string;
    /** The set of images to display. */
    images: ImageSliderImageProps[];
    /** The label for the ‘next’ button */
    nextLabel?: string;
    /** The label for the ‘previous’ button */
    previousLabel?: string;
} & HTMLAttributes<HTMLDivElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs Image Slider docs at Amsterdam Design System}
 */
declare const ImageSlider: react.ForwardRefExoticComponent<{
    /** Display buttons to navigate to the previous or next image. */
    controls?: boolean;
    /** Label for the image if you need to translate the alt text. */
    imageLabel?: string;
    /** The set of images to display. */
    images: ImageSliderImageProps[];
    /** The label for the ‘next’ button */
    nextLabel?: string;
    /** The label for the ‘previous’ button */
    previousLabel?: string;
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
    Item: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
        children?: react.ReactNode | undefined;
    } & {
        slideId: number;
    } & react.RefAttributes<HTMLDivElement>>;
};

type ImageSliderItemProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>> & {
    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
    slideId: number;
};

type ErrorLink = {
    id: string;
    label: string;
};
type InvalidFormAlertProps = {
    /**
     * The text following the error count.
     * This is used to show the error count in the document title.
     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
     */
    errorCountLabel?: {
        plural: string;
        singular: string;
    };
    /** The list of error messages to display. */
    errors: ErrorLink[];
    /**
     * Whether the component receives focus on first render
     * @default true
     */
    focusOnRender?: boolean;
    /**
     * The text for the Heading.
     * @default Verbeter de fouten voor u verder gaat
     */
    heading?: string;
    /**
     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * The size of the heading is fixed at level 3.
     */
    headingLevel: HeadingProps['level'];
} & HTMLAttributes<HTMLDivElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-invalid-form-alert--docs Invalid Form Alert docs at Amsterdam Design System}
 */
declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
    /**
     * The text following the error count.
     * This is used to show the error count in the document title.
     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
     */
    errorCountLabel?: {
        plural: string;
        singular: string;
    };
    /** The list of error messages to display. */
    errors: ErrorLink[];
    /**
     * Whether the component receives focus on first render
     * @default true
     */
    focusOnRender?: boolean;
    /**
     * The text for the Heading.
     * @default Verbeter de fouten voor u verder gaat
     */
    heading?: string;
    /**
     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
     * There is no default value; determine the correct level for each instance.
     * The size of the heading is fixed at level 3.
     */
    headingLevel: HeadingProps["level"];
} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;

/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-label--docs Label docs at Amsterdam Design System}
 */
declare const Label: react.ForwardRefExoticComponent<{
    hint?: string;
    optional?: boolean;
} & react.HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;

type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'> & {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link--docs Link docs at Amsterdam Design System}
 */
declare const Link: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & {
    /** Changes the text colour for readability on a light or dark background. */
    color?: "contrast" | "inverse";
} & react.RefAttributes<HTMLAnchorElement>>;

type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-link-list--docs Link List docs at Amsterdam Design System}
 */
declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLUListElement>> & {
    Link: react.ForwardRefExoticComponent<{
        color?: "contrast" | "inverse";
        icon?: IconProps["svg"];
        size?: "small" | "large";
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

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

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

type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
type LogoProps = SVGProps<SVGSVGElement> & {
    /** The name of the brand for which to display the logo. */
    brand?: LogoBrand;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-logo--docs Logo docs at Amsterdam Design System}
 */
declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;

type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-mark--docs Mark docs at Amsterdam Design System}
 */
declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>>;

type MenuProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {
    accessibleName?: string;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-menu--docs Menu docs at Amsterdam Design System}
 */
declare const Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & {
    accessibleName?: string;
} & react.RefAttributes<HTMLElement>> & {
    Link: react.ForwardRefExoticComponent<{
        color?: "contrast" | "inverse";
        icon: IconProps["svg"];
    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

type MenuLinkProps = {
    /** Changes the text colour for readability on a light or dark background. */
    color?: 'contrast' | 'inverse';
    /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
    icon: IconProps['svg'];
} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type OrderedListProps = PropsWithChildren<OlHTMLAttributes<HTMLOListElement>> & {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
    /** Whether the list items show a marker. */
    markers?: boolean;
    /** The size of the text. */
    size?: 'small';
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
 */
declare const OrderedList: react.ForwardRefExoticComponent<OlHTMLAttributes<HTMLOListElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
    /** Whether the list items show a marker. */
    markers?: boolean;
    /** The size of the text. */
    size?: "small";
} & react.RefAttributes<HTMLOListElement>> & {
    Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLLIElement>>;
};

type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;

type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-overlap--docs Overlap docs at Amsterdam Design System}
 */
declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
 */
declare const Page: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;

type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
 */
declare const PageFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLElement>> & {
    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLUListElement>>;
    MenuLink: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLAnchorElement>>;
    Spotlight: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
        children?: react.ReactNode | undefined;
    } & react.RefAttributes<HTMLDivElement>>;
};

type PageFooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;

type PageFooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;

type PageFooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

type PageHeaderProps = HTMLAttributes<HTMLElement> & {
    /** The name of the application. */
    brandName?: string;
    /** The accessible name of the logo. */
    logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    logoBrand?: LogoBrand;
    /** The url for the link on the logo. */
    logoLink?: string;
    /** The React component to use for the logo link. */
    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The accessible text for the link on the logo. */
    logoLinkTitle?: string;
    /** The text for the menu button. */
    menuButtonText?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    menuItems?: ReactNode;
    /** The accessible label for the navigation section. */
    navigationLabel?: string;
    /** Whether the menu button is visible on wide screens.  */
    noMenuButtonOnWideWindow?: boolean;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
 */
declare const PageHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    /** The name of the application. */
    brandName?: string;
    /** The accessible name of the logo. */
    logoAccessibleName?: string;
    /** The name of the brand for which to display the logo. */
    logoBrand?: LogoBrand;
    /** The url for the link on the logo. */
    logoLink?: string;
    /** The React component to use for the logo link. */
    logoLinkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The accessible text for the link on the logo. */
    logoLinkTitle?: string;
    /** The text for the menu button. */
    menuButtonText?: string;
    /** A slot for the menu items. Use PageHeader.MenuLink here. */
    menuItems?: ReactNode;
    /** The accessible label for the navigation section. */
    navigationLabel?: string;
    /** Whether the menu button is visible on wide screens.  */
    noMenuButtonOnWideWindow?: boolean;
} & react.RefAttributes<HTMLElement>> & {
    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
    MenuLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
        children?: ReactNode | undefined;
    } & {
        fixed?: boolean;
    } & react.RefAttributes<HTMLAnchorElement>>;
};

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

type PageHeadingProps = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>> & {
    /** Changes the text colour for readability on a dark background. */
    color?: 'inverse';
};
/**
 * @deprecated We no longer use this size of headings. Use `Heading` with level 1 instead.
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-page-heading--docs Page Heading docs at Amsterdam Design System}
 */
declare const PageHeading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
    children?: react.ReactNode | undefined;
} & {
    /** Changes the text colour for readability on a dark background. */
    color?: "inverse";
} & react.RefAttributes<HTMLHeadingElement>>;

type PaginationProps = HTMLAttributes<HTMLElement> & {
    /** The accessible name for the Pagination component. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
    /** The React component to use for the links. */
    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The template used to construct the link hrefs. */
    linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    maxVisiblePages?: number;
    /** The accessible name for the link to the next page. */
    nextAccessibleName?: string;
    /** The visible label for the link to the next page. */
    nextLabel?: string;
    /**
     * @deprecated Use `nextAccessibleName` instead.
     * The accessible name for the link to the next page.
     */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The accessible name for the link to the previous page. */
    previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /**
     * @deprecated Use `previousAccessibleName` instead.
     * The accessible name for the link to the previous page.
     */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /**
     * @deprecated Use `accessibleName` instead.
     * The accessible name for the Pagination component.
     */
    visuallyHiddenLabel?: string;
    /**
     * @deprecated Use `accessibleNameId` instead.
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    visuallyHiddenLabelId?: string;
};
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-pagination--docs Pagination docs at Amsterdam Design System}
 */
declare const Pagination: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
    /** The accessible name for the Pagination component. */
    accessibleName?: string;
    /**
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    accessibleNameId?: string;
    /** The React component to use for the links. */
    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
    /** The template used to construct the link hrefs. */
    linkTemplate: (page: number) => string;
    /** The maximum amount of pages shown. Minimum value: 5. */
    maxVisiblePages?: number;
    /** The accessible name for the link to the next page. */
    nextAccessibleName?: string;
    /** The visible label for the link to the next page. */
    nextLabel?: string;
    /**
     * @deprecated Use `nextAccessibleName` instead.
     * The accessible name for the link to the next page.
     */
    nextVisuallyHiddenLabel?: string;
    /** The current page number. */
    page?: number;
    /** The accessible name for the link to the previous page. */
    previousAccessibleName?: string;
    /** The visible label for the link to the previous page. */
    previousLabel?: string;
    /**
     * @deprecated Use `previousAccessibleName` instead.
     * The accessible name for the link to the previous page.
     */
    previousVisuallyHiddenLabel?: string;
    /** The total amount of pages. */
    totalPages: number;
    /**
     * @deprecated Use `accessibleName` instead.
     * The accessible name for the Pagination component.
     */
    visuallyHiddenLabel?: string;
    /**
     * @deprecated Use `accessibleNameId` instead.
     * Connects the component with an internal element that defines its accessible name.
     * Note: must be unique for the page.
     */
    visuall