@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/maybe-dismissable.js

@@ -1,80 +1,45 @@
 import * as r from "react";
-import { createUseStyles as d } from "./jss.js";
-import p from "./generated/mistica-icons/icon-close-regular.js";
-import { useTheme as u } from "./hooks.js";
-import f from "./icon-button.js";
-import { useIsInverseVariant as b } from "./theme-variant-context.js";
-import { applyAlpha as h } from "./utils/color.js";
-import { vars as o } from "./skins/skin-contract.css-mistica.js";
-import { jsx as e, Fragment as x, jsxs as C } from "./_virtual/jsx-runtime.js";
-var a = /*#__PURE__*/ r.createContext(!1), N = function() {
+import m from "./generated/mistica-icons/icon-close-regular.js";
+import { useTheme as n } from "./hooks.js";
+import c from "./icon-button.js";
+import { vars as u } from "./skins/skin-contract.css-mistica.js";
+import { dismissableContainer as b, dismissableButton as d, dismissableCircleContainer as f } from "./maybe-dismissable.css-mistica.js";
+import { jsx as e, Fragment as p, jsxs as h } from "./_virtual/jsx-runtime.js";
+var a = /*#__PURE__*/ r.createContext(!1), D = function() {
     return r.useContext(a);
-}, g = d(function() {
-    return {
-        dismissableContainer: {
-            position: "relative",
-            display: "flex",
-            flexShrink: 0,
-            width: function(param) {
-                var s = param.width;
-                return s || "100%";
-            }
+}, I = function(param) {
+    var s = param.children, i = param.width, t = param.onClose, o = param["aria-label"];
+    var ref = n(), l = ref.texts;
+    return t ? /* @__PURE__ */ h("section", {
+        className: b,
+        "aria-label": o,
+        style: {
+            width: i || "100%"
         },
-        dismissableButton: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 48,
-            height: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 2
-        },
-        dismissableCircleContainer: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 24,
-            height: 24,
-            margin: "0 0 8px 8px",
-            borderRadius: "50%",
-            backgroundColor: h(o.rawColors.background, 0.7)
-        }
-    };
-}), R = function(param) {
-    var s = param.children, l = param.width, i = param.onClose, n = param["aria-label"];
-    var m = b(), t = g({
-        isInverse: m,
-        width: l
-    }), ref = u(), c = ref.texts;
-    return i ? /* @__PURE__ */ C("section", {
-        className: t.dismissableContainer,
-        "aria-label": n,
         children: [
             /* @__PURE__ */ e(a.Provider, {
                 value: !0,
                 children: s
             }),
-            /* @__PURE__ */ e(f, {
-                className: t.dismissableButton,
-                onPress: i,
-                "aria-label": c.closeButtonLabel,
+            /* @__PURE__ */ e(c, {
+                className: d,
+                onPress: t,
+                "aria-label": l.closeButtonLabel,
                 style: {
                     display: "flex",
                     width: 48,
                     height: 48
                 },
                 children: /* @__PURE__ */ e("div", {
-                    className: t.dismissableCircleContainer,
-                    children: /* @__PURE__ */ e(p, {
-                        color: o.colors.neutralHigh
+                    className: f,
+                    children: /* @__PURE__ */ e(m, {
+                        color: u.colors.neutralHigh
                     })
                 })
             })
         ]
-    }) : /* @__PURE__ */ e(x, {
+    }) : /* @__PURE__ */ e(p, {
         children: s
     });
 };
-export { R as default, N as useIsDismissable };
+export { I as default, D as useIsDismissable };

package/dist-es/media-queries.css-mistica.js

@@ -1,7 +1,7 @@
-var e = {
+var e = "only screen and (min-height: 550px) and (min-width: 1024px) and (max-width: 1367px)", n = "only screen and (min-height: 550px) and (min-width: 1024px)", i = "only screen and (min-height: 550px) and (min-width: 1368px)", a = {
     tabletMinWidth: 768,
     desktopMinWidth: 1024,
     largeDesktopMinWidth: 1368,
     desktopOrTabletMinHeight: 550
-};
-export { e as mediaQueriesConfig };
+}, t = "only screen and (max-width: 767px), (max-height: 549px)", r = "(pointer: fine), (pointer: none)", d = "only screen and (min-height: 550px) and (min-width: 768px) and (max-width: 1023px)", h = "only screen and (min-height: 550px) and (min-width: 768px)", p = "only screen and (max-width: 1023px), (max-height: 549px)", o = "(pointer: coarse)";
+export { e as desktop, n as desktopOrBigger, i as largeDesktop, a as mediaQueriesConfig, t as mobile, r as supportsHover, d as tablet, h as tabletOrBigger, p as tabletOrSmaller, o as touchableOnly };

package/dist-es/menu.css-mistica.js

@@ -0,0 +1,11 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./menu.css.ts.vanilla.js";
+var v = "_2k0k3u9", _ = "_2k0k3u7 _1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4u _1y2v1nf2g _1y2v1nf90", a = "_2k0k3u8", t = {
+    top: "var(--_2k0k3u0)",
+    bottom: "var(--_2k0k3u1)",
+    right: "var(--_2k0k3u2)",
+    width: "var(--_2k0k3u3)",
+    transformOrigin: "var(--_2k0k3u4)",
+    maxHeight: "var(--_2k0k3u5)"
+};
+export { v as hideItems, _ as menuContainer, a as showItems, t as vars };

package/dist-es/menu.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };

package/dist-es/menu.js

@@ -96,156 +96,110 @@ 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 o from "react";
-import { TAB as k, ESC as P } from "./utils/key-codes.js";
-import { createUseStyles as R } from "./jss.js";
-import { cancelEvent as H } from "./utils/dom.js";
-import D from "./overlay.js";
-import { jsxs as F, jsx as L } from "./_virtual/jsx-runtime.js";
-var g = 416, B = R(function(param) {
-    var m = param.colors;
-    return {
-        menuContainer: {
-            zIndex: 12,
-            margin: 0,
-            padding: 0,
-            listStyleType: "none",
-            position: "absolute",
-            top: function(param) {
-                var e = param.itemsComputedProps;
-                return e.top;
-            },
-            bottom: function(param) {
-                var e = param.itemsComputedProps;
-                return e.bottom;
-            },
-            right: function(param) {
-                var e = param.itemsComputedProps;
-                return e.right;
-            },
-            width: function(param) {
-                var e = param.width;
-                return e != null ? e : "100%";
-            },
-            borderRadius: 8,
-            boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)",
-            backgroundColor: m.backgroundContainer,
-            transformOrigin: function(param) {
-                var e = param.itemsComputedProps;
-                return e.transformOrigin;
-            },
-            transition: "opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1) .15s",
-            opacity: function(param) {
-                var e = param.animateShowItems;
-                return e ? 1 : 0;
-            },
-            transform: function(param) {
-                var e = param.animateShowItems;
-                return e ? "scale(1)" : "scale(0)";
-            },
-            maxHeight: function(param) {
-                var e = param.itemsComputedProps;
-                return e.maxHeight;
-            },
-            overflowY: "auto"
-        }
-    };
-}), N = function(param) {
-    var m = param.renderTarget, e = param.renderMenu, d = param.width, tmp = param.position, h = tmp === void 0 ? "left" : tmp;
-    var ref = _slicedToArray(o.useState(!1), 2), t = ref[0], s = ref[1], ref1 = _slicedToArray(o.useState(null), 2), a = ref1[0], x = ref1[1], ref2 = _slicedToArray(o.useState(null), 2), c = ref2[0], b = ref2[1], ref3 = _slicedToArray(o.useState(!1), 2), C = ref3[0], S = ref3[1], ref4 = _slicedToArray(o.useState({}), 2), M = ref4[0], l = ref4[1];
-    o.useEffect(function() {
-        var y;
-        var n = a == null ? void 0 : a.getBoundingClientRect();
-        if (!c || !n || !t) {
-            S(!1);
+import * as e from "react";
+import L from "classnames";
+import { assignInlineVars as B } from "@vanilla-extract/dynamic";
+import { TAB as N, ESC as _ } from "./utils/key-codes.js";
+import { getPrefixedDataAttributes as $, cancelEvent as y } from "./utils/dom.js";
+import j from "./overlay.js";
+import { menuContainer as q, showItems as G, hideItems as V, vars as s } from "./menu.css-mistica.js";
+import { sprinkles as K } from "./sprinkles.css-mistica.js";
+import { jsxs as U, jsx as X } from "./_virtual/jsx-runtime.js";
+var h = 416, ot = function(param) {
+    var A = param.renderTarget, E = param.renderMenu, l = param.width, tmp = param.position, d = tmp === void 0 ? "left" : tmp, O = param.dataAttributes;
+    var M, S, I, b;
+    var ref = _slicedToArray(e.useState(!1), 2), t = ref[0], i = ref[1], ref1 = _slicedToArray(e.useState(null), 2), a = ref1[0], w = ref1[1], ref2 = _slicedToArray(e.useState(null), 2), c = ref2[0], C = ref2[1], ref3 = _slicedToArray(e.useState(!1), 2), H = ref3[0], x = ref3[1], ref4 = _slicedToArray(e.useState({}), 2), r = ref4[0], u = ref4[1];
+    e.useEffect(function() {
+        var v;
+        var o = a == null ? void 0 : a.getBoundingClientRect();
+        if (!c || !o || !t) {
+            x(!1);
             return;
         }
-        var r = 12, u = n.top, I = n.width, O = n.height, i = u + O, T = (y = parseInt(window.getComputedStyle(c).getPropertyValue("height"))) != null ? y : 0, p = h === "left" ? "auto" : "calc(100% - ".concat(I, "px)");
-        if (i + T + r > window.innerHeight) {
-            var A = window.innerHeight - i;
-            u > A ? l({
+        var n = 12, f = o.top, k = o.width, D = o.height, m = f + D, R = (v = parseInt(window.getComputedStyle(c).getPropertyValue("height"))) != null ? v : 0, p = d === "left" ? "auto" : "calc(100% - ".concat(k, "px)");
+        if (m + R + n > window.innerHeight) {
+            var F = window.innerHeight - m;
+            f > F ? u({
                 right: p,
                 bottom: "100%",
                 top: "auto",
-                maxHeight: Math.min(u, g),
+                maxHeight: Math.min(f, h),
                 transformOrigin: "center bottom"
-            }) : l({
+            }) : u({
                 top: "100%",
                 bottom: "auto",
                 right: p,
-                maxHeight: Math.min(window.innerHeight - i - r, g),
+                maxHeight: Math.min(window.innerHeight - m - n, h),
                 transformOrigin: "center top"
             });
-        } else l({
+        } else u({
             top: "100%",
             bottom: "auto",
             right: p,
-            maxHeight: Math.min(window.innerHeight - i - r, g),
+            maxHeight: Math.min(window.innerHeight - m - n, h),
             transformOrigin: "center top"
         });
-        var f;
-        return t && (f = requestAnimationFrame(function() {
-            S(!0);
+        var g;
+        return t && (g = requestAnimationFrame(function() {
+            x(!0);
         })), function() {
-            f && cancelAnimationFrame(f);
+            g && cancelAnimationFrame(g);
         };
     }, [
-        h,
+        d,
         t,
         c,
         a,
-        d
+        l
     ]);
-    var w = B({
-        itemsComputedProps: M,
-        animateShowItems: C,
-        width: d
-    }), v = o.useMemo(function() {
+    var P = e.useMemo(function() {
         return {
-            ref: x,
+            ref: w,
             onPress: function() {
-                s(!t);
+                i(!t);
             }
         };
     }, [
-        x,
+        w,
         t,
-        s
-    ]), E = o.useMemo(function() {
+        i
+    ]), T = e.useMemo(function() {
         return {
-            ref: b,
-            className: w.menuContainer,
+            ref: C,
+            className: L(q, H ? G : V),
             close: function() {
-                s(!1);
+                i(!1);
             }
         };
     }, [
-        w.menuContainer,
-        b
+        H
     ]);
-    return o.useEffect(function() {
-        var n = function(r) {
-            t && (r.keyCode === k && H(r), r.keyCode === P && s(!1));
+    var _obj;
+    return e.useEffect(function() {
+        var o = function(n) {
+            t && (n.keyCode === N && y(n), n.keyCode === _ && i(!1));
         };
-        return document.addEventListener("keydown", n, !1), function() {
-            document.removeEventListener("keydown", n, !1);
+        return document.addEventListener("keydown", o, !1), function() {
+            document.removeEventListener("keydown", o, !1);
         };
-    }), /* @__PURE__ */ F("div", {
-        style: {
+    }), /* @__PURE__ */ U("div", _objectSpreadProps(_objectSpread({
+        className: K({
             position: "relative"
-        },
+        }),
+        style: _objectSpread({}, B((_obj = {}, _defineProperty(_obj, s.width, l ? "".concat(l, "px") : "100%"), _defineProperty(_obj, s.top, (M = r.top) != null ? M : ""), _defineProperty(_obj, s.bottom, (S = r.bottom) != null ? S : ""), _defineProperty(_obj, s.right, (I = r.right) != null ? I : ""), _defineProperty(_obj, s.transformOrigin, (b = r.transformOrigin) != null ? b : ""), _defineProperty(_obj, s.maxHeight, r.maxHeight ? "".concat(r.maxHeight, "px") : ""), _obj)))
+    }, $(O, "Menu")), {
         children: [
-            t ? /* @__PURE__ */ L(D, {
-                onPress: function(n) {
-                    H(n), s(!1);
+            t ? /* @__PURE__ */ X(j, {
+                onPress: function(o) {
+                    y(o), i(!1);
                 },
                 disableScroll: !0
             }) : null,
-            m(_objectSpreadProps(_objectSpread({}, v), {
+            A(_objectSpreadProps(_objectSpread({}, P), {
                 isMenuOpen: t
             })),
-            t ? e(E) : null
+            t ? E(T) : null
         ]
-    });
+    }));
 };
-export { N as default };
+export { ot as default };

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

@@ -0,0 +1,17 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./navigation-bar.css.ts.vanilla.js";
+var y = "_1vcy5dz1 _1y2v1nf4t _1y2v1nf7d _1y2v1nf7s", _ = "_1vcy5dzr _1y2v1nf4v _1y2v1nf9g _1y2v1nf9k _1y2v1nf9y _1y2v1nf2f", r = "_1vcy5dzl", e = "_1vcy5dzm", f = "_1vcy5dzn", d = "_1vcy5dzo", a = {
+    default: "_1vcy5dzu _1y2v1nf1a",
+    inverse: "_1vcy5dzv _1y2v1nf19"
+}, c = "_1vcy5dz4 _1vcy5dz3 _1y2v1nf4u", z = "_1vcy5dz5 _1vcy5dz3 _1y2v1nf4u", t = "_1vcy5dzw", i = "_1y2v1nf4y _1y2v1nf57", u = {
+    default: "_1vcy5dza _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z",
+    inverse: "_1vcy5dzb _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z",
+    menuOpen: "_1vcy5dzc _1vcy5dz9 _1y2v1nf5q _1y2v1nf64 _1y2v1nf4y _1y2v1nf5d _1y2v1nf75 _1y2v1nf7z"
+}, o = "_1vcy5dze _1y2v1nf6g _1y2v1nf6u _1y2v1nf7z _1y2v1nf4y _1y2v1nf5d _1y2v1nf8w _1y2v1nf4s", s = {
+    default: "_1vcy5dzf",
+    inverse: "_1vcy5dzg"
+}, g = "_1vcy5dzk _1y2v1nf7z", l = {
+    default: "_1vcy5dzh",
+    inverse: "_1vcy5dzi"
+}, b = "_1vcy5dz7 _1y2v1nf4v _1y2v1nf96 _1y2v1nf9k _1y2v1nf9y";
+export { y as burgerIconContainer, _ as burgerMenu, r as burgerMenuEnter, e as burgerMenuEnterActive, f as burgerMenuExit, d as burgerMenuExitActive, a as iconButtonVariants, c as iconCloseHidden, z as iconMenuHidden, t as lineHeightFix, i as logoContainer, u as navbarBorderColorVariants, o as section, s as selectedSectionVariantes, g as spacer, l as textWrapperVariants, b as topFixed };

package/dist-es/navigation-bar.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var a = "";
+export { a as default };