@telefonica/mistica 14.24.1 → 14.26.0

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.24.1";
+const o = "14.26.0";
 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/skins/telefonica.js

@@ -128,7 +128,7 @@ const e = {
             warningLow: e.ambar10,
             errorLow: e.coral10,
             promoLow: e.orchid10,
-            brandLow: e.grey1,
+            brandLow: e.telefonicaBlue10,
             successHigh: e.turquoise70,
             warningHigh: e.ambar70,
             errorHigh: e.coral70,
@@ -262,7 +262,7 @@ const e = {
             input: "0px",
             legacyDisplay: "0px",
             popup: "0px",
-            sheet: "8px"
+            sheet: "0px"
         },
         textPresets: {
             cardTitle: {

package/dist-es/skins/vivo-new.js

@@ -147,7 +147,7 @@ const e = {
         },
         darkModeColors: {
             background: e.darkModeBlack,
-            backgroundAlternative: e.darkModeGrey,
+            backgroundAlternative: e.darkModeBlack,
             backgroundBrand: e.darkModeBlack,
             backgroundBrandSecondary: e.darkModeBlack,
             backgroundContainer: e.darkModeGrey,

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

@@ -0,0 +1,10 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./slider.css.ts.vanilla.css-mistica.js";
+var v = "_1j1wlhk1 _1y2v1nfb6 _1y2v1nfbs", r = "_1j1wlhkf _1y2v1nfb1 _1y2v1nfe3 _1y2v1nf45", l = "_1y2v1nfb6 _1y2v1nfb0 _1y2v1nfbt", f = "_1j1wlhk9 _1j1wlhk6 _1y2v1nfe3 _1y2v1nf44", a = {
+    ios: "_1j1wlhkc _1j1wlhkb _1y2v1nfb1",
+    default: "_1j1wlhkd _1j1wlhkb _1y2v1nfb1"
+}, e = {
+    ios: "_1j1wlhk7 _1j1wlhk6 _1y2v1nfe3 _1y2v1nf44",
+    default: "_1j1wlhk8 _1j1wlhk6 _1y2v1nfe3 _1y2v1nf44"
+}, y = "_1j1wlhk2";
+export { v as container, r as progress, l as rangeSlider, f as sliderDisabled, a as sliderThumbVariant, e as sliderVariant, y as targetContainer };

package/dist-es/slider.css.ts.vanilla.css-mistica.js

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

package/dist-es/slider.js

@@ -0,0 +1,117 @@
+import { jsx as c, jsxs as z } from "react/jsx-runtime";
+import * as r from "react";
+import { useTheme as B, useScreenSize as L } from "./hooks.js";
+import { sliderDisabled as W, container as X, targetContainer as _, rangeSlider as q, sliderVariant as F, sliderThumbVariant as G, progress as H } from "./slider.css-mistica.js";
+import V from "classnames";
+import J from "./tooltip.js";
+const K = (param)=>{
+    let { disabled: u , steps: t = 1 , max: a = 100 , min: l = 0 , value: o , onChange: d , getStepArrayIndex: f , "arial-label": A , tooltip: $  } = param;
+    const { isIos: w  } = B(), { isTabletOrSmaller: k  } = L(), [i, g] = r.useState(l), [m, C] = r.useState(l), [b, M] = r.useState(a), [N, O] = r.useState(1), h = r.useRef(null), P = r.useMemo(()=>u ? "0.5" : "1", [
+        u
+    ]), j = 0, p = "50%", v = r.useMemo(()=>u && W, [
+        u
+    ]), y = r.useCallback(function() {
+        let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
+        if (!h.current) return;
+        const s = h.current.getBoundingClientRect(), n = Number(Math.abs(i - m) * 100 / (b - m)), S = 0.2 + (window.innerWidth - s.right) / 100 + (s.left - 0) / 100, x = e ? s.left - 10 - n * S : 10 - n * 0.2;
+        return `calc(${n}% + (${x}px))`;
+    }, [
+        i,
+        m,
+        b
+    ]), T = r.useCallback((e)=>{
+        let s = e;
+        return Array.isArray(t) && (s = t.reduce((n, S)=>Math.abs(S - e) < Math.abs(n - e) ? S : n)), s;
+    }, [
+        t
+    ]), D = r.useCallback(()=>{
+        Array.isArray(t) && t.sort((e, s)=>e - s);
+    }, [
+        t
+    ]), E = (e)=>{
+        g(e);
+    };
+    r.useEffect(()=>{
+        d == null || d(i), f == null || f(i);
+    }, [
+        d,
+        f,
+        i
+    ]), r.useEffect(()=>{
+        if (Array.isArray(t)) {
+            M(t.length - 1);
+            let e = 0;
+            o !== void 0 && (e = t.indexOf(T(o))), g(e);
+        } else {
+            C(l), M(a);
+            let e = l;
+            o !== void 0 && (l > o || o > a) && (e = a < o ? a : l), g(e), O(t);
+        }
+    }, [
+        t,
+        a,
+        l,
+        T,
+        o,
+        N,
+        D
+    ]);
+    const R = ()=>/* @__PURE__ */ c("div", {
+            className: _,
+            children: /* @__PURE__ */ z("div", {
+                ref: h,
+                style: {
+                    opacity: P,
+                    paddingTop: j
+                },
+                className: q,
+                children: [
+                    /* @__PURE__ */ c("input", {
+                        disabled: u,
+                        style: {
+                            top: p
+                        },
+                        className: V(F[w ? "ios" : "default"], v),
+                        "aria-label": "Slider",
+                        type: "range",
+                        min: m,
+                        max: b,
+                        value: i,
+                        step: N,
+                        onChange: (e)=>E(+e.target.value)
+                    }),
+                    /* @__PURE__ */ c("div", {
+                        style: {
+                            left: y(),
+                            top: p
+                        },
+                        className: V(G[w ? "ios" : "default"])
+                    }),
+                    /* @__PURE__ */ c("div", {
+                        className: H,
+                        style: {
+                            width: y(),
+                            top: p
+                        }
+                    })
+                ]
+            })
+        });
+    return /* @__PURE__ */ c("section", {
+        className: X,
+        "aria-label": A,
+        children: $ ? /* @__PURE__ */ c(J, {
+            description: Array.isArray(t) ? t[i].toString() : i.toString(),
+            width: k ? 42 : 45,
+            targetLabel: "",
+            textCenter: !0,
+            unstable_offsetX: y(!0),
+            targetStyle: {
+                width: "100%"
+            },
+            position: "top",
+            target: R()
+        }) : R()
+    });
+}, ee = K;
+export { ee as default };