@arc-ui/components 12.0.0-beta.20 → 12.0.0-beta.22

package/lib/index.d.cts

@@ -28,25 +28,133 @@ interface AlignProps {
     vertical?: "top" | "center" | "bottom";
 }
 
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+declare const Link: React.FC<LinkProps$1>;
+interface LinkProps$1 {
+    /**
+     * Id attribute for `Link`.
+     */
+    id?: string;
+    /**
+     * href attribute for `Link`.
+     */
+    href?: string;
+    /**
+     * Screen reader text for `Link`, which is visually hidden.
+     */
+    screenReaderText?: string;
+    /**
+     * title attribute for `Link`.
+     */
+    title?: string;
+    /**
+     * Rel attribute for `Link`.
+     */
+    rel?: string;
+    /**
+     * Configures the size of `Link`.
+     */
+    size?: "s" | "m" | "l";
+    /**
+     * Removes underline if true.
+     */
+    isImplied?: boolean;
+    /**
+     * Renders as a button element if true.
+     */
+    isButton?: boolean;
+    /**
+     * Click handler for `Link`.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Target for `Link`.
+     */
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    /**
+     * Content for `Link`.
+     */
+    children: string;
+}
+
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps>;
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * Id for the Heading.
+     */
+    id?: string;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+    /**
+     * Whether the Heading is displayed inline.
+     */
+    isInline?: boolean;
+    /**
+     * Determine if the heading should change size depending on the breakpoint. Default is `true`
+     */
+    isResponsive?: boolean;
+    /**
+     * Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
+     */
+    fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended" | "overline";
+}
+
 /** Use `Alert` to inform the user of important changes or actions. */
 declare const Alert: FC<AlertProps>;
+type AlertLinkProps = Omit<LinkProps$1, "size" | "isImplied">;
 interface AlertProps {
     /**
      * Determine a heading for `<Alert />`
      */
     heading: string;
+    /**
+     * Determine a level for the heading`
+     */
+    headingLevel: HeadingLevel;
     /**
      * Determine a description for `<Alert />`
      */
     description?: string | ReactNode;
     /**
-     * Determine a link for `<Alert />`
+     * Should the description width be constrained to a typographic measure?
      */
-    link?: string;
+    isMeasured?: boolean;
     /**
-     * Determine the text to link
+     * Determine array of links for `<Alert />`. link type `LinkProps` omit `size` & `isImplied`.
      */
-    linkText?: string;
+    links?: AlertLinkProps[];
     /**
      * Determine a icon to display within `<Alert />`. This overrides the default icons.
      */
@@ -64,14 +172,9 @@ interface AlertProps {
      */
     onDismiss?: () => void;
     /**
-     * Execute a function when link is envoked. This prevents the default behaviour for `<a >` Tag
+     * Focus will be set on the alert when the component mounts, defaults to false.
      */
-    onLinkClick?: () => void;
-    /**
-     * Text to override `linkText` with additional, more precise information
-     * specifically for screen reader users.
-     */
-    linkAriaLabel?: string;
+    autoFocusOnMount?: boolean;
 }
 type AlertStatus = "general" | "error" | "warning" | "success";
 
@@ -230,58 +333,6 @@ interface BadgeProps {
     ariaRole?: "status" | "alert";
 }
 
-/**
- * Use `Heading` to display heading text.
- */
-declare const Heading: FC<HeadingProps>;
-type HeadingCasing = "auto" | "none";
-type HeadingColor = "auto" | "brand";
-type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
-type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
-interface HeadingProps {
-    /**
-     * Text alignment of the Heading.
-     */
-    align?: "left" | "center" | "right";
-    /**
-     * Typographic casing of the Heading.
-     */
-    casing?: HeadingCasing;
-    /**
-     * Text and inline markup to display in the Heading.
-     */
-    children: ReactNode;
-    /**
-     * The color of the Heading.
-     */
-    color?: HeadingColor;
-    /**
-     * Id for the Heading.
-     */
-    id?: string;
-    /**
-     * HTML section heading level. If not provided, the Heading will render as
-     * a span.
-     */
-    level?: HeadingLevel;
-    /**
-     * Typographic size of the Heading.
-     */
-    size?: HeadingSize;
-    /**
-     * Whether the Heading is displayed inline.
-     */
-    isInline?: boolean;
-    /**
-     * Determine if the heading should change size depending on the breakpoint. Default is `true`
-     */
-    isResponsive?: boolean;
-    /**
-     * Changes the Heading font family. Please note `dottee` fonts will only work when theme is set to `ee`
-     */
-    fontStyle?: "default" | "display-standard" | "display-condensed" | "display-extended" | "overline";
-}
-
 interface BannerImageProps extends Pick<ImageProps, "src" | "alt" | "loading" | "sizes" | "srcSet" | "width" | "height" | "fadeOnLoad" | "fit"> {
     ariaHidden?: boolean;
     sources?: Pick<ImageSourceProps, "media" | "sizes" | "srcSet">[];
@@ -308,9 +359,24 @@ interface TemplateBannerProps {
      */
     img?: TemplateBannerImage;
     /**
-     * Provides a min height for the TemplateBanner.
+     * Provides a minimum height for the TemplateBanner. (px value)
+     */
+    minHeight?: number;
+    /**
+     * The minimum height of the TemplateBanner for the M breakpoint. (px value)
+     * Active when viewport width is between 768px and 1023px.
+     */
+    minHeightM?: number;
+    /**
+     * The minimum height of the TemplateBanner for the L breakpoint. (px value)
+     * Active when viewport width is between 1024px and 1279px.
+     */
+    minHeightL?: number;
+    /**
+     * The minimum height of the TemplateBanner for the XL breakpoint. (px value)
+     * Active when viewport width is 1280px and above
      */
-    minHeight?: string | number;
+    minHeightXL?: number;
     /**
      * If true the image will appear on the left and the content will be on the right. Doesn't apply to mobile devices.
      */
@@ -351,6 +417,10 @@ interface TemplateBannerProps {
      * Add Additional top margin to banner
      */
     additionalTopMargin?: boolean;
+    /**
+     *  If `true`, the element expands to match the full vertical height of its parent container.
+     */
+    fullHeight?: boolean;
 }
 
 declare const Banner: FC<BannerProps>;
@@ -501,8 +571,8 @@ interface ItemProps$1 {
     spacerIconBefore?: boolean;
 }
 
-declare const BreadcrumbsLink: FC<LinkProps$1>;
-interface LinkProps$1 {
+declare const BreadcrumbsLink: FC<LinkProps>;
+interface LinkProps {
     /**
      * Render children of `breadcrumbs.link`
      */
@@ -1164,6 +1234,14 @@ interface ContentSwitcherContentProps {
      * This value links the `ContentSwitcherContent` with `ContentSwitcherTab`
      */
     value: string;
+    /**
+     * Apply a hidden attribute to `ContentSwitcherContent`. Inactive content is already visually hidden however this can be used to add a semantic hidden attribute.
+     */
+    hidden?: boolean;
+    /**
+     * Force the contents of `ContentSwitcherContent` to be mounted and rendered in the DOM.
+     */
+    forceMount?: boolean;
 }
 
 declare const ContentSwitcherList: FC<ContentSwitcherListProps>;
@@ -1273,7 +1351,7 @@ declare const DATE_FORMAT = "dd/MM/yyyy";
 
 type AutoCompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "email" | "impp" | "url" | "photo" | "organization-unit";
 
-declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "cardButton", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "modalClose", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript"];
+declare const iconNames: readonly ["alertDismiss", "alertError", "alertGeneral", "alertSuccess", "alertWarning", "avatarUser", "breadcrumbLeft", "breadcrumbRight", "buttonLeft", "buttonRight", "cardButton", "carouselRight", "carouselLeft", "checkboxChecked", "checkboxError", "datePickerCalendar", "disclosureExpand", "disclosureMiniExpand", "downloadFile", "downloadAccessibility", "drawerClose", "formControlAlert", "linkExternal", "modalClose", "navigationHeaderClose", "navigationHeaderDisclosure", "navigationHeaderMenuLinkSmall", "navigationHeaderMenuLinkLarge", "paginationPrevious", "paginationNext", "paginationSimplePrevious", "paginationSimpleNext", "progressBarSuccess", "progressBarError", "progressBarRefresh", "progressStepperComplete", "progressStepperCurrent", "progressStepperWarning", "progressStepperError", "scrollToTop", "selectTrigger", "selectScrollUp", "selectScrollDown", "selectIndicator", "siteFooterExpand", "siteHeaderBack", "siteHeaderBurger", "siteHeaderLink", "siteHeaderItemGroupExpand", "siteHeaderNavItemExpand", "siteHeaderNavItemExpandAlt", "siteHeaderViewAll", "siteHeaderSubNavOpen", "switchToggle", "tabsNext", "tabsPrevious", "tagRemove", "toastGeneral", "toastSuccess", "toastWarning", "toastError", "toastDismiss", "videoPlayerTranscript"];
 
 declare const ThemeIcon: FC<ThemeIconProps>;
 interface ThemeIconProps {
@@ -1957,13 +2035,17 @@ interface HeroButtonProps extends HeroButtonElementProps, LinkElementProps {
     isLoading?: boolean;
 }
 
-declare const Hidden: React.FC<HiddenProps>;
-interface HiddenProps {
+interface BreakpointVisibility {
     xs?: boolean;
     s?: boolean;
     m?: boolean;
     l?: boolean;
     xl?: boolean;
+    xxl?: boolean;
+}
+
+declare const Hidden: React.FC<HiddenProps>;
+interface HiddenProps extends BreakpointVisibility {
     children: React.ReactNode;
 }
 
@@ -2171,57 +2253,6 @@ interface InformationCardProps {
     minHeights?: minHeightsProps;
 }
 
-/**
- * Use `Link` to direct users to a new page or piece of information.
- */
-declare const Link: React.FC<LinkProps>;
-interface LinkProps {
-    /**
-     * Id attribute for `Link`.
-     */
-    id?: string;
-    /**
-     * href attribute for `Link`.
-     */
-    href?: string;
-    /**
-     * Screen reader text for `Link`, which is visually hidden.
-     */
-    screenReaderText?: string;
-    /**
-     * title attribute for `Link`.
-     */
-    title?: string;
-    /**
-     * Rel attribute for `Link`.
-     */
-    rel?: string;
-    /**
-     * Configures the size of `Link`.
-     */
-    size?: "s" | "m" | "l";
-    /**
-     * Removes underline if true.
-     */
-    isImplied?: boolean;
-    /**
-     * Renders as a button element if true.
-     */
-    isButton?: boolean;
-    /**
-     * Click handler for `Link`.
-     */
-    onClick?: (e: React.MouseEvent) => void;
-    /**
-     * Target for `Link`.
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-    /**
-     * Content for `Link`.
-     */
-    children: string;
-}
-
 /**
  * Use `Markup` to display HTML-formatted text.
  */
@@ -2807,6 +2838,10 @@ interface PopoverProps {
      * An offset in pixels from the "start" or "end" alignment options.
      */
     alignOffset?: number;
+    /**
+     * Label for the trigger to be announced by screen readers
+     */
+    ariaLabel?: string;
     /**
      * Content inside the Popover
      */
@@ -2859,6 +2894,15 @@ interface PopoverProps {
      * 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;
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     */
+    hideWhenDetached?: boolean;
+    /**
+     * This should never usually be needed, as the popover by default will either wrap the child element you pass in a button, or pass the props
+     * to the root child element you provide if you set `asChild` to true. If you want to opt out of this behavior set this to true.
+     */
+    useBespokeTrigger?: boolean;
 }
 
 /**
@@ -4072,14 +4116,25 @@ interface TabbedBannerProps {
      */
     defaultValue?: string;
     /**
-     * The minimum height of the all banners M and above`.
+     * The minimum height of all banners at the M breakpoint and above.
+     * Can be overridden by the specific breakpoint controls.
      */
     minHeight?: TemplateBannerProps["minHeight"];
     /**
      * The minimum height of the banner for the M breakpoint.
-     * This will be active when the TabbedBanner switches to the mobile layout at the medium breakpoint.
+     * Active when viewport width is between 768px and 1023px.
+     */
+    minHeightM?: TemplateBannerProps["minHeightM"];
+    /**
+     * The minimum height of the banner for the L breakpoint.
+     * Active when viewport width is between 1024px and 1279px.
+     */
+    minHeightL?: TemplateBannerProps["minHeightL"];
+    /**
+     * The minimum height of the banner for the XL breakpoint.
+     * Active when viewport width is 1280px and above
      */
-    minHeightM?: TemplateBannerProps["minHeight"];
+    minHeightXL?: TemplateBannerProps["minHeightXL"];
 }
 
 /** Use `Tabs` to allow users to navigate between different sections of relevant content. */
@@ -4133,6 +4188,14 @@ interface TabsContentProps {
      * This value links the `TabsContent` with `Tab`
      */
     value: string;
+    /**
+     * Apply a hidden attribute to `TabsContent`. Inactive content is already visually hidden however this can be used to add a semantic hidden attribute.
+     */
+    hidden?: boolean;
+    /**
+     * Force the contents of `TabsContent` to be mounted and rendered in the DOM.
+     */
+    forceMount?: boolean;
 }
 
 declare const TabsList: FC<TabsListProps>;
@@ -4464,6 +4527,10 @@ interface TooltipProps {
      * 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;
 }
 
 /** Use `Truncate` component to shorten text with an ellipsis. Add a `title` attribute to the truncated element so the full text remains accessible. */
@@ -4628,12 +4695,7 @@ interface VideoPlayerProps extends Pick<ReactPlayerProps, "onReady" | "onPlay" |
 }
 
 declare const Visible: React.FC<VisibleProps>;
-interface VisibleProps {
-    xs?: boolean;
-    s?: boolean;
-    m?: boolean;
-    l?: boolean;
-    xl?: boolean;
+interface VisibleProps extends BreakpointVisibility {
     children: React.ReactNode;
 }
 
@@ -4648,6 +4710,206 @@ 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: React.ReactNode;
+}
+
+type Brand = "btRedcare" | "btWholesale" | "btMediaBroadCast" | "btGlobalFabric" | "ee" | "bt";
+interface NavigationHeaderLogoProps {
+    ariaLabel?: string;
+    brand?: Brand;
+    href?: string;
+    svg?: React.ReactNode;
+    isSurfaceSensitive?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+
+interface NavigationHeaderNavLinkProps {
+    text: string;
+    href: string;
+    borderRadiusSize?: "s" | "m";
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+
+/**
+ * Provides an object of breakpoints for responsive designs.
+ *
+ * This object contains keys representing breakpoint names (e.g., `xxl`, `xl`)
+ * and values representing the pixel widths for those breakpoints. The values are parsed
+ * from strings (e.g., "1400px") into numbers for easier usage in responsive logic.
+ *
+ * Kept in src for internal use
+ */
+type ArcBreakpointSizes = "xs" | "s" | "m" | "l" | "xl" | "xxl";
+type ArcBreakpoint = Record<ArcBreakpointSizes, number>;
+declare const ArcBreakpoints: ArcBreakpoint;
+
+type CustomBreakpoint = keyof typeof ArcBreakpoints | number;
+
+type NavigationHeaderNavItemType = "subnav" | "dropdown" | "link" | "meatball";
+type NavLinkProps = Omit<NavigationHeaderNavLinkProps, "borderRadiusSize">;
+interface NavigationHeaderNavItem {
+    type: NavigationHeaderNavItemType;
+}
+interface NavigationHeaderMenuTrigger {
+    visibleFrom?: CustomBreakpoint;
+    text: string;
+    ariaLabel?: string;
+    items: NavLinkProps[];
+}
+interface NavigationHeaderNavLinkItem extends NavigationHeaderNavItem, NavLinkProps {
+    type: "link";
+    visibleFrom?: CustomBreakpoint;
+}
+interface NavigationHeaderMeatBallMenuItem extends NavigationHeaderNavItem, NavLinkProps {
+    type: "meatball";
+}
+interface NavigationHeaderDropdownItem extends NavigationHeaderNavItem, NavigationHeaderMenuTrigger {
+    type: "dropdown";
+}
+interface NavigationHeaderSubNavItem extends NavigationHeaderNavItem, NavigationHeaderMenuTrigger {
+    type: "subnav";
+}
+type NavigationHeaderNavigationItem = NavigationHeaderNavLinkItem | NavigationHeaderDropdownItem | NavigationHeaderSubNavItem | NavigationHeaderMeatBallMenuItem;
+
+interface NavigationHeaderNavListProps {
+    /**
+     * Nav items for `<NavigationHeader />`
+     */
+    navItems: Array<NavigationHeaderNavigationItem>;
+    /**
+     * Meatball menu aria label
+     */
+    meatBallMenuAriaLabel?: string;
+    /**
+     * Meatball menu tooltip text
+     */
+    meatballMenuTooltip?: string;
+}
+
+type ConfigurableHeaderVisibility = Partial<Record<Exclude<ArcBreakpointSizes, "xs">, boolean>>;
+
+interface NavigationHeaderInlineActionProps {
+    /**
+     * Icon url for the action.
+     */
+    icon: string;
+    /**
+     * text for the action.
+     */
+    text: string;
+    /**
+     * href for the action.
+     */
+    href?: string;
+    /**
+     * Click handlers for the action.
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+
+declare const NavigationHeader: React.FC<NavigationHeaderProps>;
+interface NavigationHeaderProps extends Omit<NavigationHeaderContainerProps, "children">, Omit<NavigationHeaderNavListProps, "navItems">, ExtentableContainer {
+    /**
+     * Open content slot on the left of the nav bar.
+     */
+    leftSlot?: React.ReactNode;
+    /**
+     * Open content slot on the middle of the nav bar, after the nav items.
+     */
+    middleSlot?: React.ReactNode;
+    /**
+     * Open content slot on the right of the nav bar.
+     */
+    rightSlot?: React.ReactNode;
+    /**
+     * Configuration for the logo. Logo Defaults to BT. Alternatively you can select one of the brands via the `brand` field, or supply your own svg via the `svg` field.
+     * When supplying your own svg the root element must be an `svg` element that is implemented as follows: it has a `viewBox` attribute, no `height`, `width` or `preserveAspectRatio` attributes. It will also need
+     * fills or strokes set to `currentColor` if you want it to work on both light and dark pathways.
+     */
+    logo?: Omit<NavigationHeaderLogoProps, "isSurfaceSensitive">;
+    /**
+     * Additional links or buttons for the burger menu that sit below the nav items.
+     */
+    burgerMenuActions?: NavigationHeaderInlineActionProps[];
+    /**
+     * Additional content for the burger menu that sits below all the other content.
+     */
+    burgerMenuFooter?: React.ReactNode;
+    /**
+     * Additional content for the burger menu that sits between the logo and the nav items.
+     */
+    burgerMenuHeader?: React.ReactNode;
+    /**
+     * Configuration for the burger menu visibility. It is always visible below 636px but can also be configured to show at larger breakpoints.
+     */
+    burgerMenuVisibility?: ConfigurableHeaderVisibility;
+    /**
+     * Configuration for the nav menu. It is always hidden below 636px but can also be configured to show at larger breakpoints.
+     */
+    navMenuVisibility?: ConfigurableHeaderVisibility;
+    /**
+     * Nav items for `<NavigationHeader />`
+     */
+    navItems?: Array<NavigationHeaderNavigationItem>;
+}
+
+declare const NavigationHeaderAction: React.FC<NavigationHeaderActionProps>;
+interface NavigationHeaderActionProps {
+    /**
+     * Icon url for the action.
+     */
+    icon: string;
+    /**
+     * Display a red dot next to the action to alert users.
+     */
+    isAttention?: boolean;
+    /**
+     * label for action that is presented to screenreader.
+     */
+    ariaLabel: string;
+    /**
+     * title for action that is presented in a tooltip.
+     */
+    title: string;
+    /**
+     * supporting text for action that is presented in a tooltip.
+     */
+    supportingCopy?: string;
+    /**
+     * Click handlers for the action.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+declare const NavigationHeaderActionBar: React.FC<NavigationHeaderActionBarProps>;
+interface NavigationHeaderActionBarProps {
+    children: React.ReactNode;
+}
+
+declare const NavigationHeaderPage: React.FC<NavigationHeaderPageProps>;
+interface NavigationHeaderPageProps {
+    icon?: string;
+    page?: string;
+    title: string;
+}
+
 /**
  * @typedef MediaQueryOutputs
  * @param {boolean} matches - does the document match the media query?
@@ -4667,4 +4929,4 @@ interface VisuallyHiddenProps {
  */
 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, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, FilterControls, FilterItem, FilterItems, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridProps, GridRow, type GridValue, Group, GroupItem, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, Link, type LinkProps, 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, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterProps, PosterVideo, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowRef, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupProps, RadioGroup, RadioGroupButton, RadioGroupInput, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsContent, TabsItem, TabsList, type TabsListProps, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, ThumbnailSignpost, type ThumbnailSignpostProps, Toast, ToastNotification, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };
+export { Alert, type AlertProps, Align, type AlignProps, type AlignmentValue, AppButton, type AppButtonProps, type RangeSelection as ArcCalendarRangeSelection, type SelectionType as ArcCalendarSelectionType, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, type Brand, BrandLogo, colors$1 as BrandLogoColors, type BrandLogoProps, Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, ButtonV2, type ButtonV2Props, Calendar, type CalendarProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, type ColumnValue, Columns, ColumnsCol, type ColumnsColProps, type ColumnsProps, ComboBox, type ComboBoxProps, ContentSwitcher, ContentSwitcherContent, ContentSwitcherDropdown, ContentSwitcherDropdownContent, type ContentSwitcherDropdownProps, ContentSwitcherList, type ContentSwitcherProps, ContentSwitcherTab, DATE_FORMAT, DatePicker, type DatePickerProps, DatePickerRange, type DatePickerRangeProps, Disclosure, DisclosureMini, type DisclosureMiniProps, type DisclosureProps, Download, type DownloadProps, Drawer, DrawerContent, DrawerFooter, DrawerHeader, type DrawerProps, Elevation, type ElevationProps, Filter, FilterControl, FilterControls, FilterItem, FilterItems, type FilterProps, FormControl, Context as FormControlContext, type FormControlProps, GhostedHeroBanner, type GhostedHeroBannerProps, GradientPageBackground, type GradientPageBackgroundProps, Grid, GridCol, type GridProps, GridRow, type GridValue, Group, GroupItem, type GroupProps, Heading, type HeadingLevel, type HeadingProps, HeroBanner, type HeroBannerProps, HeroButton, type HeroButtonProps, Hidden, type HiddenProps, HorizontalCard, type HorizontalCardProps, Icon, type IconColor, colors as IconColors, type IconProps, Image, fitOptions as ImageFitOptions, overlayOptions as ImageOverlayOptions, type ImageProps, ImageSource, type ImageSourceProps, ImpactCard, type ImpactCardProps, InformationCard, type InformationCardProps, Link, type LinkProps$1 as LinkProps, Markup, type MarkupProps, MediaCard, type MediaCardProps, Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, type MenuProps, MenuScrollable, MenuSeparator, MenuTrigger, Modal, type ModalProps, NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, type NavigationHeaderActionProps, NavigationHeaderPage, type NavigationHeaderProps, Pagination, type PaginationProps, PaginationSimple, type PaginationSimpleProps, Popover, type PopoverProps, Poster, PosterImage, type PosterProps, PosterVideo, ProgressBar, type ProgressBarProps, type ProgressBarState, ProgressStepper, ProgressStepperItem, type ProgressStepperItemProps, ProgressStepperOverflow, type ProgressStepperOverflowRef, type ProgressStepperProps, RadioCardGroup, RadioCardGroupInput, type RadioCardGroupProps, RadioGroup, RadioGroupButton, RadioGroupInput, type RadioGroupProps, Rule, type RuleProps, ScrollToTop, type ScrollToTopProps, Section, type SectionProps, Select, type SelectProps, SiteFooter, SiteFooterItem, SiteFooterItemGroup, type SiteFooterProps, SiteFooterV2, SiteFooterV2Item, SiteFooterV2ItemGroup, SiteFooterV2Main, SiteFooterV2Utility, SiteHeaderV2, SiteHeaderV2Column, SiteHeaderV2Item, SiteHeaderV2ItemGroup, SiteHeaderV2NavItem, SiteHeaderV2NavItemWithSubNav, SiteHeaderV2NodeItem, type SiteHeaderV2Props, SiteHeaderV2SubNavItem, SiteHeaderV2VerticalDivider, Skeleton, type SkeletonProps, SkipLink, SkipLinkItem, type Span, Spinner, type SpinnerProps, Surface, type SurfaceBackground, type SurfaceBackgroundColor, Context$1 as SurfaceContext, type SurfacePadding, type SurfaceProps, Switch, type SwitchProps, TabbedBanner, type TabbedBannerProps, Tabs, TabsContent, TabsItem, TabsList, type TabsListProps, type TabsProps, Tag, type TagProps, TemplateBanner, type TemplateBannerProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Theme, ThemeIcon, type ThemeIconNames, type ThemeIconProps, type ThemeProps, type ThemeType, ThumbnailSignpost, type ThumbnailSignpostProps, Toast, ToastNotification, type ToastProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, TypographyCard, type TypographyCardProps, UniversalHeader, UniversalHeaderItem, type UniversalHeaderProps, VerticalSpace, type VerticalSpaceProps, VideoPlayer, type VideoPlayerProps, Visible, type VisibleProps, VisuallyHidden, type VisuallyHiddenProps, backgrounds, backgroundsBT, isDateValid, isRangeValid, loadingOptions, parseDateString, parseRangeString, themes, useMediaQuery };