@arc-ui/components 13.0.0 → 13.2.0

package/lib/NavigationHeader/NavigationHeader.mjs

@@ -1,32 +1,44 @@
 'use client';
-import { b as __spreadArray, _ as __rest, a as __assign } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
-import React__default, { useState, useEffect, useId, useContext, useRef, useMemo, createContext } from 'react';
+import { _ as __rest, a as __assign, b as __spreadArray } from '../_shared/esm/tslib.es6-w7hdJ3oZ.mjs';
+import * as React from 'react';
+import React__default, { useState, useEffect, useId as useId$1, useContext, useRef, createContext, useCallback, useMemo, useLayoutEffect, memo } from 'react';
 import { V as Visible } from '../_shared/esm/Visible-C4eEyTBM.mjs';
 import { c as classNames, g as getDefaultExportFromCjs } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { S as Surface, C as Context } from '../_shared/esm/Surface-C69KVzkY.mjs';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
-import { C as Context, S as Surface } from '../_shared/esm/Surface-C69KVzkY.mjs';
-import { R as Root, P as Portal, O as Overlay, C as Content, T as Title } from '../_shared/esm/index-CjeQnMcn.mjs';
-import { e as useThemeElement } from '../_shared/esm/index-DkAfUbDx.mjs';
+import { S as SemanticLink } from '../_shared/esm/SemanticLink-DfJjaHk2.mjs';
 import { T as Tooltip } from '../_shared/esm/Tooltip-DY8nS1to.mjs';
 import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
 import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
+import { S as SemanticButton } from '../_shared/esm/SemanticButton-NGAMAw3m.mjs';
+import { R as Root, P as Portal, O as Overlay, C as Content, T as Title } from '../_shared/esm/index-CjeQnMcn.mjs';
+import { e as useThemeElement } from '../_shared/esm/index-DkAfUbDx.mjs';
 import { I as Icon } from '../_shared/esm/Icon-CCUbr_AO.mjs';
 import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
 import { C as ConditionalWrapper } from '../_shared/esm/ConditionalWrapper-CbEvXHTj.mjs';
-import { A as ArcBreakpoints } from '../_shared/esm/arc-breakpoints-ChQgbftE.mjs';
-import { P as Popover } from '../_shared/esm/Popover-DRQSgAog.mjs';
+import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
+import { H as Heading } from '../_shared/esm/Heading-Da-o0d5x.mjs';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-BLWB02I7.mjs';
+import { R as Rule } from '../_shared/esm/Rule-Bz3QPezk.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import { A as ArcBreakpoints } from '../_shared/esm/arc-breakpoints-ANMn37k9.mjs';
+import { P as Popover } from '../_shared/esm/Popover-Pjtmu_TN.mjs';
+import { $ as $69cb30bb0017df05$export$be92b6f5f03c0fe9, c as $69cb30bb0017df05$export$54c2e3dc7acea9f5, a as $69cb30bb0017df05$export$41fb9f06171c75f4, b as $69cb30bb0017df05$export$7c6e2c02157bb7d2 } from '../_shared/esm/index-CfXVJXLq.mjs';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-CgjYgfZA.mjs';
+import 'react/jsx-runtime';
+import * as ReactDOM from 'react-dom';
 import { b as require_Symbol, a as requireIsSymbol } from '../_shared/esm/isSymbol-DgWNE2Tm.mjs';
 import { H as Hidden } from '../_shared/esm/Hidden-ByDYDWcI.mjs';
-import '../_shared/esm/filter-attrs-v_SweZXP.mjs';
-import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/index-Cgsjp3NL.mjs';
 import '../_shared/esm/Combination-BW0YAEZD.mjs';
-import 'react/jsx-runtime';
-import 'react-dom';
 import '../_shared/esm/index-BMmvMegf.mjs';
-import '../_shared/esm/index-Cgsjp3NL.mjs';
-import '../_shared/esm/index.es-99J0r2va.mjs';
+import '../_shared/esm/SemanticHeading-DpEBq7pG.mjs';
+import '../_shared/esm/index.es-Du5Lyvbp.mjs';
 import '../_shared/esm/index-Dd3yZ_Kk.mjs';
 import '../_shared/esm/index-DNvlT7G_.mjs';
+import '../_shared/esm/index-C_mwuZg6.mjs';
+import '../_shared/esm/index-Drb5ngQr.mjs';
+import '../_shared/esm/Spinner-DvngCIwx.mjs';
 
 /**
  * Detect interaction mode
@@ -58,10 +70,55 @@ var useInteractionMode = function () {
 };
 
 var useUniqueString = function (value) {
-    var id = useId();
+    var id = useId$1();
     return "".concat(value, "-").concat(id);
 };
 
+var NavigationHeaderContainer = function (_a) {
+    var _b = _a.isPill, isPill = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, ref = _a.ref, backgroundColor = _a.backgroundColor, children = _a.children;
+    var backgroundColors = {
+        light: {
+            surface: "light-white",
+            classSuffix: "backgroundLight",
+        },
+        neutral: {
+            surface: "light-white",
+            classSuffix: "backgroundNeutral",
+        },
+        lightElevated: {
+            surface: "light-white",
+            classSuffix: "backgroundLightElevated",
+        },
+        transparentOnDark: {
+            surface: "dark-black",
+            classSuffix: "backgroundTransparent",
+        },
+        transparentOnLight: {
+            surface: "light-white",
+            classSuffix: "backgroundTransparent",
+        },
+        ghostedOnLight: {
+            surface: "light-white",
+            classSuffix: "backgroundGhosted",
+        },
+        ghostedOnDark: {
+            surface: "dark-black",
+            classSuffix: "backgroundGhosted",
+        },
+    };
+    return (React__default.createElement("div", { "data-testid": "NavigationHeader-container", className: classNames("arc-NavigationHeaderContainer--".concat(backgroundColors[backgroundColor].classSuffix), {
+            "arc-NavigationHeaderContainer--pill": isPill,
+            "arc-NavigationHeaderContainer--fullWidth": !isPill,
+            "arc-NavigationHeaderContainer--regular": !isExtended,
+            "arc-NavigationHeaderContainer--extended": isExtended,
+            "arc-NavigationHeaderContainer--fluid": isFluid,
+        }) },
+        React__default.createElement("div", { ref: ref, className: "arc-NavigationHeaderContainer-outer" },
+            React__default.createElement(Surface, { isTransparent: true, background: backgroundColors[backgroundColor].surface },
+                React__default.createElement("div", { className: "arc-NavigationHeaderContainer-inner" },
+                    React__default.createElement("div", { className: "arc-NavigationHeaderContainer-content" }, children))))));
+};
+
 var BtLogo = function () { return (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50" },
     React__default.createElement("path", { d: "M26.225 16.475h12.45v3.65H34.5v13.35h-4.1v-13.35h-4.175v-3.65zM25 46.925c-12.1 0-21.925-9.825-21.925-21.924C3.075 12.9 12.9 3.075 25 3.075 37.1 3.075 46.926 12.9 46.926 25c0 12.1-9.825 21.926-21.926 21.926zM25 50c13.8 0 25-11.2 25-25C50 11.199 38.8 0 25 0S0 11.2 0 25c0 13.801 11.2 25 25 25zm-4.225-21.725c0-1.074-.674-1.8-1.825-1.8H16.2v3.55h2.75c1.15 0 1.825-.725 1.825-1.75zm-.5-6.824c0-.9-.574-1.526-1.55-1.526h-2.524v3.1h2.525c.975 0 1.55-.624 1.55-1.574zm4.65 7.025c0 3.225-2.275 5-5.524 5h-7.246v-17h6.771c3.275 0 5.5 1.674 5.5 4.75 0 1.399-.625 2.649-1.625 3.4 1.15.674 2.124 1.974 2.124 3.85z", fill: "currentColor" }))); };
 
@@ -85,7 +142,46 @@ var NavigationHeaderLogo = function (_a) {
         btWholesale: BtWholesaleLogo,
     };
     var icon = svg || React__default.createElement(logos[brand]);
-    return (React__default.createElement("a", { className: classNames("arc-NavigationHeaderLogo", suffixModifier("arc-NavigationHeaderLogo--on", surface)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
+    return (React__default.createElement(SemanticLink, { className: classNames("arc-NavigationHeaderLogo", suffixModifier("arc-NavigationHeaderLogo--on", surface)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
+};
+
+var DELAY_DURATION = 500;
+
+var NavigationHeaderButton = function (_a) {
+    var ref = _a.ref, isActive = _a.isActive, children = _a.children, onClick = _a.onClick, href = _a.href, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["ref", "isActive", "children", "onClick", "href", "isPadded"]);
+    var surface = useContext(Context).surface;
+    var classes = classNames("arc-NavigationHeaderButton", suffixModifier("arc-NavigationHeaderButton--on", surface), {
+        "arc-NavigationHeaderButton--active": isActive,
+        "arc-NavigationHeaderButton--padded": isPadded,
+    });
+    var commonProps = {
+        className: classes,
+        onClick: onClick,
+    };
+    if (href) {
+        return (React__default.createElement(SemanticLink, __assign({}, props, commonProps, { ref: ref, href: href }), children));
+    }
+    return (React__default.createElement(SemanticButton, __assign({}, props, commonProps, { ref: ref }), children));
+};
+
+var getMenuColorConfig = function (background, pathway) {
+    var colorConfig = {
+        light: {
+            surface: "light-white",
+            menuColorType: "light",
+        },
+        dark: {
+            surface: "dark-black",
+            menuColorType: "dark",
+        },
+    };
+    switch (background) {
+        case "transparentOnDark":
+        case "ghostedOnDark":
+            return pathway === "invert" ? colorConfig.light : colorConfig.dark;
+        default:
+            return pathway === "invert" ? colorConfig.dark : colorConfig.light;
+    }
 };
 
 // src/check-element-visibility/check-element-visibility.ts
@@ -98,31 +194,109 @@ var checkElementVisibility = (element) => {
   }
 };
 
-var DELAY_DURATION = 500;
+var useTriggerHidden = function (_a) {
+    var onTriggerHidden = _a.onTriggerHidden, triggerEl = _a.triggerEl;
+    useEffect(function () {
+        var resizeObserver = new ResizeObserver(function (entries) {
+            var entry = entries[0];
+            if (!checkElementVisibility(entry.target)) {
+                onTriggerHidden();
+            }
+        });
+        if (triggerEl) {
+            resizeObserver.observe(triggerEl);
+        }
+        return function () {
+            if (triggerEl) {
+                resizeObserver.unobserve(triggerEl);
+            }
+        };
+    }, [onTriggerHidden, triggerEl]);
+};
 
-var NavigationHeaderInlineAction = function (_a) {
-    var icon = _a.icon, text = _a.text, href = _a.href, onClick = _a.onClick;
+var SideMenuHeader = function (_a) {
+    var children = _a.children, onCloseClick = _a.onCloseClick;
     var surface = useContext(Context).surface;
-    var commonClasses = [
-        "arc-NavigationHeaderInlineAction",
-        suffixModifier("arc-NavigationHeaderInlineAction--on", surface),
-    ];
-    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement("a", { "aria-label": text, className: classNames.apply(void 0, __spreadArray(__spreadArray([], commonClasses, false), ["arc-NavigationHeaderInlineAction-link"], false)), href: href, onClick: onClick }, children)); }, fallback: function (children) { return (React__default.createElement("button", { "aria-label": text, className: classNames.apply(void 0, __spreadArray(__spreadArray([], commonClasses, false), ["arc-NavigationHeaderInlineAction-button"], false)), onClick: onClick }, children)); } },
-        React__default.createElement("div", { className: "arc-NavigationHeaderInlineAction-content" },
-            React__default.createElement(Icon, { "aria-hidden": true, icon: icon, size: 28 }),
-            React__default.createElement(Text, { size: "l" }, text))));
+    return (React__default.createElement("div", { className: "arc-SideMenuHeader" },
+        React__default.createElement("div", { className: "arc-SideMenuHeader-closeButtonContainer" },
+            React__default.createElement(SemanticButton, { "aria-label": "close", onClick: onCloseClick, className: classNames("arc-SideMenuHeader-closeButton", suffixModifier("arc-SideMenuHeader-closeButton--on", surface)) },
+                React__default.createElement(ThemeIcon, { size: 32, icon: "navigationHeaderClose" }))),
+        React__default.createElement("div", { className: "arc-SideMenuHeader-logoContainer" },
+            React__default.createElement("div", { className: "arc-SideMenuHeader-logoWrapper" }, children))));
 };
 
-var NavigationHeaderButton = function (_a) {
-    var ref = _a.ref, isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = __rest(_a, ["ref", "isActive", "children", "onClick", "isPadded"]);
+var SideMenuDrawer = function (_a) {
+    var children = _a.children, onCloseAutoFocus = _a.onCloseAutoFocus, onInteractOutside = _a.onInteractOutside, onEscapeKeyDown = _a.onEscapeKeyDown, title = _a.title, drawerType = _a.drawerType, isOpen = _a.isOpen, colorType = _a.colorType, surface = _a.surface, menuPosition = _a.menuPosition;
+    var _b = useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    return (React__default.createElement("div", { ref: setThemeElement },
+        React__default.createElement(Root, { open: isOpen },
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Overlay, { className: "arc-SideMenuDrawer-overlay" },
+                    React__default.createElement(Content, { "aria-describedby": undefined, className: classNames("arc-SideMenuDrawer-slider", suffixModifier("arc-SideMenuDrawer-slider--position", menuPosition), suffixModifier("arc-SideMenuDrawer-slider--on", colorType), suffixModifier("arc-SideMenuDrawer-slider--type", drawerType)), onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onInteractOutside: onInteractOutside, "aria-modal": "true" },
+                        React__default.createElement(VisuallyHidden, null,
+                            React__default.createElement(Title, null, title)),
+                        React__default.createElement(Surface, { growVertically: true, isTransparent: true, background: surface }, children)))))));
+};
+
+var SideMenuNavSection = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { className: "arc-SideMenuNavSection" }, children));
+};
+
+var getCommonProps = function (_a) {
+    var text = _a.text, onClick = _a.onClick;
+    return ({
+        className: "arc-SideMenuActions-item",
+        "aria-label": text,
+        onClick: onClick,
+    });
+};
+var SideMenuActions = function (_a) {
+    var showSeparator = _a.showSeparator, actions = _a.actions;
+    var id = useId$1();
     var surface = useContext(Context).surface;
-    return (React__default.createElement("button", __assign({}, props, { ref: ref, onClick: onClick, className: classNames("arc-NavigationHeaderButton", suffixModifier("arc-NavigationHeaderButton--on", surface), {
-            "arc-NavigationHeaderButton--active": isActive,
-            "arc-NavigationHeaderButton--padded": isPadded,
-        }) }), children));
+    return (React__default.createElement("div", { className: classNames("arc-SideMenuActions", suffixModifier("arc-SideMenuActions--on", surface)) },
+        React__default.createElement("div", { className: classNames("arc-SideMenuActions-wrapper", {
+                "arc-SideMenuActions--seperator": showSeparator,
+            }) }, actions.map(function (action, i) { return (React__default.createElement(ConditionalWrapper, { key: "".concat(id, "-action-{").concat(i, "}"), condition: Boolean(action.href), wrapper: function (children) { return (React__default.createElement(SemanticLink, __assign({}, getCommonProps(action), { href: action.href }), children)); }, fallback: function (children) { return (React__default.createElement(SemanticButton, __assign({}, getCommonProps(action)), children)); } },
+            React__default.createElement("div", { className: "arc-SideMenuActions-content" },
+                React__default.createElement("div", { className: classNames("arc-SideMenuActions-icon", {
+                        "arc-SideMenuActions-icon--attention": action.isAttention,
+                    }) },
+                    React__default.createElement(Icon, { "aria-hidden": true, icon: action.icon, size: 28 })),
+                React__default.createElement(Text, { size: "l" }, action.text)))); }))));
 };
 
-var NavigationHeaderDisclosure = function (_a) {
+var SideMenuLink = function (_a) {
+    var ref = _a.ref, href = _a.href, onClick = _a.onClick, text = _a.text, props = __rest(_a, ["ref", "href", "onClick", "text"]);
+    var surface = useContext(Context).surface;
+    var commonProps = __assign({ "aria-label": text, onClick: onClick, className: classNames("arc-SideMenuLink", suffixModifier("arc-SideMenuLink--on", surface)) }, filterAttrs(props));
+    return (React__default.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React__default.createElement(SemanticLink, __assign({}, commonProps, { href: href, ref: ref }), children)); }, fallback: function (children) { return (React__default.createElement(SemanticButton, __assign({}, commonProps, { ref: ref }), children)); } },
+        React__default.createElement("div", { className: "arc-SideMenuLink-text" }, text),
+        React__default.createElement("span", { className: "arc-SideMenuLink-icon" },
+            React__default.createElement(ThemeIcon, { icon: "navigationHeaderMenuLinkLarge" }))));
+};
+
+// src/get-focusable-elements/get-focusable-elements.ts
+var getFocusableElements = (rootElement) => {
+  const nodes = [];
+  const walker = document.createTreeWalker(
+    rootElement,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: (node) => {
+        const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+        if (node.disabled || node.hidden || isHiddenInput || !checkElementVisibility(node))
+          return NodeFilter.FILTER_SKIP;
+        return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      }
+    }
+  );
+  while (walker.nextNode()) nodes.push(walker.currentNode);
+  return nodes;
+};
+
+var SideMenuDisclosure = function (_a) {
     var heading = _a.heading, children = _a.children;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var surface = useContext(Context).surface;
@@ -132,369 +306,2382 @@ var NavigationHeaderDisclosure = function (_a) {
         setIsOpen(function (isOpen) { return !isOpen; });
     };
     useEffect(function () {
+        var _a;
         if (containerRef.current && containerRef.current.firstChild && isOpen) {
-            containerRef.current.firstChild.focus();
+            (_a = getFocusableElements(containerRef.current)[0]) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [isOpen]);
-    return (React__default.createElement("details", { className: classNames("arc-NavigationHeaderDisclosure", suffixModifier("arc-NavigationHeaderDisclosure--on", surface)), open: isOpen },
-        React__default.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-NavigationHeaderDisclosure-summary" },
-            React__default.createElement("span", { className: "arc-NavigationHeaderDisclosure-heading" }, heading),
-            React__default.createElement("span", { className: "arc-NavigationHeaderDisclosure-icon" },
-                React__default.createElement(Visible, { xs: true, s: true },
-                    React__default.createElement(ThemeIcon, { size: 20, icon: "navigationHeaderDisclosure" })),
-                React__default.createElement(Visible, { m: true, l: true },
-                    React__default.createElement(ThemeIcon, { size: 24, icon: "navigationHeaderDisclosure" })),
-                React__default.createElement(Visible, { xl: true, xxl: true },
-                    React__default.createElement(ThemeIcon, { size: 28, icon: "navigationHeaderDisclosure" })))),
-        React__default.createElement("div", { ref: containerRef, className: "arc-NavigationHeaderDisclosure-details" }, children)));
+    return (React__default.createElement("details", { className: classNames("arc-SideMenuDisclosure", suffixModifier("arc-SideMenuDisclosure--on", surface)), open: isOpen },
+        React__default.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-SideMenuDisclosure-summary" },
+            React__default.createElement("span", { className: "arc-SideMenuDisclosure-heading" }, heading),
+            React__default.createElement("span", { className: "arc-SideMenuDisclosure-icon" },
+                React__default.createElement(ThemeIcon, { size: 20, icon: "navigationHeaderDisclosure" }))),
+        React__default.createElement("div", { ref: containerRef, className: "arc-SideMenuDisclosure-content" }, children)));
+};
+
+var createNavigationHeaderContext = function (errorMessage) {
+    var componentContext = createContext(null);
+    var useComponentContext = function () {
+        var context = useContext(componentContext);
+        if (!context) {
+            throw new Error(errorMessage);
+        }
+        return context;
+    };
+    return [componentContext, useComponentContext];
+};
+
+var _a$2 = createNavigationHeaderContext("NavigationHeaderSideMenu sub components must be used within NavigationHeaderSideMenu"), NavigationHeaderSideMenuContext = _a$2[0], useNavigationHeaderSideMenuContext = _a$2[1];
+
+var SideMenuSubMenu = function (_a) {
+    var children = _a.children, heading = _a.heading, isOpen = _a.isOpen, onBackClick = _a.onBackClick, onCloseAutoFocus = _a.onCloseAutoFocus, supportingText = _a.supportingText, _b = _a.headingSize, headingSize = _b === void 0 ? "l" : _b, _c = _a.backButtonLabel, backButtonLabel = _c === void 0 ? "Back" : _c, _d = _a.backButtonAriaLabel, backButtonAriaLabel = _d === void 0 ? "Back to main menu" : _d;
+    var _e = useNavigationHeaderSideMenuContext(), menuColorConfig = _e.menuColorConfig, menuPosition = _e.menuPosition, onEscapeKeyDown = _e.onEscapeKeyDown, closeMenu = _e.closeMenu;
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(SideMenuDrawer, { drawerType: "sub", title: "Secondary menu", isOpen: isOpen, onCloseAutoFocus: onCloseAutoFocus, colorType: menuColorConfig.menuColorType, surface: menuColorConfig.surface, menuPosition: menuPosition, onEscapeKeyDown: onEscapeKeyDown, onInteractOutside: closeMenu },
+            React__default.createElement(SideMenuHeader, { onCloseClick: closeMenu },
+                React__default.createElement(SemanticButton, { className: classNames("arc-SideMenuSubMenu-backButton", suffixModifier("arc-SideMenuSubMenu-backButton--on", menuColorConfig.menuColorType)), "aria-label": backButtonAriaLabel, onClick: onBackClick },
+                    React__default.createElement("div", { className: "arc-SideMenuSubMenu-backButtonIcon" },
+                        React__default.createElement(ThemeIcon, { icon: "navigationHeaderSideMenuBack", size: 32 })),
+                    React__default.createElement("div", { className: "arc-SideMenuSubMenu-backButtonText" }, backButtonLabel))),
+            React__default.createElement(SideMenuNavSection, null,
+                React__default.createElement("div", { className: "arc-SideMenuSubMenu-heading" },
+                    React__default.createElement(Heading, { size: headingSize }, heading),
+                    supportingText && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement(VerticalSpace, { size: "4" }),
+                        React__default.createElement(Text, { tone: "muted", size: "s" }, supportingText)))),
+                children))));
+};
+
+var ArrowRightIcon = function () { return (React__default.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("path", { d: "M14.0306 8.52927L9.53063 13.0293C9.38973 13.1702 9.19863 13.2493 8.99938 13.2493C8.80012 13.2493 8.60902 13.1702 8.46813 13.0293C8.32723 12.8884 8.24807 12.6973 8.24807 12.498C8.24807 12.2988 8.32723 12.1077 8.46813 11.9668L11.6875 8.74864H2.5C2.30109 8.74864 2.11032 8.66963 1.96967 8.52897C1.82902 8.38832 1.75 8.19756 1.75 7.99864C1.75 7.79973 1.82902 7.60897 1.96967 7.46831C2.11032 7.32766 2.30109 7.24864 2.5 7.24864H11.6875L8.46937 4.02864C8.32848 3.88775 8.24932 3.69665 8.24932 3.49739C8.24932 3.29814 8.32848 3.10704 8.46937 2.96614C8.61027 2.82525 8.80137 2.74609 9.00062 2.74609C9.19988 2.74609 9.39098 2.82525 9.53187 2.96614L14.0319 7.46614C14.1018 7.53592 14.1573 7.61881 14.1951 7.71008C14.2329 7.80135 14.2523 7.89918 14.2522 7.99797C14.252 8.09675 14.2324 8.19454 14.1944 8.28572C14.1564 8.37689 14.1007 8.45966 14.0306 8.52927Z", fill: "currentColor" }))); };
+
+var NavigationHeaderCta = function (_a) {
+    var href = _a.href, onClick = _a.onClick, text = _a.text, _b = _a.revealLinkIconOnHover, revealLinkIconOnHover = _b === void 0 ? false : _b;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement(SemanticLink, { className: classNames("arc-NavigationHeaderCta", suffixModifier("arc-NavigationHeaderCta--on", surface)), onClick: onClick, href: href },
+        React__default.createElement("div", { className: "arc-NavigationHeaderCta-heading" },
+            React__default.createElement(Heading, { size: "xxs" }, text)),
+        React__default.createElement("div", { className: classNames("arc-NavigationHeaderCta-linkIcon", {
+                "arc-NavigationHeaderCta-linkIcon--revealLinkIconOnHover": revealLinkIconOnHover,
+            }) },
+            React__default.createElement(ArrowRightIcon, null))));
+};
+
+var NavigationHeaderCollapsingNavList = function (_a) {
+    var mainLink = _a.mainLink, description = _a.description, category = _a.category, links = _a.links, revealLinkIconOnHover = _a.revealLinkIconOnHover, _b = _a.autoFocusOnExpand, autoFocusOnExpand = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "dark" : _c, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d;
+    var id = useId$1();
+    var surface = useContext(Context).surface;
+    var _e = useState(defaultOpen), isOpen = _e[0], setIsOpen = _e[1];
+    var containerRef = useRef(null);
+    var onClick = function (e) {
+        setIsOpen(e.currentTarget.open);
+    };
+    useEffect(function () {
+        if (containerRef.current &&
+            containerRef.current.firstChild &&
+            autoFocusOnExpand &&
+            isOpen) {
+            getFocusableElements(containerRef.current)[0].focus();
+        }
+    }, [isOpen, autoFocusOnExpand]);
+    return (React__default.createElement("details", { className: classNames("arc-NavigationHeaderCollapsingNavList-disclosure", suffixModifier("arc-NavigationHeaderCollapsingNavList-disclosure--on", surface), {
+            "arc-NavigationHeaderCollapsingNavList-disclosure--open": isOpen,
+        }), open: isOpen, onToggle: onClick },
+        React__default.createElement("summary", { className: classNames("arc-NavigationHeaderCollapsingNavList-disclosureSummary", suffixModifier("arc-NavigationHeaderCollapsingNavList-disclosureSummary--background", background)), "aria-expanded": isOpen },
+            React__default.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryHeading" },
+                React__default.createElement(Heading, { level: "2" }, category)),
+            React__default.createElement("span", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryIcon" },
+                React__default.createElement(ThemeIcon, { size: 16, icon: "disclosureExpand" }))),
+        React__default.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-content" },
+            React__default.createElement(VerticalSpace, { size: "8" }),
+            description && (React__default.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-description" },
+                React__default.createElement(Text, { size: "s", tone: "muted" }, description))),
+            React__default.createElement("div", { ref: containerRef },
+                mainLink && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: "16" }),
+                    React__default.createElement(NavigationHeaderCta, __assign({}, mainLink, { revealLinkIconOnHover: revealLinkIconOnHover })),
+                    React__default.createElement(VerticalSpace, { size: "8" }),
+                    React__default.createElement(Rule, null))),
+                links && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(VerticalSpace, { size: "8" }),
+                    React__default.createElement("ul", { className: "arc-NavigationHeaderCollapsingNavList-list" }, links.map(function (link, i) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-megamenu-link-").concat(i) },
+                        React__default.createElement(NavigationHeaderCta, __assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); })))),
+                React__default.createElement(VerticalSpace, { size: "24" })))));
+};
+
+var SideMenuCategoryLinksItem = function (_a) {
+    var items = _a.items, text = _a.text, backButtonLabel = _a.backButtonLabel, backButtonAriaLabel = _a.backButtonAriaLabel, panelHeading = _a.panelHeading;
+    var id = useId$1();
+    var _b = useState(false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
+    var triggerRef = useRef(null);
+    var onItemClick = function () {
+        setIsDrawerOpen(true);
+    };
+    var onBackClick = function () {
+        setIsDrawerOpen(false);
+    };
+    var onCloseAutoFocus = function () {
+        var _a;
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(SideMenuLink, { "aria-haspopup": "dialog", "aria-expanded": isDrawerOpen, ref: triggerRef, onClick: onItemClick, text: text }),
+        React__default.createElement(SideMenuSubMenu, { isOpen: isDrawerOpen, heading: panelHeading.heading, supportingText: panelHeading.supportingText, onBackClick: onBackClick, onCloseAutoFocus: onCloseAutoFocus, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel },
+            React__default.createElement("div", { className: "arc-SideMenuCategoryLinksItem-navItems" }, items.map(function (navItem, navItemIndex) { return (React__default.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { key: "".concat(id, "-side-menu-category-link-item-").concat(navItemIndex) }))); })))));
+};
+
+var NavigationHeaderFeatureCard = function (_a) {
+    var title = _a.title, description = _a.description, href = _a.href, onClick = _a.onClick, img = _a.img, label = _a.label, isFeatured = _a.isFeatured, props = __rest(_a, ["title", "description", "href", "onClick", "img", "label", "isFeatured"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-NavigationHeaderFeatureCard", {
+            "arc-NavigationHeaderFeatureCard--featured": isFeatured,
+        }) }, filterAttrs(props)),
+        img && (React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-imgContainer" },
+            React__default.createElement("img", { alt: "", src: img, className: "arc-NavigationHeaderFeatureCard-img" }))),
+        React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-content" },
+            React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-header" },
+                label && (React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-label" },
+                    React__default.createElement(Heading, { size: "xxxs" }, label))),
+                React__default.createElement(Heading, { level: "4", size: "s" },
+                    React__default.createElement(SemanticLink, { className: "arc-NavigationHeaderFeatureCard-link", href: href, onClick: onClick }, title)),
+                React__default.createElement(VerticalSpace, { size: "16" })),
+            React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-body" }, description && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(Text, { size: "s" }, description),
+                React__default.createElement(VerticalSpace, { size: "16" })))),
+            React__default.createElement("div", { className: "arc-NavigationHeaderFeatureCard-footer" },
+                React__default.createElement("span", { className: "arc-NavigationHeaderFeatureCard-cta" },
+                    React__default.createElement(ArrowRightIcon, null))))));
+};
+
+var NavigationHeaderPanelLink = function (_a) {
+    var icon = _a.icon, href = _a.href, onClick = _a.onClick, heading = _a.heading, description = _a.description;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("div", { className: classNames("arc-NavigationHeaderPanelLink", suffixModifier("arc-NavigationHeaderPanelLink--on", surface)) },
+        React__default.createElement("div", { className: "arc-NavigationHeaderPanelLink-icon" },
+            React__default.createElement(Icon, { color: "brand", icon: icon, size: 88 })),
+        React__default.createElement("div", { className: "arc-NavigationHeaderPanelLink-textCol" },
+            React__default.createElement("div", { className: "arc-NavigationHeaderPanelLink-heading" },
+                React__default.createElement(Heading, { size: "s" },
+                    React__default.createElement(SemanticLink, { className: "arc-NavigationHeaderPanelLink-link", href: href, onClick: onClick }, heading))),
+            React__default.createElement(VerticalSpace, { size: "12" }),
+            React__default.createElement("div", { className: "arc-NavigationHeaderPanelLink-description" },
+                React__default.createElement(Text, { size: "s" }, description))),
+        React__default.createElement("div", { className: "arc-NavigationHeaderPanelLink-ctaCol" },
+            React__default.createElement("span", { className: "arc-NavigationHeaderPanelLink-cta" },
+                React__default.createElement(ArrowRightIcon, null)))));
+};
+
+var MegaMenuSubMenu = function (_a) {
+    var item = _a.item, heading = _a.heading, backButtonLabel = _a.backButtonLabel, backButtonAriaLabel = _a.backButtonAriaLabel;
+    var id = useId$1();
+    var triggerRef = useRef(null);
+    var _b = useState(false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
+    var menuColorConfig = useNavigationHeaderSideMenuContext().menuColorConfig;
+    var onItemClick = function () {
+        setIsDrawerOpen(true);
+    };
+    var onBackClick = function () {
+        setIsDrawerOpen(false);
+    };
+    var onCloseAutoFocus = function () {
+        var _a;
+        (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(SemanticButton, { "aria-haspopup": "dialog", "aria-expanded": isDrawerOpen, ref: triggerRef, "aria-label": item.triggerText, className: classNames("arc-SideMenuMegaMenuItem-button", suffixModifier("arc-SideMenuMegaMenuItem-button--on", menuColorConfig.menuColorType)), onClick: onItemClick },
+            React__default.createElement("div", { className: "arc-SideMenuMegaMenuItem-buttonIcon" },
+                React__default.createElement(Icon, { icon: item.icon, size: 32 })),
+            React__default.createElement("div", { className: "arc-SideMenuMegaMenuItem-buttonText" },
+                React__default.createElement(Heading, { size: "xxs" }, item.triggerText))),
+        React__default.createElement(SideMenuSubMenu, { isOpen: isDrawerOpen, heading: heading, headingSize: "s", onBackClick: onBackClick, onCloseAutoFocus: onCloseAutoFocus, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel },
+            React__default.createElement(NavigationHeaderPanelLink, __assign({}, item.panelLink, { icon: item.icon })),
+            React__default.createElement(VerticalSpace, { size: "16" }),
+            React__default.createElement("div", { className: "arc-SideMenuMegaMenuItem-navItems" }, item.items.map(function (navItem, navItemIndex) { return (React__default.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { key: "".concat(id, "-side-mega-menu-drawer-navItem-").concat(navItemIndex) }))); })))));
+};
+var SideMenuMegaMenuItem = function (_a) {
+    var featureCards = _a.featureCards, text = _a.text, panelHeading = _a.panelHeading, tabs = _a.tabs, backButtonLabel = _a.backButtonLabel, backButtonAriaLabel = _a.backButtonAriaLabel;
+    var id = useId$1();
+    return (React__default.createElement(SideMenuDisclosure, { heading: text },
+        tabs.map(function (item, itemIndex) { return (React__default.createElement(MegaMenuSubMenu, { key: "".concat(id, "-side-menu-mega-menu-item-").concat(itemIndex), item: item, heading: panelHeading.heading, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel })); }),
+        featureCards && (React__default.createElement(Surface, { isTransparent: true, background: "light-white" },
+            React__default.createElement("div", { className: "arc-SideMenuMegaMenuItem-featureCards" },
+                React__default.createElement("div", { className: "arc-SideMenuMegaMenuItem-featureCardContainer" }, featureCards.map(function (card, cardIndex) { return (React__default.createElement(NavigationHeaderFeatureCard, { title: card.title, href: card.href, isFeatured: card.isFeatured, label: card.label, onClick: card.onClick, key: "".concat(id, "-side-menu-mega-menu-card-").concat(cardIndex) })); })))))));
 };
 
-var NavigationHeaderMenuLink = function (_a) {
-    var href = _a.href, onClick = _a.onClick, text = _a.text, _b = _a.size, size = _b === void 0 ? "l" : _b;
+var SideMenuNavItem = function (_a) {
+    var navItem = _a.navItem;
+    var id = useId$1();
+    return (React__default.createElement(React__default.Fragment, null,
+        navItem.type === "link" && (React__default.createElement(SideMenuLink, { href: navItem.href, onClick: navItem.onClick, text: navItem.text })),
+        navItem.type === "levelTwo" && (React__default.createElement(SideMenuDisclosure, { heading: navItem.text }, navItem.items.map(function (link, linkIndex) { return (React__default.createElement(NavigationHeaderCta, { key: "".concat(id, "-side-menu-level-two-link-item-").concat(linkIndex), href: link.href, onClick: link.onClick, text: link.text })); }))),
+        navItem.type === "categoryLinks" && (React__default.createElement(SideMenuCategoryLinksItem, __assign({}, navItem))),
+        navItem.type === "megamenu" && React__default.createElement(SideMenuMegaMenuItem, __assign({}, navItem))));
+};
+
+var SideMenuNavList = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("nav", null,
+        React__default.createElement("ul", { className: "arc-SideMenuNavList" }, children)));
+};
+
+var NavigationHeaderSideMenu = function (_a) {
+    var navItems = _a.navItems, children = _a.children, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo, background = _a.background, onOpenChange = _a.onOpenChange, trigger = _a.trigger, menuPosition = _a.menuPosition, _b = _a.showLogo, showLogo = _b === void 0 ? true : _b, _c = _a.tooltip, tooltip = _c === void 0 ? "Menu" : _c, _d = _a.pathway, pathway = _d === void 0 ? "invert" : _d, _e = _a.triggerAriaLabel, triggerAriaLabel = _e === void 0 ? "Open menu" : _e;
+    var id = useId$1();
+    var _f = useState(false), isMenuOpen = _f[0], setIsMenuOpen = _f[1];
+    var triggerRef = useRef(null);
+    var mainContentRef = useRef(null);
+    var _g = useState("pointer"), interactionMode = _g[0], setInterActionMode = _g[1];
+    useEffect(function () {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isMenuOpen);
+    }, [isMenuOpen, onOpenChange]);
+    useTriggerHidden({
+        triggerEl: triggerRef.current,
+        onTriggerHidden: function () {
+            closeMenu();
+        },
+    });
+    var closeMenu = useCallback(function () {
+        setIsMenuOpen(false);
+    }, [setIsMenuOpen]);
+    var onEscapeKeyDown = useCallback(function () {
+        setInterActionMode("keyboard");
+        closeMenu();
+    }, [closeMenu]);
+    var onSideMenuMouseDown = function () {
+        setInterActionMode("pointer");
+    };
+    var onSideMenuKeyDown = function () {
+        setInterActionMode("keyboard");
+    };
+    var focusTriggerElement = function () {
+        var _a;
+        interactionMode === "keyboard" && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+    };
+    var menuColorConfig = getMenuColorConfig(background, pathway);
+    var contextValue = useMemo(function () { return ({ menuPosition: menuPosition, menuColorConfig: menuColorConfig, onEscapeKeyDown: onEscapeKeyDown, closeMenu: closeMenu }); }, [menuPosition, menuColorConfig, onEscapeKeyDown, closeMenu]);
+    return (React__default.createElement(NavigationHeaderSideMenuContext.Provider, { value: contextValue },
+        React__default.createElement("div", { className: "arc-NavigationHeaderSideMenu", onMouseDown: onSideMenuMouseDown, onKeyDown: onSideMenuKeyDown },
+            React__default.createElement(Tooltip, { delayDuration: DELAY_DURATION, asChild: true, title: tooltip, side: "bottom" },
+                React__default.createElement(NavigationHeaderButton, { ref: triggerRef, isPadded: Boolean(trigger) || false, "aria-expanded": isMenuOpen, "aria-label": isMenuOpen ? "close menu" : triggerAriaLabel, onClick: function () { return setIsMenuOpen(!isMenuOpen); } },
+                    trigger || (React__default.createElement("div", { className: "arc-NavigationHeaderSideMenu-trigger" }, React__default.createElement(ThemeIcon, { icon: "siteHeaderBurger", size: 24 }))),
+                    React__default.createElement(VisuallyHidden, null, isMenuOpen ? "close menu" : "open menu"))),
+            React__default.createElement(SideMenuDrawer, { drawerType: "main", title: "Navigation menu", menuPosition: menuPosition, isOpen: isMenuOpen, colorType: menuColorConfig.menuColorType, surface: menuColorConfig.surface, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onEscapeKeyDown, onInteractOutside: closeMenu },
+                React__default.createElement("div", { className: "arc-NavigationHeaderSideMenu-container" },
+                    React__default.createElement("div", { className: "arc-NavigationHeaderSideMenu-mainContent" },
+                        showLogo && (React__default.createElement(SideMenuHeader, { onCloseClick: closeMenu },
+                            React__default.createElement(NavigationHeaderLogo, __assign({}, logo)))),
+                        React__default.createElement("div", { ref: mainContentRef },
+                            header && (React__default.createElement("div", { className: classNames("arc-NavigationHeaderSideMenu-topContent", {
+                                    "arc-NavigationHeaderSideMenu-topContent--bottomSpacing": !navItems,
+                                }) }, header)),
+                            navItems && !children && (React__default.createElement(SideMenuNavSection, null,
+                                React__default.createElement(SideMenuNavList, null, navItems === null || navItems === void 0 ? void 0 : navItems.map(function (navItem, navItemIndex) { return (React__default.createElement(React__default.Fragment, { key: "".concat(id, "-side-nav-item-").concat(navItemIndex) },
+                                    React__default.createElement("li", { className: classNames({
+                                            "arc-NavigationHeaderSideMenu--separator": navItem.isSeparator,
+                                        }, suffixModifier("arc-NavigationHeaderSideMenu--separatorOn", menuColorConfig.menuColorType)) },
+                                        React__default.createElement(SideMenuNavItem, { navItem: navItem })))); })))),
+                            children && (React__default.createElement(SideMenuNavSection, null, children)),
+                            actions && (React__default.createElement(SideMenuActions, { showSeparator: Boolean(navItems || header), actions: actions })))),
+                    footer && (React__default.createElement("div", { className: "arc-NavigationHeaderSideMenu-footer" }, footer)))))));
+};
+
+var NavigationHeaderNavLink = function (_a) {
+    var ref = _a.ref, text = _a.text, onClick = _a.onClick, href = _a.href, borderRadiusSize = _a.borderRadiusSize;
     var surface = useContext(Context).surface;
-    return (React__default.createElement("a", { "aria-label": text, href: href, onClick: onClick, className: classNames("arc-NavigationHeaderMenuLink", suffixModifier("arc-NavigationHeaderMenuLink--on", surface), suffixModifier("arc-NavigationHeaderMenuLink--size", size)) },
-        React__default.createElement("div", { className: "arc-NavigationHeaderMenuLink-text" }, text),
-        React__default.createElement("span", { className: "arc-NavigationHeaderMenuLink-icon" },
-            size === "s" && (React__default.createElement("div", { className: "arc-NavigationHeaderMenuLink-smallIconContainer" },
-                React__default.createElement(ThemeIcon, { icon: "navigationHeaderMenuLinkSmall" }))),
-            size === "l" && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Visible, { xs: true, s: true },
-                    React__default.createElement(ThemeIcon, { size: 20, icon: "navigationHeaderMenuLinkLarge" })),
-                React__default.createElement(Visible, { m: true, l: true },
-                    React__default.createElement(ThemeIcon, { size: 24, icon: "navigationHeaderMenuLinkLarge" })),
-                React__default.createElement(Visible, { xl: true, xxl: true },
-                    React__default.createElement(ThemeIcon, { size: 28, icon: "navigationHeaderMenuLinkLarge" })))))));
+    return (React__default.createElement(SemanticLink, { ref: ref, href: href, onClick: onClick, className: classNames("arc-NavigationHeaderNavLink", suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
+        React__default.createElement(Text, null, text)));
+};
+
+var NavigationHeaderDropdown = function (_a) {
+    var children = _a.children, trigger = _a.trigger, ariaLabel = _a.ariaLabel, tooltip = _a.tooltip, onClick = _a.onClick;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var triggerRef = useRef(null);
+    var containerRef = useRef(null);
+    var interactionMode = useInteractionMode().interactionMode;
+    useTriggerHidden({
+        triggerEl: triggerRef.current,
+        onTriggerHidden: function () {
+            setIsOpen(false);
+        },
+    });
+    // if focus isnt going anywhere else and closed via keyboard, return focus to the trigger
+    var onCloseAutoFocus = function () {
+        var _a, _b;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY" &&
+            interactionMode === "keyboard") {
+            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    // Only count it as an outside interaction if the trigger isnt being clicked.
+    var handleOutSideInteraction = function (event) {
+        var _a;
+        if (!((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.currentTarget))) {
+            setIsOpen(false);
+        }
+    };
+    // Find the first focusable element.
+    var focusOnFirstElement = function () {
+        var _a;
+        (_a = getFocusableElements(containerRef.current)[0]) === null || _a === void 0 ? void 0 : _a.focus({
+            preventScroll: true,
+        });
+    };
+    var toggleVisibility = function (e) {
+        onClick && onClick(e);
+        setIsOpen(function (isOpen) { return !isOpen; });
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Popover, { useBespokeTrigger: true, constrainToViewport: false, align: "center", background: "light", arrow: true, sideOffset: 12, alignOffset: 0, open: isOpen, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: focusOnFirstElement, onEscapeKeyDown: handleOutSideInteraction, onFocusOutside: handleOutSideInteraction, onInteractOutside: handleOutSideInteraction, onPointerDownOutside: handleOutSideInteraction, content: React__default.createElement("div", { ref: containerRef }, children), className: "arc-NavigationHeaderDropdown" }, tooltip ? (React__default.createElement(Tooltip, { asChild: true, title: tooltip, alignContent: "center", delayDuration: DELAY_DURATION, side: "bottom" },
+            React__default.createElement(NavigationHeaderButton, { isPadded: false, ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-describedby": undefined, onClick: toggleVisibility }, trigger))) : (React__default.createElement(NavigationHeaderButton, { ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", isActive: isOpen, onClick: toggleVisibility }, trigger)))));
+};
+
+var NavigationHeaderPanelHeading = function (_a) {
+    var heading = _a.heading, supportingText = _a.supportingText, link = _a.link, props = __rest(_a, ["heading", "supportingText", "link"]);
+    return (React__default.createElement("div", __assign({ className: "arc-NavigationHeaderPanelHeading" }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-NavigationHeaderPanelHeading-grid" },
+            React__default.createElement("div", { className: "arc-NavigationHeaderPanelHeading-text" },
+                React__default.createElement(Heading, { level: "2", size: "m" }, heading)),
+            React__default.createElement("div", { className: "arc-NavigationHeaderPanelHeading-cta" }, link && (React__default.createElement(ButtonV2, { buttonStyle: "secondary", ariaLabel: link.ariaLabel, href: link.href, onClick: link.onClick, label: link.text })))),
+        React__default.createElement(VerticalSpace, { size: "4" }),
+        React__default.createElement(Text, { size: "s", tone: "muted" }, supportingText)));
+};
+
+var _a$1 = createNavigationHeaderContext("NavigationHeaderSubnav sub components must be used within NavigationHeaderSubnav"), SubNavContext = _a$1[0], useSubNavContext = _a$1[1];
+
+var NavigationHeaderSubnav = function (_a) {
+    var children = _a.children, onOpenChange = _a.onOpenChange;
+    var id = useUniqueString("subnav");
+    var rootRef = useRef(null);
+    var triggerRef = useRef(null);
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var value = useMemo(function () { return ({ id: id, triggerRef: triggerRef, rootRef: rootRef, isOpen: isOpen, setIsOpen: setIsOpen, onOpenChange: onOpenChange }); }, [id, isOpen, onOpenChange]);
+    return (React__default.createElement(SubNavContext.Provider, { value: value },
+        React__default.createElement("div", { ref: rootRef }, children)));
+};
+
+var NavigationHeaderSubnavTrigger = function (_a) {
+    var _b;
+    var children = _a.children, asChild = _a.asChild, onClick = _a.onClick, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "asChild", "onClick", "ariaLabel"]);
+    var subNavContext = useSubNavContext();
+    var onTriggerClick = function (e) {
+        var _a;
+        onClick && onClick(e);
+        subNavContext.setIsOpen(!subNavContext.isOpen);
+        (_a = subNavContext.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(subNavContext, !subNavContext.isOpen);
+    };
+    useTriggerHidden({
+        triggerEl: (_b = subNavContext.triggerRef) === null || _b === void 0 ? void 0 : _b.current,
+        onTriggerHidden: function () {
+            var _a;
+            subNavContext.setIsOpen(false);
+            (_a = subNavContext.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(subNavContext, false);
+        },
+    });
+    if (asChild) {
+        return React__default.cloneElement(children, __assign(__assign({ onClick: function (e) {
+                var _a, _b;
+                onTriggerClick(e);
+                (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }, ref: subNavContext.triggerRef }, props), children.props));
+    }
+    return (React__default.createElement(NavigationHeaderButton, { "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-describedby": undefined, onClick: onTriggerClick, ref: subNavContext.triggerRef, "aria-expanded": subNavContext.isOpen, isActive: subNavContext.isOpen }, children));
+};
+
+function hasWindow() {
+  return typeof window !== 'undefined';
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || '').toLowerCase();
+  }
+  // Mocked nodes in testing environments may not be instances of Node. By
+  // returning `#document` an infinite loop won't occur.
+  // https://github.com/floating-ui/floating-ui/issues/2317
+  return '#document';
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle$1(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+}
+const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
+function isTableElement(element) {
+  return tableElements.has(getNodeName(element));
+}
+const topLayerSelectors = [':popover-open', ':modal'];
+function isTopLayer(element) {
+  return topLayerSelectors.some(selector => {
+    try {
+      return element.matches(selector);
+    } catch (_e) {
+      return false;
+    }
+  });
+}
+const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
+const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
+const containValues = ['paint', 'layout', 'strict', 'content'];
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === 'undefined' || !CSS.supports) return false;
+  return CSS.supports('-webkit-backdrop-filter', 'none');
+}
+const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
+function isLastTraversableNode(node) {
+  return lastTraversableNodeNames.has(getNodeName(node));
+}
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+function getAlignment(placement) {
+  return placement.split('-')[1];
+}
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
+  return axis === 'y' ? 'height' : 'width';
+}
+const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
+function getSideAxis(placement) {
+  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+var isClient$1 = typeof document !== 'undefined';
+
+var noop$1 = function noop() {};
+var index$1 = isClient$1 ? useLayoutEffect : noop$1;
+
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const SafeReact$1 = {
+  ...React
+};
+const useInsertionEffect = SafeReact$1.useInsertionEffect;
+const useSafeInsertionEffect = useInsertionEffect || (fn => fn());
+function useEffectEvent(callback) {
+  const ref = React.useRef(() => {
+    if (process.env.NODE_ENV !== "production") {
+      throw new Error('Cannot call an event handler while rendering.');
+    }
+  });
+  useSafeInsertionEffect(() => {
+    ref.current = callback;
+  });
+  return React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return ref.current == null ? void 0 : ref.current(...args);
+  }, []);
+}
+
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case 'top':
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case 'bottom':
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case 'right':
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case 'left':
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case 'start':
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case 'end':
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ *
+ * This export does not have any `platform` interface logic. You will need to
+ * write one for the platform you are using Floating UI with.
+ */
+const computePosition$1 = async (reference, floating, config) => {
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
+  let rects = await platform.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === 'object') {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
+const originSides = /*#__PURE__*/new Set(['left', 'top']);
+
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$2 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$2 = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'size',
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform,
+        elements
+      } = state;
+      const {
+        apply = () => {},
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === 'y';
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === 'top' || side === 'bottom') {
+        heightSide = side;
+        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
+      } else {
+        widthSide = side;
+        heightSide = alignment === 'end' ? 'top' : 'bottom';
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+function getCssDimensions(element) {
+  const css = getComputedStyle$1(element);
+  // In testing environments, the `width` and `height` properties are empty
+  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+
+  // 0, NaN, or Infinity should always fallback to 1.
+
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+
+const noOffsets = /*#__PURE__*/createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle$1(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === 'fixed';
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+
+// Gets the entire size of the scrollable document area, even extending outside
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle$1(body).direction === 'rtl') {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+
+const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
+// Returns the inner client rect, subtracting scrollbars if present.
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === 'viewport') {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === 'document') {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+}
+
+// A "clipping ancestor" is an `overflow` element with the characteristic of
+// clipping (or hiding) child elements. This returns all clipping ancestors
+// of the given element up the tree.
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle$1(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      // Drop non-containing blocks.
+      result = result.filter(ancestor => ancestor !== currentNode);
+    } else {
+      // Record last containing block for next iteration.
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+
+// Gets the maximum area that the element is visible in due to any number of
+// clipping ancestors.
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === 'fixed';
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+
+  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
+  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+  }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
+
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+
+  // Firefox returns the <html> element as the offsetParent if it's non-static,
+  // while Chrome and Safari return the <body> element. The <body> element must
+  // be used to perform the correct calculations even if the <html> element is
+  // non-static.
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+
+// Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+
+const getElementRects = async function (data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
 };
 
-var NavigationHeaderCloseButton = function (_a) {
-    var ref = _a.ref, onClick = _a.onClick, props = __rest(_a, ["ref", "onClick"]);
-    var surface = useContext(Context).surface;
-    return (React__default.createElement("button", __assign({}, props, { ref: ref, "aria-label": "close", onClick: onClick, className: classNames("arc-NavigationHeaderCloseButton", suffixModifier("arc-NavigationHeaderCloseButton--on", surface)) }),
-        React__default.createElement(ThemeIcon, { size: 32, icon: "navigationHeaderClose" })));
+function isRTL(element) {
+  return getComputedStyle$1(element).direction === 'rtl';
+}
+
+const platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+// https://samthor.au/2021/observing-dom/
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1000);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+
+    // Older browsers don't support a `document` as the root and will throw an
+    // error.
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+
+/**
+ * Automatically updates the position of the floating element when necessary.
+ * Should only be called when the floating element is mounted on the DOM or
+ * visible on the screen.
+ * @returns cleanup function that should be invoked when the floating element is
+ * removed from the DOM or hidden from the screen.
+ * @see https://floating-ui.com/docs/autoUpdate
+ */
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === 'function',
+    layoutShift = typeof IntersectionObserver === 'function',
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach(ancestor => {
+    ancestorScroll && ancestor.addEventListener('scroll', update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener('resize', update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver(_ref => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        // Prevent update loops when using the `size` middleware.
+        // https://github.com/floating-ui/floating-ui/issues/1740
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach(ancestor => {
+      ancestorScroll && ancestor.removeEventListener('scroll', update);
+      ancestorResize && ancestor.removeEventListener('resize', update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = offset$2;
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size$1 = size$2;
+
+/**
+ * Computes the `x` and `y` coordinates that will place the floating element
+ * next to a given reference element.
+ */
+const computePosition = (reference, floating, options) => {
+  // This caches the expensive `getClippingElementAncestors` function so that
+  // multiple lifecycle resets re-use the same result. It only lives for a
+  // single call. If other functions become expensive, we can add them as well.
+  const cache = new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition$1(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
 };
 
-var NavigationHeaderBurgerMenu = function (_a) {
-    var navItems = _a.navItems, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo, background = _a.background, onOpenChange = _a.onOpenChange, _b = _a.pathway, pathway = _b === void 0 ? "invert" : _b;
-    var id = useId();
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var triggerRef = useRef(null);
-    var listRef = useRef(null);
-    var interactionMode = useInteractionMode().interactionMode;
-    var _d = useThemeElement(), themeElement = _d[0], setThemeElement = _d[1];
-    var closeMenu = function () {
-        setIsOpen(false);
-    };
-    var focusTriggerElement = function () {
-        if (triggerRef.current && interactionMode === "keyboard") {
-            triggerRef.current.focus();
-        }
-    };
-    useEffect(function () {
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
-    }, [isOpen, onOpenChange]);
-    // Close the menu if the nav or trigger is hidden
-    useEffect(function () {
-        var trigger = triggerRef.current;
-        var resizeObserver = new ResizeObserver(function (entries) {
-            var entry = entries[0];
-            if (!checkElementVisibility(entry.target) && isOpen) {
-                setIsOpen(false);
-            }
-        });
-        if (trigger) {
-            resizeObserver.observe(trigger);
-        }
-        return function () {
-            if (trigger) {
-                resizeObserver.unobserve(trigger);
-            }
-        };
-    }, [isOpen, setIsOpen]);
-    var colorScheme = useMemo(function () {
-        var colorConfig = {
-            light: {
-                surface: "light-white",
-                menuColorType: "light",
-            },
-            dark: {
-                surface: "dark-black",
-                menuColorType: "dark",
-            },
-        };
-        switch (background) {
-            case "transparentOnDark":
-            case "ghostedOnDark":
-                return pathway === "invert" ? colorConfig.light : colorConfig.dark;
-            default:
-                return pathway === "invert" ? colorConfig.dark : colorConfig.light;
-        }
-    }, [pathway, background]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Tooltip, { delayDuration: DELAY_DURATION, asChild: true, title: "Menu", side: "bottom" },
-            React__default.createElement(NavigationHeaderButton, { ref: triggerRef, isPadded: false, "aria-expanded": isOpen, "aria-label": isOpen ? "close menu" : "open menu", onClick: function () { return setIsOpen(!isOpen); } },
-                React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-trigger" },
-                    React__default.createElement(ThemeIcon, { icon: "siteHeaderBurger", size: 24 })),
-                React__default.createElement(VisuallyHidden, null, isOpen ? "close menu" : "open menu"))),
-        React__default.createElement("div", { ref: setThemeElement },
-            React__default.createElement(Root, { open: isOpen },
-                React__default.createElement(Portal, { container: themeElement },
-                    React__default.createElement(Overlay, { className: "arc-NavigationHeaderBurgerMenu-overlay" },
-                        React__default.createElement(Content, { "aria-describedby": undefined, className: classNames("arc-NavigationHeaderBurgerMenu-slider", suffixModifier("arc-NavigationHeaderBurgerMenu-slider--on", colorScheme.menuColorType)), onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeMenu, onInteractOutside: closeMenu, "aria-modal": "true" },
-                            React__default.createElement(Surface, { growVertically: true, isTransparent: true, background: colorScheme.surface },
-                                React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-container" },
-                                    React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-mainContent" },
-                                        React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-header" },
-                                            React__default.createElement(Title, null,
-                                                React__default.createElement(VisuallyHidden, null, "Navigation menu")),
-                                            React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-closeButtonContainer" },
-                                                React__default.createElement(NavigationHeaderCloseButton, { onClick: closeMenu })),
-                                            React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoContainer" },
-                                                React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoWrapper" },
-                                                    React__default.createElement(NavigationHeaderLogo, __assign({}, logo))))),
-                                        header && (React__default.createElement("div", { className: classNames("arc-NavigationHeaderBurgerMenu-topContent", {
-                                                "arc-NavigationHeaderBurgerMenu-topContent--bottomSpacing": !navItems,
-                                            }) }, header)),
-                                        navItems && (React__default.createElement("ul", { ref: listRef, className: "arc-NavigationHeaderBurgerMenu-list" }, navItems.map(function (navItem, navItemIndex) { return (React__default.createElement(React__default.Fragment, { key: "".concat(id, "-burger-nav-item-").concat(navItemIndex) },
-                                            React__default.createElement("li", { className: "arc-NavigationHeaderBurgerMenu-listItem" },
-                                                React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-listItemContent" },
-                                                    (navItem.type === "link" ||
-                                                        navItem.type === "meatball") && (React__default.createElement(NavigationHeaderMenuLink, { href: navItem.href, onClick: navItem.onClick, text: navItem.text })),
-                                                    (navItem.type === "subnav" ||
-                                                        navItem.type === "dropdown") && (React__default.createElement(NavigationHeaderDisclosure, { heading: navItem.text }, navItem.items.map(function (subNavItem, subNavItemIndex) { return (React__default.createElement(NavigationHeaderMenuLink, { size: "s", key: "".concat(id, "-").concat(navItemIndex, "-burger-sub-nav-item-").concat(subNavItemIndex), href: subNavItem.href, onClick: subNavItem.onClick, text: subNavItem.text })); }))))))); }))),
-                                        actions && (React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-actionsContainer" },
-                                            React__default.createElement("div", { className: classNames("arc-NavigationHeaderBurgerMenu-actions", {
-                                                    "arc-NavigationHeaderBurgerMenu-actions--seperator": navItems || header,
-                                                }) }, actions.map(function (props, i) { return (React__default.createElement(NavigationHeaderInlineAction, __assign({ key: "".concat(id, "-action-{").concat(i, "}") }, props))); }))))),
-                                    footer && (React__default.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-footer" }, footer)))))))))));
-};
+var isClient = typeof document !== 'undefined';
 
-var NavigationHeaderNavLink = function (_a) {
-    var text = _a.text, onClick = _a.onClick, href = _a.href, _b = _a.borderRadiusSize, borderRadiusSize = _b === void 0 ? "s" : _b;
-    var surface = useContext(Context).surface;
-    return (React__default.createElement("a", { href: href, onClick: onClick, className: classNames("arc-NavigationHeaderNavLink", suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
-        React__default.createElement(Text, null, text)));
-};
+var noop = function noop() {};
+var index = isClient ? useLayoutEffect : noop;
 
-// src/get-focusable-elements/get-focusable-elements.ts
-var getFocusableElements = (rootElement) => {
-  const nodes = [];
-  const walker = document.createTreeWalker(
-    rootElement,
-    NodeFilter.SHOW_ELEMENT,
-    {
-      acceptNode: (node) => {
-        const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
-        if (node.disabled || node.hidden || isHiddenInput || !checkElementVisibility(node))
-          return NodeFilter.FILTER_SKIP;
-        return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+// Fork of `fast-deep-equal` that only does the comparisons we need and compares
+// functions
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a !== typeof b) {
+    return false;
+  }
+  if (typeof a === 'function' && a.toString() === b.toString()) {
+    return true;
+  }
+  let length;
+  let i;
+  let keys;
+  if (a && b && typeof a === 'object') {
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length !== b.length) return false;
+      for (i = length; i-- !== 0;) {
+        if (!deepEqual(a[i], b[i])) {
+          return false;
+        }
       }
+      return true;
     }
-  );
-  while (walker.nextNode()) nodes.push(walker.currentNode);
-  return nodes;
-};
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) {
+      return false;
+    }
+    for (i = length; i-- !== 0;) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
+        return false;
+      }
+    }
+    for (i = length; i-- !== 0;) {
+      const key = keys[i];
+      if (key === '_owner' && a.$$typeof) {
+        continue;
+      }
+      if (!deepEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
 
-var NavigationHeaderContext = createContext(null);
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
 
-var NavigationHeaderDropdown = function (_a) {
-    var children = _a.children, trigger = _a.trigger, ariaLabel = _a.ariaLabel, tooltip = _a.tooltip;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var triggerRef = useRef(null);
-    var containerRef = useRef(null);
-    var _c = useState(false), isTooltipOpen = _c[0], setIsTooltipOpen = _c[1];
-    var interactionMode = useInteractionMode().interactionMode;
-    var navigationHeaderContext = useContext(NavigationHeaderContext);
-    // Close the dropdown if the nav or trigger is hidden
-    useEffect(function () {
-        var trigger = triggerRef.current;
-        var resizeObserver = new ResizeObserver(function (entries) {
-            var entry = entries[0];
-            if (!checkElementVisibility(entry.target) && isOpen) {
-                setIsOpen(false);
-                setIsTooltipOpen(false);
-            }
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
+function useLatestRef(value) {
+  const ref = React.useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+/**
+ * Provides data to position a floating element.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+function useFloating$1(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    placement = 'bottom',
+    strategy = 'absolute',
+    middleware = [],
+    platform,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
+    whileElementsMounted,
+    open
+  } = options;
+  const [data, setData] = React.useState({
+    x: 0,
+    y: 0,
+    strategy,
+    placement,
+    middlewareData: {},
+    isPositioned: false
+  });
+  const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
+  if (!deepEqual(latestMiddleware, middleware)) {
+    setLatestMiddleware(middleware);
+  }
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
+  const setReference = React.useCallback(node => {
+    if (node !== referenceRef.current) {
+      referenceRef.current = node;
+      _setReference(node);
+    }
+  }, []);
+  const setFloating = React.useCallback(node => {
+    if (node !== floatingRef.current) {
+      floatingRef.current = node;
+      _setFloating(node);
+    }
+  }, []);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const hasWhileElementsMounted = whileElementsMounted != null;
+  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const platformRef = useLatestRef(platform);
+  const openRef = useLatestRef(open);
+  const update = React.useCallback(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const config = {
+      placement,
+      strategy,
+      middleware: latestMiddleware
+    };
+    if (platformRef.current) {
+      config.platform = platformRef.current;
+    }
+    computePosition(referenceRef.current, floatingRef.current, config).then(data => {
+      const fullData = {
+        ...data,
+        // The floating element's position may be recomputed while it's closed
+        // but still mounted (such as when transitioning out). To ensure
+        // `isPositioned` will be `false` initially on the next open, avoid
+        // setting it to `true` when `open === false` (must be specified).
+        isPositioned: openRef.current !== false
+      };
+      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+        dataRef.current = fullData;
+        ReactDOM.flushSync(() => {
+          setData(fullData);
         });
-        if (trigger) {
-            resizeObserver.observe(trigger);
-        }
-        return function () {
-            if (trigger) {
-                resizeObserver.unobserve(trigger);
-            }
-        };
-    }, [isOpen, setIsOpen, navigationHeaderContext]);
-    // if focus isnt going anywhere else and closed via keyboard, return focus to the trigger
-    var onCloseAutoFocus = function () {
-        var _a, _b;
-        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY" &&
-            interactionMode === "keyboard") {
-            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
+      }
+    });
+  }, [latestMiddleware, placement, strategy, platformRef, openRef]);
+  index(() => {
+    if (open === false && dataRef.current.isPositioned) {
+      dataRef.current.isPositioned = false;
+      setData(data => ({
+        ...data,
+        isPositioned: false
+      }));
+    }
+  }, [open]);
+  const isMountedRef = React.useRef(false);
+  index(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
     };
-    // Only count it as an outside interaction if the trigger isnt being clicked.
-    var handleOutSideInteraction = function (event) {
-        var _a;
-        if (!((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.currentTarget))) {
-            setIsOpen(false);
-        }
+  }, []);
+  index(() => {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
+      if (whileElementsMountedRef.current) {
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+      }
+      update();
+    }
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
+  const refs = React.useMemo(() => ({
+    reference: referenceRef,
+    floating: floatingRef,
+    setReference,
+    setFloating
+  }), [setReference, setFloating]);
+  const elements = React.useMemo(() => ({
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
     };
-    // Find the first focusable element.
-    var focusOnFirstElement = function () {
-        getFocusableElements(containerRef.current)[0].focus();
+    if (!elements.floating) {
+      return initialStyles;
+    }
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...(getDPR(elements.floating) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy,
+      left: x,
+      top: y
     };
-    var toggleVisibility = function () { return setIsOpen(function (isOpen) { return !isOpen; }); };
-    return (React__default.createElement(Popover, { useBespokeTrigger: true, align: "center", background: "light", arrow: true, sideOffset: 12, alignOffset: 0, open: isOpen, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: focusOnFirstElement, onEscapeKeyDown: handleOutSideInteraction, onFocusOutside: handleOutSideInteraction, onInteractOutside: handleOutSideInteraction, onPointerDownOutside: handleOutSideInteraction, content: React__default.createElement("div", { ref: containerRef },
-            React__default.createElement("ul", { className: "arc-NavigationHeaderDropdown-navList" }, children)) }, tooltip ? (React__default.createElement(Tooltip, { asChild: true, title: tooltip, open: isTooltipOpen, alignContent: "center", side: "bottom" },
-        React__default.createElement(NavigationHeaderButton, { ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-describedby": undefined, isActive: isOpen, onClick: toggleVisibility, onMouseEnter: function () { return setIsTooltipOpen(!isOpen); }, onMouseLeave: function () { return setIsTooltipOpen(false); }, onFocus: function () { return setIsTooltipOpen(true); }, onBlur: function () { return setIsTooltipOpen(false); } }, trigger))) : (React__default.createElement(NavigationHeaderButton, { ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", isActive: isOpen, onClick: toggleVisibility }, trigger))));
+  }, [strategy, transform, elements.floating, data.x, data.y]);
+  return React.useMemo(() => ({
+    ...data,
+    update,
+    refs,
+    elements,
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = (options, deps) => ({
+  ...offset$1(options),
+  options: [options, deps]
+});
+
+/**
+ * Provides data that allows you to change the size of the floating element —
+ * for instance, prevent it from overflowing the clipping boundary or match the
+ * width of the reference element.
+ * @see https://floating-ui.com/docs/size
+ */
+const size = (options, deps) => ({
+  ...size$1(options),
+  options: [options, deps]
+});
+
+// https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379
+const SafeReact = {
+  ...React
 };
 
-var NavigationHeaderContainer = function (_a) {
-    var _b = _a.isPill, isPill = _b === void 0 ? false : _b, _c = _a.isExtended, isExtended = _c === void 0 ? false : _c, _d = _a.isFluid, isFluid = _d === void 0 ? false : _d, background = _a.background, children = _a.children;
-    var backgrounds = {
-        light: {
-            surface: "light-white",
-            classSuffix: "backgroundLight",
-        },
-        neutral: {
-            surface: "light-white",
-            classSuffix: "backgroundNeutral",
-        },
-        lightElevated: {
-            surface: "light-white",
-            classSuffix: "backgroundLightElevated",
-        },
-        transparentOnDark: {
-            surface: "dark-black",
-            classSuffix: "backgroundTransparent",
-        },
-        transparentOnLight: {
-            surface: "light-white",
-            classSuffix: "backgroundTransparent",
-        },
-        ghostedOnLight: {
-            surface: "light-white",
-            classSuffix: "backgroundGhosted",
-        },
-        ghostedOnDark: {
-            surface: "dark-black",
-            classSuffix: "backgroundGhosted",
-        },
-    };
-    return (React__default.createElement("div", { "data-testid": "NavigationHeader-container", className: classNames("arc-NavigationHeaderContainer", "arc-NavigationHeaderContainer--".concat(backgrounds[background].classSuffix), {
-            "arc-NavigationHeaderContainer--pill": isPill,
-            "arc-NavigationHeaderContainer--fullWidth": !isPill,
-            "arc-NavigationHeaderContainer--regular": !isExtended,
-            "arc-NavigationHeaderContainer--extended": isExtended,
-            "arc-NavigationHeaderContainer--fluid": isFluid,
-        }) },
-        React__default.createElement("div", { className: "arc-NavigationHeaderContainer-outer" },
-            React__default.createElement(Surface, { isTransparent: true, background: backgrounds[background].surface },
-                React__default.createElement("div", { className: "arc-NavigationHeaderContainer-contentWrapper" },
-                    React__default.createElement("div", { className: "arc-NavigationHeaderContainer-inner" },
-                        React__default.createElement("div", { className: "arc-NavigationHeaderContainer-content" }, children)))))));
+let serverHandoffComplete = false;
+let count = 0;
+const genId = () => // Ensure the id is unique with multiple independent versions of Floating UI
+// on <React 18
+"floating-ui-" + Math.random().toString(36).slice(2, 6) + count++;
+function useFloatingId() {
+  const [id, setId] = React.useState(() => serverHandoffComplete ? genId() : undefined);
+  index$1(() => {
+    if (id == null) {
+      setId(genId());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  React.useEffect(() => {
+    serverHandoffComplete = true;
+  }, []);
+  return id;
+}
+const useReactId = SafeReact.useId;
+
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ * @see https://floating-ui.com/docs/react-utils#useid
+ */
+const useId = useReactId || useFloatingId;
+
+let devMessageSet;
+if (process.env.NODE_ENV !== "production") {
+  devMessageSet = /*#__PURE__*/new Set();
+}
+function error() {
+  var _devMessageSet3;
+  for (var _len2 = arguments.length, messages = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    messages[_key2] = arguments[_key2];
+  }
+  const message = "Floating UI: " + messages.join(' ');
+  if (!((_devMessageSet3 = devMessageSet) != null && _devMessageSet3.has(message))) {
+    var _devMessageSet4;
+    (_devMessageSet4 = devMessageSet) == null || _devMessageSet4.add(message);
+    console.error(message);
+  }
+}
+
+function createEventEmitter() {
+  const map = new Map();
+  return {
+    emit(event, data) {
+      var _map$get;
+      (_map$get = map.get(event)) == null || _map$get.forEach(listener => listener(data));
+    },
+    on(event, listener) {
+      if (!map.has(event)) {
+        map.set(event, new Set());
+      }
+      map.get(event).add(listener);
+    },
+    off(event, listener) {
+      var _map$get2;
+      (_map$get2 = map.get(event)) == null || _map$get2.delete(listener);
+    }
+  };
+}
+
+const FloatingNodeContext = /*#__PURE__*/React.createContext(null);
+const FloatingTreeContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ * Returns `null` for top-level floating elements.
+ */
+const useFloatingParentNodeId = () => {
+  var _React$useContext;
+  return ((_React$useContext = React.useContext(FloatingNodeContext)) == null ? void 0 : _React$useContext.id) || null;
 };
 
-var NavigationHeaderSubnav = function (_a) {
-    var _b;
-    var trigger = _a.trigger, ariaLabel = _a.ariaLabel, children = _a.children;
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var navigationHeaderContext = useContext(NavigationHeaderContext);
-    var containerRef = useRef(null);
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+const useFloatingTree = () => React.useContext(FloatingTreeContext);
+
+function useFloatingRootContext(options) {
+  const {
+    open = false,
+    onOpenChange: onOpenChangeProp,
+    elements: elementsProp
+  } = options;
+  const floatingId = useId();
+  const dataRef = React.useRef({});
+  const [events] = React.useState(() => createEventEmitter());
+  const nested = useFloatingParentNodeId() != null;
+  if (process.env.NODE_ENV !== "production") {
+    const optionDomReference = elementsProp.reference;
+    if (optionDomReference && !isElement(optionDomReference)) {
+      error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `refs.setPositionReference()`', 'instead.');
+    }
+  }
+  const [positionReference, setPositionReference] = React.useState(elementsProp.reference);
+  const onOpenChange = useEffectEvent((open, event, reason) => {
+    dataRef.current.openEvent = open ? event : undefined;
+    events.emit('openchange', {
+      open,
+      event,
+      reason,
+      nested
+    });
+    onOpenChangeProp == null || onOpenChangeProp(open, event, reason);
+  });
+  const refs = React.useMemo(() => ({
+    setPositionReference
+  }), []);
+  const elements = React.useMemo(() => ({
+    reference: positionReference || elementsProp.reference || null,
+    floating: elementsProp.floating || null,
+    domReference: elementsProp.reference
+  }), [positionReference, elementsProp.reference, elementsProp.floating]);
+  return React.useMemo(() => ({
+    dataRef,
+    open,
+    onOpenChange,
+    elements,
+    events,
+    floatingId,
+    refs
+  }), [open, onOpenChange, elements, events, floatingId, refs]);
+}
+
+/**
+ * Provides data to position a floating element and context to add interactions.
+ * @see https://floating-ui.com/docs/useFloating
+ */
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    nodeId
+  } = options;
+  const internalRootContext = useFloatingRootContext({
+    ...options,
+    elements: {
+      reference: null,
+      floating: null,
+      ...options.elements
+    }
+  });
+  const rootContext = options.rootContext || internalRootContext;
+  const computedElements = rootContext.elements;
+  const [_domReference, setDomReference] = React.useState(null);
+  const [positionReference, _setPositionReference] = React.useState(null);
+  const optionDomReference = computedElements == null ? void 0 : computedElements.domReference;
+  const domReference = optionDomReference || _domReference;
+  const domReferenceRef = React.useRef(null);
+  const tree = useFloatingTree();
+  index$1(() => {
+    if (domReference) {
+      domReferenceRef.current = domReference;
+    }
+  }, [domReference]);
+  const position = useFloating$1({
+    ...options,
+    elements: {
+      ...computedElements,
+      ...(positionReference && {
+        reference: positionReference
+      })
+    }
+  });
+  const setPositionReference = React.useCallback(node => {
+    const computedPositionReference = isElement(node) ? {
+      getBoundingClientRect: () => node.getBoundingClientRect(),
+      getClientRects: () => node.getClientRects(),
+      contextElement: node
+    } : node;
+    // Store the positionReference in state if the DOM reference is specified externally via the
+    // `elements.reference` option. This ensures that it won't be overridden on future renders.
+    _setPositionReference(computedPositionReference);
+    position.refs.setReference(computedPositionReference);
+  }, [position.refs]);
+  const setReference = React.useCallback(node => {
+    if (isElement(node) || node === null) {
+      domReferenceRef.current = node;
+      setDomReference(node);
+    }
+
+    // Backwards-compatibility for passing a virtual element to `reference`
+    // after it has set the DOM reference.
+    if (isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    // Don't allow setting virtual elements using the old technique back to
+    // `null` to support `positionReference` + an unstable `reference`
+    // callback ref.
+    node !== null && !isElement(node)) {
+      position.refs.setReference(node);
+    }
+  }, [position.refs]);
+  const refs = React.useMemo(() => ({
+    ...position.refs,
+    setReference,
+    setPositionReference,
+    domReference: domReferenceRef
+  }), [position.refs, setReference, setPositionReference]);
+  const elements = React.useMemo(() => ({
+    ...position.elements,
+    domReference: domReference
+  }), [position.elements, domReference]);
+  const context = React.useMemo(() => ({
+    ...position,
+    ...rootContext,
+    refs,
+    elements,
+    nodeId
+  }), [position, refs, elements, nodeId, rootContext]);
+  index$1(() => {
+    rootContext.dataRef.current.floatingContext = context;
+    const node = tree == null ? void 0 : tree.nodesRef.current.find(node => node.id === nodeId);
+    if (node) {
+      node.context = context;
+    }
+  });
+  return React.useMemo(() => ({
+    ...position,
+    context,
+    refs,
+    elements
+  }), [position, refs, elements, context]);
+}
+
+var _a = createNavigationHeaderContext("NavigationHeader sub components must be used within NavigationHeader"), NavigationHeaderContext = _a[0], useNavigationHeaderContext = _a[1];
+
+var NavigationHeaderSubnavContent = function (_a) {
+    var children = _a.children, background = _a.background, menuTitle = _a.menuTitle;
+    var navigationHeaderContext = useNavigationHeaderContext();
+    var subNavContext = useSubNavContext();
     var dialogRef = useRef(null);
-    var listRef = useRef(null);
-    var triggerRef = useRef(null);
+    var childContainerRef = useRef(null);
+    var _b = useThemeElement(), themeElement = _b[0], setThemeElement = _b[1];
+    var _c = useState("pointer"), interactionMode = _c[0], setInterActionMode = _c[1];
+    var isOpen = subNavContext.isOpen, rootRef = subNavContext.rootRef, setIsOpen = subNavContext.setIsOpen, id = subNavContext.id;
+    var _d = useFloating({
+        whileElementsMounted: autoUpdate,
+        elements: {
+            reference: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarEl,
+        },
+        placement: "bottom-end",
+        middleware: [
+            size({
+                apply: function (_a) {
+                    var rects = _a.rects, elements = _a.elements;
+                    Object.assign(elements.floating.style, {
+                        width: "".concat(rects.reference.width, "px"),
+                    });
+                },
+            }),
+            offset(navigationHeaderContext.isPill ? 12 : 0),
+        ],
+    }), subNavRefs = _d.refs, subNavFloatStyles = _d.floatingStyles;
     // if focus isnt going anywhere else, return it to the trigger
     var onCloseAutoFocus = function () {
-        var _a, _b;
-        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY") {
-            (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a, _b, _c;
+        if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.tagName) === "BODY" &&
+            interactionMode === "keyboard") {
+            (_c = (_b = subNavContext.triggerRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
     };
     // close when escape key is pressed
     var onEscapeKeyDown = function () {
+        var _a;
+        setInterActionMode("keyboard");
         setIsOpen(false);
-        navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive(false);
+        (_a = subNavContext.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(subNavContext, false);
+    };
+    // close when escape key is pressed
+    var onInteractOutside = function () {
+        setInterActionMode("pointer");
     };
     // Find the first focusable element.
-    var onOpenAutoFocus = function () {
-        getFocusableElements(listRef.current)[0].focus();
+    var onOpenAutoFocus = function (e) {
+        e.preventDefault();
+        var firstFocusable = getFocusableElements(childContainerRef.current)[0];
+        if (firstFocusable) {
+            firstFocusable.focus({ preventScroll: true });
+        }
     };
-    // Toggle visibility when trigger is clicked
-    var onTriggerClick = function () {
-        setIsOpen(!isOpen);
-        navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive(!isOpen);
+    var onContainerMouseDown = function () {
+        setInterActionMode("pointer");
+    };
+    var onContainerKeyDown = function () {
+        setInterActionMode("keyboard");
     };
     useEffect(function () {
-        var handleClickOutside = function (event) {
+        if (!isOpen)
+            return;
+        var clickListener = function (event) {
+            var _a;
             var target = event.target;
-            var isThisTriggerClicked = containerRef.current && containerRef.current.contains(target);
-            var otherSubNavItemClicked = !isThisTriggerClicked && target.getAttribute("data-sub-nav-item");
-            var outSideSubnavClicked = !otherSubNavItemClicked &&
-                dialogRef.current &&
-                !dialogRef.current.contains(target);
-            // dont do anything if the trigger was clicked, toggling is already handled.
+            var isThisTriggerClicked = rootRef.current && rootRef.current.contains(target);
+            var outSideSubnavClicked = dialogRef.current && !dialogRef.current.contains(target);
+            // dont do anything if the click was on the trigger.
             if (isThisTriggerClicked) {
                 return;
             }
-            // just hide the current menu if another one was clicked
-            if (otherSubNavItemClicked) {
-                setIsOpen(false);
-            }
-            // close and reset the navbar if clicking outside the dialog
+            // close if clicking outside the dialog
             if (outSideSubnavClicked) {
                 setIsOpen(false);
-                navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive(false);
+                (_a = subNavContext.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(subNavContext, false);
             }
         };
-        document.addEventListener("click", handleClickOutside);
-        return function () {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, [setIsOpen, navigationHeaderContext]);
-    // Close the subnav if the trigger is hidden and the submenu is open
-    useEffect(function () {
-        var trigger = triggerRef.current;
-        var resizeObserver = new ResizeObserver(function (entries) {
-            var entry = entries[0];
-            if (!checkElementVisibility(entry.target) && isOpen) {
-                setIsOpen(false);
-                navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.setIsSubMenuItemActive(false);
-            }
-        });
-        if (trigger) {
-            resizeObserver.observe(trigger);
-        }
+        document.addEventListener("click", clickListener);
         return function () {
-            if (trigger) {
-                resizeObserver.unobserve(trigger);
-            }
+            document.removeEventListener("click", clickListener);
         };
-    }, [isOpen, setIsOpen, navigationHeaderContext]);
-    return (React__default.createElement("div", { ref: containerRef },
-        React__default.createElement(NavigationHeaderButton, { "data-sub-nav-item": true, ref: triggerRef, isActive: isOpen, "aria-label": ariaLabel, onClick: onTriggerClick }, trigger),
-        React__default.createElement(Root, { open: isOpen, modal: false },
-            React__default.createElement(Portal, { container: (_b = navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarPortalRef) === null || _b === void 0 ? void 0 : _b.current },
-                React__default.createElement("div", { className: "arc-NavigationHeaderSubnav" },
-                    React__default.createElement("div", { className: "arc-NavigationHeaderSubnav-container" },
-                        React__default.createElement(NavigationHeaderContainer, { isExtended: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isExtended, isFluid: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isFluid, isPill: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isPill, background: "neutral" },
-                            React__default.createElement(Content, { ref: dialogRef, "aria-describedby": undefined, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
-                                React__default.createElement("div", { className: "arc-NavigationHeaderSubnav-content" },
-                                    React__default.createElement(VisuallyHidden, null,
-                                        React__default.createElement(Title, null,
-                                            trigger,
-                                            " sub menu")),
-                                    React__default.createElement("ul", { ref: listRef, className: "arc-NavigationHeaderSubnav-navList" }, children))))))))));
+    }, [isOpen, setIsOpen, rootRef, id, subNavContext]);
+    return (React__default.createElement("div", { ref: setThemeElement, onMouseDown: onContainerMouseDown, onKeyDown: onContainerKeyDown },
+        React__default.createElement(Root, { open: subNavContext.isOpen, modal: false },
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement("div", { className: "arc-NavigationHeaderSubnavContent", ref: subNavRefs.setFloating, style: subNavFloatStyles },
+                    React__default.createElement(NavigationHeaderContainer, { isExtended: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isExtended, isFluid: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isFluid, isPill: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.isPill, backgroundColor: background },
+                        React__default.createElement(Content, { className: "arc-NavigationHeaderSubnavContent-dialog", ref: dialogRef, "aria-describedby": undefined, onInteractOutside: onInteractOutside, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
+                            React__default.createElement(VisuallyHidden, null,
+                                React__default.createElement(Title, null, menuTitle)),
+                            React__default.createElement("div", { ref: childContainerRef }, children))),
+                    React__default.createElement(VerticalSpace, null))))));
+};
+
+var NavigationHeaderMegaMenu = function (_a) {
+    var tabs = _a.tabs, panelHeading = _a.panelHeading, featureCards = _a.featureCards, onClick = _a.onClick, onOpenChange = _a.onOpenChange, ariaLabel = _a.ariaLabel, text = _a.text;
+    var id = useId$1();
+    var getColumns = function (tab) { return [
+        tab.items.filter(function (_, i) { return i % 2 === 0; }),
+        tab.items.filter(function (_, i) { return i % 2 === 1; }),
+    ]; };
+    return (React__default.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
+        React__default.createElement(NavigationHeaderSubnavTrigger, { ariaLabel: ariaLabel, onClick: onClick }, text),
+        React__default.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: "".concat(text, " sub menu}") },
+            React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu" },
+                React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-navCol" },
+                    React__default.createElement(NavigationHeaderPanelHeading, __assign({}, panelHeading)),
+                    React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { orientation: "vertical", className: "arc-NavigationHeaderMegaMenu-nav", defaultValue: "".concat(tabs[0].triggerText, "-").concat(0) },
+                        React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-tabs" },
+                            React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: "arc-NavigationHeaderMegaMenu-tabList" }, tabs.map(function (item, i) { return (React__default.createElement("div", { key: "".concat(id, "-NavigationHeader-megamenu-trigger-").concat(i), className: "arc-NavigationHeaderMegaMenu-tabWrapper" },
+                                React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: "arc-NavigationHeaderMegaMenu-tab", "aria-label": item.triggerText, value: "".concat(item.triggerText, "-").concat(i), onClick: item.onClick },
+                                    React__default.createElement(Heading, { level: "3", size: "xs" }, item.triggerText)))); }))),
+                        React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-mainContent" },
+                            React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-linksPanel" }, tabs.map(function (tab, i) { return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { tabIndex: -1, className: "arc-NavigationHeaderMegaMenu-content", key: "".concat(id, "-NavigationHeader-megamenu-content-").concat(i), value: "".concat(tab.triggerText, "-").concat(i) },
+                                React__default.createElement(NavigationHeaderPanelLink, __assign({}, tab.panelLink, { icon: tab.icon })),
+                                React__default.createElement(VerticalSpace, { size: "32" }),
+                                React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-linksContainer" }, getColumns(tab).map(function (items, itemIndex) { return (React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-linksColumn", key: "column-".concat(itemIndex) }, items.map(function (item, i) { return (React__default.createElement(NavigationHeaderCollapsingNavList, __assign({}, item, { defaultOpen: true, revealLinkIconOnHover: true, autoFocusOnExpand: false, background: "light", key: "".concat(id, "-NavigationHeader-megamenu-item-").concat(i) }))); }))); })))); }))))),
+                React__default.createElement("div", { className: "arc-NavigationHeaderMegaMenu-featureCol" }, featureCards && (React__default.createElement("div", { className: classNames("arc-NavigationHeaderMegaMenu-featureCardsPanel", {
+                        "arc-NavigationHeaderMegaMenu-featureCardsPanel--equalWidthColumns": featureCards.length <= 3,
+                        "arc-NavigationHeaderMegaMenu-featureCardsPanel--manyColumns": featureCards.length > 3,
+                    }) }, featureCards.map(function (card, i) { return (React__default.createElement(NavigationHeaderFeatureCard, __assign({ key: "".concat(id, "-NavigationHeader-megamenu-featureCard-").concat(i) }, card))); }))))))));
+};
+
+var NavigationHeaderCategoryLinks = function (_a) {
+    var items = _a.items, panelHeading = _a.panelHeading, ariaLabel = _a.ariaLabel, onClick = _a.onClick, text = _a.text, onOpenChange = _a.onOpenChange;
+    var id = useId$1();
+    return (React__default.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
+        React__default.createElement(NavigationHeaderSubnavTrigger, { ariaLabel: ariaLabel, onClick: onClick }, text),
+        React__default.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: "".concat(text, " sub menu}") },
+            React__default.createElement("div", { className: "arc-NavigationHeaderCategoryLinks" },
+                React__default.createElement(NavigationHeaderPanelHeading, __assign({}, panelHeading)),
+                React__default.createElement("div", { className: "arc-NavigationHeaderCategoryLinks-container" }, items.map(function (item, i) { return (React__default.createElement("div", { key: "".concat(id, "-NavigationHeader-category-link-item-").concat(i) },
+                    React__default.createElement(NavigationHeaderCollapsingNavList, __assign({}, item, { defaultOpen: true, revealLinkIconOnHover: true, autoFocusOnExpand: false, background: "light" })))); }))))));
+};
+
+var NavigationHeaderLevelTwoLinks = function (_a) {
+    var links = _a.links, children = _a.children;
+    var id = useId$1();
+    return (React__default.createElement("ul", { className: "arc-NavigationHeaderLevelTwoLinks" },
+        links.map(function (navLink, i) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-subnav-item-").concat(i) },
+            React__default.createElement(NavigationHeaderNavLink, __assign({}, navLink, { borderRadiusSize: "s" })))); }),
+        children));
 };
 
 var NavigationHeaderNavItem = function (_a) {
     var navItem = _a.navItem;
-    var id = useId();
     return (React__default.createElement(React__default.Fragment, null,
         navItem.type === "link" && (React__default.createElement(NavigationHeaderNavLink, __assign({}, navItem, { borderRadiusSize: "m" }))),
-        navItem.type === "dropdown" && (React__default.createElement(NavigationHeaderDropdown, { visibleFrom: navItem.visibleFrom, trigger: navItem.text, ariaLabel: navItem.ariaLabel }, navItem.items.map(function (navLink, i) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-dropdown-item-").concat(i) },
-            React__default.createElement(NavigationHeaderNavLink, __assign({}, navLink)))); }))),
-        navItem.type === "subnav" && (React__default.createElement(NavigationHeaderSubnav, { visibleFrom: navItem.visibleFrom, trigger: navItem.text, ariaLabel: navItem.ariaLabel }, navItem.items.map(function (navLink, i) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-subnav-item-").concat(i) },
-            React__default.createElement(NavigationHeaderNavLink, __assign({}, navLink, { borderRadiusSize: "m" })))); })))));
+        navItem.type === "levelTwo" && (React__default.createElement(NavigationHeaderDropdown, { trigger: navItem.text, onClick: navItem.onClick, ariaLabel: navItem.ariaLabel },
+            React__default.createElement(NavigationHeaderLevelTwoLinks, { links: navItem.items }))),
+        navItem.type === "categoryLinks" && (React__default.createElement(NavigationHeaderCategoryLinks, { onOpenChange: navItem.onOpenChange, ariaLabel: navItem.ariaLabel, onClick: navItem.onClick, text: navItem.text, panelHeading: navItem.panelHeading, items: navItem.items })),
+        navItem.type === "megamenu" && (React__default.createElement(NavigationHeaderMegaMenu, { onOpenChange: navItem.onOpenChange, panelHeading: navItem.panelHeading, ariaLabel: navItem.ariaLabel, onClick: navItem.onClick, text: navItem.text, tabs: navItem.tabs, featureCards: navItem.featureCards }))));
 };
 
 var MeatBall = function () { return (React__default.createElement("svg", { width: 18, "aria-hidden": true, viewBox: "0 0 17 3", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -1220,12 +3407,6 @@ var getQuery = function (_a) {
     return "".concat(isMatchMedia ? "" : "@media", "(").concat(type, "-width: ").concat(breakpointValue, "px)");
 };
 
-/*
-  This is to ensure there are no cumulative layout shifts on SSR because of the dynamic media queries.
-  matchMedia can cause flickering when it returns a different value than the default state the server used.
-  This is plain old css so the styles will appear correctly on first paint.
-  The items these styles are applied to will still appear in the server rendered HTML for SEO purposes.
-*/
 var NavigationHeaderStyleElement = function (_a) {
     var css = _a.css;
     var generateCssStyles = function (declarations) {
@@ -1246,43 +3427,13 @@ var NavigationHeaderStyleElement = function (_a) {
     return React__default.createElement("style", null, styleStrings.join("").replace(/\s/g, ""));
 };
 
-var NavigationHeaderMeatBallMenu = function (_a) {
-    var extraNavItems = _a.extraNavItems, mainNavItems = _a.mainNavItems, _b = _a.tooltip, tooltip = _b === void 0 ? "More links" : _b, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? "Show hidden menu items" : _c;
-    var id = useId();
-    var meatBallMenuItemClassName = useUniqueString("arc-NavigationHeaderMeatBalllMenu-item");
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(NavigationHeaderStyleElement, { css: __spreadArray([
-                {
-                    className: meatBallMenuItemClassName,
-                    declarations: {
-                        display: "none",
-                    },
-                }
-            ], mainNavItems.map(function (navItem, i) { return ({
-                mediaQuery: { type: "max", breakpoint: navItem.visibleFrom || 0 },
-                className: "".concat(meatBallMenuItemClassName, "-").concat(i),
-                declarations: {
-                    display: "block",
-                },
-            }); }), true) }),
-        React__default.createElement("div", { className: "arc-NavigationHeaderMeatBalllMenu-container" },
-            React__default.createElement(NavigationHeaderDropdown, { ariaLabel: ariaLabel, tooltip: tooltip, trigger: React__default.createElement(MeatBall, null) },
-                extraNavItems.map(function (navItem, i) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-meatball-item-").concat(i) },
-                    React__default.createElement(NavigationHeaderNavLink, __assign({}, navItem)))); }),
-                mainNavItems.map(function (navItem, itemIndex) { return (React__default.createElement("li", { key: "".concat(id, "-NavigationHeader-meatball-item-").concat(itemIndex), className: classNames(meatBallMenuItemClassName, "".concat(meatBallMenuItemClassName, "-").concat(itemIndex)) },
-                    navItem.type === "link" && (React__default.createElement(NavigationHeaderNavLink, __assign({}, navItem))),
-                    (navItem.type === "subnav" || navItem.type === "dropdown") &&
-                        navItem.items.map(function (navLink, subItemIndex) { return (React__default.createElement(NavigationHeaderNavLink, __assign({ key: "".concat(id, "-NavigationHeader-meatball-link--").concat(itemIndex, "-").concat(subItemIndex) }, navLink))); }))); })))));
-};
-
-var NavigationHeaderNavList = function (_a) {
-    var navItems = _a.navItems, meatBallMenuAriaLabel = _a.meatBallMenuAriaLabel, meatballMenuTooltip = _a.meatballMenuTooltip;
-    var id = useId();
+var NavigationHeaderNavList = memo(function (_a) {
+    var navItems = _a.navItems, background = _a.background, extraMenuTooltip = _a.extraMenuTooltip, _b = _a.extraNavItems, extraNavItems = _b === void 0 ? [] : _b, extraMenuAriaLabel = _a.extraMenuAriaLabel;
+    var id = useId$1();
     var navListItemClassName = useUniqueString("arc-NavigationHeaderNavList-item");
-    var meatBallMenuClassName = useUniqueString("arc-NavigationHeaderNavList-meatballMenu");
+    var sideMenuClassName = useUniqueString("arc-NavigationHeaderNavList-sideMenu");
+    var sideMenuNavItemClassName = useUniqueString("arc-NavigationHeaderNavList-sideMenuItem");
     var ref = useRef(null);
-    var mainNavItems = navItems.filter(function (navItem) { return navItem.type !== "meatball"; });
-    var meatBallMenuItems = navItems.filter(function (navItem) { return navItem.type === "meatball"; });
     var largestElementBreakpoint = function (navItems) {
         return Math.max.apply(Math, navItems.map(function (navItem) {
             if (navItem.visibleFrom) {
@@ -1293,14 +3444,14 @@ var NavigationHeaderNavList = function (_a) {
             return 0;
         }));
     };
-    var meatBallMenuBreakpoint = meatBallMenuItems.length
+    var extraMenuBreakpoint = extraNavItems.length
         ? { type: "max", breakpoint: 0 }
-        : { type: "min", breakpoint: largestElementBreakpoint(mainNavItems) };
+        : { type: "min", breakpoint: largestElementBreakpoint(navItems) };
     return (React__default.createElement("div", { className: "arc-NavigationHeaderNavList-container" },
         React__default.createElement(NavigationHeaderStyleElement, { css: __spreadArray([
                 {
-                    className: meatBallMenuClassName,
-                    mediaQuery: meatBallMenuBreakpoint,
+                    className: sideMenuClassName,
+                    mediaQuery: extraMenuBreakpoint,
                     declarations: {
                         display: "none",
                     },
@@ -1311,25 +3462,45 @@ var NavigationHeaderNavList = function (_a) {
                         display: "none",
                     },
                 }
-            ], mainNavItems.map(function (navItem, i) { return ({
-                mediaQuery: { type: "min", breakpoint: navItem.visibleFrom || 0 },
-                className: "".concat(navListItemClassName, "-").concat(i),
-                declarations: {
-                    display: "block",
-                },
-            }); }), true) }),
-        React__default.createElement("ul", { ref: ref, className: "arc-NavigationHeaderNavList" }, mainNavItems.map(function (navItem, i) { return (React__default.createElement("li", { key: "".concat(id, "-navigation-header-navitem-").concat(i), className: classNames(navListItemClassName, "".concat(navListItemClassName, "-").concat(i)) },
-            React__default.createElement(NavigationHeaderNavItem, { navItem: navItem }))); })),
-        React__default.createElement("div", { className: meatBallMenuClassName },
-            React__default.createElement(NavigationHeaderMeatBallMenu, { tooltip: meatballMenuTooltip, ariaLabel: meatBallMenuAriaLabel, mainNavItems: mainNavItems, extraNavItems: meatBallMenuItems }))));
-};
-
-var NavigationHeaderNav = function (props) {
-    var navigationHeaderContext = useContext(NavigationHeaderContext);
-    return (React__default.createElement("nav", { "aria-label": "primary" },
-        React__default.createElement("div", { ref: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarPortalRef }),
-        React__default.createElement(NavigationHeaderContainer, __assign({}, props))));
-};
+            ], navItems.reduce(function (acc, navItem, i) {
+                return __spreadArray(__spreadArray([], acc, true), [
+                    {
+                        mediaQuery: {
+                            type: "min",
+                            breakpoint: navItem.visibleFrom || 0,
+                        },
+                        className: "".concat(sideMenuNavItemClassName, "-").concat(i),
+                        declarations: {
+                            display: "none",
+                        },
+                    },
+                    {
+                        mediaQuery: {
+                            type: "min",
+                            breakpoint: navItem.visibleFrom || 0,
+                        },
+                        className: "".concat(navListItemClassName, "-").concat(i),
+                        declarations: {
+                            display: "block",
+                        },
+                    },
+                ], false);
+            }, []), true) }),
+        React__default.createElement("ul", { ref: ref, className: "arc-NavigationHeaderNavList" }, navItems.map(function (navItem, i) { return (React__default.createElement("li", { key: "".concat(id, "-navigation-header-navitem-").concat(i), className: classNames(navListItemClassName, "".concat(navListItemClassName, "-").concat(i)) },
+            React__default.createElement("div", { className: classNames({
+                    "arc-NavigationHeaderNavList-itemContent--separator": navItem.isSeparator,
+                }) },
+                React__default.createElement(NavigationHeaderNavItem, { navItem: navItem })))); })),
+        React__default.createElement("div", { className: sideMenuClassName },
+            React__default.createElement(NavigationHeaderSideMenu, { showLogo: false, menuPosition: "left", pathway: "match", triggerAriaLabel: extraMenuAriaLabel, trigger: React__default.createElement(MeatBall, null), tooltip: extraMenuTooltip, background: background },
+                React__default.createElement(SideMenuNavList, null, extraNavItems === null || extraNavItems === void 0 ? void 0 :
+                    extraNavItems.map(function (navItem, navItemIndex) { return (React__default.createElement(React__default.Fragment, { key: "".concat(id, "-side-nav-item-").concat(navItemIndex) },
+                        React__default.createElement("li", null,
+                            React__default.createElement(SideMenuNavItem, { navItem: navItem })))); }), navItems === null || navItems === void 0 ? void 0 :
+                    navItems.map(function (navItem, navItemIndex) { return (React__default.createElement(React__default.Fragment, { key: "".concat(id, "-side-main-nav-item-").concat(navItemIndex) },
+                        React__default.createElement("li", { className: classNames(sideMenuNavItemClassName, "".concat(sideMenuNavItemClassName, "-").concat(navItemIndex)) },
+                            React__default.createElement(SideMenuNavItem, { navItem: navItem })))); }))))));
+});
 
 var defaultHeaderVisibility = {
     burgerMenu: {
@@ -1350,53 +3521,153 @@ var defaultHeaderVisibility = {
     },
 };
 
+function defaultEmptyArray(items) {
+    return items || [];
+}
+
 /**
  *  Use `NavigationHeader` as a Top-level UI element that displays branding, page titles, and primary navigation actions.
  */
 var NavigationHeader = function (_a) {
-    var leftSlot = _a.leftSlot, middleSlot = _a.middleSlot, rightSlot = _a.rightSlot, isPill = _a.isPill, isExtended = _a.isExtended, isFluid = _a.isFluid, logo = _a.logo, navItems = _a.navItems, meatballMenuTooltip = _a.meatballMenuTooltip, burgerMenuActions = _a.burgerMenuActions, burgerMenuFooter = _a.burgerMenuFooter, burgerMenuHeader = _a.burgerMenuHeader, burgerMenuVisibility = _a.burgerMenuVisibility, onOpenChange = _a.onOpenChange, burgerMenuPathway = _a.burgerMenuPathway, navMenuVisibility = _a.navMenuVisibility, _b = _a.background, background = _b === void 0 ? "transparentOnLight" : _b;
-    var navBarPortalRef = useRef(null);
-    var _c = useState(false), isSubMenuItemActive = _c[0], setIsSubMenuItemActive = _c[1];
-    var navBarBackground = isSubMenuItemActive ? "lightElevated" : background;
+    var leftSlot = _a.leftSlot, middleSlot = _a.middleSlot, rightSlot = _a.rightSlot, isPill = _a.isPill, isExtended = _a.isExtended, isFluid = _a.isFluid, logo = _a.logo, navItems = _a.navItems, extraNavItems = _a.extraNavItems, extraMenuTooltip = _a.extraMenuTooltip, extraMenuAriaLabel = _a.extraMenuAriaLabel, burgerMenuActions = _a.burgerMenuActions, burgerMenuFooter = _a.burgerMenuFooter, burgerMenuHeader = _a.burgerMenuHeader, burgerMenuVisibility = _a.burgerMenuVisibility, onBurgerMenuOpenChange = _a.onBurgerMenuOpenChange, burgerMenuPathway = _a.burgerMenuPathway, navMenuVisibility = _a.navMenuVisibility, _b = _a.background, background = _b === void 0 ? "transparentOnLight" : _b;
+    var _c = useState(), navBarEl = _c[0], setNavBarEl = _c[1];
     var burgerMenuVisibilityProps = __assign(__assign({}, defaultHeaderVisibility.burgerMenu), burgerMenuVisibility);
     var navMenuVisibilityProps = __assign(__assign({}, defaultHeaderVisibility.navItems), navMenuVisibility);
-    return (React__default.createElement(NavigationHeaderContext.Provider, { value: {
-            navBarPortalRef: navBarPortalRef,
-            isPill: isPill,
-            isExtended: isExtended,
-            isFluid: isFluid,
-            setIsSubMenuItemActive: setIsSubMenuItemActive,
-        } },
-        React__default.createElement(NavigationHeaderNav, { isFluid: isFluid, isExtended: isExtended, background: navBarBackground, isPill: isPill },
-            React__default.createElement("div", { className: "arc-NavigationHeader-inner" },
-                React__default.createElement("div", { className: "arc-NavigationHeader-leftSlot" },
-                    React__default.createElement(NavigationHeaderLogo, __assign({}, logo)),
-                    leftSlot),
-                React__default.createElement("div", { className: "arc-NavigationHeader-navSlot" },
-                    navItems && (React__default.createElement(Visible, __assign({}, navMenuVisibilityProps),
-                        React__default.createElement(NavigationHeaderNavList, { navItems: navItems, meatballMenuTooltip: meatballMenuTooltip }))),
-                    React__default.createElement("div", { className: "arc-NavigationHeader-middleSlot" }, middleSlot)),
-                rightSlot && (React__default.createElement("div", { className: "arc-NavigationHeader-rightSlot" }, rightSlot)),
-                React__default.createElement(Visible, __assign({}, burgerMenuVisibilityProps),
-                    React__default.createElement("div", { className: "arc-NavigationHeader-burgerMenuSlot" },
-                        React__default.createElement(NavigationHeaderBurgerMenu, { logo: logo, background: background, pathway: burgerMenuPathway, navItems: navItems, actions: burgerMenuActions, header: burgerMenuHeader, footer: burgerMenuFooter, onOpenChange: onOpenChange })))))));
+    var setNavBarRef = function (el) {
+        el && setNavBarEl(el);
+    };
+    var contextValue = useMemo(function () { return ({
+        navBarEl: navBarEl,
+        isPill: isPill,
+        isExtended: isExtended,
+        isFluid: isFluid,
+    }); }, [navBarEl, isPill, isExtended, isFluid]);
+    var allNavItems = __spreadArray(__spreadArray([], defaultEmptyArray(navItems), true), defaultEmptyArray(extraNavItems), true);
+    return (React__default.createElement(NavigationHeaderContext.Provider, { value: contextValue },
+        React__default.createElement("nav", { "aria-label": "primary" },
+            React__default.createElement(NavigationHeaderContainer, { ref: setNavBarRef, isPill: isPill, isExtended: isExtended, isFluid: isFluid, backgroundColor: background },
+                React__default.createElement("div", { className: "arc-NavigationHeader-inner" },
+                    React__default.createElement("div", { className: "arc-NavigationHeader-leftSlot" },
+                        React__default.createElement(NavigationHeaderLogo, __assign({}, logo)),
+                        leftSlot),
+                    React__default.createElement("div", { className: "arc-NavigationHeader-navSlot" },
+                        navItems && (React__default.createElement(Visible, __assign({}, navMenuVisibilityProps),
+                            React__default.createElement(NavigationHeaderNavList, { navItems: navItems, background: background, extraNavItems: extraNavItems, extraMenuAriaLabel: extraMenuAriaLabel, extraMenuTooltip: extraMenuTooltip }))),
+                        React__default.createElement("div", { className: "arc-NavigationHeader-middleSlot" }, middleSlot)),
+                    rightSlot && (React__default.createElement("div", { className: "arc-NavigationHeader-rightSlot" }, rightSlot)),
+                    React__default.createElement(Visible, __assign({}, burgerMenuVisibilityProps),
+                        React__default.createElement("div", { className: "arc-NavigationHeader-burgerMenuSlot" },
+                            React__default.createElement(NavigationHeaderSideMenu, { menuPosition: "right", logo: logo, background: background, pathway: burgerMenuPathway, navItems: allNavItems, actions: burgerMenuActions, header: burgerMenuHeader, footer: burgerMenuFooter, onOpenChange: onBurgerMenuOpenChange }))))))));
 };
 
 var NavigationHeaderAction = function (_a) {
-    var ariaLabel = _a.ariaLabel, icon = _a.icon, onClick = _a.onClick, title = _a.title, supportingCopy = _a.supportingCopy, _b = _a.isAttention, isAttention = _b === void 0 ? false : _b;
+    var ariaLabel = _a.ariaLabel, icon = _a.icon, onClick = _a.onClick, title = _a.title, supportingCopy = _a.supportingCopy, ref = _a.ref, href = _a.href, _b = _a.isAttention, isAttention = _b === void 0 ? false : _b;
     return (React__default.createElement("div", { className: classNames("arc-NavigationHeaderAction", {
             "arc-NavigationHeaderAction--attention": isAttention,
         }) },
         React__default.createElement(Tooltip, { asChild: true, title: title, alignContent: "center", supportingCopy: supportingCopy, delayDuration: DELAY_DURATION, side: "bottom" },
-            React__default.createElement(NavigationHeaderButton, { isPadded: false, onClick: onClick },
+            React__default.createElement(NavigationHeaderButton, { href: href, ref: ref, isPadded: false, onClick: onClick },
                 React__default.createElement("div", { className: "arc-NavigationHeaderAction-content" },
-                    React__default.createElement(Icon, { "aria-hidden": true, icon: icon, size: 24 }),
+                    typeof icon === "string" ? (React__default.createElement(Icon, { "aria-hidden": true, icon: icon, size: 24 })) : (icon),
                     React__default.createElement(VisuallyHidden, null, ariaLabel))))));
 };
 
+var NavigationHeaderSearchMenu = function (_a) {
+    var onSubmit = _a.onSubmit, quickLinks = _a.quickLinks, onInputChange = _a.onInputChange, _b = _a.submitButtonAriaLabel, submitButtonAriaLabel = _b === void 0 ? "Submit search" : _b, _c = _a.panelTitle, panelTitle = _c === void 0 ? "Quick links" : _c, _d = _a.description, description = _d === void 0 ? "Discover our products and how we can help your business grow" : _d, _e = _a.accessibleMenuTitle, accessibleMenuTitle = _e === void 0 ? "Search menu" : _e, _f = _a.label, label = _f === void 0 ? "Search" : _f, _g = _a.triggerTooltip, triggerTooltip = _g === void 0 ? "Search" : _g, _h = _a.triggerAriaLabel, triggerAriaLabel = _h === void 0 ? "Open search menu" : _h;
+    var id = useId$1();
+    var listBoxId = useId$1();
+    var inputId = useId$1();
+    var _j = useState(undefined), highlightedOptionIndex = _j[0], setHighlightedOptionIndex = _j[1];
+    var _k = useState(""), searchTerm = _k[0], setSearchTerm = _k[1];
+    var inputRef = useRef(null);
+    var hasHighlightedOption = typeof highlightedOptionIndex === "number";
+    var onChange = function (e) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e.target.value);
+        setSearchTerm(e.target.value);
+        setHighlightedOptionIndex(undefined);
+    };
+    var onFormSubmit = function (e) {
+        e.preventDefault();
+        onSubmit && onSubmit(searchTerm);
+    };
+    var onOpenChange = function (isOpen) {
+        if (!isOpen) {
+            setSearchTerm("");
+            setHighlightedOptionIndex(undefined);
+        }
+    };
+    var onInputKeyDown = function (e) {
+        var key = e.key;
+        if (key === KeyNames.Enter || key === KeyNames.Space) {
+            !searchTerm && e.preventDefault();
+        }
+        if (key === KeyNames.ArrowDown) {
+            e.preventDefault();
+            var newIndex = !hasHighlightedOption ||
+                highlightedOptionIndex === quickLinks.length - 1
+                ? 0
+                : highlightedOptionIndex + 1;
+            setHighlightedOptionIndex(newIndex);
+            setSearchTerm(quickLinks[newIndex].text);
+        }
+        if (key === KeyNames.ArrowUp) {
+            e.preventDefault();
+            var newIndex = (!hasHighlightedOption || highlightedOptionIndex === 0
+                ? quickLinks.length
+                : highlightedOptionIndex) - 1;
+            setHighlightedOptionIndex(newIndex);
+            setSearchTerm(quickLinks[newIndex].text);
+        }
+    };
+    return (React__default.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
+        React__default.createElement(NavigationHeaderSubnavTrigger, { asChild: true },
+            React__default.createElement(NavigationHeaderAction, { title: triggerTooltip, ariaLabel: triggerAriaLabel, icon: React__default.createElement(ThemeIcon, { icon: "navigationHeaderSearch", size: 24 }) })),
+        React__default.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: accessibleMenuTitle },
+            React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu" },
+                React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu-labelContainer" },
+                    React__default.createElement("label", { htmlFor: inputId },
+                        React__default.createElement(Heading, { size: "m" }, label)),
+                    React__default.createElement(Text, null, description)),
+                React__default.createElement("form", { onSubmit: onFormSubmit, className: "arc-NavigationHeaderSearchMenu-form" },
+                    React__default.createElement("input", { id: inputId, role: "combobox", autoComplete: "off", "aria-autocomplete": "none", "aria-controls": listBoxId, "aria-activedescendant": hasHighlightedOption
+                            ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
+                            : undefined, ref: inputRef, value: searchTerm, onChange: onChange, onKeyDown: onInputKeyDown, className: "arc-NavigationHeaderSearchMenu-input", type: "text" }),
+                    React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu-actions" },
+                        React__default.createElement(SemanticButton, { "aria-label": submitButtonAriaLabel, className: "arc-NavigationHeaderSearchMenu-submitButton", type: "submit" },
+                            React__default.createElement(ThemeIcon, { icon: "navigationHeaderSearch" })))),
+                React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu-results" },
+                    React__default.createElement(Heading, { level: "3", size: "xxxs" }, panelTitle),
+                    React__default.createElement("ul", { id: listBoxId, role: "listbox", onMouseLeave: function () { return setHighlightedOptionIndex(undefined); }, className: "arc-NavigationHeaderSearchMenu-resultsList" }, quickLinks === null || quickLinks === void 0 ? void 0 : quickLinks.map(function (_a, i) {
+                        var text = _a.text, href = _a.href, onClick = _a.onClick;
+                        return (React__default.createElement("li", { className: classNames("arc-NavigationHeaderSearchMenu-listItem", {
+                                "arc-NavigationHeaderSearchMenu-listItem--highlighted": highlightedOptionIndex === i,
+                            }), role: "option", "aria-label": text, onMouseMove: function () { return setHighlightedOptionIndex(i); }, "aria-selected": highlightedOptionIndex === i, id: "".concat(listBoxId, "-").concat(i), key: "".concat(id, "-search-link-").concat(text, "-").concat(i) },
+                            React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu-linkContainer" },
+                                React__default.createElement(Heading, { size: "xxs" },
+                                    React__default.createElement(SemanticLink, { className: "arc-NavigationHeaderSearchMenu-link", href: href, onClick: onClick, tabIndex: -1 }, text))),
+                            React__default.createElement("div", { className: "arc-NavigationHeaderSearchMenu-iconContainer" },
+                                React__default.createElement(ArrowRightIcon, null))));
+                    })))))));
+};
+var KeyNames;
+(function (KeyNames) {
+    KeyNames["ArrowUp"] = "ArrowUp";
+    KeyNames["ArrowDown"] = "ArrowDown";
+    KeyNames["Home"] = "Home";
+    KeyNames["Enter"] = "Enter";
+    KeyNames["Escape"] = "Escape";
+    KeyNames["Space"] = " ";
+})(KeyNames || (KeyNames = {}));
+
+var NavigationHeaderBasket = function (_a) {
+    var supportingCopy = _a.supportingCopy, onClick = _a.onClick, href = _a.href, _b = _a.popoverText, popoverText = _b === void 0 ? "No items in basket" : _b, _c = _a.title, title = _c === void 0 ? "Basket" : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? "Basket, empty" : _d, _e = _a.isAttention, isAttention = _e === void 0 ? false : _e;
+    return isAttention ? (React__default.createElement(NavigationHeaderAction, { isAttention: true, href: href, title: title, onClick: onClick, supportingCopy: supportingCopy, ariaLabel: ariaLabel, icon: React__default.createElement(ThemeIcon, { icon: "navigationHeaderBasket", size: 24 }) })) : (React__default.createElement(NavigationHeaderDropdown, { tooltip: title, ariaLabel: ariaLabel, onClick: onClick, trigger: React__default.createElement("div", { className: "arc-NavigationHeaderBasket-trigger" },
+            React__default.createElement(ThemeIcon, { icon: "navigationHeaderBasket", size: 24 })) }, popoverText));
+};
+
 var NavigationHeaderActionBar = function (_a) {
     var children = _a.children;
-    var id = useId();
+    var id = useId$1();
     var items = React__default.Children.map(children, function (child, i) { return (React__default.createElement("li", { key: "".concat(id, "-navigation-header-bar-action-item-").concat(i) }, child)); });
     return React__default.createElement("ul", { className: "arc-NavigationHeaderActionBar" }, items);
 };
@@ -1415,4 +3686,4 @@ var NavigationHeaderPage = function (_a) {
                 React__default.createElement(Text, null, page))))));
 };
 
-export { NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, NavigationHeaderPage };
+export { NavigationHeader, NavigationHeaderAction, NavigationHeaderActionBar, NavigationHeaderBasket, NavigationHeaderPage, NavigationHeaderSearchMenu };