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

package/lib/NavigationHeader/NavigationHeader.cjs

@@ -15,9 +15,9 @@ var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
 var Icon = require('../_shared/cjs/Icon-CzhyKqMd.cjs');
 var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
 var ConditionalWrapper = require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.cjs');
-var kebabCase = require('../_shared/cjs/kebabCase-D5yA6u-V.cjs');
-var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-DWUgmeLA.cjs');
+var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-CS8JVk5T.cjs');
 var Popover = require('../_shared/cjs/Popover-C5mmMkYU.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/Combination-B-rSVLfT.cjs');
@@ -25,8 +25,7 @@ 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-DlNskPlN.cjs');
+require('../_shared/cjs/index.es-fkulh7qu.cjs');
 require('../_shared/cjs/index-CaO6cOF0.cjs');
 require('../_shared/cjs/index-Bt7hfZBc.cjs');
 
@@ -128,6 +127,15 @@ var NavigationHeaderInlineAction = function (_a) {
             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("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];
@@ -167,6 +175,12 @@ var NavigationHeaderMenuLink = function (_a) {
             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, actions = _a.actions, header = _a.header, footer = _a.footer, logo = _a.logo;
     var id = React.useId();
@@ -201,7 +215,7 @@ 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(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"))),
@@ -220,7 +234,7 @@ var NavigationHeaderBurgerMenu = function (_a) {
                                                 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(kebabCase.NavigationHeaderCloseButton, { onClick: closeMenu })))),
+                                                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) },
@@ -263,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];
@@ -270,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) {
@@ -316,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) {
@@ -369,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);
@@ -451,7 +467,7 @@ 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(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" },
@@ -483,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];
@@ -500,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, " }")
@@ -594,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))));
@@ -626,7 +1353,7 @@ var NavigationHeader = function (_a) {
     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,
@@ -654,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))))));