@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/popover.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     return target;
 }
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -72,90 +96,36 @@ 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 h from "react";
-import { createUseStyles as C } from "./jss.js";
-import Y from "./generated/mistica-icons/icon-close-regular.js";
-import z from "./icon-button.js";
-import { useTheme as M, useScreenSize as A } from "./hooks.js";
-import D from "./stack.js";
-import g from "./box.js";
-import E from "./inline.js";
-import { Text3 as $, Text2 as H } from "./text.js";
-import { jsxs as c, jsx as r } from "./_virtual/jsx-runtime.js";
-var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U = d, q = C(function(t) {
-    var o = t.isDarkMode ? 1 : 0.2;
-    return {
-        arrow: {
-            position: "absolute",
-            backgroundColor: t.colors.backgroundContainer,
-            width: d,
-            height: d,
-            top: 0,
-            left: "50%",
-            transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(t.colors.border),
-            borderRadius: 2,
-            boxShadow: function(param) {
-                var e = param.position;
-                return e === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(o, ")");
-            }
-        },
-        arrowWrapper: {
-            position: "absolute",
-            color: t.colors.backgroundContainer,
-            width: O,
-            height: U,
-            overflow: "hidden"
-        },
-        wrapper: {
-            position: "relative"
-        },
-        container: {
-            position: "absolute",
-            width: "auto",
-            zIndex: 9,
-            boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(o, ")"),
-            backgroundColor: t.colors.backgroundContainer,
-            border: "1px solid ".concat(t.colors.border),
-            borderRadius: 8
-        },
-        textAlign: {
-            display: "flex",
-            alignItems: "center",
-            height: "100%"
-        },
-        boxContent: {
-            display: "flex"
-        },
-        textContent: {
-            textAlign: "left",
-            width: "100%",
-            wordBreak: "break-word"
-        },
-        closeButtonIcon: {
-            position: "absolute",
-            top: 8,
-            right: 8,
-            zIndex: 1
-        }
-    };
-}), F = function(t) {
-    return t || X;
-}, G = function() {
-    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : j, o = arguments.length > 1 ? arguments[1] : void 0;
-    return o && (t === "left" || t === "right") ? P : t;
-}, J = function(t, o, e) {
-    return t ? (o ? window.screen.width : window.innerWidth) - m * 2 : F(e);
-}, K = function(t, o, e, s) {
-    var l = {
+import * as c from "react";
+import W from "./generated/mistica-icons/icon-close-regular.js";
+import E from "./icon-button.js";
+import { useTheme as P, useScreenSize as A } from "./hooks.js";
+import j from "./stack.js";
+import u from "./box.js";
+import H from "./inline.js";
+import { Text3 as X, Text2 as $ } from "./text.js";
+import * as O from "./popover.css-mistica.js";
+import { container as _, arrowWrapper as q, arrow as C, textAlign as F, textContent as G, closeButtonIcon as J } from "./popover.css-mistica.js";
+import { sprinkles as k } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as K } from "./utils/dom.js";
+import { jsxs as i, jsx as o } from "./_virtual/jsx-runtime.js";
+var Q = O.defaultPositionDesktop, U = O.defaultPositionMobile, d = O.distanceToTarget, m = O.marginLeftRightMobile, Z = O.maxWidthDesktop, L = O.arrowSize, V = function(t) {
+    return t || Z;
+}, tt = function() {
+    var t = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Q, r = arguments.length > 1 ? arguments[1] : void 0;
+    return r && (t === "left" || t === "right") ? U : t;
+}, et = function(t, r, e) {
+    return t ? (r ? window.screen.width : window.innerWidth) - m * 2 : V(e);
+}, rt = function(t, r, e, n) {
+    var a = {
         right: {
-            left: e.width + p,
+            left: e.width + d,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
         },
         left: {
-            left: e.left - o - p,
+            left: e.left - r - d,
             top: e.height / 2,
             transform: "translateY(-50%)",
             WebkitTransform: "translateY(-50%)"
@@ -163,12 +133,12 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         top: {
             transform: "translateY(-100%)",
             WebkitTransform: "translateY(-100%)",
-            top: -p,
-            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
+            top: -d,
+            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         },
         bottom: {
-            top: e.height + p,
-            left: s ? m - e.parentLeft : Math.max(e.width / 2 - o / 2, 0)
+            top: e.height + d,
+            left: n ? m - e.parentLeft : Math.max(e.width / 2 - r / 2, 0)
         }
     }[t], f = {
         right: {
@@ -185,20 +155,20 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         },
         top: {
             top: "100%",
-            left: l.left === 0 ? e.width / 2 : "50%",
+            left: a.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%)"
         },
         bottom: {
             bottom: "100%",
-            left: l.left === 0 ? e.width / 2 : "50%",
+            left: a.left === 0 ? e.width / 2 : "50%",
             transform: "translateX(-50%) rotate(180deg)"
         }
     }[t];
-    return s && (f.left = e.parentLeft + e.width / 2 - m), {
-        containerStyles: l,
+    return n && (f.left = e.parentLeft + e.width / 2 - m), {
+        containerStyles: a,
         arrowStyles: f
     };
-}, B = function(t) {
+}, N = function(t) {
     return t ? {
         left: t.offsetLeft,
         top: t.offsetTop,
@@ -206,64 +176,72 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
         height: t.offsetHeight,
         parentLeft: t.parentNode.offsetLeft
     } : null;
-}, st = function(param) {
-    var t = param.description, o = param.title, e = param.onClose, s = param.trackingEvent, a = param.position, l = param.width, b = param.target, f = param.asset, tmp = param.isVisible, x = tmp === void 0 ? !0 : tmp, I = param.extra;
-    var ref = M(), L = ref.texts, y = ref.colors, N = ref.isIos, ref1 = A(), u = ref1.isTabletOrSmaller, ref2 = _slicedToArray(h.useState(null), 2), S = ref2[0], k = ref2[1], w = h.useRef(null);
-    a = G(a, u);
-    var v = J(u, N, l), n = q({
-        position: a
-    });
-    h.useEffect(function() {
-        var i = function() {
-            k(B(w.current));
+}, pt = function(param) {
+    var t = param.description, r = param.title, e = param.onClose, n = param.trackingEvent, s = param.position, a = param.width, w = param.target, f = param.asset, tmp = param.isVisible, g = tmp === void 0 ? !0 : tmp, Y = param.extra, B = param.dataAttributes;
+    var ref = P(), R = ref.texts, x = ref.colors, z = ref.isIos, D = ref.isDarkMode, ref1 = A(), h = ref1.isTabletOrSmaller, ref2 = _slicedToArray(c.useState(null), 2), b = ref2[0], y = ref2[1], p = c.useRef(null);
+    s = tt(s, h);
+    var S = et(h, z, a), v = D ? 1 : 0.2;
+    c.useEffect(function() {
+        var l = function() {
+            y(N(p.current));
         };
-        return i(), window.addEventListener("resize", i), function() {
-            window.removeEventListener("resize", i);
+        return l(), window.addEventListener("resize", l), function() {
+            window.removeEventListener("resize", l);
         };
-    }, []), h.useEffect(function() {
-        k(B(w.current));
+    }, []), c.useEffect(function() {
+        y(N(p.current));
     }, [
-        x
+        g
     ]);
     var T = null;
-    if (x && S) {
-        var ref3 = K(a, v, S, u), i = ref3.containerStyles, R = ref3.arrowStyles;
-        T = /* @__PURE__ */ c("div", {
-            className: n.container,
+    if (g && b) {
+        var ref3 = rt(s, S, b, h), l = ref3.containerStyles, I = ref3.arrowStyles;
+        T = /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
+            className: _,
             style: _objectSpread({
-                width: v
-            }, i),
+                width: S,
+                boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+            }, l)
+        }, K(B, "Popover")), {
             children: [
-                /* @__PURE__ */ r("div", {
-                    className: n.arrowWrapper,
-                    style: R,
-                    children: /* @__PURE__ */ r("div", {
-                        className: n.arrow
+                /* @__PURE__ */ o("div", {
+                    className: q,
+                    style: I,
+                    children: /* @__PURE__ */ o("div", {
+                        className: C,
+                        style: {
+                            width: L,
+                            height: L,
+                            boxSizing: "border-box",
+                            boxShadow: s === "bottom" ? "initial" : "0 0 4px 0 rgba(0, 0, 0, ".concat(v, ")")
+                        }
                     })
                 }),
-                /* @__PURE__ */ c(g, {
+                /* @__PURE__ */ i(u, {
                     padding: 16,
                     children: [
-                        /* @__PURE__ */ r(g, {
+                        /* @__PURE__ */ o(u, {
                             paddingRight: 24,
-                            className: n.boxContent,
-                            children: /* @__PURE__ */ c(E, {
+                            className: k({
+                                display: "flex"
+                            }),
+                            children: /* @__PURE__ */ i(H, {
                                 space: 16,
                                 children: [
                                     f,
-                                    /* @__PURE__ */ r(g, {
-                                        className: n.textAlign,
-                                        children: /* @__PURE__ */ c(D, {
+                                    /* @__PURE__ */ o(u, {
+                                        className: F,
+                                        children: /* @__PURE__ */ i(j, {
                                             space: 4,
-                                            className: n.textContent,
+                                            className: G,
                                             children: [
-                                                o && /* @__PURE__ */ r($, {
+                                                r && /* @__PURE__ */ o(X, {
                                                     regular: !0,
-                                                    children: o
+                                                    children: r
                                                 }),
-                                                /* @__PURE__ */ r(H, {
+                                                /* @__PURE__ */ o($, {
                                                     regular: !0,
-                                                    color: y.textSecondary,
+                                                    color: x.textSecondary,
                                                     children: t
                                                 })
                                             ]
@@ -272,32 +250,34 @@ var j = "bottom", P = "top", d = 12, p = 8 + d, m = 16, X = 488, O = d * 2, U =
                                 ]
                             })
                         }),
-                        /* @__PURE__ */ r(z, {
-                            className: n.closeButtonIcon,
-                            onPress: function(W) {
-                                e == null || e(), W.stopPropagation();
+                        /* @__PURE__ */ o(E, {
+                            className: J,
+                            onPress: function(M) {
+                                e == null || e(), M.stopPropagation();
                             },
-                            trackingEvent: s,
-                            "aria-label": L.modalClose,
-                            children: /* @__PURE__ */ r(Y, {
-                                color: y.neutralHigh
+                            trackingEvent: n,
+                            "aria-label": R.modalClose,
+                            children: /* @__PURE__ */ o(W, {
+                                color: x.neutralHigh
                             })
                         }),
-                        I
+                        Y
                     ]
                 })
             ]
-        });
+        }));
     }
-    return /* @__PURE__ */ c("div", {
-        className: n.wrapper,
+    return /* @__PURE__ */ i("div", {
+        className: k({
+            position: "relative"
+        }),
         children: [
-            /* @__PURE__ */ r("div", {
-                ref: w,
-                children: b
+            /* @__PURE__ */ o("div", {
+                ref: p,
+                children: w
             }),
             T
         ]
     });
 };
-export { st as default };
+export { pt as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./progress-bar.css.ts.vanilla.js";
-var y = "j0y7r93 _1y2v1nf9y _1y2v1nfbb", a = "_1y2v1nfbb _1y2v1nfa1 _1y2v1nf5l";
-export { y as bar, a as barBackground };
+var v = "j0y7r93 _1y2v1nf7l _1y2v1nf8y", n = "_1y2v1nf8y _1y2v1nf7o _1y2v1nf37";
+export { v as bar, n as barBackground };

package/dist-es/progress-bar.js

@@ -1,25 +1,78 @@
-import { useTheme as s } from "./hooks.js";
-import { vars as m } from "./skins/skin-contract.css-mistica.js";
-import { barBackground as b, bar as d } from "./progress-bar.css-mistica.js";
-import { jsx as l } from "./_virtual/jsx-runtime.js";
-var p = function(param) {
-    var r = param.progressPercent, a = param.color, i = param["aria-label"], e = param["aria-labelledby"];
-    var ref = s(), o = ref.texts, t = o.loading;
-    return /* @__PURE__ */ l("div", {
-        className: b,
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _objectSpreadProps(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+import { useTheme as d } from "./hooks.js";
+import { vars as b } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as n, bar as u } from "./progress-bar.css-mistica.js";
+import { getPrefixedDataAttributes as f } from "./utils/dom.js";
+import { jsx as t } from "./_virtual/jsx-runtime.js";
+var h = function(param) {
+    var r = param.progressPercent, a = param.color, i = param["aria-label"], e = param["aria-labelledby"], l = param.dataAttributes;
+    var ref = d(), o = ref.texts, s = o.loading, m = e ? void 0 : i || s;
+    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({}, f(l, "ProgressBar")), {
+        className: n,
         role: "progressbar",
         "aria-valuenow": r,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": e ? void 0 : i || t,
+        "aria-label": m,
         "aria-labelledby": e,
-        children: /* @__PURE__ */ l("div", {
-            className: d,
+        children: /* @__PURE__ */ t("div", {
+            className: u,
             style: {
                 maxWidth: "".concat(r, "%"),
-                backgroundColor: a != null ? a : m.colors.controlActivated
+                backgroundColor: a != null ? a : b.colors.controlActivated
             }
         })
-    });
+    }));
 };
-export { p as default };
+export { h as default };

package/dist-es/radio-button.css-mistica.js

@@ -0,0 +1,10 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./radio-button.css.ts.vanilla.js";
+var f = "c6dmsub", r = "c6dmsu5 _1y2v1nf4y _1y2v1nf8x", d = "c6dmsu7 _1y2v1nf38", y = {
+    default: "c6dmsu9",
+    ios: "c6dmsua"
+}, _ = {
+    default: "c6dmsu2 c6dmsu1 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf93 _1y2v1nf5g _1y2v1nf8x _1y2v1nf2f",
+    ios: "c6dmsu3 c6dmsu1 _1y2v1nf4z _1y2v1nf5d _1y2v1nf57 _1y2v1nf93 _1y2v1nf5g _1y2v1nf8x _1y2v1nf2f"
+}, c = "c6dmsu8";
+export { f as disabled, r as innerCircle, d as innerCircleChecked, y as outerCircleCheckedVariants, _ as outerCircleVariants, c as radioButton };

package/dist-es/radio-button.css.ts.vanilla.js

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