@telefonica/mistica 12.9.0 → 12.10.0

package/dist/navigation-bar.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return R1;
+        return _1;
     },
     MainNavigationBar: function() {
-        return T1;
+        return R1;
     },
     NavigationBar: function() {
-        return O1;
+        return D1;
     },
     NavigationBarAction: function() {
-        return _1;
+        return G1;
     },
     NavigationBarActionGroup: function() {
-        return D1;
+        return F1;
     },
     NavigationBarLogo: function() {
-        return T;
+        return O;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -50,28 +50,8 @@ var _portalJs = require("./portal.js");
 var _gridLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./grid-layout.js"));
 var _modalContextProviderJs = require("./modal-context-provider.js");
 var _themeJs = require("./theme.js");
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -116,6 +96,27 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -220,26 +221,26 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var r1 = function(param) {
+var t1 = function t1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, n = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)() && !n ? t.inverse : t.brand;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: o,
+        fill: s,
         role: "presentation",
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
             d: "M5.75989 5.73747C4.83318 5.7524 3.12261 6.21673 2.34128 9.45937C2.00085 10.8723 1.86931 12.3449 2.16077 14.0979C2.42943 15.7147 2.90545 17.1101 3.22629 17.8792C3.33689 18.1441 3.50812 18.4206 3.6405 18.5906C4.02129 19.0797 4.65503 19.0484 4.92132 18.9151C5.2116 18.7699 5.54527 18.4194 5.42453 17.6187C5.36611 17.2319 5.19775 16.666 5.10302 16.3515C4.81224 15.3863 4.42521 14.2216 4.39143 13.392C4.34635 12.2823 4.77695 12.1369 5.06283 12.0731C5.54375 11.9655 5.94682 12.5021 6.3298 13.1746C6.78691 13.9771 7.57026 15.3991 8.20924 16.4853C8.78607 17.4658 9.85057 18.5156 11.5601 18.4436C13.303 18.3703 14.5877 17.6946 15.2494 15.5671C15.7447 13.9756 16.0823 12.7863 16.6255 11.5683C17.2501 10.1677 18.0833 9.41801 18.7849 9.64692C19.4364 9.85935 19.599 10.5064 19.6067 11.4576C19.6137 12.2989 19.5179 13.2264 19.4435 13.9078C19.4164 14.1551 19.3675 14.6525 19.3874 14.9286C19.4267 15.4715 19.6581 16.0138 20.2597 16.1006C20.9006 16.1929 21.4148 15.6725 21.6201 15.0434C21.7011 14.7955 21.7702 14.4161 21.8075 14.1468C21.9958 12.7873 22.0446 11.8735 21.9598 10.4824C21.8604 8.85587 21.5471 7.3726 21.0007 6.08889C20.4779 4.8613 19.6382 4.07454 18.5612 4.00504C17.369 3.92817 16.0009 4.73192 15.2832 6.29138C14.6216 7.72883 14.0924 9.20455 13.7714 9.95768C13.4458 10.7214 12.9673 11.1921 12.2315 11.2709C11.332 11.367 10.5569 10.7034 9.98921 9.75726C9.49428 8.93257 8.51336 7.3623 7.98853 6.83465C7.49546 6.33891 6.9323 5.71859 5.75989 5.73747Z"
         })
     });
-}, n1 = function(param) {
+}, o1 = function o1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, n = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)() && !n ? t.inverse : t.brand;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: o,
+        fill: s,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
@@ -262,26 +263,26 @@ var r1 = function(param) {
             })
         ]
     });
-}, t1 = function(param) {
+}, n1 = function n1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, n = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)() && !n ? t.inverse : t.brand;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: o,
+        fill: s,
         role: "presentation",
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
             d: "M21.5488 16.0335C21.8424 16.1065 22.1266 16.2415 22.3388 16.4558C22.5183 16.6276 22.6411 16.8499 22.7127 17.0838C22.7977 17.3731 22.8193 17.6803 22.7802 17.9787C22.7429 18.2479 22.6501 18.5075 22.5284 18.7511C22.2997 19.1992 21.9805 19.5965 21.6394 19.9683C21.2723 20.3662 20.8766 20.738 20.4814 21.1094C21.2777 21.1069 22.074 21.1092 22.8703 21.1081C22.9135 21.1077 22.9576 21.1055 23 21.1167V22.0552C22.9759 22.0582 22.952 22.0614 22.9283 22.0624L18.8838 22.0622V21.0511C18.9759 20.9616 19.0743 20.8788 19.1687 20.7915C19.5786 20.4276 19.9825 20.0567 20.3632 19.6636C20.7294 19.2771 21.0861 18.873 21.3411 18.4066C21.4566 18.1876 21.5534 17.9491 21.5517 17.6993C21.5505 17.5207 21.4843 17.341 21.3574 17.2104C21.1927 17.0367 20.9529 16.9489 20.716 16.9204C20.3962 16.887 20.0733 16.9517 19.7757 17.0638C19.546 17.1486 19.3328 17.2686 19.1242 17.3931C19.0916 17.0571 19.0577 16.7212 19.0264 16.385C19.5388 16.1368 20.1029 15.987 20.6754 15.9608C20.9677 15.9438 21.2639 15.965 21.5488 16.0335ZM14.8405 5.31598C15.4058 5.52592 15.9429 5.8091 16.4281 6.16147C17.2361 6.74433 17.8939 7.51825 18.3477 8.39085C18.7702 9.19553 19.0213 10.0802 19.1223 10.9769C19.1704 11.4267 19.1906 11.8802 19.1648 12.332C19.1295 13.0499 18.99 13.7632 18.7481 14.4425C18.3674 15.5124 17.7227 16.4967 16.8652 17.2645C16.0449 18.0046 15.0307 18.537 13.947 18.8055C13.1523 19.0037 12.3237 19.0655 11.5063 19.0057C10.6758 18.9451 9.85411 18.7488 9.09547 18.4127C8.21888 18.0263 7.43007 17.4539 6.79756 16.7483C6.02182 15.8873 5.48168 14.8334 5.21175 13.7205C5.07973 13.1805 5.01279 12.6264 5 12.0718V11.7823C5.01178 11.3188 5.05344 10.8555 5.13963 10.3991C5.34506 9.29686 5.79973 8.23067 6.51039 7.34507C7.05786 6.65781 7.75545 6.08488 8.54283 5.67338C9.55445 5.14127 10.703 4.87849 11.8491 4.8504C12.8638 4.81979 13.89 4.96278 14.8405 5.31598ZM11.7686 6.88536C11.3519 6.91848 10.939 7.01031 10.5534 7.16896C10.1453 7.33515 9.76806 7.57136 9.43995 7.86C9.02852 8.21991 8.69266 8.65754 8.43365 9.13235C8.03931 9.85652 7.81866 10.665 7.75717 11.4807C7.72184 11.96 7.74281 12.4429 7.81421 12.9184C7.90715 13.527 8.08442 14.1256 8.36283 14.679C8.59899 15.1493 8.90986 15.5869 9.2996 15.9492C9.7116 16.3365 10.2151 16.6312 10.7604 16.8024C11.2601 16.9599 11.7902 17.0181 12.3138 16.9961C12.8009 16.9736 13.287 16.8782 13.7364 16.6911C14.4144 16.4136 14.9922 15.9302 15.4118 15.3457C15.9534 14.5939 16.259 13.6989 16.3791 12.7929C16.5377 11.6104 16.3647 10.3777 15.831 9.29994C15.592 8.82345 15.2831 8.37604 14.8943 8.00284C14.4766 7.59023 13.9621 7.26917 13.3989 7.08034C12.8773 6.90381 12.3181 6.84622 11.7686 6.88536Z"
         })
     });
-}, o1 = function(param) {
+}, s1 = function s1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, n = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)() && !n ? t.inverse : t.brand;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: o,
+        fill: s,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
@@ -337,18 +338,18 @@ var r1 = function(param) {
             })
         ]
     });
-}, a1 = function(param) {
+}, a1 = function a1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.colors, n = ref.isDarkMode, o = (0, _themeVariantContextJs.useIsInverseVariant)() && !n ? t.inverse : t.brand;
+    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 46 24",
-        fill: o,
+        fill: s,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                 d: "M44 17.7136H2V21.1579H44V17.7136Z",
-                fill: t.textLink
+                fill: _skinContractCssMisticaJs.vars.colors.textLink
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
                 d: "M12.2457 8.43669C13.6936 8.99523 14.4628 9.94348 14.375 11.5594C14.2871 13.6623 12.649 15.1171 10.5044 15.1171H2.21745V11.857H3.38314V6.10359H2.21745V2.84271H10.5393C12.3531 2.84271 13.8019 4.38617 13.7465 6.20933C13.7277 7.18998 13.2067 8.10497 12.2457 8.43669ZM8.48338 5.8256H7.3987V7.55325H8.48338C9.55187 7.55325 9.6235 5.8256 8.48338 5.8256ZM9.84777 11.0444C9.84777 10.543 9.52458 10.0441 8.77843 10.0441H7.39784V12.0446H8.77758C9.50411 12.0455 9.84777 11.5526 9.84777 11.0444Z"
@@ -364,25 +365,25 @@ var r1 = function(param) {
             })
         ]
     });
-}, T = function(param) {
+}, O = function O(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), t = ref.skinName, ref1 = (0, _hooksJs.useScreenSize)(), n = ref1.isTabletOrSmaller;
-    switch(r = r != null ? r : n ? 40 : 48, t){
+    var ref = (0, _hooksJs.useTheme)(), o = ref.skinName, ref1 = (0, _hooksJs.useScreenSize)(), t = ref1.isTabletOrSmaller;
+    switch(r = r != null ? r : t ? 40 : 48, o){
         case "Movistar":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(r1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(t1, {
                 size: r
             });
         case "Vivo":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o1, {
                 size: r
             });
         case "O2":
         case "O2-classic":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(t1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n1, {
                 size: r
             });
         case "Telefonica":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(s1, {
                 size: r
             });
         case "Blau":
@@ -392,7 +393,7 @@ var r1 = function(param) {
         default:
             return null;
     }
-}, s1 = (0, _jssJs.createUseStyles)(function() {
+}, i1 = (0, _jssJs.createUseStyles)(function() {
     return {
         burgerIconContainer: {
             position: "relative",
@@ -414,64 +415,64 @@ var r1 = function(param) {
             transform: "rotate(0deg) scale(0.7)"
         }
     };
-}), i1 = function(param) {
+}), c1 = function c1(param) {
     var r = param.isOpen;
-    var t = s1();
+    var o = i1();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: t.burgerIconContainer,
+        className: o.burgerIconContainer,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: r ? "" : t.iconCloseHidden,
+                className: r ? "" : o.iconCloseHidden,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: r ? t.iconMenuHidden : "",
+                className: r ? o.iconMenuHidden : "",
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconMenuRegularJs.default, {})
             })
         ]
     });
-}, c1 = 25, C1 = 26, O = 300, L = (0, _jssJs.createUseStyles)(function(r) {
-    var t = r.isDarkMode ? 1 : 0.2;
+}, C1 = 25, l1 = 26, R = 300, B = (0, _jssJs.createUseStyles)(function(r) {
+    var o = r.isDarkMode ? 1 : 0.2;
     return {
         topFixed: {
             position: "fixed",
             top: 0,
             left: 0,
             right: 0,
-            zIndex: c1
+            zIndex: C1
         },
         notFixedPadding: {
             width: "100%",
-            padding: function(param) {
-                var n = param.paddingX;
-                return "0 ".concat(n, "px");
+            padding: function padding(param) {
+                var t = param.paddingX;
+                return "0 ".concat(t, "px");
             }
         },
         navbar: _defineProperty({
             width: "100%",
             display: "flex",
             alignItems: "center",
-            background: function(param) {
-                var n = param.isInverse;
-                return n ? r.colors.navigationBarBackground : r.colors.background;
+            background: function background(param) {
+                var t = param.isInverse;
+                return t ? _skinContractCssMisticaJs.vars.colors.navigationBarBackground : _skinContractCssMisticaJs.vars.colors.background;
             },
             height: _themeJs.NAVBAR_HEIGHT_DESKTOP,
             padding: "16px 0",
             borderBottomStyle: "solid",
-            borderBottomWidth: function(param) {
-                var n = param.withBorder;
-                return n ? 1 : 0;
+            borderBottomWidth: function borderBottomWidth(param) {
+                var t = param.withBorder;
+                return t ? 1 : 0;
             },
-            borderColor: function(param) {
-                var n = param.isInverse;
-                return n && !r.isDarkMode ? "transparent" : r.colors.divider;
+            borderColor: function borderColor(param) {
+                var t = param.isInverse;
+                return t && !r.isDarkMode ? "transparent" : _skinContractCssMisticaJs.vars.colors.divider;
             }
         }, r.mq.tabletOrSmaller, {
             transition: "border-color 300ms",
-            borderColor: function(param) {
-                var n = param.isMenuOpen, a = param.isInverse;
-                return n || a && !r.isDarkMode ? "transparent" : r.colors.divider;
+            borderColor: function borderColor(param) {
+                var t = param.isMenuOpen, s = param.isInverse;
+                return t || s && !r.isDarkMode ? "transparent" : _skinContractCssMisticaJs.vars.colors.divider;
             },
             height: _themeJs.NAVBAR_HEIGHT_MOBILE,
             padding: "8px 0"
@@ -485,16 +486,16 @@ var r1 = function(param) {
             transition: "border-color 300ms ease-in-out"
         }, r.mq.supportsHover, {
             "&:hover span": {
-                color: function(param) {
-                    var n = param.isInverse;
-                    return n ? r.colors.textSecondaryInverse : r.colors.textSecondary;
+                color: function color(param) {
+                    var t = param.isInverse;
+                    return t ? _skinContractCssMisticaJs.vars.colors.textSecondaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary;
                 }
             }
         }),
         selectedSection: {
-            borderColor: function(param) {
-                var n = param.isInverse;
-                return n ? r.colors.inverse : r.colors.controlActivated;
+            borderColor: function borderColor(param) {
+                var t = param.isInverse;
+                return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.controlActivated;
             }
         },
         spacer: _defineProperty({
@@ -503,19 +504,19 @@ var r1 = function(param) {
             height: _themeJs.NAVBAR_HEIGHT_MOBILE
         }),
         burgerMenu: {
-            zIndex: C1,
+            zIndex: l1,
             position: "fixed",
             top: _themeJs.NAVBAR_HEIGHT_MOBILE,
             left: 0,
             right: 0,
             height: "calc(100vh - ".concat(_themeJs.NAVBAR_HEIGHT_MOBILE, "px)"),
             overflowY: "auto",
-            background: r.colors.background,
-            boxShadow: function(param) {
-                var n = param.menuTransitionState;
-                return n !== "closed" ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(t, ")") : "none";
+            background: _skinContractCssMisticaJs.vars.colors.background,
+            boxShadow: function boxShadow(param) {
+                var t = param.menuTransitionState;
+                return t !== "closed" ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(o, ")") : "none";
             },
-            transition: "transform ".concat(O, "ms ease-out")
+            transition: "transform ".concat(R, "ms ease-out")
         },
         burgerMenuEnter: {
             transform: "translate(-100vw)"
@@ -530,15 +531,15 @@ var r1 = function(param) {
             transform: "translate(-100vw)"
         },
         iconButton: _defineProperty({
-            color: function(param) {
-                var n = param.isInverse;
-                return n ? r.colors.inverse : r.colors.neutralHigh;
+            color: function color(param) {
+                var t = param.isInverse;
+                return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralHigh;
             }
         }, r.mq.supportsHover, {
             "&:hover": {
-                color: function(param) {
-                    var n = param.isInverse;
-                    return n ? r.colors.inverse : r.colors.neutralMedium;
+                color: function color(param) {
+                    var t = param.isInverse;
+                    return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium;
                 }
             }
         }),
@@ -547,35 +548,35 @@ var r1 = function(param) {
             justifyContent: "center"
         }
     };
-}), T1 = function(param) {
-    var r = param.sections, t = param.selectedIndex, n = param.right, a = param.logo, tmp = param.isInverse, o = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, C = tmp1 === void 0 ? !0 : tmp1;
-    var ref = (0, _hooksJs.useTheme)(), M = ref.texts, ref1 = _slicedToArray(_react.useState(!1), 2), l = ref1[0], d = ref1[1], ref2 = _slicedToArray(_react.useState("closed"), 2), h = ref2[0], H = ref2[1], B = (0, _hooksJs.useAriaId)(), i = L({
-        isMenuOpen: l,
-        isInverse: o,
-        menuTransitionState: h,
+}), R1 = function R1(param) {
+    var r = param.sections, o = param.selectedIndex, t = param.right, s = param.logo, tmp = param.isInverse, i = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, l = tmp1 === void 0 ? !0 : tmp1;
+    var ref = (0, _hooksJs.useTheme)(), H = ref.texts, ref1 = _slicedToArray(_react.useState(!1), 2), d = ref1[0], p = ref1[1], ref2 = _slicedToArray(_react.useState("closed"), 2), m = ref2[0], f = ref2[1], S = (0, _hooksJs.useAriaId)(), c = B({
+        isMenuOpen: d,
+        isInverse: i,
+        menuTransitionState: m,
         withBorder: !0
-    }), ref3 = (0, _hooksJs.useScreenSize)(), R = ref3.isTabletOrSmaller, S = (0, _modalContextProviderJs.useSetModalState)();
-    if (a = a != null ? a : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, {}), R) {
-        var I = function() {
-            d(!0), S({
+    }), ref3 = (0, _hooksJs.useScreenSize)(), D = ref3.isTabletOrSmaller, w = (0, _modalContextProviderJs.useSetModalState)();
+    if (s = s != null ? s : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {}), D) {
+        var N = function N() {
+            p(!0), w({
                 isModalOpen: !0
             });
-        }, f = function() {
-            d(!1), S({
+        }, b = function b() {
+            p(!1), w({
                 isModalOpen: !1
             });
-        }, m = h !== "open";
+        }, v = m !== "open";
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
-                    disabled: m,
+                    disabled: v,
                     group: "burger-menu-lock",
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("header", {
                         children: [
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-                                isInverse: o,
+                                isInverse: i,
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                    className: (0, _classnames.default)(i.navbar, _defineProperty({}, i.topFixed, C)),
+                                    className: (0, _classnames.default)(c.navbar, _defineProperty({}, c.topFixed, l)),
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
                                             space: "between",
@@ -587,69 +588,69 @@ var r1 = function(param) {
                                                     children: [
                                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
                                                             "aria-live": "polite",
-                                                            "aria-label": l ? M.closeNavigationMenu : M.openNavigationMenu,
-                                                            "aria-expanded": l,
-                                                            "aria-controls": B,
-                                                            onPress: l ? f : I,
-                                                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i1, {
-                                                                isOpen: l
+                                                            "aria-label": d ? H.closeNavigationMenu : H.openNavigationMenu,
+                                                            "aria-expanded": d,
+                                                            "aria-controls": S,
+                                                            onPress: d ? b : N,
+                                                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(c1, {
+                                                                isOpen: d
                                                             })
                                                         }),
                                                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                                            className: i.logoContainer,
-                                                            children: a
+                                                            className: c.logoContainer,
+                                                            children: s
                                                         })
                                                     ]
                                                 }),
-                                                n
+                                                t
                                             ]
                                         })
                                     })
                                 })
                             }),
-                            C && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: i.spacer
+                            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                className: c.spacer
                             })
                         ]
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
-                        disabled: m,
+                        disabled: v,
                         group: "burger-menu-lock",
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactTransitionGroup.CSSTransition, {
-                            onEntering: function() {
-                                H("opening");
+                            onEntering: function onEntering() {
+                                f("opening");
                             },
-                            onEntered: function() {
-                                H("open");
+                            onEntered: function onEntered() {
+                                f("open");
                             },
-                            onExiting: function() {
-                                H("closing");
+                            onExiting: function onExiting() {
+                                f("closing");
                             },
-                            onExited: function() {
-                                H("closed");
+                            onExited: function onExited() {
+                                f("closed");
                             },
-                            in: l,
-                            timeout: O,
+                            in: d,
+                            timeout: R,
                             classNames: {
-                                enter: i.burgerMenuEnter,
-                                enterActive: i.burgerMenuEnterActive,
-                                exit: i.burgerMenuExit,
-                                exitActive: i.burgerMenuExitActive
+                                enter: c.burgerMenuEnter,
+                                enterActive: c.burgerMenuEnterActive,
+                                exit: c.burgerMenuExit,
+                                exitActive: c.burgerMenuExitActive
                             },
                             unmountOnExit: !0,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("nav", {
-                                className: i.burgerMenu,
-                                id: B,
-                                onClick: function() {
-                                    f();
+                                className: c.burgerMenu,
+                                id: S,
+                                onClick: function onClick() {
+                                    b();
                                 },
                                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_negativeBoxJs.default, {
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_listJs.RowList, {
-                                            children: r.map(function(D, _) {
-                                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_listJs.Row, _objectSpread({}, D), _);
+                                            children: r.map(function(_, F) {
+                                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_listJs.Row, _objectSpread({}, _), F);
                                             })
                                         })
                                     })
@@ -662,10 +663,10 @@ var r1 = function(param) {
         });
     }
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: o,
+        isInverse: i,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(i.navbar, _defineProperty({}, i.topFixed, C)),
+                className: (0, _classnames.default)(c.navbar, _defineProperty({}, c.topFixed, l)),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
                         space: "between",
@@ -676,45 +677,45 @@ var r1 = function(param) {
                                 alignItems: "center",
                                 children: [
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                        className: i.logoContainer,
-                                        children: a
+                                        className: c.logoContainer,
+                                        children: s
                                     }),
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("nav", {
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
                                             space: 32,
-                                            children: r.map(function(_param, m) /* @__PURE__ */ /*#__PURE__*/ {
-                                                var I = _param.title, f = _objectWithoutProperties(_param, [
+                                            children: r.map(function(_param, v) /* @__PURE__ */ /*#__PURE__*/ {
+                                                var N = _param.title, b = _objectWithoutProperties(_param, [
                                                     "title"
                                                 ]);
-                                                return (0, _react.createElement)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, f), {
-                                                    key: m,
-                                                    className: (0, _classnames.default)(i.section, _defineProperty({}, i.selectedSection, m === t))
+                                                return /*#__PURE__*/ (0, _react.createElement)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, b), {
+                                                    key: v,
+                                                    className: (0, _classnames.default)(c.section, _defineProperty({}, c.selectedSection, v === o))
                                                 }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                                     regular: !0,
-                                                    children: I
+                                                    children: N
                                                 }));
                                             })
                                         })
                                     })
                                 ]
                             }),
-                            n
+                            t
                         ]
                     })
                 })
             }),
-            C && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: i.spacer
+            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: c.spacer
             })
         ]
     });
-}, O1 = function(param) {
-    var r = param.onBack, t = param.title, n = param.right, tmp = param.isInverse, a = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, o = tmp1 === void 0 ? !0 : tmp1, C = param.paddingX, tmp2 = param.withBorder, M = tmp2 === void 0 ? !0 : tmp2;
-    var ref = (0, _hooksJs.useTheme)(), l = ref.texts, d = L({
-        isInverse: a,
-        paddingX: C != null ? C : 0,
-        withBorder: M
-    }), h = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
+}, D1 = function D1(param) {
+    var r = param.onBack, o = param.title, t = param.right, tmp = param.isInverse, s = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, i = tmp1 === void 0 ? !0 : tmp1, l = param.paddingX, tmp2 = param.withBorder, H = tmp2 === void 0 ? !0 : tmp2;
+    var ref = (0, _hooksJs.useTheme)(), d = ref.texts, p = B({
+        isInverse: s,
+        paddingX: l != null ? l : 0,
+        withBorder: H
+    }), m = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
         space: "between",
         alignItems: "center",
         children: [
@@ -723,9 +724,9 @@ var r1 = function(param) {
                 alignItems: "center",
                 children: [
                     r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                        "aria-label": l.backNavigationBar,
+                        "aria-label": d.backNavigationBar,
                         onPress: r,
-                        className: d.iconButton,
+                        className: p.iconButton,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {
                             color: "currentColor"
                         })
@@ -733,44 +734,44 @@ var r1 = function(param) {
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         truncate: !0,
-                        children: t
+                        children: o
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 24,
-                children: n
+                children: t
             })
         ]
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: a,
+        isInverse: s,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(d.navbar, _defineProperty({}, d.topFixed, o)),
-                children: o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
-                    children: h
+                className: (0, _classnames.default)(p.navbar, _defineProperty({}, p.topFixed, i)),
+                children: i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
+                    children: m
                 }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: d.notFixedPadding,
-                    children: h
+                    className: p.notFixedPadding,
+                    children: m
                 })
             }),
-            o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: d.spacer
+            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: p.spacer
             })
         ]
     });
-}, R1 = function(param) {
-    var r = param.logo, t = param.right, tmp = param.isInverse, n = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, a = tmp1 === void 0 ? !0 : tmp1;
-    var o = L({
-        isInverse: n,
+}, _1 = function _1(param) {
+    var r = param.logo, o = param.right, tmp = param.isInverse, t = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, s = tmp1 === void 0 ? !0 : tmp1;
+    var i = B({
+        isInverse: t,
         withBorder: !0
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: n,
+        isInverse: t,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(o.navbar, _defineProperty({}, o.topFixed, a)),
+                className: (0, _classnames.default)(i.navbar, _defineProperty({}, i.topFixed, s)),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
                         template: "10",
@@ -778,77 +779,77 @@ var r1 = function(param) {
                             space: "between",
                             alignItems: "center",
                             children: [
-                                r != null ? r : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, {}),
-                                t
+                                r != null ? r : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {}),
+                                o
                             ]
                         })
                     })
                 })
             }),
-            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: o.spacer
+            s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: i.spacer
             })
         ]
     });
-}, l1 = (0, _jssJs.createUseStyles)(function() {
+}, d1 = (0, _jssJs.createUseStyles)(function() {
     return {
         lineHeightFix: {
             lineHeight: 0
         }
     };
-}), D1 = function(param) {
+}), F1 = function F1(param) {
     var r = param.children;
-    var t = l1();
+    var o = d1();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: t.lineHeightFix,
+        className: o.lineHeightFix,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
             space: 24,
             alignItems: "center",
             children: r
         })
     });
-}, d1 = (0, _jssJs.createUseStyles)(function(r) {
+}, p1 = (0, _jssJs.createUseStyles)(function(r) {
     return {
         touchable: _defineProperty({
             lineHeight: 0,
             "& svg": {
-                color: function(param) {
-                    var t = param.isInverse;
-                    return t ? r.colors.inverse : r.colors.neutralHigh;
+                color: function color(param) {
+                    var o = param.isInverse;
+                    return o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralHigh;
                 }
             }
         }, r.mq.supportsHover, {
             "&:hover span": {
-                color: function(param) {
-                    var t = param.isInverse;
-                    return t ? r.colors.textSecondaryInverse : r.colors.textSecondary;
+                color: function color(param) {
+                    var o = param.isInverse;
+                    return o ? _skinContractCssMisticaJs.vars.colors.textSecondaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary;
                 }
             },
             "&:hover svg": {
-                color: function(param) {
-                    var t = param.isInverse;
-                    return t ? r.colors.inverse : r.colors.neutralMedium;
+                color: function color(param) {
+                    var o = param.isInverse;
+                    return o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium;
                 }
             }
         })
     };
-}), _1 = function(_param) {
-    var r = _param.children, t = _objectWithoutProperties(_param, [
+}), G1 = function G1(_param) {
+    var r = _param.children, o = _objectWithoutProperties(_param, [
         "children"
     ]);
-    var n = (0, _themeVariantContextJs.useIsInverseVariant)(), a = d1({
-        isInverse: n
+    var t = (0, _themeVariantContextJs.useIsInverseVariant)(), s = p1({
+        isInverse: t
     });
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, t), {
-        className: a.touchable,
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, o), {
+        className: s.touchable,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
             space: 16,
             alignItems: "center",
-            children: _react.Children.map(r, function(o) {
-                return typeof o == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+            children: _react.Children.map(r, function(i) {
+                return typeof i == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                     regular: !0,
-                    children: o
-                }) : o;
+                    children: i
+                }) : i;
             })
         })
     }));