@telefonica/mistica 16.33.0 → 16.34.0

package/dist/navigation-bar.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return Rt;
+        return Tt;
     },
     MainNavigationBar: function() {
-        return At;
+        return xt;
     },
     NavigationBar: function() {
-        return Dn;
+        return Hn;
     },
     NavigationBarAction: function() {
-        return Tt;
+        return yt;
     },
     NavigationBarActionGroup: function() {
-        return xt;
+        return Lt;
     },
     useMainNavigationBarDesktopMenuState: function() {
         return D;
@@ -189,7 +189,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Tn = 120, Ln = (param)=>{
+const yn = 120, Dn = (param)=>{
     let { size: n = 24, color: t = _skincontractcssmistica.vars.colors.neutralHigh, style: i, className: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: n,
@@ -202,7 +202,7 @@ const Tn = 120, Ln = (param)=>{
             fill: t
         })
     });
-}, yn = (param)=>{
+}, Pn = (param)=>{
     let { isOpen: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
@@ -219,28 +219,28 @@ const Tn = 120, Ln = (param)=>{
             })
         ]
     });
-}, ee = (param)=>{
-    let { children: n, topFixed: t, withBorder: i, isBurgerMenuOpen: r, variant: s = "default", dataAttributes: d } = param;
-    const { isDarkMode: c } = (0, _hooks.useTheme)(), u = ()=>s === "inverse" && !c || !i ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, p = {
+}, oe = (param)=>{
+    let { children: n, topFixed: t, withBorder: i, isBurgerMenuOpen: r, variant: a = "default", dataAttributes: p } = param;
+    const { isDarkMode: c } = (0, _hooks.useTheme)(), d = ()=>a === "inverse" && !c || !i ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, l = {
         default: _skincontractcssmistica.vars.colors.background,
         inverse: _skincontractcssmistica.vars.colors.navigationBarBackground,
         alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
         media: _skincontractcssmistica.vars.colors.navigationBarBackground
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(u(), {
+        className: (0, _classnames.default)(d(), {
             [_navigationbarcssmistica.topFixed]: t
         }),
         style: {
-            background: p[s]
+            background: l[a]
         }
-    }, (0, _dom.getPrefixedDataAttributes)(d)), {
+    }, (0, _dom.getPrefixedDataAttributes)(p)), {
         children: n
     }));
-}, U = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+}, G = /*#__PURE__*/ _react.forwardRef((param, a)=>{
     let { right: n, children: t, desktopOnly: i, expandRightContent: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        ref: s,
+        ref: a,
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
             [_navigationbarcssmistica.desktopOnly]: i
         }),
@@ -252,9 +252,24 @@ const Tn = 120, Ln = (param)=>{
             })
         ]
     });
-}), Dn = (param)=>{
-    let { onBack: n, title: t, titleAs: i, right: r, variant: s = "default", topFixed: d = !0, paddingX: c = 0, withBorder: u = !0 } = param;
-    const { texts: p, t: a } = (0, _hooks.useTheme)(), f = /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+}), z = (param)=>{
+    let { children: n, wide: t } = param;
+    if (!t) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+        children: n
+    });
+    const i = {
+        mobile: 16,
+        tablet: 24,
+        desktop: 24
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        width: "100%",
+        paddingX: t === !0 ? i : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, i, t.paddingX),
+        children: n
+    });
+}, Hn = (param)=>{
+    let { onBack: n, title: t, titleAs: i, right: r, variant: a = "default", topFixed: p = !0, paddingX: c = 0, withBorder: d = !0, wide: l = !1 } = param;
+    const { texts: u, t: f } = (0, _hooks.useTheme)(), m = /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
         right: r,
         expandRightContent: !0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -262,7 +277,7 @@ const Tn = 120, Ln = (param)=>{
             alignItems: "center",
             children: [
                 n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                    "aria-label": p.backNavigationBar || a(_texttokens.backNavigationBar),
+                    "aria-label": u.backNavigationBar || f(_texttokens.backNavigationBar),
                     onPress: n,
                     Icon: _iconchevronleftregular.default,
                     bleedLeft: !0,
@@ -278,31 +293,33 @@ const Tn = 120, Ln = (param)=>{
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: s,
+        variant: a,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
-                topFixed: d,
-                withBorder: u,
-                variant: s,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
+                topFixed: p,
+                withBorder: d,
+                variant: a,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: f
-                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    style: {
-                        padding: `0 ${c}px`,
-                        width: "100%"
-                    },
-                    children: f
+                children: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+                    wide: l,
+                    children: m
+                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    width: "100%",
+                    paddingX: (()=>{
+                        var _l_paddingX;
+                        return l !== void 0 ? typeof l != "object" ? 0 : (_l_paddingX = l.paddingX) !== null && _l_paddingX !== void 0 ? _l_paddingX : 0 : c;
+                    })(),
+                    children: m
                 })
             }),
-            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, K = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
+}, U = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
         onPress: t
     } : n.onPress ? {
         onPress: ()=>{
@@ -310,7 +327,7 @@ const Tn = 120, Ln = (param)=>{
         }
     } : _object_spread_props(_object_spread({}, n), {
         onNavigate: ()=>t()
-    }), Pn = {
+    }), Fn = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -325,12 +342,12 @@ const Tn = 120, Ln = (param)=>{
     closed: {
         open: "opening"
     }
-}, wn = (n, t)=>Pn[n][t] || n, Hn = (param)=>{
+}, _n = (n, t)=>Fn[n][t] || n, wn = (param)=>{
     let { section: n, closeSubMenu: t, closeMenu: i } = param;
-    const { texts: r, t: s } = (0, _hooks.useTheme)(), { title: d, menu: c } = n, u = _object_without_properties(n, [
+    const { texts: r, t: a } = (0, _hooks.useTheme)(), { title: p, menu: c } = n, d = _object_without_properties(n, [
         "title",
         "menu"
-    ]), p = (c == null ? void 0 : c.columns) || [], a = c == null ? void 0 : c.content, f = u.href !== void 0 || u.onPress !== void 0 || u.to !== void 0;
+    ]), l = (c == null ? void 0 : c.columns) || [], u = c == null ? void 0 : c.content, f = d.href !== void 0 || d.onPress !== void 0 || d.to !== void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
             space: 32,
@@ -338,8 +355,8 @@ const Tn = 120, Ln = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(Dn, {
-                            title: r.backNavigationBar || s(_texttokens.backNavigationBar),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(Hn, {
+                            title: r.backNavigationBar || a(_texttokens.backNavigationBar),
                             onBack: t,
                             topFixed: !1,
                             withBorder: !1
@@ -350,19 +367,19 @@ const Tn = 120, Ln = (param)=>{
                                 bleedY: !0,
                                 bleedRight: !0,
                                 withChevron: !0
-                            }, K(u, i)), {
-                                children: r.mainNavigationBarSectionSeeAll || s(_texttokens.mainNavigationBarSectionSeeAll)
+                            }, U(d, i)), {
+                                children: r.mainNavigationBarSectionSeeAll || a(_texttokens.mainNavigationBarSectionSeeAll)
                             })) : void 0,
-                            children: d
+                            children: p
                         })
                     ]
                 }),
-                a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                u ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingBottom: 16,
-                    children: typeof a == "function" ? a({
+                    children: typeof u == "function" ? u({
                         closeMenu: i
-                    }) : a
-                }) : p.map((m, l)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    }) : u
+                }) : l.map((m, s)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_title.Title1, {
@@ -373,89 +390,89 @@ const Tn = 120, Ln = (param)=>{
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                    children: m.items.map((_param, h)=>{
-                                        var { title: M } = _param, B = _object_without_properties(_param, [
+                                    children: m.items.map((_param, M)=>{
+                                        var { title: g } = _param, v = _object_without_properties(_param, [
                                             "title"
                                         ]);
                                         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
-                                            title: M
-                                        }, K(B, i)), h);
+                                            title: g
+                                        }, U(v, i)), M);
                                     })
                                 })
                             })
                         ]
-                    }, l))
+                    }, s))
             ]
         })
     });
-}, _n = (param)=>{
-    let { sections: n, extra: t, closeMenu: i, open: r, id: s, disableFocusTrap: d, setDisableFocusTrap: c } = param;
-    const { isDarkMode: u, texts: p, t: a } = (0, _hooks.useTheme)(), [f, m] = _react.useState(-1), [l, M] = _react.useState(!1), [B, h] = _react.useReducer(wn, "closed"), k = _react.useRef(null), I = u ? 1 : 0.2, N = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.BURGER_MENU_ANIMATION_DURATION_MS;
+}, $n = (param)=>{
+    let { sections: n, extra: t, closeMenu: i, open: r, id: a, disableFocusTrap: p, setDisableFocusTrap: c } = param;
+    const { isDarkMode: d, texts: l, t: u } = (0, _hooks.useTheme)(), [f, m] = _react.useState(-1), [s, g] = _react.useState(!1), [v, M] = _react.useReducer(_n, "closed"), O = _react.useRef(null), B = d ? 1 : 0.2, N = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.BURGER_MENU_ANIMATION_DURATION_MS;
     _react.useEffect(()=>{
         let b;
-        return l ? (h("open"), b = setTimeout(()=>h("finishOpen"), N)) : (h("close"), b = setTimeout(()=>h("finishClose"), N)), ()=>clearTimeout(b);
+        return s ? (M("open"), b = setTimeout(()=>M("finishOpen"), N)) : (M("close"), b = setTimeout(()=>M("finishClose"), N)), ()=>clearTimeout(b);
     }, [
-        l,
+        s,
         N
     ]);
-    const A = _react.useRef(null);
+    const k = _react.useRef(null);
     return _react.useEffect(()=>{
         var b;
-        if (B === "opening") {
-            const g = (b = A.current) == null ? void 0 : b.querySelector(`button[aria-label="${p.backNavigationBar || a(_texttokens.backNavigationBar)}"]`);
-            g == null || g.focus();
+        if (v === "opening") {
+            const I = (b = k.current) == null ? void 0 : b.querySelector(`button[aria-label="${l.backNavigationBar || u(_texttokens.backNavigationBar)}"]`);
+            I == null || I.focus();
         }
     }, [
-        B,
-        a,
-        p
+        v,
+        u,
+        l
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-            disabled: d,
+            disabled: p,
             group: "burger-menu-lock",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
                 onEntered: ()=>c(!1),
                 onExiting: ()=>c(!0),
                 onExited: ()=>{
-                    M(!1), m(-1);
+                    g(!1), m(-1);
                 },
                 classNames: _navigationbarcssmistica.burgerMenuTransition,
                 in: r,
-                nodeRef: k,
+                nodeRef: O,
                 timeout: N,
                 mountOnEnter: !0,
                 unmountOnExit: !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
                     className: _navigationbarcssmistica.burgerMenu,
                     style: {
-                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${I})`
+                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${B})`
                     },
-                    id: s,
-                    ref: k,
+                    id: a,
+                    ref: O,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _navigationbarcssmistica.burgerMenuContainer,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _navigationbarcssmistica.burgerMenuContentContainer,
                                 style: {
-                                    transform: `translate(${l ? "-100vw" : "0"})`
+                                    transform: `translate(${s ? "-100vw" : "0"})`
                                 },
-                                children: B !== "opened" && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+                                children: v !== "opened" && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                children: n.map((_param, x)=>{
-                                                    var { title: b, menu: g } = _param, O = _object_without_properties(_param, [
+                                                children: n.map((_param, R)=>{
+                                                    var { title: b, menu: I } = _param, h = _object_without_properties(_param, [
                                                         "title",
                                                         "menu"
                                                     ]);
                                                     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
                                                         title: b
-                                                    }, g ? {
+                                                    }, I ? {
                                                         onPress: ()=>{
-                                                            M(!0), m(x);
+                                                            g(!0), m(R);
                                                         }
-                                                    } : K(O, i)), x);
+                                                    } : U(h, i)), R);
                                                 })
                                             })
                                         }),
@@ -468,14 +485,14 @@ const Tn = 120, Ln = (param)=>{
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _navigationbarcssmistica.burgerMenuContentContainer,
-                                ref: A,
+                                ref: k,
                                 style: {
-                                    transform: `translate(${l ? "0" : "100vw"})`
+                                    transform: `translate(${s ? "0" : "100vw"})`
                                 },
-                                children: B !== "closed" && f !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(Hn, {
+                                children: v !== "closed" && f !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(wn, {
                                     section: n[f],
                                     closeMenu: i,
-                                    closeSubMenu: ()=>M(!1)
+                                    closeSubMenu: ()=>g(!1)
                                 })
                             })
                         ]
@@ -484,7 +501,7 @@ const Tn = 120, Ln = (param)=>{
             })
         })
     });
-}, $n = {
+}, Wn = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -501,7 +518,7 @@ const Tn = 120, Ln = (param)=>{
     closed: {
         open: "opening"
     }
-}, Fn = (n, t)=>$n[n][t] || n, Ce = /*#__PURE__*/ _react.createContext({
+}, Vn = (n, t)=>Wn[n][t] || n, ke = /*#__PURE__*/ _react.createContext({
     isMenuOpen: !1,
     openedSection: -1,
     menuHeight: "0px",
@@ -513,97 +530,97 @@ const Tn = 120, Ln = (param)=>{
     setFocusedItem: ()=>{},
     debouncedOpenSectionMenu: ()=>{},
     cancelDebouncedOpenSectionMenu: ()=>{}
-}), Vn = (param)=>{
+}), Gn = (param)=>{
     let { children: n, sections: t, isLargeMenu: i } = param;
-    const { isTabletOrSmaller: r } = (0, _hooks.useScreenSize)(), [s, d] = _react.useState(!1), [c, u] = _react.useState("0px"), [p, a] = _react.useReducer(Fn, "closed"), [f, m] = _react.useState(-1), [l, M] = _react.useState(), [B, h] = _react.useState(!1), [k, I] = _react.useState(!1), [N, A] = _react.useState(-1), b = _react.useCallback((v)=>{
-        var S;
-        m(-1), (S = t == null ? void 0 : t[v]) != null && S.menu ? (I(!0), A(v)) : (h(!1), I(!1));
+    const { isTabletOrSmaller: r } = (0, _hooks.useScreenSize)(), [a, p] = _react.useState(!1), [c, d] = _react.useState("0px"), [l, u] = _react.useReducer(Vn, "closed"), [f, m] = _react.useState(-1), [s, g] = _react.useState(), [v, M] = _react.useState(!1), [O, B] = _react.useState(!1), [N, k] = _react.useState(-1), b = _react.useCallback((S)=>{
+        var E;
+        m(-1), (E = t == null ? void 0 : t[S]) != null && E.menu ? (B(!0), k(S)) : (M(!1), B(!1));
     }, [
         t
-    ]), g = _react.useMemo(()=>(0, _helpers.debounce)(b, Tn), [
+    ]), I = _react.useMemo(()=>(0, _helpers.debounce)(b, yn), [
         b
-    ]), O = _react.useCallback(()=>{
-        h(!1), I(!1), g.cancel(), m(-1);
+    ]), h = _react.useCallback(()=>{
+        M(!1), B(!1), I.cancel(), m(-1);
     }, [
-        g
+        I
     ]);
     _react.useEffect(()=>{
-        r && O();
+        r && h();
     }, [
         r,
-        O
+        h
     ]), _react.useEffect(()=>{
-        !k && !B ? (d(!1), u("0px")) : d(!0);
+        !O && !v ? (p(!1), d("0px")) : p(!0);
     }, [
-        B,
-        k
+        v,
+        O
     ]), _react.useEffect(()=>{
-        const v = (0, _platform.isRunningAcceptanceTest)() || !i ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
-        let S;
-        return s ? (a("open"), S = setTimeout(()=>a("finishOpen"), v)) : (a("close"), S = setTimeout(()=>a("finishClose"), v)), ()=>clearTimeout(S);
+        const S = (0, _platform.isRunningAcceptanceTest)() || !i ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
+        let E;
+        return a ? (u("open"), E = setTimeout(()=>u("finishOpen"), S)) : (u("close"), E = setTimeout(()=>u("finishClose"), S)), ()=>clearTimeout(E);
     }, [
-        s,
+        a,
         i
     ]), _react.useEffect(()=>{
-        p === "closed" && A(-1);
+        l === "closed" && k(-1);
     }, [
-        p
+        l
     ]);
-    const x = _react.useCallback((v)=>{
-        (0, _helpers.isEqual)(l, v) || M(v);
+    const R = _react.useCallback((S)=>{
+        (0, _helpers.isEqual)(s, S) || g(S);
     }, [
-        l
+        s
     ]);
     return _react.useEffect(()=>{
-        const v = (E)=>{
-            if (l) {
-                const R = document.querySelector("[data-navigation-bar-menu-items]"), T = Array.from((R == null ? void 0 : R.querySelectorAll("a,button")) || []), G = T.findIndex((P)=>P.hasAttribute(`data-navigation-bar-menu-item-${l.column}-${l.index}`)), L = E ? G - 1 : G + 1;
-                T[(L + T.length) % T.length].focus();
+        const S = (A)=>{
+            if (s) {
+                const x = document.querySelector("[data-navigation-bar-menu-items]"), T = Array.from((x == null ? void 0 : x.querySelectorAll("a,button")) || []), P = T.findIndex((L)=>L.hasAttribute(`data-navigation-bar-menu-item-${s.column}-${s.index}`)), Y = A ? P - 1 : P + 1;
+                T[(Y + T.length) % T.length].focus();
             }
-        }, S = (E)=>{
-            switch(E.key){
+        }, E = (A)=>{
+            switch(A.key){
                 case _keys.DOWN:
-                    l && ((0, _dom.cancelEvent)(E), v());
+                    s && ((0, _dom.cancelEvent)(A), S());
                     break;
                 case _keys.UP:
-                    l && ((0, _dom.cancelEvent)(E), v(!0));
+                    s && ((0, _dom.cancelEvent)(A), S(!0));
                     break;
                 case _keys.ESC:
-                    O();
+                    h();
                     break;
             }
         };
-        return document.addEventListener("keydown", S, !1), ()=>{
-            document.removeEventListener("keydown", S, !1);
+        return document.addEventListener("keydown", E, !1), ()=>{
+            document.removeEventListener("keydown", E, !1);
         };
     }, [
-        O,
-        l
+        h,
+        s
     ]), _react.useEffect(()=>{
-        M(void 0);
+        g(void 0);
     }, [
         N
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce.Provider, {
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(ke.Provider, {
         value: {
-            isMenuOpen: s,
+            isMenuOpen: a,
             openedSection: N,
             menuHeight: c,
-            menuStatus: p,
+            menuStatus: l,
             openSectionMenu: b,
-            debouncedOpenSectionMenu: (v)=>{
-                m(v), g(v);
+            debouncedOpenSectionMenu: (S)=>{
+                m(S), I(S);
             },
-            cancelDebouncedOpenSectionMenu: (v)=>{
-                v === f && (g.cancel(), m(-1));
+            cancelDebouncedOpenSectionMenu: (S)=>{
+                S === f && (I.cancel(), m(-1));
             },
-            closeMenu: O,
-            setMenuHeight: u,
-            setIsMenuHovered: h,
-            setFocusedItem: x
+            closeMenu: h,
+            setMenuHeight: d,
+            setIsMenuHovered: M,
+            setFocusedItem: R
         },
         children: n
     });
-}, D = ()=>_react.useContext(Ce), Be = (param)=>{
+}, D = ()=>_react.useContext(ke), Ie = (param)=>{
     let { column: n, columnIndex: t } = param;
     const { setFocusedItem: i, closeMenu: r } = D();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -619,7 +636,7 @@ const Tn = 120, Ln = (param)=>{
                 space: 16,
                 role: "list",
                 children: n.items.map((_param, c)=>{
-                    var { title: s } = _param, d = _object_without_properties(_param, [
+                    var { title: a } = _param, p = _object_without_properties(_param, [
                         "title"
                     ]);
                     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -635,72 +652,73 @@ const Tn = 120, Ln = (param)=>{
                             dataAttributes: {
                                 [`navigation-bar-menu-item-${t}-${c}`]: "true"
                             }
-                        }, K(d, r)), {
-                            children: s
+                        }, U(p, r)), {
+                            children: a
                         }))
                     }, c);
                 })
             })
         ]
     });
-}, Gn = (param)=>{
-    let { section: n, index: t, isLargeNavigationBar: i } = param;
-    var A, b;
-    const r = _react.useRef(null), [s, d] = _react.useState(!1), c = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS, u = i ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP, p = 40, { menuStatus: a, isMenuOpen: f, openedSection: m, closeMenu: l, setIsMenuHovered: M, setMenuHeight: B } = D();
+}, Un = (param)=>{
+    let { section: n, index: t, isLargeNavigationBar: i, wide: r } = param;
+    var b, I;
+    const a = _react.useRef(null), [p, c] = _react.useState(!1), d = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS, l = i ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP, u = 40, { menuStatus: f, isMenuOpen: m, openedSection: s, closeMenu: g, setIsMenuHovered: v, setMenuHeight: M } = D();
     _react.useEffect(()=>{
-        if (r.current && f && (r.current.scrollTop = 0), d(!1), f) {
-            const g = setTimeout(()=>d(!0), c);
-            return ()=>clearTimeout(g);
+        if (a.current && m && (a.current.scrollTop = 0), c(!1), m) {
+            const h = setTimeout(()=>c(!0), d);
+            return ()=>clearTimeout(h);
         }
     }, [
-        f,
         m,
-        c
+        s,
+        d
     ]);
-    const [h, k] = _react.useState(!0);
+    const [O, B] = _react.useState(!0);
     _react.useEffect(()=>{
-        if (m === t) if (a === "opening") {
-            k(!1);
-            const g = requestAnimationFrame(()=>k(!0));
-            return ()=>cancelAnimationFrame(g);
-        } else k(!0);
+        if (s === t) if (f === "opening") {
+            B(!1);
+            const h = requestAnimationFrame(()=>B(!0));
+            return ()=>cancelAnimationFrame(h);
+        } else B(!0);
     }, [
-        a,
-        m,
+        f,
+        s,
         t
     ]), _react.useEffect(()=>{
-        a === "closing" && d(!1);
+        f === "closing" && c(!1);
     }, [
-        a
+        f
     ]);
-    const I = ((A = n.menu) == null ? void 0 : A.columns) || [], N = (b = n == null ? void 0 : n.menu) == null ? void 0 : b.content;
+    const N = ((b = n.menu) == null ? void 0 : b.columns) || [], k = (I = n == null ? void 0 : n.menu) == null ? void 0 : I.content;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.desktopOnly,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
-            children: m === t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+            children: s === t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _navigationbarcssmistica.desktopMenuContainer,
-                    onMouseEnter: ()=>M(!0),
-                    onMouseLeave: ()=>M(!1),
+                    onMouseEnter: ()=>v(!0),
+                    onMouseLeave: ()=>v(!1),
                     style: {
                         // disable pointer events when menu is closing
-                        pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
-                        top: u,
-                        maxHeight: `calc(100vh - ${u}px - ${p}px)`,
-                        overflowY: s ? "auto" : "hidden"
+                        pointerEvents: f === "closed" || f === "closing" ? "none" : void 0,
+                        top: l,
+                        maxHeight: `calc(100vh - ${l}px - ${u}px)`,
+                        overflowY: p ? "auto" : "hidden"
                     },
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+                        wide: r,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenu, {
-                                [_navigationbarcssmistica.desktopMenuContentFadeIn]: h
+                                [_navigationbarcssmistica.desktopMenuContentFadeIn]: O
                             }),
-                            ref: (g)=>{
-                                g && f && B(`min(${g.scrollHeight}px, calc(100vh - ${u}px - ${p}px))`);
+                            ref: (h)=>{
+                                h && m && M(`min(${h.scrollHeight}px, calc(100vh - ${l}px - ${u}px))`);
                             },
-                            children: N ? typeof N == "function" ? N({
-                                closeMenu: l
-                            }) : N : /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                            children: k ? typeof k == "function" ? k({
+                                closeMenu: g
+                            }) : k : /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
                                 rows: 1,
                                 columns: 12,
                                 gap: [
@@ -710,13 +728,13 @@ const Tn = 120, Ln = (param)=>{
                                 dataAttributes: {
                                     "navigation-bar-menu-items": "true"
                                 },
-                                children: I.map((g, O)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                                children: N.map((h, R)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                                         columnSpan: 2,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
-                                            column: g,
-                                            columnIndex: O
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
+                                            column: h,
+                                            columnIndex: R
                                         })
-                                    }, O))
+                                    }, R))
                             })
                         })
                     })
@@ -724,7 +742,7 @@ const Tn = 120, Ln = (param)=>{
             })
         })
     });
-}, Wn = (param)=>{
+}, Xn = (param)=>{
     let { isLargeNavigationBar: n } = param;
     const t = n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP, { menuHeight: i } = D();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -742,13 +760,13 @@ const Tn = 120, Ln = (param)=>{
             })
         })
     });
-}, Un = (param)=>{
+}, Kn = (param)=>{
     let { section: n, isLargeNavigationBar: t, leftPosition: i, index: r } = param;
-    var l, M;
-    const s = t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP, d = 40, c = ((l = n.menu) == null ? void 0 : l.columns) || [], u = (M = n == null ? void 0 : n.menu) == null ? void 0 : M.content, { openedSection: p, menuStatus: a, setIsMenuHovered: f, closeMenu: m } = D();
+    var s, g;
+    const a = t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP, p = 40, c = ((s = n.menu) == null ? void 0 : s.columns) || [], d = (g = n == null ? void 0 : n.menu) == null ? void 0 : g.content, { openedSection: l, menuStatus: u, setIsMenuHovered: f, closeMenu: m } = D();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.desktopOnly,
-        children: r === p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+        children: r === l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.desktopSmallMenuContainer,
@@ -756,55 +774,55 @@ const Tn = 120, Ln = (param)=>{
                 onMouseLeave: ()=>f(!1),
                 style: {
                     // disable pointer events when menu is closing
-                    pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
-                    top: s,
+                    pointerEvents: u === "closed" || u === "closing" ? "none" : void 0,
+                    top: a,
                     left: i,
-                    maxHeight: `calc(100vh - ${s}px - ${d}px)`
+                    maxHeight: `calc(100vh - ${a}px - ${p}px)`
                 },
-                children: u ? typeof u == "function" ? u({
+                children: d ? typeof d == "function" ? d({
                     closeMenu: m
-                }) : u : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                }) : d : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                     space: 40,
                     dataAttributes: {
                         "navigation-bar-menu-items": "true"
                     },
-                    children: c.map((B, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
-                            column: B,
-                            columnIndex: h
-                        }, h))
+                    children: c.map((v, M)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
+                            column: v,
+                            columnIndex: M
+                        }, M))
                 })
             })
         })
     });
-}, Kn = (param)=>{
-    let { section: n, index: t, selectedIndex: i, isFirstSection: r, isLastSection: s, navigationBarRef: d, variant: c, isLargeNavigationBar: u, desktopLargeMenu: p } = param;
-    const { texts: a, t: f } = (0, _hooks.useTheme)(), { title: m, menu: l } = n, M = _object_without_properties(n, [
+}, qn = (param)=>{
+    let { section: n, index: t, selectedIndex: i, isFirstSection: r, isLastSection: a, navigationBarRef: p, variant: c, isLargeNavigationBar: d, desktopLargeMenu: l, wide: u } = param;
+    const { texts: f, t: m } = (0, _hooks.useTheme)(), { title: s, menu: g } = n, v = _object_without_properties(n, [
         "title",
         "menu"
-    ]), B = _react.useRef(null), [h, k] = _react.useState(0), [I, N] = _react.useState(!1), { isMenuOpen: A, openedSection: b, openSectionMenu: g, debouncedOpenSectionMenu: O, cancelDebouncedOpenSectionMenu: x, closeMenu: v } = D(), S = M.href !== void 0 || M.onPress !== void 0 || M.to !== void 0, E = _react.useCallback((L)=>{
-        p || k((()=>{
-            var te, oe;
-            const { left: ne, right: ke } = ((te = B.current) == null ? void 0 : te.getBoundingClientRect()) || {
+    ]), M = _react.useRef(null), [O, B] = _react.useState(0), [N, k] = _react.useState(!1), { isMenuOpen: b, openedSection: I, openSectionMenu: h, debouncedOpenSectionMenu: R, cancelDebouncedOpenSectionMenu: S, closeMenu: E } = D(), A = v.href !== void 0 || v.onPress !== void 0 || v.to !== void 0, x = _react.useCallback((L)=>{
+        l || B((()=>{
+            var re, ae;
+            const { left: ie, right: Oe } = ((re = M.current) == null ? void 0 : re.getBoundingClientRect()) || {
                 left: 0,
                 right: 0
-            }, Ie = (((oe = d.current) == null ? void 0 : oe.getBoundingClientRect().right) || 0) - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
-            return ne <= Ie ? ne : ke - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
-        })()), L ? O(t) : g(t);
+            }, Ee = (((ae = p.current) == null ? void 0 : ae.getBoundingClientRect().right) || 0) - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
+            return ie <= Ee ? ie : Oe - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
+        })()), L ? R(t) : h(t);
     }, [
-        p,
+        l,
         t,
-        g,
-        O,
-        d
+        h,
+        R,
+        p
     ]);
     _react.useEffect(()=>{
-        const L = (P)=>{
-            switch(P.key){
+        const L = (W)=>{
+            switch(W.key){
                 case _keys.DOWN:
-                    I && ((0, _dom.cancelEvent)(P), E());
+                    N && ((0, _dom.cancelEvent)(W), x());
                     break;
                 case _keys.UP:
-                    I && ((0, _dom.cancelEvent)(P), v());
+                    N && ((0, _dom.cancelEvent)(W), E());
                     break;
             }
         };
@@ -813,241 +831,245 @@ const Tn = 120, Ln = (param)=>{
         };
     }, [
         t,
-        I,
+        N,
+        x,
         E,
-        v,
-        l,
-        S
+        g,
+        A
     ]);
-    const R = A && b === t, T = _react.useCallback(()=>{
-        R ? v() : E();
+    const T = b && I === t, P = _react.useCallback(()=>{
+        T ? E() : x();
     }, [
-        R,
-        E,
-        v
-    ]), G = _react.useCallback((L)=>S ? L : {
-            onPress: T
+        T,
+        x,
+        E
+    ]), Y = _react.useCallback((L)=>A ? L : {
+            onPress: P
         }, [
-        S,
-        T
+        A,
+        P
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.desktopMenuSectionWithArrowWrapper,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: B,
+                ref: M,
                 className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenuSectionContainer, {
                     [_navigationbarcssmistica.desktopMenuFirstSection]: r,
-                    [_navigationbarcssmistica.desktopMenuLastSection]: s
+                    [_navigationbarcssmistica.desktopMenuLastSection]: a
                 }),
-                onMouseEnter: ()=>E(!0),
-                onMouseLeave: ()=>x(t),
+                onMouseEnter: ()=>x(!0),
+                onMouseLeave: ()=>S(t),
                 onFocus: ()=>{
-                    l && !S && N(!0);
+                    g && !A && k(!0);
                 },
                 onBlur: ()=>{
-                    l && !S && N(!1);
+                    g && !A && k(!1);
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, G(M)), {
-                    "aria-label": S ? void 0 : `${n.title}, ${a.mainNavigationBarOpenSectionMenu || f(_texttokens.mainNavigationBarOpenSectionMenu)}`,
-                    "aria-haspopup": !S,
-                    "aria-expanded": S ? void 0 : R,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, Y(v)), {
+                    "aria-label": A ? void 0 : `${n.title}, ${f.mainNavigationBarOpenSectionMenu || m(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                    "aria-haspopup": !A,
+                    "aria-expanded": A ? void 0 : T,
                     className: (0, _classnames.default)(_navigationbarcssmistica.section, {
                         [_navigationbarcssmistica.selectedSectionVariantes[c === "inverse" ? "inverse" : "default"]]: t === i
                     }, _navigationbarcssmistica.textWrapperVariants[c === "inverse" ? "inverse" : "default"]),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: m
+                        children: s
                     })
                 }))
             }),
-            l && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            g && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
-                    S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _navigationbarcssmistica.desktopMenuSectionArrowContainer,
-                        onFocus: ()=>N(!0),
-                        onBlur: ()=>N(!1),
+                        onFocus: ()=>k(!0),
+                        onBlur: ()=>k(!1),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _navigationbarcssmistica.desktopMenuSectionArrow,
-                            "aria-label": `${n.title}, ${a.mainNavigationBarOpenSectionMenu || f(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                            "aria-label": `${n.title}, ${f.mainNavigationBarOpenSectionMenu || m(_texttokens.mainNavigationBarOpenSectionMenu)}`,
                             "aria-haspopup": !0,
-                            "aria-expanded": R,
+                            "aria-expanded": T,
                             onPress: ()=>{
-                                I && T();
+                                N && P();
                             },
                             style: {
-                                pointerEvents: I ? "auto" : "none",
-                                opacity: I ? 1 : 0,
+                                pointerEvents: N ? "auto" : "none",
+                                opacity: N ? 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__ */ (0, _jsxruntime.jsx)(Ln, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Dn, {
                                 size: 8,
                                 style: {
-                                    transform: `rotate(${R ? -90 : 90}deg)`
+                                    transform: `rotate(${T ? -90 : 90}deg)`
                                 }
                             })
                         })
                     }),
-                    p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Gn, {
+                    l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Un, {
                         section: n,
-                        isLargeNavigationBar: u,
-                        index: t
-                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(Un, {
+                        isLargeNavigationBar: d,
+                        index: t,
+                        wide: u
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
                         section: n,
-                        isLargeNavigationBar: u,
-                        leftPosition: h,
+                        isLargeNavigationBar: d,
+                        leftPosition: O,
                         index: t
                     })
                 ]
             })
         ]
     });
-}, qn = (param)=>{
-    let { sections: n, selectedIndex: t, navigationBarRef: i, variant: r, isLargeNavigationBar: s, hasRightContent: d, desktopLargeMenu: c } = param;
-    const { openSectionMenu: u, openedSection: p, closeMenu: a } = D();
+}, jn = (param)=>{
+    let { sections: n, selectedIndex: t, navigationBarRef: i, variant: r, isLargeNavigationBar: a, hasRightContent: p, desktopLargeMenu: c, wide: d } = param;
+    const { openSectionMenu: l, openedSection: u, closeMenu: f } = D();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
         className: (0, _classnames.default)(_navigationbarcssmistica.desktopOnly, _navigationbarcssmistica.mainNavBarSectionsContainer),
         style: {
-            paddingLeft: s ? 0 : 48,
-            paddingRight: !s && d ? 136 : 0
+            paddingLeft: a ? 0 : 48,
+            paddingRight: !a && p ? 136 : 0
         },
         onMouseEnter: ()=>{
-            p !== -1 && u(p);
+            u !== -1 && l(u);
         },
-        onMouseLeave: a,
+        onMouseLeave: f,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 32,
-            children: n.map((f, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
-                    index: m,
+            children: n.map((m, s)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(qn, {
+                    index: s,
                     selectedIndex: t,
                     navigationBarRef: i,
-                    isFirstSection: m === 0,
-                    isLastSection: m === n.length - 1,
+                    isFirstSection: s === 0,
+                    isLastSection: s === n.length - 1,
                     variant: r,
-                    section: f,
-                    isLargeNavigationBar: s,
-                    desktopLargeMenu: c
-                }, m))
+                    section: m,
+                    isLargeNavigationBar: a,
+                    desktopLargeMenu: c,
+                    wide: d
+                }, s))
         })
     });
 }, zn = (param)=>{
     let { children: n, isLargeNavigationBar: t, desktopLargeMenu: i } = param;
-    const { menuHeight: r } = D(), s = t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP;
+    const { menuHeight: r } = D(), a = t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.mainNavigationBarContentWrapper,
         style: i ? {
-            clipPath: `rect(0 100% calc(${s}px + ${r}) 0)`,
-            WebkitClipPath: `rect(0 100% calc(${s}px + ${r}) 0)`
+            clipPath: `rect(0 100% calc(${a}px + ${r}) 0)`,
+            WebkitClipPath: `rect(0 100% calc(${a}px + ${r}) 0)`
         } : void 0,
         children: n
     });
-}, At = (param)=>{
-    let { sections: n = [], selectedIndex: t, right: i, variant: r = "default", topFixed: s = !0, withBorder: d = !0, burgerMenuExtra: c, logo: u, large: p = !1, desktopLargeMenu: a = !1 } = param;
-    const { texts: f, t: m } = (0, _hooks.useTheme)(), l = _react.useId(), { isTabletOrSmaller: M } = (0, _hooks.useScreenSize)(), B = u || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+}, xt = (param)=>{
+    let { sections: n = [], selectedIndex: t, right: i, variant: r = "default", topFixed: a = !0, withBorder: p = !0, burgerMenuExtra: c, logo: d, large: l = !1, desktopLargeMenu: u = !1, wide: f = !1 } = param;
+    const { texts: m, t: s } = (0, _hooks.useTheme)(), g = _react.useId(), { isTabletOrSmaller: v } = (0, _hooks.useScreenSize)(), M = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), h = p && n.length > 0, [k, I] = _react.useState(!1), [N, A] = _react.useState(!0), b = _react.useRef(null), g = (0, _modalcontextprovider.useSetModalState)(), O = /* @__PURE__ */ (0, _jsxruntime.jsx)(qn, {
+    }), O = l && n.length > 0, [B, N] = _react.useState(!1), [k, b] = _react.useState(!0), I = _react.useRef(null), h = (0, _modalcontextprovider.useSetModalState)(), R = /* @__PURE__ */ (0, _jsxruntime.jsx)(jn, {
         sections: n,
         selectedIndex: t,
-        navigationBarRef: b,
+        navigationBarRef: I,
         variant: r,
         hasRightContent: !!i,
-        isLargeNavigationBar: h,
-        desktopLargeMenu: a
-    }), x = ()=>{
-        I(!0), g({
+        isLargeNavigationBar: O,
+        desktopLargeMenu: u,
+        wide: f
+    }), S = ()=>{
+        N(!0), h({
             isModalOpen: !0
         });
-    }, v = ()=>{
-        I(!1), g({
+    }, E = ()=>{
+        N(!1), h({
             isModalOpen: !1
         });
-    }, S = n.length > 1, E = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+    }, A = n.length > 1, x = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: r,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)(ee, {
-                topFixed: s,
-                withBorder: d,
-                isBurgerMenuOpen: k,
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(oe, {
+                topFixed: a,
+                withBorder: p,
+                isBurgerMenuOpen: B,
                 variant: r,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
                 children: [
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(Wn, {
-                        isLargeNavigationBar: h
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)(Xn, {
+                        isLargeNavigationBar: O
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(zn, {
-                        isLargeNavigationBar: h,
-                        desktopLargeMenu: a,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+                        isLargeNavigationBar: O,
+                        desktopLargeMenu: u,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(z, {
+                            wide: f,
                             children: [
-                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(U, {
-                                    ref: b,
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(G, {
+                                    ref: I,
                                     right: i,
-                                    expandRightContent: h,
+                                    expandRightContent: O,
                                     children: [
-                                        S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                                        A && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                                             className: _navigationbarcssmistica.burgerMenuButton,
                                             "aria-live": "polite",
-                                            "aria-label": k ? f.closeNavigationMenu || m(_texttokens.closeNavigationMenu) : f.openNavigationMenu || m(_texttokens.openNavigationMenu),
-                                            "aria-expanded": k,
-                                            "aria-controls": l,
-                                            onPress: k ? v : x,
-                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(yn, {
-                                                isOpen: k
+                                            "aria-label": B ? m.closeNavigationMenu || s(_texttokens.closeNavigationMenu) : m.openNavigationMenu || s(_texttokens.openNavigationMenu),
+                                            "aria-expanded": B,
+                                            "aria-controls": g,
+                                            onPress: B ? E : S,
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Pn, {
+                                                isOpen: B
                                             })
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _navigationbarcssmistica.logoContainer,
-                                            children: B
+                                            children: M
                                         }),
-                                        !h && O
+                                        !O && R
                                     ]
                                 }),
-                                h && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                                O && /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
                                     desktopOnly: !0,
-                                    children: O
+                                    children: R
                                 })
                             ]
                         })
                     })
                 ]
             }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: h ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: O ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Vn, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Gn, {
         sections: n,
-        isLargeMenu: a,
-        children: M ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        isLargeMenu: u,
+        children: v ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                    disabled: N,
+                    disabled: k,
                     group: "burger-menu-lock",
-                    children: E
+                    children: x
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(_n, {
-                    open: k,
-                    id: l,
+                /* @__PURE__ */ (0, _jsxruntime.jsx)($n, {
+                    open: B,
+                    id: g,
                     sections: n,
                     extra: c,
-                    closeMenu: v,
-                    disableFocusTrap: N,
-                    setDisableFocusTrap: A
+                    closeMenu: E,
+                    disableFocusTrap: k,
+                    setDisableFocusTrap: b
                 })
             ]
-        }) : E
+        }) : x
     });
-}, Rt = (param)=>{
-    let { logo: n, right: t, variant: i = "default", topFixed: r = !0, withBorder: s = !0 } = param;
+}, Tt = (param)=>{
+    let { logo: n, right: t, variant: i = "default", topFixed: r = !0, withBorder: a = !0, wide: p = !1 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
@@ -1056,17 +1078,18 @@ const Tn = 120, Ln = (param)=>{
     }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: i,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(oe, {
                 topFixed: r,
-                withBorder: s,
+                withBorder: a,
                 variant: i,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+                    wide: p,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
                             right: t,
                             expandRightContent: !0,
                             children: n
@@ -1079,7 +1102,7 @@ const Tn = 120, Ln = (param)=>{
             })
         ]
     });
-}, xt = (param)=>{
+}, Lt = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -1090,7 +1113,7 @@ const Tn = 120, Ln = (param)=>{
             children: n
         })
     });
-}, Tt = (_param)=>{
+}, yt = (_param)=>{
     var { children: n } = _param, t = _object_without_properties(_param, [
         "children"
     ]);