@telefonica/mistica 16.53.0 → 16.55.0

package/dist-es/navigation-bar.js

@@ -78,137 +78,139 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as e, jsxs as b, Fragment as ue } from "react/jsx-runtime";
+import { jsx as e, jsxs as N, Fragment as le } from "react/jsx-runtime";
 import * as o from "react";
-import { CSSTransition as Ee } from "react-transition-group";
-import D from "classnames";
-import Q, { ResetResponsiveLayout as le } from "./responsive-layout.js";
-import X from "./inline.js";
-import Ae, { BaseTouchable as J } from "./touchable.js";
-import { Text3 as de, Text2 as me } from "./text.js";
-import { useTheme as w, useScreenSize as pe } from "./hooks.js";
-import Re from "./generated/mistica-icons/icon-menu-regular.js";
-import Te from "./generated/mistica-icons/icon-close-regular.js";
-import xe from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import { IconButton as Le } from "./icon-button.js";
-import { RowList as fe, Row as ge } from "./list.js";
-import { ThemeVariant as F, normalizeVariant as ee, useThemeVariant as ye } from "./theme-variant-context.js";
-import he from "./focus-trap.js";
-import { Portal as De } from "./portal.js";
-import Pe from "./grid-layout.js";
-import { useSetModalState as He } from "./modal-context-provider.js";
-import { Logo as ve } from "./logo.js";
-import { vars as y } from "./skins/skin-contract.css-mistica.js";
-import { spacer as ne, burgerMenuButton as _e, logoContainer as we, spacerLarge as Fe, lineHeightFix as Me, navigationBarAction as $e, textWrapperVariants as Se, navigationBarContentRightExpanded as Ve, navigationBarContentRight as We, navigationBarContent as Ge, desktopOnly as $, topFixed as Ue, desktopMenuWrapper as Xe, desktopMenuBackgroundContainer as ze, mainNavigationBarContentWrapper as Ke, burgerIconContainer as qe, iconCloseOpen as je, iconCloseHidden as Ye, iconMenuHidden as Ze, iconMenuOpen as Je, DESKTOP_MENU_ANIMATION_DURATION_MS as be, BURGER_MENU_ANIMATION_DURATION_MS as Qe, burgerMenuTransition as en, burgerMenu as nn, burgerMenuContainer as tn, burgerMenuContentContainer as re, navbarBorderColorVariants as Z, mainNavBarSectionsContainer as on, desktopMenuSectionWithArrowWrapper as an, section as rn, selectedSectionVariants as sn, desktopMenuSectionContainer as cn, desktopMenuLastSection as un, desktopMenuFirstSection as ln, desktopMenuSectionArrowContainer as dn, desktopMenuSectionArrow as mn, DESKTOP_SMALL_MENU_WIDTH as se, desktopMenuContainer as pn, desktopMenu as fn, desktopMenuContentFadeIn as gn, desktopSmallMenuContainer as hn, desktopMenuColumnItem as vn } from "./navigation-bar.css-mistica.js";
-import { getPrefixedDataAttributes as Mn, cancelEvent as W } from "./utils/dom.js";
-import _ from "./stack.js";
-import z from "./box.js";
-import { isRunningAcceptanceTest as te } from "./utils/platform.js";
-import { backNavigationBar as oe, closeNavigationMenu as Sn, openNavigationMenu as bn, mainNavigationBarSectionSeeAll as Nn, mainNavigationBarOpenSectionMenu as ce } from "./text-tokens.js";
-import { NAVBAR_HEIGHT_DESKTOP_LARGE as K, NAVBAR_HEIGHT_DESKTOP as q } from "./theme.js";
-import Bn from "./text-link.js";
-import { Title3 as Cn, Title1 as kn } from "./title.js";
-import { ButtonLink as In } from "./button.js";
-import { Grid as On, GridItem as En } from "./grid.js";
-import { ESC as An, UP as Ne, DOWN as Be } from "./utils/keys.js";
-import { debounce as Rn, isEqual as Tn } from "./utils/helpers.js";
-import xn from "./negative-box.js";
-const Ln = 120, yn = (param)=>{
-    let { size: n = 24, color: t = y.colors.neutralHigh, style: a, className: r } = param;
+import { CSSTransition as Ae } from "react-transition-group";
+import H from "classnames";
+import ee, { ResetResponsiveLayout as de } from "./responsive-layout.js";
+import q from "./inline.js";
+import Re, { BaseTouchable as Q } from "./touchable.js";
+import { Text3 as me, Text2 as pe } from "./text.js";
+import { useTheme as $, useScreenSize as fe, useElementDimensions as Te } from "./hooks.js";
+import xe from "./generated/mistica-icons/icon-menu-regular.js";
+import Le from "./generated/mistica-icons/icon-close-regular.js";
+import ye from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import { IconButton as De } from "./icon-button.js";
+import { RowList as he, Row as ge } from "./list.js";
+import { ThemeVariant as W, normalizeVariant as ne, useThemeVariant as Pe } from "./theme-variant-context.js";
+import ve from "./focus-trap.js";
+import { Portal as He } from "./portal.js";
+import _e from "./grid-layout.js";
+import { useSetModalState as Ve } from "./modal-context-provider.js";
+import { Logo as Me } from "./logo.js";
+import { vars as P } from "./skins/skin-contract.css-mistica.js";
+import { spacer as te, burgerMenuButton as $e, logoContainer as we, spacerLarge as Fe, lineHeightFix as Se, navigationBarAction as We, textWrapperVariants as be, navigationBarContentRightExpanded as Ge, navigationBarContentRight as Ue, navigationBarContent as Xe, desktopOnly as G, topFixed as ze, desktopMenuWrapper as Ke, desktopMenuBackgroundContainer as qe, mainNavigationBarContentWrapper as je, burgerIconContainer as Ye, iconCloseOpen as Ze, iconCloseHidden as Je, iconMenuHidden as Qe, iconMenuOpen as en, DESKTOP_MENU_ANIMATION_DURATION_MS as Ne, BURGER_MENU_ANIMATION_DURATION_MS as nn, burgerMenuTransition as tn, burgerMenu as on, burgerMenuContainer as an, burgerMenuContentContainer as se, navbarBorderColorVariants as J, mainNavBarSectionsContainer as rn, desktopMenuSectionWithArrowWrapper as sn, section as cn, selectedSectionVariants as un, desktopMenuSectionContainer as ln, desktopMenuLastSection as dn, desktopMenuFirstSection as mn, desktopMenuSectionArrowContainer as pn, desktopMenuSectionArrow as fn, DESKTOP_SMALL_MENU_WIDTH as ce, desktopMenuContainer as hn, desktopMenu as gn, desktopMenuContentFadeIn as vn, desktopSmallMenuContainer as Mn, desktopMenuColumnItem as Sn } from "./navigation-bar.css-mistica.js";
+import { getPrefixedDataAttributes as bn, cancelEvent as X } from "./utils/dom.js";
+import V from "./stack.js";
+import j from "./box.js";
+import { isRunningAcceptanceTest as oe } from "./utils/platform.js";
+import { backNavigationBar as ae, closeNavigationMenu as Nn, openNavigationMenu as Bn, mainNavigationBarSectionSeeAll as Cn, mainNavigationBarOpenSectionMenu as ue } from "./text-tokens.js";
+import { NAVBAR_HEIGHT_MOBILE as kn, NAVBAR_HEIGHT_DESKTOP_LARGE as Y, NAVBAR_HEIGHT_DESKTOP as Z } from "./theme.js";
+import In from "./text-link.js";
+import { Title3 as On, Title1 as En } from "./title.js";
+import { ButtonLink as An } from "./button.js";
+import { Grid as Rn, GridItem as Tn } from "./grid.js";
+import { ESC as xn, UP as Be, DOWN as Ce } from "./utils/keys.js";
+import { debounce as Ln, isEqual as yn } from "./utils/helpers.js";
+import Dn from "./negative-box.js";
+const Pn = 120, Hn = (param)=>{
+    let { size: n = 24, color: t = P.colors.neutralHigh, style: a, className: i } = param;
     return /* @__PURE__ */ e("svg", {
         width: n,
         height: n,
         viewBox: "0 0 8 8",
         style: a,
-        className: r,
+        className: i,
         children: /* @__PURE__ */ e("path", {
             d: "M6.32595 3.46071L3.03801 0.158595L3.03292 0.153747L3.032 0.152903L3.02931 0.150463L3.02848 0.149738L3.02248 0.144353C2.88533 0.021206 2.71386 -0.0126731 2.56343 0.00394249C2.41648 0.0201739 2.27272 0.0856702 2.16886 0.18711C2.06893 0.281844 2.01209 0.42816 2.00175 0.567065C1.99083 0.71377 2.02925 0.889583 2.16869 1.02392L5.24446 4.00145L2.15859 6.96199L2.15375 6.96708L2.1529 6.968L2.15046 6.97069L2.14974 6.97152L2.14435 6.97752C2.02121 7.11467 1.98733 7.28614 2.00394 7.43657C2.02017 7.58352 2.08567 7.72728 2.18711 7.83114C2.28184 7.93107 2.42816 7.98791 2.56706 7.99825C2.71377 8.00917 2.88958 7.97075 3.02392 7.83132L6.32595 4.5422V4.5422C6.6246 4.24355 6.6246 3.75935 6.32595 3.46071V3.46071Z",
             fill: t
         })
     });
-}, Dn = (param)=>{
+}, _n = (param)=>{
     let { isOpen: n } = param;
-    return /* @__PURE__ */ b("div", {
-        className: qe,
+    return /* @__PURE__ */ N("div", {
+        className: Ye,
         role: "presentation",
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: n ? je : Ye,
-                children: /* @__PURE__ */ e(Te, {})
+                className: n ? Ze : Je,
+                children: /* @__PURE__ */ e(Le, {})
             }),
             /* @__PURE__ */ e("div", {
-                className: n ? Ze : Je,
-                children: /* @__PURE__ */ e(Re, {})
+                className: n ? Qe : en,
+                children: /* @__PURE__ */ e(xe, {})
             })
         ]
     });
-}, ae = (param)=>{
-    let { children: n, topFixed: t, withBorder: a, isBurgerMenuOpen: r, variant: i, dataAttributes: p } = param;
-    const { isDarkMode: c } = w(), d = ()=>(i === "brand" || i === "negative") && !c || !a ? Z.noBorder : r ? Z.menuOpen : Z.default, l = {
-        default: y.colors.background,
-        brand: y.colors.navigationBarBackground,
-        negative: y.colors.backgroundNegative,
-        alternative: y.colors.backgroundAlternative,
-        media: y.colors.navigationBarBackground
+}, ie = (param)=>{
+    let { children: n, topFixed: t, withBorder: a, isBurgerMenuOpen: i, variant: r, dataAttributes: c } = param;
+    const { isDarkMode: l } = $(), h = ()=>(r === "brand" || r === "negative") && !l || !a ? J.noBorder : i ? J.menuOpen : J.default, d = {
+        default: P.colors.background,
+        brand: P.colors.navigationBarBackground,
+        negative: P.colors.backgroundNegative,
+        alternative: P.colors.backgroundAlternative,
+        media: P.colors.navigationBarBackground
     };
     return /* @__PURE__ */ e("header", _object_spread_props(_object_spread({
-        className: D(d(), {
-            [Ue]: t
+        className: H(h(), {
+            [ze]: t
         }),
         style: {
-            background: l[i]
+            background: d[r]
         }
-    }, Mn(p)), {
+    }, bn(c)), {
         children: n
     }));
-}, G = /*#__PURE__*/ o.forwardRef((param, i)=>{
-    let { right: n, children: t, desktopOnly: a, expandRightContent: r } = param;
-    return /* @__PURE__ */ b("div", {
-        ref: i,
-        className: D(Ge, {
-            [$]: a
+}, z = /*#__PURE__*/ o.forwardRef((param, r)=>{
+    let { right: n, children: t, desktopOnly: a, expandRightContent: i } = param;
+    return /* @__PURE__ */ N("div", {
+        ref: r,
+        className: H(Xe, {
+            [G]: a
         }),
         children: [
             t,
             n && /* @__PURE__ */ e("div", {
-                className: r ? Ve : We,
+                className: i ? Ge : Ue,
                 children: n
             })
         ]
     });
-}), j = (param)=>{
-    let { children: n, wide: t } = param;
-    if (!t) return /* @__PURE__ */ e(Q, {
+}), F = (param)=>{
+    let { children: n, wide: t, backgroundColor: a } = param;
+    if (!t) return /* @__PURE__ */ e(ee, {
+        backgroundColor: a,
         children: n
     });
-    const a = {
+    const i = {
         mobile: 16,
         tablet: 24,
         desktop: 24
     };
-    return /* @__PURE__ */ e(z, {
+    return /* @__PURE__ */ e(j, {
         width: "100%",
-        paddingX: t === !0 ? a : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, a, t.paddingX),
+        paddingX: t === !0 ? i : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, i, t.paddingX),
+        background: a,
         children: n
     });
-}, Pn = (param)=>{
-    let { onBack: n, title: t, titleAs: a, right: r, variant: i = "default", topFixed: p = !0, paddingX: c = 0, withBorder: d = !0, wide: l = !1 } = param;
-    const { texts: u, t: f } = w(), m = /* @__PURE__ */ e(G, {
-        right: r,
+}, Vn = (param)=>{
+    let { onBack: n, title: t, titleAs: a, right: i, variant: r = "default", topFixed: c = !0, paddingX: l = 0, withBorder: h = !0, wide: d = !1 } = param;
+    const { texts: m, t: M } = $(), s = /* @__PURE__ */ e(z, {
+        right: i,
         expandRightContent: !0,
-        children: /* @__PURE__ */ b(X, {
+        children: /* @__PURE__ */ N(q, {
             space: 24,
             alignItems: "center",
             children: [
-                n && /* @__PURE__ */ e(Le, {
-                    "aria-label": u.backNavigationBar || f(oe),
+                n && /* @__PURE__ */ e(De, {
+                    "aria-label": m.backNavigationBar || M(ae),
                     onPress: n,
-                    Icon: xe,
+                    Icon: ye,
                     bleedLeft: !0,
                     bleedRight: !0
                 }),
-                /* @__PURE__ */ e(de, {
+                /* @__PURE__ */ e(me, {
                     regular: !0,
                     truncate: !0,
                     as: a,
@@ -216,35 +218,35 @@ const Ln = 120, yn = (param)=>{
                 })
             ]
         })
-    }), s = ()=>{
-        var _l_paddingX;
-        return l !== void 0 ? typeof l != "object" ? 0 : (_l_paddingX = l.paddingX) !== null && _l_paddingX !== void 0 ? _l_paddingX : 0 : c;
-    }, g = ee(i);
-    return /* @__PURE__ */ b(F, {
-        variant: g,
+    }), u = ()=>{
+        var _d_paddingX;
+        return d !== void 0 ? typeof d != "object" ? 0 : (_d_paddingX = d.paddingX) !== null && _d_paddingX !== void 0 ? _d_paddingX : 0 : l;
+    }, p = ne(r);
+    return /* @__PURE__ */ N(W, {
+        variant: p,
         children: [
-            /* @__PURE__ */ e(ae, {
-                topFixed: p,
-                withBorder: d,
-                variant: g,
+            /* @__PURE__ */ e(ie, {
+                topFixed: c,
+                withBorder: h,
+                variant: p,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: p ? /* @__PURE__ */ e(j, {
-                    wide: l,
-                    children: m
-                }) : /* @__PURE__ */ e(z, {
+                children: c ? /* @__PURE__ */ e(F, {
+                    wide: d,
+                    children: s
+                }) : /* @__PURE__ */ e(j, {
                     width: "100%",
-                    paddingX: s(),
-                    children: m
+                    paddingX: u(),
+                    children: s
                 })
             }),
-            p && /* @__PURE__ */ e("div", {
-                className: ne
+            c && /* @__PURE__ */ e("div", {
+                className: te
             })
         ]
     });
-}, U = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
+}, K = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
         onPress: t
     } : n.onPress ? {
         onPress: ()=>{
@@ -252,7 +254,7 @@ const Ln = 120, yn = (param)=>{
         }
     } : _object_spread_props(_object_spread({}, n), {
         onNavigate: ()=>t()
-    }), Hn = {
+    }), $n = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -267,139 +269,140 @@ const Ln = 120, yn = (param)=>{
     closed: {
         open: "opening"
     }
-}, _n = (n, t)=>Hn[n][t] || n, wn = (param)=>{
+}, wn = (n, t)=>$n[n][t] || n, Fn = (param)=>{
     let { section: n, closeSubMenu: t, closeMenu: a } = param;
-    const { texts: r, t: i } = w(), { title: p, menu: c } = n, d = _object_without_properties(n, [
+    const { texts: i, t: r } = $(), { title: c, menu: l } = n, h = _object_without_properties(n, [
         "title",
         "menu"
-    ]), l = (c === null || c === void 0 ? void 0 : c.columns) || [], u = c === null || c === void 0 ? void 0 : c.content, f = d.href !== void 0 || d.onPress !== void 0 || d.to !== void 0;
-    return /* @__PURE__ */ e(Q, {
-        children: /* @__PURE__ */ b(_, {
+    ]), d = (l === null || l === void 0 ? void 0 : l.columns) || [], m = l === null || l === void 0 ? void 0 : l.content, M = h.href !== void 0 || h.onPress !== void 0 || h.to !== void 0;
+    return /* @__PURE__ */ e(ee, {
+        children: /* @__PURE__ */ N(V, {
             space: 32,
             children: [
-                /* @__PURE__ */ b(_, {
+                /* @__PURE__ */ N(V, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ e(Pn, {
-                            title: r.backNavigationBar || i(oe),
+                        /* @__PURE__ */ e(Vn, {
+                            title: i.backNavigationBar || r(ae),
                             onBack: t,
                             topFixed: !1,
                             withBorder: !1
                         }),
-                        /* @__PURE__ */ e(Cn, {
-                            right: f ? /* @__PURE__ */ e(In, _object_spread_props(_object_spread({
+                        /* @__PURE__ */ e(On, {
+                            right: M ? /* @__PURE__ */ e(An, _object_spread_props(_object_spread({
                                 small: !0,
                                 bleedY: !0,
                                 bleedRight: !0,
                                 withChevron: !0
-                            }, U(d, a)), {
-                                children: r.mainNavigationBarSectionSeeAll || i(Nn)
+                            }, K(h, a)), {
+                                children: i.mainNavigationBarSectionSeeAll || r(Cn)
                             })) : void 0,
-                            children: p
+                            children: c
                         })
                     ]
                 }),
-                u ? /* @__PURE__ */ e(z, {
+                m ? /* @__PURE__ */ e(j, {
                     paddingBottom: 16,
-                    children: typeof u == "function" ? u({
+                    children: typeof m == "function" ? m({
                         closeMenu: a
-                    }) : u
-                }) : l.map((m, s)=>/* @__PURE__ */ b(_, {
+                    }) : m
+                }) : d.map((s, u)=>/* @__PURE__ */ N(V, {
                         space: 8,
                         children: [
-                            /* @__PURE__ */ b(kn, {
+                            /* @__PURE__ */ N(En, {
                                 children: [
                                     " ",
-                                    m.title
+                                    s.title
                                 ]
                             }),
-                            /* @__PURE__ */ e(xn, {
-                                children: /* @__PURE__ */ e(fe, {
-                                    children: m.items.map((_param, k)=>{
-                                        var { title: g } = _param, M = _object_without_properties(_param, [
+                            /* @__PURE__ */ e(Dn, {
+                                children: /* @__PURE__ */ e(he, {
+                                    children: s.items.map((_param, b)=>{
+                                        var { title: p } = _param, S = _object_without_properties(_param, [
                                             "title"
                                         ]);
                                         return /* @__PURE__ */ e(ge, _object_spread({
-                                            title: g
-                                        }, U(M, a)), k);
+                                            title: p
+                                        }, K(S, a)), b);
                                     })
                                 })
                             })
                         ]
-                    }, s))
+                    }, u))
             ]
         })
     });
-}, Fn = (param)=>{
-    let { sections: n, extra: t, closeMenu: a, open: r, id: i, disableFocusTrap: p, setDisableFocusTrap: c } = param;
-    const { isDarkMode: d, texts: l, t: u } = w(), [f, m] = o.useState(-1), [s, g] = o.useState(!1), [M, k] = o.useReducer(_n, "closed"), I = o.useRef(null), N = d ? 1 : 0.2, S = te() ? 0 : Qe;
+}, Wn = (param)=>{
+    let { sections: n, extra: t, closeMenu: a, open: i, topSlotHeight: r, id: c, disableFocusTrap: l, setDisableFocusTrap: h } = param;
+    const { isDarkMode: d, texts: m, t: M } = $(), [s, u] = o.useState(-1), [p, S] = o.useState(!1), [b, I] = o.useReducer(wn, "closed"), R = o.useRef(null), C = d ? 1 : 0.2, v = oe() ? 0 : nn;
     o.useEffect(()=>{
-        let h;
-        return s ? (k("open"), h = setTimeout(()=>k("finishOpen"), S)) : (k("close"), h = setTimeout(()=>k("finishClose"), S)), ()=>clearTimeout(h);
+        let g;
+        return p ? (I("open"), g = setTimeout(()=>I("finishOpen"), v)) : (I("close"), g = setTimeout(()=>I("finishClose"), v)), ()=>clearTimeout(g);
     }, [
-        s,
-        S
+        p,
+        v
     ]);
     const B = o.useRef(null);
     return o.useEffect(()=>{
         var _B_current_querySelector, _B_current;
-        M === "opening" && ((_B_current = B.current) === null || _B_current === void 0 ? void 0 : (_B_current_querySelector = _B_current.querySelector(`button[aria-label="${l.backNavigationBar || u(oe)}"]`)) === null || _B_current_querySelector === void 0 ? void 0 : _B_current_querySelector.focus());
+        b === "opening" && ((_B_current = B.current) === null || _B_current === void 0 ? void 0 : (_B_current_querySelector = _B_current.querySelector(`button[aria-label="${m.backNavigationBar || M(ae)}"]`)) === null || _B_current_querySelector === void 0 ? void 0 : _B_current_querySelector.focus());
     }, [
+        b,
         M,
-        u,
-        l
-    ]), /* @__PURE__ */ e(De, {
-        children: /* @__PURE__ */ e(he, {
-            disabled: p,
+        m
+    ]), /* @__PURE__ */ e(He, {
+        children: /* @__PURE__ */ e(ve, {
+            disabled: l,
             group: "burger-menu-lock",
-            children: /* @__PURE__ */ e(Ee, {
-                onEntered: ()=>c(!1),
-                onExiting: ()=>c(!0),
+            children: /* @__PURE__ */ e(Ae, {
+                onEntered: ()=>h(!1),
+                onExiting: ()=>h(!0),
                 onExited: ()=>{
-                    g(!1), m(-1);
+                    S(!1), u(-1);
                 },
-                classNames: en,
-                in: r,
-                nodeRef: I,
-                timeout: S,
+                classNames: tn,
+                in: i,
+                nodeRef: R,
+                timeout: v,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ e("nav", {
-                    className: nn,
+                    className: on,
                     style: {
-                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${N})`
+                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${C})`,
+                        top: kn + r
                     },
-                    id: i,
-                    ref: I,
-                    children: /* @__PURE__ */ b("div", {
-                        className: tn,
+                    id: c,
+                    ref: R,
+                    children: /* @__PURE__ */ N("div", {
+                        className: an,
                         children: [
                             /* @__PURE__ */ e("div", {
-                                className: re,
+                                className: se,
                                 style: {
-                                    transform: `translate(${s ? "-100vw" : "0"})`
+                                    transform: `translate(${p ? "-100vw" : "0"})`
                                 },
-                                children: M !== "opened" && /* @__PURE__ */ b(Q, {
+                                children: b !== "opened" && /* @__PURE__ */ N(ee, {
                                     children: [
-                                        /* @__PURE__ */ e(le, {
-                                            children: /* @__PURE__ */ e(fe, {
-                                                children: n.map((_param, T)=>{
-                                                    var { title: h, menu: O } = _param, E = _object_without_properties(_param, [
+                                        /* @__PURE__ */ e(de, {
+                                            children: /* @__PURE__ */ e(he, {
+                                                children: n.map((_param, f)=>{
+                                                    var { title: g, menu: O } = _param, L = _object_without_properties(_param, [
                                                         "title",
                                                         "menu"
                                                     ]);
                                                     return /* @__PURE__ */ e(ge, _object_spread({
-                                                        title: h
+                                                        title: g
                                                     }, O ? {
                                                         onPress: ()=>{
-                                                            g(!0), m(T);
+                                                            S(!0), u(f);
                                                         }
                                                     } : // Close the menu when one of the rows is pressed
-                                                    U(E, a)), T);
+                                                    K(L, a)), f);
                                                 })
                                             })
                                         }),
-                                        t && /* @__PURE__ */ e(z, {
+                                        t && /* @__PURE__ */ e(j, {
                                             paddingY: 16,
                                             children: t
                                         })
@@ -407,15 +410,15 @@ const Ln = 120, yn = (param)=>{
                                 })
                             }),
                             /* @__PURE__ */ e("div", {
-                                className: re,
+                                className: se,
                                 ref: B,
                                 style: {
-                                    transform: `translate(${s ? "0" : "100vw"})`
+                                    transform: `translate(${p ? "0" : "100vw"})`
                                 },
-                                children: M !== "closed" && f !== -1 && /* @__PURE__ */ e(wn, {
-                                    section: n[f],
+                                children: b !== "closed" && s !== -1 && /* @__PURE__ */ e(Fn, {
+                                    section: n[s],
                                     closeMenu: a,
-                                    closeSubMenu: ()=>g(!1)
+                                    closeSubMenu: ()=>S(!1)
                                 })
                             })
                         ]
@@ -424,7 +427,7 @@ const Ln = 120, yn = (param)=>{
             })
         })
     });
-}, $n = {
+}, Gn = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -441,7 +444,7 @@ const Ln = 120, yn = (param)=>{
     closed: {
         open: "opening"
     }
-}, Vn = (n, t)=>$n[n][t] || n, Ce = /*#__PURE__*/ o.createContext({
+}, Un = (n, t)=>Gn[n][t] || n, ke = /*#__PURE__*/ o.createContext({
     isMenuOpen: !1,
     openedSection: -1,
     menuHeight: "0px",
@@ -453,196 +456,196 @@ const Ln = 120, yn = (param)=>{
     setFocusedItem: ()=>{},
     debouncedOpenSectionMenu: ()=>{},
     cancelDebouncedOpenSectionMenu: ()=>{}
-}), Wn = (param)=>{
+}), Xn = (param)=>{
     let { children: n, sections: t, isLargeMenu: a } = param;
-    const { isTabletOrSmaller: r } = pe(), [i, p] = o.useState(!1), [c, d] = o.useState("0px"), [l, u] = o.useReducer(Vn, "closed"), [f, m] = o.useState(-1), [s, g] = o.useState(), [M, k] = o.useState(!1), [I, N] = o.useState(!1), [S, B] = o.useState(-1), h = o.useCallback((v)=>{
-        var _t_v;
-        m(-1), (t === null || t === void 0 ? void 0 : (_t_v = t[v]) === null || _t_v === void 0 ? void 0 : _t_v.menu) ? (N(!0), B(v)) : (k(!1), N(!1));
+    const { isTabletOrSmaller: i } = fe(), [r, c] = o.useState(!1), [l, h] = o.useState("0px"), [d, m] = o.useReducer(Un, "closed"), [M, s] = o.useState(-1), [u, p] = o.useState(), [S, b] = o.useState(!1), [I, R] = o.useState(!1), [C, v] = o.useState(-1), B = o.useCallback((f)=>{
+        var _t_f;
+        s(-1), (t === null || t === void 0 ? void 0 : (_t_f = t[f]) === null || _t_f === void 0 ? void 0 : _t_f.menu) ? (R(!0), v(f)) : (b(!1), R(!1));
     }, [
         t
-    ]), O = o.useMemo(()=>Rn(h, Ln), [
-        h
-    ]), E = o.useCallback(()=>{
-        k(!1), N(!1), O.cancel(), m(-1);
+    ]), g = o.useMemo(()=>Ln(B, Pn), [
+        B
+    ]), O = o.useCallback(()=>{
+        b(!1), R(!1), g.cancel(), s(-1);
     }, [
-        O
+        g
     ]);
     o.useEffect(()=>{
-        r && E();
+        i && O();
     }, [
-        r,
-        E
+        i,
+        O
     ]), o.useEffect(()=>{
-        !I && !M ? (p(!1), d("0px")) : p(!0);
+        !I && !S ? (c(!1), h("0px")) : c(!0);
     }, [
-        M,
+        S,
         I
     ]), o.useEffect(()=>{
-        const v = te() || !a ? 0 : be;
-        let A;
-        return i ? (u("open"), A = setTimeout(()=>u("finishOpen"), v)) : (u("close"), A = setTimeout(()=>u("finishClose"), v)), ()=>clearTimeout(A);
+        const f = oe() || !a ? 0 : Ne;
+        let T;
+        return r ? (m("open"), T = setTimeout(()=>m("finishOpen"), f)) : (m("close"), T = setTimeout(()=>m("finishClose"), f)), ()=>clearTimeout(T);
     }, [
-        i,
+        r,
         a
     ]), o.useEffect(()=>{
-        l === "closed" && B(-1);
+        d === "closed" && v(-1);
     }, [
-        l
+        d
     ]);
-    const T = o.useCallback((v)=>{
-        Tn(s, v) || g(v);
+    const L = o.useCallback((f)=>{
+        yn(u, f) || p(f);
     }, [
-        s
+        u
     ]);
     return o.useEffect(()=>{
-        const v = (C)=>{
-            if (s) {
-                const x = document.querySelector("[data-navigation-bar-menu-items]"), R = Array.from((x === null || x === void 0 ? void 0 : x.querySelectorAll("a,button")) || []), H = R.findIndex((L)=>L.hasAttribute(`data-navigation-bar-menu-item-${s.column}-${s.index}`)), Y = C ? H - 1 : H + 1;
-                R[(Y + R.length) % R.length].focus();
+        const f = (E)=>{
+            if (u) {
+                const k = document.querySelector("[data-navigation-bar-menu-items]"), A = Array.from((k === null || k === void 0 ? void 0 : k.querySelectorAll("a,button")) || []), x = A.findIndex((w)=>w.hasAttribute(`data-navigation-bar-menu-item-${u.column}-${u.index}`)), D = E ? x - 1 : x + 1;
+                A[(D + A.length) % A.length].focus();
             }
-        }, A = (C)=>{
-            switch(C.key){
-                case Be:
-                    s && (W(C), v());
+        }, T = (E)=>{
+            switch(E.key){
+                case Ce:
+                    u && (X(E), f());
                     break;
-                case Ne:
-                    s && (W(C), v(!0));
+                case Be:
+                    u && (X(E), f(!0));
                     break;
-                case An:
-                    E();
+                case xn:
+                    O();
                     break;
             }
         };
-        return document.addEventListener("keydown", A, !1), ()=>{
-            document.removeEventListener("keydown", A, !1);
+        return document.addEventListener("keydown", T, !1), ()=>{
+            document.removeEventListener("keydown", T, !1);
         };
     }, [
-        E,
-        s
+        O,
+        u
     ]), o.useEffect(()=>{
-        g(void 0);
+        p(void 0);
     }, [
-        S
-    ]), /* @__PURE__ */ e(Ce.Provider, {
+        C
+    ]), /* @__PURE__ */ e(ke.Provider, {
         value: {
-            isMenuOpen: i,
-            openedSection: S,
-            menuHeight: c,
-            menuStatus: l,
-            openSectionMenu: h,
-            debouncedOpenSectionMenu: (v)=>{
-                m(v), O(v);
+            isMenuOpen: r,
+            openedSection: C,
+            menuHeight: l,
+            menuStatus: d,
+            openSectionMenu: B,
+            debouncedOpenSectionMenu: (f)=>{
+                s(f), g(f);
             },
-            cancelDebouncedOpenSectionMenu: (v)=>{
-                v === f && (O.cancel(), m(-1));
+            cancelDebouncedOpenSectionMenu: (f)=>{
+                f === M && (g.cancel(), s(-1));
             },
-            closeMenu: E,
-            setMenuHeight: d,
-            setIsMenuHovered: k,
-            setFocusedItem: T
+            closeMenu: O,
+            setMenuHeight: h,
+            setIsMenuHovered: b,
+            setFocusedItem: L
         },
         children: n
     });
-}, P = ()=>o.useContext(Ce), ke = (param)=>{
+}, _ = ()=>o.useContext(ke), Ie = (param)=>{
     let { column: n, columnIndex: t } = param;
-    const { setFocusedItem: a, closeMenu: r } = P();
-    return /* @__PURE__ */ b(_, {
+    const { setFocusedItem: a, closeMenu: i } = _();
+    return /* @__PURE__ */ N(V, {
         space: 24,
         children: [
-            /* @__PURE__ */ e(me, {
+            /* @__PURE__ */ e(pe, {
                 medium: !0,
-                color: y.colors.textSecondary,
+                color: P.colors.textSecondary,
                 transform: "uppercase",
                 children: n.title
             }),
-            /* @__PURE__ */ e(_, {
+            /* @__PURE__ */ e(V, {
                 space: 16,
                 role: "list",
-                children: n.items.map((_param, c)=>{
-                    var { title: i } = _param, p = _object_without_properties(_param, [
+                children: n.items.map((_param, l)=>{
+                    var { title: r } = _param, c = _object_without_properties(_param, [
                         "title"
                     ]);
                     return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
                     /* @__PURE__ */ e("div", {
                         onFocus: ()=>a({
                                 column: t,
-                                index: c
+                                index: l
                             }),
                         onBlur: ()=>a(void 0),
                         role: "listitem",
-                        children: /* @__PURE__ */ e(Bn, _object_spread_props(_object_spread({
+                        children: /* @__PURE__ */ e(In, _object_spread_props(_object_spread({
                             underline: "on hover",
-                            className: vn,
+                            className: Sn,
                             dataAttributes: {
-                                [`navigation-bar-menu-item-${t}-${c}`]: "true"
+                                [`navigation-bar-menu-item-${t}-${l}`]: "true"
                             }
-                        }, U(p, r)), {
-                            children: i
+                        }, K(c, i)), {
+                            children: r
                         }))
-                    }, c));
+                    }, l));
                 })
             })
         ]
     });
-}, Gn = (param)=>{
-    let { section: n, index: t, isLargeNavigationBar: a, wide: r } = param;
+}, zn = (param)=>{
+    let { section: n, index: t, isLargeNavigationBar: a, topSlotHeight: i, wide: r } = param;
     var _n_menu, _n_menu1;
-    const i = o.useRef(null), [p, c] = o.useState(!1), d = te() ? 0 : be, l = a ? K : q, u = 40, { menuStatus: f, isMenuOpen: m, openedSection: s, closeMenu: g, setIsMenuHovered: M, setMenuHeight: k } = P();
+    const c = o.useRef(null), [l, h] = o.useState(!1), d = oe() ? 0 : Ne, m = (a ? Y : Z) + i, M = 40, { menuStatus: s, isMenuOpen: u, openedSection: p, closeMenu: S, setIsMenuHovered: b, setMenuHeight: I } = _();
     o.useEffect(()=>{
-        if (i.current && m && (i.current.scrollTop = 0), c(!1), m) {
-            const h = setTimeout(()=>c(!0), d);
-            return ()=>clearTimeout(h);
+        if (c.current && u && (c.current.scrollTop = 0), h(!1), u) {
+            const g = setTimeout(()=>h(!0), d);
+            return ()=>clearTimeout(g);
         }
     }, [
-        m,
-        s,
+        u,
+        p,
         d
     ]);
-    const [I, N] = o.useState(!0);
+    const [R, C] = o.useState(!0);
     o.useEffect(()=>{
-        if (s === t) if (f === "opening") {
-            N(!1);
-            const h = requestAnimationFrame(()=>N(!0));
-            return ()=>cancelAnimationFrame(h);
-        } else N(!0);
+        if (p === t) if (s === "opening") {
+            C(!1);
+            const g = requestAnimationFrame(()=>C(!0));
+            return ()=>cancelAnimationFrame(g);
+        } else C(!0);
     }, [
-        f,
         s,
+        p,
         t
     ]), o.useEffect(()=>{
-        f === "closing" && c(!1);
+        s === "closing" && h(!1);
     }, [
-        f
+        s
     ]);
-    const S = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], B = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content;
+    const v = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], B = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content;
     return /* @__PURE__ */ e("div", {
-        className: $,
-        children: /* @__PURE__ */ e(F, {
+        className: G,
+        children: /* @__PURE__ */ e(W, {
             variant: "default",
-            children: s === t && /* @__PURE__ */ e(le, {
+            children: p === t && /* @__PURE__ */ e(de, {
                 children: /* @__PURE__ */ e("div", {
-                    className: pn,
-                    onMouseEnter: ()=>M(!0),
-                    onMouseLeave: ()=>M(!1),
+                    className: hn,
+                    onMouseEnter: ()=>b(!0),
+                    onMouseLeave: ()=>b(!1),
                     style: {
                         // disable pointer events when menu is closing
-                        pointerEvents: f === "closed" || f === "closing" ? "none" : void 0,
-                        top: l,
-                        maxHeight: `calc(100vh - ${l}px - ${u}px)`,
-                        overflowY: p ? "auto" : "hidden"
+                        pointerEvents: s === "closed" || s === "closing" ? "none" : void 0,
+                        top: m,
+                        maxHeight: `calc(100vh - ${m}px - ${M}px)`,
+                        overflowY: l ? "auto" : "hidden"
                     },
-                    children: /* @__PURE__ */ e(j, {
+                    children: /* @__PURE__ */ e(F, {
                         wide: r,
                         children: /* @__PURE__ */ e("div", {
-                            className: D(fn, {
-                                [gn]: I
+                            className: H(gn, {
+                                [vn]: R
                             }),
-                            ref: (h)=>{
-                                h && m && k(`min(${h.scrollHeight}px, calc(100vh - ${l}px - ${u}px))`);
+                            ref: (g)=>{
+                                g && u && I(`min(${g.scrollHeight}px, calc(100vh - ${m}px - ${M}px))`);
                             },
                             children: B ? typeof B == "function" ? B({
-                                closeMenu: g
-                            }) : B : /* @__PURE__ */ e(On, {
+                                closeMenu: S
+                            }) : B : /* @__PURE__ */ e(Rn, {
                                 rows: 1,
                                 columns: 12,
                                 gap: [
@@ -652,10 +655,10 @@ const Ln = 120, yn = (param)=>{
                                 dataAttributes: {
                                     "navigation-bar-menu-items": "true"
                                 },
-                                children: S.map((h, O)=>/* @__PURE__ */ e(En, {
+                                children: v.map((g, O)=>/* @__PURE__ */ e(Tn, {
                                         columnSpan: 2,
-                                        children: /* @__PURE__ */ e(ke, {
-                                            column: h,
+                                        children: /* @__PURE__ */ e(Ie, {
+                                            column: g,
                                             columnIndex: O
                                         })
                                     }, O))
@@ -666,359 +669,381 @@ const Ln = 120, yn = (param)=>{
             })
         })
     });
-}, Un = (param)=>{
-    let { isLargeNavigationBar: n } = param;
-    const t = n ? K : q, { menuHeight: a } = P();
+}, Kn = (param)=>{
+    let { isLargeNavigationBar: n, topSlotHeight: t } = param;
+    const a = (n ? Y : Z) + t, { menuHeight: i } = _();
     return /* @__PURE__ */ e("div", {
-        className: $,
+        className: G,
         children: /* @__PURE__ */ e("div", {
-            className: Xe,
+            className: Ke,
             style: {
-                top: t
+                top: a
             },
             children: /* @__PURE__ */ e("div", {
-                className: ze,
+                className: qe,
                 style: {
-                    height: a
+                    height: i
                 }
             })
         })
     });
-}, Xn = (param)=>{
-    let { section: n, isLargeNavigationBar: t, leftPosition: a, index: r } = param;
+}, qn = (param)=>{
+    let { section: n, isLargeNavigationBar: t, topSlotHeight: a, leftPosition: i, index: r } = param;
     var _n_menu, _n_menu1;
-    const i = t ? K : q, p = 40, c = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], d = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content, { openedSection: l, menuStatus: u, setIsMenuHovered: f, closeMenu: m } = P();
+    const c = (t ? Y : Z) + a, l = 40, h = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], d = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content, { openedSection: m, menuStatus: M, setIsMenuHovered: s, closeMenu: u } = _();
     return /* @__PURE__ */ e("div", {
-        className: $,
-        children: r === l && /* @__PURE__ */ e(F, {
+        className: G,
+        children: r === m && /* @__PURE__ */ e(W, {
             variant: "default",
             children: /* @__PURE__ */ e("div", {
-                className: hn,
-                onMouseEnter: ()=>f(!0),
-                onMouseLeave: ()=>f(!1),
+                className: Mn,
+                onMouseEnter: ()=>s(!0),
+                onMouseLeave: ()=>s(!1),
                 style: {
                     // disable pointer events when menu is closing
-                    pointerEvents: u === "closed" || u === "closing" ? "none" : void 0,
-                    top: i,
-                    left: a,
-                    maxHeight: `calc(100vh - ${i}px - ${p}px)`
+                    pointerEvents: M === "closed" || M === "closing" ? "none" : void 0,
+                    top: c,
+                    left: i,
+                    maxHeight: `calc(100vh - ${c}px - ${l}px)`
                 },
                 children: d ? typeof d == "function" ? d({
-                    closeMenu: m
-                }) : d : /* @__PURE__ */ e(_, {
+                    closeMenu: u
+                }) : d : /* @__PURE__ */ e(V, {
                     space: 40,
                     dataAttributes: {
                         "navigation-bar-menu-items": "true"
                     },
-                    children: c.map((s, g)=>/* @__PURE__ */ e(ke, {
-                            column: s,
-                            columnIndex: g
-                        }, g))
+                    children: h.map((p, S)=>/* @__PURE__ */ e(Ie, {
+                            column: p,
+                            columnIndex: S
+                        }, S))
                 })
             })
         })
     });
-}, zn = (param)=>{
-    let { section: n, index: t, selectedIndex: a, isFirstSection: r, isLastSection: i, navigationBarRef: p, variant: c, isLargeNavigationBar: d, desktopLargeMenu: l, wide: u } = param;
-    const { texts: f, t: m } = w(), { title: s, menu: g } = n, M = _object_without_properties(n, [
+}, jn = (param)=>{
+    let { section: n, index: t, selectedIndex: a, isFirstSection: i, isLastSection: r, navigationBarRef: c, variant: l, isLargeNavigationBar: h, topSlotHeight: d, desktopLargeMenu: m, wide: M } = param;
+    const { texts: s, t: u } = $(), { title: p, menu: S } = n, b = _object_without_properties(n, [
         "title",
         "menu"
-    ]), k = o.useRef(null), [I, N] = o.useState(0), [S, B] = o.useState(!1), { isMenuOpen: h, openedSection: O, openSectionMenu: E, debouncedOpenSectionMenu: T, cancelDebouncedOpenSectionMenu: v, closeMenu: A } = P(), C = M.href !== void 0 || M.onPress !== void 0 || M.to !== void 0, x = o.useCallback((L)=>{
-        l || N((()=>{
-            var _k_current, _p_current;
-            const { left: ie, right: Ie } = ((_k_current = k.current) === null || _k_current === void 0 ? void 0 : _k_current.getBoundingClientRect()) || {
+    ]), I = o.useRef(null), [R, C] = o.useState(0), [v, B] = o.useState(!1), { isMenuOpen: g, openedSection: O, openSectionMenu: L, debouncedOpenSectionMenu: f, cancelDebouncedOpenSectionMenu: T, closeMenu: E } = _(), k = b.href !== void 0 || b.onPress !== void 0 || b.to !== void 0, A = o.useCallback((y)=>{
+        m || C((()=>{
+            var _I_current, _c_current;
+            const { left: re, right: Oe } = ((_I_current = I.current) === null || _I_current === void 0 ? void 0 : _I_current.getBoundingClientRect()) || {
                 left: 0,
                 right: 0
-            }, Oe = (((_p_current = p.current) === null || _p_current === void 0 ? void 0 : _p_current.getBoundingClientRect().right) || 0) - se;
-            return ie <= Oe ? ie : Ie - se;
-        })()), L ? T(t) : E(t);
+            }, Ee = (((_c_current = c.current) === null || _c_current === void 0 ? void 0 : _c_current.getBoundingClientRect().right) || 0) - ce;
+            return re <= Ee ? re : Oe - ce;
+        })()), y ? f(t) : L(t);
     }, [
-        l,
+        m,
         t,
-        E,
-        T,
-        p
+        L,
+        f,
+        c
     ]);
     o.useEffect(()=>{
-        const L = (V)=>{
-            switch(V.key){
+        const y = (U)=>{
+            switch(U.key){
                 // If arrow is focused and DOWN key is pressed, open the menu if it was closed
-                case Be:
-                    S && (W(V), x());
+                case Ce:
+                    v && (X(U), A());
                     break;
                 // If arrow is focused and UP key is pressed, close the menu if it was opened
-                case Ne:
-                    S && (W(V), A());
+                case Be:
+                    v && (X(U), E());
                     break;
             }
         };
-        return document.addEventListener("keydown", L, !1), ()=>{
-            document.removeEventListener("keydown", L, !1);
+        return document.addEventListener("keydown", y, !1), ()=>{
+            document.removeEventListener("keydown", y, !1);
         };
     }, [
         t,
-        S,
-        x,
+        v,
         A,
-        g,
-        C
+        E,
+        S,
+        k
     ]);
-    const R = h && O === t, H = o.useCallback(()=>{
-        R ? A() : x();
+    const x = g && O === t, D = o.useCallback(()=>{
+        x ? E() : A();
     }, [
-        R,
         x,
-        A
-    ]), Y = o.useCallback((L)=>C ? L : {
-            onPress: H
+        A,
+        E
+    ]), w = o.useCallback((y)=>k ? y : {
+            onPress: D
         }, [
-        C,
-        H
+        k,
+        D
     ]);
-    return /* @__PURE__ */ b("div", {
-        className: an,
+    return /* @__PURE__ */ N("div", {
+        className: sn,
         children: [
             /* @__PURE__ */ e("div", {
-                ref: k,
-                className: D(cn, {
-                    [ln]: r,
-                    [un]: i
+                ref: I,
+                className: H(ln, {
+                    [mn]: i,
+                    [dn]: r
                 }),
-                onMouseEnter: ()=>x(!0),
-                onMouseLeave: ()=>v(t),
+                onMouseEnter: ()=>A(!0),
+                onMouseLeave: ()=>T(t),
                 onFocus: ()=>{
-                    g && !C && B(!0);
+                    S && !k && B(!0);
                 },
                 onBlur: ()=>{
-                    g && !C && B(!1);
+                    S && !k && B(!1);
                 },
-                children: /* @__PURE__ */ e(J, _object_spread_props(_object_spread({}, Y(M)), {
-                    "aria-label": C ? void 0 : `${n.title}, ${f.mainNavigationBarOpenSectionMenu || m(ce)}`,
-                    "aria-haspopup": !C,
-                    "aria-expanded": C ? void 0 : R,
-                    className: D(rn, {
-                        [sn[c === "brand" ? "brand" : "default"]]: t === a
-                    }, Se[c === "brand" ? "brand" : "default"]),
-                    children: /* @__PURE__ */ e(de, {
+                children: /* @__PURE__ */ e(Q, _object_spread_props(_object_spread({}, w(b)), {
+                    "aria-label": k ? void 0 : `${n.title}, ${s.mainNavigationBarOpenSectionMenu || u(ue)}`,
+                    "aria-haspopup": !k,
+                    "aria-expanded": k ? void 0 : x,
+                    className: H(cn, {
+                        [un[l === "brand" ? "brand" : "default"]]: t === a
+                    }, be[l === "brand" ? "brand" : "default"]),
+                    children: /* @__PURE__ */ e(me, {
                         regular: !0,
                         color: "inherit",
-                        children: s
+                        children: p
                     })
                 }))
             }),
-            g && /* @__PURE__ */ b(ue, {
+            S && /* @__PURE__ */ N(le, {
                 children: [
-                    C && /* @__PURE__ */ e("div", {
-                        className: dn,
+                    k && /* @__PURE__ */ e("div", {
+                        className: pn,
                         onFocus: ()=>B(!0),
                         onBlur: ()=>B(!1),
-                        children: /* @__PURE__ */ e(J, {
-                            className: mn,
-                            "aria-label": `${n.title}, ${f.mainNavigationBarOpenSectionMenu || m(ce)}`,
+                        children: /* @__PURE__ */ e(Q, {
+                            className: fn,
+                            "aria-label": `${n.title}, ${s.mainNavigationBarOpenSectionMenu || u(ue)}`,
                             "aria-haspopup": !0,
-                            "aria-expanded": R,
+                            "aria-expanded": x,
                             onPress: ()=>{
-                                S && H();
+                                v && D();
                             },
                             style: {
-                                pointerEvents: S ? "auto" : "none",
-                                opacity: S ? 1 : 0,
+                                pointerEvents: v ? "auto" : "none",
+                                opacity: v ? 1 : 0,
                                 // We are using the same chevron as in ButtonLink, and that svg has
                                 // some extra space on the left that we want to ignore in this case
                                 marginTop: -2
                             },
-                            children: /* @__PURE__ */ e(yn, {
+                            children: /* @__PURE__ */ e(Hn, {
                                 size: 8,
                                 style: {
-                                    transform: `rotate(${R ? -90 : 90}deg)`
+                                    transform: `rotate(${x ? -90 : 90}deg)`
                                 }
                             })
                         })
                     }),
-                    l ? /* @__PURE__ */ e(Gn, {
+                    m ? /* @__PURE__ */ e(zn, {
                         section: n,
-                        isLargeNavigationBar: d,
+                        isLargeNavigationBar: h,
+                        topSlotHeight: d,
                         index: t,
-                        wide: u
-                    }) : /* @__PURE__ */ e(Xn, {
+                        wide: M
+                    }) : /* @__PURE__ */ e(qn, {
                         section: n,
-                        isLargeNavigationBar: d,
-                        leftPosition: I,
+                        isLargeNavigationBar: h,
+                        topSlotHeight: d,
+                        leftPosition: R,
                         index: t
                     })
                 ]
             })
         ]
     });
-}, Kn = (param)=>{
-    let { sections: n, selectedIndex: t, navigationBarRef: a, variant: r, isLargeNavigationBar: i, hasRightContent: p, desktopLargeMenu: c, wide: d } = param;
-    const { openSectionMenu: l, openedSection: u, closeMenu: f } = P();
+}, Yn = (param)=>{
+    let { sections: n, selectedIndex: t, navigationBarRef: a, variant: i, isLargeNavigationBar: r, topSlotHeight: c, hasRightContent: l, desktopLargeMenu: h, wide: d } = param;
+    const { openSectionMenu: m, openedSection: M, closeMenu: s } = _();
     return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e("nav", {
-        className: D($, on),
+        className: H(G, rn),
         style: {
-            paddingLeft: i ? 0 : 48,
-            paddingRight: !i && p ? 136 : 0
+            paddingLeft: r ? 0 : 48,
+            paddingRight: !r && l ? 136 : 0
         },
         onMouseEnter: ()=>{
-            u !== -1 && l(u);
+            M !== -1 && m(M);
         },
-        onMouseLeave: f,
-        children: /* @__PURE__ */ e(X, {
+        onMouseLeave: s,
+        children: /* @__PURE__ */ e(q, {
             space: 32,
-            children: n.map((m, s)=>/* @__PURE__ */ e(zn, {
-                    index: s,
+            children: n.map((u, p)=>/* @__PURE__ */ e(jn, {
+                    index: p,
                     selectedIndex: t,
                     navigationBarRef: a,
-                    isFirstSection: s === 0,
-                    isLastSection: s === n.length - 1,
-                    variant: r,
-                    section: m,
-                    isLargeNavigationBar: i,
-                    desktopLargeMenu: c,
+                    isFirstSection: p === 0,
+                    isLastSection: p === n.length - 1,
+                    variant: i,
+                    section: u,
+                    isLargeNavigationBar: r,
+                    topSlotHeight: c,
+                    desktopLargeMenu: h,
                     wide: d
-                }, s))
+                }, p))
         })
     }));
-}, qn = (param)=>{
-    let { children: n, isLargeNavigationBar: t, desktopLargeMenu: a } = param;
-    const { menuHeight: r } = P(), i = t ? K : q;
+}, Zn = (param)=>{
+    let { children: n, isLargeNavigationBar: t, topSlotHeight: a, desktopLargeMenu: i } = param;
+    const { menuHeight: r } = _(), c = (t ? Y : Z) + a;
     return /* @__PURE__ */ e("div", {
-        className: Ke,
-        style: a ? {
-            clipPath: `rect(0 100% calc(${i}px + ${r}) 0)`,
-            WebkitClipPath: `rect(0 100% calc(${i}px + ${r}) 0)`
+        className: je,
+        style: i ? {
+            clipPath: `rect(0 100% calc(${c}px + ${r}) 0)`,
+            WebkitClipPath: `rect(0 100% calc(${c}px + ${r}) 0)`
         } : void 0,
         children: n
     });
-}, Rt = (param)=>{
-    let { sections: n = [], selectedIndex: t, right: a, variant: r = "default", topFixed: i = !0, withBorder: p = !0, burgerMenuExtra: c, logo: d, large: l = !1, desktopLargeMenu: u = !1, wide: f = !1 } = param;
-    const { texts: m, t: s } = w(), g = o.useId(), { isTabletOrSmaller: M } = pe(), k = d || /* @__PURE__ */ e(ve, {
+}, Lt = (param)=>{
+    let { sections: n = [], selectedIndex: t, right: a, topSlot: i, topSlotBackgroundColor: r, variant: c = "default", topFixed: l = !0, withBorder: h = !0, burgerMenuExtra: d, logo: m, large: M = !1, desktopLargeMenu: s = !1, wide: u = !1 } = param;
+    const { texts: p, t: S } = $(), b = o.useId(), { isTabletOrSmaller: I } = fe(), R = m || /* @__PURE__ */ e(Me, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), I = l && n.length > 0, [N, S] = o.useState(!1), [B, h] = o.useState(!0), O = o.useRef(null), E = He(), T = ee(r), v = /* @__PURE__ */ e(Kn, {
+    }), C = M && n.length > 0, [v, B] = o.useState(!1), [g, O] = o.useState(!0), L = o.useRef(null), { height: f, ref: T } = Te(), E = Ve(), k = ne(c), A = /* @__PURE__ */ e(Yn, {
         sections: n,
         selectedIndex: t,
-        navigationBarRef: O,
-        variant: T,
+        navigationBarRef: L,
+        variant: k,
         hasRightContent: !!a,
-        isLargeNavigationBar: I,
-        desktopLargeMenu: u,
-        wide: f
-    }), A = ()=>{
-        S(!0), E({
+        isLargeNavigationBar: C,
+        topSlotHeight: f,
+        desktopLargeMenu: s,
+        wide: u
+    }), x = ()=>{
+        B(!0), E({
             isModalOpen: !0
         });
-    }, C = ()=>{
-        S(!1), E({
+    }, D = ()=>{
+        B(!1), E({
             isModalOpen: !1
         });
-    }, x = n.length > 1, R = /* @__PURE__ */ b(F, {
-        variant: T,
+    }, w = n.length > 1, y = /* @__PURE__ */ N(W, {
+        variant: k,
         children: [
-            /* @__PURE__ */ b(ae, {
-                topFixed: i,
-                withBorder: p,
-                isBurgerMenuOpen: N,
-                variant: T,
+            /* @__PURE__ */ N(ie, {
+                topFixed: l,
+                withBorder: h,
+                isBurgerMenuOpen: v,
+                variant: k,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
                 children: [
-                    u && /* @__PURE__ */ e(Un, {
-                        isLargeNavigationBar: I
+                    s && /* @__PURE__ */ e(Kn, {
+                        isLargeNavigationBar: C,
+                        topSlotHeight: f
                     }),
-                    /* @__PURE__ */ e(qn, {
-                        isLargeNavigationBar: I,
-                        desktopLargeMenu: u,
-                        children: /* @__PURE__ */ b(j, {
-                            wide: f,
-                            children: [
-                                /* @__PURE__ */ b(G, {
-                                    ref: O,
-                                    right: a,
-                                    expandRightContent: I,
-                                    children: [
-                                        x && /* @__PURE__ */ e(Ae, {
-                                            className: _e,
-                                            "aria-live": "polite",
-                                            "aria-label": N ? m.closeNavigationMenu || s(Sn) : m.openNavigationMenu || s(bn),
-                                            "aria-expanded": N,
-                                            "aria-controls": g,
-                                            onPress: N ? C : A,
-                                            children: /* @__PURE__ */ e(Dn, {
-                                                isOpen: N
-                                            })
-                                        }),
-                                        /* @__PURE__ */ e("div", {
-                                            className: we,
-                                            children: k
-                                        }),
-                                        !I && v
-                                    ]
-                                }),
-                                I && /* @__PURE__ */ e(G, {
-                                    desktopOnly: !0,
-                                    children: v
+                    /* @__PURE__ */ N(Zn, {
+                        isLargeNavigationBar: C,
+                        topSlotHeight: f,
+                        desktopLargeMenu: s,
+                        children: [
+                            i && /* @__PURE__ */ e(F, {
+                                wide: u,
+                                backgroundColor: r,
+                                children: /* @__PURE__ */ e("div", {
+                                    ref: T,
+                                    children: i
                                 })
-                            ]
-                        })
+                            }),
+                            /* @__PURE__ */ N(F, {
+                                wide: u,
+                                children: [
+                                    /* @__PURE__ */ N(z, {
+                                        ref: L,
+                                        right: a,
+                                        expandRightContent: C,
+                                        children: [
+                                            w && /* @__PURE__ */ e(Re, {
+                                                className: $e,
+                                                "aria-live": "polite",
+                                                "aria-label": v ? p.closeNavigationMenu || S(Nn) : p.openNavigationMenu || S(Bn),
+                                                "aria-expanded": v,
+                                                "aria-controls": b,
+                                                onPress: v ? D : x,
+                                                children: /* @__PURE__ */ e(_n, {
+                                                    isOpen: v
+                                                })
+                                            }),
+                                            /* @__PURE__ */ e("div", {
+                                                className: we,
+                                                children: R
+                                            }),
+                                            !C && A
+                                        ]
+                                    }),
+                                    C && /* @__PURE__ */ e(z, {
+                                        desktopOnly: !0,
+                                        children: A
+                                    })
+                                ]
+                            })
+                        ]
                     })
                 ]
             }),
-            i && /* @__PURE__ */ e("div", {
-                className: I ? Fe : ne
+            l && f > 0 && /* @__PURE__ */ e("div", {
+                style: {
+                    height: f
+                }
+            }),
+            l && /* @__PURE__ */ e("div", {
+                className: C ? Fe : te
             })
         ]
     });
-    return /* @__PURE__ */ e(Wn, {
+    return /* @__PURE__ */ e(Xn, {
         sections: n,
-        isLargeMenu: u,
-        children: M ? /* @__PURE__ */ b(ue, {
+        isLargeMenu: s,
+        children: I ? /* @__PURE__ */ N(le, {
             children: [
-                /* @__PURE__ */ e(he, {
-                    disabled: B,
+                /* @__PURE__ */ e(ve, {
+                    disabled: g,
                     group: "burger-menu-lock",
-                    children: R
+                    children: y
                 }),
-                /* @__PURE__ */ e(Fn, {
-                    open: N,
-                    id: g,
+                /* @__PURE__ */ e(Wn, {
+                    open: v,
+                    id: b,
                     sections: n,
-                    extra: c,
-                    closeMenu: C,
-                    disableFocusTrap: B,
-                    setDisableFocusTrap: h
+                    extra: d,
+                    closeMenu: D,
+                    topSlotHeight: f,
+                    disableFocusTrap: g,
+                    setDisableFocusTrap: O
                 })
             ]
-        }) : R
+        }) : y
     });
-}, Tt = (param)=>{
-    let { logo: n, right: t, variant: a = "default", topFixed: r = !0, withBorder: i = !0, wide: p = !1 } = param;
-    n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(ve, {
+}, yt = (param)=>{
+    let { logo: n, right: t, variant: a = "default", topFixed: i = !0, withBorder: r = !0, wide: c = !1 } = param;
+    n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(Me, {
         size: {
             mobile: 40,
             desktop: 48
         }
     });
-    const c = ee(a);
-    return /* @__PURE__ */ b(F, {
-        variant: c,
+    const l = ne(a);
+    return /* @__PURE__ */ N(W, {
+        variant: l,
         children: [
-            /* @__PURE__ */ e(ae, {
-                topFixed: r,
-                withBorder: i,
-                variant: c,
+            /* @__PURE__ */ e(ie, {
+                topFixed: i,
+                withBorder: r,
+                variant: l,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ e(j, {
-                    wide: p,
-                    children: /* @__PURE__ */ e(Pe, {
+                children: /* @__PURE__ */ e(F, {
+                    wide: c,
+                    children: /* @__PURE__ */ e(_e, {
                         template: "10",
-                        children: /* @__PURE__ */ e(G, {
+                        children: /* @__PURE__ */ e(z, {
                             right: t,
                             expandRightContent: !0,
                             children: n
@@ -1026,41 +1051,41 @@ const Ln = 120, yn = (param)=>{
                     })
                 })
             }),
-            r && /* @__PURE__ */ e("div", {
-                className: ne
+            i && /* @__PURE__ */ e("div", {
+                className: te
             })
         ]
     });
-}, xt = (param)=>{
+}, Dt = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ e("div", {
-        className: Me,
+        className: Se,
         "data-component-name": "NavigationBarActionGroup",
-        children: /* @__PURE__ */ e(X, {
+        children: /* @__PURE__ */ e(q, {
             space: 24,
             alignItems: "center",
             children: n
         })
     });
-}, Lt = (_param)=>{
+}, Pt = (_param)=>{
     var { children: n } = _param, t = _object_without_properties(_param, [
         "children"
     ]);
-    const a = ye();
-    return /* @__PURE__ */ e(J, _object_spread_props(_object_spread({}, t), {
-        className: D($e, Me, Se[a]),
+    const a = Pe();
+    return /* @__PURE__ */ e(Q, _object_spread_props(_object_spread({}, t), {
+        className: H(We, Se, be[a]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },
-        children: /* @__PURE__ */ e(X, {
+        children: /* @__PURE__ */ e(q, {
             space: 16,
             alignItems: "center",
-            children: o.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(me, {
+            children: o.Children.map(n, (i)=>typeof i == "string" ? /* @__PURE__ */ e(pe, {
                     regular: !0,
                     color: "inherit",
-                    children: r
-                }) : r)
+                    children: i
+                }) : i)
         })
     }));
 };
-export { Tt as FunnelNavigationBar, Rt as MainNavigationBar, Pn as NavigationBar, Lt as NavigationBarAction, xt as NavigationBarActionGroup, P as useMainNavigationBarDesktopMenuState };
+export { yt as FunnelNavigationBar, Lt as MainNavigationBar, Vn as NavigationBar, Pt as NavigationBarAction, Dt as NavigationBarActionGroup, _ as useMainNavigationBarDesktopMenuState };