@telefonica/mistica 16.71.0 → 17.0.0

package/dist/navigation-bar.js

@@ -17,7 +17,7 @@ _export(exports, {
         return Lt;
     },
     get NavigationBar () {
-        return Vn;
+        return wn;
     },
     get NavigationBarAction () {
         return Pt;
@@ -190,13 +190,13 @@ 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: a, className: i } = param;
+    let { size: n = 24, color: t = _skincontractcssmistica.vars.colors.neutralHigh, style: i, className: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: n,
         height: n,
         viewBox: "0 0 8 8",
-        style: a,
-        className: i,
+        style: i,
+        className: a,
         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
@@ -207,7 +207,7 @@ const Pn = 120, Hn = (param)=>{
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
         role: "presentation",
-        "data-component-name": "BurgerMenuIcon",
+        "data-testid": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: n ? _navigationbarcssmistica.iconCloseOpen : _navigationbarcssmistica.iconCloseHidden,
@@ -219,9 +219,9 @@ const Pn = 120, Hn = (param)=>{
             })
         ]
     });
-}, ie = (param)=>{
-    let { children: n, topFixed: t, withBorder: a, isBurgerMenuOpen: i, variant: r, dataAttributes: c } = param;
-    const { isDarkMode: l } = (0, _hooks.useTheme)(), h = ()=>(r === "brand" || r === "negative") && !l || !a ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : i ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, d = {
+}, 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,
@@ -229,58 +229,58 @@ const Pn = 120, Hn = (param)=>{
         media: _skincontractcssmistica.vars.colors.navigationBarBackground
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(h(), {
+        className: (0, _classnames.default)(d(), {
             [_navigationbarcssmistica.topFixed]: t
         }),
         style: {
-            background: d[r]
+            background: f[r]
         }
-    }, (0, _dom.getPrefixedDataAttributes)(c)), {
+    }, (0, _dom.getPrefixedDataAttributes)(s)), {
         children: n
     }));
 }, z = /*#__PURE__*/ _react.forwardRef((param, r)=>{
-    let { right: n, children: t, desktopOnly: a, expandRightContent: i } = param;
+    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]: a
+            [_navigationbarcssmistica.desktopOnly]: i
         }),
         children: [
             t,
             n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: i ? _navigationbarcssmistica.navigationBarContentRightExpanded : _navigationbarcssmistica.navigationBarContentRight,
+                className: a ? _navigationbarcssmistica.navigationBarContentRightExpanded : _navigationbarcssmistica.navigationBarContentRight,
                 children: n
             })
         ]
     });
 }), F = (param)=>{
-    let { children: n, wide: t, backgroundColor: a } = param;
+    let { children: n, wide: t, backgroundColor: i } = param;
     if (!t) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-        backgroundColor: a,
+        backgroundColor: i,
         children: n
     });
-    const i = {
+    const a = {
         mobile: 16,
         tablet: 24,
         desktop: 24
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         width: "100%",
-        paddingX: t === !0 ? i : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, i, t.paddingX),
-        background: a,
+        paddingX: t === !0 ? a : typeof t.paddingX == "number" ? t.paddingX : _object_spread({}, a, t.paddingX),
+        background: i,
         children: n
     });
-}, Vn = (param)=>{
-    let { onBack: n, title: t, titleAs: a, right: i, variant: r = "default", topFixed: c = !0, paddingX: l = 0, withBorder: h = !0, wide: d = !1 } = param;
-    const { texts: m, t: M } = (0, _hooks.useTheme)(), s = /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
-        right: i,
+}, 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": m.backNavigationBar || M(_texttokens.backNavigationBar),
+                    "aria-label": f.backNavigationBar || m(_texttokens.backNavigationBar),
                     onPress: n,
                     Icon: _iconchevronleftregular.default,
                     bleedLeft: !0,
@@ -289,35 +289,35 @@ const Pn = 120, Hn = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                     regular: !0,
                     truncate: !0,
-                    as: a,
+                    as: i,
                     children: t
                 })
             ]
         })
-    }), u = ()=>{
+    }), c = ()=>{
         var _d_paddingX;
-        return d !== void 0 ? typeof d != "object" ? 0 : (_d_paddingX = d.paddingX) !== null && _d_paddingX !== void 0 ? _d_paddingX : 0 : l;
-    }, p = (0, _themevariantcontext.normalizeVariant)(r);
+        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: p,
+        variant: u,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
-                topFixed: c,
-                withBorder: h,
-                variant: p,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                topFixed: s,
+                withBorder: l,
+                variant: u,
                 dataAttributes: {
-                    "component-name": "NavigationBar"
+                    testid: "NavigationBar"
                 },
-                children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
+                children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
                     wide: d,
-                    children: s
+                    children: M
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     width: "100%",
-                    paddingX: u(),
-                    children: s
+                    paddingX: c(),
+                    children: M
                 })
             }),
-            c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
@@ -330,7 +330,7 @@ const Pn = 120, Hn = (param)=>{
         }
     } : _object_spread_props(_object_spread({}, n), {
         onNavigate: ()=>t()
-    }), $n = {
+    }), Vn = {
     opening: {
         close: "closing",
         finishOpen: "opened"
@@ -345,12 +345,12 @@ const Pn = 120, Hn = (param)=>{
     closed: {
         open: "opening"
     }
-}, wn = (n, t)=>$n[n][t] || n, Fn = (param)=>{
-    let { section: n, closeSubMenu: t, closeMenu: a } = param;
-    const { texts: i, t: r } = (0, _hooks.useTheme)(), { title: c, menu: l } = n, h = _object_without_properties(n, [
+}, $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, [
         "title",
         "menu"
-    ]), d = (l === null || l === void 0 ? void 0 : l.columns) || [], m = l === null || l === void 0 ? void 0 : l.content, M = h.href !== void 0 || h.onPress !== void 0 || h.to !== void 0;
+    ]), 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;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
             space: 32,
@@ -358,8 +358,8 @@ const Pn = 120, Hn = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 16,
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(Vn, {
-                            title: i.backNavigationBar || r(_texttokens.backNavigationBar),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(wn, {
+                            title: a.backNavigationBar || r(_texttokens.backNavigationBar),
                             onBack: t,
                             topFixed: !1,
                             withBorder: !1
@@ -370,36 +370,36 @@ const Pn = 120, Hn = (param)=>{
                                 bleedY: !0,
                                 bleedRight: !0,
                                 withChevron: !0
-                            }, K(h, a)), {
-                                children: i.mainNavigationBarSectionSeeAll || r(_texttokens.mainNavigationBarSectionSeeAll)
+                            }, K(d, i)), {
+                                children: a.mainNavigationBarSectionSeeAll || r(_texttokens.mainNavigationBarSectionSeeAll)
                             })) : void 0,
-                            children: c
+                            children: s
                         })
                     ]
                 }),
                 m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingBottom: 16,
                     children: typeof m == "function" ? m({
-                        closeMenu: a
+                        closeMenu: i
                     }) : m
-                }) : d.map((s, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                }) : f.map((c, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_title.Title1, {
                                 children: [
                                     " ",
-                                    s.title
+                                    c.title
                                 ]
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                    children: s.items.map((_param, b)=>{
-                                        var { title: p } = _param, S = _object_without_properties(_param, [
+                                    children: c.items.map((_param, b)=>{
+                                        var { title: h } = _param, S = _object_without_properties(_param, [
                                             "title"
                                         ]);
                                         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({
-                                            title: p
-                                        }, K(S, a)), b);
+                                            title: h
+                                        }, K(S, i)), b);
                                     })
                                 })
                             })
@@ -409,13 +409,13 @@ const Pn = 120, Hn = (param)=>{
         })
     });
 }, Wn = (param)=>{
-    let { sections: n, extra: t, closeMenu: a, open: i, topSlotHeight: r, id: c, disableFocusTrap: l, setDisableFocusTrap: h } = param;
-    const { isDarkMode: d, texts: m, t: M } = (0, _hooks.useTheme)(), [s, u] = _react.useState(-1), [p, S] = _react.useState(!1), [b, I] = _react.useReducer(wn, "closed"), R = _react.useRef(null), C = d ? 1 : 0.2, v = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.BURGER_MENU_ANIMATION_DURATION_MS;
+    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 p ? (I("open"), g = setTimeout(()=>I("finishOpen"), v)) : (I("close"), g = setTimeout(()=>I("finishClose"), v)), ()=>clearTimeout(g);
+        return h ? (I("open"), g = setTimeout(()=>I("finishOpen"), v)) : (I("close"), g = setTimeout(()=>I("finishClose"), v)), ()=>clearTimeout(g);
     }, [
-        p,
+        h,
         v
     ]);
     const B = _react.useRef(null);
@@ -431,13 +431,13 @@ const Pn = 120, Hn = (param)=>{
             disabled: l,
             group: "burger-menu-lock",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-                onEntered: ()=>h(!1),
-                onExiting: ()=>h(!0),
+                onEntered: ()=>d(!1),
+                onExiting: ()=>d(!0),
                 onExited: ()=>{
                     S(!1), u(-1);
                 },
                 classNames: _navigationbarcssmistica.burgerMenuTransition,
-                in: i,
+                in: a,
                 nodeRef: R,
                 timeout: v,
                 mountOnEnter: !0,
@@ -448,7 +448,7 @@ const Pn = 120, Hn = (param)=>{
                         boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${C})`,
                         top: _theme.NAVBAR_HEIGHT_MOBILE + r
                     },
-                    id: c,
+                    id: s,
                     ref: R,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _navigationbarcssmistica.burgerMenuContainer,
@@ -456,13 +456,13 @@ const Pn = 120, Hn = (param)=>{
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _navigationbarcssmistica.burgerMenuContentContainer,
                                 style: {
-                                    transform: `translate(${p ? "-100vw" : "0"})`
+                                    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, f)=>{
+                                                children: n.map((_param, p)=>{
                                                     var { title: g, menu: O } = _param, L = _object_without_properties(_param, [
                                                         "title",
                                                         "menu"
@@ -471,9 +471,9 @@ const Pn = 120, Hn = (param)=>{
                                                         title: g
                                                     }, O ? {
                                                         onPress: ()=>{
-                                                            S(!0), u(f);
+                                                            S(!0), u(p);
                                                         }
-                                                    } : K(L, a)), f);
+                                                    } : K(L, i)), p);
                                                 })
                                             })
                                         }),
@@ -488,11 +488,11 @@ const Pn = 120, Hn = (param)=>{
                                 className: _navigationbarcssmistica.burgerMenuContentContainer,
                                 ref: B,
                                 style: {
-                                    transform: `translate(${p ? "0" : "100vw"})`
+                                    transform: `translate(${h ? "0" : "100vw"})`
                                 },
-                                children: b !== "closed" && s !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(Fn, {
-                                    section: n[s],
-                                    closeMenu: a,
+                                children: b !== "closed" && c !== -1 && /* @__PURE__ */ (0, _jsxruntime.jsx)(Fn, {
+                                    section: n[c],
+                                    closeMenu: i,
                                     closeSubMenu: ()=>S(!1)
                                 })
                             })
@@ -532,59 +532,59 @@ const Pn = 120, Hn = (param)=>{
     debouncedOpenSectionMenu: ()=>{},
     cancelDebouncedOpenSectionMenu: ()=>{}
 }), Xn = (param)=>{
-    let { children: n, sections: t, isLargeMenu: a } = param;
-    const { isTabletOrSmaller: i } = (0, _hooks.useScreenSize)(), [r, c] = _react.useState(!1), [l, h] = _react.useState("0px"), [d, m] = _react.useReducer(Un, "closed"), [M, s] = _react.useState(-1), [u, p] = _react.useState(), [S, b] = _react.useState(!1), [I, R] = _react.useState(!1), [C, v] = _react.useState(-1), B = _react.useCallback((f)=>{
-        var _t_f;
-        s(-1), (t === null || t === void 0 ? void 0 : (_t_f = t[f]) === null || _t_f === void 0 ? void 0 : _t_f.menu) ? (R(!0), v(f)) : (b(!1), R(!1));
+    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));
     }, [
         t
     ]), g = _react.useMemo(()=>(0, _helpers.debounce)(B, Pn), [
         B
     ]), O = _react.useCallback(()=>{
-        b(!1), R(!1), g.cancel(), s(-1);
+        b(!1), R(!1), g.cancel(), c(-1);
     }, [
         g
     ]);
     _react.useEffect(()=>{
-        i && O();
+        a && O();
     }, [
-        i,
+        a,
         O
     ]), _react.useEffect(()=>{
-        !I && !S ? (c(!1), h("0px")) : c(!0);
+        !I && !S ? (s(!1), d("0px")) : s(!0);
     }, [
         S,
         I
     ]), _react.useEffect(()=>{
-        const f = (0, _platform.isRunningAcceptanceTest)() || !a ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
+        const p = (0, _platform.isRunningAcceptanceTest)() || !i ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS;
         let T;
-        return r ? (m("open"), T = setTimeout(()=>m("finishOpen"), f)) : (m("close"), T = setTimeout(()=>m("finishClose"), f)), ()=>clearTimeout(T);
+        return r ? (m("open"), T = setTimeout(()=>m("finishOpen"), p)) : (m("close"), T = setTimeout(()=>m("finishClose"), p)), ()=>clearTimeout(T);
     }, [
         r,
-        a
+        i
     ]), _react.useEffect(()=>{
-        d === "closed" && v(-1);
+        f === "closed" && v(-1);
     }, [
-        d
+        f
     ]);
-    const L = _react.useCallback((f)=>{
-        (0, _helpers.isEqual)(u, f) || p(f);
+    const L = _react.useCallback((p)=>{
+        (0, _helpers.isEqual)(u, p) || h(p);
     }, [
         u
     ]);
     return _react.useEffect(()=>{
-        const f = (E)=>{
+        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((w)=>w.hasAttribute(`data-navigation-bar-menu-item-${u.column}-${u.index}`)), D = E ? x - 1 : x + 1;
+                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();
             }
         }, T = (E)=>{
             switch(E.key){
                 case _keys.DOWN:
-                    u && ((0, _dom.cancelEvent)(E), f());
+                    u && ((0, _dom.cancelEvent)(E), p());
                     break;
                 case _keys.UP:
-                    u && ((0, _dom.cancelEvent)(E), f(!0));
+                    u && ((0, _dom.cancelEvent)(E), p(!0));
                     break;
                 case _keys.ESC:
                     O();
@@ -598,7 +598,7 @@ const Pn = 120, Hn = (param)=>{
         O,
         u
     ]), _react.useEffect(()=>{
-        p(void 0);
+        h(void 0);
     }, [
         C
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(ke.Provider, {
@@ -606,16 +606,16 @@ const Pn = 120, Hn = (param)=>{
             isMenuOpen: r,
             openedSection: C,
             menuHeight: l,
-            menuStatus: d,
+            menuStatus: f,
             openSectionMenu: B,
-            debouncedOpenSectionMenu: (f)=>{
-                s(f), g(f);
+            debouncedOpenSectionMenu: (p)=>{
+                c(p), g(p);
             },
-            cancelDebouncedOpenSectionMenu: (f)=>{
-                f === M && (g.cancel(), s(-1));
+            cancelDebouncedOpenSectionMenu: (p)=>{
+                p === M && (g.cancel(), c(-1));
             },
             closeMenu: O,
-            setMenuHeight: h,
+            setMenuHeight: d,
             setIsMenuHovered: b,
             setFocusedItem: L
         },
@@ -623,7 +623,7 @@ const Pn = 120, Hn = (param)=>{
     });
 }, _ = ()=>_react.useContext(ke), Ie = (param)=>{
     let { column: n, columnIndex: t } = param;
-    const { setFocusedItem: a, closeMenu: i } = _();
+    const { setFocusedItem: i, closeMenu: a } = _();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 24,
         children: [
@@ -637,15 +637,15 @@ const Pn = 120, Hn = (param)=>{
                 space: 16,
                 role: "list",
                 children: n.items.map((_param, l)=>{
-                    var { title: r } = _param, c = _object_without_properties(_param, [
+                    var { title: r } = _param, s = _object_without_properties(_param, [
                         "title"
                     ]);
                     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        onFocus: ()=>a({
+                        onFocus: ()=>i({
                                 column: t,
                                 index: l
                             }),
-                        onBlur: ()=>a(void 0),
+                        onBlur: ()=>i(void 0),
                         role: "listitem",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_textlink.default, _object_spread_props(_object_spread({
                             underline: "on hover",
@@ -653,7 +653,7 @@ const Pn = 120, Hn = (param)=>{
                             dataAttributes: {
                                 [`navigation-bar-menu-item-${t}-${l}`]: "true"
                             }
-                        }, K(c, i)), {
+                        }, K(s, a)), {
                             children: r
                         }))
                     }, l);
@@ -662,48 +662,48 @@ const Pn = 120, Hn = (param)=>{
         ]
     });
 }, zn = (param)=>{
-    let { section: n, index: t, isLargeNavigationBar: a, topSlotHeight: i, wide: r } = param;
+    let { section: n, index: t, isLargeNavigationBar: i, topSlotHeight: a, wide: r } = param;
     var _n_menu, _n_menu1;
-    const c = _react.useRef(null), [l, h] = _react.useState(!1), d = (0, _platform.isRunningAcceptanceTest)() ? 0 : _navigationbarcssmistica.DESKTOP_MENU_ANIMATION_DURATION_MS, m = (a ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + i, M = 40, { menuStatus: s, isMenuOpen: u, openedSection: p, closeMenu: S, setIsMenuHovered: b, setMenuHeight: I } = _();
+    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 } = _();
     _react.useEffect(()=>{
-        if (c.current && u && (c.current.scrollTop = 0), h(!1), u) {
-            const g = setTimeout(()=>h(!0), d);
+        if (s.current && u && (s.current.scrollTop = 0), d(!1), u) {
+            const g = setTimeout(()=>d(!0), f);
             return ()=>clearTimeout(g);
         }
     }, [
         u,
-        p,
-        d
+        h,
+        f
     ]);
     const [R, C] = _react.useState(!0);
     _react.useEffect(()=>{
-        if (p === t) if (s === "opening") {
+        if (h === t) if (c === "opening") {
             C(!1);
             const g = requestAnimationFrame(()=>C(!0));
             return ()=>cancelAnimationFrame(g);
         } else C(!0);
     }, [
-        s,
-        p,
+        c,
+        h,
         t
     ]), _react.useEffect(()=>{
-        s === "closing" && h(!1);
+        c === "closing" && d(!1);
     }, [
-        s
+        c
     ]);
     const v = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], B = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.desktopOnly,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
-            children: p === t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+            children: h === t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _navigationbarcssmistica.desktopMenuContainer,
                     onMouseEnter: ()=>b(!0),
                     onMouseLeave: ()=>b(!1),
                     style: {
                         // disable pointer events when menu is closing
-                        pointerEvents: s === "closed" || s === "closing" ? "none" : void 0,
+                        pointerEvents: c === "closed" || c === "closing" ? "none" : void 0,
                         top: m,
                         maxHeight: `calc(100vh - ${m}px - ${M}px)`,
                         overflowY: l ? "auto" : "hidden"
@@ -745,50 +745,50 @@ const Pn = 120, Hn = (param)=>{
     });
 }, Kn = (param)=>{
     let { isLargeNavigationBar: n, topSlotHeight: t } = param;
-    const a = (n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + t, { menuHeight: i } = _();
+    const i = (n ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + t, { menuHeight: a } = _();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.desktopOnly,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _navigationbarcssmistica.desktopMenuWrapper,
             style: {
-                top: a
+                top: i
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.desktopMenuBackgroundContainer,
                 style: {
-                    height: i
+                    height: a
                 }
             })
         })
     });
 }, qn = (param)=>{
-    let { section: n, isLargeNavigationBar: t, topSlotHeight: a, leftPosition: i, index: r } = param;
+    let { section: n, isLargeNavigationBar: t, topSlotHeight: i, leftPosition: a, index: r } = param;
     var _n_menu, _n_menu1;
-    const c = (t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + a, l = 40, h = ((_n_menu = n.menu) === null || _n_menu === void 0 ? void 0 : _n_menu.columns) || [], d = n === null || n === void 0 ? void 0 : (_n_menu1 = n.menu) === null || _n_menu1 === void 0 ? void 0 : _n_menu1.content, { openedSection: m, menuStatus: M, setIsMenuHovered: s, closeMenu: u } = _();
+    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 } = _();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.desktopOnly,
         children: r === m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
             variant: "default",
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.desktopSmallMenuContainer,
-                onMouseEnter: ()=>s(!0),
-                onMouseLeave: ()=>s(!1),
+                onMouseEnter: ()=>c(!0),
+                onMouseLeave: ()=>c(!1),
                 style: {
                     // disable pointer events when menu is closing
                     pointerEvents: M === "closed" || M === "closing" ? "none" : void 0,
-                    top: c,
-                    left: i,
-                    maxHeight: `calc(100vh - ${c}px - ${l}px)`
+                    top: s,
+                    left: a,
+                    maxHeight: `calc(100vh - ${s}px - ${l}px)`
                 },
-                children: d ? typeof d == "function" ? d({
+                children: f ? typeof f == "function" ? f({
                     closeMenu: u
-                }) : d : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+                }) : f : /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                     space: 40,
                     dataAttributes: {
                         "navigation-bar-menu-items": "true"
                     },
-                    children: h.map((p, S)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
-                            column: p,
+                    children: d.map((h, S)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Ie, {
+                            column: h,
                             columnIndex: S
                         }, S))
                 })
@@ -796,25 +796,25 @@ const Pn = 120, Hn = (param)=>{
         })
     });
 }, jn = (param)=>{
-    let { section: n, index: t, selectedIndex: a, isFirstSection: i, isLastSection: r, navigationBarRef: c, variant: l, isLargeNavigationBar: h, topSlotHeight: d, desktopLargeMenu: m, wide: M } = param;
-    const { texts: s, t: u } = (0, _hooks.useTheme)(), { title: p, menu: S } = n, b = _object_without_properties(n, [
+    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, [
         "title",
         "menu"
-    ]), I = _react.useRef(null), [R, C] = _react.useState(0), [v, B] = _react.useState(!1), { isMenuOpen: g, openedSection: O, openSectionMenu: L, debouncedOpenSectionMenu: f, cancelDebouncedOpenSectionMenu: T, closeMenu: E } = _(), k = b.href !== void 0 || b.onPress !== void 0 || b.to !== void 0, A = _react.useCallback((y)=>{
+    ]), 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, _c_current;
+            var _I_current, _s_current;
             const { left: re, right: Oe } = ((_I_current = I.current) === null || _I_current === void 0 ? void 0 : _I_current.getBoundingClientRect()) || {
                 left: 0,
                 right: 0
-            }, Ee = (((_c_current = c.current) === null || _c_current === void 0 ? void 0 : _c_current.getBoundingClientRect().right) || 0) - _navigationbarcssmistica.DESKTOP_SMALL_MENU_WIDTH;
+            }, 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 ? f(t) : L(t);
+        })()), y ? p(t) : L(t);
     }, [
         m,
         t,
         L,
-        f,
-        c
+        p,
+        s
     ]);
     _react.useEffect(()=>{
         const y = (U)=>{
@@ -846,7 +846,7 @@ const Pn = 120, Hn = (param)=>{
         x,
         A,
         E
-    ]), w = _react.useCallback((y)=>k ? y : {
+    ]), $ = _react.useCallback((y)=>k ? y : {
             onPress: D
         }, [
         k,
@@ -858,7 +858,7 @@ const Pn = 120, Hn = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 ref: I,
                 className: (0, _classnames.default)(_navigationbarcssmistica.desktopMenuSectionContainer, {
-                    [_navigationbarcssmistica.desktopMenuFirstSection]: i,
+                    [_navigationbarcssmistica.desktopMenuFirstSection]: a,
                     [_navigationbarcssmistica.desktopMenuLastSection]: r
                 }),
                 onMouseEnter: ()=>A(!0),
@@ -869,17 +869,17 @@ const Pn = 120, Hn = (param)=>{
                 onBlur: ()=>{
                     S && !k && B(!1);
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, w(b)), {
-                    "aria-label": k ? void 0 : `${n.title}, ${s.mainNavigationBarOpenSectionMenu || u(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                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,
                     className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                        [_navigationbarcssmistica.selectedSectionVariants[l === "brand" ? "brand" : "default"]]: t === a
+                        [_navigationbarcssmistica.selectedSectionVariants[l === "brand" ? "brand" : "default"]]: t === i
                     }, _navigationbarcssmistica.textWrapperVariants[l === "brand" ? "brand" : "default"]),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: p
+                        children: h
                     })
                 }))
             }),
@@ -891,7 +891,7 @@ const Pn = 120, Hn = (param)=>{
                         onBlur: ()=>B(!1),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                             className: _navigationbarcssmistica.desktopMenuSectionArrow,
-                            "aria-label": `${n.title}, ${s.mainNavigationBarOpenSectionMenu || u(_texttokens.mainNavigationBarOpenSectionMenu)}`,
+                            "aria-label": `${n.title}, ${c.mainNavigationBarOpenSectionMenu || u(_texttokens.mainNavigationBarOpenSectionMenu)}`,
                             "aria-haspopup": !0,
                             "aria-expanded": x,
                             onPress: ()=>{
@@ -914,14 +914,14 @@ const Pn = 120, Hn = (param)=>{
                     }),
                     m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(zn, {
                         section: n,
-                        isLargeNavigationBar: h,
-                        topSlotHeight: d,
+                        isLargeNavigationBar: d,
+                        topSlotHeight: f,
                         index: t,
                         wide: M
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(qn, {
                         section: n,
-                        isLargeNavigationBar: h,
-                        topSlotHeight: d,
+                        isLargeNavigationBar: d,
+                        topSlotHeight: f,
                         leftPosition: R,
                         index: t
                     })
@@ -930,8 +930,8 @@ const Pn = 120, Hn = (param)=>{
         ]
     });
 }, Yn = (param)=>{
-    let { sections: n, selectedIndex: t, navigationBarRef: a, variant: i, isLargeNavigationBar: r, topSlotHeight: c, hasRightContent: l, desktopLargeMenu: h, wide: d } = param;
-    const { openSectionMenu: m, openedSection: M, closeMenu: s } = _();
+    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 } = _();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
         className: (0, _classnames.default)(_navigationbarcssmistica.desktopOnly, _navigationbarcssmistica.mainNavBarSectionsContainer),
         style: {
@@ -941,51 +941,51 @@ const Pn = 120, Hn = (param)=>{
         onMouseEnter: ()=>{
             M !== -1 && m(M);
         },
-        onMouseLeave: s,
+        onMouseLeave: c,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 32,
-            children: n.map((u, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(jn, {
-                    index: p,
+            children: n.map((u, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(jn, {
+                    index: h,
                     selectedIndex: t,
-                    navigationBarRef: a,
-                    isFirstSection: p === 0,
-                    isLastSection: p === n.length - 1,
-                    variant: i,
+                    navigationBarRef: i,
+                    isFirstSection: h === 0,
+                    isLastSection: h === n.length - 1,
+                    variant: a,
                     section: u,
                     isLargeNavigationBar: r,
-                    topSlotHeight: c,
-                    desktopLargeMenu: h,
-                    wide: d
-                }, p))
+                    topSlotHeight: s,
+                    desktopLargeMenu: d,
+                    wide: f
+                }, h))
         })
     });
 }, Zn = (param)=>{
-    let { children: n, isLargeNavigationBar: t, topSlotHeight: a, desktopLargeMenu: i } = param;
-    const { menuHeight: r } = _(), c = (t ? _theme.NAVBAR_HEIGHT_DESKTOP_LARGE : _theme.NAVBAR_HEIGHT_DESKTOP) + a;
+    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;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.mainNavigationBarContentWrapper,
-        style: i ? {
-            clipPath: `rect(0 100% calc(${c}px + ${r}) 0)`,
-            WebkitClipPath: `rect(0 100% calc(${c}px + ${r}) 0)`
+        style: a ? {
+            clipPath: `rect(0 100% calc(${s}px + ${r}) 0)`,
+            WebkitClipPath: `rect(0 100% calc(${s}px + ${r}) 0)`
         } : void 0,
         children: n
     });
 }, Lt = (param)=>{
-    let { sections: n = [], selectedIndex: t, right: a, topSlot: i, topSlotBackgroundColor: r, variant: c = "default", topFixed: l = !0, withBorder: h = !0, burgerMenuExtra: d, logo: m, large: M = !1, desktopLargeMenu: s = !1, wide: u = !1 } = param;
-    const { texts: p, t: S } = (0, _hooks.useTheme)(), b = _react.useId(), { isTabletOrSmaller: I } = (0, _hooks.useScreenSize)(), R = m || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+    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, {
         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: f, ref: T } = (0, _hooks.useElementDimensions)(), E = (0, _modalcontextprovider.useSetModalState)(), k = (0, _themevariantcontext.normalizeVariant)(c), A = /* @__PURE__ */ (0, _jsxruntime.jsx)(Yn, {
+    }), 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,
-        hasRightContent: !!a,
+        hasRightContent: !!i,
         isLargeNavigationBar: C,
-        topSlotHeight: f,
-        desktopLargeMenu: s,
+        topSlotHeight: p,
+        desktopLargeMenu: c,
         wide: u
     }), x = ()=>{
         B(!0), E({
@@ -995,33 +995,33 @@ const Pn = 120, Hn = (param)=>{
         B(!1), E({
             isModalOpen: !1
         });
-    }, w = n.length > 1, y = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+    }, $ = n.length > 1, y = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: k,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)(ie, {
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(ae, {
                 topFixed: l,
-                withBorder: h,
+                withBorder: d,
                 isBurgerMenuOpen: v,
                 variant: k,
                 dataAttributes: {
-                    "component-name": "MainNavigationBar"
+                    testid: "MainNavigationBar"
                 },
                 children: [
-                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
+                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)(Kn, {
                         isLargeNavigationBar: C,
-                        topSlotHeight: f
+                        topSlotHeight: p
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(Zn, {
                         isLargeNavigationBar: C,
-                        topSlotHeight: f,
-                        desktopLargeMenu: s,
+                        topSlotHeight: p,
+                        desktopLargeMenu: c,
                         children: [
-                            i && /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
+                            a && /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
                                 wide: u,
                                 backgroundColor: r,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     ref: T,
-                                    children: i
+                                    children: a
                                 })
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(F, {
@@ -1029,13 +1029,13 @@ const Pn = 120, Hn = (param)=>{
                                 children: [
                                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(z, {
                                         ref: L,
-                                        right: a,
+                                        right: i,
                                         expandRightContent: C,
                                         children: [
-                                            w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                                            $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                                                 className: _navigationbarcssmistica.burgerMenuButton,
                                                 "aria-live": "polite",
-                                                "aria-label": v ? p.closeNavigationMenu || S(_texttokens.closeNavigationMenu) : p.openNavigationMenu || S(_texttokens.openNavigationMenu),
+                                                "aria-label": v ? h.closeNavigationMenu || S(_texttokens.closeNavigationMenu) : h.openNavigationMenu || S(_texttokens.openNavigationMenu),
                                                 "aria-expanded": v,
                                                 "aria-controls": b,
                                                 onPress: v ? D : x,
@@ -1060,9 +1060,9 @@ const Pn = 120, Hn = (param)=>{
                     })
                 ]
             }),
-            l && f > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            l && p > 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
-                    height: f
+                    height: p
                 }
             }),
             l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -1072,7 +1072,7 @@ const Pn = 120, Hn = (param)=>{
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(Xn, {
         sections: n,
-        isLargeMenu: s,
+        isLargeMenu: c,
         children: I ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
@@ -1084,9 +1084,9 @@ const Pn = 120, Hn = (param)=>{
                     open: v,
                     id: b,
                     sections: n,
-                    extra: d,
+                    slot: f,
                     closeMenu: D,
-                    topSlotHeight: f,
+                    topSlotHeight: p,
                     disableFocusTrap: g,
                     setDisableFocusTrap: O
                 })
@@ -1094,26 +1094,26 @@ const Pn = 120, Hn = (param)=>{
         }) : y
     });
 }, yt = (param)=>{
-    let { logo: n, right: t, variant: a = "default", topFixed: i = !0, withBorder: r = !0, wide: c = !1 } = 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, {
         size: {
             mobile: 40,
             desktop: 48
         }
     });
-    const l = (0, _themevariantcontext.normalizeVariant)(a);
+    const l = (0, _themevariantcontext.normalizeVariant)(i);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: l,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(ie, {
-                topFixed: i,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(ae, {
+                topFixed: a,
                 withBorder: r,
                 variant: l,
                 dataAttributes: {
-                    "component-name": "FunnelNavigationBar"
+                    testid: "FunnelNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(F, {
-                    wide: c,
+                    wide: s,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
@@ -1124,7 +1124,7 @@ const Pn = 120, Hn = (param)=>{
                     })
                 })
             }),
-            i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
@@ -1133,7 +1133,7 @@ const Pn = 120, Hn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
-        "data-component-name": "NavigationBarActionGroup",
+        "data-testid": "NavigationBarActionGroup",
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 24,
             alignItems: "center",
@@ -1144,20 +1144,20 @@ const Pn = 120, Hn = (param)=>{
     var { children: n } = _param, t = _object_without_properties(_param, [
         "children"
     ]);
-    const a = (0, _themevariantcontext.useThemeVariant)();
+    const i = (0, _themevariantcontext.useThemeVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
-        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[a]),
+        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[i]),
         dataAttributes: {
-            "component-name": "NavigationBarAction"
+            testid: "NavigationBarAction"
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 16,
             alignItems: "center",
-            children: _react.Children.map(n, (i)=>typeof i == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            children: _react.Children.map(n, (a)=>typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: "inherit",
-                    children: i
-                }) : i)
+                    children: a
+                }) : a)
         })
     }));
 };