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

package/lib/NavigationHeader/NavigationHeader.cjs

@@ -7,30 +7,27 @@ var Visible = require('../_shared/cjs/Visible-vchtZSfm.cjs');
 var index = require('../_shared/cjs/index-CTlXMLug.cjs');
 var suffixModifier = require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
-var Rule = require('../_shared/cjs/Rule-DMQsi2L6.cjs');
-var DrawerContent = require('../_shared/cjs/DrawerContent-DifTc6g9.cjs');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
+var index$2 = require('../_shared/cjs/index-DAr_oO4-.cjs');
+var index$1 = require('../_shared/cjs/index-DXNM3D1d.cjs');
 var Tooltip = require('../_shared/cjs/Tooltip-BPHL0ELI.cjs');
 var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
 var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
-var kebabCase = require('../_shared/cjs/kebabCase-CThj4IzG.cjs');
+var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
-var arcBreakpoints = require('../_shared/cjs/arc-breakpoints--lzoExiR.cjs');
+var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.cjs');
+var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-CS8JVk5T.cjs');
 var Popover = require('../_shared/cjs/Popover-C5mmMkYU.cjs');
-var index$1 = require('../_shared/cjs/index-DAr_oO4-.cjs');
-var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
+var isSymbol = require('../_shared/cjs/isSymbol-BGrHFUbV.cjs');
 var Hidden = require('../_shared/cjs/Hidden-Vsv1-xWO.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-require('../_shared/cjs/index-DXNM3D1d.cjs');
+require('../_shared/cjs/Combination-B-rSVLfT.cjs');
 require('react/jsx-runtime');
 require('react-dom');
+require('../_shared/cjs/index-Dv1xvB_E.cjs');
 require('../_shared/cjs/index-B11wQrRa.cjs');
-require('../_shared/cjs/isSymbol-BGrHFUbV.cjs');
-require('../_shared/cjs/index.es-Th2hutNO.cjs');
+require('../_shared/cjs/index.es-fkulh7qu.cjs');
 require('../_shared/cjs/index-CaO6cOF0.cjs');
-require('../_shared/cjs/Combination-B-rSVLfT.cjs');
 require('../_shared/cjs/index-Bt7hfZBc.cjs');
-require('../_shared/cjs/index-Dv1xvB_E.cjs');
 
 /**
  * Detect interaction mode
@@ -93,7 +90,8 @@ var BtRedcareLogo = function () { return (React.createElement("svg", { xmlns: "h
     React.createElement("path", { d: "M25 0C11.285 0 0 11.285 0 25s11.285 25 25 25 25-11.285 25-25C49.995 11.287 38.713.005 25 0Zm0 46.92h-.005c-12.028 0-21.925-9.897-21.925-21.925S12.967 3.07 24.995 3.07 46.92 12.967 46.92 24.995V25C46.911 37.022 37.022 46.911 25 46.92Zm95.636-16.632-2.683-2.44-.153.19a5.93 5.93 0 0 1-1.965 1.626 5.484 5.484 0 0 1-2.415.508 4.314 4.314 0 0 1-2.323-.65 4.609 4.609 0 0 1-1.653-1.828 6.386 6.386 0 0 1 0-5.456 4.627 4.627 0 0 1 1.642-1.824 4.267 4.267 0 0 1 2.31-.65 5.014 5.014 0 0 1 2.317.521c.746.411 1.4.97 1.923 1.642l.153.187 2.686-2.436-.142-.176a9.26 9.26 0 0 0-3.09-2.47 8.886 8.886 0 0 0-3.84-.802 9.082 9.082 0 0 0-3.428.644 8.536 8.536 0 0 0-2.798 1.824 8.35 8.35 0 0 0-1.871 2.785 9.462 9.462 0 0 0 0 6.978 8.36 8.36 0 0 0 4.672 4.6 9.204 9.204 0 0 0 3.44.642 9.37 9.37 0 0 0 3.909-.788 9.195 9.195 0 0 0 3.16-2.457l.15-.17h-.001ZM22.8 24.626a4.224 4.224 0 0 0 1.625-3.4c0-3.075-2.224-4.751-5.5-4.751h-6.77v17h7.248c3.25 0 5.526-1.774 5.526-5-.003-1.875-.979-3.175-2.129-3.849Zm3.425-4.501H30.4v13.35h4.1v-13.35h4.175v-3.65h-12.45v3.65Zm126.251 4.57a5.193 5.193 0 0 0 .866-2.976 5.303 5.303 0 0 0-.68-2.7 4.818 4.818 0 0 0-1.98-1.861c-.857-.448-1.915-.676-3.143-.676h-8.354v16.992h4.097v-6.336h2.984l3.235 6.329h4.586l-3.86-7.028a4.777 4.777 0 0 0 2.25-1.744h-.001Zm-75.218 1.947h6.115V23.16h-6.115v-3.2h8.714v-3.484H73.16v16.992h13.048v-3.484h-8.95v-3.342Zm-6.888-1.947a5.193 5.193 0 0 0 .866-2.976 5.306 5.306 0 0 0-.68-2.707 4.825 4.825 0 0 0-1.98-1.861c-.86-.448-1.916-.676-3.135-.676H57.08v16.992h4.095v-6.33h2.983l3.235 6.33h4.586l-3.86-7.028a4.787 4.787 0 0 0 2.252-1.744h-.001Zm28.995-7.144c-1.436-.706-3.175-1.076-5.193-1.076h-6.228v16.992h6.228c2.01 0 3.757-.353 5.193-1.074a7.914 7.914 0 0 0 3.33-3 8.457 8.457 0 0 0 1.154-4.409 8.44 8.44 0 0 0-1.154-4.41 7.894 7.894 0 0 0-3.33-3.023Zm32.205-1.076h-4.279l-6.816 16.992h4.234l1.41-3.683h6.527l1.411 3.683h4.358l-6.786-16.847-.06-.145h.001Zm27.747 13.508v-3.34h6.117v-3.485h-6.117v-3.2h8.715v-3.483h-12.81v16.992h13.047v-3.484h-8.952Zm-140.367.042v.008-.001H16.2v-3.557h2.75c1.15 0 1.825.725 1.825 1.8 0 1.025-.666 1.75-1.825 1.75Zm80.711-5.054c0 1.534-.469 2.765-1.395 3.66-.926.897-2.309 1.356-4.094 1.356h-2.13V19.959h2.13c1.787 0 3.163.458 4.09 1.363.928.905 1.4 2.138 1.4 3.65l-.001-.001Zm27.694 1.588 2.029-5.335 2.05 5.335h-4.079Zm-60.312-4.744a2.02 2.02 0 0 1-.494 1.437c-.323.353-.834.53-1.519.53h-3.856v-3.919h3.856c.706 0 1.216.177 1.53.53.337.392.51.898.483 1.414v.008Zm82.108 0a2.024 2.024 0 0 1-.494 1.437c-.322.353-.833.53-1.52.53h-3.855v-3.919h3.855c.705 0 1.215.177 1.53.53.337.391.51.898.484 1.414v.008ZM16.2 19.932h2.526c.973 0 1.548.625 1.548 1.526 0 .949-.575 1.575-1.548 1.575H16.2v-3.101Z", fill: "currentColor" }))); };
 
 var NavigationHeaderLogo = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, _c = _a.href, href = _c === void 0 ? "/" : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? "Home" : _d, svg = _a.svg, onClick = _a.onClick;
+    var _b;
+    var _c = _a.brand, brand = _c === void 0 ? "bt" : _c, _d = _a.href, href = _d === void 0 ? "/" : _d, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? "Home" : _e, _f = _a.isSurfaceSensitive, isSurfaceSensitive = _f === void 0 ? true : _f, svg = _a.svg, onClick = _a.onClick;
     var surface = React.useContext(Surface.Context).surface;
     var logos = {
         bt: BtLogo,
@@ -104,7 +102,11 @@ var NavigationHeaderLogo = function (_a) {
         btWholesale: BtWholesaleLogo,
     };
     var icon = svg || React.createElement(logos[brand]);
-    return (React.createElement("a", { className: index.classNames("arc-NavigationHeaderLogo", suffixModifier.suffixModifier("arc-NavigationHeaderLogo--on", surface)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
+    return (React.createElement("a", { className: index.classNames("arc-NavigationHeaderLogo", (_b = {
+                "arc-NavigationHeaderLogo--staticColor": !isSurfaceSensitive
+            },
+            _b[suffixModifier.suffixModifier("arc-NavigationHeaderLogo--on", surface)] = isSurfaceSensitive,
+            _b)), "aria-label": ariaLabel, onClick: onClick, href: href }, icon));
 };
 
 // src/check-element-visibility/check-element-visibility.ts
@@ -117,18 +119,83 @@ var checkElementVisibility = (element) => {
   }
 };
 
-var NavigationHeaderNavLink = function (_a) {
-    var text = _a.text, onClick = _a.onClick, href = _a.href, _b = _a.borderRadiusSize, borderRadiusSize = _b === void 0 ? "s" : _b;
+var NavigationHeaderInlineAction = function (_a) {
+    var icon = _a.icon, text = _a.text, href = _a.href, onClick = _a.onClick;
+    return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement("a", { "aria-label": text, className: index.classNames("arc-NavigationHeaderInlineAction", "arc-NavigationHeaderInlineAction-link"), href: href, onClick: onClick }, children)); }, fallback: function (children) { return (React.createElement("button", { "aria-label": text, className: index.classNames("arc-NavigationHeaderInlineAction", "arc-NavigationHeaderInlineAction-button"), onClick: onClick }, children)); } },
+        React.createElement("div", { className: "arc-NavigationHeaderInlineAction-content" },
+            React.createElement(Icon.Icon, { "aria-hidden": true, icon: icon, size: 28 }),
+            React.createElement(Text.Text, { size: "l" }, text))));
+};
+
+var NavigationHeaderButton = React.forwardRef(function (_a, ref) {
+    var isActive = _a.isActive, children = _a.children, onClick = _a.onClick, _b = _a.isPadded, isPadded = _b === void 0 ? true : _b, props = filterAttrs.__rest(_a, ["isActive", "children", "onClick", "isPadded"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("a", { href: href, onClick: onClick, className: index.classNames("arc-NavigationHeaderNavLink", suffixModifier.suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier.suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
-        React.createElement(Text.Text, null, text)));
+    return (React.createElement("button", filterAttrs.__assign({}, props, { ref: ref, onClick: onClick, className: index.classNames("arc-NavigationHeaderButton", suffixModifier.suffixModifier("arc-NavigationHeaderButton--on", surface), {
+            "arc-NavigationHeaderButton--active": isActive,
+            "arc-NavigationHeaderButton--padded": isPadded,
+        }) }), children));
+});
+
+var NavigationHeaderDisclosure = function (_a) {
+    var heading = _a.heading, children = _a.children;
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var containerRef = React.useRef(null);
+    var handleOnClick = function (e) {
+        e.preventDefault();
+        setIsOpen(function (isOpen) { return !isOpen; });
+    };
+    React.useEffect(function () {
+        if (containerRef.current && containerRef.current.firstChild && isOpen) {
+            containerRef.current.firstChild.focus();
+        }
+    }, [isOpen, containerRef.current]);
+    return (React.createElement("details", { className: "arc-NavigationHeaderDisclosure", open: isOpen },
+        React.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-NavigationHeaderDisclosure-summary" },
+            React.createElement("span", { className: "arc-NavigationHeaderDisclosure-heading" }, heading),
+            React.createElement("span", { className: "arc-NavigationHeaderDisclosure-icon" },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 28, icon: "navigationHeaderDisclosure" }))),
+        React.createElement("div", { ref: containerRef, className: "arc-NavigationHeaderDisclosure-details" }, children)));
 };
 
+var NavigationHeaderMenuLink = function (_a) {
+    var href = _a.href, onClick = _a.onClick, text = _a.text, _b = _a.size, size = _b === void 0 ? "l" : _b;
+    var icons = {
+        s: {
+            icon: "navigationHeaderMenuLinkSmall",
+            size: 24,
+        },
+        l: {
+            icon: "navigationHeaderMenuLinkLarge",
+            size: 28,
+        },
+    };
+    return (React.createElement("a", { "aria-label": text, href: href, onClick: onClick, className: index.classNames("arc-NavigationHeaderMenuLink", suffixModifier.suffixModifier("arc-NavigationHeaderMenuLink--size", size)) },
+        React.createElement("div", { className: "arc-NavigationHeaderMenuLink-text" }, text),
+        React.createElement("span", { className: "arc-NavigationHeaderMenuLink-icon" },
+            React.createElement(ThemeIcon.ThemeIcon, filterAttrs.__assign({}, icons[size])))));
+};
+
+var NavigationHeaderCloseButton = React.forwardRef(function (_a, ref) {
+    var onClick = _a.onClick, props = filterAttrs.__rest(_a, ["onClick"]);
+    return (React.createElement("button", filterAttrs.__assign({}, props, { ref: ref, "aria-label": "close", onClick: onClick, className: "arc-NavigationHeaderCloseButton" }),
+        React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "navigationHeaderClose" })));
+});
+
 var NavigationHeaderBurgerMenu = function (_a) {
-    var navItems = _a.navItems, topContent = _a.topContent, bottomContent = _a.bottomContent;
+    var navItems = _a.navItems, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo;
     var id = React.useId();
     var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
     var triggerRef = React.useRef(null);
+    var interactionMode = useInteractionMode().interactionMode;
+    var _c = index$1.useThemeElement(), themeElement = _c[0], setThemeElement = _c[1];
+    var closeMenu = function () {
+        setIsOpen(false);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current && interactionMode === "keyboard") {
+            triggerRef.current.focus();
+        }
+    };
     // Close the menu if the nav or trigger is hidden
     React.useEffect(function () {
         var resizeObserver = new ResizeObserver(function (entries) {
@@ -148,35 +215,47 @@ var NavigationHeaderBurgerMenu = function (_a) {
     }, [isOpen, setIsOpen, triggerRef.current]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Tooltip.Tooltip, { asChild: true, delayDuration: 0, title: "Menu", side: "bottom" },
-            React.createElement(kebabCase.NavigationHeaderButton, { ref: triggerRef, isPadded: false, "aria-expanded": isOpen, "aria-label": isOpen ? "close menu" : "open menu", onClick: function () { return setIsOpen(!isOpen); } },
-                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-buttonContent" },
+            React.createElement(NavigationHeaderButton, { ref: triggerRef, isPadded: false, "aria-expanded": isOpen, "aria-label": isOpen ? "close menu" : "open menu", onClick: function () { return setIsOpen(!isOpen); } },
+                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-trigger" },
                     React.createElement(ThemeIcon.ThemeIcon, { icon: "siteHeaderBurger", size: 24 })),
                 React.createElement(VisuallyHidden.VisuallyHidden, null, isOpen ? "close menu" : "open menu"))),
-        React.createElement(DrawerContent.Drawer, { isOpen: isOpen, "aria-describedby": undefined, onRequestClose: function () { return setIsOpen(false); } },
-            React.createElement(Surface.Surface, { isTransparent: true, background: "light-white" },
-                React.createElement(DrawerContent.DrawerHeader, { title: "Menu" }),
-                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-content" },
-                    topContent && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-topContent" },
-                        React.createElement(VerticalSpace.VerticalSpace, null),
-                        React.createElement(Rule.Rule, null),
-                        React.createElement(VerticalSpace.VerticalSpace, null),
-                        topContent,
-                        React.createElement(VerticalSpace.VerticalSpace, null))),
-                    navItems && (React.createElement(DrawerContent.DrawerContent, null,
-                        React.createElement("ul", { className: "arc-NavigationHeaderBurgerMenu-list" }, navItems.map(function (navItem, navItemIndex) { return (React.createElement(React.Fragment, { key: "".concat(id, "-burger-nav-item-").concat(navItemIndex) },
-                            React.createElement("li", null,
-                                (navItem.type === "link" ||
-                                    navItem.type === "meatball") && (React.createElement(NavigationHeaderNavLink, filterAttrs.__assign({}, navItem))),
-                                (navItem.type === "subnav" ||
-                                    navItem.type === "dropdown") &&
-                                    navItem.items.map(function (subNavItem, subNavItemIndex) { return (React.createElement(NavigationHeaderNavLink, filterAttrs.__assign({ key: "".concat(id, "-").concat(navItemIndex, "-burger-sub-nav-item-").concat(subNavItemIndex) }, subNavItem))); })))); })))),
-                    bottomContent && (React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-bottomContent" },
-                            React.createElement(VerticalSpace.VerticalSpace, null),
-                            React.createElement(Rule.Rule, null),
-                            React.createElement(VerticalSpace.VerticalSpace, null),
-                            bottomContent,
-                            React.createElement(VerticalSpace.VerticalSpace, null)))))))));
+        React.createElement("div", { ref: setThemeElement },
+            React.createElement(index$2.Root, { open: isOpen },
+                React.createElement(index$2.Portal, { container: themeElement },
+                    React.createElement(index$2.Overlay, { className: "arc-NavigationHeaderBurgerMenu-overlay" },
+                        React.createElement(index$2.Content, { "aria-describedby": undefined, className: "arc-NavigationHeaderBurgerMenu-slider", onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeMenu, onInteractOutside: closeMenu, "aria-modal": "true" },
+                            React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-container" },
+                                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-mainContent" },
+                                    React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-header" },
+                                        React.createElement(index$2.Title, null,
+                                            React.createElement(VisuallyHidden.VisuallyHidden, null, "Menu")),
+                                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoContainer" },
+                                            React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-logoWrapper" },
+                                                React.createElement(NavigationHeaderLogo, filterAttrs.__assign({}, logo, { isSurfaceSensitive: false })))),
+                                        React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-closeButtonContainer" },
+                                            React.createElement(Tooltip.Tooltip, { asChild: true, delayDuration: 0, title: "Close menu", side: "left" },
+                                                React.createElement(NavigationHeaderCloseButton, { onClick: closeMenu })))),
+                                    header && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-topContent" }, header)),
+                                    (navItems || actions) && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-navigationContent" },
+                                        navItems && (React.createElement("ul", { className: "arc-NavigationHeaderBurgerMenu-list" }, navItems.map(function (navItem, navItemIndex) { return (React.createElement(React.Fragment, { key: "".concat(id, "-burger-nav-item-").concat(navItemIndex) },
+                                            React.createElement("li", { className: "arc-NavigationHeaderBurgerMenu-listItem" },
+                                                React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-listItemContent" },
+                                                    (navItem.type === "link" ||
+                                                        navItem.type === "meatball") && (React.createElement(NavigationHeaderMenuLink, { href: navItem.href, onClick: navItem.onClick, text: navItem.text })),
+                                                    (navItem.type === "subnav" ||
+                                                        navItem.type === "dropdown") && (React.createElement(NavigationHeaderDisclosure, { heading: navItem.text }, navItem.items.map(function (subNavItem, subNavItemIndex) { return (React.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.createElement("div", { className: index.classNames("arc-NavigationHeaderBurgerMenu-actionsContainer", {
+                                                "arc-NavigationHeaderBurgerMenu-actionsContainer--seperator": navItems && actions,
+                                            }) }, actions.map(function (props, i) { return (React.createElement(NavigationHeaderInlineAction, filterAttrs.__assign({ key: "".concat(id, "-action-{").concat(i, "}") }, props))); })))))),
+                                footer && (React.createElement("div", { className: "arc-NavigationHeaderBurgerMenu-footer" },
+                                    React.createElement(Surface.Surface, { isTransparent: true, background: "dark-black" }, footer)))))))))));
+};
+
+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 = React.useContext(Surface.Context).surface;
+    return (React.createElement("a", { href: href, onClick: onClick, className: index.classNames("arc-NavigationHeaderNavLink", suffixModifier.suffixModifier("arc-NavigationHeaderNavLink--borderRadiusSize", borderRadiusSize), suffixModifier.suffixModifier("arc-NavigationHeaderNavLink--on", surface)) },
+        React.createElement(Text.Text, null, text)));
 };
 
 // src/get-focusable-elements/get-focusable-elements.ts
@@ -198,6 +277,8 @@ var getFocusableElements = (rootElement) => {
   return nodes;
 };
 
+var NavigationHeaderContext = React.createContext(null);
+
 var NavigationHeaderDropdown = function (_a) {
     var children = _a.children, trigger = _a.trigger, ariaLabel = _a.ariaLabel, tooltip = _a.tooltip;
     var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -205,7 +286,7 @@ var NavigationHeaderDropdown = function (_a) {
     var containerRef = React.useRef(null);
     var _c = React.useState(false), isTooltipOpen = _c[0], setIsTooltipOpen = _c[1];
     var interactionMode = useInteractionMode().interactionMode;
-    var navigationHeaderContext = React.useContext(kebabCase.NavigationHeaderContext);
+    var navigationHeaderContext = React.useContext(NavigationHeaderContext);
     // Close the dropdown if the nav or trigger is hidden
     React.useEffect(function () {
         var resizeObserver = new ResizeObserver(function (entries) {
@@ -251,7 +332,7 @@ var NavigationHeaderDropdown = function (_a) {
     var toggleVisibility = function () { return setIsOpen(function (isOpen) { return !isOpen; }); };
     return (React.createElement(Popover.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.createElement("div", { ref: containerRef },
             React.createElement("ul", { className: "arc-NavigationHeaderDropdown-navList" }, children)) }, tooltip ? (React.createElement(Tooltip.Tooltip, { asChild: true, title: tooltip, open: isTooltipOpen, delayDuration: 0, alignContent: "center", side: "bottom" },
-        React.createElement(kebabCase.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.createElement(kebabCase.NavigationHeaderButton, { ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", isActive: isOpen, onClick: toggleVisibility }, trigger))));
+        React.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.createElement(NavigationHeaderButton, { ref: triggerRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", isActive: isOpen, onClick: toggleVisibility }, trigger))));
 };
 
 var NavigationHeaderContainer = function (_a) {
@@ -304,7 +385,7 @@ var NavigationHeaderSubnav = function (_a) {
     var _b;
     var trigger = _a.trigger, ariaLabel = _a.ariaLabel, children = _a.children;
     var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var navigationHeaderContext = React.useContext(kebabCase.NavigationHeaderContext);
+    var navigationHeaderContext = React.useContext(NavigationHeaderContext);
     var containerRef = React.useRef(null);
     var dialogRef = React.useRef(null);
     var listRef = React.useRef(null);
@@ -386,16 +467,16 @@ var NavigationHeaderSubnav = function (_a) {
         triggerRef.current,
     ]);
     return (React.createElement("div", { ref: containerRef },
-        React.createElement(kebabCase.NavigationHeaderButton, { "data-sub-nav-item": true, ref: triggerRef, isActive: isOpen, "aria-label": ariaLabel, onClick: onTriggerClick }, trigger),
-        React.createElement(index$1.Root, { open: isOpen, modal: false },
-            React.createElement(index$1.Portal, { container: (_b = navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarPortalRef) === null || _b === void 0 ? void 0 : _b.current },
+        React.createElement(NavigationHeaderButton, { "data-sub-nav-item": true, ref: triggerRef, isActive: isOpen, "aria-label": ariaLabel, onClick: onTriggerClick }, trigger),
+        React.createElement(index$2.Root, { open: isOpen, modal: false },
+            React.createElement(index$2.Portal, { container: (_b = navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarPortalRef) === null || _b === void 0 ? void 0 : _b.current },
                 React.createElement("div", { className: "arc-NavigationHeaderSubnav" },
                     React.createElement("div", { className: "arc-NavigationHeaderSubnav-container" },
                         React.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.createElement(index$1.Content, { ref: dialogRef, "aria-describedby": undefined, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
+                            React.createElement(index$2.Content, { ref: dialogRef, "aria-describedby": undefined, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
                                 React.createElement("div", { className: "arc-NavigationHeaderSubnav-content" },
                                     React.createElement(VisuallyHidden.VisuallyHidden, null,
-                                        React.createElement(index$1.Title, null,
+                                        React.createElement(index$2.Title, null,
                                             trigger,
                                             " sub menu")),
                                     React.createElement("ul", { ref: listRef, className: "arc-NavigationHeaderSubnav-navList" }, children))))))))));
@@ -418,6 +499,717 @@ var MeatBall = function () { return (React.createElement("svg", { width: 18, "ar
         React.createElement("path", { d: "M8.5 3.0598e-07C9.32843 2.69769e-07 10 0.671573 10 1.5C10 2.32843 9.32843 3 8.5 3C7.67157 3 7 2.32843 7 1.5C7 0.671573 7.67157 3.42192e-07 8.5 3.0598e-07Z", fill: "currentColor" }),
         React.createElement("path", { d: "M15.5 0C16.3284 -3.62112e-08 17 0.671573 17 1.5C17 2.32843 16.3284 3 15.5 3C14.6716 3 14 2.32843 14 1.5C14 0.671573 14.6716 3.62122e-08 15.5 0Z", fill: "currentColor" })))); };
 
+/*! https://mths.be/cssesc v3.0.0 by @mathias */
+
+var cssesc_1;
+var hasRequiredCssesc;
+
+function requireCssesc () {
+	if (hasRequiredCssesc) return cssesc_1;
+	hasRequiredCssesc = 1;
+
+	var object = {};
+	var hasOwnProperty = object.hasOwnProperty;
+	var merge = function merge(options, defaults) {
+		if (!options) {
+			return defaults;
+		}
+		var result = {};
+		for (var key in defaults) {
+			// `if (defaults.hasOwnProperty(key) { … }` is not needed here, since
+			// only recognized option names are used.
+			result[key] = hasOwnProperty.call(options, key) ? options[key] : defaults[key];
+		}
+		return result;
+	};
+
+	var regexAnySingleEscape = /[ -,\.\/:-@\[-\^`\{-~]/;
+	var regexSingleEscape = /[ -,\.\/:-@\[\]\^`\{-~]/;
+	var regexExcessiveSpaces = /(^|\\+)?(\\[A-F0-9]{1,6})\x20(?![a-fA-F0-9\x20])/g;
+
+	// https://mathiasbynens.be/notes/css-escapes#css
+	var cssesc = function cssesc(string, options) {
+		options = merge(options, cssesc.options);
+		if (options.quotes != 'single' && options.quotes != 'double') {
+			options.quotes = 'single';
+		}
+		var quote = options.quotes == 'double' ? '"' : '\'';
+		var isIdentifier = options.isIdentifier;
+
+		var firstChar = string.charAt(0);
+		var output = '';
+		var counter = 0;
+		var length = string.length;
+		while (counter < length) {
+			var character = string.charAt(counter++);
+			var codePoint = character.charCodeAt();
+			var value = void 0;
+			// If it’s not a printable ASCII character…
+			if (codePoint < 0x20 || codePoint > 0x7E) {
+				if (codePoint >= 0xD800 && codePoint <= 0xDBFF && counter < length) {
+					// It’s a high surrogate, and there is a next character.
+					var extra = string.charCodeAt(counter++);
+					if ((extra & 0xFC00) == 0xDC00) {
+						// next character is low surrogate
+						codePoint = ((codePoint & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000;
+					} else {
+						// It’s an unmatched surrogate; only append this code unit, in case
+						// the next code unit is the high surrogate of a surrogate pair.
+						counter--;
+					}
+				}
+				value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+			} else {
+				if (options.escapeEverything) {
+					if (regexAnySingleEscape.test(character)) {
+						value = '\\' + character;
+					} else {
+						value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+					}
+				} else if (/[\t\n\f\r\x0B]/.test(character)) {
+					value = '\\' + codePoint.toString(16).toUpperCase() + ' ';
+				} else if (character == '\\' || !isIdentifier && (character == '"' && quote == character || character == '\'' && quote == character) || isIdentifier && regexSingleEscape.test(character)) {
+					value = '\\' + character;
+				} else {
+					value = character;
+				}
+			}
+			output += value;
+		}
+
+		if (isIdentifier) {
+			if (/^-[-\d]/.test(output)) {
+				output = '\\-' + output.slice(1);
+			} else if (/\d/.test(firstChar)) {
+				output = '\\3' + firstChar + ' ' + output.slice(1);
+			}
+		}
+
+		// Remove spaces after `\HEX` escapes that are not followed by a hex digit,
+		// since they’re redundant. Note that this is only possible if the escape
+		// sequence isn’t preceded by an odd number of backslashes.
+		output = output.replace(regexExcessiveSpaces, function ($0, $1, $2) {
+			if ($1 && $1.length % 2) {
+				// It’s not safe to remove the space, so don’t.
+				return $0;
+			}
+			// Strip the space.
+			return ($1 || '') + $2;
+		});
+
+		if (!isIdentifier && options.wrap) {
+			return quote + output + quote;
+		}
+		return output;
+	};
+
+	// Expose default options (so they can be overridden globally).
+	cssesc.options = {
+		'escapeEverything': false,
+		'isIdentifier': false,
+		'quotes': 'single',
+		'wrap': false
+	};
+
+	cssesc.version = '3.0.0';
+
+	cssesc_1 = cssesc;
+	return cssesc_1;
+}
+
+var cssescExports = requireCssesc();
+var cssEscape = /*@__PURE__*/index.getDefaultExportFromCjs(cssescExports);
+
+/**
+ * A specialized version of `_.reduce` for arrays without support for
+ * iteratee shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @param {*} [accumulator] The initial value.
+ * @param {boolean} [initAccum] Specify using the first element of `array` as
+ *  the initial value.
+ * @returns {*} Returns the accumulated value.
+ */
+
+var _arrayReduce;
+var hasRequired_arrayReduce;
+
+function require_arrayReduce () {
+	if (hasRequired_arrayReduce) return _arrayReduce;
+	hasRequired_arrayReduce = 1;
+	function arrayReduce(array, iteratee, accumulator, initAccum) {
+	  var index = -1,
+	      length = array == null ? 0 : array.length;
+
+	  if (initAccum && length) {
+	    accumulator = array[++index];
+	  }
+	  while (++index < length) {
+	    accumulator = iteratee(accumulator, array[index], index, array);
+	  }
+	  return accumulator;
+	}
+
+	_arrayReduce = arrayReduce;
+	return _arrayReduce;
+}
+
+/**
+ * The base implementation of `_.propertyOf` without support for deep paths.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Function} Returns the new accessor function.
+ */
+
+var _basePropertyOf;
+var hasRequired_basePropertyOf;
+
+function require_basePropertyOf () {
+	if (hasRequired_basePropertyOf) return _basePropertyOf;
+	hasRequired_basePropertyOf = 1;
+	function basePropertyOf(object) {
+	  return function(key) {
+	    return object == null ? undefined : object[key];
+	  };
+	}
+
+	_basePropertyOf = basePropertyOf;
+	return _basePropertyOf;
+}
+
+var _deburrLetter;
+var hasRequired_deburrLetter;
+
+function require_deburrLetter () {
+	if (hasRequired_deburrLetter) return _deburrLetter;
+	hasRequired_deburrLetter = 1;
+	var basePropertyOf = require_basePropertyOf();
+
+	/** Used to map Latin Unicode letters to basic Latin letters. */
+	var deburredLetters = {
+	  // Latin-1 Supplement block.
+	  '\xc0': 'A',  '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A',
+	  '\xe0': 'a',  '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a',
+	  '\xc7': 'C',  '\xe7': 'c',
+	  '\xd0': 'D',  '\xf0': 'd',
+	  '\xc8': 'E',  '\xc9': 'E', '\xca': 'E', '\xcb': 'E',
+	  '\xe8': 'e',  '\xe9': 'e', '\xea': 'e', '\xeb': 'e',
+	  '\xcc': 'I',  '\xcd': 'I', '\xce': 'I', '\xcf': 'I',
+	  '\xec': 'i',  '\xed': 'i', '\xee': 'i', '\xef': 'i',
+	  '\xd1': 'N',  '\xf1': 'n',
+	  '\xd2': 'O',  '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O',
+	  '\xf2': 'o',  '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o',
+	  '\xd9': 'U',  '\xda': 'U', '\xdb': 'U', '\xdc': 'U',
+	  '\xf9': 'u',  '\xfa': 'u', '\xfb': 'u', '\xfc': 'u',
+	  '\xdd': 'Y',  '\xfd': 'y', '\xff': 'y',
+	  '\xc6': 'Ae', '\xe6': 'ae',
+	  '\xde': 'Th', '\xfe': 'th',
+	  '\xdf': 'ss',
+	  // Latin Extended-A block.
+	  '\u0100': 'A',  '\u0102': 'A', '\u0104': 'A',
+	  '\u0101': 'a',  '\u0103': 'a', '\u0105': 'a',
+	  '\u0106': 'C',  '\u0108': 'C', '\u010a': 'C', '\u010c': 'C',
+	  '\u0107': 'c',  '\u0109': 'c', '\u010b': 'c', '\u010d': 'c',
+	  '\u010e': 'D',  '\u0110': 'D', '\u010f': 'd', '\u0111': 'd',
+	  '\u0112': 'E',  '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E',
+	  '\u0113': 'e',  '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e',
+	  '\u011c': 'G',  '\u011e': 'G', '\u0120': 'G', '\u0122': 'G',
+	  '\u011d': 'g',  '\u011f': 'g', '\u0121': 'g', '\u0123': 'g',
+	  '\u0124': 'H',  '\u0126': 'H', '\u0125': 'h', '\u0127': 'h',
+	  '\u0128': 'I',  '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I',
+	  '\u0129': 'i',  '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i',
+	  '\u0134': 'J',  '\u0135': 'j',
+	  '\u0136': 'K',  '\u0137': 'k', '\u0138': 'k',
+	  '\u0139': 'L',  '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L',
+	  '\u013a': 'l',  '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l',
+	  '\u0143': 'N',  '\u0145': 'N', '\u0147': 'N', '\u014a': 'N',
+	  '\u0144': 'n',  '\u0146': 'n', '\u0148': 'n', '\u014b': 'n',
+	  '\u014c': 'O',  '\u014e': 'O', '\u0150': 'O',
+	  '\u014d': 'o',  '\u014f': 'o', '\u0151': 'o',
+	  '\u0154': 'R',  '\u0156': 'R', '\u0158': 'R',
+	  '\u0155': 'r',  '\u0157': 'r', '\u0159': 'r',
+	  '\u015a': 'S',  '\u015c': 'S', '\u015e': 'S', '\u0160': 'S',
+	  '\u015b': 's',  '\u015d': 's', '\u015f': 's', '\u0161': 's',
+	  '\u0162': 'T',  '\u0164': 'T', '\u0166': 'T',
+	  '\u0163': 't',  '\u0165': 't', '\u0167': 't',
+	  '\u0168': 'U',  '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U',
+	  '\u0169': 'u',  '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u',
+	  '\u0174': 'W',  '\u0175': 'w',
+	  '\u0176': 'Y',  '\u0177': 'y', '\u0178': 'Y',
+	  '\u0179': 'Z',  '\u017b': 'Z', '\u017d': 'Z',
+	  '\u017a': 'z',  '\u017c': 'z', '\u017e': 'z',
+	  '\u0132': 'IJ', '\u0133': 'ij',
+	  '\u0152': 'Oe', '\u0153': 'oe',
+	  '\u0149': "'n", '\u017f': 's'
+	};
+
+	/**
+	 * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A
+	 * letters to basic Latin letters.
+	 *
+	 * @private
+	 * @param {string} letter The matched letter to deburr.
+	 * @returns {string} Returns the deburred letter.
+	 */
+	var deburrLetter = basePropertyOf(deburredLetters);
+
+	_deburrLetter = deburrLetter;
+	return _deburrLetter;
+}
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+
+var _arrayMap;
+var hasRequired_arrayMap;
+
+function require_arrayMap () {
+	if (hasRequired_arrayMap) return _arrayMap;
+	hasRequired_arrayMap = 1;
+	function arrayMap(array, iteratee) {
+	  var index = -1,
+	      length = array == null ? 0 : array.length,
+	      result = Array(length);
+
+	  while (++index < length) {
+	    result[index] = iteratee(array[index], index, array);
+	  }
+	  return result;
+	}
+
+	_arrayMap = arrayMap;
+	return _arrayMap;
+}
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+
+var isArray_1;
+var hasRequiredIsArray;
+
+function requireIsArray () {
+	if (hasRequiredIsArray) return isArray_1;
+	hasRequiredIsArray = 1;
+	var isArray = Array.isArray;
+
+	isArray_1 = isArray;
+	return isArray_1;
+}
+
+var _baseToString;
+var hasRequired_baseToString;
+
+function require_baseToString () {
+	if (hasRequired_baseToString) return _baseToString;
+	hasRequired_baseToString = 1;
+	var Symbol = isSymbol.require_Symbol(),
+	    arrayMap = require_arrayMap(),
+	    isArray = requireIsArray(),
+	    isSymbol$1 = isSymbol.requireIsSymbol();
+
+	/** Used as references for various `Number` constants. */
+	var INFINITY = 1 / 0;
+
+	/** Used to convert symbols to primitives and strings. */
+	var symbolProto = Symbol ? Symbol.prototype : undefined,
+	    symbolToString = symbolProto ? symbolProto.toString : undefined;
+
+	/**
+	 * The base implementation of `_.toString` which doesn't convert nullish
+	 * values to empty strings.
+	 *
+	 * @private
+	 * @param {*} value The value to process.
+	 * @returns {string} Returns the string.
+	 */
+	function baseToString(value) {
+	  // Exit early for strings to avoid a performance hit in some environments.
+	  if (typeof value == 'string') {
+	    return value;
+	  }
+	  if (isArray(value)) {
+	    // Recursively convert values (susceptible to call stack limits).
+	    return arrayMap(value, baseToString) + '';
+	  }
+	  if (isSymbol$1(value)) {
+	    return symbolToString ? symbolToString.call(value) : '';
+	  }
+	  var result = (value + '');
+	  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+	}
+
+	_baseToString = baseToString;
+	return _baseToString;
+}
+
+var toString_1;
+var hasRequiredToString;
+
+function requireToString () {
+	if (hasRequiredToString) return toString_1;
+	hasRequiredToString = 1;
+	var baseToString = require_baseToString();
+
+	/**
+	 * Converts `value` to a string. An empty string is returned for `null`
+	 * and `undefined` values. The sign of `-0` is preserved.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to convert.
+	 * @returns {string} Returns the converted string.
+	 * @example
+	 *
+	 * _.toString(null);
+	 * // => ''
+	 *
+	 * _.toString(-0);
+	 * // => '-0'
+	 *
+	 * _.toString([1, 2, 3]);
+	 * // => '1,2,3'
+	 */
+	function toString(value) {
+	  return value == null ? '' : baseToString(value);
+	}
+
+	toString_1 = toString;
+	return toString_1;
+}
+
+var deburr_1;
+var hasRequiredDeburr;
+
+function requireDeburr () {
+	if (hasRequiredDeburr) return deburr_1;
+	hasRequiredDeburr = 1;
+	var deburrLetter = require_deburrLetter(),
+	    toString = requireToString();
+
+	/** Used to match Latin Unicode letters (excluding mathematical operators). */
+	var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
+
+	/** Used to compose unicode character classes. */
+	var rsComboMarksRange = '\\u0300-\\u036f',
+	    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+	    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+	    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange;
+
+	/** Used to compose unicode capture groups. */
+	var rsCombo = '[' + rsComboRange + ']';
+
+	/**
+	 * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and
+	 * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).
+	 */
+	var reComboMark = RegExp(rsCombo, 'g');
+
+	/**
+	 * Deburrs `string` by converting
+	 * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)
+	 * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)
+	 * letters to basic Latin letters and removing
+	 * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 3.0.0
+	 * @category String
+	 * @param {string} [string=''] The string to deburr.
+	 * @returns {string} Returns the deburred string.
+	 * @example
+	 *
+	 * _.deburr('déjà vu');
+	 * // => 'deja vu'
+	 */
+	function deburr(string) {
+	  string = toString(string);
+	  return string && string.replace(reLatin, deburrLetter).replace(reComboMark, '');
+	}
+
+	deburr_1 = deburr;
+	return deburr_1;
+}
+
+/** Used to match words composed of alphanumeric characters. */
+
+var _asciiWords;
+var hasRequired_asciiWords;
+
+function require_asciiWords () {
+	if (hasRequired_asciiWords) return _asciiWords;
+	hasRequired_asciiWords = 1;
+	var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+
+	/**
+	 * Splits an ASCII `string` into an array of its words.
+	 *
+	 * @private
+	 * @param {string} The string to inspect.
+	 * @returns {Array} Returns the words of `string`.
+	 */
+	function asciiWords(string) {
+	  return string.match(reAsciiWord) || [];
+	}
+
+	_asciiWords = asciiWords;
+	return _asciiWords;
+}
+
+/** Used to detect strings that need a more robust regexp to match words. */
+
+var _hasUnicodeWord;
+var hasRequired_hasUnicodeWord;
+
+function require_hasUnicodeWord () {
+	if (hasRequired_hasUnicodeWord) return _hasUnicodeWord;
+	hasRequired_hasUnicodeWord = 1;
+	var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;
+
+	/**
+	 * Checks if `string` contains a word composed of Unicode symbols.
+	 *
+	 * @private
+	 * @param {string} string The string to inspect.
+	 * @returns {boolean} Returns `true` if a word is found, else `false`.
+	 */
+	function hasUnicodeWord(string) {
+	  return reHasUnicodeWord.test(string);
+	}
+
+	_hasUnicodeWord = hasUnicodeWord;
+	return _hasUnicodeWord;
+}
+
+/** Used to compose unicode character classes. */
+
+var _unicodeWords;
+var hasRequired_unicodeWords;
+
+function require_unicodeWords () {
+	if (hasRequired_unicodeWords) return _unicodeWords;
+	hasRequired_unicodeWords = 1;
+	var rsAstralRange = '\\ud800-\\udfff',
+	    rsComboMarksRange = '\\u0300-\\u036f',
+	    reComboHalfMarksRange = '\\ufe20-\\ufe2f',
+	    rsComboSymbolsRange = '\\u20d0-\\u20ff',
+	    rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
+	    rsDingbatRange = '\\u2700-\\u27bf',
+	    rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff',
+	    rsMathOpRange = '\\xac\\xb1\\xd7\\xf7',
+	    rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf',
+	    rsPunctuationRange = '\\u2000-\\u206f',
+	    rsSpaceRange = ' \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000',
+	    rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde',
+	    rsVarRange = '\\ufe0e\\ufe0f',
+	    rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
+
+	/** Used to compose unicode capture groups. */
+	var rsApos = "['\u2019]",
+	    rsBreak = '[' + rsBreakRange + ']',
+	    rsCombo = '[' + rsComboRange + ']',
+	    rsDigits = '\\d+',
+	    rsDingbat = '[' + rsDingbatRange + ']',
+	    rsLower = '[' + rsLowerRange + ']',
+	    rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',
+	    rsFitz = '\\ud83c[\\udffb-\\udfff]',
+	    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
+	    rsNonAstral = '[^' + rsAstralRange + ']',
+	    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
+	    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
+	    rsUpper = '[' + rsUpperRange + ']',
+	    rsZWJ = '\\u200d';
+
+	/** Used to compose unicode regexes. */
+	var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',
+	    rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',
+	    rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?',
+	    rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?',
+	    reOptMod = rsModifier + '?',
+	    rsOptVar = '[' + rsVarRange + ']?',
+	    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
+	    rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])',
+	    rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])',
+	    rsSeq = rsOptVar + reOptMod + rsOptJoin,
+	    rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq;
+
+	/** Used to match complex or compound words. */
+	var reUnicodeWord = RegExp([
+	  rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',
+	  rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',
+	  rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,
+	  rsUpper + '+' + rsOptContrUpper,
+	  rsOrdUpper,
+	  rsOrdLower,
+	  rsDigits,
+	  rsEmoji
+	].join('|'), 'g');
+
+	/**
+	 * Splits a Unicode `string` into an array of its words.
+	 *
+	 * @private
+	 * @param {string} The string to inspect.
+	 * @returns {Array} Returns the words of `string`.
+	 */
+	function unicodeWords(string) {
+	  return string.match(reUnicodeWord) || [];
+	}
+
+	_unicodeWords = unicodeWords;
+	return _unicodeWords;
+}
+
+var words_1;
+var hasRequiredWords;
+
+function requireWords () {
+	if (hasRequiredWords) return words_1;
+	hasRequiredWords = 1;
+	var asciiWords = require_asciiWords(),
+	    hasUnicodeWord = require_hasUnicodeWord(),
+	    toString = requireToString(),
+	    unicodeWords = require_unicodeWords();
+
+	/**
+	 * Splits `string` into an array of its words.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 3.0.0
+	 * @category String
+	 * @param {string} [string=''] The string to inspect.
+	 * @param {RegExp|string} [pattern] The pattern to match words.
+	 * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
+	 * @returns {Array} Returns the words of `string`.
+	 * @example
+	 *
+	 * _.words('fred, barney, & pebbles');
+	 * // => ['fred', 'barney', 'pebbles']
+	 *
+	 * _.words('fred, barney, & pebbles', /[^, ]+/g);
+	 * // => ['fred', 'barney', '&', 'pebbles']
+	 */
+	function words(string, pattern, guard) {
+	  string = toString(string);
+	  pattern = guard ? undefined : pattern;
+
+	  if (pattern === undefined) {
+	    return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);
+	  }
+	  return string.match(pattern) || [];
+	}
+
+	words_1 = words;
+	return words_1;
+}
+
+var _createCompounder;
+var hasRequired_createCompounder;
+
+function require_createCompounder () {
+	if (hasRequired_createCompounder) return _createCompounder;
+	hasRequired_createCompounder = 1;
+	var arrayReduce = require_arrayReduce(),
+	    deburr = requireDeburr(),
+	    words = requireWords();
+
+	/** Used to compose unicode capture groups. */
+	var rsApos = "['\u2019]";
+
+	/** Used to match apostrophes. */
+	var reApos = RegExp(rsApos, 'g');
+
+	/**
+	 * Creates a function like `_.camelCase`.
+	 *
+	 * @private
+	 * @param {Function} callback The function to combine each word.
+	 * @returns {Function} Returns the new compounder function.
+	 */
+	function createCompounder(callback) {
+	  return function(string) {
+	    return arrayReduce(words(deburr(string).replace(reApos, '')), callback, '');
+	  };
+	}
+
+	_createCompounder = createCompounder;
+	return _createCompounder;
+}
+
+var kebabCase_1;
+var hasRequiredKebabCase;
+
+function requireKebabCase () {
+	if (hasRequiredKebabCase) return kebabCase_1;
+	hasRequiredKebabCase = 1;
+	var createCompounder = require_createCompounder();
+
+	/**
+	 * Converts `string` to
+	 * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles).
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 3.0.0
+	 * @category String
+	 * @param {string} [string=''] The string to convert.
+	 * @returns {string} Returns the kebab cased string.
+	 * @example
+	 *
+	 * _.kebabCase('Foo Bar');
+	 * // => 'foo-bar'
+	 *
+	 * _.kebabCase('fooBar');
+	 * // => 'foo-bar'
+	 *
+	 * _.kebabCase('__FOO_BAR__');
+	 * // => 'foo-bar'
+	 */
+	var kebabCase = createCompounder(function(result, word, index) {
+	  return result + (index ? '-' : '') + word.toLowerCase();
+	});
+
+	kebabCase_1 = kebabCase;
+	return kebabCase_1;
+}
+
+var kebabCaseExports = requireKebabCase();
+var kebabCase = /*@__PURE__*/index.getDefaultExportFromCjs(kebabCaseExports);
+
 var getQuery = function (_a) {
     var breakpoint = _a.breakpoint, type = _a.type, _b = _a.isMatchMedia, isMatchMedia = _b === void 0 ? false : _b;
     var breakpointValue = typeof breakpoint === "number" ? breakpoint : arcBreakpoints.ArcBreakpoints[breakpoint];
@@ -435,13 +1227,13 @@ var NavigationHeaderStyleElement = function (_a) {
     var generateCssStyles = function (declarations) {
         return Object.entries(declarations).reduce(function (acc, _a) {
             var property = _a[0], value = _a[1];
-            return "".concat(acc).concat(kebabCase.kebabCase(property), ":").concat(value, ";");
+            return "".concat(acc).concat(kebabCase(property), ":").concat(value, ";");
         }, "");
     };
     var styleStrings = css.map(function (_a) {
         var declarations = _a.declarations, className = _a.className, mediaQuery = _a.mediaQuery;
-        var escapedClassName = kebabCase.cssEscape(className, { isIdentifier: true });
-        var escapedStyles = kebabCase.cssEscape(generateCssStyles(declarations));
+        var escapedClassName = cssEscape(className, { isIdentifier: true });
+        var escapedStyles = cssEscape(generateCssStyles(declarations));
         var cssDeclarations = ".".concat(escapedClassName, " { ").concat(escapedStyles, " }");
         return mediaQuery
             ? "".concat(getQuery(mediaQuery), " { ").concat(cssDeclarations, " }")
@@ -529,7 +1321,7 @@ var NavigationHeaderNavList = function (_a) {
 };
 
 var NavigationHeaderNav = function (props) {
-    var navigationHeaderContext = React.useContext(kebabCase.NavigationHeaderContext);
+    var navigationHeaderContext = React.useContext(NavigationHeaderContext);
     return (React.createElement("nav", { "aria-label": "primary" },
         React.createElement("div", { ref: navigationHeaderContext === null || navigationHeaderContext === void 0 ? void 0 : navigationHeaderContext.navBarPortalRef }),
         React.createElement(NavigationHeaderContainer, filterAttrs.__assign({}, props))));
@@ -555,13 +1347,13 @@ var defaultHeaderVisibility = {
 };
 
 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, background = _a.background, meatballMenuTooltip = _a.meatballMenuTooltip, burgerMenuBottomContent = _a.burgerMenuBottomContent, burgerMenuTopContent = _a.burgerMenuTopContent, burgerMenuVisibility = _a.burgerMenuVisibility, navMenuVisibility = _a.navMenuVisibility;
+    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, background = _a.background, meatballMenuTooltip = _a.meatballMenuTooltip, burgerMenuActions = _a.burgerMenuActions, burgerMenuFooter = _a.burgerMenuFooter, burgerMenuHeader = _a.burgerMenuHeader, burgerMenuVisibility = _a.burgerMenuVisibility, navMenuVisibility = _a.navMenuVisibility;
     var navBarPortalRef = React.useRef(null);
     var _b = React.useState(false), isSubMenuItemActive = _b[0], setIsSubMenuItemActive = _b[1];
     var navBarBackground = isSubMenuItemActive ? "lightElevated" : background;
     var burgerMenuVisibilityProps = filterAttrs.__assign(filterAttrs.__assign({}, defaultHeaderVisibility.burgerMenu), burgerMenuVisibility);
     var navMenuVisibilityProps = filterAttrs.__assign(filterAttrs.__assign({}, defaultHeaderVisibility.navItems), navMenuVisibility);
-    return (React.createElement(kebabCase.NavigationHeaderContext.Provider, { value: {
+    return (React.createElement(NavigationHeaderContext.Provider, { value: {
             navBarPortalRef: navBarPortalRef,
             isPill: isPill,
             isExtended: isExtended,
@@ -580,7 +1372,7 @@ var NavigationHeader = function (_a) {
                 rightSlot && (React.createElement("div", { className: "arc-NavigationHeader-rightSlot" }, rightSlot)),
                 React.createElement(Visible.Visible, filterAttrs.__assign({}, burgerMenuVisibilityProps),
                     React.createElement("div", { className: "arc-NavigationHeader-burgerMenuSlot" },
-                        React.createElement(NavigationHeaderBurgerMenu, { navItems: navItems, topContent: burgerMenuTopContent, bottomContent: burgerMenuBottomContent })))))));
+                        React.createElement(NavigationHeaderBurgerMenu, { logo: logo, navItems: navItems, actions: burgerMenuActions, header: burgerMenuHeader, footer: burgerMenuFooter })))))));
 };
 
 var NavigationHeaderAction = function (_a) {
@@ -589,7 +1381,7 @@ var NavigationHeaderAction = function (_a) {
             "arc-NavigationHeaderAction--attention": isAttention,
         }) },
         React.createElement(Tooltip.Tooltip, { asChild: true, delayDuration: 0, title: title, alignContent: "center", supportingCopy: supportingCopy, side: "bottom" },
-            React.createElement(kebabCase.NavigationHeaderButton, { isPadded: false, onClick: onClick },
+            React.createElement(NavigationHeaderButton, { isPadded: false, onClick: onClick },
                 React.createElement("div", { className: "arc-NavigationHeaderAction-content" },
                     React.createElement(Icon.Icon, { "aria-hidden": true, icon: icon, size: 24 }),
                     React.createElement(VisuallyHidden.VisuallyHidden, null, ariaLabel))))));