@amsterdam/design-system-react 0.11.1 → 0.12.0

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -1,5 +1,173 @@
 import * as react from 'react';
-import { PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ReactNode, ButtonHTMLAttributes, TextareaHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, DialogHTMLAttributes, MouseEvent, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, ImgHTMLAttributes, InputHTMLAttributes, AnchorHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ReactNode, ButtonHTMLAttributes, TextareaHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, DialogHTMLAttributes, MouseEvent, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type GridCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    span: 'all';
+    start?: never;
+};
+type GridCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+type GridCellProps = {
+    /** The HTML element to use. */
+    as?: 'article' | 'div' | 'section';
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridColumnNumbers = {
+    narrow: 1 | 2 | 3 | 4;
+    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    wide: GridColumnNumber;
+};
+type GridPaddingSize = 'small' | 'medium' | 'large';
+type GridPaddingVerticalProp = {
+    paddingBottom?: never;
+    paddingTop?: never;
+    /** The amount of space above and below. */
+    paddingVertical?: GridPaddingSize;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of space below. */
+    paddingBottom?: GridPaddingSize;
+    /** The amount of space above. */
+    paddingTop?: GridPaddingSize;
+    paddingVertical?: never;
+};
+type GridProps = {
+    /** The amount of space between rows. */
+    gapVertical?: 'none' | 'small' | 'large';
+} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
+    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
+};
+
+type BreakoutCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    colSpan: 'all';
+    colStart?: never;
+    /** The content of this cell.
+     * The Cell containing the Spotlight expands horizontally and vertically to cover the adjacent gaps and margins.
+     * The Cell containing the Image aligns itself to the bottom of the row, in case it is less tall than the text. */
+    has?: 'spotlight';
+};
+type BreakoutCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    colSpan?: 'all' | GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    colStart?: GridColumnNumber | GridColumnNumbers;
+    has?: 'figure';
+};
+type BreakoutCellRowSpanAndStartProps = {
+    /** The amount of grid rows the cell spans. */
+    rowSpan?: BreakoutRowNumber | BreakoutRowNumbers;
+    /** The index of the grid row the cell starts at. */
+    rowStart?: BreakoutRowNumber | BreakoutRowNumbers;
+};
+type BreakoutCellProps = {
+    /** The HTML element to use. */
+    as?: 'article' | 'div' | 'section';
+} & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+
+type BreakoutRowNumber = 1 | 2 | 3 | 4;
+type BreakoutRowNumbers = {
+    narrow: BreakoutRowNumber;
+    medium: BreakoutRowNumber;
+    wide: BreakoutRowNumber;
+};
+type BreakoutProps = GridProps;
+declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
+    Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<unknown>>;
+};
+
+type HintAndOptionalProps = {
+    /** Show a custom hint text. */
+    hint?: string;
+    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
+    optional?: boolean;
+};
+type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
+declare const Hint: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & HintAndOptionalProps & react.RefAttributes<HTMLElement>>;
+
+type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
+type AspectRatioProps = {
+    /** The dimensions. */
+    ratio?: Ratio;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const AspectRatio: react.ForwardRefExoticComponent<{
+    /** The dimensions. */
+    ratio?: Ratio;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type ImageProps = {
+    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
+    cover?: boolean;
+} & ImgHTMLAttributes<HTMLImageElement>;
+declare const Image: react.ForwardRefExoticComponent<{
+    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
+    cover?: boolean;
+} & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
+
+type ImageSliderImageProps = ImageProps & {
+    /** Specify the aspect ratio to use for the images. */
+    aspectRatio: Ratio;
+};
+type ImageSliderProps = {
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare const ImageSlider: react.ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>> & {
+    Item: react.ForwardRefExoticComponent<{
+        slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLDivElement>>;
+};
+
+type ImageSliderItemProps = {
+    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
+    slideId: number;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+
+type PasswordInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'autoCapitalize' | 'autoCorrect' | 'spellCheck' | 'type'>;
+declare const PasswordInput: react.ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
@@ -28,6 +196,7 @@ type FormErrorListProps = {
     /**
      * 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;
@@ -35,13 +204,20 @@ type FormErrorListProps = {
     };
     /** The list of error messages to display. */
     errors: FormError[];
-    /** Whether the component receives focus on first render */
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
     focusOnRender?: boolean;
-    /** The text for the Heading. */
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
      * Note: this intentionally does not change the font size.
+     * @default 2
      */
     headingLevel?: HeadingProps['level'];
 } & HTMLAttributes<HTMLDivElement>;
@@ -49,6 +225,7 @@ declare const FormErrorList: 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;
@@ -56,13 +233,20 @@ declare const FormErrorList: react.ForwardRefExoticComponent<{
     };
     /** The list of error messages to display. */
     errors: FormError[];
-    /** Whether the component receives focus on first render */
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
     focusOnRender?: boolean;
-    /** The text for the Heading. */
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
     heading?: string;
     /**
      * The hierarchical level of the Heading within the document.
      * Note: this intentionally does not change the font size.
+     * @default 2
      */
     headingLevel?: HeadingProps["level"];
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
@@ -205,13 +389,17 @@ declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTM
     maxLength: number;
 } & react.RefAttributes<HTMLDivElement>>;
 
+declare const descriptionListTermsWidths: readonly ["sm", "md", "lg"];
+type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
 type DescriptionListProps = {
     /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
+    termsWidth?: DescriptionListTermsWidth;
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
 declare const DescriptionList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     inverseColor?: boolean;
+    termsWidth?: DescriptionListTermsWidth;
 } & HTMLAttributes<HTMLDListElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDListElement>> & {
@@ -295,14 +483,18 @@ declare const Row: react.ForwardRefExoticComponent<{
 } & react.RefAttributes<unknown>>;
 
 type RadioProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 declare const Radio: react.ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: react.ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type TabsProps = {
@@ -410,7 +602,7 @@ type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
-};
+} & HintProps;
 declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
     children?: react.ReactNode | undefined;
 } & {
@@ -418,6 +610,9 @@ declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLField
     invalid?: boolean;
     /** The text for the caption. */
     legend: string;
+} & HTMLAttributes<HTMLElement> & {
+    hint?: string;
+    optional?: boolean;
 } & react.RefAttributes<HTMLFieldSetElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
@@ -426,19 +621,21 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
         icon?: Function;
-        onBackground?: "default" | "light" | "dark";
+        contrastColor?: boolean;
+        inverseColor?: boolean;
         size?: "small" | "large";
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type BackgroundName = 'default' | 'light' | 'dark';
 type LinkListLinkProps = {
     /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
     icon?: Function;
-    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-    onBackground?: BackgroundName;
+    /** Changes the text colour for readability on a light background. */
+    contrastColor?: boolean;
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
     /** The size of the text. Use the same size for all items in the list. */
     size?: 'small' | 'large';
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
@@ -496,11 +693,13 @@ declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEl
 
 type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
-type IconButtonProps = {
+type IconButtonProps$1 = {
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
-    onBackground?: 'light' | 'dark';
+    /** Changes the text colour for readability on a light (but not white) background. */
+    contrastColor?: boolean;
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
     /** The size of the icon. Corresponds with the text levels. */
     size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
     /** The component rendering the icon’s markup. */
@@ -509,8 +708,10 @@ type IconButtonProps = {
 declare const IconButton: react.ForwardRefExoticComponent<{
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
-    onBackground?: "light" | "dark";
+    /** Changes the text colour for readability on a light (but not white) background. */
+    contrastColor?: boolean;
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
     /** The size of the icon. Corresponds with the text levels. */
     size?: "level-3" | "level-4" | "level-5" | "level-6";
     /** The component rendering the icon’s markup. */
@@ -602,70 +803,66 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
 };
 
 type DialogProps = {
-    /** The button(s) in the footer. Start with a primary button. */
-    actions?: ReactNode;
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
+    /** Content for the footer, often one Button or an Action Group containing more of them. */
+    footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
-declare const closeDialog: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
-declare const openDialog: (id: string) => void;
 declare const Dialog: react.ForwardRefExoticComponent<{
-    /** The button(s) in the footer. Start with a primary button. */
-    actions?: ReactNode;
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
+    /** Content for the footer, often one Button or an Action Group containing more of them. */
+    footer?: ReactNode;
     /** The text for the Heading. */
     heading: string;
 } & DialogHTMLAttributes<HTMLDialogElement> & {
     children?: ReactNode | undefined;
-} & react.RefAttributes<HTMLDialogElement>>;
-
-type ImageProps = {
-    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
-    cover?: boolean;
-} & ImgHTMLAttributes<HTMLImageElement>;
-declare const Image: react.ForwardRefExoticComponent<{
-    /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
-    cover?: boolean;
-} & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
+} & react.RefAttributes<HTMLDialogElement>> & {
+    close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
+    open: (id: string) => void;
+};
 
 type PaginationProps = {
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
-    /** The accessible name for the link to the next page. */
-    nextAriaLabel?: string;
-    /** The label for the link to the next page. */
+    /** The visible label for the next page-button. */
     nextLabel?: string;
+    /** The accessible name for the next page-button. */
+    nextVisuallyHiddenLabel?: string;
     /** A function to run when the page number changes. */
     onPageChange?: (page: number) => void;
     /** The current page number. */
     page?: number;
-    /** The accessible name for the link to the previous page. */
-    previousAriaLabel?: string;
-    /** The label for the link to the previous page. */
+    /** The visible label for the previous page-button. */
     previousLabel?: string;
+    /** The accessible name for the previous page-button. */
+    previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
+    /** The accessible name for the Pagination component. */
+    visuallyHiddenLabel?: string;
 } & HTMLAttributes<HTMLElement>;
 declare const Pagination: react.ForwardRefExoticComponent<{
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
-    /** The accessible name for the link to the next page. */
-    nextAriaLabel?: string;
-    /** The label for the link to the next page. */
+    /** The visible label for the next page-button. */
     nextLabel?: string;
+    /** The accessible name for the next page-button. */
+    nextVisuallyHiddenLabel?: string;
     /** A function to run when the page number changes. */
     onPageChange?: (page: number) => void;
     /** The current page number. */
     page?: number;
-    /** The accessible name for the link to the previous page. */
-    previousAriaLabel?: string;
-    /** The label for the link to the previous page. */
+    /** The visible label for the previous page-button. */
     previousLabel?: string;
+    /** The accessible name for the previous page-button. */
+    previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
+    /** The accessible name for the Pagination component. */
+    visuallyHiddenLabel?: string;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
 type ScreenMaxWidth = 'wide' | 'x-wide';
@@ -764,18 +961,6 @@ declare const Alert: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
-type AspectRatioProps = {
-    /** The dimensions. */
-    ratio?: Ratio;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const AspectRatio: react.ForwardRefExoticComponent<{
-    /** The dimensions. */
-    ratio?: Ratio;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>>;
-
 type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
@@ -895,31 +1080,65 @@ declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLEle
     Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type LinkOnBackground = 'default' | 'light' | 'dark';
 type LinkVariant = 'standalone' | 'inline';
 type LinkProps = {
-    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-    onBackground?: LinkOnBackground;
+    /** Changes the text colour for readability on a light background. */
+    contrastColor?: boolean;
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
     /** Whether the link is inline or stands alone. */
     variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 declare const Link: react.ForwardRefExoticComponent<{
-    /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-    onBackground?: LinkOnBackground;
+    /** Changes the text colour for readability on a light background. */
+    contrastColor?: boolean;
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
     /** Whether the link is inline or stands alone. */
     variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
+type IconProps = {
+    /** The size of the icon. Corresponds with the text levels. */
+    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const Icon: react.ForwardRefExoticComponent<{
+    /** The size of the icon. Corresponds with the text levels. */
+    size?: "level-3" | "level-4" | "level-5" | "level-6";
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function;
+} & 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 = {
+    /** Adds an icon to the button, showing it after the label. */
+    icon: IconProps['svg'];
+} & (IconBeforeProp | IconOnlyProp);
+type TextButtonProps = {
+    icon?: never;
+    iconBefore?: never;
+    iconOnly?: never;
+};
 type ButtonProps = {
     /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
-} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
-declare const Button: react.ForwardRefExoticComponent<{
-    /** The level of prominence. Use a primary button only once per page or section. */
-    variant?: "primary" | "secondary" | "tertiary";
-} & ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLButtonElement>>;
+} & (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type ParagraphProps = {
     /** Changes the text colour for readability on a dark background. */
@@ -938,6 +1157,9 @@ declare const Paragraph: react.ForwardRefExoticComponent<{
 
 declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
     children?: react.ReactNode | undefined;
+} & react.HTMLAttributes<HTMLElement> & {
+    hint?: string;
+    optional?: boolean;
 } & react.RefAttributes<HTMLLabelElement>>;
 
 type UnorderedListProps = {
@@ -965,23 +1187,6 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
 
 type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
-type IconProps = {
-    /** The size of the icon. Corresponds with the text levels. */
-    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
-    /** Whether the icon container should be made square. */
-    square?: boolean;
-    /** The component rendering the icon’s markup. */
-    svg: Function;
-} & HTMLAttributes<HTMLSpanElement>;
-declare const Icon: react.ForwardRefExoticComponent<{
-    /** The size of the icon. Corresponds with the text levels. */
-    size?: "level-3" | "level-4" | "level-5" | "level-6";
-    /** Whether the icon container should be made square. */
-    square?: boolean;
-    /** The component rendering the icon’s markup. */
-    svg: Function;
-} & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
-
 type AccordionProps = {
     /** The hierarchical level of the Accordion Section heading(s) within the document. */
     headingLevel: HeadingProps['level'];
@@ -1011,48 +1216,4 @@ type AccordionSectionProps = {
     expanded?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
-type GridCellSpanAllProp = {
-    /** Lets the cell span the full width of all grid variants. */
-    span: 'all';
-    start?: never;
-};
-type GridCellSpanAndStartProps = {
-    /** The amount of grid columns the cell spans. */
-    span?: GridColumnNumber | GridColumnNumbers;
-    /** The index of the grid column the cell starts at. */
-    start?: GridColumnNumber | GridColumnNumbers;
-};
-type GridCellProps = {
-    /** The HTML element to use. */
-    as?: 'article' | 'div' | 'section';
-} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
-
-type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type GridColumnNumbers = {
-    narrow: GridColumnNumber;
-    medium: GridColumnNumber;
-    wide: GridColumnNumber;
-};
-type GridPaddingSize = 'small' | 'medium' | 'large';
-type GridPaddingVerticalProp = {
-    paddingBottom?: never;
-    paddingTop?: never;
-    /** The amount of space above and below. */
-    paddingVertical?: GridPaddingSize;
-};
-type GridPaddingTopAndBottomProps = {
-    /** The amount of space below. */
-    paddingBottom?: GridPaddingSize;
-    /** The amount of space above. */
-    paddingTop?: GridPaddingSize;
-    paddingVertical?: never;
-};
-type GridProps = {
-    /** The amount of space between rows. */
-    gapVertical?: 'none' | 'small' | 'large';
-} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>> & {
-    Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
-};
-
-export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, CharacterCount, type CharacterCountProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, TableOfContents, type TableOfContentsLinkProps, type TableOfContentsListProps, type TableOfContentsProps, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps, closeDialog, openDialog };
+export { Accordion, type AccordionProps, type AccordionSectionProps, ActionGroup, type ActionGroupProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Breakout, type BreakoutCellProps, type BreakoutProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, CharacterCount, type CharacterCountProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Hint, type HintProps, Icon, IconButton, type IconButtonProps$1 as IconButtonProps, type IconProps, Image, type ImageProps, ImageSlider, type ImageSliderItemProps, type ImageSliderProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, TableOfContents, type TableOfContentsLinkProps, type TableOfContentsListProps, type TableOfContentsProps, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps };