@telefonica/mistica 15.20.1 → 16.0.0

package/dist/password-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return D;
+        return J;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,6 +16,7 @@ const _textfieldbase = require("./text-field-base.js");
 const _hooks = require("./hooks.js");
 const _iconeyeoffregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-eye-off-regular.js"));
 const _iconeyeregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-eye-regular.js"));
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -141,25 +142,25 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const j = (param)=>{
-    let { isVisible: n, setVisibility: i, focus: c } = param;
-    const { texts: t } = (0, _hooks.useTheme)();
+const B = (param)=>{
+    let { isVisible: n, setVisibility: c, focus: a } = param;
+    const { texts: t, t: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.FieldEndIcon, {
         checkedProps: {
             Icon: _iconeyeoffregular.default,
-            "aria-label": t.disablePasswordVisibility
+            "aria-label": t.disablePasswordVisibility || s(_texttokens.disablePasswordVisibility)
         },
         uncheckedProps: {
             Icon: _iconeyeregular.default,
-            "aria-label": t.enablePasswordVisibility
+            "aria-label": t.enablePasswordVisibility || s(_texttokens.enablePasswordVisibility)
         },
         checked: n,
-        onChange: (a)=>{
-            i(a), c();
+        onChange: (l)=>{
+            c(l), a();
         }
     });
-}, q = (_param)=>{
-    var { disabled: n, error: i, helperText: c, name: t, optional: a, validate: f, onChange: m, onChangeValue: p, onBlur: P, value: b, autoComplete: R = "current-password", defaultValue: w, dataAttributes: F } = _param, I = _object_without_properties(_param, [
+}, C = (_param)=>{
+    var { disabled: n, error: c, helperText: a, name: t, optional: s, validate: l, onChange: m, onChangeValue: p, onBlur: b, value: P, autoComplete: w = "current-password", defaultValue: R, dataAttributes: y } = _param, F = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -174,15 +175,15 @@ const j = (param)=>{
         "defaultValue",
         "dataAttributes"
     ]);
-    const [u, y] = _react.useState(!1), s = _react.useRef(0), o = _react.useRef(null), V = (e)=>e, g = ()=>{
-        const e = o.current;
-        e && (e.selectionStart !== null && (s.current = e.selectionStart), e.focus());
+    const [u, I] = _react.useState(!1), o = _react.useRef(0), r = _react.useRef(null), V = (e)=>e, g = ()=>{
+        const e = r.current;
+        e && (e.selectionStart !== null && (o.current = e.selectionStart), e.focus());
     };
     _react.useEffect(()=>{
-        const e = o.current;
+        const e = r.current;
         if (e) {
             const h = requestAnimationFrame(()=>{
-                e.selectionStart = s.current, e.selectionEnd = s.current;
+                e.selectionStart = o.current, e.selectionEnd = o.current;
             });
             return ()=>{
                 cancelAnimationFrame(h);
@@ -190,36 +191,36 @@ const j = (param)=>{
         }
     }, [
         u,
-        s,
-        o
+        o,
+        r
     ]);
-    const d = (0, _formcontext.useFieldProps)({
+    const f = (0, _formcontext.useFieldProps)({
         name: t,
-        value: b,
-        defaultValue: w,
+        value: P,
+        defaultValue: R,
         processValue: V,
-        helperText: c,
-        optional: a,
-        error: i,
+        helperText: a,
+        optional: s,
+        error: c,
         disabled: n,
-        onBlur: P,
-        validate: f,
+        onBlur: b,
+        validate: l,
         onChange: m,
         onChangeValue: p
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, I, d), {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldbase.TextFieldBaseAutosuggest, _object_spread_props(_object_spread({}, F, f), {
         type: u ? "text" : "password",
         inputRef: (e)=>{
-            d.inputRef(e), o.current = e;
+            f.inputRef(e), r.current = e;
         },
-        autoComplete: R,
-        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(j, {
+        autoComplete: w,
+        endIcon: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
             focus: g,
             isVisible: u,
-            setVisibility: y
+            setVisibility: I
         }),
         dataAttributes: _object_spread({
             "component-name": "PasswordField"
-        }, F)
+        }, y)
     }));
-}, D = q;
+}, J = C;

package/dist/pin-field.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return de;
+        return Ie;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -22,6 +22,7 @@ const _formcontext = require("./form-context.js");
 const _dom = require("./utils/dom.js");
 const _textfieldcomponents = require("./text-field-components.js");
 const _reactdom = require("react-dom");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -120,32 +121,32 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-let T = !1;
-const x = (param)=>{
-    let { length: l = 6, hideCode: f = !1, readSms: d, disabled: g, readOnly: y, value: F, defaultValue: b, onChange: u, inputRef: A } = param;
+let C = !1;
+const ee = (param)=>{
+    let { length: i = 6, hideCode: n = !1, readSms: d, disabled: h, readOnly: g, value: y, defaultValue: b, onChange: f, inputRef: R } = param;
     var _ref;
-    const { texts: C } = (0, _hooks.useTheme)(), [R, S] = _react.useState((_ref = b == null ? void 0 : b.slice(0, l)) !== null && _ref !== void 0 ? _ref : ""), [w, I] = _react.useState(void 0), a = _react.useRef(Array.from({
-        length: l
-    }, ()=>null)).current, i = typeof F < "u", t = i ? F : R, c = _react.useCallback((s)=>{
-        if (s === t) return;
-        i || S(s);
-        const e = a[0];
-        e && (u == null || u((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
+    const { texts: S, t: k } = (0, _hooks.useTheme)(), [A, F] = _react.useState((_ref = b == null ? void 0 : b.slice(0, i)) !== null && _ref !== void 0 ? _ref : ""), [w, P] = _react.useState(void 0), l = _react.useRef(Array.from({
+        length: i
+    }, ()=>null)).current, u = typeof y < "u", r = u ? y : A, p = _react.useCallback((s)=>{
+        if (s === r) return;
+        u || F(s);
+        const e = l[0];
+        e && (f == null || f((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
     }, [
-        t,
-        a,
-        i,
-        u
+        r,
+        l,
+        u,
+        f
     ]);
     _react.useEffect(()=>{
-        c(t.slice(0, l));
+        p(r.slice(0, i));
     }, [
-        l,
-        t,
-        c
+        i,
+        r,
+        p
     ]), _react.useEffect(()=>{
-        if (d && "OTPCredential" in window && !T) {
-            T = !0;
+        if (d && "OTPCredential" in window && !C) {
+            C = !0;
             const s = new AbortController();
             return navigator.credentials.get({
                 // @ts-expect-error: otp is not in the types yet
@@ -157,63 +158,63 @@ const x = (param)=>{
                 signal: s.signal
             }).then((e)=>{
                 if (e) {
-                    const r = e.code.slice(0, l);
-                    c(r);
+                    const t = e.code.slice(0, i);
+                    p(t);
                 }
             }).catch(()=>{}).finally(()=>{
-                T = !1;
+                C = !1;
             }), ()=>{
-                T = !1, s.abort();
+                C = !1, s.abort();
             };
         }
     }, [
-        c,
-        l,
+        p,
+        i,
         d
     ]);
-    const H = (s)=>(e)=>{
-            var k;
-            const r = e.target.value;
-            if (r === "") return;
-            const o = t[s];
-            let p = r;
-            !o || o === r ? p = r : o === r[0] ? p = r.slice(1) : o === r[r.length - 1] && (p = r.slice(0, -1));
-            let v = s, P = t;
-            if (p.length >= 2) {
-                const V = p.slice(0, l - s);
-                P = t.slice(0, s) + V, v = Math.min(s + V.length, l - 1);
-            } else P = t.slice(0, s) + p + t.slice(s + 1), v = s + 1;
-            P !== t && ((0, _reactdom.flushSync)(()=>{
-                c(P);
-            }), v !== s && v <= l - 1 && ((k = a[v]) == null || k.focus()));
+    const L = (s)=>(e)=>{
+            var V;
+            const t = e.target.value;
+            if (t === "") return;
+            const o = r[s];
+            let m = t;
+            !o || o === t ? m = t : o === t[0] ? m = t.slice(1) : o === t[t.length - 1] && (m = t.slice(0, -1));
+            let I = s, T = r;
+            if (m.length >= 2) {
+                const $ = m.slice(0, i - s);
+                T = r.slice(0, s) + $, I = Math.min(s + $.length, i - 1);
+            } else T = r.slice(0, s) + m + r.slice(s + 1), I = s + 1;
+            T !== r && ((0, _reactdom.flushSync)(()=>{
+                p(T);
+            }), I !== s && I <= i - 1 && ((V = l[I]) == null || V.focus()));
         };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
         space: 8,
         children: Array.from({
-            length: l
+            length: i
         }).map((s, e)=>/* @__PURE__ */ {
-            var _t_e;
+            var _r_e;
             return (0, _jsxruntime.jsxs)("div", {
-                className: y ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
+                className: g ? _pinfieldcssmistica.readOnlyField : e === w ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_integerfield.IntegerInput, {
-                        "aria-label": C.pinFieldInputLabel.replace("1$s", String(e + 1)).replace("2$s", String(l)),
-                        type: f ? "password" : "text",
-                        tabIndex: e > t.length ? -1 : void 0,
+                        "aria-label": (S.pinFieldInputLabel || k(_texttokens.pinFieldInputLabel)).replace("1$s", String(e + 1)).replace("2$s", String(i)),
+                        type: n ? "password" : "text",
+                        tabIndex: e > r.length ? -1 : void 0,
                         required: !0,
                         onFocus: ()=>{
                             var o;
-                            const r = t.length === l ? -1 : t.length;
-                            r >= 0 && r < e ? (o = a[r]) == null || o.focus() : I(e);
+                            const t = r.length === i ? -1 : r.length;
+                            t >= 0 && t < e ? (o = l[t]) == null || o.focus() : P(e);
                         },
                         onBlur: ()=>{
-                            I(void 0);
+                            P(void 0);
                         },
-                        inputRef: (r)=>{
-                            a[e] = r, e === 0 && A(r);
+                        inputRef: (t)=>{
+                            l[e] = t, e === 0 && R(t);
                         },
                         className: (0, _classnames.default)(_textfieldbasecssmistica.input, _pinfieldcssmistica.input, {
-                            [_pinfieldcssmistica.passwordInput]: f
+                            [_pinfieldcssmistica.passwordInput]: n
                         }),
                         style: {
                             marginTop: `calc(${_pinfieldcssmistica.pinInputLineHeight} - 1px)`,
@@ -222,36 +223,36 @@ const x = (param)=>{
                             fontSize: _pinfieldcssmistica.pinInputLineHeight,
                             height: _pinfieldcssmistica.pinInputLineHeight
                         },
-                        disabled: g,
-                        readOnly: y,
+                        disabled: h,
+                        readOnly: g,
                         autoComplete: d ? "one-time-code" : void 0,
-                        value: (_t_e = t[e]) !== null && _t_e !== void 0 ? _t_e : "",
-                        onChange: H(e),
-                        onKeyDown: (r)=>{
-                            switch(r.key){
+                        value: (_r_e = r[e]) !== null && _r_e !== void 0 ? _r_e : "",
+                        onChange: L(e),
+                        onKeyDown: (t)=>{
+                            switch(t.key){
                                 case "Backspace":
                                 case "Delete":
-                                    if (r.currentTarget.value && c(t.slice(0, e) + t.slice(e + 1)), e > 0 && e >= t.length - 1) {
-                                        const o = a[e - 1];
+                                    if (t.currentTarget.value && p(r.slice(0, e) + r.slice(e + 1)), e > 0 && e >= r.length - 1) {
+                                        const o = l[e - 1];
                                         o == null || o.focus();
                                     }
                                     break;
                                 case "ArrowLeft":
                                     if (e > 0) {
-                                        const o = a[e - 1];
+                                        const o = l[e - 1];
                                         o && o.focus();
                                     }
                                     break;
                                 case "ArrowRight":
-                                    if (e < l - 1) {
-                                        const o = a[e + 1];
+                                    if (e < i - 1) {
+                                        const o = l[e + 1];
                                         o && o.focus();
                                     }
                                     break;
                             }
                         }
                     }),
-                    f && t[e] && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    n && r[e] && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         "aria-hidden": !0,
                         className: _pinfieldcssmistica.passwordDot,
                         children: "•"
@@ -260,49 +261,49 @@ const x = (param)=>{
             }, e);
         })
     });
-}, ee = (param)=>{
-    let { length: l = 6, hideCode: f = !1, readSms: d = !f, disabled: g, readOnly: y, name: F, value: b, defaultValue: u, helperText: A, error: C, onChangeValue: R, onChange: S, "aria-label": w, "aria-labelledby": I, dataAttributes: a } = param;
-    const i = (0, _formcontext.useFieldProps)({
-        name: F,
+}, te = (param)=>{
+    let { length: i = 6, hideCode: n = !1, readSms: d = !n, disabled: h, readOnly: g, name: y, value: b, defaultValue: f, helperText: R, error: S, onChangeValue: k, onChange: A, "aria-label": F, "aria-labelledby": w, dataAttributes: P } = param;
+    const l = (0, _formcontext.useFieldProps)({
+        name: y,
         value: b,
-        defaultValue: u,
-        processValue: (c)=>c,
-        helperText: A,
+        defaultValue: f,
+        processValue: (r)=>r,
+        helperText: R,
         optional: !1,
-        error: C,
-        disabled: g,
-        onChangeValue: R,
-        onChange: S
-    }), t = (0, _hooks.useAriaId)();
+        error: S,
+        disabled: h,
+        onChangeValue: k,
+        onChange: A
+    }), u = _react.useId();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         role: "group",
-        "aria-labelledby": I !== null && I !== void 0 ? I : t,
+        "aria-labelledby": w !== null && w !== void 0 ? w : u,
         className: (0, _classnames.default)(_pinfieldcssmistica.fieldContainer, {
-            [_pinfieldcssmistica.disabled]: g
+            [_pinfieldcssmistica.disabled]: h
         })
-    }, (0, _dom.getPrefixedDataAttributes)(a, "PinField")), {
+    }, (0, _dom.getPrefixedDataAttributes)(P, "PinField")), {
         children: [
-            w && !I && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+            F && !w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    id: t,
-                    children: w
+                    id: u,
+                    children: F
                 })
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(x, {
-                inputRef: i.inputRef,
-                length: l,
-                hideCode: f,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+                inputRef: l.inputRef,
+                length: i,
+                hideCode: n,
                 readSms: d,
-                value: i.value,
-                defaultValue: i.defaultValue,
-                disabled: i.disabled,
-                onChange: i.onChange,
-                readOnly: y
+                value: l.value,
+                defaultValue: l.defaultValue,
+                disabled: l.disabled,
+                onChange: l.onChange,
+                readOnly: g
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
-                error: i.error,
-                leftText: i.helperText
+                error: l.error,
+                leftText: l.helperText
             })
         ]
     }));
-}, de = ee;
+}, Ie = te;

package/dist/progress-bar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     ProgressBar: function() {
-        return R;
+        return z;
     },
     ProgressBarStepped: function() {
-        return T;
+        return G;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -25,6 +25,7 @@ const _progressbarcssmistica = require("./progress-bar.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -123,16 +124,19 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const R = (param)=>{
-    let { progressPercent: e, color: s, "aria-label": p, "aria-labelledby": n, "aria-hidden": t, dataAttributes: c, reverse: l = !1 } = param;
-    const { texts: m } = (0, _hooks.useTheme)(), a = Math.max(0, Math.min(100, e)), i = t && t !== "false" ? {
+const z = (param)=>{
+    let { progressPercent: r, color: s, "aria-label": b, "aria-labelledby": n, "aria-hidden": t, dataAttributes: c, reverse: l = !1 } = param;
+    const { texts: m, t: d } = (0, _hooks.useTheme)(), e = Math.max(0, Math.min(100, r)), i = t && t !== "false" ? {
         "aria-hidden": t
     } : {
         role: "progressbar",
-        "aria-valuenow": a,
+        "aria-valuenow": e,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": n ? void 0 : (()=>`${p || m.loading}, ${a}% ${m.progressBarCompletedLabel}`)(),
+        "aria-label": n ? void 0 : (()=>{
+            const g = b || m.loading || d(_texttokens.loading), h = m.progressBarCompletedLabel || d(_texttokens.progressBarCompletedLabel);
+            return `${g}, ${e}% ${h}`;
+        })(),
         "aria-labelledby": n
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "ProgressBar")), {
@@ -141,60 +145,60 @@ const R = (param)=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: (0, _classnames.default)(_progressbarcssmistica.bar, l ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
             style: {
-                maxWidth: `${a}%`,
+                maxWidth: `${e}%`,
                 backgroundColor: s !== null && s !== void 0 ? s : _skincontractcssmistica.vars.colors.controlActivated
             }
         })
     }));
-}, T = (param)=>{
-    let { steps: e, currentStep: s = 0, color: p, dataAttributes: n, "aria-label": t, "aria-labelledby": c, "aria-hidden": l } = param;
-    const { texts: m } = (0, _hooks.useTheme)(), [a, g] = _react.useState(Math.ceil(s)), [i, k] = _react.useState(!1);
+}, G = (param)=>{
+    let { steps: r, currentStep: s = 0, color: b, dataAttributes: n, "aria-label": t, "aria-labelledby": c, "aria-hidden": l } = param;
+    const { texts: m, t: d } = (0, _hooks.useTheme)(), [e, f] = _react.useState(Math.ceil(s)), [i, g] = _react.useState(!1);
     _react.useEffect(()=>{
-        const r = Math.ceil(s);
-        a !== r && (k(r < a), g(r));
+        const a = Math.ceil(s);
+        e !== a && (g(a < e), f(a));
     }, [
         s,
-        e,
-        a
+        r,
+        e
     ]);
-    const A = l && l !== "false" ? {
+    const N = l && l !== "false" ? {
         "aria-hidden": l
     } : {
         role: "progressbar",
-        "aria-valuenow": a,
+        "aria-valuenow": e,
         "aria-valuemin": 0,
-        "aria-valuemax": e,
+        "aria-valuemax": r,
         "aria-label": c ? void 0 : (()=>{
-            const r = m.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(e));
-            return t ? `${t}, ${r.toLowerCase()}` : r;
+            const a = (m.progressBarStepLabel || d(_texttokens.progressBarStepLabel)).replace("1$s", String(e)).replace("2$s", String(r));
+            return t ? `${t}, ${a.toLowerCase()}` : a;
         })(),
         "aria-labelledby": c
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(n, "ProgressBarStepped")), {
         role: "progressbar"
-    }), A), {
+    }), N), {
         className: _progressbarcssmistica.progressBarSteppedContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 8,
             fullWidth: !0,
             children: Array.from({
-                length: e
-            }, (r, d)=>{
-                const u = d === a, h = d < a, f = d === a - 1;
+                length: r
+            }, (a, p)=>{
+                const v = p === e, B = p < e, x = p === e - 1;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _progressbarcssmistica.barBackground,
                     "aria-hidden": "true",
-                    children: (h || u) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: (B || v) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_progressbarcssmistica.bar, {
-                            [_progressbarcssmistica.normal]: f && !i,
-                            [_progressbarcssmistica.inverse]: u && i
+                            [_progressbarcssmistica.normal]: x && !i,
+                            [_progressbarcssmistica.inverse]: v && i
                         }),
                         style: {
-                            backgroundColor: p !== null && p !== void 0 ? p : _skincontractcssmistica.vars.colors.controlActivated,
-                            maxWidth: h || f && !i ? "100%" : "0"
+                            backgroundColor: b !== null && b !== void 0 ? b : _skincontractcssmistica.vars.colors.controlActivated,
+                            maxWidth: B || x && !i ? "100%" : "0"
                         }
                     })
-                }, d);
+                }, p);
             })
         })
     }));