@telefonica/mistica 12.9.1 → 12.10.0

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

@@ -0,0 +1,8 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./checkbox.css.ts.vanilla.js";
+var f = {
+    ios: "_1rz9b14 _1rz9b13 _1y2v1nf7c _1y2v1nf7k _1y2v1nf7q _1y2v1nf7t _1y2v1nfb9 _1y2v1nf2f",
+    rest: "_1rz9b15 _1rz9b13 _1y2v1nf7c _1y2v1nf7k _1y2v1nf7q _1y2v1nf7t _1y2v1nfb9 _1y2v1nf2f",
+    checked: "_1rz9b16 _1rz9b13 _1y2v1nf7c _1y2v1nf7k _1y2v1nf7q _1y2v1nf7t _1y2v1nfb9 _1y2v1nf2f"
+}, n = "_1rz9b18 _1y2v1nf7d", r = "_1rz9b19", y = "_1rz9b11 _1y2v1nf7e", b = "_1rz9b1a";
+export { f as boxVariant, n as check, r as checkChecked, y as checkboxContainer, b as disabled };

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

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

package/dist-es/checkbox.js

@@ -97,139 +97,94 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
 import * as y from "react";
-import { SPACE as v } from "./utils/key-codes.js";
-import { useControlProps as S } from "./form-context.js";
-import { createUseStyles as x } from "./jss.js";
-import w from "./inline.js";
-import { Text3 as k } from "./text.js";
-import { useAriaId as I, useTheme as A } from "./hooks.js";
-import h from "classnames";
-import { getPrefixedDataAttributes as p } from "./utils/dom.js";
-import { jsx as t, jsxs as L } from "./_virtual/jsx-runtime.js";
-var N = x(function(param) {
-    var e = param.colors, c = param.isIos;
-    return {
-        box: {
-            flexShrink: 0,
-            height: 18,
-            width: 18,
-            display: "inline-flex",
-            justifyContent: "center",
-            alignItems: "center",
-            userSelect: "none",
-            outline: "1px solid transparent",
-            borderRadius: 2,
-            verticalAlign: "middle",
-            background: e.background,
-            boxShadow: "inset 0 0 0 ".concat(c ? 1 : 2, "px ").concat(e.control),
-            transition: "box-shadow 0.3s"
-        },
-        boxChecked: {
-            boxShadow: "inset 0 0 0 12px ".concat(e.controlActivated)
-        },
-        check: {
-            display: "block",
-            transform: "scale(0, 0)",
-            transformOrigin: "center",
-            transition: "transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6)"
-        },
-        checkChecked: {
-            transform: "scale(1, 1)"
-        },
-        disabled: {
-            opacity: 0.5
-        }
-    };
-}), D = function(param) {
-    var e = param.isChecked, c = param.disabled;
-    var a = N(), ref = A(), o = ref.isIos, d = ref.colors, r = o ? /* @__PURE__ */ t("svg", {
+import { SPACE as w } from "./utils/key-codes.js";
+import { useControlProps as I } from "./form-context.js";
+import A from "./inline.js";
+import { Text3 as f } from "./text.js";
+import { useAriaId as L, useTheme as N } from "./hooks.js";
+import s from "classnames";
+import { getPrefixedDataAttributes as D } from "./utils/dom.js";
+import { checkboxContainer as P, disabled as x, check as k, checkChecked as u, boxVariant as S } from "./checkbox.css-mistica.js";
+import { jsx as i, jsxs as E } from "./_virtual/jsx-runtime.js";
+var V = function(param) {
+    var e = param.isChecked, l = param.disabled;
+    var ref = N(), t = ref.isIos, c = ref.colors, n = t ? /* @__PURE__ */ i("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
-        className: h(a.check, _defineProperty({}, a.checkChecked, e)),
-        children: /* @__PURE__ */ t("path", {
+        className: s(k, _defineProperty({}, u, e)),
+        children: /* @__PURE__ */ i("path", {
             d: "M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z",
-            fill: d.inverse
+            fill: c.inverse
         })
-    }) : /* @__PURE__ */ t("svg", {
+    }) : /* @__PURE__ */ i("svg", {
         viewBox: "0 0 14 10",
         width: "14",
         height: "10",
-        className: h(a.check, _defineProperty({}, a.checkChecked, e)),
-        children: /* @__PURE__ */ t("path", {
+        className: s(k, _defineProperty({}, u, e)),
+        children: /* @__PURE__ */ i("path", {
             d: "M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z",
-            fill: d.inverse
+            fill: c.inverse
         })
     });
-    var _obj;
-    return /* @__PURE__ */ t("div", {
-        className: h(a.box, (_obj = {}, _defineProperty(_obj, a.boxChecked, e), _defineProperty(_obj, a.disabled, c), _obj)),
-        children: r
+    return /* @__PURE__ */ i("div", {
+        className: s(S[e ? "checked" : t ? "ios" : "rest"], _defineProperty({}, x, l)),
+        children: n
     });
-}, P = x(function() {
-    return {
-        checkboxContainer: {
-            cursor: "default",
-            display: "inline"
-        },
-        disabled: {
-            opacity: 0.5
-        }
-    };
-}), V = function(e) {
-    var c = P(), a = I(e["aria-labelledby"]), o = e["aria-label"], d = o || e["aria-labelledby"], ref = S({
+}, F = function(e) {
+    var l = L(e["aria-labelledby"]), t = e["aria-label"], c = t || e["aria-labelledby"], ref = I({
         name: e.name,
         value: e.checked,
         defaultValue: e.defaultChecked,
         onChange: e.onChange,
         disabled: e.disabled
-    }), r = ref.defaultValue, i = ref.value, b = ref.onChange, u = ref.focusableRef, n = ref.disabled, ref1 = _slicedToArray(y.useState(!!r), 2), l = ref1[0], C = ref1[1], m = function() {
-        i === void 0 ? (C(!l), b(!l)) : b(!i);
-    }, g = function(s) {
-        s.keyCode === v && (s.preventDefault(), s.stopPropagation(), m());
-    }, f = /* @__PURE__ */ t(D, {
-        disabled: n,
-        isChecked: i != null ? i : l
+    }), n = ref.defaultValue, a = ref.value, h = ref.onChange, C = ref.focusableRef, d = ref.disabled, ref1 = _slicedToArray(y.useState(!!n), 2), o = ref1[0], v = ref1[1], b = function() {
+        a === void 0 ? (v(!o), h(!o)) : h(!a);
+    }, g = function(r) {
+        r.keyCode === w && (r.preventDefault(), r.stopPropagation(), b());
+    }, m = /* @__PURE__ */ i(V, {
+        disabled: d,
+        isChecked: a != null ? a : o
     });
-    return /* @__PURE__ */ t("div", _objectSpreadProps(_objectSpread({
+    return /* @__PURE__ */ i("div", _objectSpreadProps(_objectSpread({
         id: e.id,
         role: "checkbox",
-        "aria-checked": i != null ? i : l,
-        onKeyDown: n ? void 0 : g,
-        onClick: n ? void 0 : m,
-        tabIndex: n ? void 0 : 0,
-        ref: u,
-        className: c.checkboxContainer,
-        "aria-label": o,
-        "aria-labelledby": o ? void 0 : a,
-        "aria-disabled": n
-    }, p(e.dataAttributes)), {
+        "aria-checked": a != null ? a : o,
+        onKeyDown: d ? void 0 : g,
+        onClick: d ? void 0 : b,
+        tabIndex: d ? void 0 : 0,
+        ref: C,
+        className: P,
+        "aria-label": t,
+        "aria-labelledby": t ? void 0 : l,
+        "aria-disabled": d
+    }, D(e.dataAttributes)), {
         children: e.render ? e.render({
-            controlElement: f,
-            labelId: a,
-            checked: i != null ? i : l,
-            disabled: !!n
-        }) : /* @__PURE__ */ L(w, {
+            controlElement: m,
+            labelId: l,
+            checked: a != null ? a : o,
+            disabled: !!d
+        }) : /* @__PURE__ */ E(A, {
             space: 16,
             children: [
-                /* @__PURE__ */ t(k, {
+                /* @__PURE__ */ i(f, {
                     regular: !0,
                     as: "div",
-                    children: /* @__PURE__ */ t("div", {
+                    children: /* @__PURE__ */ i("div", {
                         style: {
                             position: "relative",
                             top: -2
                         },
-                        children: f
+                        children: m
                     })
                 }),
-                e.children && /* @__PURE__ */ t(k, {
+                e.children && /* @__PURE__ */ i(f, {
                     regular: !0,
                     as: "div",
-                    id: a,
-                    role: d ? "presentation" : void 0,
-                    children: /* @__PURE__ */ t("span", {
-                        className: n ? c.disabled : "",
+                    id: l,
+                    role: c ? "presentation" : void 0,
+                    children: /* @__PURE__ */ i("span", {
+                        className: d ? x : "",
                         children: e.children
                     })
                 })
@@ -237,4 +192,4 @@ var N = x(function(param) {
         })
     }));
 };
-export { V as default };
+export { F as default };

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

@@ -0,0 +1,10 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./chip.css.ts.vanilla.js";
+var t = {
+    light: "cc7htn8 cc7htn7",
+    dark: "cc7htn9 cc7htn7"
+}, v = {
+    default: "cc7htn1 _1y2v1nf7c _1y2v1nf7k _1y2v1nf7q _1y2v1nfb6 _1y2v1nf4u _1y2v1nf1i",
+    active: "cc7htn6 cc7htn2 cc7htn1 _1y2v1nf7c _1y2v1nf7k _1y2v1nf7q _1y2v1nfb6 _1y2v1nfu _1y2v1nf6z"
+}, a = "cc7htna", f = "cc7htnb";
+export { t as chipInteractiveVariants, v as chipVariants, a as icon, f as iconActive };

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

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

package/dist-es/chip.js

@@ -11,114 +11,69 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-import { createUseStyles as f } from "./jss.js";
-import { useTheme as v } from "./hooks.js";
+import h from "classnames";
+import { useTheme as g } from "./hooks.js";
 import o from "./box.js";
-import { Text2 as g } from "./text.js";
-import b from "./icon-button.js";
-import p from "./generated/mistica-icons/icon-close-regular.js";
-import { pxToRem as h } from "./utils/css.js";
-import C from "classnames";
-import { jsxs as l, Fragment as x, jsx as t } from "./_virtual/jsx-runtime.js";
-var y = f(function(param) {
-    var e = param.colors, n = param.mq;
-    return {
-        container: {
-            display: "inline-flex",
-            verticalAlign: "middle",
-            justifyContent: "center",
-            alignItems: "center",
-            border: "1px solid ".concat(e.border),
-            borderRadius: 20,
-            backgroundColor: e.backgroundContainer,
-            minHeight: 32,
-            minWidth: 56,
-            cursor: "default",
-            color: e.neutralMedium,
-            "& > span": {
-                color: e.textPrimary
-            }
-        },
-        interactive: _defineProperty({
-            userSelect: "none"
-        }, n.supportsHover, {
-            "&:hover:not($active)": {
-                borderColor: function(param) {
-                    var i = param.isDarkMode;
-                    return i ? e.background : e.brandLow;
-                },
-                color: e.controlActivated,
-                backgroundColor: e.brandLow
-            },
-            "&:hover > span": {
-                color: e.controlActivated
-            }
-        }),
-        active: {
-            borderColor: e.controlActivated,
-            color: e.controlActivated,
-            backgroundColor: e.brandLow,
-            "& > span": {
-                color: e.controlActivated
-            }
-        }
-    };
-}), S = function(e) {
-    var ref = v(), n = ref.texts, i = ref.isDarkMode, r = y({
-        isDarkMode: i
-    }), a = e.Icon, s = e.children, m = e.id, c = /* @__PURE__ */ l(x, {
+import { Text2 as p } from "./text.js";
+import v from "./icon-button.js";
+import x from "./generated/mistica-icons/icon-close-regular.js";
+import { pxToRem as C } from "./utils/css.js";
+import { iconActive as I, icon as y, chipVariants as c, chipInteractiveVariants as R } from "./chip.css-mistica.js";
+import { jsxs as a, Fragment as b, jsx as e } from "./_virtual/jsx-runtime.js";
+var A = function(t) {
+    var ref = g(), l = ref.texts, s = ref.isDarkMode, m = ref.colors, i = t.Icon, d = t.children, f = t.id, r = /* @__PURE__ */ a(b, {
         children: [
-            a && /* @__PURE__ */ t(o, {
+            i && /* @__PURE__ */ e(o, {
                 paddingRight: 4,
-                children: /* @__PURE__ */ t(a, {
+                className: t.active ? I : y,
+                children: /* @__PURE__ */ e(i, {
                     color: "currentColor",
-                    size: h(16)
+                    size: C(16)
                 })
             }),
-            /* @__PURE__ */ t(g, {
-                id: m,
+            /* @__PURE__ */ e(p, {
+                id: f,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
-                children: s
+                children: d
             })
         ]
-    }), d = a ? 8 : 12;
-    if (e.onClose) return /* @__PURE__ */ l(o, {
-        className: r.container,
-        paddingLeft: d,
+    }), n = i ? 8 : 12;
+    if (t.onClose) return /* @__PURE__ */ a(o, {
+        className: c.default,
+        paddingLeft: n,
         children: [
-            c,
-            /* @__PURE__ */ t(o, {
+            r,
+            /* @__PURE__ */ e(o, {
                 paddingLeft: 4,
-                children: /* @__PURE__ */ t(b, {
+                children: /* @__PURE__ */ e(v, {
                     size: 24,
                     style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": n.closeButtonLabel,
+                    "aria-label": l.closeButtonLabel,
                     onPress: function() {
-                        return e.onClose();
+                        return t.onClose();
                     },
-                    children: /* @__PURE__ */ t(p, {
+                    children: /* @__PURE__ */ e(x, {
                         size: 16,
-                        color: "currentColor"
+                        color: m.neutralMedium
                     })
                 })
             })
         ]
     });
     {
-        var u = e.active !== void 0;
-        var _obj;
-        return /* @__PURE__ */ t(o, {
-            className: C(r.container, (_obj = {}, _defineProperty(_obj, r.interactive, u), _defineProperty(_obj, r.active, e.active), _obj)),
-            paddingLeft: d,
+        var u = t.active !== void 0;
+        return /* @__PURE__ */ e(o, {
+            className: h(c[t.active ? "active" : "default"], _defineProperty({}, R[s ? "dark" : "light"], u)),
+            paddingLeft: n,
             paddingRight: 12,
-            children: c
+            children: r
         });
     }
 };
-export { S as default };
+export { A as default };

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

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./circle.css.ts.vanilla.js";
+var r = "_1wpwyyp1 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfb8";
+export { r as circle };

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

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

package/dist-es/circle.js

@@ -1,42 +1,16 @@
-import { createUseStyles as c } from "./jss.js";
-import { jsx as n } from "./_virtual/jsx-runtime.js";
-var i = c(function() {
-    return {
-        circle: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: function(param) {
-                var e = param.backgroundColor;
-                return e;
-            },
-            backgroundImage: function(param) {
-                var e = param.backgroundImage;
-                return e ? "url(".concat(e, ")") : "none";
-            },
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            width: function(param) {
-                var e = param.size;
-                return e;
-            },
-            height: function(param) {
-                var e = param.size;
-                return e;
-            },
-            borderRadius: "50%"
-        }
-    };
-}), d = function(param) {
-    var e = param.children, r = param.backgroundColor, t = param.backgroundImage, o = param.size;
-    var s = i({
-        backgroundColor: r,
-        backgroundImage: t,
-        size: o
-    });
-    return /* @__PURE__ */ n("div", {
-        className: s.circle,
+import { circle as i } from "./circle.css-mistica.js";
+import { jsx as l } from "./_virtual/jsx-runtime.js";
+var s = function(param) {
+    var e = param.children, o = param.backgroundColor, r = param.backgroundImage, t = param.size;
+    return /* @__PURE__ */ l("div", {
+        className: i,
+        style: {
+            width: t,
+            height: t,
+            backgroundColor: o,
+            backgroundImage: r ? "url(".concat(r, ")") : "none"
+        },
         children: e
     });
 };
-export { d as default };
+export { s as default };

package/dist-es/credit-card-number-field.css-mistica.js

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./credit-card-number-field.css.ts.vanilla.js";
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf77", f = {
+    default: "yvyo3q4 _1y2v1nf76 yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf76 yvyo3q6"
+};
+export { a as flip, o as flipBack, r as flipFront, f as variants };

package/dist-es/credit-card-number-field.css.ts.vanilla.js

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