@arc-ui/components 13.0.0 → 13.2.0

package/lib/index.d.mts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { ReactNode, JSX, HTMLAttributes, Ref, MouseEvent as MouseEvent$1, ChangeEvent, ReactElement } from 'react';
 import { ArcGradient } from '@arc-ui/gradients';
 import { ImageProps as ImageProps$1 } from 'src/components/Image/Image';
@@ -33,8 +33,8 @@ interface AlignProps {
 /**
  * Use `Link` to direct users to a new page or piece of information.
  */
-declare const Link: ({ id, href, title, rel, target, children, onClick, screenReaderText, isButton, isImplied, size, ...props }: LinkProps$1) => JSX.Element;
-interface LinkProps$1 {
+declare const Link: ({ id, href, title, rel, target, children, onClick, screenReaderText, isButton, isImplied, size, ...props }: LinkProps) => JSX.Element;
+interface LinkProps {
     /**
      * Id attribute for `Link`.
      */
@@ -382,7 +382,7 @@ interface SemanticHeadingProps extends React__default.HTMLAttributes<HTMLHeading
  * Use `Alert` to inform the user of important changes or actions.
  */
 declare const Alert: ({ heading, headingLevel, description, links, status, isDismissable, onDismiss, icon, isMeasured, autoFocusOnMount, role, ...props }: AlertProps) => React__default.JSX.Element | null;
-type AlertLinkProps = Omit<LinkProps$1, "size" | "isImplied">;
+type AlertLinkProps = Omit<LinkProps, "size" | "isImplied">;
 interface AlertProps {
     /**
      * Determine a heading for `<Alert />`
@@ -712,13 +712,21 @@ interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" |
 }
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
-declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
+declare const TemplateBanner: ({ heading, fontStyle, label, labelLevel, text, img, contentRatio, contentRatios, children, alignment, additionalTopMargin, minHeight, minHeightM, minHeightL, minHeightXL, headingSize, isReversed, isElevated, headingLevel, headingWordWrap, type, ...props }: TemplateBannerProps) => React__default.JSX.Element;
 type TemplateBannerStyle = "light" | "dark" | "contained";
 type TemplateBannerAlignment = "top" | "bottom" | "center";
 interface TemplateBannerImage extends BannerImageProps {
     alignment?: TemplateBannerAlignment;
 }
 type ContentRatio = "2/3" | "1/1" | "1/0";
+interface contentRatiosProps {
+    xs?: ContentRatio;
+    s?: ContentRatio;
+    m?: ContentRatio;
+    l?: ContentRatio;
+    xl?: ContentRatio;
+    xxl?: ContentRatio;
+}
 interface TemplateBannerProps {
     /**
      * Align content for TemplateBanner
@@ -787,6 +795,10 @@ interface TemplateBannerProps {
      * Defines the ratio of the content area within the banner layout.
      */
     contentRatio?: ContentRatio;
+    /**
+     * Sets the ratio of the content area within the banner layout at each breakpoint (xs, s, m, l, xl, xxl). inherits from smaller breakpoints
+     */
+    contentRatios?: contentRatiosProps;
     /**
      * Add Additional top margin to banner
      */
@@ -810,7 +822,7 @@ interface TemplateBannerProps {
 }
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
-declare const Banner: ({ heading, label, text, img, contentRatio, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
+declare const Banner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, type, alignment, headingWordWrap, ...props }: BannerProps) => React__default.JSX.Element;
 type BannerProps = Omit<TemplateBannerProps, "headingSize" | "additionalTopMargin">;
 
 type SurfaceBackground = "light" | "dark";
@@ -942,8 +954,8 @@ interface BreadcrumbsProps {
     isLight?: boolean;
 }
 
-declare const BreadcrumbsItem: ({ spacerIconAfter, spacerIconBefore, children, }: ItemProps$1) => React__default.JSX.Element;
-interface ItemProps$1 {
+declare const BreadcrumbsItem: ({ spacerIconAfter, spacerIconBefore, children, }: BreadcrumbsItemProps) => React__default.JSX.Element;
+interface BreadcrumbsItemProps {
     /**
      * Render child elements within `BreadcrumbsItem`
      */
@@ -958,8 +970,8 @@ interface ItemProps$1 {
     spacerIconBefore?: boolean;
 }
 
-declare const BreadcrumbsLink: ({ onClick, href, isActive, children, ref, ...props }: LinkProps) => React__default.JSX.Element;
-interface LinkProps {
+declare const BreadcrumbsLink: ({ onClick, href, isActive, children, ref, ...props }: BreadcrumbsLinkProps) => React__default.JSX.Element;
+interface BreadcrumbsLinkProps {
     /**
      * Ref to the underlying anchor element.
      */
@@ -1302,12 +1314,16 @@ interface SlideConfig {
 
 type Responsive = Partial<Record<BreakPoints, SlideConfig>>;
 
-declare const Carousel: ({ children, responsive, itemsToScroll, itemsPerSlide, withGutter, loop, isPartialVisible, autoplay, isPlaying, fade, }: CarouselProps) => React__default.JSX.Element;
+declare const Carousel: ({ children, responsive, itemsToScroll, itemsPerSlide, controlsPosition, behavior, overflow, withGutter, loop, isPartialVisible, autoplay, isPlaying, fade, }: CarouselProps) => React__default.JSX.Element;
 interface CarouselProps {
     /**
      * Items for the carousel.
      */
     children: ReactNode;
+    /**
+     * Position of the left and right arrows
+     */
+    controlsPosition?: "bottom" | "middle";
     /**
      * Adds a gap between the slides.
      */
@@ -1369,6 +1385,14 @@ interface CarouselProps {
      * Enable fade transition between slides.
      */
     fade?: boolean;
+    /**
+     * Carousel behavior mode. "default" uses itemsPerSlide to control visible cards. "adaptive" maintains fixed card widths and shows more cards as screen size increases, ignoring itemsPerSlide and isPartialVisible.
+     */
+    behavior?: "default" | "adaptive";
+    /**
+     * Controls the overflow behavior of the carousel container. "hidden" clips content outside the viewport, "visible" allows content to overflow.
+     */
+    overflow?: "hidden" | "visible";
 }
 
 /**
@@ -1601,6 +1625,8 @@ interface ColumnsProps extends ExtentableContainer {
     isGutterless?: boolean;
 }
 
+type ArcIcon = string;
+
 type RequirementStatus = "required" | "optional" | "not-applicable";
 declare const Context: React__default.Context<{
     requirementStatus: RequirementStatus | null;
@@ -1687,57 +1713,113 @@ interface FormControlProps {
     isErrorAlert?: boolean;
 }
 
-/** Use `ComboBox` to provide a searchable dropdown list that allows users to select from or filter through multiple options. */
-declare const ComboBox: ({ ref, name, onBlur, onFocus, label, helper, id, options: initialOptions, hideLabel, isFluid, errorMessage, disclosureTitle, disclosureText, onClickDisclosure, listBoxAriaLabel, defaultValue, labelSize, isMultiSelectable, isDisabled, isRequired, isAutocomplete, ...props }: ComboBoxProps) => React__default.JSX.Element;
-interface ComboBoxProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition"> {
+type FocusHandler = (e: React.FocusEvent<HTMLInputElement, Element>) => void;
+
+type InputSize = "s" | "m" | "l";
+
+/** 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;
+interface ComboBoxProps extends Omit<FormControlProps, "children" | "elementType" | "htmlFor" | "requirementStatus" | "helperUnderLabel" | "supplementaryInfo" | "labelPosition" | "labelSize"> {
     /**
      * Ref to the underlying input element.
      */
     ref?: Ref<HTMLInputElement>;
     /**
-     * Accessible label for the listbox.
+     * Aria label for the results list.
      */
     listBoxAriaLabel: string;
     /**
-     * Array of options to display in the dropdown.
+     * Size of the `ComboBox` input.
+     */
+    size?: InputSize;
+    /**
+     * Options for the `ComboBox`.
      */
     options: string[];
     /**
-     * Name attribute for the input.
+     * Icon to appear before the input of the `ComboBox`.
+     */
+    prefixIcon?: ArcIcon;
+    /**
+     * Input name for the `ComboBox`.
      */
     name?: string;
     /**
-     * Whether the field is required.
+     * Makes the `ComboBox` a required field.
      */
     isRequired?: boolean;
     /**
-     * Default value for the input.
+     * Default value for the `ComboBox`.
      */
     defaultValue?: string;
     /**
-     * Blur event handler.
+     * Default selected values for the `ComboBox`. Only applied if `isMultiSelectable` is true.
      */
-    onBlur?: (e: React__default.FocusEvent<HTMLInputElement, Element>) => void;
+    defaultSelectedValues?: string[];
     /**
-     * Focus event handler.
+     * Blur event handler for the `ComboBox`.
      */
-    onFocus?: (e: React__default.FocusEvent<HTMLInputElement, Element>) => void;
+    onBlur?: FocusHandler;
+    /**
+     * Focus event handler for the `ComboBox`.
+     */
+    onFocus?: FocusHandler;
+    /**
+     * Callback function used to update the `ComboBox`
+     * value, for example `e => setValue(e.target.value)`.
+     */
+    onChange?: (selectedValue: string | string[] | null) => void;
     /**
-     * Whether multiple options can be selected.
+     * Allows multiple items to be selected if true.
      */
     isMultiSelectable?: boolean;
     /**
-     * Whether the combobox has autocomplete functionality.
+     * Allows a limit to the number of options you can select on multi select.
+     * If the limit is reached, no more selections will be permitted.
+     */
+    multiSelectLimit?: number;
+    /**
+     * Filters results when typing if true.
      */
     isAutocomplete?: boolean;
     /**
-     * Whether the input is read-only.
+     * Makes the `ComboBox` readonly.
      */
     isReadOnly?: boolean;
     /**
-     * Whether the combobox should fill its container width.
+     * Current value of the TextInput.
+     */
+    value?: string;
+    /**
+     * Sets the `ComboBox` to 100% width.
      */
     isFluid?: boolean;
+    /**
+     * Allows the user to enter a custom value in the `ComboBox` that isn't one of the provided options.
+     */
+    isCustomEntryAllowed?: boolean;
+    /**
+     * Allows a limit to the number of tags visible on multi select.
+     * When the limit is reached, a link to reveal the hidden tags will show.
+     * If ommitted there is no limit.
+     */
+    visibleTagCount?: number;
+    /**
+     * Supporting copy for when no results show.
+     */
+    noResultsSupportingCopy?: string;
+    /**
+     * Supporting copy for the custom option on multi select.
+     */
+    customOptionSupportingCopy?: string;
+    /**
+     * Enables a button that clears the input to show when it has a value.
+     */
+    isClearButtonEnabled?: boolean;
+    /**
+     * Text for the clear input button and tooltip. This is also used for screen readers.
+     */
+    clearButtonTooltip?: string;
 }
 
 /** Use `ContentSwitcher` to allow users to navigate between different sections of relevant content. */
@@ -1919,71 +2001,6 @@ 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";
 
-/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
-declare const Tooltip: ({ children, side, sideOffset, align, alignContent, title, supportingCopy, icon, ariaLabel, maxWidth, delayDuration, open, onOpenChange, asChild, zIndex, ...props }: TooltipProps) => React__default.JSX.Element;
-interface TooltipProps {
-    /**
-     * Content to render within Tooltip
-     */
-    children?: React__default.ReactNode;
-    /**
-     * The preferred side of the anchor to render against when open
-     */
-    side?: "left" | "right" | "bottom" | "top";
-    /**
-     * The distance in pixels from the anchor
-     */
-    sideOffset?: 8 | 16 | 32;
-    /**
-     * The preferred alignment against the anchor. May change when collisions occur.
-     */
-    align?: "start" | "center" | "end";
-    /**
-     * Alignment for content within the tooltip
-     */
-    alignContent?: "start" | "center" | "end";
-    /**
-     * Aria label for accessibility
-     */
-    ariaLabel?: string;
-    /**
-     * The main title text displayed within the tooltip.
-     */
-    title: string;
-    /**
-     * Additional supporting text displayed below the title, if provided.
-     */
-    supportingCopy?: string;
-    /**
-     * Icon displayed next to the tooltip title or content.
-     */
-    icon?: string;
-    /**
-     * Delay in milliseconds before the tooltip appears.
-     */
-    delayDuration?: number;
-    /**
-     * Maximum width for the tooltip container.
-     */
-    maxWidth?: string;
-    /**
-     * The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
-     */
-    open?: boolean;
-    /**
-     * Event handler called when the open state of the tooltip changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
-     */
-    zIndex?: number;
-    /**
-     * Set to true if you want to use your own link or button for the trigger. If false it will wrap the children in a button.
-     */
-    asChild?: boolean;
-}
-
 type EventType$4 = React__default.ChangeEvent<HTMLInputElement>;
 /**
  * Use `TextInput` to allow users to enter short form text.
@@ -2231,7 +2248,7 @@ interface DisclosureMiniProps {
     size?: "s" | "l";
 }
 
-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", "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;
@@ -2694,8 +2711,8 @@ interface GroupProps extends ExtentableContainer {
     noWrap?: boolean;
 }
 
-declare const GroupItem: ({ children, grow, isDebugVisible, ...props }: ItemProps) => React__default.JSX.Element;
-interface ItemProps {
+declare const GroupItem: ({ children, grow, isDebugVisible, ...props }: GroupItemProps) => React__default.JSX.Element;
+interface GroupItemProps {
     /**
      * Content to display in the GroupItem.
      */
@@ -2712,7 +2729,7 @@ interface ItemProps {
 }
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
-declare const HeroBanner: ({ heading, label, text, img, contentRatio, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
+declare const HeroBanner: ({ heading, label, text, img, contentRatio, contentRatios, children, minHeight, isReversed, isElevated, headingLevel, extendBeyondContainer, type, fontStyle, headingWordWrap, ...props }: HeroBannerProps) => React__default.JSX.Element;
 interface HeroBannerProps extends Omit<TemplateBannerProps, "headingSize" | "alignment" | "additionalTopMargin"> {
     /**
      * Extend HeroBanner 56px beyond its container on both sides at larger breakpoints (e.g., 1440px and above).
@@ -2907,8 +2924,9 @@ interface IconProps {
 type CardHeadingSize = Extract<HeadingSize, "m" | "l">;
 
 /** Use `ImpactCard` for important content that needs additional hierarchy and prominence.  */
-declare const ImpactCard: ({ url, onClick, heading, img, label, minHeight, headingSize, headingWordWrap, linkData, pathway, headingLevel, buttonIcon, labelLevel, ...props }: ImpactCardProps) => React__default.JSX.Element;
+declare const ImpactCard: ({ url, onClick, heading, img, label, minHeight, headingSize, headingWordWrap, linkData, pathway, headingLevel, buttonIcon, labelLevel, preserveAspectRatios, ...props }: ImpactCardProps) => React__default.JSX.Element;
 type ImpactCardPathway = "light" | "dark";
+type AspectRatios$3 = "3-4" | "10-16";
 interface ImpactCardProps {
     /**
      * Heading for the ImpactCard.
@@ -2965,10 +2983,22 @@ interface ImpactCardProps {
      * Heading level for the ImpactCard lebel.
      */
     labelLevel?: HeadingLevel;
+    /**
+     * Preserve aspect ratio of the ImpactCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
+     */
+    preserveAspectRatios?: {
+        xs?: AspectRatios$3;
+        s?: AspectRatios$3;
+        m?: AspectRatios$3;
+        l?: AspectRatios$3;
+        xl?: AspectRatios$3;
+        xxl?: AspectRatios$3;
+        xxxl?: AspectRatios$3;
+    };
 }
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
-declare const InformationCard: ({ cardUrl, onClick, heading, text, label, footerLogo, button, image, badges, icon, minHeight, minHeights, headingLevel, labelLevel, headingWordWrap, ...props }: InformationCardProps) => React__default.JSX.Element;
+declare const InformationCard: ({ cardUrl, onClick, heading, text, label, footerLogo, button, image, badges, icon, minHeight, minHeights, headingLevel, labelLevel, preserveAspectRatios, headingWordWrap, ...props }: InformationCardProps) => React__default.JSX.Element;
 type InformationCardImage = Pick<ImageProps, "alt" | "loading" | "width" | "height" | "src" | "fadeOnLoad" | "fetchPriority">;
 type InformationCardButtonProps = Pick<ButtonV2Props, "label" | "onClick" | "href">;
 interface minHeightsProps {
@@ -2980,6 +3010,7 @@ interface minHeightsProps {
     xxl?: number;
     xxxl?: number;
 }
+type AspectRatios$2 = "3-4" | "10-16";
 interface InformationCardProps {
     /**
      * Heading for the InformationCard.
@@ -2990,7 +3021,7 @@ interface InformationCardProps {
      */
     headingLevel?: HeadingLevel;
     /**
-     * Text content for the InformationCard
+     * Text content for the InformationCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
      */
     text?: string;
     /**
@@ -3043,6 +3074,18 @@ interface InformationCardProps {
      * Whether long words in heading should be wrapped.
      */
     headingWordWrap?: boolean;
+    /**
+     * Preserve aspect ratio of the InformationCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
+     */
+    preserveAspectRatios?: {
+        xs?: AspectRatios$2;
+        s?: AspectRatios$2;
+        m?: AspectRatios$2;
+        l?: AspectRatios$2;
+        xl?: AspectRatios$2;
+        xxl?: AspectRatios$2;
+        xxxl?: AspectRatios$2;
+    };
 }
 
 /**
@@ -3071,7 +3114,8 @@ interface MediaCardVideo extends Partial<Omit<VideoPlayerProps$1, "url" | "title
 /**
  * Use `MediaCard` to contain content and an image about a single subject.
  */
-declare const MediaCard: ({ media, url, onClick, heading, label, labelLevel, text, metaText, minHeight, buttonIcon, isContained, headingLevel, headingWordWrap, ...props }: MediaCardProps) => React__default.JSX.Element;
+declare const MediaCard: ({ media, url, onClick, heading, label, labelLevel, text, metaText, minHeight, buttonIcon, isContained, headingLevel, headingWordWrap, preserveAspectRatios, ...props }: MediaCardProps) => React__default.JSX.Element;
+type AspectRatios$1 = "3-4" | "10-16";
 interface MediaCardProps {
     /**
      * Heading for the MediaCard.
@@ -3082,7 +3126,7 @@ interface MediaCardProps {
      */
     headingLevel?: HeadingLevel;
     /**
-     * Text content for the MediaCard
+     * Text content for the MediaCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
      */
     text?: string;
     /**
@@ -3125,6 +3169,18 @@ interface MediaCardProps {
      * Whether long words in heading should be wrapped.
      */
     headingWordWrap?: boolean;
+    /**
+     * Preserve aspect ratio of the MediaCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
+     */
+    preserveAspectRatios?: {
+        xs?: AspectRatios$1;
+        s?: AspectRatios$1;
+        m?: AspectRatios$1;
+        l?: AspectRatios$1;
+        xl?: AspectRatios$1;
+        xxl?: AspectRatios$1;
+        xxxl?: AspectRatios$1;
+    };
 }
 
 /**
@@ -3652,7 +3708,7 @@ interface PaginationSimpleProps {
 /**
  * Use `Popover` to display content in a portal, triggered by a button.
  */
-declare const Popover: ({ align, ariaLabel, alignOffset, arrow, background, children, content, asChild, maxWidth, minHeight, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onOpenAutoFocus, onPointerDownOutside, onOpenChange, open, constrainToViewport, side, sideOffset, zIndex, hideWhenDetached, useBespokeTrigger, isFluidToViewport, contentMargin, isFullBleed, ...props }: PopoverProps) => React__default.JSX.Element;
+declare const Popover: ({ align, ariaLabel, alignOffset, arrow, background, children, content, asChild, maxWidth, minHeight, onCloseAutoFocus, onEscapeKeyDown, onFocusOutside, onInteractOutside, onOpenAutoFocus, onPointerDownOutside, onOpenChange, open, constrainToViewport, side, sideOffset, zIndex, hideWhenDetached, useBespokeTrigger, isFluidToViewport, contentMargin, isFullBleed, className, ...props }: PopoverProps) => React__default.JSX.Element;
 interface PopoverProps {
     /**
      * Content to render within Popover Trigger
@@ -3764,6 +3820,10 @@ interface PopoverProps {
      * Removes all default padding from the content section of the Popover.
      */
     isFullBleed?: boolean;
+    /**
+     * Used to add animations to the `RadixPopover.Content` .
+     */
+    className?: string;
 }
 
 /**
@@ -4020,7 +4080,7 @@ interface ProgressStepperOverflowProps extends Omit<ProgressStepperProps, "isFlu
 }
 
 declare const useProgressStepperOverflow: ({ onLoadStep, increment, offsetLeft, }?: UseProgressStepperOverflowParams) => {
-    stepperRef: React.RefObject<HTMLOListElement | null>;
+    stepperRef: React$1.RefObject<HTMLOListElement | null>;
     onNextStep: () => void;
     onPreviousStep: () => void;
     onViewScroll: (direction: boolean) => void;
@@ -4229,7 +4289,7 @@ interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementTy
     /**
      * Value of the RadioButton that should be checked by default.
      */
-    checkedValue: string;
+    checkedValue?: string;
     /**
      * Should all controls be disabled?
      */
@@ -4278,7 +4338,7 @@ type ContextProps = {
     blurEvent: (event: EventType) => void;
     changeEvent: (event: EventType) => void;
     groupDisabled: boolean;
-    checkedValue: string;
+    checkedValue?: string;
     name: string;
     size: "s" | "l";
 };
@@ -4407,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.
  */
@@ -4600,8 +4676,8 @@ interface SiteFooterProps {
 /**
  * Use `SiteFooterV2` to display information at the bottom of a page.
  */
-declare const SiteFooterV2: ({ children, slogan, hideTopBorder, ...props }: SiteFooterV2Props) => React__default.JSX.Element;
-interface SiteFooterV2Props {
+declare const SiteFooterV2: ({ children, slogan, hideTopBorder, isExtended, ...props }: SiteFooterV2Props) => React__default.JSX.Element;
+interface SiteFooterV2Props extends ExtentableContainer {
     /**
      * Content of the SiteFooterV2. Must include SiteFooterV2Utility component and optional SiteFooterV2Main.
      */
@@ -5003,6 +5079,54 @@ interface SkipLinkItemProps {
     onClick?: (e: React__default.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 }
 
+type SpacingType = "padding" | "margin";
+type SpacingSize = "4" | "8" | "12" | "16" | "20" | "24" | "28" | "32" | "40" | "48" | "64" | "96" | "128";
+type ResponsiveSpacing = Partial<Record<ArcBreakpointSizes, SpacingSize>>;
+
+/**
+ * Use `Spacing` to apply responsive padding or margin to its children.
+ * Supports all axes (top, right, bottom, left) with breakpoint-specific values.
+ */
+declare const Spacing: React__default.FC<SpacingProps>;
+interface SpacingProps {
+    /**
+     * The content to apply spacing to
+     */
+    children: React__default.ReactNode;
+    /**
+     * Whether to apply padding or margin
+     */
+    type?: SpacingType;
+    /**
+     * Spacing for the top edge
+     */
+    top?: ResponsiveSpacing;
+    /**
+     * Spacing for the right edge
+     */
+    right?: ResponsiveSpacing;
+    /**
+     * Spacing for the bottom edge
+     */
+    bottom?: ResponsiveSpacing;
+    /**
+     * Spacing for the left edge
+     */
+    left?: ResponsiveSpacing;
+    /**
+     * Spacing for both left and right edges
+     */
+    x?: ResponsiveSpacing;
+    /**
+     * Spacing for both top and bottom edges
+     */
+    y?: ResponsiveSpacing;
+    /**
+     * Spacing for all edges
+     */
+    all?: ResponsiveSpacing;
+}
+
 /**
  * Use `Spinner` to display a loading state.
  */
@@ -5130,8 +5254,12 @@ interface TabsProps {
     activationMode?: "automatic" | "manual";
 }
 
-declare const TabsItem: ({ label, value, icon, iconActive, ...props }: TabsItemProps) => React__default.JSX.Element;
+declare const TabsItem: ({ label, value, icon, iconActive, ref, onClick, onFocus, ...props }: TabsItemProps) => React__default.JSX.Element;
 interface TabsItemProps {
+    /**
+     * Ref to the underlying button element.
+     */
+    ref?: Ref<HTMLButtonElement>;
     /**
      * Label to display on the Tab
      */
@@ -5148,6 +5276,14 @@ interface TabsItemProps {
      * Determine what to display when `Tab` is active
      */
     iconActive?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Focus handler
+     */
+    onFocus?: () => void;
 }
 
 declare const TabsContent: ({ children, value, hidden, forceMount, ...props }: TabsContentProps) => React__default.JSX.Element;
@@ -5350,6 +5486,71 @@ interface TextAreaProps extends Omit<FormControlProps, "children" | "elementType
     maxHeight?: string;
 }
 
+/** Use `Tooltip` to display information related to an element when the element receives keyboard focus or the mouse hovers over it */
+declare const Tooltip: ({ children, side, sideOffset, align, alignContent, title, supportingCopy, icon, ariaLabel, maxWidth, delayDuration, open, onOpenChange, asChild, zIndex, ...props }: TooltipProps) => React__default.JSX.Element;
+interface TooltipProps {
+    /**
+     * Content to render within Tooltip
+     */
+    children?: React__default.ReactNode;
+    /**
+     * The preferred side of the anchor to render against when open
+     */
+    side?: "left" | "right" | "bottom" | "top";
+    /**
+     * The distance in pixels from the anchor
+     */
+    sideOffset?: 8 | 16 | 32;
+    /**
+     * The preferred alignment against the anchor. May change when collisions occur.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Alignment for content within the tooltip
+     */
+    alignContent?: "start" | "center" | "end";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * The main title text displayed within the tooltip.
+     */
+    title: string;
+    /**
+     * Additional supporting text displayed below the title, if provided.
+     */
+    supportingCopy?: string;
+    /**
+     * Icon displayed next to the tooltip title or content.
+     */
+    icon?: string;
+    /**
+     * Delay in milliseconds before the tooltip appears.
+     */
+    delayDuration?: number;
+    /**
+     * Maximum width for the tooltip container.
+     */
+    maxWidth?: string;
+    /**
+     * The controlled open state of the tooltip. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the open state of the tooltip changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Z-index for the `Tooltip`. Used to fine tune the overlapping of other page elements.
+     */
+    zIndex?: number;
+    /**
+     * Set to true if you want to use your own link or button for the trigger. If false it will wrap the children in a button.
+     */
+    asChild?: boolean;
+}
+
 declare const InputIcon: ({ isButton, isReadOnly, isDisabled, size, tooltip, themeIcon, icon, }: InputIconProps) => React__default.JSX.Element;
 interface InputIconProps {
     /**
@@ -5360,6 +5561,7 @@ interface InputIconProps {
         onFocus?: React__default.FocusEventHandler<HTMLButtonElement>;
         onClick: () => void;
         label: string;
+        onKeyDown?: (e: React__default.KeyboardEvent<HTMLButtonElement>) => void;
     };
     /**
      * Pass in TextInput isReadOnly state.
@@ -5509,8 +5711,9 @@ interface TruncateProps {
 }
 
 /** Use `TypographyCard` for content that benefits from larger and energetic typography. */
-declare const TypographyCard: ({ url, onClick, heading, metaText, label, minHeight, headingSize, linkData, pathway, buttonIcon, headingLevel, labelLevel, headingWordWrap, ...props }: TypographyCardProps) => React__default.JSX.Element;
+declare const TypographyCard: ({ url, onClick, heading, metaText, label, text, minHeight, headingSize, linkData, pathway, buttonIcon, headingLevel, labelLevel, headingWordWrap, preserveAspectRatios, ...props }: TypographyCardProps) => React__default.JSX.Element;
 type TypographyCardPathway = "light" | "dark";
+type AspectRatios = "3-4" | "10-16";
 interface TypographyCardProps {
     /**
      * Heading for the TypographyCard.
@@ -5524,6 +5727,10 @@ interface TypographyCardProps {
      * Url for the TypographyCard.
      */
     url: string;
+    /**
+     * Text content for the TypographyCard. Use \n to create multiple paragraphs, up to 3 paragraphs.
+     */
+    text?: string;
     /**
      * Sets a dark or light background for the TypographyCard.
      */
@@ -5567,12 +5774,24 @@ interface TypographyCardProps {
      * Whether long words in heading should be wrapped.
      */
     headingWordWrap?: boolean;
+    /**
+     * Preserve aspect ratio of the TypographyCard. Set minHeight depending on Card width. Overwrites minHeight prop value.
+     */
+    preserveAspectRatios?: {
+        xs?: AspectRatios;
+        s?: AspectRatios;
+        m?: AspectRatios;
+        l?: AspectRatios;
+        xl?: AspectRatios;
+        xxl?: AspectRatios;
+        xxxl?: AspectRatios;
+    };
 }
 
 /**
  * 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 {
     /**
@@ -5588,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.
      */
@@ -5705,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 {
     /**
@@ -5749,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";
 
-interface NavigationHeaderInlineActionProps {
+type ContainerBackgroundColor = "light" | "lightElevated" | "neutral" | "ghostedOnDark" | "ghostedOnLight" | "transparentOnDark" | "transparentOnLight";
+
+type NavBarBackground = Exclude<ContainerBackgroundColor, "neutral">;
+
+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.
      */
@@ -5864,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.
      */
@@ -5876,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.
      */
@@ -5886,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;
 }
@@ -5966,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, 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, type FilterControlProps, 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, InputIcon, type InputIconProps, 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 ProgressStepperOverflowProps, 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, 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 };