@amsterdam/design-system-react 0.14.0 → 0.15.0

package/dist/index.d.ts

@@ -1,19 +1,19 @@
 import * as react from 'react';
-import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, SVGProps, ForwardRefExoticComponent, RefAttributes, ImgHTMLAttributes, LabelHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, BlockquoteHTMLAttributes, AnchorHTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, DialogHTMLAttributes, MouseEvent, ForwardRefExoticComponent, SVGProps, RefAttributes, ImgHTMLAttributes, LabelHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, ComponentType, OptionHTMLAttributes, OptgroupHTMLAttributes, SelectHTMLAttributes, TableHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 type HeadingProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
     /** The hierarchical level within the document. */
-    level?: 1 | 2 | 3 | 4;
+    level: 1 | 2 | 3 | 4;
     /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 declare const Heading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
     /** The hierarchical level within the document. */
-    level?: 1 | 2 | 3 | 4;
+    level: 1 | 2 | 3 | 4;
     /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
 } & HTMLAttributes<HTMLHeadingElement> & {
@@ -21,13 +21,21 @@ declare const Heading: react.ForwardRefExoticComponent<{
 } & react.RefAttributes<HTMLHeadingElement>>;
 
 type AccordionProps = {
-    /** The hierarchical level of the Accordion Section heading(s) within the document. */
+    /**
+     * The hierarchical level of this Accordion’s Section Headings within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
     headingLevel: HeadingProps['level'];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: 'div' | 'section';
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Accordion: react.ForwardRefExoticComponent<{
-    /** The hierarchical level of the Accordion Section heading(s) within the document. */
+    /**
+     * The hierarchical level of this Accordion’s Section Headings within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
     headingLevel: HeadingProps["level"];
     /** The HTML element to use for each Accordion Section. */
     sectionAs?: "div" | "section";
@@ -35,18 +43,18 @@ declare const Accordion: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Section: react.ForwardRefExoticComponent<{
-        label: string;
         expanded?: boolean;
+        label: string;
     } & HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
 type AccordionSectionProps = {
-    /** The heading text. */
-    label: string;
     /** Whether the content is displayed initially. */
     expanded?: boolean;
+    /** The heading text. */
+    label: string;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type ActionGroupProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
@@ -54,22 +62,24 @@ declare const ActionGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDi
     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;
+    heading: string;
     /**
-     * The hierarchical level of the Heading within the document.
+     * The hierarchical level of the Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
      * Note: this intentionally does not change the font size.
-     */
-    headingLevel?: HeadingProps['level'];
+     **/
+    headingLevel: HeadingProps['level'];
     /** A function to run when dismissing. */
     onClose?: () => void;
     /** The significance of the message conveyed. */
-    severity?: 'error' | 'info' | 'success' | 'warning';
+    severity?: Severity;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Alert: react.ForwardRefExoticComponent<{
     /** Whether the user can dismiss the Alert. Adds a button to its top right. */
@@ -77,21 +87,22 @@ declare const Alert: react.ForwardRefExoticComponent<{
     /** The label for the button that dismisses the Alert. */
     closeButtonLabel?: string;
     /** The text for the Heading. */
-    heading?: string;
+    heading: string;
     /**
-     * The hierarchical level of the Heading within the document.
+     * The hierarchical level of the Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
      * Note: this intentionally does not change the font size.
-     */
-    headingLevel?: HeadingProps["level"];
+     **/
+    headingLevel: HeadingProps["level"];
     /** A function to run when dismissing. */
     onClose?: () => void;
     /** The significance of the message conveyed. */
-    severity?: "error" | "info" | "success" | "warning";
+    severity?: Severity;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare const avatarColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
+declare const avatarColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
 type AvatarColor = (typeof avatarColors)[number];
 type AvatarProps = {
     /** The background colour. */
@@ -110,7 +121,7 @@ declare const Avatar: react.ForwardRefExoticComponent<{
     label: string;
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 
-declare const badgeColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
+declare const badgeColors: readonly ["azure", "lime", "magenta", "orange", "purple", "red", "yellow"];
 type BadgeColor = (typeof badgeColors)[number];
 type BadgeProps = {
     /** The background colour. */
@@ -127,11 +138,11 @@ declare const Badge: react.ForwardRefExoticComponent<{
 
 type BlockquoteProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
 } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
 declare const Blockquote: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
 } & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLQuoteElement>>;
@@ -233,11 +244,13 @@ declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAtt
     Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
 };
 
+declare const iconSizes: string[];
+type IconSize = (typeof iconSizes)[number];
 type IconProps = {
     /** Changes the icon colour for readability on a dark background. */
-    inverseColor?: boolean;
-    /** The size of the icon. Corresponds with the text levels. */
-    size?: 'level-3' | 'level-4' | 'level-5' | 'level-6';
+    color?: 'inverse';
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;
     /** The component rendering the icon’s markup. */
@@ -245,9 +258,9 @@ type IconProps = {
 } & HTMLAttributes<HTMLSpanElement>;
 declare const Icon: react.ForwardRefExoticComponent<{
     /** Changes the icon 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";
+    color?: "inverse";
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
     /** Whether the icon container should be made square. */
     square?: boolean;
     /** The component rendering the icon’s markup. */
@@ -314,34 +327,34 @@ declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTM
 } & react.RefAttributes<HTMLDivElement>>;
 
 type CheckboxProps = {
-    /** Whether the value fails a validation rule. */
-    invalid?: boolean;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
-} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
-declare const Checkbox: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+} & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+declare const Checkbox: react.ForwardRefExoticComponent<{
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare const aspectRatioOptions: readonly ["x-tall", "tall", "square", "wide", "x-wide", "2x-wide"];
+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: ("start" | "center" | "end")[];
+declare const crossAlignOptionsForColumn: ("center" | "start" | "end")[];
 type CrossAlignForColumn = (typeof crossAlignOptionsForColumn)[number];
 declare const mainAlignOptions: readonly ["center", "end", "between", "around", "evenly"];
 type MainAlign = (typeof mainAlignOptions)[number];
 
-declare const columnGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
-type ColumnGap = (typeof columnGapSizes)[number];
+declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
+type ColumnGap = (typeof columnGaps)[number];
 type ColumnTag = 'article' | 'div' | 'section';
 type ColumnProps = {
     /**
@@ -405,16 +418,16 @@ declare const DateInput: react.ForwardRefExoticComponent<{
     type?: DateInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-declare const descriptionListTermsWidths: readonly ["sm", "md", "lg"];
+declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
 type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
 type DescriptionListProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
     termsWidth?: DescriptionListTermsWidth;
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
 declare const DescriptionList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
     termsWidth?: DescriptionListTermsWidth;
 } & HTMLAttributes<HTMLDListElement> & {
     children?: react.ReactNode | undefined;
@@ -516,7 +529,7 @@ declare const Figure: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
     Caption: react.ForwardRefExoticComponent<{
-        inverseColor?: boolean;
+        color?: "inverse";
     } & HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
@@ -539,80 +552,22 @@ type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
-    Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    Menu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
         children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLDivElement>>;
-    Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    } & 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 FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
-type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-type FormError = {
-    id: string;
-    label: string;
-};
-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;
-        singular: string;
-    };
-    /** The list of error messages to display. */
-    errors: FormError[];
-    /**
-     * 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 Heading within the document.
-     * Note: this intentionally does not change the font size.
-     * @default 2
-     */
-    headingLevel?: HeadingProps['level'];
-} & HTMLAttributes<HTMLDivElement>;
-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;
-        singular: string;
-    };
-    /** The list of error messages to display. */
-    errors: FormError[];
-    /**
-     * 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 Heading within the document.
-     * Note: this intentionally does not change the font size.
-     * @default 2
-     */
-    headingLevel?: HeadingProps["level"];
-} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 /**
  * @license EUPL-1.2+
@@ -635,10 +590,10 @@ type HeaderProps = {
     logoLink?: string;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
-    menuItems?: ReactNode;
     /** The text for the menu button. */
     menuButtonText?: string;
+    /** A slot for the menu items. Use Header.MenuLink here. */
+    menuItems?: ReactNode;
     /** The accessible label for the navigation section. */
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
@@ -653,10 +608,10 @@ declare const Header: react.ForwardRefExoticComponent<{
     logoLink?: string;
     /** The accessible text for the link on the logo. */
     logoLinkTitle?: string;
-    /** A slot for the menu items. Use Header.MenuLink here. */
-    menuItems?: ReactNode;
     /** The text for the menu button. */
     menuButtonText?: string;
+    /** A slot for the menu items. Use Header.MenuLink here. */
+    menuItems?: ReactNode;
     /** The accessible label for the navigation section. */
     navigationLabel?: string;
     /** Whether the menu button is visible on wide screens.  */
@@ -675,28 +630,24 @@ type HeaderMenuLinkProps = {
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 type IconButtonProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** 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 size of the icon. */
+    size?: IconProps['size'];
     /** The component rendering the icon’s markup. */
-    svg?: Function;
+    svg?: IconProps['svg'];
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 declare const IconButton: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
-    /** 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 size of the icon. */
+    size?: IconProps["size"];
     /** The component rendering the icon’s markup. */
-    svg?: Function;
+    svg?: IconProps["svg"];
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
 type ImageProps = {
@@ -712,6 +663,8 @@ declare const Image: react.ForwardRefExoticComponent<{
     alt: string;
 } & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
 
+declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;
+
 type ImageSliderImageProps = ImageProps;
 type ImageSliderProps = {
     /** Display buttons to navigate to the previous or next image. */
@@ -749,6 +702,69 @@ type ImageSliderItemProps = {
     slideId: number;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
+type ErrorLink = {
+    id: string;
+    label: string;
+};
+type InvalidFormAlertProps = {
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps['level'];
+} & HTMLAttributes<HTMLDivElement>;
+declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps["level"];
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
 declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
     children?: react.ReactNode | undefined;
 } & react.HTMLAttributes<HTMLElement> & {
@@ -758,18 +774,14 @@ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLab
 
 type LinkVariant = 'standalone' | 'inline';
 type LinkProps = {
-    /** Changes the text colour for readability on a light background. */
-    contrastColor?: boolean;
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
     /** Whether the link is inline or stands alone. */
     variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 declare const Link: react.ForwardRefExoticComponent<{
-    /** Changes the text colour for readability on a light background. */
-    contrastColor?: boolean;
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
     /** Whether the link is inline or stands alone. */
     variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
@@ -779,9 +791,8 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
+        color?: "contrast" | "inverse";
         icon?: Function;
-        contrastColor?: boolean;
-        inverseColor?: boolean;
         size?: "small" | "large";
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
@@ -789,12 +800,10 @@ declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
 };
 
 type LinkListLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
     /** An icon to display instead of the default chevron. Don’t mix custom icons with chevrons in one list. */
     icon?: Function;
-    /** 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>>;
@@ -805,6 +814,7 @@ declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
 } & react.RefAttributes<HTMLElement>>;
 
 type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/** @deprecated Use child components in Header instead. */
 declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
@@ -817,7 +827,7 @@ type MegaMenuListCategoryProps = PropsWithChildren<HTMLAttributes<HTMLDivElement
 
 type OrderedListProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
@@ -825,7 +835,7 @@ type OrderedListProps = {
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
 declare const OrderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
@@ -847,11 +857,11 @@ declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEle
 
 type PageHeadingProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 declare const PageHeading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
 } & HTMLAttributes<HTMLHeadingElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
@@ -882,55 +892,69 @@ type PageMenuLinkProps = {
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
 type PaginationProps = {
+    /** The React component to use for the links. */
+    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The template used to construct the link hrefs. */
+    linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
-    /** The visible label for the next page-button. */
+    /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the next page-button. */
+    /** The accessible name for the link to the next page. */
     nextVisuallyHiddenLabel?: string;
-    /** A function to run when the page number changes. */
-    onPageChange?: (page: number) => void;
     /** The current page number. */
     page?: number;
-    /** The visible label for the previous page-button. */
+    /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the previous page-button. */
+    /** The accessible name for the link to the previous page. */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
     /** The accessible name for the Pagination component. */
     visuallyHiddenLabel?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    visuallyHiddenLabelId?: string;
 } & HTMLAttributes<HTMLElement>;
 declare const Pagination: react.ForwardRefExoticComponent<{
+    /** The React component to use for the links. */
+    linkComponent?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
+    /** The template used to construct the link hrefs. */
+    linkTemplate: (page: number) => string;
     /** The maximum amount of pages shown. Minimum value: 5. */
     maxVisiblePages?: number;
-    /** The visible label for the next page-button. */
+    /** The visible label for the link to the next page. */
     nextLabel?: string;
-    /** The accessible name for the next page-button. */
+    /** The accessible name for the link to the next page. */
     nextVisuallyHiddenLabel?: string;
-    /** A function to run when the page number changes. */
-    onPageChange?: (page: number) => void;
     /** The current page number. */
     page?: number;
-    /** The visible label for the previous page-button. */
+    /** The visible label for the link to the previous page. */
     previousLabel?: string;
-    /** The accessible name for the previous page-button. */
+    /** The accessible name for the link to the previous page. */
     previousVisuallyHiddenLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
     /** The accessible name for the Pagination component. */
     visuallyHiddenLabel?: string;
+    /**
+     * Connects the component with an internal element that defines its accessible name.
+     * Note: must be unique for the page.
+     */
+    visuallyHiddenLabelId?: string;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
 type ParagraphProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
     /** The size of the text. */
     size?: 'small' | 'large';
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
 declare const Paragraph: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
     /** The size of the text. */
     size?: "small" | "large";
 } & HTMLAttributes<HTMLParagraphElement> & {
@@ -944,7 +968,7 @@ type PasswordInputProps = {
 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>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "autoCapitalize" | "spellCheck" | "autoCorrect" | "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioProps = {
     /** An icon to display instead of the default icon. */
@@ -961,8 +985,8 @@ declare const Radio: react.ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare const rowGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
-type RowGap = (typeof rowGapSizes)[number];
+declare const rowGaps: readonly ["none", "x-small", "small", "large", "x-large"];
+type RowGap = (typeof rowGaps)[number];
 type RowTag = 'article' | 'div' | 'section';
 type RowProps = {
     /**
@@ -1044,6 +1068,7 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
     Button: react.ForwardRefExoticComponent<{
         children?: react.ReactNode;
         className?: string | undefined | undefined;
+        color?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -1081,7 +1106,6 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         vocab?: string | undefined | undefined;
         autoCorrect?: string | undefined | undefined;
         autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
         itemProp?: string | undefined | undefined;
         itemScope?: boolean | undefined | undefined;
         itemType?: string | undefined | undefined;
@@ -1308,16 +1332,16 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         onAnimationIterationCapture?: react.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: react.TransitionEventHandler<HTMLButtonElement> | undefined;
-        disabled?: boolean | undefined | undefined;
         form?: string | undefined | undefined;
+        value?: string | number | readonly string[] | undefined;
+        type?: "submit" | "reset" | "button" | undefined | undefined;
+        disabled?: boolean | undefined | undefined;
         formAction?: string | undefined;
         formEncType?: string | undefined | undefined;
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
         name?: string | undefined | undefined;
-        type?: "submit" | "reset" | "button" | undefined | undefined;
-        value?: string | number | readonly string[] | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
     Input: react.ForwardRefExoticComponent<{
         invalid?: boolean;
@@ -1325,10 +1349,10 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
     } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
 };
 
-type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
-
 type SelectOptionProps = OptionHTMLAttributes<HTMLOptionElement>;
 
+type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
+
 type SelectProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
@@ -1339,12 +1363,12 @@ declare const Select: react.ForwardRefExoticComponent<{
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLSelectElement>> & {
-    Option: react.ForwardRefExoticComponent<SelectOptionProps & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLOptionElement>>;
     Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLOptGroupElement>>;
+    Option: react.ForwardRefExoticComponent<SelectOptionProps & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLOptionElement>>;
 };
 
 type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
@@ -1352,9 +1376,8 @@ declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTM
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLAnchorElement>>;
 
-declare const defaultColor = "purple";
-declare const spotlightColors: readonly ["blue", "dark-green", "green", "magenta", "orange", "yellow"];
-type SpotlightColor = (typeof spotlightColors)[number] | typeof defaultColor;
+declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type SpotlightColor = (typeof spotlightColors)[number];
 type SpotlightProps = {
     /** The HTML element to use. */
     as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
@@ -1438,17 +1461,19 @@ type TableOfContentsLinkProps = {
 type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
 type TabsProps = {
-    /** The number of the active tab. Corresponds to its `tab` value. */
-    activeTab?: number;
+    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Tabs: react.ForwardRefExoticComponent<{
-    /** The number of the active tab. Corresponds to its `tab` value. */
-    activeTab?: number;
+    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Button: react.ForwardRefExoticComponent<{
-        tab: number;
+        tab: string;
     } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
@@ -1456,7 +1481,7 @@ declare const Tabs: react.ForwardRefExoticComponent<{
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
     Panel: react.ForwardRefExoticComponent<{
-        tab: number;
+        tab: string;
     } & HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
@@ -1464,14 +1489,14 @@ declare const Tabs: react.ForwardRefExoticComponent<{
 
 type TabsPanelProps = {
     /** The identifier of the corresponding Tab. */
-    tab: number;
+    tab: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsButtonProps = {
     /** An identifier. */
-    tab: number;
+    tab: string;
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
@@ -1512,15 +1537,15 @@ declare const TimeInput: react.ForwardRefExoticComponent<{
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const TopTaskLink: react.ForwardRefExoticComponent<{
-    /** The title. */
-    label: string;
     /** The text content. */
     description: string;
+    /** The title. */
+    label: string;
 } & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 
 type UnorderedListProps = {
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: 'inverse';
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
@@ -1528,7 +1553,7 @@ type UnorderedListProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const UnorderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
+    color?: "inverse";
     /** Whether the list items show a marker. */
     markers?: boolean;
     /** The size of the text. */
@@ -1543,4 +1568,5 @@ declare const UnorderedList: react.ForwardRefExoticComponent<{
 
 type UnorderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
-export { Accordion, type AccordionProps, type AccordionSectionProps, ActionGroup, type ActionGroupProps, Alert, type AlertProps, 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 DescriptionListDescriptionProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, Figure, type FigureProps, FileInput, type FileInputProps, FileList, type FileListProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderMenuLinkProps, type HeaderProps, Heading, type HeadingProps, Hint, type HintProps, Icon, IconButton, type 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, 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 };
+export { Accordion, ActionGroup, Alert, Avatar, Badge, Blockquote, Breadcrumb, Breakout, Button, Card, CharacterCount, Checkbox, Column, DateInput, DescriptionList, Dialog, ErrorMessage, Field, FieldSet, Figure, FileInput, FileList, Footer, Grid, Header, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, MegaMenu, OrderedList, Overlap, PageHeading, PageMenu, Pagination, Paragraph, PasswordInput, Radio, Row, Screen, SearchField, Select, SkipLink, Spotlight, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, TopTaskLink, UnorderedList, generateAspectRatioClass };
+export type { AccordionProps, AccordionSectionProps, ActionGroupProps, AlertProps, AvatarProps, BadgeProps, BlockquoteProps, BreadcrumbLinkProps, BreadcrumbProps, BreakoutCellProps, BreakoutProps, ButtonProps, CardHeadingGroupProps, CardLinkProps, CardProps, CharacterCountProps, CheckboxProps, ColumnProps, DateInputProps, DescriptionListDescriptionProps, DescriptionListProps, DescriptionListTermProps, DialogProps, ErrorLink, ErrorMessageProps, FieldProps, FieldSetProps, FigureProps, FileInputProps, FileListProps, FooterMenuLinkProps, FooterMenuProps, FooterProps, FooterSpotlightProps, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeaderMenuLinkProps, HeaderProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, MegaMenuListCategoryProps, MegaMenuProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageHeadingProps, PageMenuLinkProps, PageMenuProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, ScreenProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };