@amsterdam/design-system-react 0.9.0 → 0.11.0

package/dist/index.d.ts

@@ -1,5 +1,106 @@
 import * as react from 'react';
-import { PropsWithChildren, HTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, ReactNode, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { PropsWithChildren, HTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, SelectHTMLAttributes, ReactNode, ButtonHTMLAttributes, TextareaHTMLAttributes, TableHTMLAttributes, SVGProps, ForwardRefExoticComponent, RefAttributes, DialogHTMLAttributes, ImgHTMLAttributes, BlockquoteHTMLAttributes, OlHTMLAttributes, LiHTMLAttributes, LabelHTMLAttributes } from 'react';
+
+type HeadingProps = {
+    /** Changes the text colour for readability on a dark background. */
+    inverseColor?: boolean;
+    /** The hierarchical level within the document. */
+    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;
+    /** The hierarchical level within the document. */
+    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> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLHeadingElement>>;
+
+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.
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: FormError[];
+    /** Whether the component receives focus on first render */
+    focusOnRender?: boolean;
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    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.
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: FormError[];
+    /** Whether the component receives focus on first render */
+    focusOnRender?: boolean;
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps["level"];
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+type TableOfContentsProps = {
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps['level'];
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+declare const TableOfContents: react.ForwardRefExoticComponent<{
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps["level"];
+} & HTMLAttributes<HTMLElement> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLElement>> & {
+    Link: react.ForwardRefExoticComponent<{
+        label: string;
+    } & react.AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+    List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: react.ReactNode | undefined;
+    } & react.RefAttributes<HTMLUListElement>>;
+};
+
+type TableOfContentsLinkProps = {
+    /** The text for the link. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 
 type ErrorMessageProps = {
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
@@ -7,9 +108,9 @@ type ErrorMessageProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
 declare const ErrorMessage: react.ForwardRefExoticComponent<{
     /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
-    prefix?: string | undefined;
+    prefix?: string;
 } & HTMLAttributes<HTMLParagraphElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
 type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
@@ -21,9 +122,9 @@ type FieldProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Field: react.ForwardRefExoticComponent<{
     /** Whether the field has an input with a validation error */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
 } & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type SelectOptionGroupProps = OptgroupHTMLAttributes<HTMLOptGroupElement>;
@@ -36,15 +137,15 @@ type SelectProps = {
 } & PropsWithChildren<Omit<SelectHTMLAttributes<HTMLSelectElement>, 'aria-invalid'>>;
 declare const Select: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "aria-invalid"> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLSelectElement>> & {
     Option: react.ForwardRefExoticComponent<SelectOptionProps & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLOptionElement>>;
     Group: react.ForwardRefExoticComponent<SelectOptionGroupProps & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLOptGroupElement>>;
 };
 
@@ -54,19 +155,25 @@ type TimeInputProps = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
 declare const TimeInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
+declare const dateInputTypes: readonly ["date", "datetime-local"];
+type DateInputType = (typeof dateInputTypes)[number];
 type DateInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: DateInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
 declare const DateInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: DateInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
-declare const avatarColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "red", "yellow"];
+declare const avatarColors: readonly ["black", "blue", "dark-green", "green", "grey-1", "grey-2", "grey-3", "light-blue", "magenta", "orange", "purple", "red", "white", "yellow"];
 type AvatarColor = (typeof avatarColors)[number];
 type AvatarProps = {
     /** The background colour. */
@@ -78,20 +185,20 @@ type AvatarProps = {
 } & HTMLAttributes<HTMLSpanElement>;
 declare const Avatar: react.ForwardRefExoticComponent<{
     /** The background colour. */
-    color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "red" | "yellow" | undefined;
+    color?: AvatarColor;
     /** The url for the user’s image. Its center will be displayed. Should be square and scaled down. */
-    imageSrc?: string | undefined;
+    imageSrc?: string;
     /** The text content. Should be the user’s initials. The first two characters will be displayed. */
     label: string;
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 
-type FormFieldCharacterCounterProps = HTMLAttributes<HTMLDivElement> & {
+type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
     maxLength: number;
 };
-declare const FormFieldCharacterCounter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+declare const CharacterCount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /** The current length of the field’s value. */
     length: number;
     /** The maximum length of the field’s value. */
@@ -104,15 +211,15 @@ type DescriptionListProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
 declare const DescriptionList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
 } & HTMLAttributes<HTMLDListElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDListElement>> & {
     Term: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
     Details: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
 };
 
@@ -120,22 +227,71 @@ type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
 type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 
-declare const rowGapSizes: Array<string>;
-type RowTag = 'article' | 'div' | 'section';
+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 rowGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
 type RowGap = (typeof rowGapSizes)[number];
+type RowTag = 'article' | 'div' | 'section';
 type RowProps = {
-    /** The HTML element to use. */
+    /**
+     * The horizontal alignment of the items in the row.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The vertical alignment of the items in the row.
+     * @default stretch
+     */
+    alignVertical?: CrossAlign;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
     as?: RowTag;
-    /** The amount of vertical space between items. */
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
     gap?: RowGap;
+    /**
+     * Whether items of the row can wrap onto multiple lines.
+     * @default false
+     */
+    wrap?: boolean;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Row: react.ForwardRefExoticComponent<{
-    /** The HTML element to use. */
-    as?: RowTag | undefined;
-    /** The amount of vertical space between items. */
-    gap?: string | undefined;
+    /**
+     * The horizontal alignment of the items in the row.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The vertical alignment of the items in the row.
+     * @default stretch
+     */
+    alignVertical?: CrossAlign;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: RowTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: RowGap;
+    /**
+     * Whether items of the row can wrap onto multiple lines.
+     * @default false
+     */
+    wrap?: boolean;
 } & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 type RadioProps = {
@@ -144,27 +300,33 @@ type RadioProps = {
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 declare const Radio: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
-type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-declare const Tabs: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+type TabsProps = {
+    /** The number of the active tab. Corresponds to its `tab` value. */
+    activeTab?: number;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+declare const Tabs: react.ForwardRefExoticComponent<{
+    /** The number of the active tab. Corresponds to its `tab` value. */
+    activeTab?: number;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Button: react.ForwardRefExoticComponent<{
         tab: number;
     } & react.ButtonHTMLAttributes<HTMLButtonElement> & {
-        children?: react.ReactNode;
+        children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLButtonElement>>;
     List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode;
+        children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
     Panel: react.ForwardRefExoticComponent<{
         tab: number;
     } & HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode;
+        children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -188,27 +350,59 @@ type TextAreaProps = {
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
 declare const TextArea: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
     /** Allows the user to resize the text box. The default is resizing in both directions. */
-    resize?: "none" | "horizontal" | "vertical" | undefined;
+    resize?: "none" | "horizontal" | "vertical";
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & react.RefAttributes<HTMLTextAreaElement>>;
 
-declare const columnGapSizes: Array<string>;
-type ColumnTag = 'article' | 'div' | 'section';
+declare const columnGapSizes: readonly ["none", "extra-small", "small", "large", "extra-large"];
 type ColumnGap = (typeof columnGapSizes)[number];
+type ColumnTag = 'article' | 'div' | 'section';
 type ColumnProps = {
-    /** The HTML element to use. */
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
     as?: ColumnTag;
-    /** The amount of vertical space between items. */
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
     gap?: ColumnGap;
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Column: react.ForwardRefExoticComponent<{
-    /** The HTML element to use. */
-    as?: ColumnTag | undefined;
-    /** The amount of vertical space between items. */
-    gap?: string | undefined;
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: ColumnGap;
 } & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
@@ -218,24 +412,24 @@ type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
     legend: string;
 };
 declare const FieldSet: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & {
     /** Whether the field set has an input with a validation error */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
     /** The text for the caption. */
     legend: string;
 } & react.RefAttributes<HTMLFieldSetElement>>;
 
 type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const LinkList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
-        icon?: Function | undefined;
-        onBackground?: ("default" | "light" | "dark") | undefined;
-        size?: "small" | "large" | undefined;
+        icon?: Function;
+        onBackground?: "default" | "light" | "dark";
+        size?: "small" | "large";
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
@@ -259,44 +453,44 @@ type BadgeProps = {
 } & HTMLAttributes<HTMLElement>;
 declare const Badge: react.ForwardRefExoticComponent<{
     /** The background colour. */
-    color?: "black" | "blue" | "dark-green" | "green" | "grey-1" | "grey-2" | "grey-3" | "light-blue" | "magenta" | "orange" | "purple" | "red" | "white" | "yellow" | undefined;
+    color?: BadgeColor;
     /** The text content. */
     label: string | number;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
 type TableProps = PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>;
 declare const Table: react.ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLTableElement>> & {
     Body: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableSectionElement>>;
     Caption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableCaptionElement>>;
     Cell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableCellElement>>;
     Footer: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableSectionElement>>;
     Header: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableSectionElement>>;
     HeaderCell: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableCellElement>>;
     Row: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLTableRowElement>>;
 };
 
 type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const MegaMenu: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     ListCategory: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -316,21 +510,21 @@ declare const IconButton: react.ForwardRefExoticComponent<{
     /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
     label: string;
     /** Describes the underlying background colour. Allows the icon to provide visual contrast. */
-    onBackground?: "light" | "dark" | undefined;
+    onBackground?: "light" | "dark";
     /** The size of the icon. Corresponds with the text levels. */
-    size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    size?: "level-3" | "level-4" | "level-5" | "level-6";
     /** The component rendering the icon’s markup. */
-    svg?: Function | undefined;
+    svg?: Function;
 } & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
 type SkipLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 declare const SkipLink: react.ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLAnchorElement>>;
 
 type OverlapProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Overlap: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -346,58 +540,64 @@ type LogoProps = {
 declare const Logo: ForwardRefExoticComponent<Omit<LogoProps, "ref"> & RefAttributes<SVGSVGElement>>;
 
 type HeaderProps = {
+    /** The name of the application. */
+    appName?: string;
+    /** The list of menu links. Use a Page Menu here. */
+    links?: ReactNode;
     /** 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 name of the application. */
-    title?: string;
-    /** The list of menu links. Use a Page Menu here. */
-    links?: ReactNode;
     /** A button to toggle the visibility of a Mega Menu. */
     menu?: ReactNode;
 } & HTMLAttributes<HTMLElement>;
 declare const Header: react.ForwardRefExoticComponent<{
-    /** The name of the brand for which to display the logo. */
-    logoBrand?: LogoBrand | undefined;
-    /** The url for the link on the logo. */
-    logoLink?: string | undefined;
-    /** The accessible text for the link on the logo. */
-    logoLinkTitle?: string | undefined;
     /** The name of the application. */
-    title?: string | undefined;
+    appName?: string;
     /** The list of menu links. Use a Page Menu here. */
     links?: ReactNode;
+    /** 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 button to toggle the visibility of a Mega Menu. */
     menu?: ReactNode;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
 type MarkProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Mark: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>>;
 
+declare const textInputTypes: readonly ["email", "tel", "text", "url"];
+type TextInputType = (typeof textInputTypes)[number];
 type TextInputProps = {
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: TextInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid'>;
 declare const TextInput: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: TextInputType;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid"> & react.RefAttributes<HTMLInputElement>>;
 
 type SearchFieldProps = PropsWithChildren<HTMLAttributes<HTMLFormElement>>;
 declare const SearchField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFormElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLFormElement>> & {
     Button: react.ForwardRefExoticComponent<{
-        label?: string | undefined;
+        label?: string;
     } & HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
     Input: react.ForwardRefExoticComponent<{
-        invalid?: boolean | undefined;
-        label?: string | undefined;
+        invalid?: boolean;
+        label?: string;
     } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
 };
 
@@ -406,14 +606,18 @@ type DialogProps = {
     actions?: ReactNode;
     /** The label for the button that dismisses the Dialog. */
     closeButtonLabel?: string;
+    /** The text for the Heading. */
+    heading: string;
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
 declare const Dialog: react.ForwardRefExoticComponent<{
     /** The button(s) in the footer. Start with a primary button. */
     actions?: ReactNode;
     /** The label for the button that dismisses the Dialog. */
-    closeButtonLabel?: string | undefined;
+    closeButtonLabel?: string;
+    /** The text for the Heading. */
+    heading: string;
 } & DialogHTMLAttributes<HTMLDialogElement> & {
-    children?: ReactNode;
+    children?: ReactNode | undefined;
 } & react.RefAttributes<HTMLDialogElement>>;
 
 type ImageProps = {
@@ -422,7 +626,7 @@ type ImageProps = {
 } & ImgHTMLAttributes<HTMLImageElement>;
 declare const Image: react.ForwardRefExoticComponent<{
     /** Whether to display the image exactly as large as its container. This will clip the image if necessary. */
-    cover?: boolean | undefined;
+    cover?: boolean;
 } & ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
 
 type PaginationProps = {
@@ -445,19 +649,19 @@ type PaginationProps = {
 } & HTMLAttributes<HTMLElement>;
 declare const Pagination: react.ForwardRefExoticComponent<{
     /** The maximum amount of pages shown. Minimum value: 5. */
-    maxVisiblePages?: number | undefined;
+    maxVisiblePages?: number;
     /** The accessible name for the link to the next page. */
-    nextAriaLabel?: string | undefined;
+    nextAriaLabel?: string;
     /** The label for the link to the next page. */
-    nextLabel?: string | undefined;
+    nextLabel?: string;
     /** A function to run when the page number changes. */
-    onPageChange?: ((page: number) => void) | undefined;
+    onPageChange?: (page: number) => void;
     /** The current page number. */
-    page?: number | undefined;
+    page?: number;
     /** The accessible name for the link to the previous page. */
-    previousAriaLabel?: string | undefined;
+    previousAriaLabel?: string;
     /** The label for the link to the previous page. */
-    previousLabel?: string | undefined;
+    previousLabel?: string;
     /** The total amount of pages. */
     totalPages: number;
 } & HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
@@ -471,16 +675,16 @@ type ScreenProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Screen: react.ForwardRefExoticComponent<{
     /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean | undefined;
+    fullHeight?: boolean;
     /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth | undefined;
+    maxWidth?: ScreenMaxWidth;
 } & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type SwitchProps = PropsWithChildren<InputHTMLAttributes<HTMLInputElement>>;
 declare const Switch: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 declare const spotlightColors: readonly ["blue", "dark-blue", "dark-green", "green", "magenta", "orange", "purple", "yellow"];
@@ -493,24 +697,24 @@ type SpotlightProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Spotlight: react.ForwardRefExoticComponent<{
     /** The HTML element to use. */
-    as?: "article" | "aside" | "div" | "footer" | "section" | undefined;
+    as?: "article" | "aside" | "div" | "footer" | "section";
     /** The background colour. */
-    color?: "blue" | "dark-blue" | "dark-green" | "green" | "magenta" | "orange" | "purple" | "yellow" | undefined;
+    color?: SpotlightColor;
 } & HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<unknown>>;
 
 type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
     HeadingGroup: react.ForwardRefExoticComponent<{
         tagline: string;
     } & HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
     Link: react.ForwardRefExoticComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
@@ -521,56 +725,41 @@ type CardHeadingGroupProps = {
 
 type CardLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 
-type HeadingLevel = 1 | 2 | 3 | 4;
-type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
-type HeadingProps = {
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean;
-    /** The hierarchical level within the document. */
-    level?: HeadingLevel;
-    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
-    size?: HeadingSize;
-} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
-declare const Heading: react.ForwardRefExoticComponent<{
-    /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
-    /** The hierarchical level within the document. */
-    level?: HeadingLevel | undefined;
-    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
-    size?: HeadingSize | undefined;
-} & HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode;
-} & react.RefAttributes<HTMLHeadingElement>>;
-
 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 hierarchical level of the Alert’s heading within the document. */
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
     headingLevel?: HeadingProps['level'];
     /** A function to run when dismissing. */
     onClose?: () => void;
     /** The significance of the message conveyed. */
     severity?: 'error' | 'info' | 'success' | 'warning';
-    /** The text for the Heading. */
-    title?: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const Alert: react.ForwardRefExoticComponent<{
     /** Whether the user can dismiss the Alert. Adds a button to its top right. */
-    closeable?: boolean | undefined;
+    closeable?: boolean;
     /** The label for the button that dismisses the Alert. */
-    closeButtonLabel?: string | undefined;
-    /** The hierarchical level of the Alert’s heading within the document. */
-    headingLevel?: HeadingProps['level'];
+    closeButtonLabel?: string;
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps["level"];
     /** A function to run when dismissing. */
-    onClose?: (() => void) | undefined;
+    onClose?: () => void;
     /** The significance of the message conveyed. */
-    severity?: "error" | "info" | "success" | "warning" | undefined;
-    /** The text for the Heading. */
-    title?: string | undefined;
+    severity?: "error" | "info" | "success" | "warning";
 } & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type Ratio = 'x-tall' | 'tall' | 'square' | 'wide' | 'x-wide' | '2x-wide';
@@ -580,24 +769,20 @@ type AspectRatioProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 declare const AspectRatio: react.ForwardRefExoticComponent<{
     /** The dimensions. */
-    ratio?: Ratio | undefined;
+    ratio?: Ratio;
 } & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-declare const VisuallyHidden: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
-} & react.RefAttributes<HTMLElement>>;
-
 type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
     Bottom: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
     Top: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -613,16 +798,16 @@ type PageMenuProps = {
 } & 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 | undefined;
+    alignEnd?: boolean;
     /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean | undefined;
+    wrap?: boolean;
 } & HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Link: react.ForwardRefExoticComponent<{
-        icon?: Function | undefined;
+        icon?: Function;
     } & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLAnchorElement>>;
 };
 
@@ -643,9 +828,9 @@ type BlockquoteProps = {
 } & PropsWithChildren<BlockquoteHTMLAttributes<HTMLQuoteElement>>;
 declare const Blockquote: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
 } & BlockquoteHTMLAttributes<HTMLQuoteElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLQuoteElement>>;
 
 type CheckboxProps = {
@@ -656,11 +841,11 @@ type CheckboxProps = {
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
 declare const Checkbox: react.ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
-    invalid?: boolean | undefined;
+    invalid?: boolean;
     /** Allows being neither checked nor unchecked. */
-    indeterminate?: boolean | undefined;
+    indeterminate?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type PageHeadingProps = {
@@ -669,9 +854,9 @@ type PageHeadingProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
 declare const PageHeading: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
 } & HTMLAttributes<HTMLHeadingElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLHeadingElement>>;
 
 type OrderedListProps = {
@@ -684,16 +869,16 @@ type OrderedListProps = {
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
 declare const OrderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
     /** Whether the list items show a marker. */
-    markers?: boolean | undefined;
+    markers?: boolean;
     /** The size of the text. */
-    size?: "small" | undefined;
+    size?: "small";
 } & OlHTMLAttributes<HTMLOListElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLOListElement>> & {
     Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLLIElement>>;
 };
 
@@ -703,7 +888,7 @@ type BreadcrumbLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
 type BreadcrumbProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 declare const Breadcrumb: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLElement>> & {
     Link: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 };
@@ -718,9 +903,9 @@ type LinkProps = {
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
 declare const Link: react.ForwardRefExoticComponent<{
     /** Describes the underlying background colour. Allows the text to provide visual contrast. */
-    onBackground?: LinkOnBackground | undefined;
+    onBackground?: LinkOnBackground;
     /** Whether the link is inline or stands alone. */
-    variant?: LinkVariant | undefined;
+    variant?: LinkVariant;
 } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & react.RefAttributes<HTMLAnchorElement>>;
 
 type ButtonProps = {
@@ -729,9 +914,9 @@ type ButtonProps = {
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 declare const Button: react.ForwardRefExoticComponent<{
     /** The level of prominence. Use a primary button only once per page or section. */
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    variant?: "primary" | "secondary" | "tertiary";
 } & ButtonHTMLAttributes<HTMLButtonElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLButtonElement>>;
 
 type ParagraphProps = {
@@ -742,15 +927,15 @@ type ParagraphProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
 declare const Paragraph: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
     /** The size of the text. */
-    size?: "small" | "large" | undefined;
+    size?: "small" | "large";
 } & HTMLAttributes<HTMLParagraphElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLParagraphElement>>;
 
 declare const Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLLabelElement>>;
 
 type UnorderedListProps = {
@@ -763,16 +948,16 @@ type UnorderedListProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
 declare const UnorderedList: react.ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
-    inverseColor?: boolean | undefined;
+    inverseColor?: boolean;
     /** Whether the list items show a marker. */
-    markers?: boolean | undefined;
+    markers?: boolean;
     /** The size of the text. */
-    size?: "small" | undefined;
+    size?: "small";
 } & HTMLAttributes<HTMLUListElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLUListElement>> & {
     Item: react.ForwardRefExoticComponent<react.LiHTMLAttributes<HTMLLIElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLLIElement>>;
 };
 
@@ -788,32 +973,32 @@ type IconProps = {
 } & HTMLAttributes<HTMLSpanElement>;
 declare const Icon: react.ForwardRefExoticComponent<{
     /** The size of the icon. Corresponds with the text levels. */
-    size?: "level-3" | "level-4" | "level-5" | "level-6" | undefined;
+    size?: "level-3" | "level-4" | "level-5" | "level-6";
     /** Whether the icon container should be made square. */
-    square?: boolean | undefined;
+    square?: boolean;
     /** The component rendering the icon’s markup. */
     svg: Function;
 } & HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLElement>>;
 
 type AccordionProps = {
     /** The hierarchical level of the Accordion Section heading(s) within the document. */
-    headingLevel: HeadingLevel;
+    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. */
-    headingLevel: HeadingLevel;
+    headingLevel: HeadingProps["level"];
     /** The HTML element to use for each Accordion Section. */
-    sectionAs?: "div" | "section" | undefined;
+    sectionAs?: "div" | "section";
 } & HTMLAttributes<HTMLDivElement> & {
-    children?: react.ReactNode;
+    children?: react.ReactNode | undefined;
 } & react.RefAttributes<HTMLDivElement>> & {
     Section: react.ForwardRefExoticComponent<{
         label: string;
-        expanded?: boolean | undefined;
+        expanded?: boolean;
     } & HTMLAttributes<HTMLElement> & {
-        children?: react.ReactNode;
+        children?: react.ReactNode | undefined;
     } & react.RefAttributes<HTMLDivElement>>;
 };
 
@@ -868,4 +1053,4 @@ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttribu
     Cell: react.ForwardRefExoticComponent<GridCellProps & react.RefAttributes<unknown>>;
 };
 
-export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, FormFieldCharacterCounter, type FormFieldCharacterCounterProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, 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, VisuallyHidden };
+export { Accordion, type AccordionProps, type AccordionSectionProps, Alert, type AlertProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardHeadingGroupProps, type CardLinkProps, type CardProps, CharacterCount, type CharacterCountProps, Checkbox, type CheckboxProps, Column, type ColumnProps, DateInput, type DateInputProps, DescriptionList, type DescriptionListDetailsProps, type DescriptionListProps, type DescriptionListTermProps, Dialog, type DialogProps, ErrorMessage, type ErrorMessageProps, Field, type FieldProps, FieldSet, type FieldSetProps, FileInput, type FileInputProps, Footer, type FooterBottomProps, type FooterProps, type FooterTopProps, type FormError, FormErrorList, type FormErrorListProps, Grid, type GridCellProps, type GridColumnNumber, type GridColumnNumbers, type GridProps, Header, type HeaderProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Image, type ImageProps, Label, Link, LinkList, type LinkListLinkProps, type LinkListProps, type LinkProps, Logo, type LogoBrand, type LogoProps, Mark, type MarkProps, MegaMenu, type MegaMenuListCategoryProps, type MegaMenuProps, OrderedList, type OrderedListItemProps, type OrderedListProps, Overlap, type OverlapProps, PageHeading, type PageHeadingProps, PageMenu, type PageMenuLinkProps, type PageMenuProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Radio, type RadioProps, type Ratio, Row, type RowProps, Screen, type ScreenProps, SearchField, type SearchFieldProps, Select, type SelectOptionProps, type SelectProps, SkipLink, type SkipLinkProps, Spotlight, type SpotlightProps, Switch, type SwitchProps, Table, TableOfContents, type TableOfContentsLinkProps, type TableOfContentsListProps, type TableOfContentsProps, type TableProps, Tabs, type TabsButtonProps, type TabsListProps, type TabsPanelProps, type TabsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TopTaskLink, UnorderedList, type UnorderedListItemProps, type UnorderedListProps };