@arc-ui/components 12.0.0-beta.23 → 12.0.0-beta.24

package/lib/index.d.cts

@@ -1,4 +1,5 @@
 import React, { FC, ReactNode, HTMLAttributes, MouseEvent as MouseEvent$1, ChangeEvent, ReactElement } from 'react';
+import { ArcGradient } from '@arc-ui/gradients';
 import { ImageProps as ImageProps$1 } from 'src/components/Image/Image';
 import { VideoPlayerProps as VideoPlayerProps$1 } from 'src/components/VideoPlayer';
 import { SwitchProps as SwitchProps$1 } from '@radix-ui/react-switch';
@@ -79,56 +80,11 @@ interface LinkProps$1 {
     children: string;
 }
 
-/**
- * Use `Heading` to display heading text.
- */
-declare const Heading: FC<HeadingProps>;
-type HeadingCasing = "auto" | "none";
-type HeadingColor = "auto" | "brand";
-type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
-type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-interface HeadingProps {
-    /**
-     * Text alignment of the Heading.
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * Typographic casing of the Heading.
-     */
-    casing?: HeadingCasing;
-    /**
-     * Text and inline markup to display in the Heading.
-     */
-    children: ReactNode;
-    /**
-     * The color of the Heading.
-     */
-    color?: HeadingColor;
-    /**
-     * Id for the Heading.
-     */
-    id?: string;
-    /**
-     * HTML section heading level. If not provided, the Heading will render as
-     * a span.
-     */
-    level?: HeadingLevel;
-    /**
-     * Typographic size of the Heading.
-     */
-    size?: HeadingSize;
-    /**
-     * Whether the Heading is displayed inline.
-     */
-    isInline?: boolean;
-    /**
-     * Determine if the heading should change size depending on the breakpoint. Default is `true`
-     */
-    isResponsive?: boolean;
-    /**
-     * Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
-     */
-    fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended" | "overline";
+declare const SemanticHeading: React.FC<SemanticHeadingProps>;
+type SemanticHeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+interface SemanticHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    level?: SemanticHeadingLevel;
+    children: React.ReactNode;
 }
 
 /** Use `Alert` to inform the user of important changes or actions. */
@@ -142,7 +98,7 @@ interface AlertProps {
     /**
      * Determine a level for the heading`
      */
-    headingLevel: HeadingLevel;
+    headingLevel: SemanticHeadingLevel;
     /**
      * Determine a description for `<Alert />`
      */
@@ -175,6 +131,10 @@ interface AlertProps {
      * Focus will be set on the alert when the component mounts, defaults to false.
      */
     autoFocusOnMount?: boolean;
+    /**
+     * Optional alternative role to allow the alert to not be read out by screen readers.
+     */
+    role?: "alert" | "presentation";
 }
 type AlertStatus = "general" | "error" | "warning" | "success";
 
@@ -223,7 +183,7 @@ interface ImageSourceProps {
 declare const fitOptions: readonly ["cover"];
 declare const loadingOptions: readonly ["eager", "lazy"];
 declare const overlayOptions: readonly ["scrimBottomDark"];
-interface ImageProps extends HTMLAttributes<HTMLElement> {
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
      * Alternative text for the Image, shown if the image cannot be displayed.
      */
@@ -254,6 +214,10 @@ interface ImageProps extends HTMLAttributes<HTMLElement> {
      * If true the image will fade in when its loaded, resulting in a smooth user experience.
      */
     fadeOnLoad?: boolean;
+    /**
+     * set how the browser should prioritize fetching a particular image relative to other images.
+     */
+    fetchPriority?: "low" | "high" | "auto";
     /**
      * Loading behaviour of the Image.
      */
@@ -333,7 +297,63 @@ interface BadgeProps {
     ariaRole?: "status" | "alert";
 }
 
-interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad" | "fit" | "anchor"> {
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps>;
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = SemanticHeadingLevel;
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * Id for the Heading.
+     */
+    id?: string;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+    /**
+     * Whether the Heading is displayed inline.
+     */
+    isInline?: boolean;
+    /**
+     * Whether long words should be wrapped.
+     */
+    isWordWrap?: boolean;
+    /**
+     * Determine if the heading should change size depending on the breakpoint. Default is `true`
+     */
+    isResponsive?: boolean;
+    /**
+     * Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
+     */
+    fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended" | "overline";
+}
+
+interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad" | "fit" | "anchor" | "fetchPriority"> {
     ariaHidden?: boolean;
     sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
 }
@@ -390,13 +410,13 @@ interface TemplateBannerProps {
      */
     children?: React.ReactNode;
     /**
-     * Heading level for the ImpactCard heading.
+     * Heading level for the Banner heading.
      */
     headingLevel?: HeadingLevel;
     /**
-     * Heading size for the ImpactCard heading.
+     * Heading size for the Banner heading.
      */
-    headingSize?: Extract<HeadingSize, "m" | "xl">;
+    headingSize?: Extract<HeadingSize, "m" | "xl" | "xxl">;
     /**
      * Uppercase label for the TemplateBanner.
      */
@@ -425,6 +445,10 @@ interface TemplateBannerProps {
      * Add a heading level for the label.
      */
     labelLevel?: HeadingLevel;
+    /**
+     * Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
+     */
+    fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended";
 }
 
 declare const Banner: FC<BannerProps>;
@@ -779,6 +803,10 @@ interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps$1 {
      * Render icon within `ButtonV2`
      */
     icon?: string;
+    /**
+     * Render icon within `ButtonV2` when the button is active.
+     */
+    iconActive?: string;
     /**
      * Determine the style position for the icon. Default is `afterText`
      */
@@ -940,7 +968,7 @@ interface CarouselProps {
  *  Use `Checkbox` to allow users to select individual options.
  */
 declare const Checkbox: FC<CheckboxProps>;
-type CheckedProps = {
+type CheckedProps$1 = {
     /**
      * Is the input checked?
      */
@@ -954,11 +982,15 @@ type CheckedProps = {
      */
     indeterminate?: boolean;
 };
-interface CheckboxProps extends Omit<CheckedProps, "defaultChecked"> {
+interface CheckboxProps extends Omit<CheckedProps$1, "defaultChecked"> {
     /**
      * Error message for the Checkbox.
      */
     errorMessage?: string;
+    /**
+     * Show error state for checkbox, useful if used within a group of checkboxes.
+     */
+    isError?: boolean;
     /**
      * Helper text for the Checkbox, shown below the label.
      */
@@ -1008,6 +1040,69 @@ interface CheckboxProps extends Omit<CheckedProps, "defaultChecked"> {
      * Value for the Checkbox.
      */
     value?: string;
+    /**
+     * Provide the "alert" role to the errorMessage.
+     */
+    isErrorAlert?: boolean;
+}
+
+declare const CheckboxIcon: React.FC<CheckboxIconProps>;
+type CheckedProps = {
+    /**
+     * Is the input checked?
+     */
+    checked?: boolean;
+    /**
+     * The initial checked state of the Checkbox.
+     */
+    defaultChecked?: boolean;
+    /**
+     * sets the state of the Checkbox to be indeterminate
+     */
+    indeterminate?: boolean;
+};
+interface CheckboxIconProps extends Omit<CheckedProps, "defaultChecked"> {
+    /**
+     * Error state for the Checkbox.
+     */
+    error?: boolean;
+    /**
+     * ID for the element description to be announced by screenreaders in addition to the title.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * ID for the Checkbox.
+     */
+    id?: string;
+    /**
+     * `isDisabled` is a legacy property and not recommended from a UX usability best practice perspective.
+     */
+    isDisabled?: boolean;
+    /**
+     * Is the Checkbox required?
+     */
+    isRequired?: boolean;
+    /**
+     * Name for the Checkbox.
+     */
+    name?: string;
+    /**
+     * Function to call when the Checkbox loses focus.
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Callback function to update the Checkbox's controlled `checked` prop, for
+     * example `e => setChecked(e.target.checked)`.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Size of the Checkbox.
+     */
+    size?: "s" | "m";
+    /**
+     * Value for the Checkbox.
+     */
+    value?: string;
 }
 
 interface ExtentableContainer {
@@ -1018,7 +1113,7 @@ interface ExtentableContainer {
 }
 
 /**
- * Use `Columns` to compose layouts on a 12-column grid.
+ * Use `Columns` to compose layouts on a 12-column grid. Place within `Section` components to align with any sibling `Grid` components.
  */
 declare const Columns: FC<ColumnsProps>;
 declare const ColumnsCol: FC<ColumnsColProps>;
@@ -1170,6 +1265,10 @@ interface FormControlProps {
      * Use `hideLabel` to visually hide the `FormControl` label. This still allows screen readers to have access to labels. This is set to `false` by default.
      */
     hideLabel?: boolean;
+    /**
+     * Provide the "alert" role to the errorMessage.
+     */
+    isErrorAlert?: boolean;
 }
 
 declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLInputElement>>;
@@ -1223,9 +1322,13 @@ interface ContentSwitcherTabProps {
      */
     value: string;
     /**
-     * Pass a function to `ContentSwitcherTab`
+     * Pass a onClick function to `ContentSwitcherTab`
      */
     onClick?: () => void;
+    /**
+     * Pass a focus function to `ContentSwitcherTab`
+     */
+    onFocus?: () => void;
 }
 
 declare const ContentSwitcherContent: FC<ContentSwitcherContentProps>;
@@ -1355,7 +1458,7 @@ declare const DATE_FORMAT = "dd/MM/yyyy";
 
 type AutoCompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "email" | "impp" | "url" | "photo" | "organization-unit";
 
-declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "cardButton", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript"];
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
 
 declare const ThemeIcon: FC<ThemeIconProps>;
 interface ThemeIconProps {
@@ -1669,10 +1772,37 @@ interface DrawerProps {
      * Set the position of the `Drawer`
      */
     position?: "right" | "left" | "bottom";
+    /**
+     * Enable the drag handle & snapping (bottom position only).
+     */
+    draggable?: boolean;
+    /**
+     * Snap points for the bottom drawer height. Accepts numbers (px) or strings ('%','px').
+     */
+    snapPoints?: Array<number | string>;
+    /**
+     * Snap behaviour when releasing the drag:
+     * - "nearest" → snap to the closest snap point
+     * - "next"    → snap in the direction of the drag (up = next larger, down = next smaller)
+     * Defaults to "nearest".
+     */
+    snapBehaviour?: "nearest" | "next" | "none";
+    /**
+     * Allow dismissing the bottom drawer by dragging it down
+     */
+    dragDownToDismiss?: boolean;
+    /**
+     * Envoke function when drag handle is clicked
+     */
+    onDragHandleClick?: (e: React.MouseEvent) => void;
+    /**
+     * Describe the content of the Drawer
+     */
+    ariaDescription: string;
 }
 
 declare const DrawerHeader: React.FC<DrawerHeaderProps>;
-interface DrawerHeaderProps {
+interface DrawerHeaderProps extends Pick<HeadingProps, "isResponsive"> {
     /**
      * Title for the DrawerHeader
      */
@@ -1719,7 +1849,7 @@ interface ElevationProps {
     /**
      * Shadow Elevation level.
      */
-    elevationLevel?: "1" | "2";
+    level?: "1" | "2" | "3" | "4" | "5";
     /**
      * Should the Elevation be full width?
      */
@@ -1817,63 +1947,67 @@ interface FilterControlProps {
 }
 
 declare const GhostedHeroBanner: React.FC<GhostedHeroBannerProps>;
-type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel">;
+type GhostedHeroBannerProps = Pick<TemplateBannerProps, "heading" | "img" | "children" | "label" | "text" | "headingLevel" | "fontStyle">;
+
+/**
+ * Provides an object of breakpoints for responsive designs.
+ *
+ * This object contains keys representing breakpoint names (e.g., `xxl`, `xl`)
+ * and values representing the pixel widths for those breakpoints. The values are parsed
+ * from strings (e.g., "1400px") into numbers for easier usage in responsive logic.
+ *
+ * Kept in src for internal use
+ */
+type ArcBreakpointSizes = "xs" | "s" | "m" | "l" | "xl" | "xxl";
+type ArcBreakpoint = Record<ArcBreakpointSizes, number>;
+declare const ArcBreakpoints: ArcBreakpoint;
+
+type GradientBreakpointConfig<T> = Partial<Record<ArcBreakpointSizes, T>>;
+
+type ResponsiveGradient = GradientBreakpointConfig<ArcGradient>;
+
+type ScrimPosition = "top" | "bottom";
+
+type ScrimFadeSize = "l" | "m" | "s";
 
 declare const GradientPageBackground: React.FC<GradientPageBackgroundProps>;
 interface GradientPageBackgroundProps {
     /**
-     * Select the gradient type
+     * Gradient for the component. You can import these directly from the @arc-ui/gradients package, or pass your own.
+     */
+    gradient?: ArcGradient;
+    /**
+     * Specify a gradient for each arc breakpoint.
      */
-    type?: "HomepageDark1" | "HomepageDark2" | "ProductpageDark1" | "ProductpageDark2" | "HomepageLight1" | "HomepageLight2" | "HomepageLight3" | "ProductpageLight1" | "ProductpageLight2" | "FooterLight";
+    responsiveGradient?: ResponsiveGradient;
     /**
      * Select the gradient fade sizing, default heights "s" 640px, "m" 1024px and "l" 1280px
      */
-    scrimFadeSize?: "s" | "m" | "l";
+    scrimFadeSize?: ScrimFadeSize;
     /**
      * Set a custom height at each breakpoint for the gradient fade that will override the scrimFadeSize height. Larger breakpoints will inherit smaller breakpoints if no value is provided.
      */
-    scrimFadeHeights?: {
-        xs?: number;
-        s?: number;
-        m?: number;
-        l?: number;
-        xl?: number;
-        xxl?: number;
-    };
+    scrimFadeHeights?: GradientBreakpointConfig<number>;
     /**
      * Select the gradient fade positioning
      */
-    scrimFadePosition?: "top" | "bottom";
+    scrimFadePosition?: ScrimPosition;
     /**
      * Set a height at each breakpoint for the gradient to extend beyond it 100% height. Larger breakpoints will inherit smaller breakpoints if no value is provided.
      */
-    extendBackgrounds?: {
-        xs?: number;
-        s?: number;
-        m?: number;
-        l?: number;
-        xl?: number;
-        xxl?: number;
-    };
+    extendBackgrounds?: GradientBreakpointConfig<number>;
     /**
      * Content to be displayed on top of the gradient
      */
     children: React.ReactNode;
     /**
-     * Add customGradients svgs for each desired breakpoint. Larger breakpoints will inherit smaller breakpoints if no svg is provided. Ensure preserveAspectRatio="none" and the svg has no height or width defined. Name must include light or dark for surface context.
+     * Loading behaviour of the background gradient image.
      */
-    customGradients?: {
-        xs?: string;
-        s?: string;
-        m?: string;
-        l?: string;
-        xl?: string;
-        xxl?: string;
-    };
+    loading?: "lazy" | "eager";
 }
 
 /**
- * Use `Grid` to compose layouts on a 12-column grid.
+ * Use `Grid` to compose layouts on a 12-column grid. Aligns with sibling `Section` components.
  */
 declare const Grid: React.FC<GridProps>;
 interface GridProps extends ExtentableContainer {
@@ -2088,7 +2222,7 @@ interface HorizontalCardProps {
     /**
      * Image for the HorizontalCard.
      */
-    img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fit">;
+    img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fit" | "fetchPriority">;
     /**
      * Text to show adjacent to the cta, can be either a date or text. Its recommended to pass dates as Date objects so the component can render them correctly.
      */
@@ -2180,7 +2314,7 @@ interface ImpactCardProps {
     /**
      * Image props for the ImpactCard. Consider avoiding alt if the image is for decorative purposes only.
      */
-    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad">;
+    img: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fetchPriority">;
     /**
      * Icon for the ImpactCard CTA button
      */
@@ -2193,7 +2327,7 @@ interface ImpactCardProps {
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 declare const InformationCard: FC<InformationCardProps>;
-type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad">;
+type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad" | "fetchPriority">;
 type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
 interface minHeightsProps {
     xs?: number;
@@ -2280,7 +2414,7 @@ interface MarkupProps {
     isMeasured?: boolean;
 }
 
-interface MediaCardImage extends Partial<Pick<ImageProps$1, "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad">>, Pick<ImageProps$1, "src"> {
+interface MediaCardImage extends Partial<Pick<ImageProps$1, "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad" | "fetchPriority">>, Pick<ImageProps$1, "src"> {
     type: "img";
 }
 
@@ -2292,7 +2426,6 @@ interface MediaCardVideo extends Partial<Omit<VideoPlayerProps$1, "url" | "title
  * Use `MediaCard` to contain content and an image about a single subject.
  */
 declare const MediaCard: FC<MediaCardProps>;
-type MediaCardIcon = "play" | "arrow";
 interface MediaCardProps {
     /**
      * Heading for the MediaCard.
@@ -2329,7 +2462,7 @@ interface MediaCardProps {
     /**
      * Icon for the MediaCard Cta button
      */
-    buttonIcon?: MediaCardIcon;
+    buttonIcon?: CardFooterProps["buttonIcon"];
     /**
      * Sets a minimum height for the MediaCard.
      */
@@ -2369,6 +2502,14 @@ interface MenuProps {
      * Whether the menu should behave like a modal, preventing interaction with elements outside
      */
     modal?: boolean;
+    /**
+     * Determine if the menu will act in a mobile state
+     */
+    isMobileMenu?: boolean;
+    /**
+     * Unified width applied to all MenuContent unless overridden.
+     */
+    defaultWidth?: string | number;
 }
 
 declare const MenuItemContentTemplate: React.FC<MenuItemContentTemplateProps>;
@@ -2416,7 +2557,7 @@ interface MenuItemCheckboxProps extends Pick<MenuItemContentTemplateProps, "supp
     /**
      * ID for the MenuItemCheckbox.
      */
-    id?: string;
+    id: string;
     /**
      * Prevents the menu from closing when this item is selected.
      */
@@ -2456,6 +2597,14 @@ interface MenuContentProps {
      * The side of the trigger to display the menu.
      */
     side?: "top" | "right" | "bottom" | "left";
+    /**
+     * Provide an inital title for the menu. This will then be used as a back button when the menu is 1 level deep.
+     */
+    initalTitle?: string;
+    /**
+     * Set to true if you want the menu to fill the viewport.
+     */
+    isFluidToViewport?: boolean;
 }
 
 /**
@@ -2675,7 +2824,10 @@ interface MenuItemMultiLevelContentProps {
 /**
  * Trigger element that opens a multi-level menu when selected.
  */
-declare const MenuItemMultiLevelTrigger: React.FC<MenuItemMultiLevelTriggerProps>;
+declare const MenuItemMultiLevelTrigger: React.FC<InternalProps>;
+interface InternalProps extends MenuItemMultiLevelTriggerProps {
+    pairedContent?: React.ReactNode;
+}
 interface MenuItemMultiLevelTriggerProps extends Pick<MenuItemProps, "keyCommands" | "leadingIcon" | "ariaLabel" | "supportingText"> {
     /**
      * The trigger element for opening the multi-level menu.
@@ -2919,6 +3071,15 @@ interface PopoverProps {
      * to the root child element you provide if you set `asChild` to true. If you want to opt out of this behavior set this to true.
      */
     useBespokeTrigger?: boolean;
+    /**
+     * Constrains the popover height only when it would overflow the viewport.
+     * Defaults to `fit-content`, but becomes scrollable if necessary.
+     */
+    constrainToViewport?: boolean;
+    /**
+     * Use minHeight in conjunction with constrainToViewport to keep the popover legible. Value in px.
+     */
+    minHeight?: number;
 }
 
 /**
@@ -3426,6 +3587,7 @@ interface RadioGroupButtonProps {
     radioButtonAlignment?: "top" | "center";
     changeEvent?: ContextProps["changeEvent"];
     blurEvent?: ContextProps["blurEvent"];
+    isError?: boolean;
 }
 
 /**
@@ -3462,6 +3624,10 @@ interface RadioGroupInputProps {
      * Current value (controlled).
      */
     value: string;
+    /**
+     * Show error state for RadioGroupButton.
+     */
+    isError?: boolean;
 }
 
 /**
@@ -3494,6 +3660,10 @@ interface ScrollToTopProps {
      * Button fill.
      */
     fill?: "solid" | "outlined";
+    /**
+     * Determine the color of the focus ring.
+     */
+    focusColor?: "primary" | "secondary";
 }
 
 /**
@@ -3522,7 +3692,7 @@ interface SectionProps extends ExtentableContainer {
 
 /** Use `Select` to choose from a dropdown list of options. */
 declare const Select: React.FC<SelectProps>;
-interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "id" | "helperUnderLabel" | "supplementaryInfo" | "labelSize" | "labelPosition"> {
+interface SelectProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelSize" | "labelPosition"> {
     /**
      * Name for the Select.
      */
@@ -4051,6 +4221,10 @@ interface SkipLinkItemProps {
      * The ID attribute of the target element the skip link navigates to.
      */
     id?: string;
+    /**
+     * Click handler for the skip link.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
 /**
@@ -4439,7 +4613,7 @@ interface ThumbnailSignpostProps {
     /**
      * Image properties for the ThumbnailSignpost.
      */
-    img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad">;
+    img?: Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "anchor" | "fadeOnLoad" | "fetchPriority">;
 }
 
 /** Use `Toast` to display temporary messages at the bottom of the screen. */
@@ -4453,6 +4627,10 @@ interface ToastProps {
      * Colour scheme for `Toast` - Use 'default' in almost all cases.
      */
     colorScheme?: "default" | "alternative";
+    /**
+     * Change the focus colour for dark pathways.
+     */
+    onDarkSurface?: boolean;
 }
 
 declare const ToastNotification: FC<ToastNotificationProps>;
@@ -4516,6 +4694,10 @@ interface TooltipProps {
      * Alignment for content within the tooltip
      */
     alignContent?: "start" | "center" | "end";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
     /**
      * The main title text displayed within the tooltip.
      */
@@ -4573,7 +4755,6 @@ interface TruncateProps {
 
 /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
 declare const TypographyCard: FC<TypographyCardProps>;
-type TypographyCardIcon = "play" | "arrow";
 type TypographyCardPathway = "light" | "dark";
 interface TypographyCardProps {
     /**
@@ -4595,7 +4776,7 @@ interface TypographyCardProps {
     /**
      * Icon for the TypographyCard Cta button.
      */
-    buttonIcon?: TypographyCardIcon;
+    buttonIcon?: CardFooterProps["buttonIcon"];
     /**
      * Heading level for the TypographyCard heading.
      */
@@ -4691,6 +4872,10 @@ interface VerticalSpaceProps {
      * Size of the VerticalSpace from the extra large breakpoint upwards.
      */
     sizeXL?: VerticalSpaceSize;
+    /**
+     * Size of the VerticalSpace from the xxl breakpoint upwards.
+     */
+    sizeXXL?: VerticalSpaceSize;
 }
 
 /**
@@ -4740,7 +4925,7 @@ interface NavigationHeaderContainerProps extends ExtentableContainer {
     /**
      * set the background color of the navbar.
      */
-    background?: NavBarBackground;
+    background: NavBarBackground;
     /**
      * set the nav bar to be a pill shape. It will only be visible when the background is either white or ghosted.
      */
@@ -4755,13 +4940,12 @@ interface NavigationHeaderContainerProps extends ExtentableContainer {
     children: React.ReactNode;
 }
 
-type Brand = "btRedcare" | "btWholesale" | "btMediaBroadCast" | "btGlobalFabric" | "ee" | "bt";
+type Brand = "btWholesale" | "btGlobalFabric" | "ee" | "bt";
 interface NavigationHeaderLogoProps {
     ariaLabel?: string;
     brand?: Brand;
     href?: string;
     svg?: React.ReactNode;
-    isSurfaceSensitive?: boolean;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
@@ -4772,19 +4956,6 @@ interface NavigationHeaderNavLinkProps {
     onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
-/**
- * Provides an object of breakpoints for responsive designs.
- *
- * This object contains keys representing breakpoint names (e.g., `xxl`, `xl`)
- * and values representing the pixel widths for those breakpoints. The values are parsed
- * from strings (e.g., "1400px") into numbers for easier usage in responsive logic.
- *
- * Kept in src for internal use
- */
-type ArcBreakpointSizes = "xs" | "s" | "m" | "l" | "xl" | "xxl";
-type ArcBreakpoint = Record<ArcBreakpointSizes, number>;
-declare const ArcBreakpoints: ArcBreakpoint;
-
 type CustomBreakpoint = keyof typeof ArcBreakpoints | number;
 
 type NavigationHeaderNavItemType = "subnav" | "dropdown" | "link" | "meatball";
@@ -4813,23 +4984,6 @@ interface NavigationHeaderSubNavItem extends NavigationHeaderNavItem, Navigation
 }
 type NavigationHeaderNavigationItem = NavigationHeaderNavLinkItem | NavigationHeaderDropdownItem | NavigationHeaderSubNavItem | NavigationHeaderMeatBallMenuItem;
 
-interface NavigationHeaderNavListProps {
-    /**
-     * Nav items for `<NavigationHeader />`
-     */
-    navItems: Array<NavigationHeaderNavigationItem>;
-    /**
-     * Meatball menu aria label
-     */
-    meatBallMenuAriaLabel?: string;
-    /**
-     * Meatball menu tooltip text
-     */
-    meatballMenuTooltip?: string;
-}
-
-type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "xs">, boolean>>;
-
 interface NavigationHeaderInlineActionProps {
     /**
      * Icon url for the action.
@@ -4849,8 +5003,31 @@ interface NavigationHeaderInlineActionProps {
     onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
+type BurgerMenuPathway = "invert" | "match";
+
+interface NavigationHeaderNavListProps {
+    /**
+     * Nav items for `<NavigationHeader />`
+     */
+    navItems: Array<NavigationHeaderNavigationItem>;
+    /**
+     * Meatball menu aria label
+     */
+    meatBallMenuAriaLabel?: string;
+    /**
+     * Meatball menu tooltip text
+     */
+    meatballMenuTooltip?: string;
+}
+
+type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "xs">, boolean>>;
+
 declare const NavigationHeader: React.FC<NavigationHeaderProps>;
-interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "children">, Omit<NavigationHeaderNavListProps, "navItems">, ExtentableContainer {
+interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "children" | "background">, Omit<NavigationHeaderNavListProps, "navItems">, ExtentableContainer {
+    /**
+     * set the background color of the navbar.
+     */
+    background?: Exclude<NavBarBackground, "neutral">;
     /**
      * Open content slot on the left of the nav bar.
      */
@@ -4868,7 +5045,7 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
      * When supplying your own svg the root element must be an `svg` element that is implemented as follows: it has a `viewBox` attribute, no `height`, `width` or `preserveAspectRatio` attributes. It will also need
      * fills or strokes set to `currentColor` if you want it to work on both light and dark pathways.
      */
-    logo?: Omit<NavigationHeaderLogoProps, "isSurfaceSensitive">;
+    logo?: NavigationHeaderLogoProps;
     /**
      * Additional links or buttons for the burger menu that sit below the nav items.
      */
@@ -4881,6 +5058,10 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
      * Additional content for the burger menu that sits between the logo and the nav items.
      */
     burgerMenuHeader?: React.ReactNode;
+    /**
+     * Sets the color pathway for the burger menu, by default it inverts the pathway the header is using for contrast.
+     */
+    burgerMenuPathway?: BurgerMenuPathway;
     /**
      * Configuration for the burger menu visibility. It is always visible below 636px but can also be configured to show at larger breakpoints.
      */
@@ -4893,6 +5074,7 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
      * Nav items for `<NavigationHeader />`
      */
     navItems?: Array<NavigationHeaderNavigationItem>;
+    onOpenChange?: (isOpen: boolean) => void;
 }
 
 declare const NavigationHeaderAction: React.FC<NavigationHeaderActionProps>;
@@ -4954,4 +5136,4 @@ interface NavigationHeaderPageProps {
  */
 declare const useMediaQuery: (mediaQuery: string) => boolean;
 
-export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, type Brand, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, FilterControls, FilterItem, FilterItems, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridProps, GridRow, type GridValue, Group, GroupItem, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, Link, type LinkProps$1 as LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, type MenuProps, MenuScrollable, MenuSeparator, MenuTrigger, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionProps, type NavigationHeaderNavigationItem, NavigationHeaderPage, type NavigationHeaderProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterProps, PosterVideo, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowRef, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupProps, RadioGroup, RadioGroupButton, RadioGroupInput, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackground, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsContent, TabsItem, TabsList, type TabsListProps, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, ThumbnailSignpost, type ThumbnailSignpostProps, Toast, ToastNotification, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
+export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, type Brand, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, CheckboxIcon, type CheckboxIconProps, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, FilterControls, FilterItem, FilterItems, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridProps, GridRow, type GridValue, Group, GroupItem, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, Link, type LinkProps$1 as LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, type MenuProps, MenuScrollable, MenuSeparator, MenuTrigger, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionProps, type NavigationHeaderNavigationItem, NavigationHeaderPage, type NavigationHeaderProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterProps, PosterVideo, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowRef, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupProps, RadioGroup, RadioGroupButton, RadioGroupInput, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SemanticHeading, type SemanticHeadingLevel, type SemanticHeadingProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackground, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsContent, TabsItem, TabsList, type TabsListProps, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, ThumbnailSignpost, type ThumbnailSignpostProps, Toast, ToastNotification, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };