@arc-ui/components 13.3.0 → 13.4.0

package/lib/index.cjs

@@ -1423,7 +1423,7 @@ var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
 
 /**
  * Do not edit directly
- * Generated on Wed, 18 Feb 2026 11:14:49 GMT
+ * Generated on Wed, 25 Feb 2026 15:47:05 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -3028,7 +3028,7 @@ function subYears(dirtyDate, dirtyAmount) {
   return addYears(dirtyDate, -amount);
 }
 
-var KeyNames$3;
+var KeyNames$2;
 (function (KeyNames) {
     KeyNames["ArrowUp"] = "ArrowUp";
     KeyNames["ArrowDown"] = "ArrowDown";
@@ -3041,26 +3041,26 @@ var KeyNames$3;
     KeyNames["Tab"] = "Tab";
     KeyNames["Enter"] = "Enter";
     KeyNames["Space"] = " ";
-})(KeyNames$3 || (KeyNames$3 = {}));
+})(KeyNames$2 || (KeyNames$2 = {}));
 
 var getKeyDownDate = function (_a) {
     var key = _a.key, shiftKey = _a.shiftKey, focusDate = _a.focusDate;
     switch (key) {
-        case KeyNames$3.ArrowDown:
+        case KeyNames$2.ArrowDown:
             return addWeeks(focusDate, 1);
-        case KeyNames$3.ArrowLeft:
+        case KeyNames$2.ArrowLeft:
             return subDays(focusDate, 1);
-        case KeyNames$3.ArrowRight:
+        case KeyNames$2.ArrowRight:
             return addDays(focusDate, 1);
-        case KeyNames$3.ArrowUp:
+        case KeyNames$2.ArrowUp:
             return subWeeks(focusDate, 1);
-        case KeyNames$3.Home:
+        case KeyNames$2.Home:
             return dateWithoutTime(startOfWeek(focusDate, { weekStartsOn: 1 }));
-        case KeyNames$3.End:
+        case KeyNames$2.End:
             return dateWithoutTime(endOfWeek(focusDate, { weekStartsOn: 1 }));
-        case KeyNames$3.PageUp:
+        case KeyNames$2.PageUp:
             return shiftKey ? subYears(focusDate, 1) : subMonths(focusDate, 1);
-        case KeyNames$3.PageDown:
+        case KeyNames$2.PageDown:
             return shiftKey ? addYears(focusDate, 1) : addMonths(focusDate, 1);
         default:
             return focusDate;
@@ -5558,13 +5558,13 @@ var CalendarDayGrid = function (_a) {
     var handleKeyDown = function (e) {
         var key = e.key;
         var newDate = e.target.getAttribute("data-date");
-        if (key === KeyNames$3.Tab) {
+        if (key === KeyNames$2.Tab) {
             return;
         }
-        if (Object.values(KeyNames$3).includes(key)) {
+        if (Object.values(KeyNames$2).includes(key)) {
             e.preventDefault();
         }
-        if ([KeyNames$3.Space, KeyNames$3.Enter].includes(key) && newDate) {
+        if ([KeyNames$2.Space, KeyNames$2.Enter].includes(key) && newDate) {
             onDayNumberClick(dateWithoutTime(new Date(parseInt(newDate))))();
         }
         else {
@@ -5870,7 +5870,7 @@ function setYear(dirtyDate, dirtyYear) {
 var calendarKeydownHandler = function (payload, state) {
     var displayDate = state.displayDate, focusDate = state.focusDate, highlightedRange = state.highlightedRange;
     var minDate = payload.minDate, maxDate = payload.maxDate, calendarType = payload.calendarType, key = payload.key, shiftKey = payload.shiftKey, range = payload.range, selectionType = payload.selectionType;
-    var isNavigatingByYear = shiftKey && [KeyNames$3.PageUp, KeyNames$3.PageDown].includes(key);
+    var isNavigatingByYear = shiftKey && [KeyNames$2.PageUp, KeyNames$2.PageDown].includes(key);
     var keyDownDate = getKeyDownDate({
         focusDate: focusDate,
         key: key,
@@ -8259,12 +8259,12 @@ var CarouselDotButton = function (_a) {
         }), onKeyDown: onKeyDown(scrollSnapIndex), onClick: function () { return onClick(scrollSnapIndex); }, "aria-selected": isSelected, role: "tab", "aria-label": "Show slide ".concat(scrollSnapIndex + 1) }));
 };
 
-var KeyNames$2;
+var KeyNames$1;
 (function (KeyNames) {
     KeyNames["ArrowLeft"] = "ArrowLeft";
     KeyNames["ArrowRight"] = "ArrowRight";
     KeyNames["Escape"] = "Escape";
-})(KeyNames$2 || (KeyNames$2 = {}));
+})(KeyNames$1 || (KeyNames$1 = {}));
 
 var Carousel = function (_a) {
     var children = _a.children, responsive = _a.responsive, _b = _a.itemsToScroll, itemsToScroll = _b === void 0 ? 1 : _b, _c = _a.itemsPerSlide, itemsPerSlide = _c === void 0 ? 1 : _c, _d = _a.controlsPosition, controlsPosition = _d === void 0 ? "bottom" : _d, _e = _a.behavior, behavior = _e === void 0 ? "default" : _e, _f = _a.overflow, overflow = _f === void 0 ? "hidden" : _f, _g = _a.withGutter, withGutter = _g === void 0 ? true : _g, _h = _a.loop, loop = _h === void 0 ? false : _h, _j = _a.isPartialVisible, isPartialVisible = _j === void 0 ? false : _j, autoplay = _a.autoplay, isPlaying = _a.isPlaying, fade = _a.fade;
@@ -8330,17 +8330,17 @@ var Carousel = function (_a) {
     }, [emblaApi]);
     var onSlideKeyDown = function (e) {
         var _a;
-        if (e.key === KeyNames$2.Escape) {
+        if (e.key === KeyNames$1.Escape) {
             prevButtonEnabled
                 ? (_a = prevButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus()
                 : setCarouselDotButtonFocusIndex(0);
         }
     };
     var onCarouselDotButtonKeyDown = function (index) { return function (e) {
-        if (e.key === KeyNames$2.ArrowLeft) {
+        if (e.key === KeyNames$1.ArrowLeft) {
             setCarouselDotButtonFocusIndex(index === 0 ? scrollSnaps.length - 1 : index - 1);
         }
-        if (e.key === KeyNames$2.ArrowRight) {
+        if (e.key === KeyNames$1.ArrowRight) {
             setCarouselDotButtonFocusIndex(index + 1 === scrollSnaps.length ? 0 : index + 1);
         }
     }; };
@@ -8432,15 +8432,14 @@ var Provider$4 = Context$2.Provider;
  * Use `FormControl` to provide inputs with labels, helper text and error messages
  */
 var FormControl = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.elementType, ElementType = _c === void 0 ? "div" : _c, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _d = _a.labelSize, labelSize = _d === void 0 ? "l" : _d, _e = _a.labelPosition, labelPosition = _e === void 0 ? "top" : _e, _f = _a.requirementStatus, requirementStatus = _f === void 0 ? "optional" : _f, _g = _a.helperUnderLabel, helperUnderLabel = _g === void 0 ? false : _g, isDisabled = _a.isDisabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _j = _a.isErrorAlert, isErrorAlert = _j === void 0 ? false : _j, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure", "isErrorAlert"]);
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _h = _a.isErrorAlert, isErrorAlert = _h === void 0 ? false : _h, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure", "isErrorAlert"]);
     var surface = React.useContext(Context$3).surface;
-    var _k = useAriaDescribedby({
+    var _j = useAriaDescribedby({
         disclosureText: disclosureText,
         errorMessage: errorMessage,
         helper: helper,
         id: htmlFor || id, // `htmlFor` is preference to keep this deterministic with TextInput
-    }), ariaDescribedby = _k.ariaDescribedby, idError = _k.idError, idHelper = _k.idHelper, idDisclosure = _k.idDisclosure;
+    }), ariaDescribedby = _j.ariaDescribedby, idError = _j.idError, idHelper = _j.idHelper, idDisclosure = _j.idDisclosure;
     var LabelType = ElementType === "div" ? "label" : "legend";
     var elementProps = {};
     var labelProps = {};
@@ -8460,14 +8459,11 @@ var FormControl = function (_a) {
         ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
         : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
     return (React.createElement(Provider$4, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, __assign({ className: classNames((_b = {
-                    "arc-FormControl": true,
-                    "arc-FormControl--isDisabled": isDisabled,
-                    "arc-FormControl--onDarkSurface": surface === "dark",
-                    "arc-FormControl--sideLabel": labelPosition === "left"
-                },
-                _b["arc-FormControl--".concat(labelSize)] = labelSize !== "l",
-                _b)), id: id }, elementProps, filterAttrs(props)),
+        React.createElement(ElementType, __assign({ className: classNames("arc-FormControl", "arc-FormControl--".concat(labelSize), {
+                "arc-FormControl--isDisabled": isDisabled,
+                "arc-FormControl--onDarkSurface": surface === "dark",
+                "arc-FormControl--sideLabel": labelPosition === "left",
+            }), id: id }, elementProps, filterAttrs(props)),
             hideLabel === true ? (React.createElement(VisuallyHidden$2, null,
                 React.createElement(LabelType, __assign({ className: classNames("arc-FormControl-label", {
                         "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper,
@@ -14728,7 +14724,7 @@ var ComboBoxOptions = function (_a) {
         }) }, option.isCustom ? (React.createElement(ComboBoxCustomOption, { option: option, optionsLength: options.length, customOptionSupportingCopy: customOptionSupportingCopy, selectedOptions: selectedOptions, isHighlighted: isHighlighted(i, highlightedOptionIndex), isSelected: isSingleSelected(option, singleSelectedOption) })) : (React.createElement(ComboBoxRegularOption, { option: option, isDisabled: isOptionDisabled(option, selectedOptions), isMultiSelectable: isMultiSelectable, isHighlighted: isHighlighted(i, highlightedOptionIndex), isMultiSelected: isMultiSelected(option, selectedOptions), isSingleSelected: isSingleSelected(option, singleSelectedOption) })))); })) : (React.createElement(ComboBoxNoResults, { noResultsSupportingCopy: noResultsSupportingCopy, value: value }))));
 };
 
-var KeyNames$1;
+var KeyNames;
 (function (KeyNames) {
     KeyNames["ArrowUp"] = "ArrowUp";
     KeyNames["ArrowDown"] = "ArrowDown";
@@ -14736,10 +14732,10 @@ var KeyNames$1;
     KeyNames["Enter"] = "Enter";
     KeyNames["Escape"] = "Escape";
     KeyNames["Space"] = " ";
-})(KeyNames$1 || (KeyNames$1 = {}));
+})(KeyNames || (KeyNames = {}));
 
 var isSelectionKey = function (key) {
-    return key === KeyNames$1.Space || key === KeyNames$1.Enter;
+    return key === KeyNames.Space || key === KeyNames.Enter;
 };
 
 var ComboBoxClearButton = function (_a) {
@@ -19113,8 +19109,11 @@ var ImpactCard = function (_a) {
             return "arc-ImpactCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
         })
         : [];
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight,
+    };
     return (React.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React.createElement("div", { className: "arc-ImpactCard--preserveAspectRatioWrapper" }, children)); } },
-        React.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-ImpactCard"], aspectRatioClassNames, false), [{
+        React.createElement("div", __assign({ style: __assign({}, minHeightStyle), className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-ImpactCard"], aspectRatioClassNames, false), [{
                     "arc-ImpactCard--darkPathway": isDarkPathway,
                     "arc-ImpactCard--outlined": url && showHoverState,
                     "arc-ImpactCard--isHovered": showHoverState,
@@ -19190,10 +19189,11 @@ var InformationCard = function (_a) {
             index > 0 && React.createElement(VerticalSpace, { size: "8" }),
             React.createElement(Text, null, paragraph))); });
     };
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight ? minHeight : minimumHeight,
+    };
     return (React.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React.createElement("div", { className: "arc-InformationCard--preserveAspectRatioWrapper" }, children)); } },
-        React.createElement("div", __assign({ ref: cardRef, style: {
-                minHeight: minHeight ? minHeight : minimumHeight,
-            }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-InformationCard"], aspectRatioClassNames, false), [{
+        React.createElement("div", __assign({ ref: cardRef, style: __assign({}, minHeightStyle), className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-InformationCard"], aspectRatioClassNames, false), [{
                     "arc-InformationCard--isALink": cardUrl,
                     "arc-InformationCard--outlined": cardUrl && showHoverState,
                     "arc-InformationCard--onDarkSurface": surface === "dark",
@@ -19276,8 +19276,11 @@ var MediaCard = function (_a) {
             return "arc-MediaCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
         })
         : [];
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight,
+    };
     return (React.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React.createElement("div", { className: "arc-MediaCard--preserveAspectRatioWrapper" }, children)); } },
-        React.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-MediaCard"], aspectRatioClassNames, false), [{
+        React.createElement("div", __assign({ style: __assign({}, minHeightStyle), className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-MediaCard"], aspectRatioClassNames, false), [{
                     "arc-MediaCard--outlined": url && isContained && showHoverState,
                     "arc-MediaCard--contained": isContained,
                     "arc-MediaCard--onDarkSurface": surface === "dark",
@@ -20963,6 +20966,32 @@ var MenuTrigger = function (_a) {
         }), asChild: asChild }, filterAttrs(props)), children));
 };
 
+/**
+ * Use `Skeleton` to display a placeholder preview of your page before the data gets loaded to reduce load-time frustration.
+ */
+var Skeleton = function (_a) {
+    var _b;
+    var width = _a.width, height = _a.height, isCircle = _a.isCircle, _c = _a.animation, animation = _c === void 0 ? "pulse" : _c, props = __rest(_a, ["width", "height", "isCircle", "animation"]);
+    return (React.createElement("span", __assign({ className: classNames("arc-Skeleton", (_b = {
+                "arc-Skeleton--circle": isCircle
+            },
+            _b["arc-Skeleton--".concat(animation)] = animation !== "none",
+            _b)), style: { width: width, height: height } }, filterAttrs(props))));
+};
+
+var MenuSkeletonItem = function (_a) {
+    var _b = _a.hasLeadingIcon, hasLeadingIcon = _b === void 0 ? false : _b, _c = _a.hasTrailingIcon, hasTrailingIcon = _c === void 0 ? false : _c, _d = _a.hasSupportingText, hasSupportingText = _d === void 0 ? false : _d;
+    return (React.createElement("div", { className: "arc-MenuSkeletonItem" },
+        hasLeadingIcon && (React.createElement("div", { className: "arc-MenuSkeletonItem-leadingIcon" },
+            React.createElement(Skeleton, { isCircle: true, width: 24, height: 24 }))),
+        React.createElement("div", { className: "arc-MenuSkeletonItem-textWrapper" },
+            React.createElement(Skeleton, { height: 24 }),
+            hasSupportingText && (React.createElement("div", { className: "arc-MenuSkeletonItem-supportingText" },
+                React.createElement(Skeleton, { height: 16 })))),
+        hasTrailingIcon && (React.createElement("div", { className: "arc-MenuSkeletonItem-trailingIcon" },
+            React.createElement(Skeleton, { isCircle: true, width: 24, height: 24 })))));
+};
+
 /** Use `Modal` to display information that needs immediate action from a user. */
 var Modal = function (_a) {
     var _b;
@@ -22451,19 +22480,6 @@ var SiteHeaderV2VerticalDivider = function () {
     return React.createElement("li", { className: "arc-SiteHeaderV2VerticalDivider-line" });
 };
 
-/**
- * Use `Skeleton` to display a placeholder preview of your page before the data gets loaded to reduce load-time frustration.
- */
-var Skeleton = function (_a) {
-    var _b;
-    var width = _a.width, height = _a.height, isCircle = _a.isCircle, _c = _a.animation, animation = _c === void 0 ? "pulse" : _c, props = __rest(_a, ["width", "height", "isCircle", "animation"]);
-    return (React.createElement("span", __assign({ className: classNames("arc-Skeleton", (_b = {
-                "arc-Skeleton--circle": isCircle
-            },
-            _b["arc-Skeleton--".concat(animation)] = animation !== "none",
-            _b)), style: { width: width, height: height } }, filterAttrs(props))));
-};
-
 /** Use `SkipLink` to help keyboard-only users skip to the main content on a page. */
 var SkipLink = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
@@ -22854,7 +22870,7 @@ var TabsList = function (_a) {
  * Use `Tag` to promote features and manage filtering.
  */
 var Tag = function (_a) {
-    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "icon", "onClick", "onRemove", "title"]);
+    var children = _a.children, isRemovable = _a.isRemovable, link = _a.link, ariaLabel = _a.ariaLabel, icon = _a.icon, onClick = _a.onClick, onRemove = _a.onRemove, title = _a.title, props = __rest(_a, ["children", "isRemovable", "link", "ariaLabel", "icon", "onClick", "onRemove", "title"]);
     var _b = React.useState(false), isRemoved = _b[0], setIsRemoved = _b[1];
     var surface = React.useContext(Context$3).surface;
     var onRemoveHandler = function () {
@@ -22868,10 +22884,10 @@ var Tag = function (_a) {
             "arc-Tag--removed": isRemoved,
             "arc-Tag--onDarkSurface": surface === "dark",
         }) }, (isRemoved && { "aria-hidden": true }), filterAttrs(props)),
-        link ? (React.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0 },
+        link ? (React.createElement("a", { className: "arc-Tag-content", href: link, tabIndex: 0, "aria-label": ariaLabel },
             icon && (React.createElement("span", { className: "arc-Tag-icon" },
                 React.createElement(Icon$1, { "data-testid": "arc-Tag-icon", icon: icon }))),
-            React.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React.createElement(React.Fragment, null, onClick ? (React.createElement("button", { className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
+            React.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React.createElement(React.Fragment, null, onClick ? (React.createElement("button", { "aria-label": ariaLabel, className: "arc-Tag-content", onClick: onClick, "data-testid": "arc-Tag-content" },
             icon && (React.createElement("span", { className: "arc-Tag-icon" },
                 React.createElement(Icon$1, { "data-testid": "arc-Tag-icon", icon: icon }))),
             React.createElement("div", { className: "arc-Tag-label", title: title }, children))) : (React.createElement("div", { className: "arc-Tag-content", "data-testid": "arc-Tag-content" },
@@ -22885,7 +22901,7 @@ var Tag = function (_a) {
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
 var TextArea = function (_a) {
-    var ref = _a.ref, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "l" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
+    var ref = _a.ref, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, errorMessage = _a.errorMessage, helper = _a.helper, hideLabel = _a.hideLabel, id = _a.id, _c = _a.resize, resize = _c === void 0 ? "manual" : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isReadOnly, isReadOnly = _e === void 0 ? false : _e, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, _g = _a.showCharacterCount, showCharacterCount = _g === void 0 ? true : _g, label = _a.label, _h = _a.labelSize, labelSize = _h === void 0 ? "m" : _h, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onFocus = _a.onFocus, onChange = _a.onChange, onClickDisclosure = _a.onClickDisclosure, value = _a.value, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, width = _a.width, autoComplete = _a.autoComplete, _j = _a.minHeight, minHeight = _j === void 0 ? "116px" : _j, maxHeight = _a.maxHeight, isErrorAlert = _a.isErrorAlert, props = __rest(_a, ["ref", "defaultValue", "errorMessage", "helper", "hideLabel", "id", "resize", "isDisabled", "isReadOnly", "isRequired", "showCharacterCount", "label", "labelSize", "maxLength", "name", "onBlur", "onFocus", "onChange", "onClickDisclosure", "value", "disclosureTitle", "disclosureText", "width", "autoComplete", "minHeight", "maxHeight", "isErrorAlert"]);
     var surface = React.useContext(Context$3).surface;
     var ourRef = React.useRef(null);
     var _k = React.useState((value && value.length) || (defaultValue && defaultValue.length) || 0), characterCount = _k[0], setCharacterCount = _k[1];
@@ -22940,7 +22956,7 @@ var TextArea = function (_a) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "13.3.0",
+  version: "13.4.0",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -24033,8 +24049,11 @@ var TypographyCard = function (_a) {
             return "arc-TypographyCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
         })
         : [];
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight,
+    };
     return (React.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React.createElement("div", { className: "arc-TypographyCard--preserveAspectRatioWrapper" }, children)); } },
-        React.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-TypographyCard"], aspectRatioClassNames, false), [{
+        React.createElement("div", __assign({ style: __assign({}, minHeightStyle), className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-TypographyCard"], aspectRatioClassNames, false), [{
                     "arc-TypographyCard--outlined": showHoverState,
                     "arc-TypographyCard--darkPathway": isDarkPathway,
                     "arc-TypographyCard--lightPathway": !isDarkPathway,
@@ -27571,10 +27590,10 @@ var NavigationHeaderCta = function (_a) {
 };
 
 var NavigationHeaderCollapsingNavList = function (_a) {
-    var mainLink = _a.mainLink, description = _a.description, category = _a.category, links = _a.links, revealLinkIconOnHover = _a.revealLinkIconOnHover, _b = _a.autoFocusOnExpand, autoFocusOnExpand = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "dark" : _c, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d;
+    var mainLink = _a.mainLink, description = _a.description, category = _a.category, links = _a.links, revealLinkIconOnHover = _a.revealLinkIconOnHover, _b = _a.isBottomSpacing, isBottomSpacing = _b === void 0 ? false : _b, _c = _a.autoFocusOnExpand, autoFocusOnExpand = _c === void 0 ? true : _c, _d = _a.background, background = _d === void 0 ? "dark" : _d, _e = _a.defaultOpen, defaultOpen = _e === void 0 ? false : _e;
     var id = React.useId();
     var surface = React.useContext(Context$3).surface;
-    var _e = React.useState(defaultOpen), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = React.useState(defaultOpen), isOpen = _f[0], setIsOpen = _f[1];
     var containerRef = React.useRef(null);
     var onClick = function (e) {
         setIsOpen(e.currentTarget.open);
@@ -27596,20 +27615,21 @@ var NavigationHeaderCollapsingNavList = function (_a) {
             React.createElement("span", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryIcon" },
                 React.createElement(ThemeIcon, { size: 16, icon: "disclosureExpand" }))),
         React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-content" },
-            React.createElement(VerticalSpace, { size: "8" }),
             description && (React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-description" },
+                React.createElement(VerticalSpace, { size: "8" }),
                 React.createElement(Text, { size: "s", tone: "muted" }, description))),
             React.createElement("div", { ref: containerRef },
-                mainLink && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace, { size: "16" }),
-                    React.createElement(NavigationHeaderCta, __assign({}, mainLink, { revealLinkIconOnHover: revealLinkIconOnHover })),
-                    React.createElement(VerticalSpace, { size: "8" }),
-                    React.createElement(Rule, null))),
-                links && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace, { size: "8" }),
-                    React.createElement("ul", { className: "arc-NavigationHeaderCollapsingNavList-list" }, links.map(function (link, i) { return (React.createElement("li", { key: "".concat(id, "-NavigationHeader-megamenu-link-").concat(i) },
-                        React.createElement(NavigationHeaderCta, __assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); })))),
-                React.createElement(VerticalSpace, { size: "24" })))));
+                React.createElement(VerticalSpace, { size: "16" }),
+                React.createElement("ul", { className: "arc-NavigationHeaderCollapsingNavList-list" },
+                    mainLink && (React.createElement("li", null,
+                        React.createElement(NavigationHeaderCta, __assign({}, mainLink, { revealLinkIconOnHover: revealLinkIconOnHover })),
+                        React.createElement("div", { "aria-hidden": true },
+                            React.createElement(VerticalSpace, { size: "16" }),
+                            React.createElement(Rule, null),
+                            Boolean(links === null || links === void 0 ? void 0 : links.length) && React.createElement(VerticalSpace, { size: "16" })))), links === null || links === void 0 ? void 0 :
+                    links.map(function (link, i) { return (React.createElement("li", { key: "".concat(id, "-NavigationHeader-megamenu-link-").concat(i) },
+                        React.createElement(NavigationHeaderCta, __assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); }))),
+            isBottomSpacing && React.createElement(VerticalSpace, null))));
 };
 
 var SideMenuCategoryLinksItem = function (_a) {
@@ -27630,7 +27650,7 @@ var SideMenuCategoryLinksItem = function (_a) {
     return (React.createElement(React.Fragment, null,
         React.createElement(SideMenuLink, { "aria-haspopup": "dialog", "aria-expanded": isDrawerOpen, ref: triggerRef, onClick: onItemClick, text: text }),
         React.createElement(SideMenuSubMenu, { isOpen: isDrawerOpen, heading: panelHeading.heading, supportingText: panelHeading.supportingText, onBackClick: onBackClick, onCloseAutoFocus: onCloseAutoFocus, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel },
-            React.createElement("div", { className: "arc-SideMenuCategoryLinksItem-navItems" }, items.map(function (navItem, navItemIndex) { return (React.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { key: "".concat(id, "-side-menu-category-link-item-").concat(navItemIndex) }))); })))));
+            React.createElement("div", { className: "arc-SideMenuCategoryLinksItem-navItems" }, items.map(function (navItem, navItemIndex) { return (React.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { isBottomSpacing: true, key: "".concat(id, "-side-menu-category-link-item-").concat(navItemIndex) }))); })))));
 };
 
 var NavigationHeaderFeatureCard = function (_a) {
@@ -27656,7 +27676,7 @@ var NavigationHeaderFeatureCard = function (_a) {
 };
 
 var NavigationHeaderPanelLink = function (_a) {
-    var icon = _a.icon, href = _a.href, onClick = _a.onClick, heading = _a.heading, description = _a.description;
+    var icon = _a.icon, href = _a.href, ariaLabel = _a.ariaLabel, onClick = _a.onClick, heading = _a.heading, description = _a.description;
     var surface = React.useContext(Context$3).surface;
     return (React.createElement("div", { className: classNames("arc-NavigationHeaderPanelLink", suffixModifier("arc-NavigationHeaderPanelLink--on", surface)) },
         React.createElement("div", { className: "arc-NavigationHeaderPanelLink-icon" },
@@ -27664,7 +27684,7 @@ var NavigationHeaderPanelLink = function (_a) {
         React.createElement("div", { className: "arc-NavigationHeaderPanelLink-textCol" },
             React.createElement("div", { className: "arc-NavigationHeaderPanelLink-heading" },
                 React.createElement(Heading, { size: "s" },
-                    React.createElement(SemanticLink, { className: "arc-NavigationHeaderPanelLink-link", href: href, onClick: onClick }, heading))),
+                    React.createElement(SemanticLink, { "aria-label": ariaLabel, className: "arc-NavigationHeaderPanelLink-link", href: href, onClick: onClick }, heading))),
             React.createElement(VerticalSpace, { size: "12" }),
             React.createElement("div", { className: "arc-NavigationHeaderPanelLink-description" },
                 React.createElement(Text, { size: "s" }, description))),
@@ -27698,7 +27718,7 @@ var MegaMenuSubMenu = function (_a) {
         React.createElement(SideMenuSubMenu, { isOpen: isDrawerOpen, heading: heading, headingSize: "s", onBackClick: onBackClick, onCloseAutoFocus: onCloseAutoFocus, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel },
             React.createElement(NavigationHeaderPanelLink, __assign({}, item.panelLink, { icon: item.icon })),
             React.createElement(VerticalSpace, { size: "16" }),
-            React.createElement("div", { className: "arc-SideMenuMegaMenuItem-navItems" }, item.items.map(function (navItem, navItemIndex) { return (React.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { key: "".concat(id, "-side-mega-menu-drawer-navItem-").concat(navItemIndex) }))); })))));
+            React.createElement("div", { className: "arc-SideMenuMegaMenuItem-navItems" }, item.items.map(function (navItem, navItemIndex) { return (React.createElement(NavigationHeaderCollapsingNavList, __assign({}, navItem, { isBottomSpacing: true, key: "".concat(id, "-side-mega-menu-drawer-navItem-").concat(navItemIndex) }))); })))));
 };
 var SideMenuMegaMenuItem = function (_a) {
     var featureCards = _a.featureCards, text = _a.text, panelHeading = _a.panelHeading, tabs = _a.tabs, backButtonLabel = _a.backButtonLabel, backButtonAriaLabel = _a.backButtonAriaLabel;
@@ -27842,7 +27862,7 @@ var NavigationHeaderPanelHeading = function (_a) {
     return (React.createElement("div", __assign({ className: "arc-NavigationHeaderPanelHeading" }, filterAttrs(props)),
         React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-grid" },
             React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-text" },
-                React.createElement(Heading, { level: "2", size: "m" }, heading)),
+                React.createElement(Heading, { color: "brand", level: "2", size: "m" }, heading)),
             React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-cta" }, link && (React.createElement(ButtonV2, { buttonStyle: "secondary", ariaLabel: link.ariaLabel, href: link.href, onClick: link.onClick, label: link.text })))),
         React.createElement(VerticalSpace, { size: "4" }),
         React.createElement(Text, { size: "s", tone: "muted" }, supportingText)));
@@ -29733,7 +29753,7 @@ function useFloating(options) {
 var _a = createNavigationHeaderContext("NavigationHeader sub components must be used within NavigationHeader"), NavigationHeaderContext = _a[0], useNavigationHeaderContext = _a[1];
 
 var NavigationHeaderSubnavContent = function (_a) {
-    var children = _a.children, background = _a.background, menuTitle = _a.menuTitle;
+    var children = _a.children, background = _a.background, menuTitle = _a.menuTitle, description = _a.description;
     var navigationHeaderContext = useNavigationHeaderContext();
     var subNavContext = useSubNavContext();
     var dialogRef = React.useRef(null);
@@ -29820,9 +29840,12 @@ var NavigationHeaderSubnavContent = function (_a) {
             React.createElement(Portal$1, { container: themeElement },
                 React.createElement("div", { className: "arc-NavigationHeaderSubnavContent", ref: subNavRefs.setFloating, style: subNavFloatStyles },
                     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, backgroundColor: background },
-                        React.createElement(Content, { className: "arc-NavigationHeaderSubnavContent-dialog", ref: dialogRef, "aria-describedby": undefined, onInteractOutside: onInteractOutside, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
+                        React.createElement(Content, { className: "arc-NavigationHeaderSubnavContent-dialog", ref: dialogRef, onInteractOutside: onInteractOutside, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
                             React.createElement(VisuallyHidden$2, null,
-                                React.createElement(Title, null, menuTitle)),
+                                React.createElement(Title, null,
+                                    menuTitle,
+                                    " submenu"),
+                                React.createElement(Description, null, description)),
                             React.createElement("div", { ref: childContainerRef }, children))),
                     React.createElement(VerticalSpace, null))))));
 };
@@ -29836,15 +29859,14 @@ var NavigationHeaderMegaMenu = function (_a) {
     ]; };
     return (React.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
         React.createElement(NavigationHeaderSubnavTrigger, { ariaLabel: ariaLabel, onClick: onClick }, text),
-        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: "".concat(text, " sub menu}") },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", description: "Use tab and arrow keys to navigate. Press Escape to close.", menuTitle: text },
             React.createElement("div", { className: "arc-NavigationHeaderMegaMenu" },
                 React.createElement("div", { className: "arc-NavigationHeaderMegaMenu-navCol" },
                     React.createElement(NavigationHeaderPanelHeading, __assign({}, panelHeading)),
                     React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { orientation: "vertical", className: "arc-NavigationHeaderMegaMenu-nav", defaultValue: "".concat(tabs[0].triggerText, "-").concat(0) },
                         React.createElement("div", { className: "arc-NavigationHeaderMegaMenu-tabs" },
-                            React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: "arc-NavigationHeaderMegaMenu-tabList" }, tabs.map(function (item, i) { return (React.createElement("div", { key: "".concat(id, "-NavigationHeader-megamenu-trigger-").concat(i), className: "arc-NavigationHeaderMegaMenu-tabWrapper" },
-                                React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: "arc-NavigationHeaderMegaMenu-tab", "aria-label": item.triggerText, value: "".concat(item.triggerText, "-").concat(i), onClick: item.onClick },
-                                    React.createElement(Heading, { level: "3", size: "xs" }, item.triggerText)))); }))),
+                            React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: "arc-NavigationHeaderMegaMenu-tabList" }, tabs.map(function (item, i) { return (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { key: "".concat(id, "-NavigationHeader-megamenu-trigger-").concat(i), className: "arc-NavigationHeaderMegaMenu-tab", "aria-label": item.triggerText, value: "".concat(item.triggerText, "-").concat(i), onClick: item.onClick },
+                                React.createElement(Heading, { level: "3", size: "xs" }, item.triggerText))); }))),
                         React.createElement("div", { className: "arc-NavigationHeaderMegaMenu-mainContent" },
                             React.createElement("div", { className: "arc-NavigationHeaderMegaMenu-linksPanel" }, tabs.map(function (tab, i) { return (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { tabIndex: -1, className: "arc-NavigationHeaderMegaMenu-content", key: "".concat(id, "-NavigationHeader-megamenu-content-").concat(i), value: "".concat(tab.triggerText, "-").concat(i) },
                                 React.createElement(NavigationHeaderPanelLink, __assign({}, tab.panelLink, { icon: tab.icon })),
@@ -29861,7 +29883,7 @@ var NavigationHeaderCategoryLinks = function (_a) {
     var id = React.useId();
     return (React.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
         React.createElement(NavigationHeaderSubnavTrigger, { ariaLabel: ariaLabel, onClick: onClick }, text),
-        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: "".concat(text, " sub menu}") },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: text, description: "Use tab keys to navigate. Press Escape to close." },
             React.createElement("div", { className: "arc-NavigationHeaderCategoryLinks" },
                 React.createElement(NavigationHeaderPanelHeading, __assign({}, panelHeading)),
                 React.createElement("div", { className: "arc-NavigationHeaderCategoryLinks-container" }, items.map(function (item, i) { return (React.createElement("div", { key: "".concat(id, "-NavigationHeader-category-link-item-").concat(i) },
@@ -30778,16 +30800,11 @@ var NavigationHeaderAction = function (_a) {
 var NavigationHeaderSearchMenu = function (_a) {
     var onSubmit = _a.onSubmit, quickLinks = _a.quickLinks, onInputChange = _a.onInputChange, _b = _a.submitButtonAriaLabel, submitButtonAriaLabel = _b === void 0 ? "Submit search" : _b, _c = _a.panelTitle, panelTitle = _c === void 0 ? "Quick links" : _c, _d = _a.description, description = _d === void 0 ? "Discover our products and how we can help your business grow" : _d, _e = _a.accessibleMenuTitle, accessibleMenuTitle = _e === void 0 ? "Search menu" : _e, _f = _a.label, label = _f === void 0 ? "Search" : _f, _g = _a.triggerTooltip, triggerTooltip = _g === void 0 ? "Search" : _g, _h = _a.triggerAriaLabel, triggerAriaLabel = _h === void 0 ? "Open search menu" : _h;
     var id = React.useId();
-    var listBoxId = React.useId();
-    var inputId = React.useId();
-    var _j = React.useState(undefined), highlightedOptionIndex = _j[0], setHighlightedOptionIndex = _j[1];
-    var _k = React.useState(""), searchTerm = _k[0], setSearchTerm = _k[1];
+    var _j = React.useState(""), searchTerm = _j[0], setSearchTerm = _j[1];
     var inputRef = React.useRef(null);
-    var hasHighlightedOption = typeof highlightedOptionIndex === "number";
     var onChange = function (e) {
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e.target.value);
         setSearchTerm(e.target.value);
-        setHighlightedOptionIndex(undefined);
     };
     var onFormSubmit = function (e) {
         e.preventDefault();
@@ -30796,71 +30813,33 @@ var NavigationHeaderSearchMenu = function (_a) {
     var onOpenChange = function (isOpen) {
         if (!isOpen) {
             setSearchTerm("");
-            setHighlightedOptionIndex(undefined);
-        }
-    };
-    var onInputKeyDown = function (e) {
-        var key = e.key;
-        if (key === KeyNames.Enter || key === KeyNames.Space) {
-            !searchTerm && e.preventDefault();
-        }
-        if (key === KeyNames.ArrowDown) {
-            e.preventDefault();
-            var newIndex = !hasHighlightedOption ||
-                highlightedOptionIndex === quickLinks.length - 1
-                ? 0
-                : highlightedOptionIndex + 1;
-            setHighlightedOptionIndex(newIndex);
-            setSearchTerm(quickLinks[newIndex].text);
-        }
-        if (key === KeyNames.ArrowUp) {
-            e.preventDefault();
-            var newIndex = (!hasHighlightedOption || highlightedOptionIndex === 0
-                ? quickLinks.length
-                : highlightedOptionIndex) - 1;
-            setHighlightedOptionIndex(newIndex);
-            setSearchTerm(quickLinks[newIndex].text);
         }
     };
     return (React.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
         React.createElement(NavigationHeaderSubnavTrigger, { asChild: true },
             React.createElement(NavigationHeaderAction, { title: triggerTooltip, ariaLabel: triggerAriaLabel, icon: React.createElement(ThemeIcon, { icon: "navigationHeaderSearch", size: 24 }) })),
-        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: accessibleMenuTitle },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", menuTitle: accessibleMenuTitle, description: "Use tab keys to navigate. Press Escape to close." },
             React.createElement("div", { className: "arc-NavigationHeaderSearchMenu" },
                 React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-labelContainer" },
-                    React.createElement("label", { htmlFor: inputId },
-                        React.createElement(Heading, { size: "m" }, label)),
+                    React.createElement("label", { htmlFor: id },
+                        React.createElement(Heading, { color: "brand", size: "m" }, label)),
                     React.createElement(Text, null, description)),
                 React.createElement("form", { onSubmit: onFormSubmit, className: "arc-NavigationHeaderSearchMenu-form" },
-                    React.createElement("input", { id: inputId, role: "combobox", autoComplete: "off", "aria-autocomplete": "none", "aria-controls": listBoxId, "aria-activedescendant": hasHighlightedOption
-                            ? "".concat(listBoxId, "-").concat(highlightedOptionIndex)
-                            : undefined, ref: inputRef, value: searchTerm, onChange: onChange, onKeyDown: onInputKeyDown, className: "arc-NavigationHeaderSearchMenu-input", type: "text" }),
+                    React.createElement("input", { id: id, role: "searchbox", autoComplete: "off", "aria-autocomplete": "none", ref: inputRef, value: searchTerm, onChange: onChange, className: "arc-NavigationHeaderSearchMenu-input", type: "text" }),
                     React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-actions" },
                         React.createElement(SemanticButton, { "aria-label": submitButtonAriaLabel, className: "arc-NavigationHeaderSearchMenu-submitButton", type: "submit" },
                             React.createElement(ThemeIcon, { icon: "navigationHeaderSearch" })))),
                 React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-results" },
                     React.createElement(Heading, { level: "3", size: "xxxs" }, panelTitle),
-                    React.createElement("ul", { id: listBoxId, role: "listbox", onMouseLeave: function () { return setHighlightedOptionIndex(undefined); }, className: "arc-NavigationHeaderSearchMenu-resultsList" }, quickLinks === null || quickLinks === void 0 ? void 0 : quickLinks.map(function (_a, i) {
+                    React.createElement("ul", { className: "arc-NavigationHeaderSearchMenu-resultsList" }, quickLinks.map(function (_a, i) {
                         var text = _a.text, href = _a.href, onClick = _a.onClick;
-                        return (React.createElement("li", { className: classNames("arc-NavigationHeaderSearchMenu-listItem", {
-                                "arc-NavigationHeaderSearchMenu-listItem--highlighted": highlightedOptionIndex === i,
-                            }), role: "option", "aria-label": text, onMouseMove: function () { return setHighlightedOptionIndex(i); }, "aria-selected": highlightedOptionIndex === i, id: "".concat(listBoxId, "-").concat(i), key: "".concat(id, "-search-link-").concat(text, "-").concat(i) },
+                        return (React.createElement("li", { key: "".concat(id, "-search-link-").concat(text, "-").concat(i), className: "arc-NavigationHeaderSearchMenu-listItem" },
                             React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-linkContainer" },
-                                React.createElement(Heading, { size: "xxs" },
-                                    React.createElement(SemanticLink, { className: "arc-NavigationHeaderSearchMenu-link", href: href, onClick: onClick, tabIndex: -1 }, text))),
+                                React.createElement(NavigationHeaderCta, { revealLinkIconOnHover: true, href: href, onClick: onClick, text: text })),
                             React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-iconContainer" },
                                 React.createElement(ArrowRightIcon, null))));
                     })))))));
 };
-var KeyNames;
-(function (KeyNames) {
-    KeyNames["ArrowUp"] = "ArrowUp";
-    KeyNames["ArrowDown"] = "ArrowDown";
-    KeyNames["Home"] = "Home";
-    KeyNames["Enter"] = "Enter";
-    KeyNames["Escape"] = "Escape";
-    KeyNames["Space"] = " ";
-})(KeyNames || (KeyNames = {}));
 
 var NavigationHeaderBasket = function (_a) {
     var supportingCopy = _a.supportingCopy, onClick = _a.onClick, href = _a.href, _b = _a.popoverText, popoverText = _b === void 0 ? "No items in basket" : _b, _c = _a.title, title = _c === void 0 ? "Basket" : _c, _d = _a.ariaLabel, ariaLabel = _d === void 0 ? "Basket, empty" : _d, _e = _a.isAttention, isAttention = _e === void 0 ? false : _e;
@@ -31131,6 +31110,7 @@ exports.MenuLabel = MenuLabel;
 exports.MenuPortal = MenuPortal;
 exports.MenuScrollable = MenuScrollable;
 exports.MenuSeparator = MenuSeparator;
+exports.MenuSkeletonItem = MenuSkeletonItem;
 exports.MenuTrigger = MenuTrigger;
 exports.Modal = Modal;
 exports.NavigationHeader = NavigationHeader;