@arc-ui/components 13.2.0 → 13.4.0

package/lib/MediaCard/MediaCard.cjs

@@ -57,8 +57,11 @@ var MediaCard = function (_a) {
             return "arc-MediaCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
         })
         : [];
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight,
+    };
     return (React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React.createElement("div", { className: "arc-MediaCard--preserveAspectRatioWrapper" }, children)); } },
-        React.createElement("div", tslib_es6.__assign({ style: { minHeight: minHeight }, className: index.classNames.apply(void 0, tslib_es6.__spreadArray(tslib_es6.__spreadArray(["arc-MediaCard"], aspectRatioClassNames, false), [{
+        React.createElement("div", tslib_es6.__assign({ style: tslib_es6.__assign({}, minHeightStyle), className: index.classNames.apply(void 0, tslib_es6.__spreadArray(tslib_es6.__spreadArray(["arc-MediaCard"], aspectRatioClassNames, false), [{
                     "arc-MediaCard--outlined": url && isContained && showHoverState,
                     "arc-MediaCard--contained": isContained,
                     "arc-MediaCard--onDarkSurface": surface === "dark",

package/lib/MediaCard/MediaCard.mjs

@@ -55,8 +55,11 @@ var MediaCard = function (_a) {
             return "arc-MediaCard--preserveAspectRatio-".concat(breakpoint, "-").concat(ratio);
         })
         : [];
+    var minHeightStyle = !preserveAspectRatios && {
+        minHeight: minHeight,
+    };
     return (React__default.createElement(ConditionalWrapper, { condition: Boolean(preserveAspectRatios), wrapper: function (children) { return (React__default.createElement("div", { className: "arc-MediaCard--preserveAspectRatioWrapper" }, children)); } },
-        React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames.apply(void 0, __spreadArray(__spreadArray(["arc-MediaCard"], aspectRatioClassNames, false), [{
+        React__default.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",

package/lib/MediaCard/styles.css

@@ -1 +1 @@
-.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatioWrapper{container-type:inline-size;--arc-mediacard-aspect-ratio-3-4:calc(100cqw * 4 / 3);--arc-mediacard-aspect-ratio-10-16:calc(100cqw * 16 / 10)}.arc-v13-2-0 .arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc-v13-2-0 .arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc-v13-2-0 .arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc-v13-2-0 .arc .arc-MediaCard[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--onDarkSurface[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--onDarkSurface:has(:focus-visible){outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v13-2-0 .arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--card-padding-s) var(--card-padding-xs) 0 var(--card-padding-xs)}.arc-v13-2-0 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v13-2-0 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v13-2-0 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v13-2-0 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v13-2-0 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v13-2-0 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xs-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xs-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}@media (min-width:636px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-s-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-s-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-m-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-m-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1024px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-l-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-l-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1440px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xxl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xxl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1920px){.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xxxl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-2-0 .arc .arc-MediaCard--preserveAspectRatio-xxxl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}
+.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatioWrapper{container-type:inline-size;--arc-mediacard-aspect-ratio-3-4:calc(100cqw * 4 / 3);--arc-mediacard-aspect-ratio-10-16:calc(100cqw * 16 / 10)}.arc-v13-4-0 .arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc-v13-4-0 .arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc-v13-4-0 .arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc-v13-4-0 .arc .arc-MediaCard[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--onDarkSurface[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--onDarkSurface:has(:focus-visible){outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[\:has\(\:focus-visible\)]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:has(:focus-visible){outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v13-4-0 .arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--card-padding-s) var(--card-padding-xs) 0 var(--card-padding-xs)}.arc-v13-4-0 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v13-4-0 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v13-4-0 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v13-4-0 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v13-4-0 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v13-4-0 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}.arc-v13-4-0 .arc .arc-MediaCard-label{color:var(--card-colors-light-text-support)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xs-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xs-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}@media (min-width:636px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-s-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-s-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:768px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-m-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-m-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1024px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-l-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-l-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1280px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1440px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xxl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xxl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}@media (min-width:1920px){.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xxxl-3-4{min-height:var(--arc-mediacard-aspect-ratio-3-4)}.arc-v13-4-0 .arc .arc-MediaCard--preserveAspectRatio-xxxl-10-16{min-height:var(--arc-mediacard-aspect-ratio-10-16)}}

package/lib/Menu/Menu.cjs

@@ -12,17 +12,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var filterAttrs = require('../_shared/cjs/filter-attrs-D19P2s1V.cjs');
 var Icon = require('../_shared/cjs/Icon-Dk2XHa7V.cjs');
 var Text = require('../_shared/cjs/Text-jwsn80lQ.cjs');
-var CheckboxIcon = require('../_shared/cjs/CheckboxIcon-BzY1S_ud.cjs');
+var CheckboxIcon = require('../_shared/cjs/CheckboxIcon-LesSiNub.cjs');
 var index$4 = require('../_shared/cjs/index-CTlXMLug.cjs');
 var Rule = require('../_shared/cjs/Rule-essaguo_.cjs');
 var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-eGxk3ae6.cjs');
 var Surface = require('../_shared/cjs/Surface-DIU5ciDT.cjs');
+var Skeleton = require('../_shared/cjs/Skeleton-C1R-zgcO.cjs');
 require('react-dom');
 require('../_shared/cjs/index-BdJeAKfz.cjs');
 require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/ThemeIcon-CwYN77IF.cjs');
-require('../_shared/cjs/FormControl-TtboqHRx.cjs');
+require('../_shared/cjs/FormControl-BtFbIuB3.cjs');
 require('../_shared/cjs/DisclosureMini-Cy7hNc90.cjs');
 require('../_shared/cjs/VisuallyHidden-CQg3cOVK.cjs');
 
@@ -1669,6 +1670,19 @@ var MenuTrigger = function (_a) {
         }), asChild: asChild }, filterAttrs.filterAttrs(props)), children));
 };
 
+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.Skeleton, { isCircle: true, width: 24, height: 24 }))),
+        React.createElement("div", { className: "arc-MenuSkeletonItem-textWrapper" },
+            React.createElement(Skeleton.Skeleton, { height: 24 }),
+            hasSupportingText && (React.createElement("div", { className: "arc-MenuSkeletonItem-supportingText" },
+                React.createElement(Skeleton.Skeleton, { height: 16 })))),
+        hasTrailingIcon && (React.createElement("div", { className: "arc-MenuSkeletonItem-trailingIcon" },
+            React.createElement(Skeleton.Skeleton, { isCircle: true, width: 24, height: 24 })))));
+};
+
 exports.Menu = Menu;
 exports.MenuContent = MenuContent;
 exports.MenuFooter = MenuFooter;
@@ -1686,4 +1700,5 @@ exports.MenuLabel = MenuLabel;
 exports.MenuPortal = MenuPortal;
 exports.MenuScrollable = MenuScrollable;
 exports.MenuSeparator = MenuSeparator;
+exports.MenuSkeletonItem = MenuSkeletonItem;
 exports.MenuTrigger = MenuTrigger;

package/lib/Menu/Menu.mjs

@@ -11,17 +11,18 @@ import { jsx } from 'react/jsx-runtime';
 import { f as filterAttrs } from '../_shared/esm/filter-attrs-v_SweZXP.mjs';
 import { I as Icon } from '../_shared/esm/Icon-CCUbr_AO.mjs';
 import { T as Text } from '../_shared/esm/Text-BAzOkkzN.mjs';
-import { C as CheckboxIcon } from '../_shared/esm/CheckboxIcon-CzRn1j8X.mjs';
+import { C as CheckboxIcon } from '../_shared/esm/CheckboxIcon-DLXZVpoo.mjs';
 import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
 import { R as Rule } from '../_shared/esm/Rule-Bz3QPezk.mjs';
 import { B as BtIconChevronRightMid } from '../_shared/esm/BtIconChevronRightMid-DE4lmVaG.mjs';
 import { C as Context } from '../_shared/esm/Surface-C69KVzkY.mjs';
+import { S as Skeleton } from '../_shared/esm/Skeleton-BuuY1t5b.mjs';
 import 'react-dom';
 import '../_shared/esm/index-Cgsjp3NL.mjs';
 import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
 import '../_shared/esm/index-Spae4j7j.mjs';
 import '../_shared/esm/ThemeIcon-B0n6cKRb.mjs';
-import '../_shared/esm/FormControl-DopDD_nC.mjs';
+import '../_shared/esm/FormControl-BCZe7nrI.mjs';
 import '../_shared/esm/DisclosureMini-DeQZyvDN.mjs';
 import '../_shared/esm/VisuallyHidden-aSQ4RA1o.mjs';
 
@@ -1649,4 +1650,17 @@ var MenuTrigger = function (_a) {
         }), asChild: asChild }, filterAttrs(props)), children));
 };
 
-export { Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuTrigger };
+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__default.createElement("div", { className: "arc-MenuSkeletonItem" },
+        hasLeadingIcon && (React__default.createElement("div", { className: "arc-MenuSkeletonItem-leadingIcon" },
+            React__default.createElement(Skeleton, { isCircle: true, width: 24, height: 24 }))),
+        React__default.createElement("div", { className: "arc-MenuSkeletonItem-textWrapper" },
+            React__default.createElement(Skeleton, { height: 24 }),
+            hasSupportingText && (React__default.createElement("div", { className: "arc-MenuSkeletonItem-supportingText" },
+                React__default.createElement(Skeleton, { height: 16 })))),
+        hasTrailingIcon && (React__default.createElement("div", { className: "arc-MenuSkeletonItem-trailingIcon" },
+            React__default.createElement(Skeleton, { isCircle: true, width: 24, height: 24 })))));
+};
+
+export { Menu, MenuContent, MenuFooter, MenuGroup, MenuGroupSingleSelect, MenuHeader, MenuItem, MenuItemCheckbox, MenuItemContentTemplate, MenuItemMultiLevel, MenuItemMultiLevelContent, MenuItemMultiLevelTrigger, MenuItemSingleSelect, MenuLabel, MenuPortal, MenuScrollable, MenuSeparator, MenuSkeletonItem, MenuTrigger };

package/lib/Menu/styles.css

@@ -1 +1 @@
-.arc-v13-2-0 .arc .arc-MenuContent{background:#ffffff;border-radius:12px;box-shadow:0 0 1px 0 rgba(0,0,0,0.2),0 4px 12px 0 rgba(0,0,0,0.1);display:flex;flex-direction:column;padding:12px;width:-moz-fit-content;width:fit-content;z-index:3}.arc-v13-2-0 .arc .arc-MenuContent--mobile{margin-right:24px}.arc-v13-2-0 .arc .arc-MenuContent--isFluid{width:var(--radix-dropdown-menu-content-available-width)}.arc-v13-2-0 .arc .arc-MenuContent[data-side="bottom"]{animation:grow-down 0.2s ease-out forwards;transform-origin:top center}.arc-v13-2-0 .arc .arc-MenuContent[data-side="top"]{animation:grow-up 0.2s ease-out forwards;transform-origin:bottom center}.arc-v13-2-0 .arc .arc-MenuContent[data-side="left"]{animation:grow-left 0.2s ease-out forwards;transform-origin:center right}.arc-v13-2-0 .arc .arc-MenuContent[data-side="right"]{animation:grow-right 0.2s ease-out forwards;transform-origin:center left}@keyframes grow-down{from{transform:scaleY(0.8)}to{transform:scaleY(1)}}@keyframes grow-up{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:scaleY(1)}}@keyframes grow-left{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}@keyframes grow-right{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}.arc-v13-2-0 .arc .arc-MenuContent-fade{animation:fade-in 300ms ease forwards;opacity:0}@keyframes fade-in{from{opacity:0}to{opacity:1}}.arc-v13-2-0 .arc .arc-MenuItem{border-radius:var(--menu-card-border-radius-s);display:flex;flex-direction:row;gap:var(--menu-card-gap-m);outline:none;padding:var(--menu-card-padding-m);position:relative}.arc-v13-2-0 .arc .arc-MenuItem--link,.arc-v13-2-0 .arc .arc-MenuItem--link[data-highlighted]{color:var(--menu-card-text-primary);text-decoration:none}.arc-v13-2-0 .arc .arc-MenuItem[data-highlighted]{background-color:var(--menu-card-bg-hover);border-radius:var(--menu-card-border-radius-s);border-bottom-left-radius:4px;border-top-left-radius:4px;cursor:pointer;z-index:4}.arc-v13-2-0 .arc .arc-MenuItem[data-highlighted]::before{background-color:var(--menu-card-foreground-hover);border-bottom-left-radius:var(--menu-card-border-radius-s);border-top-left-radius:var(--menu-card-border-radius-s);content:"";height:100%;left:0;position:absolute;top:0;transition:background-color 0.3s ease;width:3px}.arc-v13-2-0 .arc .arc-MenuItem[data-disabled]{color:var(--menu-card-text-disabled);cursor:not-allowed}.arc-v13-2-0 .arc .arc-MenuItem-content{display:flex;gap:var(--menu-card-gap-m)}.arc-v13-2-0 .arc .arc-MenuItem-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--menu-card-gap-m);margin-left:auto;text-wrap:nowrap}.arc-v13-2-0 .arc .arc-MenuItem[data-state="checked"],.arc-v13-2-0 .arc .arc-MenuItem[aria-expanded="true"]{background:var(--menu-card-bg-active)}.arc-v13-2-0 .arc .arc-MenuItem-text{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--menu-card-gap-xs);text-wrap:wrap}.arc-v13-2-0 .arc .arc-MenuSeparator{margin-left:-12px;margin-right:-12px;padding:var(--menu-card-padding-m) 0}.arc-v13-2-0 .arc .arc-MenuLabel{overflow:auto;padding:12px;text-overflow:ellipsis;text-wrap:nowrap;color:#2a2a2a;font-size:14px;font-style:normal;font-weight:500;letter-spacing:1.4px;line-height:112%;text-transform:uppercase}.arc-v13-2-0 .arc .arc-MenuLabel:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v13-2-0 .arc .arc-MenuLabel:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MenuLabel.arc-MenuLabel--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MenuTrigger{background:transparent;border:none;padding:0}.arc-v13-2-0 .arc .arc-MenuTrigger:focus{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v13-2-0 .arc .arc-MenuTrigger:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-2-0 .arc .arc-MenuTrigger.arc-MenuTrigger--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-2-0 .arc .arc-MenuItemCheckbox{align-items:center}.arc-v13-2-0 .arc .arc-MenuItemCheckbox[data-state="checked"]{background-color:#ffffff}.arc-v13-2-0 .arc .arc-MenuItemCheckbox[data-state="checked"]:hover,.arc-v13-2-0 .arc .arc-MenuItemCheckbox[data-state="checked"][data-highlighted]{background-color:var(--menu-card-bg-hover)}.arc-v13-2-0 .arc .arc-MenuItemSingleSelect[data-state="unchecked"] .arc-MenuItem-actions{visibility:hidden}.arc-v13-2-0 .arc .arc-MenuGroupSingleSelect{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v13-2-0 .arc .arc-MenuScrollable{margin-left:-12px;margin-right:-12px;overflow-x:hidden;overflow-y:scroll;padding:4px 12px;scrollbar-width:thin}.arc-v13-2-0 .arc .arc-MenuGroup{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v13-2-0 .arc div[data-radix-popper-content-wrapper][\:has\(.arc-MenuContent\)]{min-width:auto !important}.arc-v13-2-0 .arc div[data-radix-popper-content-wrapper]:has(.arc-MenuContent){min-width:auto !important}
+.arc-v13-4-0 .arc .arc-MenuContent{background:#ffffff;border-radius:12px;box-shadow:0 0 1px 0 rgba(0,0,0,0.2),0 4px 12px 0 rgba(0,0,0,0.1);display:flex;flex-direction:column;padding:12px;width:-moz-fit-content;width:fit-content;z-index:3}.arc-v13-4-0 .arc .arc-MenuContent--mobile{margin-right:24px}.arc-v13-4-0 .arc .arc-MenuContent--isFluid{width:var(--radix-dropdown-menu-content-available-width)}.arc-v13-4-0 .arc .arc-MenuContent[data-side="bottom"]{animation:grow-down 0.2s ease-out forwards;transform-origin:top center}.arc-v13-4-0 .arc .arc-MenuContent[data-side="top"]{animation:grow-up 0.2s ease-out forwards;transform-origin:bottom center}.arc-v13-4-0 .arc .arc-MenuContent[data-side="left"]{animation:grow-left 0.2s ease-out forwards;transform-origin:center right}.arc-v13-4-0 .arc .arc-MenuContent[data-side="right"]{animation:grow-right 0.2s ease-out forwards;transform-origin:center left}@keyframes grow-down{from{transform:scaleY(0.8)}to{transform:scaleY(1)}}@keyframes grow-up{from{opacity:0;transform:scaleY(0.8)}to{opacity:1;transform:scaleY(1)}}@keyframes grow-left{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}@keyframes grow-right{from{opacity:0;transform:scaleX(0.8)}to{opacity:1;transform:scaleX(1)}}.arc-v13-4-0 .arc .arc-MenuContent-fade{animation:fade-in 300ms ease forwards;opacity:0}@keyframes fade-in{from{opacity:0}to{opacity:1}}.arc-v13-4-0 .arc .arc-MenuItem{border-radius:var(--menu-card-border-radius-s);display:flex;flex-direction:row;gap:var(--menu-card-gap-m);outline:none;padding:var(--menu-card-padding-m);position:relative}.arc-v13-4-0 .arc .arc-MenuItem--link,.arc-v13-4-0 .arc .arc-MenuItem--link[data-highlighted]{color:var(--menu-card-text-primary);text-decoration:none}.arc-v13-4-0 .arc .arc-MenuItem[data-highlighted]{background-color:var(--menu-card-bg-hover);border-radius:var(--menu-card-border-radius-s);border-bottom-left-radius:4px;border-top-left-radius:4px;cursor:pointer;z-index:4}.arc-v13-4-0 .arc .arc-MenuItem[data-highlighted]::before{background-color:var(--menu-card-foreground-hover);border-bottom-left-radius:var(--menu-card-border-radius-s);border-top-left-radius:var(--menu-card-border-radius-s);content:"";height:100%;left:0;position:absolute;top:0;transition:background-color 0.3s ease;width:3px}.arc-v13-4-0 .arc .arc-MenuItem[data-disabled]{color:var(--menu-card-text-disabled);cursor:not-allowed}.arc-v13-4-0 .arc .arc-MenuItem-content{display:flex;gap:var(--menu-card-gap-m)}.arc-v13-4-0 .arc .arc-MenuItem-actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--menu-card-gap-m);margin-left:auto;text-wrap:nowrap}.arc-v13-4-0 .arc .arc-MenuItem[data-state="checked"],.arc-v13-4-0 .arc .arc-MenuItem[aria-expanded="true"]{background:var(--menu-card-bg-active)}.arc-v13-4-0 .arc .arc-MenuItem-text{display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--menu-card-gap-xs);text-wrap:wrap}.arc-v13-4-0 .arc .arc-MenuSeparator{margin-left:-12px;margin-right:-12px;padding:var(--menu-card-padding-m) 0}.arc-v13-4-0 .arc .arc-MenuLabel{overflow:auto;padding:12px;text-overflow:ellipsis;text-wrap:nowrap;color:#2a2a2a;font-size:14px;font-style:normal;font-weight:500;letter-spacing:1.4px;line-height:112%;text-transform:uppercase}.arc-v13-4-0 .arc .arc-MenuLabel:focus{outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v13-4-0 .arc .arc-MenuLabel:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MenuLabel.arc-MenuLabel--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MenuTrigger{background:transparent;border:none;padding:0}.arc-v13-4-0 .arc .arc-MenuTrigger:focus{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px}.arc-v13-4-0 .arc .arc-MenuTrigger:focus-visible{outline-color:var(--focus-colors-light-border-subtle)}.arc-v13-4-0 .arc .arc-MenuTrigger.arc-MenuTrigger--onDarkSurface:focus-visible{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v13-4-0 .arc .arc-MenuItemCheckbox{align-items:center}.arc-v13-4-0 .arc .arc-MenuItemCheckbox[data-state="checked"]{background-color:#ffffff}.arc-v13-4-0 .arc .arc-MenuItemCheckbox[data-state="checked"]:hover,.arc-v13-4-0 .arc .arc-MenuItemCheckbox[data-state="checked"][data-highlighted]{background-color:var(--menu-card-bg-hover)}.arc-v13-4-0 .arc .arc-MenuItemSingleSelect[data-state="unchecked"] .arc-MenuItem-actions{visibility:hidden}.arc-v13-4-0 .arc .arc-MenuGroupSingleSelect{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v13-4-0 .arc .arc-MenuScrollable{margin-left:-12px;margin-right:-12px;overflow-x:hidden;overflow-y:scroll;padding:4px 12px;scrollbar-width:thin}.arc-v13-4-0 .arc .arc-MenuGroup{display:flex;flex-direction:column;gap:var(--menu-card-gap-xs)}.arc-v13-4-0 .arc .arc-MenuSkeletonItem{display:flex;flex-direction:row;padding:12px}.arc-v13-4-0 .arc .arc-MenuSkeletonItem-leadingIcon{flex-shrink:0;margin-right:12px}.arc-v13-4-0 .arc .arc-MenuSkeletonItem-textWrapper{width:100%}.arc-v13-4-0 .arc .arc-MenuSkeletonItem-supportingText{margin-top:4px}.arc-v13-4-0 .arc .arc-MenuSkeletonItem-trailingIcon{flex-shrink:0;margin-left:12px}.arc-v13-4-0 .arc div[data-radix-popper-content-wrapper][\:has\(.arc-MenuContent\)]{min-width:auto !important}.arc-v13-4-0 .arc div[data-radix-popper-content-wrapper]:has(.arc-MenuContent){min-width:auto !important}

package/lib/Modal/styles.css

@@ -1 +1 @@
-.arc-v13-2-0 .arc .arc-Modal{color:auto}.arc-v13-2-0 .arc .arc-Modal-overlay{align-items:center;background-color:var(--overlay-colors-overlay-default);display:flex;height:100%;justify-content:center;left:0;overflow-x:hidden;overflow-y:auto;padding:16px;position:fixed;top:0;width:100%;z-index:100}.arc-v13-2-0 .arc .arc-Modal-dialog{background-color:var(--modal-colors-light-bg-default);border-radius:var(--modal-border-radius-s);display:flex;flex-direction:column;margin:auto;position:relative;width:100%}.arc-v13-2-0 .arc .arc-Modal-section{padding:0 var(--modal-padding-m)}.arc-v13-2-0 .arc .arc-Modal-dialog--fullBleed .arc-Modal-custom-section{padding:0}.arc-v13-2-0 .arc .arc-Modal-dialog--maxHeightWindow{height:100%}.arc-v13-2-0 .arc .arc-Modal-iconContainer{background:var(--modal-colors-light-bg-default);border-radius:16px;height:32px;position:absolute;right:8px;top:8px}.arc-v13-2-0 .arc .arc-Modal-closeButton{background-color:transparent;border:none;cursor:pointer;margin:0;padding:0}.arc-v13-2-0 .arc .arc-Modal-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v13-2-0 .arc .arc-Modal-dialog--maxHeightWindow .arc-Modal-content{margin:-4px 0;overflow-y:auto;padding:4px 0}.arc-v13-2-0 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-top:var(--modal-gap-s)}.arc-v13-2-0 .arc .arc-Modal-dialog--s{max-width:var(--modal-size-m)}.arc-v13-2-0 .arc .arc-Modal-dialog--m,.arc-v13-2-0 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-l)}@media (min-width:636px){.arc-v13-2-0 .arc .arc-Modal-overlay{padding:80px 24px}.arc-v13-2-0 .arc .arc-Modal-actions{display:flex}.arc-v13-2-0 .arc .arc-Modal-actionButton{flex:1 1 auto}.arc-v13-2-0 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-left:var(--modal-gap-s);margin-top:0}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v13-2-0 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (min-width:1024px){.arc-v13-2-0 .arc .arc-Modal-overlay{padding-left:32px;padding-right:32px}.arc-v13-2-0 .arc .arc-Modal-dialog--m{max-width:var(--modal-size-xl)}.arc-v13-2-0 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-xxl)}.arc-v13-2-0 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v13-2-0 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (prefers-reduced-motion:no-preference){.arc-v13-2-0 .arc .arc-Modal-overlay{animation:overlay-show 100ms cubic-bezier(0.44,0,0.55,0.94)}.arc-v13-2-0 .arc .arc-Modal-dialog{animation:content-show 100ms cubic-bezier(0.44,0,0.55,0.94)}@keyframes content-show{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}@keyframes overlay-show{from{opacity:0}to{opacity:1}}}.arc-v13-2-0 .arc .arc-Modal-actionButton--compact{display:flex}@media (min-width:636px){.arc-v13-2-0 .arc .arc-Modal-actionButton--compact button{width:auto}}@media (min-width:768px){.arc-v13-2-0 .arc .arc-Modal-actionButton--compact{flex-grow:1}}:root{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--arc-columns-gap:var(--columns-gutter-xs);--arc-columns-count:12;--modal-max-width:100%;--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)));--arc-columns-span-4-width:calc((var(--arc-column-width) * 4) - var(--arc-columns-gap));--arc-columns-span-6-width:calc((var(--arc-column-width) * 6) - var(--arc-columns-gap));--arc-columns-span-8-width:calc((var(--arc-column-width) * 8) - var(--arc-columns-gap));--arc-columns-span-10-width:calc((var(--arc-column-width) * 10) - var(--arc-columns-gap));--arc-columns-span-12-width:calc((var(--arc-column-width) * 12) - var(--arc-columns-gap))}@media (min-width:320px){.arc-v13-2-0 :root{--arc-columns-gap:var(--columns-gutter-s);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:636px){:root{--arc-columns-gap:var(--columns-gutter-m);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:1280px){.arc-v13-2-0 .arc .arc-Modal-overlay{padding-left:32px;padding-right:32px}:root{--modal-max-width:calc(var(--arc-size-breakpoints-xl) - calc(2 * var(--arc-size-section-margin-32)));--arc-columns-gap:var(--columns-gutter-xl);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:320px){.arc-v13-2-0 .arc-Modal-dialog--xs-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-2-0 .arc-Modal-dialog--xs-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-2-0 .arc-Modal-dialog--xs-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-2-0 .arc-Modal-dialog--xs-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-2-0 .arc-Modal-dialog--xs-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:636px){.arc-v13-2-0 .arc-Modal-dialog--s-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-2-0 .arc-Modal-dialog--s-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-2-0 .arc-Modal-dialog--s-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-2-0 .arc-Modal-dialog--s-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-2-0 .arc-Modal-dialog--s-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:768px){.arc-v13-2-0 .arc-Modal-dialog--m-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-2-0 .arc-Modal-dialog--m-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-2-0 .arc-Modal-dialog--m-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-2-0 .arc-Modal-dialog--m-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-2-0 .arc-Modal-dialog--m-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:1024px){.arc-v13-2-0 .arc-Modal-dialog--l-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-2-0 .arc-Modal-dialog--l-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-2-0 .arc-Modal-dialog--l-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-2-0 .arc-Modal-dialog--l-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-2-0 .arc-Modal-dialog--l-span-12{max-width:var(--arc-columns-span-12-width)}}
+.arc-v13-4-0 .arc .arc-Modal{color:auto}.arc-v13-4-0 .arc .arc-Modal-overlay{align-items:center;background-color:var(--overlay-colors-overlay-default);display:flex;height:100%;justify-content:center;left:0;overflow-x:hidden;overflow-y:auto;padding:16px;position:fixed;top:0;width:100%;z-index:100}.arc-v13-4-0 .arc .arc-Modal-dialog{background-color:var(--modal-colors-light-bg-default);border-radius:var(--modal-border-radius-s);display:flex;flex-direction:column;margin:auto;position:relative;width:100%}.arc-v13-4-0 .arc .arc-Modal-section{padding:0 var(--modal-padding-m)}.arc-v13-4-0 .arc .arc-Modal-dialog--fullBleed .arc-Modal-custom-section{padding:0}.arc-v13-4-0 .arc .arc-Modal-dialog--maxHeightWindow{height:100%}.arc-v13-4-0 .arc .arc-Modal-iconContainer{background:var(--modal-colors-light-bg-default);border-radius:16px;height:32px;position:absolute;right:8px;top:8px}.arc-v13-4-0 .arc .arc-Modal-closeButton{background-color:transparent;border:none;cursor:pointer;margin:0;padding:0}.arc-v13-4-0 .arc .arc-Modal-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v13-4-0 .arc .arc-Modal-dialog--maxHeightWindow .arc-Modal-content{margin:-4px 0;overflow-y:auto;padding:4px 0}.arc-v13-4-0 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-top:var(--modal-gap-s)}.arc-v13-4-0 .arc .arc-Modal-dialog--s{max-width:var(--modal-size-m)}.arc-v13-4-0 .arc .arc-Modal-dialog--m,.arc-v13-4-0 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-l)}@media (min-width:636px){.arc-v13-4-0 .arc .arc-Modal-overlay{padding:80px 24px}.arc-v13-4-0 .arc .arc-Modal-actions{display:flex}.arc-v13-4-0 .arc .arc-Modal-actionButton{flex:1 1 auto}.arc-v13-4-0 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-left:var(--modal-gap-s);margin-top:0}}@media (min-width:768px){.arc-v13-4-0 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v13-4-0 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (min-width:1024px){.arc-v13-4-0 .arc .arc-Modal-overlay{padding-left:32px;padding-right:32px}.arc-v13-4-0 .arc .arc-Modal-dialog--m{max-width:var(--modal-size-xl)}.arc-v13-4-0 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-xxl)}.arc-v13-4-0 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v13-4-0 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (prefers-reduced-motion:no-preference){.arc-v13-4-0 .arc .arc-Modal-overlay{animation:overlay-show 100ms cubic-bezier(0.44,0,0.55,0.94)}.arc-v13-4-0 .arc .arc-Modal-dialog{animation:content-show 100ms cubic-bezier(0.44,0,0.55,0.94)}@keyframes content-show{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}@keyframes overlay-show{from{opacity:0}to{opacity:1}}}.arc-v13-4-0 .arc .arc-Modal-actionButton--compact{display:flex}@media (min-width:636px){.arc-v13-4-0 .arc .arc-Modal-actionButton--compact button{width:auto}}@media (min-width:768px){.arc-v13-4-0 .arc .arc-Modal-actionButton--compact{flex-grow:1}}:root{--columns-gutter-xs:var(--arc-size-grid-gutter-s);--columns-gutter-s:var(--arc-size-grid-gutter-m);--columns-gutter-m:var(--arc-size-grid-gutter-m);--columns-gutter-l:var(--arc-size-grid-gutter-m);--columns-gutter-xl:var(--arc-size-grid-gutter-l);--arc-columns-gap:var(--columns-gutter-xs);--arc-columns-count:12;--modal-max-width:100%;--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)));--arc-columns-span-4-width:calc((var(--arc-column-width) * 4) - var(--arc-columns-gap));--arc-columns-span-6-width:calc((var(--arc-column-width) * 6) - var(--arc-columns-gap));--arc-columns-span-8-width:calc((var(--arc-column-width) * 8) - var(--arc-columns-gap));--arc-columns-span-10-width:calc((var(--arc-column-width) * 10) - var(--arc-columns-gap));--arc-columns-span-12-width:calc((var(--arc-column-width) * 12) - var(--arc-columns-gap))}@media (min-width:320px){.arc-v13-4-0 :root{--arc-columns-gap:var(--columns-gutter-s);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:636px){:root{--arc-columns-gap:var(--columns-gutter-m);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:1280px){.arc-v13-4-0 .arc .arc-Modal-overlay{padding-left:32px;padding-right:32px}:root{--modal-max-width:calc(var(--arc-size-breakpoints-xl) - calc(2 * var(--arc-size-section-margin-32)));--arc-columns-gap:var(--columns-gutter-xl);--arc-column-width:calc((calc(var(--modal-max-width) + var(--arc-columns-gap))/var(--arc-columns-count)))}}@media (min-width:320px){.arc-v13-4-0 .arc-Modal-dialog--xs-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-4-0 .arc-Modal-dialog--xs-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-4-0 .arc-Modal-dialog--xs-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-4-0 .arc-Modal-dialog--xs-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-4-0 .arc-Modal-dialog--xs-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:636px){.arc-v13-4-0 .arc-Modal-dialog--s-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-4-0 .arc-Modal-dialog--s-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-4-0 .arc-Modal-dialog--s-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-4-0 .arc-Modal-dialog--s-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-4-0 .arc-Modal-dialog--s-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:768px){.arc-v13-4-0 .arc-Modal-dialog--m-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-4-0 .arc-Modal-dialog--m-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-4-0 .arc-Modal-dialog--m-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-4-0 .arc-Modal-dialog--m-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-4-0 .arc-Modal-dialog--m-span-12{max-width:var(--arc-columns-span-12-width)}}@media (min-width:1024px){.arc-v13-4-0 .arc-Modal-dialog--l-span-4{max-width:var(--arc-columns-span-2-width)}.arc-v13-4-0 .arc-Modal-dialog--l-span-6{max-width:var(--arc-columns-span-6-width)}.arc-v13-4-0 .arc-Modal-dialog--l-span-8{max-width:var(--arc-columns-span-8-width)}.arc-v13-4-0 .arc-Modal-dialog--l-span-10{max-width:var(--arc-columns-span-10-width)}.arc-v13-4-0 .arc-Modal-dialog--l-span-12{max-width:var(--arc-columns-span-12-width)}}

package/lib/NavigationHeader/NavigationHeader.cjs

@@ -22,7 +22,7 @@ var Heading = require('../_shared/cjs/Heading-BYBmZkmS.cjs');
 var VerticalSpace = require('../_shared/cjs/VerticalSpace-DLQUYsvc.cjs');
 var Rule = require('../_shared/cjs/Rule-essaguo_.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
-var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-C3HREhvT.cjs');
+var arcBreakpoints = require('../_shared/cjs/arc-breakpoints-DX5WrUyh.cjs');
 var Popover = require('../_shared/cjs/Popover-BxuQPltF.cjs');
 var index$5 = require('../_shared/cjs/index-BCu-VH8y.cjs');
 var ButtonV2 = require('../_shared/cjs/ButtonV2-CxyploaQ.cjs');
@@ -34,7 +34,7 @@ require('../_shared/cjs/index-BdJeAKfz.cjs');
 require('../_shared/cjs/Combination-Cm62lfyr.cjs');
 require('../_shared/cjs/index-BBDa9gnQ.cjs');
 require('../_shared/cjs/SemanticHeading-C1-fyc3V.cjs');
-require('../_shared/cjs/index.es-D5DdMrn2.cjs');
+require('../_shared/cjs/index.es-pYEm4MOk.cjs');
 require('../_shared/cjs/index-DsqYRMfM.cjs');
 require('../_shared/cjs/index-WO7l1Mfx.cjs');
 require('../_shared/cjs/index-CztwwwKE.cjs');
@@ -389,10 +389,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(Surface.Context).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);
@@ -414,20 +414,21 @@ var NavigationHeaderCollapsingNavList = function (_a) {
             React.createElement("span", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryIcon" },
                 React.createElement(ThemeIcon.ThemeIcon, { size: 16, icon: "disclosureExpand" }))),
         React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-content" },
-            React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
             description && (React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-description" },
+                React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
                 React.createElement(Text.Text, { size: "s", tone: "muted" }, description))),
             React.createElement("div", { ref: containerRef },
-                mainLink && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
-                    React.createElement(NavigationHeaderCta, tslib_es6.__assign({}, mainLink, { revealLinkIconOnHover: revealLinkIconOnHover })),
-                    React.createElement(VerticalSpace.VerticalSpace, { size: "8" }),
-                    React.createElement(Rule.Rule, null))),
-                links && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace.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, tslib_es6.__assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); })))),
-                React.createElement(VerticalSpace.VerticalSpace, { size: "24" })))));
+                React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                React.createElement("ul", { className: "arc-NavigationHeaderCollapsingNavList-list" },
+                    mainLink && (React.createElement("li", null,
+                        React.createElement(NavigationHeaderCta, tslib_es6.__assign({}, mainLink, { revealLinkIconOnHover: revealLinkIconOnHover })),
+                        React.createElement("div", { "aria-hidden": true },
+                            React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+                            React.createElement(Rule.Rule, null),
+                            Boolean(links === null || links === void 0 ? void 0 : links.length) && React.createElement(VerticalSpace.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, tslib_es6.__assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); }))),
+            isBottomSpacing && React.createElement(VerticalSpace.VerticalSpace, null))));
 };
 
 var SideMenuCategoryLinksItem = function (_a) {
@@ -448,7 +449,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, tslib_es6.__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, tslib_es6.__assign({}, navItem, { isBottomSpacing: true, key: "".concat(id, "-side-menu-category-link-item-").concat(navItemIndex) }))); })))));
 };
 
 var NavigationHeaderFeatureCard = function (_a) {
@@ -474,7 +475,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(Surface.Context).surface;
     return (React.createElement("div", { className: index$2.classNames("arc-NavigationHeaderPanelLink", suffixModifier.suffixModifier("arc-NavigationHeaderPanelLink--on", surface)) },
         React.createElement("div", { className: "arc-NavigationHeaderPanelLink-icon" },
@@ -482,7 +483,7 @@ var NavigationHeaderPanelLink = function (_a) {
         React.createElement("div", { className: "arc-NavigationHeaderPanelLink-textCol" },
             React.createElement("div", { className: "arc-NavigationHeaderPanelLink-heading" },
                 React.createElement(Heading.Heading, { size: "s" },
-                    React.createElement(SemanticLink.SemanticLink, { className: "arc-NavigationHeaderPanelLink-link", href: href, onClick: onClick }, heading))),
+                    React.createElement(SemanticLink.SemanticLink, { "aria-label": ariaLabel, className: "arc-NavigationHeaderPanelLink-link", href: href, onClick: onClick }, heading))),
             React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
             React.createElement("div", { className: "arc-NavigationHeaderPanelLink-description" },
                 React.createElement(Text.Text, { size: "s" }, description))),
@@ -516,7 +517,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, tslib_es6.__assign({}, item.panelLink, { icon: item.icon })),
             React.createElement(VerticalSpace.VerticalSpace, { size: "16" }),
-            React.createElement("div", { className: "arc-SideMenuMegaMenuItem-navItems" }, item.items.map(function (navItem, navItemIndex) { return (React.createElement(NavigationHeaderCollapsingNavList, tslib_es6.__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, tslib_es6.__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;
@@ -660,7 +661,7 @@ var NavigationHeaderPanelHeading = function (_a) {
     return (React.createElement("div", tslib_es6.__assign({ className: "arc-NavigationHeaderPanelHeading" }, filterAttrs.filterAttrs(props)),
         React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-grid" },
             React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-text" },
-                React.createElement(Heading.Heading, { level: "2", size: "m" }, heading)),
+                React.createElement(Heading.Heading, { color: "brand", level: "2", size: "m" }, heading)),
             React.createElement("div", { className: "arc-NavigationHeaderPanelHeading-cta" }, link && (React.createElement(ButtonV2.ButtonV2, { buttonStyle: "secondary", ariaLabel: link.ariaLabel, href: link.href, onClick: link.onClick, label: link.text })))),
         React.createElement(VerticalSpace.VerticalSpace, { size: "4" }),
         React.createElement(Text.Text, { size: "s", tone: "muted" }, supportingText)));
@@ -2551,7 +2552,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);
@@ -2638,9 +2639,12 @@ var NavigationHeaderSubnavContent = function (_a) {
             React.createElement(index$4.Portal, { 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(index$4.Content, { className: "arc-NavigationHeaderSubnavContent-dialog", ref: dialogRef, "aria-describedby": undefined, onInteractOutside: onInteractOutside, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
+                        React.createElement(index$4.Content, { className: "arc-NavigationHeaderSubnavContent-dialog", ref: dialogRef, onInteractOutside: onInteractOutside, onEscapeKeyDown: onEscapeKeyDown, onCloseAutoFocus: onCloseAutoFocus, onOpenAutoFocus: onOpenAutoFocus },
                             React.createElement(VisuallyHidden.VisuallyHidden, null,
-                                React.createElement(index$4.Title, null, menuTitle)),
+                                React.createElement(index$4.Title, null,
+                                    menuTitle,
+                                    " submenu"),
+                                React.createElement(index$4.Description, null, description)),
                             React.createElement("div", { ref: childContainerRef }, children))),
                     React.createElement(VerticalSpace.VerticalSpace, null))))));
 };
@@ -2654,15 +2658,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, tslib_es6.__assign({}, panelHeading)),
                     React.createElement(index$5.$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(index$5.$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(index$5.$69cb30bb0017df05$export$41fb9f06171c75f4, { className: "arc-NavigationHeaderMegaMenu-tab", "aria-label": item.triggerText, value: "".concat(item.triggerText, "-").concat(i), onClick: item.onClick },
-                                    React.createElement(Heading.Heading, { level: "3", size: "xs" }, item.triggerText)))); }))),
+                            React.createElement(index$5.$69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: "arc-NavigationHeaderMegaMenu-tabList" }, tabs.map(function (item, i) { return (React.createElement(index$5.$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.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(index$5.$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, tslib_es6.__assign({}, tab.panelLink, { icon: tab.icon })),
@@ -2679,7 +2682,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, tslib_es6.__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) },
@@ -3596,16 +3599,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();
@@ -3614,71 +3612,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.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.Heading, { size: "m" }, label)),
+                    React.createElement("label", { htmlFor: id },
+                        React.createElement(Heading.Heading, { color: "brand", size: "m" }, label)),
                     React.createElement(Text.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.SemanticButton, { "aria-label": submitButtonAriaLabel, className: "arc-NavigationHeaderSearchMenu-submitButton", type: "submit" },
                             React.createElement(ThemeIcon.ThemeIcon, { icon: "navigationHeaderSearch" })))),
                 React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-results" },
                     React.createElement(Heading.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: index$2.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.Heading, { size: "xxs" },
-                                    React.createElement(SemanticLink.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;