@arc-ui/components 13.4.0 → 13.6.0

package/lib/index.cjs

@@ -1423,7 +1423,7 @@ var debounce = /*@__PURE__*/getDefaultExportFromCjs(debounceExports);
 
 /**
  * Do not edit directly
- * Generated on Wed, 25 Feb 2026 15:47:05 GMT
+ * Generated on Mon, 16 Mar 2026 11:14:01 GMT
  */
 var ArcSizeBreakpointsXs = "320px";
 var ArcSizeBreakpointsS = "636px";
@@ -1555,7 +1555,7 @@ var BannerRow = function (_a) {
 
 /** Use `TemplateBanner` as a base structure for banner components; other banner variants extend or consume this template. */
 var TemplateBanner = function (_a) {
-    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, label = _a.label, _c = _a.labelLevel, labelLevel = _c === void 0 ? "3" : _c, text = _a.text, img = _a.img, _d = _a.contentRatio, contentRatio = _d === void 0 ? "1/1" : _d, contentRatios = _a.contentRatios, children = _a.children, _e = _a.alignment, alignment = _e === void 0 ? "center" : _e, additionalTopMargin = _a.additionalTopMargin, _f = _a.minHeight, minHeight = _f === void 0 ? 454 : _f, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _g = _a.headingSize, headingSize = _g === void 0 ? "xl" : _g, _h = _a.isReversed, isReversed = _h === void 0 ? false : _h, _j = _a.isElevated, isElevated = _j === void 0 ? false : _j, _k = _a.headingLevel, headingLevel = _k === void 0 ? "2" : _k, _l = _a.headingWordWrap, headingWordWrap = _l === void 0 ? false : _l, _m = _a.type, type = _m === void 0 ? "light" : _m, props = __rest(_a, ["heading", "fontStyle", "label", "labelLevel", "text", "img", "contentRatio", "contentRatios", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
+    var heading = _a.heading, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingColor, headingColor = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.labelLevel, labelLevel = _d === void 0 ? "3" : _d, _e = _a.labelColor, labelColor = _e === void 0 ? "auto" : _e, text = _a.text, img = _a.img, _f = _a.contentRatio, contentRatio = _f === void 0 ? "1/1" : _f, contentRatios = _a.contentRatios, children = _a.children, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, additionalTopMargin = _a.additionalTopMargin, _h = _a.minHeight, minHeight = _h === void 0 ? 454 : _h, minHeightM = _a.minHeightM, minHeightL = _a.minHeightL, minHeightXL = _a.minHeightXL, _j = _a.headingSize, headingSize = _j === void 0 ? "xl" : _j, _k = _a.isReversed, isReversed = _k === void 0 ? false : _k, _l = _a.isElevated, isElevated = _l === void 0 ? false : _l, _m = _a.headingLevel, headingLevel = _m === void 0 ? "2" : _m, _o = _a.headingWordWrap, headingWordWrap = _o === void 0 ? false : _o, _p = _a.type, type = _p === void 0 ? "light" : _p, props = __rest(_a, ["heading", "fontStyle", "headingColor", "label", "labelLevel", "labelColor", "text", "img", "contentRatio", "contentRatios", "children", "alignment", "additionalTopMargin", "minHeight", "minHeightM", "minHeightL", "minHeightXL", "headingSize", "isReversed", "isElevated", "headingLevel", "headingWordWrap", "type"]);
     var backgrounds = {
         dark: "dark-brand-02",
         light: "light-white",
@@ -1581,7 +1581,7 @@ var TemplateBanner = function (_a) {
             ? "".concat(minHeightXL, "px")
             : "auto",
     };
-    var _o = React.useState("1/1"), contentRatiosPerBreakpoint = _o[0], setContentRatios = _o[1];
+    var _q = React.useState("1/1"), contentRatiosPerBreakpoint = _q[0], setContentRatios = _q[1];
     var checkContentRatio = debounce(function () {
         if (contentRatios) {
             for (var _i = 0, _a = Object.entries(ArcBreakpoints); _i < _a.length; _i++) {
@@ -1624,9 +1624,9 @@ var TemplateBanner = function (_a) {
                                 "arc-TemplateBanner-content--additionalTopMargin": additionalTopMargin && alignment === "start",
                             }) },
                             label && (React.createElement(React.Fragment, null,
-                                React.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false }, label),
+                                React.createElement(Heading, { level: labelLevel, fontStyle: "overline", isWordWrap: false, color: labelColor }, label),
                                 React.createElement(VerticalSpace, { size: "8" }))),
-                            React.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
+                            React.createElement(Heading, { level: headingLevel, size: headingSize, fontStyle: fontStyle, isWordWrap: headingWordWrap, color: headingColor }, heading),
                             text && (React.createElement(React.Fragment, null,
                                 React.createElement(VerticalSpace, { size: "16" }),
                                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -1643,8 +1643,8 @@ var TemplateBanner = function (_a) {
 
 /** Use `Banner` to promote key content or products with bold visuals and messaging. */
 var Banner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, contentRatios = _a.contentRatios, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, _h = _a.headingWordWrap, headingWordWrap = _h === void 0 ? false : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "contentRatios", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment", "headingWordWrap"]);
-    return (React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, contentRatios: contentRatios, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment, headingWordWrap: headingWordWrap }, filterAttrs(props)), children));
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, contentRatios = _a.contentRatios, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.type, type = _f === void 0 ? "light" : _f, _g = _a.alignment, alignment = _g === void 0 ? "center" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, _j = _a.headingWordWrap, headingWordWrap = _j === void 0 ? false : _j, headingColor = _a.headingColor, labelColor = _a.labelColor, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "contentRatios", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment", "fontStyle", "headingWordWrap", "headingColor", "labelColor"]);
+    return (React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, contentRatios: contentRatios, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", fontStyle: fontStyle, alignment: alignment, headingWordWrap: headingWordWrap, headingColor: headingColor, labelColor: labelColor }, filterAttrs(props)), children));
 };
 
 /**
@@ -18764,13 +18764,13 @@ var FilterItem = function (_a) {
  *  Use `GhostedHeroBanner` to grab attention and convey the main message or purpose of a webpage
  */
 var GhostedHeroBanner = function (_a) {
-    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap"]);
+    var heading = _a.heading, headingLevel = _a.headingLevel, label = _a.label, text = _a.text, img = _a.img, children = _a.children, _b = _a.fontStyle, fontStyle = _b === void 0 ? "default" : _b, _c = _a.headingWordWrap, headingWordWrap = _c === void 0 ? false : _c, _d = _a.headingColor, headingColor = _d === void 0 ? "auto" : _d, _e = _a.labelColor, labelColor = _e === void 0 ? "auto" : _e, props = __rest(_a, ["heading", "headingLevel", "label", "text", "img", "children", "fontStyle", "headingWordWrap", "headingColor", "labelColor"]);
     return (React.createElement("div", __assign({ className: "arc-GhostedHeroBanner" }, filterAttrs(props)),
         React.createElement("div", { className: "arc-GhostedHeroBanner-content" },
             label && (React.createElement(React.Fragment, null,
-                React.createElement(Heading, { fontStyle: "overline" }, label),
+                React.createElement(Heading, { fontStyle: "overline", color: labelColor }, label),
                 React.createElement(VerticalSpace, { size: "8" }))),
-            React.createElement(Heading, { level: headingLevel, size: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, isWordWrap: headingWordWrap }, heading),
+            React.createElement(Heading, { level: headingLevel, size: "xl", fontStyle: fontStyle, isWordWrap: headingWordWrap, color: headingColor }, heading),
             text && (React.createElement(React.Fragment, null,
                 React.createElement(VerticalSpace, { size: "16" }),
                 React.createElement("span", { className: "arc-TemplateBanner-text" }, text))),
@@ -18948,11 +18948,11 @@ var GroupItem = function (_a) {
 
 /** Use `HeroBanner` to promote key content or products with bold visuals and messaging. */
 var HeroBanner = function (_a) {
-    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, contentRatios = _a.contentRatios, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, _j = _a.headingWordWrap, headingWordWrap = _j === void 0 ? false : _j, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "contentRatios", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle", "headingWordWrap"]);
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, contentRatios = _a.contentRatios, children = _a.children, minHeight = _a.minHeight, _c = _a.isReversed, isReversed = _c === void 0 ? false : _c, _d = _a.isElevated, isElevated = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.extendBeyondContainer, extendBeyondContainer = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.fontStyle, fontStyle = _h === void 0 ? "default" : _h, _j = _a.headingWordWrap, headingWordWrap = _j === void 0 ? false : _j, headingColor = _a.headingColor, labelColor = _a.labelColor, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "contentRatios", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "extendBeyondContainer", "type", "fontStyle", "headingWordWrap", "headingColor", "labelColor"]);
     return (React.createElement(ConditionalWrapper, { condition: extendBeyondContainer, wrapper: function (children) { return (React.createElement("div", { className: classNames({
                 "arc-HeroBanner--expanded": extendBeyondContainer,
             }) }, children)); } },
-        React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, contentRatios: contentRatios, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: fontStyle === "default" ? "xl" : "xxl", fontStyle: fontStyle, alignment: "center", headingWordWrap: headingWordWrap }, filterAttrs(props)), children)));
+        React.createElement(TemplateBanner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, contentRatios: contentRatios, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, headingColor: headingColor, type: type, headingSize: "xl", fontStyle: fontStyle, alignment: "center", headingWordWrap: headingWordWrap, labelColor: labelColor }, filterAttrs(props)), children)));
 };
 
 /**
@@ -19068,8 +19068,10 @@ var CardFooter = function (_a) {
 
 /** Use `CardHeading` internally within card components to display a title, icon, or leading content at the top of a card. */
 var CardHeading = function (_a) {
-    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.headingWordWrap, headingWordWrap = _e === void 0 ? false : _e;
-    return (React.createElement(Heading, { level: headingLevel, size: size, isWordWrap: headingWordWrap }, href ? (React.createElement("a", __assign({ className: "arc-CardHeading-link", href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
+    var onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onBlur = _a.onBlur, onFocus = _a.onFocus, href = _a.href, heading = _a.heading, _b = _a.size, size = _b === void 0 ? "m" : _b, _c = _a.linkData, linkData = _c === void 0 ? {} : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, _e = _a.headingWordWrap, headingWordWrap = _e === void 0 ? false : _e, _f = _a.isContained, isContained = _f === void 0 ? true : _f;
+    return (React.createElement(Heading, { level: headingLevel, size: size, isWordWrap: headingWordWrap }, href ? (React.createElement("a", __assign({ className: classNames("arc-CardHeading-link", {
+            "arc-CardHeading--isUncontained": !isContained,
+        }), href: href, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, filterAttrs(linkData)), heading)) : (heading)));
 };
 
 /** Use `HorizontalCard` to display card content in a horizontal layout. */
@@ -19286,20 +19288,22 @@ var MediaCard = function (_a) {
                     "arc-MediaCard--onDarkSurface": surface === "dark",
                 }], false)) }, filterAttrs(props)),
             React.createElement(ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React.createElement(Surface, { growVertically: true, background: "light-white" }, children)); } },
-                media.type === "img" && (React.createElement("div", { className: "arc-MediaCard-imgContainer" },
+                media.type === "img" && (React.createElement("div", { className: "arc-MediaCard-mediaContainer" },
                     React.createElement(Image, __assign({}, media)))),
-                media.type === "video" && isClient && (React.createElement(React.Suspense, { fallback: null },
-                    React.createElement(VideoPlayer$1, __assign({ isSupportingTextHidden: true }, media)))),
+                media.type === "video" && isClient && (React.createElement("div", { className: "arc-MediaCard-mediaContainer" },
+                    React.createElement(React.Suspense, { fallback: null },
+                        React.createElement(VideoPlayer$1, __assign({ isSupportingTextHidden: true }, media))))),
                 React.createElement("div", { className: "arc-MediaCard-content" },
                     label && (React.createElement("div", { className: "arc-MediaCard-label" },
                         React.createElement(Heading, { level: labelLevel, fontStyle: "overline" }, label),
                         React.createElement(VerticalSpace, { size: "16" }))),
-                    React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap }),
+                    React.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false), headingWordWrap: headingWordWrap, isContained: isContained }),
+                    !text && isContained && React.createElement(VerticalSpace, null),
                     React.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React.createElement(React.Fragment, null,
                         React.createElement(VerticalSpace, { size: "16" }),
                         React.createElement(CardText, { text: text }),
                         (url || metaText) && React.createElement(VerticalSpace, { size: "24" })))),
-                    React.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState }))))));
+                    React.createElement(CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: isContained && Boolean(url) && media.type !== "video", isHovered: showHoverState }))))));
 };
 
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
@@ -21147,10 +21151,13 @@ var Popover = function (_a) {
                 React.createElement(Portal$5, { container: themeElement },
                     React.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
                         React.createElement(Content2$4, { side: side, sideOffset: sideOffset, align: align, hideWhenDetached: hideWhenDetached, alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : alignOffsetDefault, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside, className: className },
-                            React.createElement(Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
+                            React.createElement(Surface, { isTransparent: true, background: background === "dark" || background === "brand"
+                                    ? "dark-black"
+                                    : "light-white" },
                                 React.createElement("div", { className: classNames("arc-Popover-content", {
                                         "arc-Popover-content--dark": background === "dark",
                                         "arc-Popover-content--brand": background === "brand",
+                                        "arc-Popover-content--white": background === "white",
                                         "arc-Popover-content--constrainToViewport": constrainToViewport,
                                         "arc-Popover-content--isFluidToViewport": isFluidToViewport,
                                         "arc-Popover-content--contentMargin": contentMargin,
@@ -22956,7 +22963,7 @@ var TextArea = function (_a) {
 var package_default = {
   name: "@arc-ui/helpers",
   private: true,
-  version: "13.4.0",
+  version: "13.6.0",
   type: "module",
   homepage: "https://ui.digital-ent-int.bt.com",
   author: "BT Enterprise Digital UI Team <ui-digital-ent-int@bt.com>",
@@ -23019,7 +23026,9 @@ var Theme = function (_a) {
 };
 var themes = ["bt-enterprise", "bt-business", "ee"];
 
-/** Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon. */
+/** ThumbnailSignpost` has been **deprecated from arc component package** and moved into the **community-components package**. It can be seen on the community components storybook.
+ *
+ * Use `ThumbnailSignpost` to highlight key information or navigation points with an accompanying thumbnail image or icon.*/
 var ThumbnailSignpost = function (_a) {
     var text = _a.text, title = _a.title, img = _a.img, button = _a.button, props = __rest(_a, ["text", "title", "img", "button"]);
     return (React.createElement("div", __assign({ className: "arc-ThumbnailSignpost" }, filterAttrs(props)),
@@ -27302,6 +27311,10 @@ var NavigationHeaderContainer = function (_a) {
             surface: "light-white",
             classSuffix: "backgroundLightElevated",
         },
+        lightElevatedTight: {
+            surface: "light-white",
+            classSuffix: "backgroundLighElevatedTight",
+        },
         transparentOnDark: {
             surface: "dark-black",
             classSuffix: "backgroundTransparent",
@@ -27496,7 +27509,7 @@ var SideMenuLink = function (_a) {
     return (React.createElement(ConditionalWrapper, { condition: Boolean(href), wrapper: function (children) { return (React.createElement(SemanticLink, __assign({}, commonProps, { href: href, ref: ref }), children)); }, fallback: function (children) { return (React.createElement(SemanticButton, __assign({}, commonProps, { ref: ref }), children)); } },
         React.createElement("div", { className: "arc-SideMenuLink-text" }, text),
         React.createElement("span", { className: "arc-SideMenuLink-icon" },
-            React.createElement(ThemeIcon, { icon: "navigationHeaderMenuLinkLarge" }))));
+            React.createElement(ThemeIcon, { icon: "navigationHeaderMenuLink" }))));
 };
 
 // src/get-focusable-elements/get-focusable-elements.ts
@@ -27537,7 +27550,7 @@ var SideMenuDisclosure = function (_a) {
         React.createElement("summary", { "aria-expanded": isOpen, onClick: handleOnClick, className: "arc-SideMenuDisclosure-summary" },
             React.createElement("span", { className: "arc-SideMenuDisclosure-heading" }, heading),
             React.createElement("span", { className: "arc-SideMenuDisclosure-icon" },
-                React.createElement(ThemeIcon, { size: 20, icon: "navigationHeaderDisclosure" }))),
+                React.createElement(ThemeIcon, { icon: "navigationHeaderDisclosure" }))),
         React.createElement("div", { ref: containerRef, className: "arc-SideMenuDisclosure-content" }, children)));
 };
 
@@ -27613,7 +27626,7 @@ var NavigationHeaderCollapsingNavList = function (_a) {
             React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryHeading" },
                 React.createElement(Heading, { level: "2" }, category)),
             React.createElement("span", { className: "arc-NavigationHeaderCollapsingNavList-disclosureSummaryIcon" },
-                React.createElement(ThemeIcon, { size: 16, icon: "disclosureExpand" }))),
+                React.createElement(ThemeIcon, { size: 20, icon: "navigationHeaderDisclosure" }))),
         React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-content" },
             description && (React.createElement("div", { className: "arc-NavigationHeaderCollapsingNavList-description" },
                 React.createElement(VerticalSpace, { size: "8" }),
@@ -27624,10 +27637,10 @@ var NavigationHeaderCollapsingNavList = function (_a) {
                     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(VerticalSpace, { size: "8" }),
                             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) },
+                            Boolean(links === null || links === void 0 ? void 0 : links.length) && React.createElement(VerticalSpace, { size: "8" })))), links === null || links === void 0 ? void 0 :
+                    links.map(function (link, i) { return (React.createElement("li", { className: "arc-NavigationHeaderCollapsingNavList-linkListItem", key: "".concat(id, "-NavigationHeader-megamenu-link-").concat(i) },
                         React.createElement(NavigationHeaderCta, __assign({}, link, { revealLinkIconOnHover: revealLinkIconOnHover })))); }))),
             isBottomSpacing && React.createElement(VerticalSpace, null))));
 };
@@ -27724,6 +27737,7 @@ var SideMenuMegaMenuItem = function (_a) {
     var featureCards = _a.featureCards, text = _a.text, panelHeading = _a.panelHeading, tabs = _a.tabs, backButtonLabel = _a.backButtonLabel, backButtonAriaLabel = _a.backButtonAriaLabel;
     var id = React.useId();
     return (React.createElement(SideMenuDisclosure, { heading: text },
+        React.createElement(VerticalSpace, { size: "4" }),
         tabs.map(function (item, itemIndex) { return (React.createElement(MegaMenuSubMenu, { key: "".concat(id, "-side-menu-mega-menu-item-").concat(itemIndex), item: item, heading: panelHeading.heading, backButtonLabel: backButtonLabel, backButtonAriaLabel: backButtonAriaLabel })); }),
         featureCards && (React.createElement(Surface, { isTransparent: true, background: "light-white" },
             React.createElement("div", { className: "arc-SideMenuMegaMenuItem-featureCards" },
@@ -29776,7 +29790,7 @@ var NavigationHeaderSubnavContent = function (_a) {
                     });
                 },
             }),
-            offset(navigationHeaderContext.isPill ? 12 : 0),
+            offset(navigationHeaderContext.isPill ? 8 : 0),
         ],
     }), subNavRefs = _d.refs, subNavFloatStyles = _d.floatingStyles;
     // if focus isnt going anywhere else, return it to the trigger
@@ -29859,7 +29873,7 @@ var NavigationHeaderMegaMenu = function (_a) {
     ]; };
     return (React.createElement(NavigationHeaderSubnav, { onOpenChange: onOpenChange },
         React.createElement(NavigationHeaderSubnavTrigger, { ariaLabel: ariaLabel, onClick: onClick }, text),
-        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevated", description: "Use tab and arrow keys to navigate. Press Escape to close.", menuTitle: text },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevatedTight", 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)),
@@ -29883,7 +29897,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: text, description: "Use tab keys to navigate. Press Escape to close." },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevatedTight", 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) },
@@ -30818,7 +30832,7 @@ var NavigationHeaderSearchMenu = function (_a) {
     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, description: "Use tab keys to navigate. Press Escape to close." },
+        React.createElement(NavigationHeaderSubnavContent, { background: "lightElevatedTight", 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: id },
@@ -30833,11 +30847,8 @@ var NavigationHeaderSearchMenu = function (_a) {
                     React.createElement(Heading, { level: "3", size: "xxxs" }, panelTitle),
                     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", { key: "".concat(id, "-search-link-").concat(text, "-").concat(i), className: "arc-NavigationHeaderSearchMenu-listItem" },
-                            React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-linkContainer" },
-                                React.createElement(NavigationHeaderCta, { revealLinkIconOnHover: true, href: href, onClick: onClick, text: text })),
-                            React.createElement("div", { className: "arc-NavigationHeaderSearchMenu-iconContainer" },
-                                React.createElement(ArrowRightIcon, null))));
+                        return (React.createElement("li", { key: "".concat(id, "-search-link-").concat(text, "-").concat(i) },
+                            React.createElement(NavigationHeaderCta, { revealLinkIconOnHover: true, href: href, onClick: onClick, text: text })));
                     })))))));
 };