@amsterdam/design-system-react 0.14.1 → 0.16.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, ImgHTMLAttributes, LabelHTMLAttributes, ForwardRefExoticComponent, SVGProps, RefAttributes, 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>>;
@@ -169,32 +180,37 @@ type GridColumnNumbers = {
     medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
     wide: GridColumnNumber;
 };
-type GridPaddingSize = 'small' | 'medium' | 'large';
+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?: GridPaddingSize;
+    paddingVertical?: GridPadding;
 };
 type GridPaddingTopAndBottomProps = {
     /** The amount of space below. */
-    paddingBottom?: GridPaddingSize;
+    paddingBottom?: GridPadding;
     /** The amount of space above. */
-    paddingTop?: GridPaddingSize;
+    paddingTop?: GridPadding;
     paddingVertical?: never;
 };
 type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
-    gapVertical?: 'none' | 'small' | 'large';
+    gapVertical?: GridGap;
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 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';
@@ -219,7 +235,7 @@ type BreakoutCellRowSpanAndStartProps = {
 };
 type BreakoutCellProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'div' | 'section';
+    as?: BreakoutCellTag;
 } & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type BreakoutRowNumber = 1 | 2 | 3 | 4;
@@ -233,11 +249,13 @@ declare const Breakout: react.ForwardRefExoticComponent<GridProps & react.RefAtt
     Cell: react.ForwardRefExoticComponent<BreakoutCellProps & react.RefAttributes<any>>;
 };
 
+declare const iconSizes: readonly ["small", "large", "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. */
-    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 +263,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. */
@@ -279,15 +297,37 @@ type ButtonProps = {
 } & (IconButtonProps$1 | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+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>>;
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
+    Heading: react.ForwardRefExoticComponent<{
+        color?: "inverse";
+        level: 1 | 2 | 3 | 4;
+        size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+    } & HTMLAttributes<HTMLHeadingElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLHeadingElement>>;
     HeadingGroup: react.ForwardRefExoticComponent<{
         tagline: string;
     } & HTMLAttributes<HTMLElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
+    Image: react.ForwardRefExoticComponent<{
+        alt: string;
+    } & AspectRatioProps & Omit<react.ImgHTMLAttributes<HTMLImageElement>, "children"> & react.RefAttributes<HTMLImageElement>>;
     Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
@@ -314,35 +354,24 @@ 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"];
-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")[];
-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"];
+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 ColumnTag = 'article' | 'div' | 'section';
 type ColumnProps = {
     /**
      * The vertical alignment of the items in the column.
@@ -405,16 +434,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 +545,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>>;
@@ -535,27 +564,80 @@ declare const FileList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUList
     } & HTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
 };
 
-type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLElement>> & {
-    Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLDivElement>>;
-    Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+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. */
+    size?: IconProps['size'];
+    /** The component rendering the icon’s markup. */
+    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;
+    /** The size of the icon. */
+    size?: IconProps["size"];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps["svg"];
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+type ImageProps = {
+    /** A textual description of the content of the image. */
+    alt: string;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
+declare const Image: react.ForwardRefExoticComponent<{
+    /** A textual description of the content of the image. */
+    alt: string;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & 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. */
+    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 FooterBottomProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-
-type FooterTopProps = PropsWithChildren<HTMLAttributes<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 FormError = {
+type ErrorLink = {
     id: string;
     label: string;
 };
-type FormErrorListProps = {
+type InvalidFormAlertProps = {
     /**
      * The text following the error count.
      * This is used to show the error count in the document title.
@@ -566,7 +648,7 @@ type FormErrorListProps = {
         singular: string;
     };
     /** The list of error messages to display. */
-    errors: FormError[];
+    errors: ErrorLink[];
     /**
      * Whether the component receives focus on first render
      * @default true
@@ -578,13 +660,13 @@ type FormErrorListProps = {
      */
     heading?: string;
     /**
-     * The hierarchical level of the Heading within the document.
+     * 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.
-     * @default 2
-     */
-    headingLevel?: HeadingProps['level'];
+     **/
+    headingLevel: HeadingProps['level'];
 } & HTMLAttributes<HTMLDivElement>;
-declare const FormErrorList: react.ForwardRefExoticComponent<{
+declare const InvalidFormAlert: react.ForwardRefExoticComponent<{
     /**
      * The text following the error count.
      * This is used to show the error count in the document title.
@@ -595,7 +677,7 @@ declare const FormErrorList: react.ForwardRefExoticComponent<{
         singular: string;
     };
     /** The list of error messages to display. */
-    errors: FormError[];
+    errors: ErrorLink[];
     /**
      * Whether the component receives focus on first render
      * @default true
@@ -607,148 +689,13 @@ declare const FormErrorList: react.ForwardRefExoticComponent<{
      */
     heading?: string;
     /**
-     * The hierarchical level of the Heading within the document.
+     * 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.
-     * @default 2
-     */
-    headingLevel?: HeadingProps["level"];
+     **/
+    headingLevel: HeadingProps["level"];
 } & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
-type LogoProps = {
-    /** The name of the brand for which to display the logo. */
-    brand?: LogoBrand;
-} & SVGProps<SVGSVGElement>;
-declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
-
-type HeaderProps = {
-    /** The name of the application. */
-    brandName?: 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 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;
-    /** The accessible label for the navigation section. */
-    navigationLabel?: string;
-    /** Whether the menu button is visible on wide screens.  */
-    noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement>;
-declare const Header: react.ForwardRefExoticComponent<{
-    /** The name of the application. */
-    brandName?: 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 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;
-    /** The accessible label for the navigation section. */
-    navigationLabel?: string;
-    /** Whether the menu button is visible on wide screens.  */
-    noMenuButtonOnWideWindow?: boolean;
-} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
-    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
-    MenuLink: react.ForwardRefExoticComponent<{
-        fixed?: boolean;
-    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: ReactNode | undefined;
-    } & react.RefAttributes<HTMLAnchorElement>>;
-};
-
-type HeaderMenuLinkProps = {
-    fixed?: boolean;
-} & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-
-type IconButtonProps = {
-    /** 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 component rendering the icon’s markup. */
-    svg?: Function;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
-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;
-    /** 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. */
-    svg?: Function;
-} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
-
-type ImageProps = {
-    /**
-     * A textual description of the content of the image.
-     */
-    alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement>;
-declare const Image: react.ForwardRefExoticComponent<{
-    /**
-     * A textual description of the content of the image.
-     */
-    alt: string;
-} & AspectRatioProps & ImgHTMLAttributes<HTMLImageElement> & 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>;
-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>>;
-
 declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
     children?: react.ReactNode | undefined;
 } & react.HTMLAttributes<HTMLElement> & {
@@ -756,22 +703,13 @@ declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLab
     optional?: boolean;
 } & react.RefAttributes<HTMLLabelElement>>;
 
-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;
-    /** Whether the link is inline or stands alone. */
-    variant?: LinkVariant;
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
 } & 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;
-    /** Whether the link is inline or stands alone. */
-    variant?: LinkVariant;
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
@@ -779,9 +717,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,35 +726,34 @@ 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>>;
 
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+type LogoBrand = 'amsterdam' | 'ggd-amsterdam' | 'museum-weesp' | 'stadsarchief' | 'stadsbank-van-lening' | 'vga-verzekeringen';
+type LogoProps = {
+    /** The name of the brand for which to display the logo. */
+    brand?: LogoBrand;
+} & SVGProps<SVGSVGElement>;
+declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
+
 type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
-type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>> & {
-    ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode | undefined;
-    } & react.RefAttributes<HTMLDivElement>>;
-};
-
-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 +761,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. */
@@ -845,92 +781,155 @@ declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEle
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type PageHeadingProps = {
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
-declare const PageHeading: react.ForwardRefExoticComponent<{
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
-} & HTMLAttributes<HTMLHeadingElement> & {
+type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Page: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLHeadingElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
-type PageMenuProps = {
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-declare const PageMenu: react.ForwardRefExoticComponent<{
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & HTMLAttributes<HTMLUListElement> & {
+type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const PageFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLUListElement>> & {
-    Link: react.ForwardRefExoticComponent<{
-        icon?: Function;
-    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+} & 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 = {
+    /** The name of the application. */
+    brandName?: 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 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;
+} & HTMLAttributes<HTMLElement>;
+declare const PageHeader: react.ForwardRefExoticComponent<{
+    /** The name of the application. */
+    brandName?: 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 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;
+} & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>> & {
+    GridCellNarrowWindowOnly: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<HTMLElement>>;
+    MenuLink: react.ForwardRefExoticComponent<{
+        fixed?: boolean;
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
-type PageMenuLinkProps = {
-    icon?: Function;
+type PageHeaderMenuLinkProps = {
+    fixed?: boolean;
 } & PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
+type PageHeadingProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+declare const PageHeading: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLHeadingElement>>;
+
 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 +943,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,9 +960,10 @@ declare const Radio: react.ForwardRefExoticComponent<{
     children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare const rowGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
+declare const rowTags: readonly ["article", "div", "section"];
+type RowTag = (typeof rowTags)[number];
+declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
 type RowGap = (typeof rowGapSizes)[number];
-type RowTag = 'article' | 'div' | 'section';
 type RowProps = {
     /**
      * The horizontal alignment of the items in the row.
@@ -1021,22 +1021,6 @@ declare const Row: react.ForwardRefExoticComponent<{
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
-type ScreenMaxWidth = 'wide' | 'x-wide';
-type ScreenProps = {
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const Screen: react.ForwardRefExoticComponent<{
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode | undefined;
-} & react.RefAttributes<HTMLDivElement>>;
-
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
 declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
     children?: react.ReactNode | undefined;
@@ -1044,6 +1028,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 +1066,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;
@@ -1092,6 +1076,8 @@ declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFo
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
@@ -1308,16 +1294,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 +1311,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 +1325,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,24 +1338,38 @@ 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 spotlightTags: readonly ["article", "aside", "div", "footer", "section"];
+type SpotlightTag = (typeof spotlightTags)[number];
+declare const spotlightColors: readonly ["azure", "green", "lime", "magenta", "orange", "yellow"];
+type SpotlightColor = (typeof spotlightColors)[number];
 type SpotlightProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'aside' | 'div' | 'footer' | 'section';
+    as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Spotlight: react.ForwardRefExoticComponent<{
     /** The HTML element to use. */
-    as?: "article" | "aside" | "div" | "footer" | "section";
+    as?: SpotlightTag;
     /** The background colour. */
     color?: SpotlightColor;
 } & HTMLAttributes<HTMLElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
+type StandaloneLinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** Adds an icon to the link, showing it before the link text. */
+    icon?: Function;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+declare const StandaloneLink: react.ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** Adds an icon to the link, showing it before the link text. */
+    icon?: Function;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
+
 type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
 declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     children?: react.ReactNode | undefined;
@@ -1438,19 +1438,19 @@ type TableOfContentsLinkProps = {
 type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
 type TabsProps = {
-    /** The number of the active tab. Corresponds to its `tab` value. */
-    activeTab?: number;
-    onChange?: (tabId: number) => void;
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
+    activeTab?: string;
+    onTabChange?: (panelId: string) => void;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Tabs: react.ForwardRefExoticComponent<{
-    /** The number of the active tab. Corresponds to its `tab` value. */
-    activeTab?: number;
-    onChange?: (tabId: number) => void;
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
+    activeTab?: string;
+    onTabChange?: (panelId: string) => void;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Button: react.ForwardRefExoticComponent<{
-        tab: number;
+        'aria-controls': string;
     } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
@@ -1458,22 +1458,22 @@ declare const Tabs: react.ForwardRefExoticComponent<{
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
     Panel: react.ForwardRefExoticComponent<{
-        tab: number;
+        id: string;
     } & HTMLAttributes<HTMLDivElement> & {
         children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
 type TabsPanelProps = {
-    /** The identifier of the corresponding Tab. */
-    tab: number;
+    /** The identifier of the Tab Panel. */
+    id: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 
 type TabsButtonProps = {
-    /** An identifier. */
-    tab: number;
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
@@ -1513,16 +1513,9 @@ declare const TimeInput: react.ForwardRefExoticComponent<{
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-declare const TopTaskLink: react.ForwardRefExoticComponent<{
-    /** The title. */
-    label: string;
-    /** The text content. */
-    description: 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. */
@@ -1530,7 +1523,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. */
@@ -1545,4 +1538,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, Grid, Heading, Hint, Icon, IconButton, Image, ImageSlider, InvalidFormAlert, Label, Link, LinkList, Logo, Mark, OrderedList, Overlap, Page, PageFooter, PageHeader, PageHeading, Pagination, Paragraph, PasswordInput, Radio, Row, SearchField, Select, SkipLink, Spotlight, StandaloneLink, Switch, Table, TableOfContents, Tabs, TextArea, TextInput, TimeInput, 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, GridCellProps, GridColumnNumber, GridColumnNumbers, GridProps, HeadingProps, HintProps, IconButtonProps, IconProps, ImageProps, ImageSliderItemProps, ImageSliderProps, InvalidFormAlertProps, LinkListLinkProps, LinkListProps, LinkProps, LogoBrand, LogoProps, MarkProps, OrderedListItemProps, OrderedListProps, OverlapProps, PageFooterMenuLinkProps, PageFooterMenuProps, PageFooterProps, PageFooterSpotlightProps, PageHeaderMenuLinkProps, PageHeaderProps, PageHeadingProps, PageProps, PaginationProps, ParagraphProps, PasswordInputProps, RadioProps, RowProps, SearchFieldProps, SelectOptionProps, SelectProps, SkipLinkProps, SpotlightProps, StandaloneLinkProps, SwitchProps, TableOfContentsLinkProps, TableOfContentsListProps, TableOfContentsProps, TableProps, TabsButtonProps, TabsListProps, TabsPanelProps, TabsProps, TextAreaProps, TextInputProps, TimeInputProps, UnorderedListItemProps, UnorderedListProps };