@telefonica/mistica 16.1.0 → 16.2.0

package/dist/logo.js

@@ -11,28 +11,28 @@ function _export(target, all) {
 }
 _export(exports, {
     BlauLogo: function() {
-        return G;
+        return R;
     },
     Logo: function() {
-        return C;
+        return E;
     },
     MovistarLogo: function() {
-        return E;
+        return F;
     },
     O2Logo: function() {
-        return H;
+        return _;
     },
     O2NewLogo: function() {
-        return _;
+        return j;
     },
     TelefonicaLogo: function() {
-        return j;
+        return G;
     },
     TuLogo: function() {
-        return R;
+        return S;
     },
     VivoLogo: function() {
-        return F;
+        return H;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -169,65 +169,72 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const s = 48, T = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-movistar" */ "./logo-movistar.js")))), I = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-vivo" */ "./logo-vivo.js")))), N = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2" */ "./logo-o2.js")))), p = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2-new" */ "./logo-o2-new.js")))), k = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-telefonica" */ "./logo-telefonica.js")))), O = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-blau" */ "./logo-blau.js")))), V = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-tu" */ "./logo-tu.js")))), i = (param)=>{
-    let { size: o, skinName: r, type: t = "isotype" } = param;
-    const a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { isDarkMode: m } = (0, _hooks.useTheme)();
-    switch(r){
+const i = 48, I = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-movistar" */ "./logo-movistar.js")))), N = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-vivo" */ "./logo-vivo.js")))), p = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2" */ "./logo-o2.js")))), k = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-o2-new" */ "./logo-o2-new.js")))), O = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-telefonica" */ "./logo-telefonica.js")))), V = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-blau" */ "./logo-blau.js")))), b = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "logo-tu" */ "./logo-tu.js")))), c = (param)=>{
+    let { size: o, skinName: n, type: t = "isotype", color: a } = param;
+    const r = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { isDarkMode: l } = (0, _hooks.useTheme)();
+    switch(n){
         case "Movistar":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(T, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(I, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "Vivo":
         case "Vivo-new":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(I, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "O2":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(p, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "O2-new":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(p, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "Telefonica":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "Blau":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         case "Tu":
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(V, {
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                 size: o,
                 type: t,
-                isDarkMode: m,
-                isInverse: a
+                isDarkMode: l,
+                isInverse: r,
+                color: a
             });
         default:
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
     }
-}, c = (o)=>{
-    const r = (0, _dom.getPrefixedDataAttributes)(o.dataAttributes, "Logo");
+}, m = (o)=>{
+    const n = (0, _dom.getPrefixedDataAttributes)(o.dataAttributes, "Logo");
     return o.to || o.href || o.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, _object_spread({}, o)) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
         fallback: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _logocssmistica.svg,
@@ -237,121 +244,137 @@ const s = 48, T = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: _logocssmistica.logoContainer
-        }, r), {
+        }, n), {
             children: o.children
         }))
     });
-}, C = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, E = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    const { skinName: a } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    const { skinName: r } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
-            skinName: a,
-            type: r,
-            size: o
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
+            skinName: r,
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, E = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, F = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "Movistar",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, F = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, H = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "Vivo",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, H = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, _ = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "O2",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, _ = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, j = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "O2-new",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, j = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, G = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "Telefonica",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, G = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, R = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "Blau",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
-}, R = (_param)=>{
-    var { size: o = s, type: r = "isotype" } = _param, t = _object_without_properties(_param, [
+}, S = (_param)=>{
+    var { size: o = i, type: n = "isotype", color: t } = _param, a = _object_without_properties(_param, [
         "size",
-        "type"
+        "type",
+        "color"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(c, _object_spread_props(_object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({
         size: o
-    }, t), {
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+    }, a), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
             skinName: "Tu",
-            type: r,
-            size: o
+            type: n,
+            size: o,
+            color: t
         })
     }));
 };

package/dist/navigation-bar.css-mistica.js

@@ -16,10 +16,10 @@ _export(exports, {
         return _;
     },
     burgerMenuButton: function() {
-        return e;
+        return r;
     },
     burgerMenuTransition: function() {
-        return r;
+        return e;
     },
     desktopOnly: function() {
         return d;
@@ -34,10 +34,10 @@ _export(exports, {
         return f;
     },
     iconMenuOpen: function() {
-        return z;
+        return i;
     },
     lineHeightFix: function() {
-        return i;
+        return z;
     },
     logoContainer: function() {
         return t;
@@ -48,47 +48,50 @@ _export(exports, {
     navbarBorderColorVariants: function() {
         return h;
     },
-    navigationBarContent: function() {
+    navigationBarAction: function() {
         return l;
     },
+    navigationBarContent: function() {
+        return g;
+    },
     navigationBarContentRight: function() {
         return u;
     },
     section: function() {
-        return g;
+        return p;
     },
     selectedSectionVariantes: function() {
         return s;
     },
     spacer: function() {
-        return p;
+        return b;
     },
     spacerLarge: function() {
-        return b;
+        return k;
     },
     textWrapperVariants: function() {
-        return k;
+        return C;
     },
     topFixed: function() {
-        return C;
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./navigation-bar.css.ts.vanilla.css-mistica.js");
-var y = "_1vcy5dz1 _1y2v1nfhe _1y2v1nfig _1y2v1nfiw", _ = "_1vcy5dz12 _1y2v1nfhg _1y2v1nfl2 _1y2v1nfl6 _1y2v1nfll _1y2v1nf3p", e = "_1vcy5dz10", r = {
-    entering: "_1vcy5dzs",
-    entered: "_1vcy5dzt",
-    exiting: "_1vcy5dzu",
-    exited: "_1vcy5dzv",
-    unmounted: "_1vcy5dzw"
-}, d = "_1vcy5dzm", a = "_1vcy5dz5 _1vcy5dz3 _1y2v1nfhf", c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nfhf", f = "_1vcy5dz7 _1vcy5dz3 _1y2v1nfhf", z = "_1vcy5dz6 _1vcy5dz3 _1y2v1nfhf", i = "_1vcy5dz17", t = "_1vcy5dzz _1y2v1nfhk _1y2v1nfht", o = "_1vcy5dzx", h = {
+var y = "_1vcy5dz1 _1y2v1nfhe _1y2v1nfig _1y2v1nfiw", _ = "_1vcy5dz13 _1y2v1nfhg _1y2v1nfl2 _1y2v1nfl6 _1y2v1nfll _1y2v1nf3p", r = "_1vcy5dz11", e = {
+    entering: "_1vcy5dzt",
+    entered: "_1vcy5dzu",
+    exiting: "_1vcy5dzv",
+    exited: "_1vcy5dzw",
+    unmounted: "_1vcy5dzx"
+}, d = "_1vcy5dzn", a = "_1vcy5dz5 _1vcy5dz3 _1y2v1nfhf", c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nfhf", f = "_1vcy5dz7 _1vcy5dz3 _1y2v1nfhf", i = "_1vcy5dz6 _1vcy5dz3 _1y2v1nfhf", z = "_1vcy5dz18", t = "_1vcy5dz10 _1y2v1nfhk _1y2v1nfht", o = "_1vcy5dzy", h = {
     default: "_1vcy5dzc _1vcy5dzb _1y2v1nfhk _1y2v1nfhz _1y2v1nfi7",
     noBorder: "_1vcy5dzd _1vcy5dzb _1y2v1nfhk _1y2v1nfhz _1y2v1nfi7",
     menuOpen: "_1vcy5dze _1vcy5dzb _1y2v1nfhk _1y2v1nfhz _1y2v1nfi7"
-}, l = "_1vcy5dzl", u = "_1vcy5dzn", g = "_1vcy5dzg _1y2v1nfa4 _1y2v1nfbd _1y2v1nfj3 _1y2v1nfhk _1y2v1nfhz _1y2v1nfk2 _1y2v1nf7c", s = {
+}, l = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c", g = "_1vcy5dzl", u = "_1vcy5dzo", p = "_1vcy5dzg _1y2v1nfa4 _1y2v1nfbd _1y2v1nfj3 _1y2v1nfhk _1y2v1nfhz _1y2v1nfk2 _1y2v1nf7c", s = {
     default: "_1vcy5dzh",
     inverse: "_1vcy5dzi"
-}, p = "_1y2v1nfj3 _1vcy5dzo", b = "_1vcy5dzr _1vcy5dzo", k = {
+}, b = "_1y2v1nfj3 _1vcy5dzp", k = "_1vcy5dzs _1vcy5dzp", C = {
     default: "_1vcy5dzj",
     inverse: "_1vcy5dzk"
-}, C = "_1vcy5dz9 _1y2v1nfhg _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll";
+}, x = "_1vcy5dz9 _1y2v1nfhg _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll";

package/dist/navigation-bar.css.d.ts

@@ -9,6 +9,7 @@ export declare const section: string;
 export declare const selectedSectionVariantes: Record<"inverse" | "default", string>;
 export declare const textWrapperVariants: Record<"inverse" | "default", string>;
 export declare const navigationBarContent: string;
+export declare const navigationBarAction: string;
 export declare const desktopOnly: string;
 export declare const navigationBarContentRight: string;
 export declare const spacer: string;

package/dist/navigation-bar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return Nn;
+        return fn;
     },
     MainNavigationBar: function() {
-        return fn;
+        return hn;
     },
     NavigationBar: function() {
         return vn;
@@ -23,7 +23,7 @@ _export(exports, {
         return Bn;
     },
     NavigationBarActionGroup: function() {
-        return bn;
+        return Nn;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -49,7 +49,6 @@ 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 _sprinklescssmistica = require("./sprinkles.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"));
@@ -215,7 +214,7 @@ const Ge = (param)=>{
     }, (0, _dom.getPrefixedDataAttributes)(s)), {
         children: n
     }));
-}, B = (param)=>{
+}, b = (param)=>{
     let { right: n, children: o, desktopOnly: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
@@ -229,9 +228,9 @@ const Ge = (param)=>{
             })
         ]
     });
-}, fn = (param)=>{
+}, hn = (param)=>{
     let { sections: n = [], selectedIndex: o, right: t, variant: r = "default", topFixed: a = !0, withBorder: s = !0, burgerMenuExtra: c, logo: d, large: m = !1 } = param;
-    const { texts: u, isDarkMode: g, t: R } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), K = g ? 1 : 0.2, { isTabletOrSmaller: Q } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), X = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+    const { texts: u, isDarkMode: g, t: R } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), J = g ? 1 : 0.2, { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), Q = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
@@ -240,23 +239,23 @@ const Ge = (param)=>{
             className: _navigationbarcssmistica.desktopOnly,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                 space: 32,
-                children: n.map((_param, f)=>{
-                    var { title: I } = _param, x = _object_without_properties(_param, [
+                children: n.map((_param, v)=>{
+                    var { title: k } = _param, x = _object_without_properties(_param, [
                         "title"
                     ]);
                     return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, x), {
-                        key: f,
+                        key: v,
                         className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: f === o
+                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: v === o
                         }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" ? "inverse" : "default"])
                     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: I
+                        children: k
                     }));
                 })
             })
-        }), k = m && n.length > 0, Y = ()=>{
+        }), I = m && n.length > 0, X = ()=>{
         y(!0), w({
             isModalOpen: !0
         });
@@ -277,7 +276,7 @@ const Ge = (param)=>{
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             right: t,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: _navigationbarcssmistica.mainNavbarContent,
@@ -288,20 +287,20 @@ const Ge = (param)=>{
                                         "aria-label": l ? u.closeNavigationMenu || R(_texttokens.closeNavigationMenu) : u.openNavigationMenu || R(_texttokens.openNavigationMenu),
                                         "aria-expanded": l,
                                         "aria-controls": L,
-                                        onPress: l ? V : Y,
+                                        onPress: l ? V : X,
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
                                             isOpen: l
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _navigationbarcssmistica.logoContainer,
-                                        children: X
+                                        children: Q
                                     }),
-                                    !k && D()
+                                    !I && D()
                                 ]
                             })
                         }),
-                        k && /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        I && /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             desktopOnly: !0,
                             children: D()
                         })
@@ -309,11 +308,11 @@ const Ge = (param)=>{
                 })
             }),
             a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: k ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+                className: I ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
-    return Q ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return K ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
                 disabled: F,
@@ -340,11 +339,11 @@ const Ge = (param)=>{
                         in: l,
                         timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : He,
                         unmountOnExit: !0,
-                        children: (I)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: (k)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[I]),
+                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[k]),
                                     style: {
-                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${K})` : "none"
+                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
                                     },
                                     id: L,
                                     onClick: ()=>{
@@ -356,7 +355,7 @@ const Ge = (param)=>{
                                             children: [
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                        children: n.map((x, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), f))
+                                                        children: n.map((x, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), v))
                                                     })
                                                 }),
                                                 c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -375,7 +374,7 @@ const Ge = (param)=>{
     }) : H;
 }, vn = (param)=>{
     let { onBack: n, title: o, titleAs: t, right: r, variant: a = "default", topFixed: s = !0, paddingX: c = 0, withBorder: d = !0 } = param;
-    const { texts: m, t: u } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+    const { texts: m, t: u } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
         right: r,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 24,
@@ -410,11 +409,9 @@ const Ge = (param)=>{
                 children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: g
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _sprinklescssmistica.sprinkles)({
-                        width: "100%"
-                    }),
                     style: {
-                        padding: `0 ${c}px`
+                        padding: `0 ${c}px`,
+                        width: "100%"
                     },
                     children: g
                 })
@@ -424,7 +421,7 @@ const Ge = (param)=>{
             })
         ]
     });
-}, Nn = (param)=>{
+}, fn = (param)=>{
     let { logo: n, right: o, variant: t = "default", topFixed: r = !0, withBorder: a = !0 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
@@ -444,7 +441,7 @@ const Ge = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             right: o,
                             children: n
                         })
@@ -456,7 +453,7 @@ const Ge = (param)=>{
             })
         ]
     });
-}, bn = (param)=>{
+}, Nn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -473,11 +470,7 @@ const Ge = (param)=>{
     ]);
     const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, o), {
-        className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
-            border: "none",
-            background: "transparent",
-            padding: 0
-        }), _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
+        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },