@arc-ui/components 13.1.0 → 13.3.0

package/lib/index.d.mts

@@ -58,7 +58,7 @@ interface LinkProps {
     /**
      * Configures the size of `Link`.
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Removes underline if true.
      */
@@ -553,7 +553,7 @@ interface ImageProps extends React__default.ImgHTMLAttributes<HTMLImageElement>
 
 type AvatarImage = Pick<ImageProps, "src" | "loading" | "sizes" | "srcSet" | "width" | "height" | "alt" | "fadeOnLoad">;
 
-type AvatarSize = "s" | "m" | "l" | "xl";
+type AvatarSize = "xl" | "l" | "m" | "s";
 
 /** Use `Avatar` to visually represent a user. */
 declare const Avatar: ({ img, initials, href, title, ariaLabel, onClick, size, ...props }: AvatarProps) => React__default.JSX.Element;
@@ -651,7 +651,7 @@ declare const Heading: ({ align, casing, color, children, level, isInline, fontS
 type HeadingCasing = "auto" | "none";
 type HeadingColor = "auto" | "brand";
 type HeadingLevel = SemanticHeadingLevel;
-type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+type HeadingSize = "xxxl" | "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | "xxxs";
 interface HeadingProps {
     /**
      * Text alignment of the Heading.
@@ -1079,7 +1079,7 @@ interface ButtonProps extends ButtonElementProps, LinkElementProps$2 {
     /**
      * How should a Button icon be displayed?
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Optional supporting text for the Button.
      */
@@ -1209,7 +1209,7 @@ interface ButtonV2Props extends ButtonV2ElementProps, LinkElementProps$1 {
     /**
      * Size of `ButtonV2`
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * HTML ID for the `ButtonV2`
      */
@@ -1470,7 +1470,7 @@ interface CheckboxProps extends Omit<CheckedProps$1, "defaultChecked"> {
     /**
      * Size of the Checkbox.
      */
-    size?: "s" | "m";
+    size?: "m" | "s";
     /**
      * Value for the Checkbox.
      */
@@ -1538,7 +1538,7 @@ interface CheckboxIconProps extends Omit<CheckedProps, "defaultChecked"> {
     /**
      * Size of the Checkbox.
      */
-    size?: "s" | "m";
+    size?: "m" | "s";
     /**
      * Value for the Checkbox.
      */
@@ -1677,7 +1677,7 @@ interface FormControlProps {
     /**
      * Label size.
      */
-    labelSize?: "s" | "m" | "l";
+    labelSize?: "l" | "m" | "s";
     /**
      * Position of Label (Switch component only)
      */
@@ -1715,7 +1715,7 @@ interface FormControlProps {
 
 type FocusHandler = (e: React.FocusEvent<HTMLInputElement, Element>) => void;
 
-type InputSize = "s" | "m" | "l";
+type InputSize = "l" | "m" | "s";
 
 /** Use `ComboBox` to assist a text input with a dropdown list of options. */
 declare const ComboBox: ({ ref, name, onBlur, onFocus, label, helper, id, hideLabel, isFluid, errorMessage, disclosureTitle, disclosureText, onClickDisclosure, listBoxAriaLabel, prefixIcon, onChange, noResultsSupportingCopy, customOptionSupportingCopy, multiSelectLimit, options: initialOptions, clearButtonTooltip, defaultSelectedValues, defaultValue, size, visibleTagCount, isClearButtonEnabled, isReadOnly, isMultiSelectable, isDisabled, isRequired, isAutocomplete, isCustomEntryAllowed, ...props }: ComboBoxProps) => React__default.JSX.Element;
@@ -2101,7 +2101,7 @@ interface TextInputComponentProps extends Omit<FormControlProps, "children" | "e
     /**
      * Size of the input.
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Determine the alignment of the text within the input
      */
@@ -2245,10 +2245,10 @@ interface DisclosureMiniProps {
     /**
      * Disclosure size.
      */
-    size?: "s" | "l";
+    size?: "l" | "s";
 }
 
-declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "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", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "calendarLeft", "calendarRight", "cardRight", "cardPlay", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "comboboxTagRemove", "comboboxAutoComplete", "comboboxSelected", "comboboxNoResults", "comboboxClear", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderSideMenuBack", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderArrowRight", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "navigationHeaderBasket", "navigationHeaderSearch", "navigationHeaderUser", "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", "textInputShowPassword", "textInputHidePassword", "textInputClear", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript", "videoPlayerPlay"];
 
 /** Use `ThemeIcon` to display an icon that allows switching between theme-specific icons. */
 declare const ThemeIcon: ({ size, icon, color, ...props }: ThemeIconProps) => React__default.JSX.Element;
@@ -2336,7 +2336,7 @@ interface DrawerProps {
     /**
      * Size preset for the drawer. These can be overridden by setting custom `height` (for Bottom position) or `width` (for 'Left, 'Right'). Use 'auto' to hug the `drawer` content.
      */
-    size?: "s" | "m" | "l" | "auto";
+    size?: "l" | "m" | "s" | "auto";
     /**
      * Set Drawer open or closed.
      */
@@ -2840,7 +2840,7 @@ interface CardFooterProps {
     /**
      * Size of the button.
      */
-    buttonSize?: "s" | "m";
+    buttonSize?: "m" | "s";
     /**
      * Whether to show the button.
      */
@@ -3611,7 +3611,7 @@ interface ModalProps {
     /**
      * Size of the modal dialog.
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Set modal open or closed.
      */
@@ -4322,7 +4322,7 @@ interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementTy
     /**
      * Size of the RadioGroup
      */
-    size?: "s" | "l";
+    size?: "l" | "s";
     /**
      * Error message for the RadioGroup
      */
@@ -4340,7 +4340,7 @@ type ContextProps = {
     groupDisabled: boolean;
     checkedValue?: string;
     name: string;
-    size: "s" | "l";
+    size: "l" | "s";
 };
 
 declare const RadioGroupButton: ({ ref, id, changeEvent, isDisabled, size, labelSize, checked, defaultChecked, radioButtonAlignment, name, blurEvent, value, label, helper, hideLabel, withMargin, isError, }: RadioGroupButtonProps) => React__default.JSX.Element;
@@ -4467,6 +4467,22 @@ interface RuleProps {
     orientation?: "horizontal" | "vertical";
 }
 
+/**
+ * Use `SemanticHeading` to render accessible headings that preserve correct
+ * document hierarchy.
+ */
+declare const SemanticButton: ({ children, className, ...props }: SemanticButtonProps) => React__default.JSX.Element;
+interface SemanticButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Ref for the Button.
+     */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * Content to render within the Button.
+     */
+    children: React__default.ReactNode;
+}
+
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
@@ -4580,7 +4596,7 @@ interface SelectProps extends Omit<FormControlProps, "children" | "elementType"
     /**
      * determine the size of the select.
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Sets the Select to 100% width.
      */
@@ -5115,7 +5131,7 @@ interface SpacingProps {
  * Use `Spinner` to display a loading state.
  */
 declare const Spinner: ({ size, color, ...props }: SpinnerProps) => React__default.JSX.Element;
-type SpinnerSize = "s" | "m" | "l" | "xl" | "xxl";
+type SpinnerSize = "xxl" | "xl" | "l" | "m" | "s";
 interface SpinnerProps {
     /**
      * Colour options. If no `color` option defined, the colour will use currentColor.
@@ -5157,7 +5173,7 @@ interface SwitchProps extends Omit<FormControlProps, "children" | "elementType"
     /**
      * Size of the Switch.
      */
-    size?: "s" | "m";
+    size?: "m" | "s";
     /**
      * set the switch to be checked by default
      */
@@ -5350,7 +5366,7 @@ interface TagProps {
  */
 declare const Text: ({ align, children, id, isInline, isMeasured, size, tone, elementType, ...props }: TextProps) => React__default.JSX.Element;
 type Tone = "default" | "supporting" | "muted";
-type TextSize = "xs" | "s" | "m" | "l";
+type TextSize = "l" | "m" | "s" | "xs";
 interface TextProps {
     /**
      * Alignment of the Text.
@@ -5558,7 +5574,7 @@ interface InputIconProps {
     /**
      * Pass in TextInput size to Icon.
      */
-    size?: "s" | "m" | "l";
+    size?: "l" | "m" | "s";
     /**
      * Set a Tooltip to appear on hover.
      */
@@ -5775,7 +5791,7 @@ interface TypographyCardProps {
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
-declare const UniversalHeader: ({ children, ContentSlot, ...props }: UniversalHeaderProps) => React__default.JSX.Element;
+declare const UniversalHeader: ({ children, ContentSlot, isPill, isExtended, isFluid, ...props }: UniversalHeaderProps) => React__default.JSX.Element;
 declare const UniversalHeaderItem: ({ children, href, isActive, ...props }: UniversalHeaderItemProps) => React__default.JSX.Element;
 interface UniversalHeaderItemProps {
     /**
@@ -5791,12 +5807,20 @@ interface UniversalHeaderItemProps {
      */
     isActive?: boolean;
 }
-interface UniversalHeaderProps {
+interface UniversalHeaderProps extends ExtentableContainer {
     /**
      * Contents of the UniversalHeader Must be
      * UniversalHeaderItem components.
      */
     children: ReactNode;
+    /**
+     * Set the nav bar to be a pill shape.
+     */
+    isPill?: boolean;
+    /**
+     * Sets the UniversalHeader to be full width.
+     */
+    isFluid?: boolean;
     /**
      * A Slot to accept react node. Any content with this slot will be aligned right.
      */
@@ -5908,26 +5932,6 @@ interface VisuallyHiddenProps {
     children?: ReactNode;
 }
 
-type NavBarBackground = "light" | "lightElevated" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
-interface NavigationHeaderContainerProps extends ExtentableContainer {
-    /**
-     * set the background color of the navbar.
-     */
-    background: NavBarBackground;
-    /**
-     * set the nav bar to be a pill shape. It will only be visible when the background is either white or ghosted.
-     */
-    isPill?: boolean;
-    /**
-     * set the nav bar contents to be 100% width
-     */
-    isFluid?: boolean;
-    /**
-     * content for the navbar
-     */
-    children: ReactNode;
-}
-
 type Brand = "btWholesale" | "btGlobalFabric" | "ee" | "bt";
 interface NavigationHeaderLogoProps {
     /**
@@ -5952,100 +5956,150 @@ interface NavigationHeaderLogoProps {
     onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
-interface NavigationHeaderNavLinkProps {
-    /**
-     * Text to display in the navigation link.
-     */
+interface NavLink {
     text: string;
-    /**
-     * URL to link to when the navigation link is clicked.
-     */
     href: string;
-    /**
-     * Border radius size variant for the navigation link.
-     */
-    borderRadiusSize?: "s" | "m";
-    /**
-     * Click handler for the navigation link.
-     */
-    onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+
+interface CategoryLinkGroup {
+    category: string;
+    links?: NavLink[];
+    description?: string;
+    mainLink?: NavLink;
 }
 
 type CustomBreakpoint = keyof typeof ArcBreakpoints | number;
 
-type NavigationHeaderNavItemType = "subnav" | "dropdown" | "link" | "meatball";
-type NavLinkProps = Omit<NavigationHeaderNavLinkProps, "borderRadiusSize">;
-interface NavigationHeaderNavItem {
+interface MegaMenuFeatureCard {
+    title: string;
+    href: string;
+    description?: string;
+    isFeatured?: boolean;
+    img?: string;
+    label?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+
+interface PanelLink {
+    heading: string;
+    description: string;
+    href: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+
+interface MegaMenuTab {
+    triggerText: string;
+    icon: string;
+    items: CategoryLinkGroup[];
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    panelLink: PanelLink;
+}
+
+interface PanelHeading {
+    heading: string;
+    supportingText: string;
+    link?: {
+        ariaLabel?: string;
+        text: string;
+        href: string;
+        onClick?: () => void;
+    };
+}
+
+type NavigationHeaderNavItemType = "link" | "levelTwo" | "categoryLinks" | "megamenu";
+interface NavigationHeaderNavItemBase {
     type: NavigationHeaderNavItemType;
+    isSeparator?: boolean;
 }
-interface NavigationHeaderMenuTrigger {
+interface NavigationHeaderNavLinkItem extends NavigationHeaderNavItemBase, NavLink {
+    type: "link";
     visibleFrom?: CustomBreakpoint;
+}
+interface NavigationHeaderDropdownItem extends NavigationHeaderNavItemBase {
+    type: "levelTwo";
+    items: NavLink[];
     text: string;
+    visibleFrom?: CustomBreakpoint;
     ariaLabel?: string;
-    items: NavLinkProps[];
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-interface NavigationHeaderNavLinkItem extends NavigationHeaderNavItem, NavLinkProps {
-    type: "link";
+interface NavigationHeaderCategoryMenuNavItem extends NavigationHeaderNavItemBase {
+    type: "categoryLinks";
+    text: string;
+    panelHeading: PanelHeading;
+    backButtonLabel?: string;
+    backButtonAriaLabel?: string;
+    items: CategoryLinkGroup[];
     visibleFrom?: CustomBreakpoint;
+    ariaLabel?: string;
+    onOpenChange?: (isVisble: boolean) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-interface NavigationHeaderMeatBallMenuItem extends NavigationHeaderNavItem, NavLinkProps {
-    type: "meatball";
-}
-interface NavigationHeaderDropdownItem extends NavigationHeaderNavItem, NavigationHeaderMenuTrigger {
-    type: "dropdown";
-}
-interface NavigationHeaderSubNavItem extends NavigationHeaderNavItem, NavigationHeaderMenuTrigger {
-    type: "subnav";
+interface NavigationHeaderMegaMenuNavItem extends NavigationHeaderNavItemBase {
+    type: "megamenu";
+    text: string;
+    panelHeading: PanelHeading;
+    tabs: MegaMenuTab[];
+    visibleFrom?: CustomBreakpoint;
+    ariaLabel?: string;
+    backButtonLabel?: string;
+    backButtonAriaLabel?: string;
+    featureCards?: MegaMenuFeatureCard[];
+    onOpenChange?: (isVisble: boolean) => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
-type NavigationHeaderNavigationItem = NavigationHeaderNavLinkItem | NavigationHeaderDropdownItem | NavigationHeaderSubNavItem | NavigationHeaderMeatBallMenuItem;
+type NavigationHeaderNavigationItem = NavigationHeaderNavLinkItem | NavigationHeaderDropdownItem | NavigationHeaderMegaMenuNavItem | NavigationHeaderCategoryMenuNavItem;
+type NavigationHeaderExtraNavigationItem = Omit<NavigationHeaderNavLinkItem, "visibleFrom"> | Omit<NavigationHeaderDropdownItem, "visibleFrom"> | Omit<NavigationHeaderMegaMenuNavItem, "visibleFrom"> | Omit<NavigationHeaderCategoryMenuNavItem, "visibleFrom">;
+
+type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "xs">, boolean>>;
+
+type MenuColorPathway = "invert" | "match";
+
+type ContainerBackgroundColor = "light" | "lightElevated" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
+
+type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral">;
 
-interface NavigationHeaderInlineActionProps {
+interface SideMenuAction {
     /**
-     * Icon url for the action.
+     * Icon for the action.
      */
     icon: string;
     /**
-     * text for the action.
+     * Text label for the action.
      */
     text: string;
     /**
-     * href for the action.
+     * Display a red dot next to the action to alert users.
+     */
+    isAttention?: boolean;
+    /**
+     * URL for the action link.
      */
     href?: string;
     /**
-     * Click handlers for the action.
+     * Click handler for the action.
      */
     onClick?: (e: React__default.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
-type BurgerMenuPathway = "invert" | "match";
-
-interface NavigationHeaderNavListProps {
-    /**
-     * Nav items for `<NavigationHeader />`
-     */
-    navItems: Array<NavigationHeaderNavigationItem>;
+/**
+ *  Use `NavigationHeader` as a Top-level UI element that displays branding, page titles, and primary navigation actions.
+ */
+declare const NavigationHeader: ({ leftSlot, middleSlot, rightSlot, isPill, isExtended, isFluid, logo, navItems, extraNavItems, extraMenuTooltip, extraMenuAriaLabel, burgerMenuActions, burgerMenuFooter, burgerMenuHeader, burgerMenuVisibility, onBurgerMenuOpenChange, burgerMenuPathway, navMenuVisibility, background, }: NavigationHeaderProps) => React__default.JSX.Element;
+interface NavigationHeaderProps extends ExtentableContainer {
     /**
-     * Meatball menu aria label
+     * Set the background color of the navbar.
      */
-    meatBallMenuAriaLabel?: string;
+    background?: NavBarBackground;
     /**
-     * Meatball menu tooltip text
+     * Set the nav bar to be a pill shape. It will only be visible when the background is either white or ghosted.
      */
-    meatballMenuTooltip?: string;
-}
-
-type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "xs">, boolean>>;
-
-/**
- *  Use `NavigationHeader` as a Top-level UI element that displays branding, page titles, and primary navigation actions.
- */
-declare const NavigationHeader: ({ leftSlot, middleSlot, rightSlot, isPill, isExtended, isFluid, logo, navItems, meatballMenuTooltip, burgerMenuActions, burgerMenuFooter, burgerMenuHeader, burgerMenuVisibility, onOpenChange, burgerMenuPathway, navMenuVisibility, background, }: NavigationHeaderProps) => React__default.JSX.Element;
-interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "children" | "background">, Omit<NavigationHeaderNavListProps, "navItems">, ExtentableContainer {
+    isPill?: boolean;
     /**
-     * set the background color of the navbar.
+     * Set the nav bar contents to be 100% width.
      */
-    background?: Exclude<NavBarBackground, "neutral">;
+    isFluid?: boolean;
     /**
      * Open content slot on the left of the nav bar.
      */
@@ -6067,7 +6121,7 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
     /**
      * Additional links or buttons for the burger menu that sit below the nav items.
      */
-    burgerMenuActions?: NavigationHeaderInlineActionProps[];
+    burgerMenuActions?: SideMenuAction[];
     /**
      * Additional content for the burger menu that sits below all the other content.
      */
@@ -6079,7 +6133,7 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
     /**
      * Sets the color pathway for the burger menu, by default it inverts the pathway the header is using for contrast.
      */
-    burgerMenuPathway?: BurgerMenuPathway;
+    burgerMenuPathway?: MenuColorPathway;
     /**
      * Configuration for the burger menu visibility. It is always visible below 636px but can also be configured to show at larger breakpoints.
      */
@@ -6089,47 +6143,147 @@ interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "ch
      */
     navMenuVisibility?: ConfigurableHeaderVisibility;
     /**
-     * Nav items for `<NavigationHeader />`
+     * Nav items for `NavigationHeader`.
      */
     navItems?: Array<NavigationHeaderNavigationItem>;
     /**
-     * Callback when burger menu open state changes.
+     * extra menu items for `NavigationHeader`.
      */
-    onOpenChange?: (isOpen: boolean) => void;
+    extraNavItems?: Array<NavigationHeaderExtraNavigationItem>;
+    /**
+     * extra menu trigger aria label.
+     */
+    extraMenuAriaLabel?: string;
+    /**
+     * extra menu tooltip text.
+     */
+    extraMenuTooltip?: string;
+    /**
+     * Fires when the open state of the burger menu changes.
+     */
+    onBurgerMenuOpenChange?: (isOpen: boolean) => void;
 }
 
-declare const NavigationHeaderAction: ({ ariaLabel, icon, onClick, title, supportingCopy, isAttention, }: NavigationHeaderActionProps) => React__default.JSX.Element;
+declare const NavigationHeaderAction: ({ ariaLabel, icon, onClick, title, supportingCopy, ref, href, isAttention, }: NavigationHeaderActionProps) => React__default.JSX.Element;
 interface NavigationHeaderActionProps {
     /**
-     * Icon url for the action.
+     * Ref to the underlying button element.
      */
-    icon: string;
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * Icon URL for the action.
+     */
+    icon: string | ReactNode;
     /**
      * Display a red dot next to the action to alert users.
      */
     isAttention?: boolean;
     /**
-     * label for action that is presented to screenreader.
+     * Label for action that is presented to screenreader.
      */
     ariaLabel: string;
     /**
-     * title for action that is presented in a tooltip.
+     * Title for action that is presented in a tooltip.
      */
     title: string;
     /**
-     * supporting text for action that is presented in a tooltip.
+     * Supporting text for action that is presented in a tooltip.
      */
     supportingCopy?: string;
     /**
-     * Click handlers for the action.
+     * Href for the action.
+     */
+    href?: string;
+    /**
+     * Click handler for the action.
      */
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
+declare const NavigationHeaderSearchMenu: ({ onSubmit, quickLinks, onInputChange, submitButtonAriaLabel, panelTitle, description, accessibleMenuTitle, label, triggerTooltip, triggerAriaLabel, }: NavigationHeaderSearchMenuProps) => React__default.JSX.Element;
+interface NavigationHeaderSearchMenuProps {
+    /**
+     * Callback when input value changes.
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * Callback when search form is submitted.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * Label text for the search input.
+     */
+    label?: string;
+    /**
+     * Description text for the search menu.
+     */
+    description?: string;
+    /**
+     * Title text for the quick links panel.
+     */
+    panelTitle?: string;
+    /**
+     * Tooltip text for the trigger button.
+     */
+    triggerTooltip?: string;
+    /**
+     * Accessible label for the trigger button.
+     */
+    triggerAriaLabel?: string;
+    /**
+     * Accessible label for the submit button.
+     */
+    submitButtonAriaLabel?: string;
+    /**
+     * Accessible title for the menu dialog.
+     */
+    accessibleMenuTitle?: string;
+    /**
+     * Array of quick link items.
+     */
+    quickLinks: {
+        text: string;
+        href: string;
+        onClick?: (e: React__default.MouseEvent<HTMLAnchorElement>) => void;
+    }[];
+}
+
+declare const NavigationHeaderBasket: ({ supportingCopy, onClick, href, popoverText, title, ariaLabel, isAttention, }: NavigationHeaderBasketProps) => React__default.JSX.Element;
+interface NavigationHeaderBasketProps {
+    /**
+     * Display a red dot next to the basket to alert users.
+     */
+    isAttention?: boolean;
+    /**
+     * Text to display in the basket popover.
+     */
+    popoverText?: string;
+    /**
+     * Supporting text for the basket tooltip.
+     */
+    supportingCopy?: string;
+    /**
+     * Title text for the basket tooltip.
+     */
+    title?: string;
+    /**
+     * Accessible label for the basket.
+     */
+    ariaLabel?: string;
+    /**
+     * Click handler for the basket.
+     */
+    onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * URL for the basket link.
+     */
+    href?: string;
+}
+
 declare const NavigationHeaderActionBar: ({ children, }: NavigationHeaderActionBarProps) => React__default.JSX.Element;
 interface NavigationHeaderActionBarProps {
     /**
-     * NavigationHeaderAction components to display in the action bar.
+     * `NavigationHeaderAction` components to display in the action bar.
      */
     children: ReactNode;
 }
@@ -6169,4 +6323,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, type BreadcrumbsItemProps, BreadcrumbsLink, type BreadcrumbsLinkProps, 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, type ContentSwitcherContentProps, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherListProps, type ContentSwitcherProps, ContentSwitcherTab, type ContentSwitcherTabProps, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, type FilterControlProps, FilterControls, type FilterControlsProps, FilterItem, type FilterItemProps, FilterItems, type FilterItemsProps, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridColProps, type GridProps, GridRow, type GridRowProps, type GridValue, Group, GroupItem, type GroupItemProps, 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, InputIcon, type InputIconProps, Link, type LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, type MenuContentProps, MenuFooter, type MenuFooterProps, MenuGroup, type MenuGroupProps, MenuGroupSingleSelect, type MenuGroupSingleSelectProps, MenuHeader, type MenuHeaderProps, MenuItem, MenuItemCheckbox, type MenuItemCheckboxProps, MenuItemContentTemplate, type MenuItemContentTemplateProps, MenuItemMultiLevel, MenuItemMultiLevelContent, type MenuItemMultiLevelContentProps, type MenuItemMultiLevelProps, MenuItemMultiLevelTrigger, type MenuItemMultiLevelTriggerProps, type MenuItemProps, MenuItemSingleSelect, type MenuItemSingleSelectProps, MenuLabel, type MenuLabelProps, MenuPortal, type MenuPortalProps, type MenuProps, MenuScrollable, type MenuScrollableProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionBarProps, type NavigationHeaderActionProps, type NavigationHeaderNavigationItem, NavigationHeaderPage, type NavigationHeaderPageProps, type NavigationHeaderProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterImageProps, type PosterProps, PosterVideo, type PosterVideoProps, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowProps, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupInputProps, type RadioCardGroupProps, RadioGroup, RadioGroupButton, type RadioGroupButtonProps, RadioGroupInput, type RadioGroupInputProps, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SemanticHeading, type SemanticHeadingLevel, type SemanticHeadingProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterItemGroupProps, type SiteFooterItemProps, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, type SiteFooterV2ItemGroupProps, type SiteFooterV2ItemProps, SiteFooterV2Main, type SiteFooterV2MainProps, type SiteFooterV2Props, SiteFooterV2Utility, type SiteFooterV2UtilityProps, SiteHeaderV2, SiteHeaderV2Column, type SiteHeaderV2ColumnProps, SiteHeaderV2Item, SiteHeaderV2ItemGroup, type SiteHeaderV2ItemGroupProps, type SiteHeaderV2ItemProps, SiteHeaderV2NavItem, type SiteHeaderV2NavItemProps, SiteHeaderV2NavItemWithSubNav, type SiteHeaderV2NavItemWithSubNavProps, SiteHeaderV2NodeItem, type SiteHeaderV2NodeItemProps, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, type SiteHeaderV2SubNavItemProps, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type SkipLinkItemProps, type SkipLinkProps, Spacing, type SpacingProps, type SpacingSize, 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, type TabsContentProps, TabsItem, type TabsItemProps, 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 ToastNotificationProps, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderItemProps, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery, useProgressStepperOverflow };
+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, type BreadcrumbsItemProps, BreadcrumbsLink, type BreadcrumbsLinkProps, 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, type ContentSwitcherContentProps, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherListProps, type ContentSwitcherProps, ContentSwitcherTab, type ContentSwitcherTabProps, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, type FilterControlProps, FilterControls, type FilterControlsProps, FilterItem, type FilterItemProps, FilterItems, type FilterItemsProps, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridColProps, type GridProps, GridRow, type GridRowProps, type GridValue, Group, GroupItem, type GroupItemProps, 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, InputIcon, type InputIconProps, Link, type LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, type MenuContentProps, MenuFooter, type MenuFooterProps, MenuGroup, type MenuGroupProps, MenuGroupSingleSelect, type MenuGroupSingleSelectProps, MenuHeader, type MenuHeaderProps, MenuItem, MenuItemCheckbox, type MenuItemCheckboxProps, MenuItemContentTemplate, type MenuItemContentTemplateProps, MenuItemMultiLevel, MenuItemMultiLevelContent, type MenuItemMultiLevelContentProps, type MenuItemMultiLevelProps, MenuItemMultiLevelTrigger, type MenuItemMultiLevelTriggerProps, type MenuItemProps, MenuItemSingleSelect, type MenuItemSingleSelectProps, MenuLabel, type MenuLabelProps, MenuPortal, type MenuPortalProps, type MenuProps, MenuScrollable, type MenuScrollableProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionBarProps, type NavigationHeaderActionProps, NavigationHeaderBasket, type NavigationHeaderBasketProps, type NavigationHeaderCategoryMenuNavItem, type NavigationHeaderDropdownItem, type NavigationHeaderExtraNavigationItem, type NavigationHeaderMegaMenuNavItem, type NavigationHeaderNavLinkItem, type NavigationHeaderNavigationItem, NavigationHeaderPage, type NavigationHeaderPageProps, type NavigationHeaderProps, NavigationHeaderSearchMenu, type NavigationHeaderSearchMenuProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterImageProps, type PosterProps, PosterVideo, type PosterVideoProps, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowProps, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupInputProps, type RadioCardGroupProps, RadioGroup, RadioGroupButton, type RadioGroupButtonProps, RadioGroupInput, type RadioGroupInputProps, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SemanticButton, SemanticHeading, type SemanticHeadingLevel, type SemanticHeadingProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterItemGroupProps, type SiteFooterItemProps, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, type SiteFooterV2ItemGroupProps, type SiteFooterV2ItemProps, SiteFooterV2Main, type SiteFooterV2MainProps, type SiteFooterV2Props, SiteFooterV2Utility, type SiteFooterV2UtilityProps, SiteHeaderV2, SiteHeaderV2Column, type SiteHeaderV2ColumnProps, SiteHeaderV2Item, SiteHeaderV2ItemGroup, type SiteHeaderV2ItemGroupProps, type SiteHeaderV2ItemProps, SiteHeaderV2NavItem, type SiteHeaderV2NavItemProps, SiteHeaderV2NavItemWithSubNav, type SiteHeaderV2NavItemWithSubNavProps, SiteHeaderV2NodeItem, type SiteHeaderV2NodeItemProps, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, type SiteHeaderV2SubNavItemProps, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type SkipLinkItemProps, type SkipLinkProps, Spacing, type SpacingProps, type SpacingSize, 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, type TabsContentProps, TabsItem, type TabsItemProps, 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 ToastNotificationProps, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderItemProps, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery, useProgressStepperOverflow };