@telefonica/mistica 17.3.0 → 17.5.0

package/dist/navigation-bar.js

@@ -11,46 +11,43 @@ function _export(target, all) {
 }
 _export(exports, {
     get FunnelNavigationBar () {
-        return yt;
+        return cn;
     },
     get MainNavigationBar () {
-        return Lt;
+        return rn;
     },
     get NavigationBar () {
-        return wn;
+        return _navigationshared.NavigationBar;
     },
     get NavigationBarAction () {
-        return Pt;
+        return ln;
     },
     get NavigationBarActionGroup () {
-        return Dt;
+        return un;
     },
     get useMainNavigationBarDesktopMenuState () {
-        return _;
+        return H;
     }
 });
 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_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");
 const _hooks = require("./hooks.js");
-const _iconmenuregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-menu-regular.js"));
-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 _list = require("./list.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));
-const _portal = require("./portal.js");
+const _mobilenavigationmenu = require("./mobile-navigation-menu.js");
+const _navigationshared = require("./navigation-shared.js");
 const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));
 const _modalcontextprovider = require("./modal-context-provider.js");
 const _logo = require("./logo.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _navigationbarcssmistica = require("./navigation-bar.css-mistica.js");
+const _navigationsharedcssmistica = require("./navigation-shared.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
@@ -189,168 +186,33 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Pn = 120, Hn = (param)=>{
-    let { size: n = 24, color: t = _skincontractcssmistica.vars.colors.neutralHigh, style: i, className: a } = param;
+const vt = 120, Se = "burger-menu-lock", gt = (param)=>{
+    let { size: t = 24, color: n = _skincontractcssmistica.vars.colors.neutralHigh, style: i, className: s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
-        width: n,
-        height: n,
+        width: t,
+        height: t,
         viewBox: "0 0 8 8",
         style: i,
-        className: a,
+        className: s,
         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
+            fill: n
         })
     });
-}, _n = (param)=>{
-    let { isOpen: n } = param;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        className: _navigationbarcssmistica.burgerIconContainer,
-        role: "presentation",
-        "data-testid": "BurgerMenuIcon",
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: n ? _navigationbarcssmistica.iconCloseOpen : _navigationbarcssmistica.iconCloseHidden,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
-            }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: n ? _navigationbarcssmistica.iconMenuHidden : _navigationbarcssmistica.iconMenuOpen,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmenuregular.default, {})
-            })
-        ]
-    });
-}, ae = (param)=>{
-    let { children: n, topFixed: t, withBorder: i, isBurgerMenuOpen: a, variant: r, dataAttributes: s } = param;
-    const { isDarkMode: l } = (0, _hooks.useTheme)(), d = ()=>(r === "brand" || r === "negative") && !l || !i ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : a ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, f = {
-        default: _skincontractcssmistica.vars.colors.background,
-        brand: _skincontractcssmistica.vars.colors.navigationBarBackground,
-        negative: _skincontractcssmistica.vars.colors.backgroundNegative,
-        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]: t
-        }),
-        style: {
-            background: f[r]
-        }
-    }, (0, _dom.getPrefixedDataAttributes)(s)), {
-        children: n
-    }));
-}, z = /*#__PURE__*/ _react.forwardRef((param, r)=>{
-    let { right: n, children: t, desktopOnly: i, expandRightContent: a } = param;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        ref: r,
-        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
-            [_navigationbarcssmistica.desktopOnly]: i
-        }),
-        children: [
-            t,
-            n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: a ? _navigationbarcssmistica.navigationBarContentRightExpanded : _navigationbarcssmistica.navigationBarContentRight,
-                children: n
-            })
-        ]
-    });
-}), F = (param)=>{
-    let { children: n, wide: t, backgroundColor: i } = param;
-    if (!t) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-        backgroundColor: i,
-        children: n
-    });
-    const a = {
-        mobile: 16,
-        tablet: 24,
-        desktop: 24
-    };
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-        width: "100%",
-        paddingX: t === !0 ? a : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, a, t.paddingX),
-        background: i,
-        children: n
-    });
-}, wn = (param)=>{
-    let { onBack: n, title: t, titleAs: i, right: a, variant: r = "default", topFixed: s = !0, withBorder: l = !0, wide: d = !1 } = param;
-    const { texts: f, t: m } = (0, _hooks.useTheme)(), M = /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
-        right: a,
-        expandRightContent: !0,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-            space: 24,
-            alignItems: "center",
-            children: [
-                n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                    "aria-label": f.backNavigationBar || m(_texttokens.backNavigationBar),
-                    onPress: n,
-                    Icon: _iconchevronleftregular.default,
-                    bleedLeft: !0,
-                    bleedRight: !0
-                }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                    regular: !0,
-                    truncate: !0,
-                    as: i,
-                    children: t
-                })
-            ]
-        })
-    }), c = ()=>{
-        var _d_paddingX;
-        return typeof d != "object" ? 0 : (_d_paddingX = d.paddingX) !== null && _d_paddingX !== void 0 ? _d_paddingX : 0;
-    }, u = (0, _themevariantcontext.normalizeVariant)(r);
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: u,
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
-                topFixed: s,
-                withBorder: l,
-                variant: u,
-                dataAttributes: {
-                    testid: "NavigationBar"
-                },
-                children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
-                    wide: d,
-                    children: M
-                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    width: "100%",
-                    paddingX: c(),
-                    children: M
-                })
-            }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _navigationbarcssmistica.spacer
-            })
-        ]
-    });
-}, K = (n, t)=>n.href === void 0 && n.onPress === void 0 && n.to === void 0 ? {
-        onPress: t
-    } : n.onPress ? {
+}, G = (t, n)=>t.href === void 0 && t.onPress === void 0 && t.to === void 0 ? {
+        onPress: n
+    } : t.onPress ? {
         onPress: ()=>{
-            n.onPress(), t();
+            t.onPress(), n();
         }
-    } : _object_spread_props(_object_spread({}, n), {
-        onNavigate: ()=>t()
-    }), Vn = {
-    opening: {
-        close: "closing",
-        finishOpen: "opened"
-    },
-    opened: {
-        close: "closing"
-    },
-    closing: {
-        open: "opening",
-        finishClose: "closed"
-    },
-    closed: {
-        open: "opening"
-    }
-}, $n = (n, t)=>Vn[n][t] || n, Fn = (param)=>{
-    let { section: n, closeSubMenu: t, closeMenu: i } = param;
-    const { texts: a, t: r } = (0, _hooks.useTheme)(), { title: s, menu: l } = n, d = _object_without_properties(n, [
+    } : _object_spread_props(_object_spread({}, t), {
+        onNavigate: ()=>n()
+    }), Mt = (param)=>{
+    let { section: t, closeSubMenu: n, closeMenu: i } = param;
+    const { texts: s, t: c } = (0, _hooks.useTheme)(), { title: u, menu: l } = t, h = _object_without_properties(t, [
         "title",
         "menu"
-    ]), f = (l === null || l === void 0 ? void 0 : l.columns) || [], m = l === null || l === void 0 ? void 0 : l.content, M = d.href !== void 0 || d.onPress !== void 0 || d.to !== void 0;
+    ]), p = (l === null || l === void 0 ? void 0 : l.columns) || [], d = l === null || l === void 0 ? void 0 : l.content, M = h.href !== void 0 || h.onPress !== void 0 || h.to !== void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
             space: 32,
@@ -358,9 +220,9 @@ const Pn = 120, Hn = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(wn, {
-                            title: a.backNavigationBar || r(_texttokens.backNavigationBar),
-                            onBack: t,
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBar, {
+                            title: s.backNavigationBar || c(_texttokens.backNavigationBar),
+                            onBack: n,
                             topFixed: !1,
                             withBorder: !1
                         }),
@@ -370,139 +232,90 @@ const Pn = 120, Hn = (param)=>{
                                 bleedY: !0,
                                 bleedRight: !0,
                                 withChevron: !0
-                            }, K(d, i)), {
-                                children: a.mainNavigationBarSectionSeeAll || r(_texttokens.mainNavigationBarSectionSeeAll)
+                            }, G(h, i)), {
+                                children: s.mainNavigationBarSectionSeeAll || c(_texttokens.mainNavigationBarSectionSeeAll)
                             })) : void 0,
-                            children: s
+                            children: u
                         })
                     ]
                 }),
-                m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingBottom: 16,
-                    children: typeof m == "function" ? m({
+                    children: typeof d == "function" ? d({
                         closeMenu: i
-                    }) : m
-                }) : f.map((c, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    }) : d
+                }) : p.map((a, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_title.Title1, {
                                 children: [
                                     " ",
-                                    c.title
+                                    a.title
                                 ]
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                    children: c.items.map((_param, b)=>{
-                                        var { title: h } = _param, S = _object_without_properties(_param, [
+                                    children: a.items.map((_param, g)=>{
+                                        var { title: f } = _param, v = _object_without_properties(_param, [
                                             "title"
                                         ]);
                                         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
-                                            title: h
-                                        }, K(S, i)), b);
+                                            title: f
+                                        }, G(v, i)), g);
                                     })
                                 })
                             })
                         ]
-                    }, u))
+                    }, r))
             ]
         })
     });
-}, Wn = (param)=>{
-    let { sections: n, slot: t, closeMenu: i, open: a, topSlotHeight: r, id: s, disableFocusTrap: l, setDisableFocusTrap: d } = param;
-    const { isDarkMode: f, texts: m, t: M } = (0, _hooks.useTheme)(), [c, u] = _react.useState(-1), [h, S] = _react.useState(!1), [b, I] = _react.useReducer($n, "closed"), R = _react.useRef(null), C = f ? 1 : 0.2, v = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.BURGER_MENU_ANIMATION_DURATION_MS;
-    _react.useEffect(()=>{
-        let g;
-        return h ? (I("open"), g = setTimeout(()=>I("finishOpen"), v)) : (I("close"), g = setTimeout(()=>I("finishClose"), v)), ()=>clearTimeout(g);
-    }, [
-        h,
-        v
-    ]);
-    const B = _react.useRef(null);
-    return _react.useEffect(()=>{
-        var _B_current_querySelector, _B_current;
-        b === "opening" && ((_B_current = B.current) === null || _B_current === void 0 ? void 0 : (_B_current_querySelector = _B_current.querySelector(`button[aria-label="${m.backNavigationBar || M(_texttokens.backNavigationBar)}"]`)) === null || _B_current_querySelector === void 0 ? void 0 : _B_current_querySelector.focus());
-    }, [
-        b,
-        M,
-        m
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-            disabled: l,
-            group: "burger-menu-lock",
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                onEntered: ()=>d(!1),
-                onExiting: ()=>d(!0),
-                onExited: ()=>{
-                    S(!1), u(-1);
-                },
-                classNames: _navigationbarcssmistica.burgerMenuTransition,
-                in: a,
-                nodeRef: R,
-                timeout: v,
-                mountOnEnter: !0,
-                unmountOnExit: !0,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                    className: _navigationbarcssmistica.burgerMenu,
-                    style: {
-                        boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${C})`,
-                        top: _theme.NAVBAR_HEIGHT_MOBILE + r
-                    },
-                    id: s,
-                    ref: R,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: _navigationbarcssmistica.burgerMenuContainer,
-                        children: [
-                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: _navigationbarcssmistica.burgerMenuContentContainer,
-                                style: {
-                                    transform: `translate(${h ? "-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, p)=>{
-                                                    var { title: g, menu: O } = _param, L = _object_without_properties(_param, [
-                                                        "title",
-                                                        "menu"
-                                                    ]);
-                                                    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
-                                                        title: g
-                                                    }, O ? {
-                                                        onPress: ()=>{
-                                                            S(!0), u(p);
-                                                        }
-                                                    } : K(L, i)), p);
-                                                })
-                                            })
-                                        }),
-                                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                            paddingY: 16,
-                                            children: t
-                                        })
-                                    ]
-                                })
-                            }),
-                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: _navigationbarcssmistica.burgerMenuContentContainer,
-                                ref: B,
-                                style: {
-                                    transform: `translate(${h ? "0" : "100vw"})`
-                                },
-                                children: b !== "closed" && c !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(Fn, {
-                                    section: n[c],
-                                    closeMenu: i,
-                                    closeSubMenu: ()=>S(!1)
-                                })
-                            })
-                        ]
+}, St = (param)=>{
+    let { sections: t, slot: n, closeMenu: i, open: s, topSlotHeight: c, id: u, disableFocusTrap: l, setDisableFocusTrap: h } = param;
+    const [p, d] = _react.useState(-1), [M, a] = _react.useState(!1);
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_mobilenavigationmenu.MobileNavigationMenu, {
+        open: s,
+        id: u,
+        topOffset: _theme.NAVBAR_HEIGHT_MOBILE + c,
+        showSecondLevel: M,
+        onExited: ()=>{
+            a(!1), d(-1);
+        },
+        focusTrapGroup: Se,
+        disableFocusTrap: l,
+        setDisableFocusTrap: h,
+        firstLevel: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                        children: t.map((_param, g)=>{
+                            var { title: r, menu: f } = _param, v = _object_without_properties(_param, [
+                                "title",
+                                "menu"
+                            ]);
+                            return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
+                                title: r
+                            }, f ? {
+                                onPress: ()=>{
+                                    a(!0), d(g);
+                                }
+                            } : G(v, i)), g);
+                        })
                     })
+                }),
+                n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingY: 16,
+                    children: n
                 })
-            })
-        })
+            ]
+        }),
+        secondLevel: p !== -1 ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Mt, {
+            section: t[p],
+            closeMenu: i,
+            closeSubMenu: ()=>a(!1)
+        }) : null
     });
-}, Gn = {
+}, Nt = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -519,7 +332,7 @@ const Pn = 120, Hn = (param)=>{
     closed: {
         open: "opening"
     }
-}, Un = (n, t)=>Gn[n][t] || n, ke = /*#__PURE__*/ _react.createContext({
+}, bt = (t, n)=>Nt[t][n] || t, Ne = /*#__PURE__*/ _react.createContext({
     isMenuOpen: !1,
     openedSection: -1,
     menuHeight: "0px",
@@ -531,99 +344,99 @@ const Pn = 120, Hn = (param)=>{
     setFocusedItem: ()=>{},
     debouncedOpenSectionMenu: ()=>{},
     cancelDebouncedOpenSectionMenu: ()=>{}
-}), Xn = (param)=>{
-    let { children: n, sections: t, isLargeMenu: i } = param;
-    const { isTabletOrSmaller: a } = (0, _hooks.useScreenSize)(), [r, s] = _react.useState(!1), [l, d] = _react.useState("0px"), [f, m] = _react.useReducer(Un, "closed"), [M, c] = _react.useState(-1), [u, h] = _react.useState(), [S, b] = _react.useState(!1), [I, R] = _react.useState(!1), [C, v] = _react.useState(-1), B = _react.useCallback((p)=>{
-        var _t_p;
-        c(-1), (t === null || t === void 0 ? void 0 : (_t_p = t[p]) === null || _t_p === void 0 ? void 0 : _t_p.menu) ? (R(!0), v(p)) : (b(!1), R(!1));
+}), Bt = (param)=>{
+    let { children: t, sections: n, isLargeMenu: i } = param;
+    const { isTabletOrSmaller: s } = (0, _hooks.useScreenSize)(), [c, u] = _react.useState(!1), [l, h] = _react.useState("0px"), [p, d] = _react.useReducer(bt, "closed"), [M, a] = _react.useState(-1), [r, f] = _react.useState(), [v, g] = _react.useState(!1), [T, y] = _react.useState(!1), [b, S] = _react.useState(-1), B = _react.useCallback((m)=>{
+        var _n_m;
+        a(-1), (n === null || n === void 0 ? void 0 : (_n_m = n[m]) === null || _n_m === void 0 ? void 0 : _n_m.menu) ? (y(!0), S(m)) : (g(!1), y(!1));
     }, [
-        t
-    ]), g = _react.useMemo(()=>(0, _helpers.debounce)(B, Pn), [
+        n
+    ]), N = _react.useMemo(()=>(0, _helpers.debounce)(B, vt), [
         B
-    ]), O = _react.useCallback(()=>{
-        b(!1), R(!1), g.cancel(), c(-1);
+    ]), A = _react.useCallback(()=>{
+        g(!1), y(!1), N.cancel(), a(-1);
     }, [
-        g
+        N
     ]);
     _react.useEffect(()=>{
-        a && O();
+        s && A();
     }, [
-        a,
-        O
+        s,
+        A
     ]), _react.useEffect(()=>{
-        !I && !S ? (s(!1), d("0px")) : s(!0);
+        !T && !v ? (u(!1), h("0px")) : u(!0);
     }, [
-        S,
-        I
+        v,
+        T
     ]), _react.useEffect(()=>{
-        const p = (0, _platform.isRunningAcceptanceTest)() || !i ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
-        let T;
-        return r ? (m("open"), T = setTimeout(()=>m("finishOpen"), p)) : (m("close"), T = setTimeout(()=>m("finishClose"), p)), ()=>clearTimeout(T);
+        const m = (0, _platform.isRunningAcceptanceTest)() || !i ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
+        let E;
+        return c ? (d("open"), E = setTimeout(()=>d("finishOpen"), m)) : (d("close"), E = setTimeout(()=>d("finishClose"), m)), ()=>clearTimeout(E);
     }, [
-        r,
+        c,
         i
     ]), _react.useEffect(()=>{
-        f === "closed" && v(-1);
+        p === "closed" && S(-1);
     }, [
-        f
+        p
     ]);
-    const L = _react.useCallback((p)=>{
-        (0, _helpers.isEqual)(u, p) || h(p);
+    const D = _react.useCallback((m)=>{
+        (0, _helpers.isEqual)(r, m) || f(m);
     }, [
-        u
+        r
     ]);
     return _react.useEffect(()=>{
-        const p = (E)=>{
-            if (u) {
-                const k = document.querySelector("[data-navigation-bar-menu-items]"), A = Array.from((k === null || k === void 0 ? void 0 : k.querySelectorAll("a,button")) || []), x = A.findIndex(($)=>$.hasAttribute(`data-navigation-bar-menu-item-${u.column}-${u.index}`)), D = E ? x - 1 : x + 1;
-                A[(D + A.length) % A.length].focus();
+        const m = (O)=>{
+            if (r) {
+                const C = document.querySelector("[data-navigation-bar-menu-items]"), I = Array.from((C === null || C === void 0 ? void 0 : C.querySelectorAll("a,button")) || []), L = I.findIndex((_)=>_.hasAttribute(`data-navigation-bar-menu-item-${r.column}-${r.index}`)), x = O ? L - 1 : L + 1;
+                I[(x + I.length) % I.length].focus();
             }
-        }, T = (E)=>{
-            switch(E.key){
+        }, E = (O)=>{
+            switch(O.key){
                 case _keys.DOWN:
-                    u && ((0, _dom.cancelEvent)(E), p());
+                    r && ((0, _dom.cancelEvent)(O), m());
                     break;
                 case _keys.UP:
-                    u && ((0, _dom.cancelEvent)(E), p(!0));
+                    r && ((0, _dom.cancelEvent)(O), m(!0));
                     break;
                 case _keys.ESC:
-                    O();
+                    A();
                     break;
             }
         };
-        return document.addEventListener("keydown", T, !1), ()=>{
-            document.removeEventListener("keydown", T, !1);
+        return document.addEventListener("keydown", E, !1), ()=>{
+            document.removeEventListener("keydown", E, !1);
         };
     }, [
-        O,
-        u
+        A,
+        r
     ]), _react.useEffect(()=>{
-        h(void 0);
+        f(void 0);
     }, [
-        C
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(ke.Provider, {
+        b
+    ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(Ne.Provider, {
         value: {
-            isMenuOpen: r,
-            openedSection: C,
+            isMenuOpen: c,
+            openedSection: b,
             menuHeight: l,
-            menuStatus: f,
+            menuStatus: p,
             openSectionMenu: B,
-            debouncedOpenSectionMenu: (p)=>{
-                c(p), g(p);
+            debouncedOpenSectionMenu: (m)=>{
+                a(m), N(m);
             },
-            cancelDebouncedOpenSectionMenu: (p)=>{
-                p === M && (g.cancel(), c(-1));
+            cancelDebouncedOpenSectionMenu: (m)=>{
+                m === M && (N.cancel(), a(-1));
             },
-            closeMenu: O,
-            setMenuHeight: d,
-            setIsMenuHovered: b,
-            setFocusedItem: L
+            closeMenu: A,
+            setMenuHeight: h,
+            setIsMenuHovered: g,
+            setFocusedItem: D
         },
-        children: n
+        children: t
     });
-}, _ = ()=>_react.useContext(ke), Ie = (param)=>{
-    let { column: n, columnIndex: t } = param;
-    const { setFocusedItem: i, closeMenu: a } = _();
+}, H = ()=>_react.useContext(Ne), be = (param)=>{
+    let { column: t, columnIndex: n } = param;
+    const { setFocusedItem: i, closeMenu: s } = H();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 24,
         children: [
@@ -631,18 +444,18 @@ const Pn = 120, Hn = (param)=>{
                 medium: !0,
                 color: _skincontractcssmistica.vars.colors.textSecondary,
                 transform: "uppercase",
-                children: n.title
+                children: t.title
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: 16,
                 role: "list",
-                children: n.items.map((_param, l)=>{
-                    var { title: r } = _param, s = _object_without_properties(_param, [
+                children: t.items.map((_param, l)=>{
+                    var { title: c } = _param, u = _object_without_properties(_param, [
                         "title"
                     ]);
                     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         onFocus: ()=>i({
-                                column: t,
+                                column: n,
                                 index: l
                             }),
                         onBlur: ()=>i(void 0),
@@ -651,74 +464,74 @@ const Pn = 120, Hn = (param)=>{
                             underline: "on hover",
                             className: _navigationbarcssmistica.desktopMenuColumnItem,
                             dataAttributes: {
-                                [`navigation-bar-menu-item-${t}-${l}`]: "true"
+                                [`navigation-bar-menu-item-${n}-${l}`]: "true"
                             }
-                        }, K(s, a)), {
-                            children: r
+                        }, G(u, s)), {
+                            children: c
                         }))
                     }, l);
                 })
             })
         ]
     });
-}, zn = (param)=>{
-    let { section: n, index: t, isLargeNavigationBar: i, topSlotHeight: a, wide: r } = param;
-    var _n_menu, _n_menu1;
-    const s = _react.useRef(null), [l, d] = _react.useState(!1), f = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS, m = (i ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + a, M = 40, { menuStatus: c, isMenuOpen: u, openedSection: h, closeMenu: S, setIsMenuHovered: b, setMenuHeight: I } = _();
+}, Ct = (param)=>{
+    let { section: t, index: n, isLargeNavigationBar: i, topSlotHeight: s, wide: c } = param;
+    var _t_menu, _t_menu1;
+    const u = _react.useRef(null), [l, h] = _react.useState(!1), p = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS, d = (i ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + s, M = 40, { menuStatus: a, isMenuOpen: r, openedSection: f, closeMenu: v, setIsMenuHovered: g, setMenuHeight: T } = H();
     _react.useEffect(()=>{
-        if (s.current && u && (s.current.scrollTop = 0), d(!1), u) {
-            const g = setTimeout(()=>d(!0), f);
-            return ()=>clearTimeout(g);
+        if (u.current && r && (u.current.scrollTop = 0), h(!1), r) {
+            const N = setTimeout(()=>h(!0), p);
+            return ()=>clearTimeout(N);
         }
     }, [
-        u,
-        h,
-        f
+        r,
+        f,
+        p
     ]);
-    const [R, C] = _react.useState(!0);
+    const [y, b] = _react.useState(!0);
     _react.useEffect(()=>{
-        if (h === t) if (c === "opening") {
-            C(!1);
-            const g = requestAnimationFrame(()=>C(!0));
-            return ()=>cancelAnimationFrame(g);
-        } else C(!0);
+        if (f === n) if (a === "opening") {
+            b(!1);
+            const N = requestAnimationFrame(()=>b(!0));
+            return ()=>cancelAnimationFrame(N);
+        } else b(!0);
     }, [
-        c,
-        h,
-        t
+        a,
+        f,
+        n
     ]), _react.useEffect(()=>{
-        c === "closing" && d(!1);
+        a === "closing" && h(!1);
     }, [
-        c
+        a
     ]);
-    const v = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], B = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content;
+    const S = ((_t_menu = t.menu) === null || _t_menu === void 0 ? void 0 : _t_menu.columns) || [], B = t === null || t === void 0 ? void 0 : (_t_menu1 = t.menu) === null || _t_menu1 === void 0 ? void 0 : _t_menu1.content;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _navigationbarcssmistica.desktopOnly,
+        className: _navigationsharedcssmistica.desktopOnly,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
-            children: h === t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+            children: f === n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _navigationbarcssmistica.desktopMenuContainer,
-                    onMouseEnter: ()=>b(!0),
-                    onMouseLeave: ()=>b(!1),
+                    onMouseEnter: ()=>g(!0),
+                    onMouseLeave: ()=>g(!1),
                     style: {
                         // disable pointer events when menu is closing
-                        pointerEvents: c === "closed" || c === "closing" ? "none" : void 0,
-                        top: m,
-                        maxHeight: `calc(100vh - ${m}px - ${M}px)`,
+                        pointerEvents: a === "closed" || a === "closing" ? "none" : void 0,
+                        top: d,
+                        maxHeight: `calc(100vh - ${d}px - ${M}px)`,
                         overflowY: l ? "auto" : "hidden"
                     },
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
-                        wide: r,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarSideMargins, {
+                        wide: c,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenu, {
-                                [_navigationbarcssmistica.desktopMenuContentFadeIn]: R
+                                [_navigationbarcssmistica.desktopMenuContentFadeIn]: y
                             }),
-                            ref: (g)=>{
-                                g && u && I(`min(${g.scrollHeight}px, calc(100vh - ${m}px - ${M}px))`);
+                            ref: (N)=>{
+                                N && r && T(`min(${N.scrollHeight}px, calc(100vh - ${d}px - ${M}px))`);
                             },
                             children: B ? typeof B == "function" ? B({
-                                closeMenu: S
+                                closeMenu: v
                             }) : B : /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
                                 rows: 1,
                                 columns: 12,
@@ -729,13 +542,13 @@ const Pn = 120, Hn = (param)=>{
                                 dataAttributes: {
                                     "navigation-bar-menu-items": "true"
                                 },
-                                children: v.map((g, O)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                                children: S.map((N, A)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                                         columnSpan: 2,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
-                                            column: g,
-                                            columnIndex: O
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(be, {
+                                            column: N,
+                                            columnIndex: A
                                         })
-                                    }, O))
+                                    }, A))
                             })
                         })
                     })
@@ -743,11 +556,11 @@ const Pn = 120, Hn = (param)=>{
             })
         })
     });
-}, Kn = (param)=>{
-    let { isLargeNavigationBar: n, topSlotHeight: t } = param;
-    const i = (n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + t, { menuHeight: a } = _();
+}, kt = (param)=>{
+    let { isLargeNavigationBar: t, topSlotHeight: n } = param;
+    const i = (t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + n, { menuHeight: s } = H();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _navigationbarcssmistica.desktopOnly,
+        className: _navigationsharedcssmistica.desktopOnly,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _navigationbarcssmistica.desktopMenuWrapper,
             style: {
@@ -756,303 +569,303 @@ const Pn = 120, Hn = (param)=>{
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.desktopMenuBackgroundContainer,
                 style: {
-                    height: a
+                    height: s
                 }
             })
         })
     });
-}, qn = (param)=>{
-    let { section: n, isLargeNavigationBar: t, topSlotHeight: i, leftPosition: a, index: r } = param;
-    var _n_menu, _n_menu1;
-    const s = (t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + i, l = 40, d = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], f = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content, { openedSection: m, menuStatus: M, setIsMenuHovered: c, closeMenu: u } = _();
+}, Ot = (param)=>{
+    let { section: t, isLargeNavigationBar: n, topSlotHeight: i, leftPosition: s, index: c } = param;
+    var _t_menu, _t_menu1;
+    const u = (n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + i, l = 40, h = ((_t_menu = t.menu) === null || _t_menu === void 0 ? void 0 : _t_menu.columns) || [], p = t === null || t === void 0 ? void 0 : (_t_menu1 = t.menu) === null || _t_menu1 === void 0 ? void 0 : _t_menu1.content, { openedSection: d, menuStatus: M, setIsMenuHovered: a, closeMenu: r } = H();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: _navigationbarcssmistica.desktopOnly,
-        children: r === m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
+        className: _navigationsharedcssmistica.desktopOnly,
+        children: c === d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.desktopSmallMenuContainer,
-                onMouseEnter: ()=>c(!0),
-                onMouseLeave: ()=>c(!1),
+                onMouseEnter: ()=>a(!0),
+                onMouseLeave: ()=>a(!1),
                 style: {
                     // disable pointer events when menu is closing
                     pointerEvents: M === "closed" || M === "closing" ? "none" : void 0,
-                    top: s,
-                    left: a,
-                    maxHeight: `calc(100vh - ${s}px - ${l}px)`
+                    top: u,
+                    left: s,
+                    maxHeight: `calc(100vh - ${u}px - ${l}px)`
                 },
-                children: f ? typeof f == "function" ? f({
-                    closeMenu: u
-                }) : f : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                children: p ? typeof p == "function" ? p({
+                    closeMenu: r
+                }) : p : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                     space: 40,
                     dataAttributes: {
                         "navigation-bar-menu-items": "true"
                     },
-                    children: d.map((h, S)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
-                            column: h,
-                            columnIndex: S
-                        }, S))
+                    children: h.map((f, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(be, {
+                            column: f,
+                            columnIndex: v
+                        }, v))
                 })
             })
         })
     });
-}, jn = (param)=>{
-    let { section: n, index: t, selectedIndex: i, isFirstSection: a, isLastSection: r, navigationBarRef: s, variant: l, isLargeNavigationBar: d, topSlotHeight: f, desktopLargeMenu: m, wide: M } = param;
-    const { texts: c, t: u } = (0, _hooks.useTheme)(), { title: h, menu: S } = n, b = _object_without_properties(n, [
+}, It = (param)=>{
+    let { section: t, index: n, selectedIndex: i, isFirstSection: s, isLastSection: c, navigationBarRef: u, variant: l, isLargeNavigationBar: h, topSlotHeight: p, desktopLargeMenu: d, wide: M } = param;
+    const { texts: a, t: r } = (0, _hooks.useTheme)(), { title: f, menu: v } = t, g = _object_without_properties(t, [
         "title",
         "menu"
-    ]), I = _react.useRef(null), [R, C] = _react.useState(0), [v, B] = _react.useState(!1), { isMenuOpen: g, openedSection: O, openSectionMenu: L, debouncedOpenSectionMenu: p, cancelDebouncedOpenSectionMenu: T, closeMenu: E } = _(), k = b.href !== void 0 || b.onPress !== void 0 || b.to !== void 0, A = _react.useCallback((y)=>{
-        m || C((()=>{
-            var _I_current, _s_current;
-            const { left: re, right: Oe } = ((_I_current = I.current) === null || _I_current === void 0 ? void 0 : _I_current.getBoundingClientRect()) || {
+    ]), T = _react.useRef(null), [y, b] = _react.useState(0), [S, B] = _react.useState(!1), { isMenuOpen: N, openedSection: A, openSectionMenu: D, debouncedOpenSectionMenu: m, cancelDebouncedOpenSectionMenu: E, closeMenu: O } = H(), C = g.href !== void 0 || g.onPress !== void 0 || g.to !== void 0, I = _react.useCallback((R)=>{
+        d || b((()=>{
+            var _T_current, _u_current;
+            const { left: J, right: Be } = ((_T_current = T.current) === null || _T_current === void 0 ? void 0 : _T_current.getBoundingClientRect()) || {
                 left: 0,
                 right: 0
-            }, Ee = (((_s_current = s.current) === null || _s_current === void 0 ? void 0 : _s_current.getBoundingClientRect().right) || 0) - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
-            return re <= Ee ? re : Oe - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
-        })()), y ? p(t) : L(t);
+            }, Ce = (((_u_current = u.current) === null || _u_current === void 0 ? void 0 : _u_current.getBoundingClientRect().right) || 0) - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
+            return J <= Ce ? J : Be - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
+        })()), R ? m(n) : D(n);
     }, [
+        d,
+        n,
+        D,
         m,
-        t,
-        L,
-        p,
-        s
+        u
     ]);
     _react.useEffect(()=>{
-        const y = (U)=>{
-            switch(U.key){
+        const R = (F)=>{
+            switch(F.key){
                 // If arrow is focused and DOWN key is pressed, open the menu if it was closed
                 case _keys.DOWN:
-                    v && ((0, _dom.cancelEvent)(U), A());
+                    S && ((0, _dom.cancelEvent)(F), I());
                     break;
                 // If arrow is focused and UP key is pressed, close the menu if it was opened
                 case _keys.UP:
-                    v && ((0, _dom.cancelEvent)(U), E());
+                    S && ((0, _dom.cancelEvent)(F), O());
                     break;
             }
         };
-        return document.addEventListener("keydown", y, !1), ()=>{
-            document.removeEventListener("keydown", y, !1);
+        return document.addEventListener("keydown", R, !1), ()=>{
+            document.removeEventListener("keydown", R, !1);
         };
     }, [
-        t,
-        v,
-        A,
-        E,
+        n,
         S,
-        k
+        I,
+        O,
+        v,
+        C
     ]);
-    const x = g && O === t, D = _react.useCallback(()=>{
-        x ? E() : A();
+    const L = N && A === n, x = _react.useCallback(()=>{
+        L ? O() : I();
     }, [
-        x,
-        A,
-        E
-    ]), $ = _react.useCallback((y)=>k ? y : {
-            onPress: D
+        L,
+        I,
+        O
+    ]), _ = _react.useCallback((R)=>C ? R : {
+            onPress: x
         }, [
-        k,
-        D
+        C,
+        x
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.desktopMenuSectionWithArrowWrapper,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                ref: I,
+                ref: T,
                 className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenuSectionContainer, {
-                    [_navigationbarcssmistica.desktopMenuFirstSection]: a,
-                    [_navigationbarcssmistica.desktopMenuLastSection]: r
+                    [_navigationbarcssmistica.desktopMenuFirstSection]: s,
+                    [_navigationbarcssmistica.desktopMenuLastSection]: c
                 }),
-                onMouseEnter: ()=>A(!0),
-                onMouseLeave: ()=>T(t),
+                onMouseEnter: ()=>I(!0),
+                onMouseLeave: ()=>E(n),
                 onFocus: ()=>{
-                    S && !k && B(!0);
+                    v && !C && B(!0);
                 },
                 onBlur: ()=>{
-                    S && !k && B(!1);
+                    v && !C && B(!1);
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, $(b)), {
-                    "aria-label": k ? void 0 : `${n.title}, ${c.mainNavigationBarOpenSectionMenu || u(_texttokens.mainNavigationBarOpenSectionMenu)}`,
-                    "aria-haspopup": !k,
-                    "aria-expanded": k ? void 0 : x,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, _(g)), {
+                    "aria-label": C ? void 0 : `${t.title}, ${a.mainNavigationBarOpenSectionMenu || r(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                    "aria-haspopup": !C,
+                    "aria-expanded": C ? void 0 : L,
                     className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                        [_navigationbarcssmistica.selectedSectionVariants[l === "brand" ? "brand" : "default"]]: t === i
+                        [_navigationbarcssmistica.selectedSectionVariants[l === "brand" ? "brand" : "default"]]: n === i
                     }, _navigationbarcssmistica.textWrapperVariants[l === "brand" ? "brand" : "default"]),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: h
+                        children: f
                     })
                 }))
             }),
-            S && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            v && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
-                    k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    C && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: _navigationbarcssmistica.desktopMenuSectionArrowContainer,
                         onFocus: ()=>B(!0),
                         onBlur: ()=>B(!1),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _navigationbarcssmistica.desktopMenuSectionArrow,
-                            "aria-label": `${n.title}, ${c.mainNavigationBarOpenSectionMenu || u(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                            "aria-label": `${t.title}, ${a.mainNavigationBarOpenSectionMenu || r(_texttokens.mainNavigationBarOpenSectionMenu)}`,
                             "aria-haspopup": !0,
-                            "aria-expanded": x,
+                            "aria-expanded": L,
                             onPress: ()=>{
-                                v && D();
+                                S && x();
                             },
                             style: {
-                                pointerEvents: v ? "auto" : "none",
-                                opacity: v ? 1 : 0,
+                                pointerEvents: S ? "auto" : "none",
+                                opacity: S ? 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)(Hn, {
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(gt, {
                                 size: 8,
                                 style: {
-                                    transform: `rotate(${x ? -90 : 90}deg)`
+                                    transform: `rotate(${L ? -90 : 90}deg)`
                                 }
                             })
                         })
                     }),
-                    m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(zn, {
-                        section: n,
-                        isLargeNavigationBar: d,
-                        topSlotHeight: f,
-                        index: t,
+                    d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Ct, {
+                        section: t,
+                        isLargeNavigationBar: h,
+                        topSlotHeight: p,
+                        index: n,
                         wide: M
-                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(qn, {
-                        section: n,
-                        isLargeNavigationBar: d,
-                        topSlotHeight: f,
-                        leftPosition: R,
-                        index: t
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(Ot, {
+                        section: t,
+                        isLargeNavigationBar: h,
+                        topSlotHeight: p,
+                        leftPosition: y,
+                        index: n
                     })
                 ]
             })
         ]
     });
-}, Yn = (param)=>{
-    let { sections: n, selectedIndex: t, navigationBarRef: i, variant: a, isLargeNavigationBar: r, topSlotHeight: s, hasRightContent: l, desktopLargeMenu: d, wide: f } = param;
-    const { openSectionMenu: m, openedSection: M, closeMenu: c } = _();
+}, At = (param)=>{
+    let { sections: t, selectedIndex: n, navigationBarRef: i, variant: s, isLargeNavigationBar: c, topSlotHeight: u, hasRightContent: l, desktopLargeMenu: h, wide: p } = param;
+    const { openSectionMenu: d, openedSection: M, closeMenu: a } = H();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-        className: (0, _classnames.default)(_navigationbarcssmistica.desktopOnly, _navigationbarcssmistica.mainNavBarSectionsContainer),
+        className: (0, _classnames.default)(_navigationsharedcssmistica.desktopOnly, _navigationbarcssmistica.mainNavBarSectionsContainer),
         style: {
-            paddingLeft: r ? 0 : 48,
-            paddingRight: !r && l ? 136 : 0
+            paddingLeft: c ? 0 : 48,
+            paddingRight: !c && l ? 136 : 0
         },
         onMouseEnter: ()=>{
-            M !== -1 && m(M);
+            M !== -1 && d(M);
         },
-        onMouseLeave: c,
+        onMouseLeave: a,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 32,
-            children: n.map((u, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(jn, {
-                    index: h,
-                    selectedIndex: t,
+            children: t.map((r, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(It, {
+                    index: f,
+                    selectedIndex: n,
                     navigationBarRef: i,
-                    isFirstSection: h === 0,
-                    isLastSection: h === n.length - 1,
-                    variant: a,
-                    section: u,
-                    isLargeNavigationBar: r,
-                    topSlotHeight: s,
-                    desktopLargeMenu: d,
-                    wide: f
-                }, h))
+                    isFirstSection: f === 0,
+                    isLastSection: f === t.length - 1,
+                    variant: s,
+                    section: r,
+                    isLargeNavigationBar: c,
+                    topSlotHeight: u,
+                    desktopLargeMenu: h,
+                    wide: p
+                }, f))
         })
     });
-}, Zn = (param)=>{
-    let { children: n, isLargeNavigationBar: t, topSlotHeight: i, desktopLargeMenu: a } = param;
-    const { menuHeight: r } = _(), s = (t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + i;
+}, Et = (param)=>{
+    let { children: t, isLargeNavigationBar: n, topSlotHeight: i, desktopLargeMenu: s } = param;
+    const { menuHeight: c } = H(), u = (n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + i;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.mainNavigationBarContentWrapper,
-        style: a ? {
-            clipPath: `rect(0 100% calc(${s}px + ${r}) 0)`,
-            WebkitClipPath: `rect(0 100% calc(${s}px + ${r}) 0)`
+        style: s ? {
+            clipPath: `rect(0 100% calc(${u}px + ${c}) 0)`,
+            WebkitClipPath: `rect(0 100% calc(${u}px + ${c}) 0)`
         } : void 0,
-        children: n
+        children: t
     });
-}, Lt = (param)=>{
-    let { sections: n = [], selectedIndex: t, right: i, topSlot: a, topSlotBackgroundColor: r, variant: s = "default", topFixed: l = !0, withBorder: d = !0, burgerMenuSlot: f, logo: m, large: M = !1, desktopLargeMenu: c = !1, wide: u = !1 } = param;
-    const { texts: h, t: S } = (0, _hooks.useTheme)(), b = _react.useId(), { isTabletOrSmaller: I } = (0, _hooks.useScreenSize)(), R = m || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+}, rn = (param)=>{
+    let { sections: t = [], selectedIndex: n, right: i, topSlot: s, topSlotBackgroundColor: c, variant: u = "default", topFixed: l = !0, withBorder: h = !0, burgerMenuSlot: p, logo: d, large: M = !1, desktopLargeMenu: a = !1, wide: r = !1 } = param;
+    const { texts: f, t: v } = (0, _hooks.useTheme)(), g = _react.useId(), { isTabletOrSmaller: T } = (0, _hooks.useScreenSize)(), y = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), C = M && n.length > 0, [v, B] = _react.useState(!1), [g, O] = _react.useState(!0), L = _react.useRef(null), { height: p, ref: T } = (0, _hooks.useElementDimensions)(), E = (0, _modalcontextprovider.useSetModalState)(), k = (0, _themevariantcontext.normalizeVariant)(s), A = /* @__PURE__ */ (0, _jsxruntime.jsx)(Yn, {
-        sections: n,
-        selectedIndex: t,
-        navigationBarRef: L,
-        variant: k,
+    }), b = M && t.length > 0, [S, B] = _react.useState(!1), [N, A] = _react.useState(!0), D = _react.useRef(null), { height: m, ref: E } = (0, _hooks.useElementDimensions)(), O = (0, _modalcontextprovider.useSetModalState)(), C = (0, _themevariantcontext.normalizeVariant)(u), I = /* @__PURE__ */ (0, _jsxruntime.jsx)(At, {
+        sections: t,
+        selectedIndex: n,
+        navigationBarRef: D,
+        variant: C,
         hasRightContent: !!i,
-        isLargeNavigationBar: C,
-        topSlotHeight: p,
-        desktopLargeMenu: c,
-        wide: u
-    }), x = ()=>{
-        B(!0), E({
+        isLargeNavigationBar: b,
+        topSlotHeight: m,
+        desktopLargeMenu: a,
+        wide: r
+    }), L = ()=>{
+        B(!0), O({
             isModalOpen: !0
         });
-    }, D = ()=>{
-        B(!1), E({
+    }, x = ()=>{
+        B(!1), O({
             isModalOpen: !1
         });
-    }, $ = n.length > 1, y = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: k,
+    }, _ = t.length > 1, R = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        variant: C,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)(ae, {
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_navigationshared.Header, {
                 topFixed: l,
-                withBorder: d,
-                isBurgerMenuOpen: v,
-                variant: k,
+                withBorder: h,
+                isBurgerMenuOpen: S,
+                variant: C,
                 dataAttributes: {
                     testid: "MainNavigationBar"
                 },
                 children: [
-                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
-                        isLargeNavigationBar: C,
-                        topSlotHeight: p
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(kt, {
+                        isLargeNavigationBar: b,
+                        topSlotHeight: m
                     }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(Zn, {
-                        isLargeNavigationBar: C,
-                        topSlotHeight: p,
-                        desktopLargeMenu: c,
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(Et, {
+                        isLargeNavigationBar: b,
+                        topSlotHeight: m,
+                        desktopLargeMenu: a,
                         children: [
-                            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
-                                wide: u,
-                                backgroundColor: r,
+                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarSideMargins, {
+                                wide: r,
+                                backgroundColor: c,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                    ref: T,
-                                    children: a
+                                    ref: E,
+                                    children: s
                                 })
                             }),
-                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(F, {
-                                wide: u,
+                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_navigationshared.NavigationBarSideMargins, {
+                                wide: r,
                                 children: [
-                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(z, {
-                                        ref: L,
+                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_navigationshared.NavigationBarContentContainer, {
+                                        ref: D,
                                         right: i,
-                                        expandRightContent: C,
+                                        expandRightContent: b,
                                         children: [
-                                            $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
-                                                className: _navigationbarcssmistica.burgerMenuButton,
+                                            _ && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                                                className: _navigationsharedcssmistica.burgerMenuButton,
                                                 "aria-live": "polite",
-                                                "aria-label": v ? h.closeNavigationMenu || S(_texttokens.closeNavigationMenu) : h.openNavigationMenu || S(_texttokens.openNavigationMenu),
-                                                "aria-expanded": v,
-                                                "aria-controls": b,
-                                                onPress: v ? D : x,
-                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_n, {
-                                                    isOpen: v
+                                                "aria-label": S ? f.closeNavigationMenu || v(_texttokens.closeNavigationMenu) : f.openNavigationMenu || v(_texttokens.openNavigationMenu),
+                                                "aria-expanded": S,
+                                                "aria-controls": g,
+                                                onPress: S ? x : L,
+                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.BurgerMenuIcon, {
+                                                    isOpen: S
                                                 })
                                             }),
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                className: _navigationbarcssmistica.logoContainer,
-                                                children: R
+                                                className: _navigationsharedcssmistica.logoContainer,
+                                                children: y
                                             }),
-                                            !C && A
+                                            !b && I
                                         ]
                                     }),
-                                    C && /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
+                                    b && /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarContentContainer, {
                                         desktopOnly: !0,
-                                        children: A
+                                        children: I
                                     })
                                 ]
                             })
@@ -1060,42 +873,42 @@ const Pn = 120, Hn = (param)=>{
                     })
                 ]
             }),
-            l && p > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            l && m > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    height: p
+                    height: m
                 }
             }),
             l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: C ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+                className: b ? _navigationbarcssmistica.spacerLarge : _navigationsharedcssmistica.spacer
             })
         ]
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Xn, {
-        sections: n,
-        isLargeMenu: c,
-        children: I ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Bt, {
+        sections: t,
+        isLargeMenu: a,
+        children: T ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                    disabled: g,
-                    group: "burger-menu-lock",
-                    children: y
+                    disabled: N,
+                    group: Se,
+                    children: R
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(Wn, {
-                    open: v,
-                    id: b,
-                    sections: n,
-                    slot: f,
-                    closeMenu: D,
-                    topSlotHeight: p,
-                    disableFocusTrap: g,
-                    setDisableFocusTrap: O
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(St, {
+                    open: S,
+                    id: g,
+                    sections: t,
+                    slot: p,
+                    closeMenu: x,
+                    topSlotHeight: m,
+                    disableFocusTrap: N,
+                    setDisableFocusTrap: A
                 })
             ]
-        }) : y
+        }) : R
     });
-}, yt = (param)=>{
-    let { logo: n, right: t, variant: i = "default", topFixed: a = !0, withBorder: r = !0, wide: s = !1 } = param;
-    n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+}, cn = (param)=>{
+    let { logo: t, right: n, variant: i = "default", topFixed: s = !0, withBorder: c = !0, wide: u = !1 } = param;
+    t = t !== null && t !== void 0 ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
@@ -1105,47 +918,47 @@ const Pn = 120, Hn = (param)=>{
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: l,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
-                topFixed: a,
-                withBorder: r,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.Header, {
+                topFixed: s,
+                withBorder: c,
                 variant: l,
                 dataAttributes: {
                     testid: "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
-                    wide: s,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarSideMargins, {
+                    wide: u,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
-                            right: t,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_navigationshared.NavigationBarContentContainer, {
+                            right: n,
                             expandRightContent: !0,
-                            children: n
+                            children: t
                         })
                     })
                 })
             }),
-            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _navigationbarcssmistica.spacer
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _navigationsharedcssmistica.spacer
             })
         ]
     });
-}, Dt = (param)=>{
-    let { children: n } = param;
+}, un = (param)=>{
+    let { children: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
         "data-testid": "NavigationBarActionGroup",
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 24,
             alignItems: "center",
-            children: n
+            children: t
         })
     });
-}, Pt = (_param)=>{
-    var { children: n } = _param, t = _object_without_properties(_param, [
+}, ln = (_param)=>{
+    var { children: t } = _param, n = _object_without_properties(_param, [
         "children"
     ]);
     const i = (0, _themevariantcontext.useThemeVariant)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, n), {
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[i]),
         dataAttributes: {
             testid: "NavigationBarAction"
@@ -1153,11 +966,11 @@ const Pn = 120, Hn = (param)=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 16,
             alignItems: "center",
-            children: _react.Children.map(n, (a)=>typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            children: _react.Children.map(t, (s)=>typeof s == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: "inherit",
-                    children: a
-                }) : a)
+                    children: s
+                }) : s)
         })
     }));
 };