@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/navigation-bar.js

@@ -123,51 +123,52 @@ 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);
 }
-import * as L from "react";
-import { createElement as G } from "react";
-import { CSSTransition as P } from "react-transition-group";
-import g from "classnames";
-import M from "./responsive-layout.js";
-import C from "./inline.js";
-import q from "./box.js";
-import y from "./touchable.js";
-import { Text3 as A, Text2 as U } from "./text.js";
-import { useTheme as h, useScreenSize as k, useAriaId as $ } from "./hooks.js";
-import { createUseStyles as I } from "./jss.js";
-import j from "./generated/mistica-icons/icon-menu-regular.js";
-import K from "./generated/mistica-icons/icon-close-regular.js";
-import W from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import T from "./icon-button.js";
+import * as N from "react";
+import { createElement as F } from "react";
+import { CSSTransition as W } from "react-transition-group";
+import L from "classnames";
+import h from "./responsive-layout.js";
+import c from "./inline.js";
+import $ from "./box.js";
+import { BaseTouchable as S } from "./touchable.js";
+import { Text3 as T, Text2 as q } from "./text.js";
+import { useTheme as l, useScreenSize as E, useAriaId as J } from "./hooks.js";
+import K from "./generated/mistica-icons/icon-menu-regular.js";
+import Q from "./generated/mistica-icons/icon-close-regular.js";
+import X from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import O from "./icon-button.js";
 import Y from "./negative-box.js";
-import { RowList as J, Row as Q } from "./list.js";
-import { ThemeVariant as V, useIsInverseVariant as u } from "./theme-variant-context.js";
-import E from "./focus-trap.js";
-import { Portal as X } from "./portal.js";
-import z from "./grid-layout.js";
-import { useSetModalState as e1 } from "./modal-context-provider.js";
-import { NAVBAR_HEIGHT_DESKTOP as Z, NAVBAR_HEIGHT_MOBILE as x } from "./theme.js";
-import { vars as n } from "./skins/skin-contract.css-mistica.js";
-import { jsx as e, jsxs as a, Fragment as r1 } from "./_virtual/jsx-runtime.js";
-var t1 = function(param) {
+import { RowList as z, Row as e1 } from "./list.js";
+import { ThemeVariant as H, useIsInverseVariant as m } from "./theme-variant-context.js";
+import A from "./focus-trap.js";
+import { Portal as r1 } from "./portal.js";
+import n1 from "./grid-layout.js";
+import { useSetModalState as t1 } from "./modal-context-provider.js";
+import { vars as s } from "./skins/skin-contract.css-mistica.js";
+import { logoContainer as k, spacer as f, burgerMenuEnter as a1, burgerMenuEnterActive as o1, burgerMenuExit as i1, burgerMenuExitActive as C1, burgerMenu as s1, section as c1, selectedSectionVariantes as l1, textWrapperVariants as R, iconButtonVariants as d1, lineHeightFix as D, burgerIconContainer as u1, iconCloseHidden as m1, iconMenuHidden as p1, topFixed as h1, navbarBorderColorVariants as Z } from "./navigation-bar.css-mistica.js";
+import { sprinkles as y } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as M1 } from "./utils/dom.js";
+import { jsx as e, jsxs as o, Fragment as v1 } from "./_virtual/jsx-runtime.js";
+var g1 = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.isDarkMode, s = u() && !o ? n.colors.inverse : n.colors.brand;
+    var ref = l(), t = ref.isDarkMode, n = m() && !t ? s.colors.inverse : s.colors.brand;
     return /* @__PURE__ */ e("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: /* @__PURE__ */ e("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(param) {
+}, H1 = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.isDarkMode, s = u() && !o ? n.colors.inverse : n.colors.brand;
-    return /* @__PURE__ */ a("svg", {
+    var ref = l(), t = ref.isDarkMode, n = m() && !t ? s.colors.inverse : s.colors.brand;
+    return /* @__PURE__ */ o("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ e("path", {
@@ -190,26 +191,26 @@ var t1 = function(param) {
             })
         ]
     });
-}, n1 = function(param) {
+}, f1 = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.isDarkMode, s = u() && !o ? n.colors.inverse : n.colors.brand;
+    var ref = l(), t = ref.isDarkMode, n = m() && !t ? s.colors.inverse : s.colors.brand;
     return /* @__PURE__ */ e("svg", {
         width: r,
         height: r,
         viewBox: "0 0 24 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: /* @__PURE__ */ e("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(param) {
+}, V1 = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.isDarkMode, s = u() && !o ? n.colors.inverse : n.colors.brand;
-    return /* @__PURE__ */ a("svg", {
+    var ref = l(), t = ref.isDarkMode, n = m() && !t ? s.colors.inverse : s.colors.brand;
+    return /* @__PURE__ */ o("svg", {
         height: r,
         viewBox: "0 0 65 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ e("path", {
@@ -265,18 +266,18 @@ var t1 = function(param) {
             })
         ]
     });
-}, a1 = function(param) {
+}, b1 = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.isDarkMode, s = u() && !o ? n.colors.inverse : n.colors.brand;
-    return /* @__PURE__ */ a("svg", {
+    var ref = l(), t = ref.isDarkMode, n = m() && !t ? s.colors.inverse : s.colors.brand;
+    return /* @__PURE__ */ o("svg", {
         height: r,
         viewBox: "0 0 46 24",
-        fill: s,
+        fill: n,
         role: "presentation",
         children: [
             /* @__PURE__ */ e("path", {
                 d: "M44 17.7136H2V21.1579H44V17.7136Z",
-                fill: n.colors.textLink
+                fill: s.colors.textLink
             }),
             /* @__PURE__ */ e("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"
@@ -292,292 +293,171 @@ var t1 = function(param) {
             })
         ]
     });
-}, O = function(param) {
+}, G = function(param) {
     var r = param.size;
-    var ref = h(), o = ref.skinName, ref1 = k(), t = ref1.isTabletOrSmaller;
-    switch(r = r != null ? r : t ? 40 : 48, o){
+    var ref = l(), t = ref.skinName, ref1 = E(), a = ref1.isTabletOrSmaller;
+    switch(r = r != null ? r : a ? 40 : 48, t){
         case "Movistar":
-            return /* @__PURE__ */ e(t1, {
+            return /* @__PURE__ */ e(g1, {
                 size: r
             });
         case "Vivo":
-            return /* @__PURE__ */ e(o1, {
+            return /* @__PURE__ */ e(H1, {
                 size: r
             });
         case "O2":
         case "O2-classic":
-            return /* @__PURE__ */ e(n1, {
+            return /* @__PURE__ */ e(f1, {
                 size: r
             });
         case "Telefonica":
-            return /* @__PURE__ */ e(s1, {
+            return /* @__PURE__ */ e(V1, {
                 size: r
             });
         case "Blau":
-            return /* @__PURE__ */ e(a1, {
+            return /* @__PURE__ */ e(b1, {
                 size: r
             });
         default:
             return null;
     }
-}, i1 = I(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(param) {
+}, Z1 = function(param) {
     var r = param.isOpen;
-    var o = i1();
-    return /* @__PURE__ */ a("div", {
-        className: o.burgerIconContainer,
+    return /* @__PURE__ */ o("div", {
+        className: u1,
         role: "presentation",
+        "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: r ? "" : o.iconCloseHidden,
-                children: /* @__PURE__ */ e(K, {})
+                className: r ? "" : m1,
+                children: /* @__PURE__ */ e(Q, {})
             }),
             /* @__PURE__ */ e("div", {
-                className: r ? o.iconMenuHidden : "",
-                children: /* @__PURE__ */ e(j, {})
+                className: r ? p1 : "",
+                children: /* @__PURE__ */ e(K, {})
             })
         ]
     });
-}, C1 = 25, l1 = 26, R = 300, B = I(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(param) {
-                var t = param.paddingX;
-                return "0 ".concat(t, "px");
-            }
-        },
-        navbar: _defineProperty({
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            background: function(param) {
-                var t = param.isInverse;
-                return t ? n.colors.navigationBarBackground : n.colors.background;
-            },
-            height: Z,
-            padding: "16px 0",
-            borderBottomStyle: "solid",
-            borderBottomWidth: function(param) {
-                var t = param.withBorder;
-                return t ? 1 : 0;
-            },
-            borderColor: function(param) {
-                var t = param.isInverse;
-                return t && !r.isDarkMode ? "transparent" : n.colors.divider;
-            }
-        }, r.mq.tabletOrSmaller, {
-            transition: "border-color 300ms",
-            borderColor: function(param) {
-                var t = param.isMenuOpen, s = param.isInverse;
-                return t || s && !r.isDarkMode ? "transparent" : n.colors.divider;
-            },
-            height: x,
-            padding: "8px 0"
-        }),
-        section: _defineProperty({
-            height: Z,
-            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(param) {
-                    var t = param.isInverse;
-                    return t ? n.colors.textSecondaryInverse : n.colors.textSecondary;
-                }
-            }
-        }),
-        selectedSection: {
-            borderColor: function(param) {
-                var t = param.isInverse;
-                return t ? n.colors.inverse : n.colors.controlActivated;
-            }
-        },
-        spacer: _defineProperty({
-            height: Z
-        }, r.mq.tabletOrSmaller, {
-            height: x
-        }),
-        burgerMenu: {
-            zIndex: l1,
-            position: "fixed",
-            top: x,
-            left: 0,
-            right: 0,
-            height: "calc(100vh - ".concat(x, "px)"),
-            overflowY: "auto",
-            background: n.colors.background,
-            boxShadow: function(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(param) {
-                var t = param.isInverse;
-                return t ? n.colors.inverse : n.colors.neutralHigh;
-            }
-        }, r.mq.supportsHover, {
-            "&:hover": {
-                color: function(param) {
-                    var t = param.isInverse;
-                    return t ? n.colors.inverse : n.colors.neutralMedium;
-                }
-            }
-        }),
-        logoContainer: {
-            display: "flex",
-            justifyContent: "center"
+}, N1 = 300, V = function(param) {
+    var r = param.children, t = param.topFixed, a = param.withBorder, n = param.isMenuOpen, i = param.isInverse, d = param.dataAttributes;
+    var ref = l(), u = ref.isDarkMode;
+    return /* @__PURE__ */ e("header", _objectSpreadProps(_objectSpread({
+        className: L(function() {
+            var C = i && !u;
+            return n || C ? Z.inverse : n && !C ? Z.menuOpen : Z.default;
+        }(), _defineProperty({}, h1, t)),
+        style: {
+            borderBottomWidth: a ? 1 : 0,
+            background: i ? s.colors.navigationBarBackground : s.colors.background
         }
-    };
-}), R1 = function(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 = h(), H = ref.texts, ref1 = _slicedToArray(L.useState(!1), 2), d = ref1[0], p = ref1[1], ref2 = _slicedToArray(L.useState("closed"), 2), m = ref2[0], f = ref2[1], S = $(), c = B({
-        isMenuOpen: d,
-        isInverse: i,
-        menuTransitionState: m,
-        withBorder: !0
-    }), ref3 = k(), D = ref3.isTabletOrSmaller, w = e1();
-    if (s = s != null ? s : /* @__PURE__ */ e(O, {}), D) {
-        var N = function() {
-            p(!0), w({
+    }, M1(d)), {
+        children: r
+    }));
+}, Q1 = function(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 = l(), u = ref.texts, M = ref.isDarkMode, ref1 = _slicedToArray(N.useState(!1), 2), C = ref1[0], B = ref1[1], ref2 = _slicedToArray(N.useState("closed"), 2), I = ref2[0], v = ref2[1], x = J(), P = M ? 1 : 0.2, ref3 = E(), _ = ref3.isTabletOrSmaller, w = t1();
+    if (n = n != null ? n : /* @__PURE__ */ e(G, {}), _) {
+        var b = function() {
+            B(!0), w({
                 isModalOpen: !0
             });
-        }, b = function() {
-            p(!1), w({
+        }, g = function() {
+            B(!1), w({
                 isModalOpen: !1
             });
-        }, v = m !== "open";
-        return /* @__PURE__ */ a(r1, {
+        }, p = I !== "open";
+        return /* @__PURE__ */ o(v1, {
             children: [
-                /* @__PURE__ */ e(E, {
-                    disabled: v,
+                /* @__PURE__ */ o(A, {
+                    disabled: p,
                     group: "burger-menu-lock",
-                    children: /* @__PURE__ */ a("header", {
-                        children: [
-                            /* @__PURE__ */ e(V, {
+                    children: [
+                        /* @__PURE__ */ e(H, {
+                            isInverse: i,
+                            children: /* @__PURE__ */ e(V, {
+                                topFixed: d,
+                                withBorder: !0,
+                                isMenuOpen: C,
                                 isInverse: i,
-                                children: /* @__PURE__ */ e("div", {
-                                    className: g(c.navbar, _defineProperty({}, c.topFixed, l)),
-                                    children: /* @__PURE__ */ e(M, {
-                                        children: /* @__PURE__ */ a(C, {
-                                            space: "between",
-                                            alignItems: "center",
-                                            children: [
-                                                /* @__PURE__ */ a(C, {
-                                                    space: 24,
-                                                    alignItems: "center",
-                                                    children: [
-                                                        /* @__PURE__ */ e(T, {
-                                                            "aria-live": "polite",
-                                                            "aria-label": d ? H.closeNavigationMenu : H.openNavigationMenu,
-                                                            "aria-expanded": d,
-                                                            "aria-controls": S,
-                                                            onPress: d ? b : N,
-                                                            children: /* @__PURE__ */ e(c1, {
-                                                                isOpen: d
-                                                            })
-                                                        }),
-                                                        /* @__PURE__ */ e("div", {
-                                                            className: c.logoContainer,
-                                                            children: s
+                                dataAttributes: {
+                                    "component-name": "MainNavigationBar"
+                                },
+                                children: /* @__PURE__ */ e(h, {
+                                    children: /* @__PURE__ */ o(c, {
+                                        space: "between",
+                                        alignItems: "center",
+                                        children: [
+                                            /* @__PURE__ */ o(c, {
+                                                space: 24,
+                                                alignItems: "center",
+                                                children: [
+                                                    /* @__PURE__ */ e(O, {
+                                                        "aria-live": "polite",
+                                                        "aria-label": C ? u.closeNavigationMenu : u.openNavigationMenu,
+                                                        "aria-expanded": C,
+                                                        "aria-controls": x,
+                                                        onPress: C ? g : b,
+                                                        children: /* @__PURE__ */ e(Z1, {
+                                                            isOpen: C
                                                         })
-                                                    ]
-                                                }),
-                                                t
-                                            ]
-                                        })
+                                                    }),
+                                                    /* @__PURE__ */ e("div", {
+                                                        className: k,
+                                                        children: n
+                                                    })
+                                                ]
+                                            }),
+                                            a
+                                        ]
                                     })
                                 })
-                            }),
-                            l && /* @__PURE__ */ e("div", {
-                                className: c.spacer
                             })
-                        ]
-                    })
+                        }),
+                        d && /* @__PURE__ */ e("div", {
+                            className: f
+                        })
+                    ]
                 }),
-                /* @__PURE__ */ e(X, {
-                    children: /* @__PURE__ */ e(E, {
-                        disabled: v,
+                /* @__PURE__ */ e(r1, {
+                    children: /* @__PURE__ */ e(A, {
+                        disabled: p,
                         group: "burger-menu-lock",
-                        children: /* @__PURE__ */ e(P, {
+                        children: /* @__PURE__ */ e(W, {
                             onEntering: function() {
-                                f("opening");
+                                v("opening");
                             },
                             onEntered: function() {
-                                f("open");
+                                v("open");
                             },
                             onExiting: function() {
-                                f("closing");
+                                v("closing");
                             },
                             onExited: function() {
-                                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: a1,
+                                enterActive: o1,
+                                exit: i1,
+                                exitActive: C1
                             },
                             unmountOnExit: !0,
                             children: /* @__PURE__ */ e("nav", {
-                                className: c.burgerMenu,
-                                id: S,
+                                className: s1,
+                                style: {
+                                    boxShadow: I !== "closed" ? "6px 0 4px -4px rgba(0, 0, 0, ".concat(P, ")") : "none"
+                                },
+                                id: x,
                                 onClick: function() {
-                                    b();
+                                    g();
                                 },
-                                children: /* @__PURE__ */ e(M, {
+                                children: /* @__PURE__ */ e(h, {
                                     children: /* @__PURE__ */ e(Y, {
-                                        children: /* @__PURE__ */ e(J, {
-                                            children: r.map(function(_, F) {
-                                                return /* @__PURE__ */ e(Q, _objectSpread({}, _), F);
+                                        children: /* @__PURE__ */ e(z, {
+                                            children: r.map(function(U, j) {
+                                                return /* @__PURE__ */ e(e1, _objectSpread({}, U), j);
                                             })
                                         })
                                     })
@@ -589,196 +469,188 @@ var t1 = function(param) {
             ]
         });
     }
-    return /* @__PURE__ */ a(V, {
+    return /* @__PURE__ */ o(H, {
         isInverse: i,
         children: [
-            /* @__PURE__ */ e("header", {
-                className: g(c.navbar, _defineProperty({}, c.topFixed, l)),
-                children: /* @__PURE__ */ e(M, {
-                    children: /* @__PURE__ */ a(C, {
+            /* @__PURE__ */ e(V, {
+                topFixed: d,
+                withBorder: !0,
+                isMenuOpen: C,
+                isInverse: i,
+                dataAttributes: {
+                    "component-name": "MainNavigationBar"
+                },
+                children: /* @__PURE__ */ e(h, {
+                    children: /* @__PURE__ */ o(c, {
                         space: "between",
                         alignItems: "center",
                         children: [
-                            /* @__PURE__ */ a(C, {
+                            /* @__PURE__ */ o(c, {
                                 space: 48,
                                 alignItems: "center",
                                 children: [
                                     /* @__PURE__ */ e("div", {
-                                        className: c.logoContainer,
-                                        children: s
+                                        className: k,
+                                        children: n
                                     }),
                                     /* @__PURE__ */ e("nav", {
-                                        children: /* @__PURE__ */ e(C, {
+                                        children: /* @__PURE__ */ e(c, {
                                             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 G(y, _objectSpreadProps(_objectSpread({}, b), {
-                                                    key: v,
-                                                    className: g(c.section, _defineProperty({}, c.selectedSection, v === o))
-                                                }), /* @__PURE__ */ e(A, {
-                                                    regular: !0,
-                                                    children: N
+                                                return F(S, _objectSpreadProps(_objectSpread({}, g), {
+                                                    key: p,
+                                                    className: L(c1, _defineProperty({}, l1[i ? "inverse" : "default"], p === t))
+                                                }), /* @__PURE__ */ e("div", {
+                                                    className: R[i ? "inverse" : "default"],
+                                                    children: /* @__PURE__ */ e(T, {
+                                                        regular: !0,
+                                                        color: "inherit",
+                                                        children: b
+                                                    })
                                                 }));
                                             })
                                         })
                                     })
                                 ]
                             }),
-                            t
+                            a
                         ]
                     })
                 })
             }),
-            l && /* @__PURE__ */ e("div", {
-                className: c.spacer
+            d && /* @__PURE__ */ e("div", {
+                className: f
             })
         ]
     });
-}, D1 = function(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 = h(), d = ref.texts, p = B({
-        isInverse: s,
-        paddingX: l != null ? l : 0,
-        withBorder: H
-    }), m = /* @__PURE__ */ a(C, {
+}, X1 = function(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 = l(), M = ref.texts, C = /* @__PURE__ */ o(c, {
         space: "between",
         alignItems: "center",
         children: [
-            /* @__PURE__ */ a(C, {
+            /* @__PURE__ */ o(c, {
                 space: 24,
                 alignItems: "center",
                 children: [
-                    r && /* @__PURE__ */ e(T, {
-                        "aria-label": d.backNavigationBar,
+                    r && /* @__PURE__ */ e(O, {
+                        "aria-label": M.backNavigationBar,
                         onPress: r,
-                        className: p.iconButton,
-                        children: /* @__PURE__ */ e(W, {
+                        className: d1[n ? "inverse" : "default"],
+                        children: /* @__PURE__ */ e(X, {
                             color: "currentColor"
                         })
                     }),
-                    /* @__PURE__ */ e(A, {
+                    /* @__PURE__ */ e(T, {
                         regular: !0,
                         truncate: !0,
-                        children: o
+                        children: t
                     })
                 ]
             }),
-            /* @__PURE__ */ e(q, {
+            /* @__PURE__ */ e($, {
                 paddingLeft: 24,
-                children: t
+                children: a
             })
         ]
     });
-    return /* @__PURE__ */ a(V, {
-        isInverse: s,
+    return /* @__PURE__ */ o(H, {
+        isInverse: n,
         children: [
-            /* @__PURE__ */ e("header", {
-                className: g(p.navbar, _defineProperty({}, p.topFixed, i)),
-                children: i ? /* @__PURE__ */ e(M, {
-                    children: m
+            /* @__PURE__ */ e(V, {
+                topFixed: i,
+                withBorder: u,
+                isInverse: n,
+                dataAttributes: {
+                    "component-name": "NavigationBar"
+                },
+                children: i ? /* @__PURE__ */ e(h, {
+                    children: C
                 }) : /* @__PURE__ */ e("div", {
-                    className: p.notFixedPadding,
-                    children: m
+                    className: y({
+                        width: "100%"
+                    }),
+                    style: {
+                        padding: "0 ".concat(d, "px")
+                    },
+                    children: C
                 })
             }),
             i && /* @__PURE__ */ e("div", {
-                className: p.spacer
+                className: f
             })
         ]
     });
-}, _1 = function(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__ */ a(V, {
-        isInverse: t,
+}, Y1 = function(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__ */ o(H, {
+        isInverse: a,
         children: [
-            /* @__PURE__ */ e("header", {
-                className: g(i.navbar, _defineProperty({}, i.topFixed, s)),
-                children: /* @__PURE__ */ e(M, {
-                    children: /* @__PURE__ */ e(z, {
+            /* @__PURE__ */ e(V, {
+                topFixed: n,
+                withBorder: !0,
+                isInverse: a,
+                dataAttributes: {
+                    "component-name": "FunnelNavigationBar"
+                },
+                children: /* @__PURE__ */ e(h, {
+                    children: /* @__PURE__ */ e(n1, {
                         template: "10",
-                        children: /* @__PURE__ */ a(C, {
+                        children: /* @__PURE__ */ o(c, {
                             space: "between",
                             alignItems: "center",
                             children: [
-                                r != null ? r : /* @__PURE__ */ e(O, {}),
-                                o
+                                r != null ? r : /* @__PURE__ */ e(G, {}),
+                                t
                             ]
                         })
                     })
                 })
             }),
-            s && /* @__PURE__ */ e("div", {
-                className: i.spacer
+            n && /* @__PURE__ */ e("div", {
+                className: f
             })
         ]
     });
-}, d1 = I(function() {
-    return {
-        lineHeightFix: {
-            lineHeight: 0
-        }
-    };
-}), F1 = function(param) {
+}, z1 = function(param) {
     var r = param.children;
-    var o = d1();
     return /* @__PURE__ */ e("div", {
-        className: o.lineHeightFix,
-        children: /* @__PURE__ */ e(C, {
+        className: D,
+        "data-component-name": "NavigationBarActionGroup",
+        children: /* @__PURE__ */ e(c, {
             space: 24,
             alignItems: "center",
             children: r
         })
     });
-}, p1 = I(function(r) {
-    return {
-        touchable: _defineProperty({
-            lineHeight: 0,
-            "& svg": {
-                color: function(param) {
-                    var o = param.isInverse;
-                    return o ? n.colors.inverse : n.colors.neutralHigh;
-                }
-            }
-        }, r.mq.supportsHover, {
-            "&:hover span": {
-                color: function(param) {
-                    var o = param.isInverse;
-                    return o ? n.colors.textSecondaryInverse : n.colors.textSecondary;
-                }
-            },
-            "&:hover svg": {
-                color: function(param) {
-                    var o = param.isInverse;
-                    return o ? n.colors.inverse : n.colors.neutralMedium;
-                }
-            }
-        })
-    };
-}), G1 = function(_param) {
-    var r = _param.children, o = _objectWithoutProperties(_param, [
+}, e2 = function(_param) {
+    var r = _param.children, t = _objectWithoutProperties(_param, [
         "children"
     ]);
-    var t = u(), s = p1({
-        isInverse: t
-    });
-    return /* @__PURE__ */ e(y, _objectSpreadProps(_objectSpread({}, o), {
-        className: s.touchable,
-        children: /* @__PURE__ */ e(C, {
+    var a = m();
+    return /* @__PURE__ */ e(S, _objectSpreadProps(_objectSpread({}, t), {
+        className: L(y({
+            border: "none",
+            background: "transparent",
+            padding: 0
+        }), D, R[a ? "inverse" : "default"]),
+        dataAttributes: {
+            "component-name": "NavigationBarAction"
+        },
+        children: /* @__PURE__ */ e(c, {
             space: 16,
             alignItems: "center",
-            children: L.Children.map(r, function(i) {
-                return typeof i == "string" ? /* @__PURE__ */ e(U, {
+            children: N.Children.map(r, function(n) {
+                return typeof n == "string" ? /* @__PURE__ */ e(q, {
                     regular: !0,
-                    children: i
-                }) : i;
+                    color: "inherit",
+                    children: n
+                }) : n;
             })
         })
     }));
 };
-export { _1 as FunnelNavigationBar, R1 as MainNavigationBar, D1 as NavigationBar, G1 as NavigationBarAction, F1 as NavigationBarActionGroup, O as NavigationBarLogo };
+export { Y1 as FunnelNavigationBar, Q1 as MainNavigationBar, X1 as NavigationBar, e2 as NavigationBarAction, z1 as NavigationBarActionGroup, G as NavigationBarLogo };