@telefonica/mistica 12.9.1 → 12.10.0

package/dist/checkbox.css-mistica.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    boxVariant: function() {
+        return f;
+    },
+    check: function() {
+        return n;
+    },
+    checkChecked: function() {
+        return r;
+    },
+    checkboxContainer: function() {
+        return y;
+    },
+    disabled: function() {
+        return b;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./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";

package/dist/checkbox.css.d.ts

@@ -0,0 +1,5 @@
+export declare const checkboxContainer: string;
+export declare const boxVariant: Record<"ios" | "rest" | "checked", string>;
+export declare const check: string;
+export declare const checkChecked: string;
+export declare const disabled: string;

package/dist/checkbox.css.js.flow

@@ -0,0 +1,7 @@
+// @flow
+
+declare export var checkboxContainer: string;
+declare export var boxVariant: { ios: string, rest: string, checked: string };
+declare export var check: string;
+declare export var checkChecked: string;
+declare export var disabled: string;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+var s = "";

package/dist/checkbox.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return V;
+        return F;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _keyCodesJs = require("./utils/key-codes.js");
 var _formContextJs = require("./form-context.js");
-var _jssJs = require("./jss.js");
 var _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
 var _textJs = require("./text.js");
 var _hooksJs = require("./hooks.js");
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _domJs = require("./utils/dom.js");
+var _checkboxCssMisticaJs = require("./checkbox.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -160,109 +160,64 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var N = (0, _jssJs.createUseStyles)(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 D(param) {
-    var e = param.isChecked, c = param.disabled;
-    var a = N(), ref = (0, _hooksJs.useTheme)(), o = ref.isIos, d = ref.colors, r = o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
+var V = function V(param) {
+    var e = param.isChecked, l = param.disabled;
+    var ref = (0, _hooksJs.useTheme)(), t = ref.isIos, c = ref.colors, n = t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         viewBox: "0 0 10 8",
         width: "10",
         height: "8",
-        className: (0, _classnames.default)(a.check, _defineProperty({}, a.checkChecked, e)),
+        className: (0, _classnames.default)(_checkboxCssMisticaJs.check, _defineProperty({}, _checkboxCssMisticaJs.checkChecked, e)),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("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__ */ (0, _jsxRuntimeJs.jsx)("svg", {
         viewBox: "0 0 14 10",
         width: "14",
         height: "10",
-        className: (0, _classnames.default)(a.check, _defineProperty({}, a.checkChecked, e)),
+        className: (0, _classnames.default)(_checkboxCssMisticaJs.check, _defineProperty({}, _checkboxCssMisticaJs.checkChecked, e)),
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("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__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(a.box, (_obj = {}, _defineProperty(_obj, a.boxChecked, e), _defineProperty(_obj, a.disabled, c), _obj)),
-        children: r
+        className: (0, _classnames.default)(_checkboxCssMisticaJs.boxVariant[e ? "checked" : t ? "ios" : "rest"], _defineProperty({}, _checkboxCssMisticaJs.disabled, l)),
+        children: n
     });
-}, P = (0, _jssJs.createUseStyles)(function() {
-    return {
-        checkboxContainer: {
-            cursor: "default",
-            display: "inline"
-        },
-        disabled: {
-            opacity: 0.5
-        }
-    };
-}), V = function V(e) {
-    var c = P(), a = (0, _hooksJs.useAriaId)(e["aria-labelledby"]), o = e["aria-label"], d = o || e["aria-labelledby"], ref = (0, _formContextJs.useControlProps)({
+}, F = function F(e) {
+    var l = (0, _hooksJs.useAriaId)(e["aria-labelledby"]), t = e["aria-label"], c = t || e["aria-labelledby"], ref = (0, _formContextJs.useControlProps)({
         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(_react.useState(!!r), 2), l = ref1[0], C = ref1[1], m = function m() {
-        i === void 0 ? (C(!l), b(!l)) : b(!i);
-    }, g = function g(s) {
-        s.keyCode === _keyCodesJs.SPACE && (s.preventDefault(), s.stopPropagation(), m());
-    }, f = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(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(_react.useState(!!n), 2), o = ref1[0], v = ref1[1], b = function b() {
+        a === void 0 ? (v(!o), h(!o)) : h(!a);
+    }, g = function g(r) {
+        r.keyCode === _keyCodesJs.SPACE && (r.preventDefault(), r.stopPropagation(), b());
+    }, m = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(V, {
+        disabled: d,
+        isChecked: a != null ? a : o
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("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
+        "aria-checked": a != null ? a : o,
+        onKeyDown: d ? void 0 : g,
+        onClick: d ? void 0 : b,
+        tabIndex: d ? void 0 : 0,
+        ref: C,
+        className: _checkboxCssMisticaJs.checkboxContainer,
+        "aria-label": t,
+        "aria-labelledby": t ? void 0 : l,
+        "aria-disabled": d
     }, (0, _domJs.getPrefixedDataAttributes)(e.dataAttributes)), {
         children: e.render ? e.render({
-            controlElement: f,
-            labelId: a,
-            checked: i != null ? i : l,
-            disabled: !!n
+            controlElement: m,
+            labelId: l,
+            checked: a != null ? a : o,
+            disabled: !!d
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_inlineJs.default, {
             space: 16,
             children: [
@@ -274,16 +229,16 @@ var N = (0, _jssJs.createUseStyles)(function(param) {
                             position: "relative",
                             top: -2
                         },
-                        children: f
+                        children: m
                     })
                 }),
                 e.children && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                     regular: !0,
                     as: "div",
-                    id: a,
-                    role: d ? "presentation" : void 0,
+                    id: l,
+                    role: c ? "presentation" : void 0,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("span", {
-                        className: n ? c.disabled : "",
+                        className: d ? _checkboxCssMisticaJs.disabled : "",
                         children: e.children
                     })
                 })

package/dist/chip.css-mistica.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    chipInteractiveVariants: function() {
+        return t;
+    },
+    chipVariants: function() {
+        return v;
+    },
+    icon: function() {
+        return a;
+    },
+    iconActive: function() {
+        return f;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./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";

package/dist/chip.css.d.ts

@@ -0,0 +1,4 @@
+export declare const chipVariants: Record<"default" | "active", string>;
+export declare const chipInteractiveVariants: Record<"dark" | "light", string>;
+export declare const icon: string;
+export declare const iconActive: string;

package/dist/chip.css.js.flow

@@ -0,0 +1,6 @@
+// @flow
+
+declare export var chipVariants: { default: string, active: string };
+declare export var chipInteractiveVariants: { dark: string, light: string };
+declare export var icon: string;
+declare export var iconActive: string;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+var s = "";

package/dist/chip.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return S;
+        return A;
     }
 });
-var _jssJs = require("./jss.js");
+var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _hooksJs = require("./hooks.js");
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 var _textJs = require("./text.js");
 var _iconButtonJs = /*#__PURE__*/ _interopRequireDefault(require("./icon-button.js"));
 var _iconCloseRegularJs = /*#__PURE__*/ _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular.js"));
 var _cssJs = require("./utils/css.js");
-var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+var _chipCssMisticaJs = require("./chip.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -35,75 +35,31 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
-var y = (0, _jssJs.createUseStyles)(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 borderColor(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 S(e) {
-    var ref = (0, _hooksJs.useTheme)(), n = ref.texts, i = ref.isDarkMode, r = y({
-        isDarkMode: i
-    }), a = e.Icon, s = e.children, m = e.id, c = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+var A = function A(t) {
+    var ref = (0, _hooksJs.useTheme)(), l = ref.texts, s = ref.isDarkMode, m = ref.colors, i = t.Icon, d = t.children, f = t.id, r = /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 4,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(a, {
+                className: t.active ? _chipCssMisticaJs.iconActive : _chipCssMisticaJs.icon,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(i, {
                     color: "currentColor",
                     size: (0, _cssJs.pxToRem)(16)
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                id: m,
+                id: f,
                 medium: !0,
                 truncate: 1,
                 color: "currentColor",
-                children: s
+                children: d
             })
         ]
-    }), d = a ? 8 : 12;
-    if (e.onClose) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, {
-        className: r.container,
-        paddingLeft: d,
+    }), n = i ? 8 : 12;
+    if (t.onClose) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, {
+        className: _chipCssMisticaJs.chipVariants.default,
+        paddingLeft: n,
         children: [
-            c,
+            r,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 4,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconButtonJs.default, {
@@ -113,26 +69,25 @@ var y = (0, _jssJs.createUseStyles)(function(param) {
                         justifyContent: "center",
                         alignItems: "center"
                     },
-                    "aria-label": n.closeButtonLabel,
+                    "aria-label": l.closeButtonLabel,
                     onPress: function onPress() {
-                        return e.onClose();
+                        return t.onClose();
                     },
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconCloseRegularJs.default, {
                         size: 16,
-                        color: "currentColor"
+                        color: m.neutralMedium
                     })
                 })
             })
         ]
     });
     {
-        var u = e.active !== void 0;
-        var _obj;
+        var u = t.active !== void 0;
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-            className: (0, _classnames.default)(r.container, (_obj = {}, _defineProperty(_obj, r.interactive, u), _defineProperty(_obj, r.active, e.active), _obj)),
-            paddingLeft: d,
+            className: (0, _classnames.default)(_chipCssMisticaJs.chipVariants[t.active ? "active" : "default"], _defineProperty({}, _chipCssMisticaJs.chipInteractiveVariants[s ? "dark" : "light"], u)),
+            paddingLeft: n,
             paddingRight: 12,
-            children: c
+            children: r
         });
     }
 };

package/dist/circle.css-mistica.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "circle", {
+    enumerable: true,
+    get: function() {
+        return r;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./circle.css.ts.vanilla.js");
+var r = "_1wpwyyp1 _1y2v1nf7b _1y2v1nf7q _1y2v1nf7k _1y2v1nfb8";

package/dist/circle.css.d.ts

@@ -0,0 +1 @@
+export declare const circle: string;

package/dist/circle.css.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+declare export var circle: string;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+var s = "";

package/dist/circle.js

@@ -5,47 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return d;
+        return s;
     }
 });
-var _jssJs = require("./jss.js");
+var _circleCssMisticaJs = require("./circle.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
-var i = (0, _jssJs.createUseStyles)(function() {
-    return {
-        circle: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: function backgroundColor(param) {
-                var e = param.backgroundColor;
-                return e;
-            },
-            backgroundImage: function backgroundImage(param) {
-                var e = param.backgroundImage;
-                return e ? "url(".concat(e, ")") : "none";
-            },
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-            width: function width(param) {
-                var e = param.size;
-                return e;
-            },
-            height: function height(param) {
-                var e = param.size;
-                return e;
-            },
-            borderRadius: "50%"
-        }
-    };
-}), d = function d(param) {
-    var e = param.children, r = param.backgroundColor, t = param.backgroundImage, o = param.size;
-    var s = i({
-        backgroundColor: r,
-        backgroundImage: t,
-        size: o
-    });
+var s = function s(param) {
+    var e = param.children, o = param.backgroundColor, r = param.backgroundImage, t = param.size;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: s.circle,
+        className: _circleCssMisticaJs.circle,
+        style: {
+            width: t,
+            height: t,
+            backgroundColor: o,
+            backgroundImage: r ? "url(".concat(r, ")") : "none"
+        },
         children: e
     });
 };

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    flip: function() {
+        return a;
+    },
+    flipBack: function() {
+        return o;
+    },
+    flipFront: function() {
+        return r;
+    },
+    variants: function() {
+        return f;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./credit-card-number-field.css.ts.vanilla.js");
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf77", f = {
+    default: "yvyo3q4 _1y2v1nf76 yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf76 yvyo3q6"
+};

package/dist/credit-card-number-field.css.d.ts

@@ -0,0 +1,4 @@
+export declare const flip: string;
+export declare const flipFront: string;
+export declare const flipBack: string;
+export declare const variants: Record<"default" | "backface", string>;

package/dist/credit-card-number-field.css.js.flow

@@ -0,0 +1,6 @@
+// @flow
+
+declare export var flip: string;
+declare export var flipFront: string;
+declare export var flipBack: string;
+declare export var variants: { default: string, backface: string };

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+var a = "";