@telefonica/mistica 14.25.0 → 14.26.1

package/dist-es/overscroll-color-context.js

@@ -1,23 +1,23 @@
-import { jsx as o, Fragment as e, jsxs as m } from "react/jsx-runtime";
-import { useIsInverseVariant as d } from "./theme-variant-context.js";
-import { useTheme as t, useScreenSize as u } from "./hooks.js";
+import { jsx as e, Fragment as n, jsxs as d } from "react/jsx-runtime";
+import { useThemeVariant as m } from "./theme-variant-context.js";
+import { useTheme as s, useScreenSize as u } from "./hooks.js";
 import v from "./nestable-context.js";
-import { isInsideNovumNativeApp as p, getPlatform as f } from "./utils/platform.js";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
-const { Provider: g , Getter: h , useSetValue: b  } = v(""), l = (r)=>f(r) === "ios", T = (param)=>{
+import { isInsideNovumNativeApp as f, getPlatform as h } from "./utils/platform.js";
+import { vars as t } from "./skins/skin-contract.css-mistica.js";
+const { Provider: p , Getter: g , useSetValue: b  } = v(""), l = (r)=>h(r) === "ios", P = (param)=>{
     let { children: r  } = param;
-    const { platformOverrides: n  } = t(), { isTabletOrSmaller: i  } = u(), a = t();
-    return l(n) ? /* @__PURE__ */ o(g, {
-        children: /* @__PURE__ */ o(h, {
-            children: (c)=>/* @__PURE__ */ m(e, {
+    const { platformOverrides: o  } = s(), { isTabletOrSmaller: a  } = u(), i = s();
+    return l(o) ? /* @__PURE__ */ e(p, {
+        children: /* @__PURE__ */ e(g, {
+            children: (c)=>/* @__PURE__ */ d(n, {
                     children: [
-                        i ? /* @__PURE__ */ o("div", {
+                        a ? /* @__PURE__ */ e("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
-                                background: c || s.colors.background,
+                                background: c || t.colors.background,
                                 width: "100%",
-                                height: 500 + (p(n) ? 0 : a.dimensions.headerMobileHeight || 0),
+                                height: 500 + (f(o) ? 0 : i.dimensions.headerMobileHeight || 0),
                                 left: 0,
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
@@ -27,11 +27,23 @@ const { Provider: g , Getter: h , useSetValue: b  } = v(""), l = (r)=>f(r) === "
                     ]
                 })
         })
-    }) : /* @__PURE__ */ o(e, {
+    }) : /* @__PURE__ */ e(n, {
         children: r
     });
+}, C = (r)=>{
+    switch(r){
+        case "default":
+            return t.colors.background;
+        case "alternative":
+            return t.colors.backgroundAlternative;
+        case "inverse":
+            return t.colors.backgroundBrand;
+        default:
+            const o = r;
+            throw new Error(`Invalid variant: ${o}`);
+    }
 }, O = ()=>{
-    const r = d();
-    return b(r ? s.colors.navigationBarBackground : s.colors.background), null;
-}, C = ()=>l(t().platformOverrides) ? /* @__PURE__ */ o(O, {}) : /* @__PURE__ */ o(e, {}), V = C;
-export { T as OverscrollColorProvider, V as default };
+    const r = m();
+    return b(C(r)), null;
+}, k = ()=>l(s().platformOverrides) ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(n, {}), j = k;
+export { P as OverscrollColorProvider, j as default };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "14.25.0";
+const o = "14.26.1";
 export { o as PACKAGE_VERSION };

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

@@ -0,0 +1,5 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./text-field-base.css.ts.vanilla.css-mistica.js";
+import "./pin-field.css.ts.vanilla.css-mistica.js";
+var f = "_3pc6ro0", y = "_1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf31", r = "_3pc6ro2 _1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf31", d = "_3pc6ro4", o = "_3pc6ro7", p = "_1y2v1nf2x", a = "_1y2v1nfe6 _1y2v1nfdn _1y2v1nfb6 _1y2v1nfdw _1y2v1nfb0 _1y2v1nfc5 _1y2v1nfcl _1y2v1nf4m";
+export { f as disabled, y as field, r as focusedField, d as input, o as passwordDot, p as passwordInput, a as readOnlyField };

package/dist-es/pin-field.css.ts.vanilla.css-mistica.js

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

package/dist-es/pin-field.js

@@ -0,0 +1,217 @@
+function _define_property(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 _object_spread(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) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { jsxs as V, jsx as i } from "react/jsx-runtime";
+import D from "classnames";
+import * as m from "react";
+import E from "./inline.js";
+import { input as L, inputWithoutLabel as W } from "./text-field-base.css-mistica.js";
+import { disabled as $, readOnlyField as j, focusedField as B, field as H, input as O, passwordInput as q, passwordDot as K } from "./pin-field.css-mistica.js";
+import { useAriaId as M, useTheme as _ } from "./hooks.js";
+import z from "./screen-reader-only.js";
+import { IntegerInput as G } from "./integer-field.js";
+import { useFieldProps as J } from "./form-context.js";
+import { createChangeEvent as Q } from "./utils/dom.js";
+import { HelperText as U } from "./text-field-components.js";
+import { flushSync as X } from "react-dom";
+let P = !1;
+const Y = (param)=>{
+    let { length: a = 6 , hideCode: c = !1 , readSms: d , disabled: h , readOnly: y , value: w , defaultValue: b , onChange: n , inputRef: R  } = param;
+    var _ref;
+    const { texts: T  } = _(), [k, A] = m.useState((_ref = b == null ? void 0 : b.slice(0, a)) !== null && _ref !== void 0 ? _ref : ""), [F, v] = m.useState(void 0), l = m.useRef(Array.from({
+        length: a
+    }, ()=>null)).current, f = typeof w < "u", r = f ? w : k, u = m.useCallback((s)=>{
+        if (s === r) return;
+        f || A(s);
+        const e = l[0];
+        e && (n == null || n(Q(_object_spread({}, e), s)));
+    }, [
+        r,
+        l,
+        f,
+        n
+    ]);
+    m.useEffect(()=>{
+        u(r.slice(0, a));
+    }, [
+        a,
+        r,
+        u
+    ]), m.useEffect(()=>{
+        if (d && "OTPCredential" in window && !P) {
+            P = !0;
+            const s = new AbortController();
+            return navigator.credentials.get({
+                // @ts-expect-error: otp is not in the types yet
+                otp: {
+                    transport: [
+                        "sms"
+                    ]
+                },
+                signal: s.signal
+            }).then((e)=>{
+                if (e) {
+                    const t = e.code.slice(0, a);
+                    u(t);
+                }
+            }).catch(()=>{}).finally(()=>{
+                P = !1;
+            }), ()=>{
+                P = !1, s.abort();
+            };
+        }
+    }, [
+        u,
+        a,
+        d
+    ]);
+    const N = (s)=>(e)=>{
+            var C;
+            const t = e.target.value;
+            if (t === "") return;
+            const o = r[s];
+            let p = t;
+            !o || o === t ? p = t : o === t[0] ? p = t.slice(1) : o === t[t.length - 1] && (p = t.slice(0, -1));
+            let I = s, g = r;
+            if (p.length >= 2) {
+                const S = p.slice(0, a - s);
+                g = r.slice(0, s) + S, I = Math.min(s + S.length, a - 1);
+            } else g = r.slice(0, s) + p + r.slice(s + 1), I = s + 1;
+            g !== r && (X(()=>{
+                u(g);
+            }), I !== s && I <= a - 1 && ((C = l[I]) == null || C.focus()));
+        };
+    var _r_e;
+    return /* @__PURE__ */ i(E, {
+        space: 8,
+        children: Array.from({
+            length: a
+        }).map((s, e)=>/* @__PURE__ */ V("div", {
+                className: y ? j : e === F ? B : H,
+                children: [
+                    /* @__PURE__ */ i(G, {
+                        "aria-label": T.pinFieldInputLabel.replace("1$s", String(e + 1)).replace("2$s", String(a)),
+                        type: c ? "password" : "text",
+                        tabIndex: e > r.length ? -1 : void 0,
+                        required: !0,
+                        onFocus: ()=>{
+                            var o;
+                            const t = r.length === a ? -1 : r.length;
+                            t >= 0 && t < e ? (o = l[t]) == null || o.focus() : v(e);
+                        },
+                        onBlur: ()=>{
+                            v(void 0);
+                        },
+                        inputRef: (t)=>{
+                            l[e] = t, e === 0 && R(t);
+                        },
+                        className: D(L, W, O, {
+                            [q]: c
+                        }),
+                        disabled: h,
+                        readOnly: y,
+                        autoComplete: d ? "one-time-code" : void 0,
+                        value: (_r_e = r[e]) !== null && _r_e !== void 0 ? _r_e : "",
+                        onChange: N(e),
+                        onKeyDown: (t)=>{
+                            switch(t.key){
+                                case "Backspace":
+                                case "Delete":
+                                    if (t.currentTarget.value && u(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 = l[e - 1];
+                                        o && o.focus();
+                                    }
+                                    break;
+                                case "ArrowRight":
+                                    if (e < a - 1) {
+                                        const o = l[e + 1];
+                                        o && o.focus();
+                                    }
+                                    break;
+                            }
+                        }
+                    }),
+                    c && r[e] && /* @__PURE__ */ i("div", {
+                        "aria-hidden": !0,
+                        className: K,
+                        children: "•"
+                    })
+                ]
+            }, e))
+    });
+}, Z = (param)=>{
+    let { length: a = 6 , hideCode: c = !1 , readSms: d = !c , // by default, don't read sms if the code is hidden (password input type)
+    disabled: h , readOnly: y , name: w , value: b , defaultValue: n , helperText: R , error: T , onChangeValue: k , onChange: A , "aria-label": F , "aria-labelledby": v  } = param;
+    const l = J({
+        name: w,
+        value: b,
+        defaultValue: n,
+        processValue: (r)=>r,
+        helperText: R,
+        optional: !1,
+        error: T,
+        disabled: h,
+        onChangeValue: k,
+        onChange: A
+    }), f = M();
+    return /* @__PURE__ */ V("div", {
+        role: "group",
+        "aria-labelledby": v !== null && v !== void 0 ? v : f,
+        className: h ? $ : void 0,
+        children: [
+            F && !v && /* @__PURE__ */ i(z, {
+                children: /* @__PURE__ */ i("div", {
+                    id: f,
+                    children: F
+                })
+            }),
+            /* @__PURE__ */ i(Y, {
+                inputRef: l.inputRef,
+                length: a,
+                hideCode: c,
+                readSms: d,
+                value: l.value,
+                defaultValue: l.defaultValue,
+                disabled: l.disabled,
+                onChange: l.onChange,
+                readOnly: y
+            }),
+            /* @__PURE__ */ i(U, {
+                error: l.error,
+                leftText: l.helperText
+            })
+        ]
+    });
+}, pe = Z;
+export { pe as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./progress-bar.css.ts.vanilla.css-mistica.js";
-var a = "_1y2v1nfca _1y2v1nfe3", n = "_1y2v1nfe3 _1y2v1nfcd _1y2v1nf44", y = "j0y7r95", e = "j0y7r94";
-export { a as bar, n as barBackground, y as inverse, e as normal };
+var v = "_1y2v1nfca _1y2v1nfe3", n = "_1y2v1nfe3 _1y2v1nfcd _1y2v1nf44", e = "j0y7r95", y = "j0y7r94", o = "j0y7r96";
+export { v as bar, n as barBackground, e as inverse, y as normal, o as progressBarSteppedContainer };

package/dist-es/progress-bar.js

@@ -50,30 +50,79 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as o } from "react/jsx-runtime";
-import { useTheme as c } from "./hooks.js";
-import { vars as d } from "./skins/skin-contract.css-mistica.js";
-import { barBackground as b, bar as f, inverse as u, normal as v } from "./progress-bar.css-mistica.js";
-import { getPrefixedDataAttributes as g } from "./utils/dom.js";
-import p from "classnames";
-const x = (param)=>{
-    let { progressPercent: a , color: e , "aria-label": l , "aria-labelledby": r , dataAttributes: s , reverse: t = !1  } = param;
-    const { texts: i  } = c(), m = i.loading, n = r ? void 0 : l || m;
-    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread({}, g(s, "ProgressBar")), {
-        className: b,
+import { jsx as t } from "react/jsx-runtime";
+import * as b from "react";
+import { useTheme as f } from "./hooks.js";
+import { vars as h } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as B, bar as S, inverse as $, normal as x, progressBarSteppedContainer as N } from "./progress-bar.css-mistica.js";
+import { getPrefixedDataAttributes as C } from "./utils/dom.js";
+import k from "classnames";
+import P from "./inline.js";
+const E = (param)=>{
+    let { progressPercent: r , color: o , "aria-label": d , "aria-labelledby": l , dataAttributes: i , reverse: n = !1  } = param;
+    const { texts: c  } = f(), a = Math.max(0, Math.min(100, r)), s = l ? void 0 : (()=>`${d || c.loading}, ${a}% ${c.progressBarCompletedLabel}`)();
+    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, C(i, "ProgressBar")), {
+        className: B,
         role: "progressbar",
         "aria-valuenow": a,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": n,
-        "aria-labelledby": r,
-        children: /* @__PURE__ */ o("div", {
-            className: p(f, t ? u : v),
+        "aria-label": s,
+        "aria-labelledby": l,
+        children: /* @__PURE__ */ t("div", {
+            className: k(S, n ? $ : x),
             style: {
                 maxWidth: `${a}%`,
-                backgroundColor: e !== null && e !== void 0 ? e : d.colors.controlActivated
+                backgroundColor: o !== null && o !== void 0 ? o : h.colors.controlActivated
             }
         })
     }));
-}, N = x;
-export { N as default };
+}, R = (param)=>{
+    let { steps: r , currentStep: o = 0 , color: d , dataAttributes: l , "aria-label": i , "aria-labelledby": n  } = param;
+    const { texts: c  } = f(), [a, p] = b.useState(Math.ceil(o)), [s, y] = b.useState(!1);
+    b.useEffect(()=>{
+        const e = Math.ceil(o);
+        a !== e && (y(e < a), p(e));
+    }, [
+        o,
+        r,
+        a
+    ]);
+    const A = n ? void 0 : (()=>{
+        const e = c.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(r));
+        return i ? `${i}, ${e.toLowerCase()}` : e;
+    })();
+    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, C(l, "ProgressBarStepped")), {
+        role: "progressbar",
+        "aria-valuenow": a,
+        "aria-valuemin": 0,
+        "aria-valuemax": r,
+        "aria-label": A,
+        "aria-labelledby": n,
+        className: N,
+        children: /* @__PURE__ */ t(P, {
+            space: 8,
+            fullWidth: !0,
+            children: Array.from({
+                length: r
+            }, (e, m)=>{
+                const g = m === a, u = m < a, v = m === a - 1;
+                return /* @__PURE__ */ t("div", {
+                    className: B,
+                    "aria-hidden": "true",
+                    children: (u || g) && /* @__PURE__ */ t("div", {
+                        className: k(S, {
+                            [x]: v && !s,
+                            [$]: g && s
+                        }),
+                        style: {
+                            backgroundColor: d !== null && d !== void 0 ? d : h.colors.controlActivated,
+                            maxWidth: u || v && !s ? "100%" : "0"
+                        }
+                    })
+                }, m);
+            })
+        })
+    }));
+};
+export { E as ProgressBar, R as ProgressBarStepped };

package/dist-es/stepper.js

@@ -50,88 +50,95 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import * as h from "react";
-import c from "classnames";
-import { Text1 as R, Text2 as x } from "./text.js";
-import { useTheme as C, useScreenSize as F, useElementDimensions as P } from "./hooks.js";
-import T from "./icons/icon-success.js";
-import { stepper as k, vars as w, step as D, stepIconNumber as u, iconAnimation as j, number as z, currentNumber as B, textContainer as H, bar as $, barFilled as E, barFilledAnimation as L, barFilledReverseAnimation as M } from "./stepper.css-mistica.js";
-import { pxToRem as O } from "./utils/css.js";
-import { assignInlineVars as V } from "@vanilla-extract/dynamic";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as q } from "./utils/dom.js";
-const G = (param)=>{
-    let { steps: n , currentIndex: t , "aria-label": v , dataAttributes: f  } = param;
-    const { textPresets: g  } = C(), { isDesktopOrBigger: b  } = F(), { height: N , ref: S  } = P(), A = N, l = h.useRef(t), i = l.current > t;
-    return t !== l.current && (l.current = t), /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-        className: k,
-        style: V({
-            [w.stepperMinHeight]: O(40 + A)
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as l from "react";
+import d from "classnames";
+import { Text1 as w, Text2 as C } from "./text.js";
+import { useTheme as F, useScreenSize as P, useElementDimensions as T } from "./hooks.js";
+import B from "./icons/icon-success.js";
+import { stepper as D, vars as I, step as M, stepIconNumber as u, iconAnimation as R, number as $, currentNumber as j, textContainer as z, bar as E, barFilled as H, barFilledAnimation as L, barFilledReverseAnimation as O } from "./stepper.css-mistica.js";
+import { pxToRem as V } from "./utils/css.js";
+import { assignInlineVars as q } from "@vanilla-extract/dynamic";
+import { vars as o } from "./skins/skin-contract.css-mistica.js";
+import { getPrefixedDataAttributes as G } from "./utils/dom.js";
+const J = (param)=>{
+    let { steps: n , currentIndex: m , "aria-label": f , dataAttributes: v  } = param;
+    const { textPresets: g  } = F(), { isDesktopOrBigger: S  } = P(), { height: b , ref: N  } = T(), x = b, [a, A] = l.useState(Math.ceil(m)), [s, y] = l.useState(!1);
+    return l.useEffect(()=>{
+        const i = Math.ceil(m);
+        a !== i && (y(i < a), A(i));
+    }, [
+        m,
+        n,
+        a
+    ]), /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
+        className: D,
+        style: q({
+            [I.stepperMinHeight]: V(40 + x)
         })
-    }, q(f, "Stepper")), {
-        children: n.map((p, a)=>{
-            const r = a === t, y = a === n.length - 1, o = a < t, m = a === t - 1;
-            return /* @__PURE__ */ d(h.Fragment, {
+    }, G(v, "Stepper")), {
+        children: n.map((i, t)=>{
+            const r = t === a, k = t === n.length - 1, c = t < a, p = t === a - 1;
+            return /* @__PURE__ */ h(l.Fragment, {
                 children: [
-                    /* @__PURE__ */ d("div", {
-                        className: D,
+                    /* @__PURE__ */ h("div", {
+                        className: M,
                         role: "progressbar",
-                        "aria-valuenow": r ? a + 1 : void 0,
+                        "aria-valuenow": r ? t + 1 : void 0,
                         "aria-valuemin": 1,
                         "aria-valuemax": n.length,
-                        "aria-valuetext": p,
-                        "aria-label": v,
+                        "aria-valuetext": i,
+                        "aria-label": f,
                         children: [
-                            o ? /* @__PURE__ */ e("div", {
-                                className: c(u, {
-                                    [j]: m && !i
+                            c ? /* @__PURE__ */ e("div", {
+                                className: d(u, {
+                                    [R]: p && !s
                                 }),
                                 "aria-hidden": "true",
-                                children: /* @__PURE__ */ e(T, {
-                                    color: s.colors.controlActivated,
+                                children: /* @__PURE__ */ e(B, {
+                                    color: o.colors.controlActivated,
                                     size: "100%",
-                                    skipAnimation: !m || i
+                                    skipAnimation: !p || s
                                 })
                             }) : /* @__PURE__ */ e("div", {
-                                className: c(u, z, {
-                                    [B]: r || r
+                                className: d(u, $, {
+                                    [j]: r || r
                                 }),
-                                children: /* @__PURE__ */ e(R, {
+                                children: /* @__PURE__ */ e(w, {
                                     as: "span",
                                     weight: g.indicator.weight,
-                                    color: r ? s.colors.textPrimaryInverse : s.colors.textSecondary,
+                                    color: r ? o.colors.textPrimaryInverse : o.colors.textSecondary,
                                     "aria-hidden": "true",
-                                    children: a + 1
+                                    children: t + 1
                                 })
                             }),
-                            b && /* @__PURE__ */ e("div", {
-                                className: H,
-                                ref: S,
+                            S && /* @__PURE__ */ e("div", {
+                                className: z,
+                                ref: N,
                                 "aria-hidden": "true",
-                                children: /* @__PURE__ */ e(x, {
+                                children: /* @__PURE__ */ e(C, {
                                     as: "span",
                                     regular: !0,
-                                    color: o || r ? s.colors.textPrimary : s.colors.textSecondary,
-                                    children: p
+                                    color: c || r ? o.colors.textPrimary : o.colors.textSecondary,
+                                    children: i
                                 })
                             })
                         ]
                     }),
-                    !y && /* @__PURE__ */ e("div", {
-                        className: $,
+                    !k && /* @__PURE__ */ e("div", {
+                        className: E,
                         "aria-hidden": "true",
-                        children: (o || r) && /* @__PURE__ */ e("div", {
-                            className: c({
-                                [E]: i && r || o,
-                                [L]: m && !i,
-                                [M]: r && i
+                        children: (c || r) && /* @__PURE__ */ e("div", {
+                            className: d({
+                                [H]: s && r || c,
+                                [L]: p && !s,
+                                [O]: r && s
                             })
                         })
                     })
                 ]
-            }, a);
+            }, t);
         })
     }));
-}, ee = G;
-export { ee as default };
+}, te = J;
+export { te as default };