@telefonica/mistica 12.9.1 → 12.10.0

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

@@ -127,43 +127,43 @@ 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 * as g from "react";
 import { useForm as j, useFieldProps as M } from "./form-context.js";
-import { useTheme as U } from "./hooks.js";
-import { getCreditCardNumberLength as T, isAmericanExpress as I, isVisa as A, isMasterCard as x, isValidCreditCardNumber as D } from "./utils/credit-card.js";
-import { TextFieldBaseAutosuggest as L } from "./text-field-base.js";
-import S from "./icons/icon-creditcard.js";
-import O from "./icons/icon-visa.js";
-import Y from "./icons/icon-mastercard.js";
-import _ from "./icons/icon-amex.js";
-import { createUseStyles as z } from "./jss.js";
+import { useTheme as D } from "./hooks.js";
+import { getCreditCardNumberLength as T, isAmericanExpress as I, isVisa as x, isMasterCard as A, isValidCreditCardNumber as L } from "./utils/credit-card.js";
+import { TextFieldBaseAutosuggest as O } from "./text-field-base.js";
+import R from "./icons/icon-creditcard.js";
+import U from "./icons/icon-visa.js";
+import _ from "./icons/icon-mastercard.js";
+import z from "./icons/icon-amex.js";
 import { useRifm as P } from "rifm";
 import { createChangeEvent as q } from "./utils/dom.js";
 import { combineRefs as G } from "./utils/common.js";
-import { jsx as o, jsxs as H } from "./_virtual/jsx-runtime.js";
-var J = function(r) {
+import { flip as H, variants as J, flipFront as K, flipBack as Q } from "./credit-card-number-field.css-mistica.js";
+import { jsx as o, jsxs as W } from "./_virtual/jsx-runtime.js";
+var X = function(r) {
     var t, e;
     var i = String(r != null ? r : "").replace(/[^\d]/g, "");
     return (e = (t = i.match(/.{1,4}/g)) == null ? void 0 : t.join(" ")) != null ? e : i;
-}, K = function(_param) {
-    var r = _param.inputRef, i = _param.value, t = _param.defaultValue, e = _param.onChange, a = _objectWithoutProperties(_param, [
+}, Y = function(_param) {
+    var r = _param.inputRef, i = _param.value, t = _param.defaultValue, e = _param.onChange, c = _objectWithoutProperties(_param, [
         "inputRef",
         "value",
         "defaultValue",
         "onChange"
     ]);
-    var ref = _slicedToArray(l.useState(t != null ? t : ""), 2), s = ref[0], N = ref[1], f = l.useRef(null), u = (typeof i === "undefined" ? "undefined" : _typeof(i)) < "u", d = u ? i : s, m = l.useCallback(function(g) {
-        u || N(g), f.current && (e == null || e(q(f.current, g)));
+    var ref = _slicedToArray(g.useState(t != null ? t : ""), 2), m = ref[0], N = ref[1], f = g.useRef(null), u = (typeof i === "undefined" ? "undefined" : _typeof(i)) < "u", d = u ? i : m, a = g.useCallback(function(l) {
+        u || N(l), f.current && (e == null || e(q(f.current, l)));
     }, [
         u,
         e
     ]), p = P({
-        format: J,
+        format: X,
         value: d,
-        onChange: m,
+        onChange: a,
         accept: /[\d]+/g
     });
-    return /* @__PURE__ */ o("input", _objectSpreadProps(_objectSpread({}, a), {
+    return /* @__PURE__ */ o("input", _objectSpreadProps(_objectSpread({}, c), {
         type: "text",
         inputMode: "decimal",
         maxLength: T(p.value) + 3,
@@ -171,22 +171,22 @@ var J = function(r) {
         value: p.value,
         ref: G(r, f)
     }));
-}, Q = function(r) {
-    return A(r) ? /* @__PURE__ */ o(O, {}) : x(r) ? /* @__PURE__ */ o(Y, {}) : I(r) ? /* @__PURE__ */ o(_, {}) : null;
-}, W = {
+}, Z = function(r) {
+    return x(r) ? /* @__PURE__ */ o(U, {}) : A(r) ? /* @__PURE__ */ o(_, {}) : I(r) ? /* @__PURE__ */ o(z, {}) : null;
+}, $ = {
     showBackface: !1,
-    animationTarget: /* @__PURE__ */ o(S, {}),
+    animationTarget: /* @__PURE__ */ o(R, {}),
     isAnimating: !1
-}, X = function(r, param) {
+}, v = function(r, param) {
     var i = param.type, t = param.value;
     if (i === "INPUT") {
-        var e = Q(t);
+        var e = Z(t);
         if (e && !r.showBackface) return {
             animationTarget: e,
             showBackface: !0,
             isAnimating: !0
         };
-        if (!A(t) && !x(t) && !I(t) && r.showBackface) return {
+        if (!x(t) && !A(t) && !I(t) && r.showBackface) return {
             animationTarget: r.animationTarget,
             showBackface: !1,
             isAnimating: !0
@@ -198,71 +198,43 @@ var J = function(r) {
     return i === "TRANSITION_END" ? _objectSpreadProps(_objectSpread({}, r), {
         isAnimating: !1
     }) : r;
-}, Z = z(function() {
-    return {
-        flip: {
-            perspective: 1e3
-        },
-        flipInner: {
-            position: "relative",
-            transition: "transform 0.4s",
-            transformStyle: "preserve-3d",
-            "& div": {
-                backfaceVisibility: "hidden"
-            },
-            transform: function(param) {
-                var r = param.showBackface;
-                return r ? "rotateY(180deg)" : "none";
-            }
-        },
-        flipFront: {
-            position: "absolute"
-        },
-        flipBack: {
-            transform: "rotateY(180deg)"
-        }
-    };
-}), $ = function(param) {
+}, rr = function(param) {
     var r = param.value;
-    var ref = _slicedToArray(l.useReducer(X, W), 2), ref1 = ref[0], i = ref1.showBackface, t = ref1.animationTarget, e = ref1.isAnimating, a = ref[1];
-    l.useEffect(function() {
-        a({
+    var ref = _slicedToArray(g.useReducer(v, $), 2), ref1 = ref[0], i = ref1.showBackface, t = ref1.animationTarget, e = ref1.isAnimating, c = ref[1];
+    return g.useEffect(function() {
+        c({
             type: "INPUT",
             value: r
         });
     }, [
         r
-    ]);
-    var s = Z({
-        showBackface: i
-    });
-    return /* @__PURE__ */ o("div", {
-        className: s.flip,
-        children: /* @__PURE__ */ H("div", {
-            className: s.flipInner,
+    ]), /* @__PURE__ */ o("div", {
+        className: H,
+        children: /* @__PURE__ */ W("div", {
+            className: J[i ? "backface" : "default"],
             onTransitionEnd: function() {
-                return e && a({
+                return e && c({
                     type: "TRANSITION_END"
                 });
             },
             children: [
                 /* @__PURE__ */ o("div", {
-                    className: s.flipFront,
-                    children: /* @__PURE__ */ o(S, {})
+                    className: K,
+                    children: /* @__PURE__ */ o(R, {})
                 }),
                 /* @__PURE__ */ o("div", {
-                    className: s.flipBack,
+                    className: Q,
                     children: t
                 })
             ]
         })
     });
-}, dr = function(_param) {
-    var r = _param.disabled, i = _param.error, t = _param.helperText, e = _param.name, a = _param.optional, s = _param.validate, N = _param.onChange, f = _param.onChangeValue, u = _param.onBlur, tmp = _param.acceptedCards, d = tmp === void 0 ? {
+}, gr = function(_param) {
+    var r = _param.disabled, i = _param.error, t = _param.helperText, e = _param.name, c = _param.optional, m = _param.validate, N = _param.onChange, f = _param.onChangeValue, u = _param.onBlur, tmp = _param.acceptedCards, d = tmp === void 0 ? {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } : tmp, m = _param.value, tmp1 = _param.autoComplete, p = tmp1 === void 0 ? "cc-number" : tmp1, g = _param.defaultValue, w = _objectWithoutProperties(_param, [
+    } : tmp, a = _param.value, tmp1 = _param.autoComplete, p = tmp1 === void 0 ? "cc-number" : tmp1, l = _param.defaultValue, F = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -277,19 +249,19 @@ var J = function(r) {
         "autoComplete",
         "defaultValue"
     ]);
-    var E;
-    var ref = U(), b = ref.texts, ref1 = j(), F = ref1.jumpToNext, R = ref1.rawValues, V = ref1.setFormError, h = function(n, C) {
-        var c = b.formCreditCardNumberError;
-        return n ? I(n) && !d.americanExpress || A(n) && !d.visa || x(n) && !d.masterCard || !D(n) || T(n) !== n.length ? c : s == null ? void 0 : s(n, C) : a ? "" : b.formFieldErrorIsMandatory;
+    var b;
+    var ref = D(), E = ref.texts, ref1 = j(), S = ref1.jumpToNext, y = ref1.rawValues, V = ref1.setFormError, h = function(n, C) {
+        var s = E.formCreditCardNumberError;
+        return n ? I(n) && !d.americanExpress || x(n) && !d.visa || A(n) && !d.masterCard || !L(n) || T(n) !== n.length ? s : m == null ? void 0 : m(n, C) : c ? "" : E.formFieldErrorIsMandatory;
     }, k = function(n) {
         return n.replace(/\s/g, "");
     }, B = M({
         name: e,
-        value: m,
-        defaultValue: g,
+        value: a,
+        defaultValue: l,
         processValue: k,
         helperText: t,
-        optional: a,
+        optional: c,
         error: i,
         disabled: r,
         onBlur: u,
@@ -297,23 +269,23 @@ var J = function(r) {
         onChange: N,
         onChangeValue: f
     });
-    return /* @__PURE__ */ o(L, _objectSpreadProps(_objectSpread({}, w, B), {
+    return /* @__PURE__ */ o(O, _objectSpreadProps(_objectSpread({}, F, B), {
         onChange: function(n) {
             B.onChange(n);
-            var C = n.currentTarget.value, c = k(C);
-            if (c.length >= T(c)) {
-                var y = h == null ? void 0 : h(c, C);
-                y ? V({
+            var C = n.currentTarget.value, s = k(C);
+            if (s.length >= T(s)) {
+                var w = h == null ? void 0 : h(s, C);
+                w ? V({
                     name: e,
-                    error: y
-                }) : F(e);
+                    error: w
+                }) : S(e);
             }
         },
-        inputComponent: K,
+        inputComponent: Y,
         autoComplete: p,
-        endIcon: /* @__PURE__ */ o($, {
-            value: (E = m != null ? m : R[e]) != null ? E : ""
+        endIcon: /* @__PURE__ */ o(rr, {
+            value: (b = a != null ? a : y[e]) != null ? b : ""
         })
     }));
 };
-export { dr as default };
+export { gr as default };

package/dist-es/cvv-field.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./cvv-field.css.ts.vanilla.js";
+var v = "_10ijton2 _1y2v1nf1i", i = "_1y2v1nf7b _1y2v1nf7q";
+export { v as cvvText, i as tooltipContainer };

package/dist-es/cvv-field.css.ts.vanilla.js

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

package/dist-es/cvv-field.js

@@ -77,70 +77,56 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { createUseStyles as j } from "./jss.js";
 import { useTheme as g } from "./hooks.js";
-import M from "./icons/icon-cvv-visa-mc.js";
-import A from "./icons/icon-cvv-amex.js";
-import B from "./tooltip.js";
-import S from "./icon-button.js";
-import w from "./icons/icon-info-cvv.js";
-import { useForm as b, useFieldProps as H } from "./form-context.js";
-import { TextFieldBaseAutosuggest as U } from "./text-field-base.js";
-import { IntegerInput as k } from "./integer-field.js";
-import { jsx as t, jsxs as a, Fragment as q } from "./_virtual/jsx-runtime.js";
-var D = j(function(e) {
-    return {
-        cvvText: {
-            margin: 0,
-            marginLeft: 16,
-            color: e.colors.textPrimary,
-            lineHeight: 1.42857142,
-            fontSize: 14
-        },
-        tooltipContainer: {
-            display: "flex",
-            alignItems: "center"
-        }
-    };
-}), G = function(param) {
-    var e = param.acceptedCards;
-    var o = D(), ref = g(), i = ref.texts;
-    return /* @__PURE__ */ a(q, {
+import A from "./icons/icon-cvv-visa-mc.js";
+import B from "./icons/icon-cvv-amex.js";
+import w from "./tooltip.js";
+import b from "./icon-button.js";
+import k from "./icons/icon-info-cvv.js";
+import { useForm as q, useFieldProps as D } from "./form-context.js";
+import { TextFieldBaseAutosuggest as G } from "./text-field-base.js";
+import { IntegerInput as H } from "./integer-field.js";
+import { tooltipContainer as C, cvvText as h } from "./cvv-field.css-mistica.js";
+import { jsx as r, jsxs as c, Fragment as J } from "./_virtual/jsx-runtime.js";
+var K = function(param) {
+    var t = param.acceptedCards;
+    var ref = g(), e = ref.texts;
+    return /* @__PURE__ */ c(J, {
         children: [
-            /* @__PURE__ */ a("div", {
-                className: o.tooltipContainer,
+            /* @__PURE__ */ c("div", {
+                className: C,
                 children: [
-                    /* @__PURE__ */ t(M, {
+                    /* @__PURE__ */ r(A, {
                         size: 48,
                         role: "img"
                     }),
-                    /* @__PURE__ */ t("p", {
-                        className: o.cvvText,
-                        children: i.formCreditCardCvvTooltipVisaMc
+                    /* @__PURE__ */ r("p", {
+                        className: h,
+                        children: e.formCreditCardCvvTooltipVisaMc
                     })
                 ]
             }),
-            (e == null ? void 0 : e.americanExpress) && /* @__PURE__ */ a("div", {
-                className: o.tooltipContainer,
+            (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ c("div", {
+                className: C,
                 children: [
-                    /* @__PURE__ */ t(A, {
+                    /* @__PURE__ */ r(B, {
                         size: 48,
                         role: "img"
                     }),
-                    /* @__PURE__ */ t("p", {
-                        className: o.cvvText,
-                        children: i.formCreditCardCvvTooltipAmex
+                    /* @__PURE__ */ r("p", {
+                        className: h,
+                        children: e.formCreditCardCvvTooltipAmex
                     })
                 ]
             })
         ]
     });
-}, $ = function(_param) {
-    var e = _param.disabled, o = _param.error, i = _param.helperText, n = _param.name, f = _param.optional, l = _param.validate, h = _param.onChange, x = _param.onChangeValue, T = _param.onBlur, tmp = _param.acceptedCards, I = tmp === void 0 ? {
+}, L = function(_param) {
+    var t = _param.disabled, e = _param.error, x = _param.helperText, s = _param.name, f = _param.optional, n = _param.validate, I = _param.onChange, T = _param.onChangeValue, F = _param.onBlur, tmp = _param.acceptedCards, y = tmp === void 0 ? {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } : tmp, tmp1 = _param.maxLength, m = tmp1 === void 0 ? 4 : tmp1, y = _param.value, tmp2 = _param.autoComplete, F = tmp2 === void 0 ? "cc-csc" : tmp2, z = _param.defaultValue, E = _objectWithoutProperties(_param, [
+    } : tmp, tmp1 = _param.maxLength, m = tmp1 === void 0 ? 4 : tmp1, E = _param.value, tmp2 = _param.autoComplete, N = tmp2 === void 0 ? "cc-csc" : tmp2, V = _param.defaultValue, j = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -156,49 +142,49 @@ var D = j(function(e) {
         "autoComplete",
         "defaultValue"
     ]);
-    var ref = g(), c = ref.texts, ref1 = b(), N = ref1.setFormError, V = ref1.jumpToNext, p = function(r, s) {
-        return r ? r.length !== m ? c.formCreditCardCvvError : l == null ? void 0 : l(r, s) : f ? "" : c.formFieldErrorIsMandatory;
-    }, u = function(r) {
-        return r;
-    }, v = H({
-        name: n,
-        value: y,
-        defaultValue: z,
-        processValue: u,
-        helperText: i,
+    var ref = g(), l = ref.texts, ref1 = q(), z = ref1.setFormError, M = ref1.jumpToNext, p = function(o, i) {
+        return o ? o.length !== m ? l.formCreditCardCvvError : n == null ? void 0 : n(o, i) : f ? "" : l.formFieldErrorIsMandatory;
+    }, a = function(o) {
+        return o;
+    }, u = D({
+        name: s,
+        value: E,
+        defaultValue: V,
+        processValue: a,
+        helperText: x,
         optional: f,
-        error: o,
-        disabled: e,
-        onBlur: T,
+        error: e,
+        disabled: t,
+        onBlur: F,
         validate: p,
-        onChange: h,
-        onChangeValue: x
+        onChange: I,
+        onChangeValue: T
     });
-    return /* @__PURE__ */ t(U, _objectSpreadProps(_objectSpread({}, E, v), {
+    return /* @__PURE__ */ r(G, _objectSpreadProps(_objectSpread({}, j, u), {
         maxLength: m,
-        onChange: function(r) {
-            v.onChange(r);
-            var s = r.currentTarget.value, d = u(s);
+        onChange: function(o) {
+            u.onChange(o);
+            var i = o.currentTarget.value, d = a(i);
             if (d.length === m) {
-                var C = p(d, s);
-                C ? N({
-                    name: n,
-                    error: C
-                }) : V(n);
+                var v = p(d, i);
+                v ? z({
+                    name: s,
+                    error: v
+                }) : M(s);
             }
         },
-        endIcon: /* @__PURE__ */ t(B, {
+        endIcon: /* @__PURE__ */ r(w, {
             position: "top",
-            children: /* @__PURE__ */ t(G, {
-                acceptedCards: I
+            children: /* @__PURE__ */ r(K, {
+                acceptedCards: y
             }),
-            targetLabel: c.formCreditCardCvvTooltipVisaMcButton,
-            target: /* @__PURE__ */ t("div", {
+            targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
+            target: /* @__PURE__ */ r("div", {
                 style: {
                     width: 16,
                     height: 16
                 },
-                children: /* @__PURE__ */ t(S, {
+                children: /* @__PURE__ */ r(b, {
                     size: 40,
                     style: {
                         display: "flex",
@@ -208,14 +194,14 @@ var D = j(function(e) {
                         left: -12,
                         top: -12
                     },
-                    children: /* @__PURE__ */ t(w, {
+                    children: /* @__PURE__ */ r(k, {
                         size: 20
                     })
                 })
             })
         }),
-        autoComplete: F,
-        inputComponent: k
+        autoComplete: N,
+        inputComponent: H
     }));
 };
-export { $ as default };
+export { L as default };

package/dist-es/date-time-picker.css-mistica.js

@@ -0,0 +1,3 @@
+import "./date-time-picker.css.ts.vanilla.js";
+var e = "c0yqjy0";
+export { e as reactDatePicker };

package/dist-es/date-time-picker.css.ts.vanilla.js

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