@telefonica/mistica 12.11.0 → 12.12.0

package/dist/navigation-bar.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return _1;
+        return Y1;
     },
     MainNavigationBar: function() {
-        return R1;
+        return Q1;
     },
     NavigationBar: function() {
-        return D1;
+        return X1;
     },
     NavigationBarAction: function() {
-        return G1;
+        return e2;
     },
     NavigationBarActionGroup: function() {
-        return F1;
+        return z1;
     },
     NavigationBarLogo: function() {
-        return O;
+        return G;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -34,10 +34,9 @@ var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _responsiveLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./responsive-layout.js"));
 var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
-var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
+var _touchableJs = require("./touchable.js");
 var _textJs = require("./text.js");
 var _hooksJs = require("./hooks.js");
-var _jssJs = require("./jss.js");
 var _iconMenuRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-menu-regular.js"));
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 var _iconChevronLeftRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-chevron-left-regular.js"));
@@ -49,8 +48,10 @@ var _focusTrapJs = /*#__PURE__*/ _interopRequireDefault(require("./focus-trap.js
 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 _navigationBarCssMisticaJs = require("./navigation-bar.css-mistica.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+var _domJs = require("./utils/dom.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -221,26 +222,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 t1 = function t1(param) {
+var g1 = function g1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isDarkMode, n = (0, _themeVariantContextJs.useIsInverseVariant)() && !t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: s,
+        fill: n,
         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"
         })
     });
-}, o1 = function o1(param) {
+}, H1 = function H1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isDarkMode, n = (0, _themeVariantContextJs.useIsInverseVariant)() && !t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
@@ -263,26 +264,26 @@ var t1 = function t1(param) {
             })
         ]
     });
-}, n1 = function n1(param) {
+}, f1 = function f1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isDarkMode, n = (0, _themeVariantContextJs.useIsInverseVariant)() && !t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: s,
+        fill: n,
         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"
         })
     });
-}, s1 = function s1(param) {
+}, V1 = function V1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isDarkMode, n = (0, _themeVariantContextJs.useIsInverseVariant)() && !t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
@@ -338,13 +339,13 @@ var t1 = function t1(param) {
             })
         ]
     });
-}, a1 = function a1(param) {
+}, b1 = function b1(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.isDarkMode, s = (0, _themeVariantContextJs.useIsInverseVariant)() && !o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isDarkMode, n = (0, _themeVariantContextJs.useIsInverseVariant)() && !t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.brand;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("svg", {
         height: r,
         viewBox: "0 0 46 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
@@ -365,292 +366,171 @@ var t1 = function t1(param) {
             })
         ]
     });
-}, O = function O(param) {
+}, G = function G(param) {
     var r = param.size;
-    var ref = (0, _hooksJs.useTheme)(), o = ref.skinName, ref1 = (0, _hooksJs.useScreenSize)(), t = ref1.isTabletOrSmaller;
-    switch(r = r != null ? r : t ? 40 : 48, o){
+    var ref = (0, _hooksJs.useTheme)(), t = ref.skinName, ref1 = (0, _hooksJs.useScreenSize)(), a = ref1.isTabletOrSmaller;
+    switch(r = r != null ? r : a ? 40 : 48, t){
         case "Movistar":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(t1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(g1, {
                 size: r
             });
         case "Vivo":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(o1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(H1, {
                 size: r
             });
         case "O2":
         case "O2-classic":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(n1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(f1, {
                 size: r
             });
         case "Telefonica":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(s1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V1, {
                 size: r
             });
         case "Blau":
-            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a1, {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(b1, {
                 size: r
             });
         default:
             return null;
     }
-}, i1 = (0, _jssJs.createUseStyles)(function() {
-    return {
-        burgerIconContainer: {
-            position: "relative",
-            width: 24,
-            height: 24,
-            "& > *": {
-                position: "absolute",
-                opacity: 1,
-                transform: "rotate(0) scale(1)",
-                transition: "transform 300ms, opacity 100ms"
-            }
-        },
-        iconCloseHidden: {
-            opacity: 0,
-            transform: "rotate(-45deg) scale(0.9)"
-        },
-        iconMenuHidden: {
-            opacity: 0,
-            transform: "rotate(0deg) scale(0.7)"
-        }
-    };
-}), c1 = function c1(param) {
+}, Z1 = function Z1(param) {
     var r = param.isOpen;
-    var o = i1();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-        className: o.burgerIconContainer,
+        className: _navigationBarCssMisticaJs.burgerIconContainer,
         role: "presentation",
+        "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: r ? "" : o.iconCloseHidden,
+                className: r ? "" : _navigationBarCssMisticaJs.iconCloseHidden,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {})
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: r ? o.iconMenuHidden : "",
+                className: r ? _navigationBarCssMisticaJs.iconMenuHidden : "",
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconMenuRegularJs.default, {})
             })
         ]
     });
-}, 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
-        },
-        notFixedPadding: {
-            width: "100%",
-            padding: function padding(param) {
-                var t = param.paddingX;
-                return "0 ".concat(t, "px");
-            }
-        },
-        navbar: _defineProperty({
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            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 borderBottomWidth(param) {
-                var t = param.withBorder;
-                return t ? 1 : 0;
-            },
-            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 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"
-        }),
-        section: _defineProperty({
-            height: _themeJs.NAVBAR_HEIGHT_DESKTOP,
-            display: "flex",
-            alignItems: "center",
-            padding: "0 8px",
-            borderBottom: "2px solid transparent",
-            transition: "border-color 300ms ease-in-out"
-        }, r.mq.supportsHover, {
-            "&:hover span": {
-                color: function color(param) {
-                    var t = param.isInverse;
-                    return t ? _skinContractCssMisticaJs.vars.colors.textSecondaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary;
-                }
-            }
-        }),
-        selectedSection: {
-            borderColor: function borderColor(param) {
-                var t = param.isInverse;
-                return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.controlActivated;
-            }
-        },
-        spacer: _defineProperty({
-            height: _themeJs.NAVBAR_HEIGHT_DESKTOP
-        }, r.mq.tabletOrSmaller, {
-            height: _themeJs.NAVBAR_HEIGHT_MOBILE
-        }),
-        burgerMenu: {
-            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: _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(R, "ms ease-out")
-        },
-        burgerMenuEnter: {
-            transform: "translate(-100vw)"
-        },
-        burgerMenuEnterActive: {
-            transform: "translate(0)"
-        },
-        burgerMenuExit: {
-            transform: "translate(0)"
-        },
-        burgerMenuExitActive: {
-            transform: "translate(-100vw)"
-        },
-        iconButton: _defineProperty({
-            color: function color(param) {
-                var t = param.isInverse;
-                return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralHigh;
-            }
-        }, r.mq.supportsHover, {
-            "&:hover": {
-                color: function color(param) {
-                    var t = param.isInverse;
-                    return t ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium;
-                }
-            }
-        }),
-        logoContainer: {
-            display: "flex",
-            justifyContent: "center"
+}, N1 = 300, V = function V(param) {
+    var r = param.children, t = param.topFixed, a = param.withBorder, n = param.isMenuOpen, i = param.isInverse, d = param.dataAttributes;
+    var ref = (0, _hooksJs.useTheme)(), u = ref.isDarkMode;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", _objectSpreadProps(_objectSpread({
+        className: (0, _classnames.default)(function() {
+            var C = i && !u;
+            return n || C ? _navigationBarCssMisticaJs.navbarBorderColorVariants.inverse : n && !C ? _navigationBarCssMisticaJs.navbarBorderColorVariants.menuOpen : _navigationBarCssMisticaJs.navbarBorderColorVariants.default;
+        }(), _defineProperty({}, _navigationBarCssMisticaJs.topFixed, t)),
+        style: {
+            borderBottomWidth: a ? 1 : 0,
+            background: i ? _skinContractCssMisticaJs.vars.colors.navigationBarBackground : _skinContractCssMisticaJs.vars.colors.background
         }
-    };
-}), 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)(), 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({
+    }, (0, _domJs.getPrefixedDataAttributes)(d)), {
+        children: r
+    }));
+}, Q1 = function Q1(param) {
+    var r = param.sections, t = param.selectedIndex, a = param.right, n = param.logo, tmp = param.isInverse, i = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, d = tmp1 === void 0 ? !0 : tmp1;
+    var ref = (0, _hooksJs.useTheme)(), u = ref.texts, M = ref.isDarkMode, ref1 = _slicedToArray(_react.useState(!1), 2), C = ref1[0], B = ref1[1], ref2 = _slicedToArray(_react.useState("closed"), 2), I = ref2[0], v = ref2[1], x = (0, _hooksJs.useAriaId)(), P = M ? 1 : 0.2, ref3 = (0, _hooksJs.useScreenSize)(), _ = ref3.isTabletOrSmaller, w = (0, _modalContextProviderJs.useSetModalState)();
+    if (n = n != null ? n : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(G, {}), _) {
+        var b = function b() {
+            B(!0), w({
                 isModalOpen: !0
             });
-        }, b = function b() {
-            p(!1), w({
+        }, g = function g() {
+            B(!1), w({
                 isModalOpen: !1
             });
-        }, v = m !== "open";
+        }, p = I !== "open";
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
             children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
-                    disabled: v,
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_focusTrapJs.default, {
+                    disabled: p,
                     group: "burger-menu-lock",
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("header", {
-                        children: [
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                    children: [
+                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+                            isInverse: i,
+                            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, {
+                                topFixed: d,
+                                withBorder: !0,
+                                isMenuOpen: C,
                                 isInverse: i,
-                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                    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",
-                                            alignItems: "center",
-                                            children: [
-                                                /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
-                                                    space: 24,
-                                                    alignItems: "center",
-                                                    children: [
-                                                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                                                            "aria-live": "polite",
-                                                            "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: c.logoContainer,
-                                                            children: s
+                                dataAttributes: {
+                                    "component-name": "MainNavigationBar"
+                                },
+                                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
+                                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
+                                        space: "between",
+                                        alignItems: "center",
+                                        children: [
+                                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
+                                                space: 24,
+                                                alignItems: "center",
+                                                children: [
+                                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
+                                                        "aria-live": "polite",
+                                                        "aria-label": C ? u.closeNavigationMenu : u.openNavigationMenu,
+                                                        "aria-expanded": C,
+                                                        "aria-controls": x,
+                                                        onPress: C ? g : b,
+                                                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Z1, {
+                                                            isOpen: C
                                                         })
-                                                    ]
-                                                }),
-                                                t
-                                            ]
-                                        })
+                                                    }),
+                                                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                                        className: _navigationBarCssMisticaJs.logoContainer,
+                                                        children: n
+                                                    })
+                                                ]
+                                            }),
+                                            a
+                                        ]
                                     })
                                 })
-                            }),
-                            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                className: c.spacer
                             })
-                        ]
-                    })
+                        }),
+                        d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                            className: _navigationBarCssMisticaJs.spacer
+                        })
+                    ]
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_portalJs.Portal, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_focusTrapJs.default, {
-                        disabled: v,
+                        disabled: p,
                         group: "burger-menu-lock",
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_reactTransitionGroup.CSSTransition, {
                             onEntering: function onEntering() {
-                                f("opening");
+                                v("opening");
                             },
                             onEntered: function onEntered() {
-                                f("open");
+                                v("open");
                             },
                             onExiting: function onExiting() {
-                                f("closing");
+                                v("closing");
                             },
                             onExited: function onExited() {
-                                f("closed");
+                                v("closed");
                             },
-                            in: d,
-                            timeout: R,
+                            in: C,
+                            timeout: N1,
                             classNames: {
-                                enter: c.burgerMenuEnter,
-                                enterActive: c.burgerMenuEnterActive,
-                                exit: c.burgerMenuExit,
-                                exitActive: c.burgerMenuExitActive
+                                enter: _navigationBarCssMisticaJs.burgerMenuEnter,
+                                enterActive: _navigationBarCssMisticaJs.burgerMenuEnterActive,
+                                exit: _navigationBarCssMisticaJs.burgerMenuExit,
+                                exitActive: _navigationBarCssMisticaJs.burgerMenuExitActive
                             },
                             unmountOnExit: !0,
                             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("nav", {
-                                className: c.burgerMenu,
-                                id: S,
+                                className: _navigationBarCssMisticaJs.burgerMenu,
+                                style: {
+                                    boxShadow: I !== "closed" ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(P, ")") : "none"
+                                },
+                                id: x,
                                 onClick: function onClick() {
-                                    b();
+                                    g();
                                 },
                                 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(_, F) {
-                                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_listJs.Row, _objectSpread({}, _), F);
+                                            children: r.map(function(U, j) {
+                                                return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_listJs.Row, _objectSpread({}, U), j);
                                             })
                                         })
                                     })
@@ -665,8 +545,14 @@ var t1 = function t1(param) {
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
         isInverse: i,
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(c.navbar, _defineProperty({}, c.topFixed, l)),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, {
+                topFixed: d,
+                withBorder: !0,
+                isMenuOpen: C,
+                isInverse: i,
+                dataAttributes: {
+                    "component-name": "MainNavigationBar"
+                },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
                         space: "between",
@@ -677,45 +563,45 @@ var t1 = function t1(param) {
                                 alignItems: "center",
                                 children: [
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                                        className: c.logoContainer,
-                                        children: s
+                                        className: _navigationBarCssMisticaJs.logoContainer,
+                                        children: n
                                     }),
                                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("nav", {
                                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
                                             space: 32,
-                                            children: r.map(function(_param, v) /* @__PURE__ */ /*#__PURE__*/ {
-                                                var N = _param.title, b = _objectWithoutProperties(_param, [
+                                            children: r.map(function(_param, p) /* @__PURE__ */ /*#__PURE__*/ {
+                                                var b = _param.title, g = _objectWithoutProperties(_param, [
                                                     "title"
                                                 ]);
-                                                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: N
+                                                return /*#__PURE__*/ (0, _react.createElement)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, g), {
+                                                    key: p,
+                                                    className: (0, _classnames.default)(_navigationBarCssMisticaJs.section, _defineProperty({}, _navigationBarCssMisticaJs.selectedSectionVariantes[i ? "inverse" : "default"], p === t))
+                                                }), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                                                    className: _navigationBarCssMisticaJs.textWrapperVariants[i ? "inverse" : "default"],
+                                                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                                        regular: !0,
+                                                        color: "inherit",
+                                                        children: b
+                                                    })
                                                 }));
                                             })
                                         })
                                     })
                                 ]
                             }),
-                            t
+                            a
                         ]
                     })
                 })
             }),
-            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: c.spacer
+            d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _navigationBarCssMisticaJs.spacer
             })
         ]
     });
-}, 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, {
+}, X1 = function X1(param) {
+    var r = param.onBack, t = param.title, a = param.right, tmp = param.isInverse, n = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, i = tmp1 === void 0 ? !0 : tmp1, tmp2 = param.paddingX, d = tmp2 === void 0 ? 0 : tmp2, tmp3 = param.withBorder, u = tmp3 === void 0 ? !0 : tmp3;
+    var ref = (0, _hooksJs.useTheme)(), M = ref.texts, C = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
         space: "between",
         alignItems: "center",
         children: [
@@ -724,9 +610,9 @@ var t1 = function t1(param) {
                 alignItems: "center",
                 children: [
                     r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
-                        "aria-label": d.backNavigationBar,
+                        "aria-label": M.backNavigationBar,
                         onPress: r,
-                        className: p.iconButton,
+                        className: _navigationBarCssMisticaJs.iconButtonVariants[n ? "inverse" : "default"],
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronLeftRegularJs.default, {
                             color: "currentColor"
                         })
@@ -734,44 +620,55 @@ var t1 = function t1(param) {
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         truncate: !0,
-                        children: o
+                        children: t
                     })
                 ]
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 24,
-                children: t
+                children: a
             })
         ]
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: s,
+        isInverse: n,
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(p.navbar, _defineProperty({}, p.topFixed, i)),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, {
+                topFixed: i,
+                withBorder: u,
+                isInverse: n,
+                dataAttributes: {
+                    "component-name": "NavigationBar"
+                },
                 children: i ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
-                    children: m
+                    children: C
                 }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: p.notFixedPadding,
-                    children: m
+                    className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                        width: "100%"
+                    }),
+                    style: {
+                        padding: "0 ".concat(d, "px")
+                    },
+                    children: C
                 })
             }),
             i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: p.spacer
+                className: _navigationBarCssMisticaJs.spacer
             })
         ]
     });
-}, _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
-    });
+}, Y1 = function Y1(param) {
+    var r = param.logo, t = param.right, tmp = param.isInverse, a = tmp === void 0 ? !1 : tmp, tmp1 = param.topFixed, n = tmp1 === void 0 ? !0 : tmp1;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: t,
+        isInverse: a,
         children: [
-            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("header", {
-                className: (0, _classnames.default)(i.navbar, _defineProperty({}, i.topFixed, s)),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, {
+                topFixed: n,
+                withBorder: !0,
+                isInverse: a,
+                dataAttributes: {
+                    "component-name": "FunnelNavigationBar"
+                },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
                         template: "10",
@@ -779,77 +676,52 @@ var t1 = function t1(param) {
                             space: "between",
                             alignItems: "center",
                             children: [
-                                r != null ? r : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(O, {}),
-                                o
+                                r != null ? r : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(G, {}),
+                                t
                             ]
                         })
                     })
                 })
             }),
-            s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: i.spacer
+            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _navigationBarCssMisticaJs.spacer
             })
         ]
     });
-}, d1 = (0, _jssJs.createUseStyles)(function() {
-    return {
-        lineHeightFix: {
-            lineHeight: 0
-        }
-    };
-}), F1 = function F1(param) {
+}, z1 = function z1(param) {
     var r = param.children;
-    var o = d1();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: o.lineHeightFix,
+        className: _navigationBarCssMisticaJs.lineHeightFix,
+        "data-component-name": "NavigationBarActionGroup",
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
             space: 24,
             alignItems: "center",
             children: r
         })
     });
-}, p1 = (0, _jssJs.createUseStyles)(function(r) {
-    return {
-        touchable: _defineProperty({
-            lineHeight: 0,
-            "& svg": {
-                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 color(param) {
-                    var o = param.isInverse;
-                    return o ? _skinContractCssMisticaJs.vars.colors.textSecondaryInverse : _skinContractCssMisticaJs.vars.colors.textSecondary;
-                }
-            },
-            "&:hover svg": {
-                color: function color(param) {
-                    var o = param.isInverse;
-                    return o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium;
-                }
-            }
-        })
-    };
-}), G1 = function G1(_param) {
-    var r = _param.children, o = _objectWithoutProperties(_param, [
+}, e2 = function e2(_param) {
+    var r = _param.children, t = _objectWithoutProperties(_param, [
         "children"
     ]);
-    var t = (0, _themeVariantContextJs.useIsInverseVariant)(), s = p1({
-        isInverse: t
-    });
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, _objectSpreadProps(_objectSpread({}, o), {
-        className: s.touchable,
+    var a = (0, _themeVariantContextJs.useIsInverseVariant)();
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, t), {
+        className: (0, _classnames.default)((0, _sprinklesCssMisticaJs.sprinkles)({
+            border: "none",
+            background: "transparent",
+            padding: 0
+        }), _navigationBarCssMisticaJs.lineHeightFix, _navigationBarCssMisticaJs.textWrapperVariants[a ? "inverse" : "default"]),
+        dataAttributes: {
+            "component-name": "NavigationBarAction"
+        },
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_inlineJs.default, {
             space: 16,
             alignItems: "center",
-            children: _react.Children.map(r, function(i) {
-                return typeof i == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+            children: _react.Children.map(r, function(n) {
+                return typeof n == "string" ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                     regular: !0,
-                    children: i
-                }) : i;
+                    color: "inherit",
+                    children: n
+                }) : n;
             })
         })
     }));