@telefonica/mistica 16.3.1 → 16.5.0

package/dist/navigation-bar.js

@@ -11,26 +11,29 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return fn;
+        return Rt;
     },
     MainNavigationBar: function() {
-        return hn;
+        return At;
     },
     NavigationBar: function() {
-        return vn;
+        return Dn;
     },
     NavigationBarAction: function() {
-        return Bn;
+        return Tt;
     },
     NavigationBarActionGroup: function() {
-        return Nn;
+        return xt;
+    },
+    useMainNavigationBarDesktopMenuState: function() {
+        return D;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reacttransitiongroup = require("react-transition-group");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _responsivelayout = /*#__PURE__*/ _interop_require_wildcard(require("./responsive-layout.js"));
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _touchable = /*#__PURE__*/ _interop_require_wildcard(require("./touchable.js"));
 const _text = require("./text.js");
@@ -39,7 +42,6 @@ const _iconmenuregular = /*#__PURE__*/ _interop_require_default(require("./gener
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
 const _iconchevronleftregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-chevron-left-regular.js"));
 const _iconbutton = require("./icon-button.js");
-const _negativebox = /*#__PURE__*/ _interop_require_default(require("./negative-box.js"));
 const _list = require("./list.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));
@@ -54,6 +56,14 @@ const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _platform = require("./utils/platform.js");
 const _texttokens = require("./text-tokens.js");
+const _theme = require("./theme.js");
+const _textlink = /*#__PURE__*/ _interop_require_default(require("./text-link.js"));
+const _title = require("./title.js");
+const _button = require("./button.js");
+const _grid = require("./grid.js");
+const _keys = require("./utils/keys.js");
+const _helpers = require("./utils/helpers.js");
+const _negativebox = /*#__PURE__*/ _interop_require_default(require("./negative-box.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -179,7 +189,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Ge = (param)=>{
+const Tn = 120, Ln = (param)=>{
+    let { size: n = 24, color: t = _skincontractcssmistica.vars.colors.neutralHigh, style: i, className: r } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        width: n,
+        height: n,
+        viewBox: "0 0 8 8",
+        style: i,
+        className: r,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("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
+        })
+    });
+}, yn = (param)=>{
     let { isOpen: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
@@ -196,192 +219,50 @@ const Ge = (param)=>{
             })
         ]
     });
-}, He = 300, O = (param)=>{
-    let { children: n, topFixed: o, withBorder: t, isMenuOpen: r, variant: a = "default", dataAttributes: s } = param;
-    const { isDarkMode: c } = (0, _hooks.useTheme)(), d = ()=>a === "inverse" && !c || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, m = {
+}, 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 = {
         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)(d(), {
-            [_navigationbarcssmistica.topFixed]: o
+        className: (0, _classnames.default)(u(), {
+            [_navigationbarcssmistica.topFixed]: t
         }),
         style: {
-            background: m[a]
+            background: p[s]
         }
-    }, (0, _dom.getPrefixedDataAttributes)(s)), {
+    }, (0, _dom.getPrefixedDataAttributes)(d)), {
         children: n
     }));
-}, b = (param)=>{
-    let { right: n, children: o, desktopOnly: t } = param;
+}, U = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+    let { right: n, children: t, desktopOnly: i, expandRightContent: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        ref: s,
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
-            [_navigationbarcssmistica.desktopOnly]: t
+            [_navigationbarcssmistica.desktopOnly]: i
         }),
         children: [
-            o,
+            t,
             n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _navigationbarcssmistica.navigationBarContentRight,
+                className: r ? _navigationbarcssmistica.navigationBarContentRightExpanded : _navigationbarcssmistica.navigationBarContentRight,
                 children: n
             })
         ]
     });
-}, hn = (param)=>{
-    let { sections: n = [], selectedIndex: o, right: t, variant: r = "default", topFixed: a = !0, withBorder: s = !0, burgerMenuExtra: c, logo: d, large: m = !1 } = param;
-    const { texts: u, isDarkMode: g, t: R } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), J = g ? 1 : 0.2, { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), Q = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
-        size: {
-            mobile: 40,
-            desktop: 48
-        }
-    }), D = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-            className: _navigationbarcssmistica.desktopOnly,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
-                space: 32,
-                children: n.map((_param, v)=>{
-                    var { title: k } = _param, x = _object_without_properties(_param, [
-                        "title"
-                    ]);
-                    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, x), {
-                        key: v,
-                        className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: v === o
-                        }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" ? "inverse" : "default"])
-                    }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                        regular: !0,
-                        color: "inherit",
-                        children: k
-                    }));
-                })
-            })
-        }), I = m && n.length > 0, X = ()=>{
-        y(!0), w({
-            isModalOpen: !0
-        });
-    }, V = ()=>{
-        y(!1), w({
-            isModalOpen: !1
-        });
-    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: r,
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                topFixed: a,
-                withBorder: s,
-                isMenuOpen: l,
-                variant: r,
-                dataAttributes: {
-                    "component-name": "MainNavigationBar"
-                },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
-                    children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
-                            right: t,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                                className: _navigationbarcssmistica.mainNavbarContent,
-                                children: [
-                                    G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-                                        className: _navigationbarcssmistica.burgerMenuButton,
-                                        "aria-live": "polite",
-                                        "aria-label": l ? u.closeNavigationMenu || R(_texttokens.closeNavigationMenu) : u.openNavigationMenu || R(_texttokens.openNavigationMenu),
-                                        "aria-expanded": l,
-                                        "aria-controls": L,
-                                        onPress: l ? V : X,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
-                                            isOpen: l
-                                        })
-                                    }),
-                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        className: _navigationbarcssmistica.logoContainer,
-                                        children: Q
-                                    }),
-                                    !I && D()
-                                ]
-                            })
-                        }),
-                        I && /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
-                            desktopOnly: !0,
-                            children: D()
-                        })
-                    ]
-                })
-            }),
-            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: I ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
-            })
-        ]
-    });
-    return K ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                disabled: F,
-                group: "burger-menu-lock",
-                children: H
-            }),
-            G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                    disabled: F,
-                    group: "burger-menu-lock",
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
-                        onEntering: ()=>{
-                            h("opening");
-                        },
-                        onEntered: ()=>{
-                            h("open");
-                        },
-                        onExiting: ()=>{
-                            h("closing");
-                        },
-                        onExited: ()=>{
-                            h("closed");
-                        },
-                        in: l,
-                        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : He,
-                        unmountOnExit: !0,
-                        children: (k)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[k]),
-                                    style: {
-                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
-                                    },
-                                    id: L,
-                                    onClick: ()=>{
-                                        V();
-                                    },
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                            space: 16,
-                                            children: [
-                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
-                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                        children: n.map((x, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), v))
-                                                    })
-                                                }),
-                                                c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                    paddingBottom: 16,
-                                                    children: c
-                                                })
-                                            ]
-                                        })
-                                    })
-                                })
-                            })
-                    })
-                })
-            })
-        ]
-    }) : H;
-}, vn = (param)=>{
-    let { onBack: n, title: o, titleAs: t, right: r, variant: a = "default", topFixed: s = !0, paddingX: c = 0, withBorder: d = !0 } = param;
-    const { texts: m, t: u } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+}), 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, {
         right: r,
+        expandRightContent: !0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 24,
             alignItems: "center",
             children: [
                 n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                    "aria-label": m.backNavigationBar || u(_texttokens.backNavigationBar),
+                    "aria-label": p.backNavigationBar || a(_texttokens.backNavigationBar),
                     onPress: n,
                     Icon: _iconchevronleftregular.default,
                     bleedLeft: !0,
@@ -390,59 +271,803 @@ const Ge = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
                     truncate: !0,
-                    as: t,
-                    children: o
+                    as: i,
+                    children: t
                 })
             ]
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: a,
+        variant: s,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                topFixed: s,
-                withBorder: d,
-                variant: a,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+                topFixed: d,
+                withBorder: u,
+                variant: s,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: g
+                children: d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: f
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     style: {
                         padding: `0 ${c}px`,
                         width: "100%"
                     },
-                    children: g
+                    children: f
                 })
             }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, fn = (param)=>{
-    let { logo: n, right: o, variant: t = "default", topFixed: r = !0, withBorder: a = !0 } = param;
+}, K = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
+        onPress: t
+    } : n.onPress ? {
+        onPress: ()=>{
+            n.onPress(), t();
+        }
+    } : _object_spread_props(_object_spread({}, n), {
+        onNavigate: ()=>t()
+    }), Pn = {
+    opening: {
+        close: "closing",
+        finishOpen: "opened"
+    },
+    opened: {
+        close: "closing"
+    },
+    closing: {
+        open: "opening",
+        finishClose: "closed"
+    },
+    closed: {
+        open: "opening"
+    }
+}, wn = (n, t)=>Pn[n][t] || n, Hn = (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, [
+        "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;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            space: 32,
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    space: 16,
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(Dn, {
+                            title: r.backNavigationBar || s(_texttokens.backNavigationBar),
+                            onBack: t,
+                            topFixed: !1,
+                            withBorder: !1
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
+                            right: f ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, _object_spread_props(_object_spread({
+                                small: !0,
+                                bleedY: !0,
+                                bleedRight: !0,
+                                withChevron: !0
+                            }, K(u, i)), {
+                                children: r.mainNavigationBarSectionSeeAll || s(_texttokens.mainNavigationBarSectionSeeAll)
+                            })) : void 0,
+                            children: d
+                        })
+                    ]
+                }),
+                a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingBottom: 16,
+                    children: typeof a == "function" ? a({
+                        closeMenu: i
+                    }) : a
+                }) : p.map((m, l)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                        space: 8,
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_title.Title1, {
+                                children: [
+                                    " ",
+                                    m.title
+                                ]
+                            }),
+                            /* @__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, [
+                                            "title"
+                                        ]);
+                                        return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
+                                            title: M
+                                        }, K(B, i)), h);
+                                    })
+                                })
+                            })
+                        ]
+                    }, l))
+            ]
+        })
+    });
+}, _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;
+    _react.useEffect(()=>{
+        let b;
+        return l ? (h("open"), b = setTimeout(()=>h("finishOpen"), N)) : (h("close"), b = setTimeout(()=>h("finishClose"), N)), ()=>clearTimeout(b);
+    }, [
+        l,
+        N
+    ]);
+    const A = _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();
+        }
+    }, [
+        B,
+        a,
+        p
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
+            disabled: d,
+            group: "burger-menu-lock",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+                onEntered: ()=>c(!1),
+                onExiting: ()=>c(!0),
+                onExited: ()=>{
+                    M(!1), m(-1);
+                },
+                classNames: _navigationbarcssmistica.burgerMenuTransition,
+                in: r,
+                nodeRef: k,
+                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})`
+                    },
+                    id: s,
+                    ref: k,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _navigationbarcssmistica.burgerMenuContainer,
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _navigationbarcssmistica.burgerMenuContentContainer,
+                                style: {
+                                    transform: `translate(${l ? "-100vw" : "0"})`
+                                },
+                                children: B !== "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, [
+                                                        "title",
+                                                        "menu"
+                                                    ]);
+                                                    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
+                                                        title: b
+                                                    }, g ? {
+                                                        onPress: ()=>{
+                                                            M(!0), m(x);
+                                                        }
+                                                    } : K(O, i)), x);
+                                                })
+                                            })
+                                        }),
+                                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                            paddingY: 16,
+                                            children: t
+                                        })
+                                    ]
+                                })
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _navigationbarcssmistica.burgerMenuContentContainer,
+                                ref: A,
+                                style: {
+                                    transform: `translate(${l ? "0" : "100vw"})`
+                                },
+                                children: B !== "closed" && f !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(Hn, {
+                                    section: n[f],
+                                    closeMenu: i,
+                                    closeSubMenu: ()=>M(!1)
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        })
+    });
+}, $n = {
+    opening: {
+        close: "closing",
+        finishOpen: "opened"
+    },
+    opened: {
+        close: "closing"
+    },
+    closing: {
+        // If a section was opened while the menu was closing, the menu should be considered as
+        // already open. This is useful for example to avoid the new content's fade-in animation
+        open: "opened",
+        finishClose: "closed"
+    },
+    closed: {
+        open: "opening"
+    }
+}, Fn = (n, t)=>$n[n][t] || n, Ce = /*#__PURE__*/ _react.createContext({
+    isMenuOpen: !1,
+    openedSection: -1,
+    menuHeight: "0px",
+    menuStatus: "closed",
+    openSectionMenu: ()=>{},
+    closeMenu: ()=>{},
+    setMenuHeight: ()=>{},
+    setIsMenuHovered: ()=>{},
+    setFocusedItem: ()=>{},
+    debouncedOpenSectionMenu: ()=>{},
+    cancelDebouncedOpenSectionMenu: ()=>{}
+}), Vn = (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));
+    }, [
+        t
+    ]), g = _react.useMemo(()=>(0, _helpers.debounce)(b, Tn), [
+        b
+    ]), O = _react.useCallback(()=>{
+        h(!1), I(!1), g.cancel(), m(-1);
+    }, [
+        g
+    ]);
+    _react.useEffect(()=>{
+        r && O();
+    }, [
+        r,
+        O
+    ]), _react.useEffect(()=>{
+        !k && !B ? (d(!1), u("0px")) : d(!0);
+    }, [
+        B,
+        k
+    ]), _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);
+    }, [
+        s,
+        i
+    ]), _react.useEffect(()=>{
+        p === "closed" && A(-1);
+    }, [
+        p
+    ]);
+    const x = _react.useCallback((v)=>{
+        (0, _helpers.isEqual)(l, v) || M(v);
+    }, [
+        l
+    ]);
+    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();
+            }
+        }, S = (E)=>{
+            switch(E.key){
+                case _keys.DOWN:
+                    l && ((0, _dom.cancelEvent)(E), v());
+                    break;
+                case _keys.UP:
+                    l && ((0, _dom.cancelEvent)(E), v(!0));
+                    break;
+                case _keys.ESC:
+                    O();
+                    break;
+            }
+        };
+        return document.addEventListener("keydown", S, !1), ()=>{
+            document.removeEventListener("keydown", S, !1);
+        };
+    }, [
+        O,
+        l
+    ]), _react.useEffect(()=>{
+        M(void 0);
+    }, [
+        N
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce.Provider, {
+        value: {
+            isMenuOpen: s,
+            openedSection: N,
+            menuHeight: c,
+            menuStatus: p,
+            openSectionMenu: b,
+            debouncedOpenSectionMenu: (v)=>{
+                m(v), g(v);
+            },
+            cancelDebouncedOpenSectionMenu: (v)=>{
+                v === f && (g.cancel(), m(-1));
+            },
+            closeMenu: O,
+            setMenuHeight: u,
+            setIsMenuHovered: h,
+            setFocusedItem: x
+        },
+        children: n
+    });
+}, D = ()=>_react.useContext(Ce), Be = (param)=>{
+    let { column: n, columnIndex: t } = param;
+    const { setFocusedItem: i, closeMenu: r } = D();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+        space: 24,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                medium: !0,
+                color: _skincontractcssmistica.vars.colors.textSecondary,
+                transform: "uppercase",
+                children: n.title
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                space: 16,
+                role: "list",
+                children: n.items.map((_param, c)=>{
+                    var { title: s } = _param, d = _object_without_properties(_param, [
+                        "title"
+                    ]);
+                    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        onFocus: ()=>i({
+                                column: t,
+                                index: c
+                            }),
+                        onBlur: ()=>i(void 0),
+                        role: "listitem",
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textlink.default, _object_spread_props(_object_spread({
+                            className: _navigationbarcssmistica.desktopMenuColumnItem,
+                            dataAttributes: {
+                                [`navigation-bar-menu-item-${t}-${c}`]: "true"
+                            }
+                        }, K(d, r)), {
+                            children: s
+                        }))
+                    }, 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();
+    _react.useEffect(()=>{
+        if (r.current && f && (r.current.scrollTop = 0), d(!1), f) {
+            const g = setTimeout(()=>d(!0), c);
+            return ()=>clearTimeout(g);
+        }
+    }, [
+        f,
+        m,
+        c
+    ]);
+    const [h, k] = _react.useState(!0);
+    _react.useEffect(()=>{
+        if (m === t) if (a === "opening") {
+            k(!1);
+            const g = requestAnimationFrame(()=>k(!0));
+            return ()=>cancelAnimationFrame(g);
+        } else k(!0);
+    }, [
+        a,
+        m,
+        t
+    ]), _react.useEffect(()=>{
+        a === "closing" && d(!1);
+    }, [
+        a
+    ]);
+    const I = ((A = n.menu) == null ? void 0 : A.columns) || [], N = (b = n == null ? void 0 : n.menu) == null ? void 0 : b.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: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _navigationbarcssmistica.desktopMenuContainer,
+                    onMouseEnter: ()=>M(!0),
+                    onMouseLeave: ()=>M(!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"
+                    },
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenu, {
+                                [_navigationbarcssmistica.desktopMenuContentFadeIn]: h
+                            }),
+                            ref: (g)=>{
+                                g && f && B(`min(${g.scrollHeight}px, calc(100vh - ${u}px - ${p}px))`);
+                            },
+                            children: N ? typeof N == "function" ? N({
+                                closeMenu: l
+                            }) : N : /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                                rows: 1,
+                                columns: 12,
+                                gap: [
+                                    24,
+                                    40
+                                ],
+                                dataAttributes: {
+                                    "navigation-bar-menu-items": "true"
+                                },
+                                children: I.map((g, O)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                                        columnSpan: 2,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Be, {
+                                            column: g,
+                                            columnIndex: O
+                                        })
+                                    }, O))
+                            })
+                        })
+                    })
+                })
+            })
+        })
+    });
+}, Wn = (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", {
+        className: _navigationbarcssmistica.desktopOnly,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _navigationbarcssmistica.desktopMenuWrapper,
+            style: {
+                top: t
+            },
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _navigationbarcssmistica.desktopMenuBackgroundContainer,
+                style: {
+                    height: i
+                }
+            })
+        })
+    });
+}, Un = (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();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _navigationbarcssmistica.desktopOnly,
+        children: r === p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+            variant: "default",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _navigationbarcssmistica.desktopSmallMenuContainer,
+                onMouseEnter: ()=>f(!0),
+                onMouseLeave: ()=>f(!1),
+                style: {
+                    // disable pointer events when menu is closing
+                    pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
+                    top: s,
+                    left: i,
+                    maxHeight: `calc(100vh - ${s}px - ${d}px)`
+                },
+                children: u ? typeof u == "function" ? u({
+                    closeMenu: m
+                }) : u : /* @__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))
+                })
+            })
+        })
+    });
+}, 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, [
+        "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()) || {
+                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);
+    }, [
+        p,
+        t,
+        g,
+        O,
+        d
+    ]);
+    _react.useEffect(()=>{
+        const L = (P)=>{
+            switch(P.key){
+                case _keys.DOWN:
+                    I && ((0, _dom.cancelEvent)(P), E());
+                    break;
+                case _keys.UP:
+                    I && ((0, _dom.cancelEvent)(P), v());
+                    break;
+            }
+        };
+        return document.addEventListener("keydown", L, !1), ()=>{
+            document.removeEventListener("keydown", L, !1);
+        };
+    }, [
+        t,
+        I,
+        E,
+        v,
+        l,
+        S
+    ]);
+    const R = A && b === t, T = _react.useCallback(()=>{
+        R ? v() : E();
+    }, [
+        R,
+        E,
+        v
+    ]), G = _react.useCallback((L)=>S ? L : {
+            onPress: T
+        }, [
+        S,
+        T
+    ]);
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _navigationbarcssmistica.desktopMenuSectionWithArrowWrapper,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                ref: B,
+                className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenuSectionContainer, {
+                    [_navigationbarcssmistica.desktopMenuFirstSection]: r,
+                    [_navigationbarcssmistica.desktopMenuLastSection]: s
+                }),
+                onMouseEnter: ()=>E(!0),
+                onMouseLeave: ()=>x(t),
+                onFocus: ()=>{
+                    l && !S && N(!0);
+                },
+                onBlur: ()=>{
+                    l && !S && N(!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,
+                    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
+                    })
+                }))
+            }),
+            l && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    S && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _navigationbarcssmistica.desktopMenuSectionArrowContainer,
+                        onFocus: ()=>N(!0),
+                        onBlur: ()=>N(!1),
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+                            className: _navigationbarcssmistica.desktopMenuSectionArrow,
+                            "aria-label": `${n.title}, ${a.mainNavigationBarOpenSectionMenu || f(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                            "aria-haspopup": !0,
+                            "aria-expanded": R,
+                            onPress: ()=>{
+                                I && T();
+                            },
+                            style: {
+                                pointerEvents: I ? "auto" : "none",
+                                opacity: I ? 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, {
+                                size: 8,
+                                style: {
+                                    transform: `rotate(${R ? -90 : 90}deg)`
+                                }
+                            })
+                        })
+                    }),
+                    p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Gn, {
+                        section: n,
+                        isLargeNavigationBar: u,
+                        index: t
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(Un, {
+                        section: n,
+                        isLargeNavigationBar: u,
+                        leftPosition: h,
+                        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();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
+        className: (0, _classnames.default)(_navigationbarcssmistica.desktopOnly, _navigationbarcssmistica.mainNavBarSectionsContainer),
+        style: {
+            paddingLeft: s ? 0 : 48,
+            paddingRight: !s && d ? 136 : 0
+        },
+        onMouseEnter: ()=>{
+            p !== -1 && u(p);
+        },
+        onMouseLeave: a,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+            space: 32,
+            children: n.map((f, m)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
+                    index: m,
+                    selectedIndex: t,
+                    navigationBarRef: i,
+                    isFirstSection: m === 0,
+                    isLastSection: m === n.length - 1,
+                    variant: r,
+                    section: f,
+                    isLargeNavigationBar: s,
+                    desktopLargeMenu: c
+                }, m))
+        })
+    });
+}, 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;
+    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)`
+        } : 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, {
+        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, {
+        sections: n,
+        selectedIndex: t,
+        navigationBarRef: b,
+        variant: r,
+        hasRightContent: !!i,
+        isLargeNavigationBar: h,
+        desktopLargeMenu: a
+    }), x = ()=>{
+        I(!0), g({
+            isModalOpen: !0
+        });
+    }, v = ()=>{
+        I(!1), g({
+            isModalOpen: !1
+        });
+    }, S = n.length > 1, E = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        variant: r,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(ee, {
+                topFixed: s,
+                withBorder: d,
+                isBurgerMenuOpen: k,
+                variant: r,
+                dataAttributes: {
+                    "component-name": "MainNavigationBar"
+                },
+                children: [
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(Wn, {
+                        isLargeNavigationBar: h
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(zn, {
+                        isLargeNavigationBar: h,
+                        desktopLargeMenu: a,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(U, {
+                                    ref: b,
+                                    right: i,
+                                    expandRightContent: h,
+                                    children: [
+                                        S && /* @__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
+                                            })
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            className: _navigationbarcssmistica.logoContainer,
+                                            children: B
+                                        }),
+                                        !h && O
+                                    ]
+                                }),
+                                h && /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                                    desktopOnly: !0,
+                                    children: O
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: h ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+            })
+        ]
+    });
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Vn, {
+        sections: n,
+        isLargeMenu: a,
+        children: M ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
+                    disabled: N,
+                    group: "burger-menu-lock",
+                    children: E
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_n, {
+                    open: k,
+                    id: l,
+                    sections: n,
+                    extra: c,
+                    closeMenu: v,
+                    disableFocusTrap: N,
+                    setDisableFocusTrap: A
+                })
+            ]
+        }) : E
+    });
+}, Rt = (param)=>{
+    let { logo: n, right: t, variant: i = "default", topFixed: r = !0, withBorder: s = !0 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
     }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: t,
+        variant: i,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
                 topFixed: r,
-                withBorder: a,
-                variant: t,
+                withBorder: s,
+                variant: i,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
-                            right: o,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+                            right: t,
+                            expandRightContent: !0,
                             children: n
                         })
                     })
@@ -453,7 +1078,7 @@ const Ge = (param)=>{
             })
         ]
     });
-}, Nn = (param)=>{
+}, xt = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -464,13 +1089,13 @@ const Ge = (param)=>{
             children: n
         })
     });
-}, Bn = (_param)=>{
-    var { children: n } = _param, o = _object_without_properties(_param, [
+}, Tt = (_param)=>{
+    var { children: n } = _param, t = _object_without_properties(_param, [
         "children"
     ]);
-    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, o), {
-        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
+        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[i ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },