@telefonica/mistica 14.24.1 → 14.26.0

package/dist/pin-field.js

@@ -0,0 +1,269 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return pe;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
+const _textfieldbasecssmistica = require("./text-field-base.css-mistica.js");
+const _pinfieldcssmistica = require("./pin-field.css-mistica.js");
+const _hooks = require("./hooks.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+const _integerfield = require("./integer-field.js");
+const _formcontext = require("./form-context.js");
+const _dom = require("./utils/dom.js");
+const _textfieldcomponents = require("./text-field-components.js");
+const _reactdom = require("react-dom");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+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;
+}
+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  } = (0, _hooks.useTheme)(), [k, A] = _react.useState((_ref = b == null ? void 0 : b.slice(0, a)) !== null && _ref !== void 0 ? _ref : ""), [F, v] = _react.useState(void 0), l = _react.useRef(Array.from({
+        length: a
+    }, ()=>null)).current, f = typeof w < "u", r = f ? w : k, u = _react.useCallback((s)=>{
+        if (s === r) return;
+        f || A(s);
+        const e = l[0];
+        e && (n == null || n((0, _dom.createChangeEvent)(_object_spread({}, e), s)));
+    }, [
+        r,
+        l,
+        f,
+        n
+    ]);
+    _react.useEffect(()=>{
+        u(r.slice(0, a));
+    }, [
+        a,
+        r,
+        u
+    ]), _react.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 && ((0, _reactdom.flushSync)(()=>{
+                u(g);
+            }), I !== s && I <= a - 1 && ((C = l[I]) == null || C.focus()));
+        };
+    var _r_e;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+        space: 8,
+        children: Array.from({
+            length: a
+        }).map((s, e)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: y ? _pinfieldcssmistica.readOnlyField : e === F ? _pinfieldcssmistica.focusedField : _pinfieldcssmistica.field,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_integerfield.IntegerInput, {
+                        "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: (0, _classnames.default)(_textfieldbasecssmistica.input, _textfieldbasecssmistica.inputWithoutLabel, _pinfieldcssmistica.input, {
+                            [_pinfieldcssmistica.passwordInput]: 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__ */ (0, _jsxruntime.jsx)("div", {
+                        "aria-hidden": !0,
+                        className: _pinfieldcssmistica.passwordDot,
+                        children: "•"
+                    })
+                ]
+            }, e))
+    });
+}, Z = (param)=>{
+    let { length: a = 6 , hideCode: c = !1 , readSms: d = !c , 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 = (0, _formcontext.useFieldProps)({
+        name: w,
+        value: b,
+        defaultValue: n,
+        processValue: (r)=>r,
+        helperText: R,
+        optional: !1,
+        error: T,
+        disabled: h,
+        onChangeValue: k,
+        onChange: A
+    }), f = (0, _hooks.useAriaId)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        role: "group",
+        "aria-labelledby": v !== null && v !== void 0 ? v : f,
+        className: h ? _pinfieldcssmistica.disabled : void 0,
+        children: [
+            F && !v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    id: f,
+                    children: F
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(_textfieldcomponents.HelperText, {
+                error: l.error,
+                leftText: l.helperText
+            })
+        ]
+    });
+}, pe = Z;

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

@@ -10,18 +10,21 @@ function _export(target, all) {
 }
 _export(exports, {
     bar: function() {
-        return a;
+        return v;
     },
     barBackground: function() {
         return n;
     },
     inverse: function() {
-        return y;
+        return e;
     },
     normal: function() {
-        return e;
+        return y;
+    },
+    progressBarSteppedContainer: function() {
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./progress-bar.css.ts.vanilla.css-mistica.js");
-var a = "_1y2v1nfca _1y2v1nfe3", n = "_1y2v1nfe3 _1y2v1nfcd _1y2v1nf44", y = "j0y7r95", e = "j0y7r94";
+var v = "_1y2v1nfca _1y2v1nfe3", n = "_1y2v1nfe3 _1y2v1nfcd _1y2v1nf44", e = "j0y7r95", y = "j0y7r94", o = "j0y7r96";

package/dist/progress-bar.css.d.ts

@@ -2,3 +2,4 @@ export declare const barBackground: string;
 export declare const bar: string;
 export declare const normal: string;
 export declare const inverse: string;
+export declare const progressBarSteppedContainer: string;

package/dist/progress-bar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-type Props = {
+type ProgressBarProps = {
     progressPercent: number;
     color?: string;
     children?: void;
@@ -9,5 +9,14 @@ type Props = {
     dataAttributes?: DataAttributes;
     reverse?: boolean;
 };
-declare const ProgressBar: React.FC<Props>;
-export default ProgressBar;
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+type ProgressBarSteppedProps = {
+    steps: number;
+    currentStep?: number;
+    color?: string;
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+export declare const ProgressBarStepped: React.FC<ProgressBarSteppedProps>;
+export {};

package/dist/progress-bar.js

@@ -2,23 +2,72 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return N;
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ProgressBar: function() {
+        return E;
+    },
+    ProgressBarStepped: function() {
+        return R;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _hooks = require("./hooks.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 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"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -71,23 +120,70 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const x = (param)=>{
-    let { progressPercent: a , color: e , "aria-label": l , "aria-labelledby": r , dataAttributes: s , reverse: t = !1  } = param;
-    const { texts: i  } = (0, _hooks.useTheme)(), m = i.loading, n = r ? void 0 : l || m;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(s, "ProgressBar")), {
+const E = (param)=>{
+    let { progressPercent: r , color: o , "aria-label": d , "aria-labelledby": l , dataAttributes: i , reverse: n = !1  } = param;
+    const { texts: c  } = (0, _hooks.useTheme)(), a = Math.max(0, Math.min(100, r)), s = l ? void 0 : (()=>`${d || c.loading}, ${a}% ${c.progressBarCompletedLabel}`)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(i, "ProgressBar")), {
         className: _progressbarcssmistica.barBackground,
         role: "progressbar",
         "aria-valuenow": a,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": n,
-        "aria-labelledby": r,
+        "aria-label": s,
+        "aria-labelledby": l,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: (0, _classnames.default)(_progressbarcssmistica.bar, t ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
+            className: (0, _classnames.default)(_progressbarcssmistica.bar, n ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
             style: {
                 maxWidth: `${a}%`,
-                backgroundColor: e !== null && e !== void 0 ? e : _skincontractcssmistica.vars.colors.controlActivated
+                backgroundColor: o !== null && o !== void 0 ? o : _skincontractcssmistica.vars.colors.controlActivated
             }
         })
     }));
-}, N = x;
+}, R = (param)=>{
+    let { steps: r , currentStep: o = 0 , color: d , dataAttributes: l , "aria-label": i , "aria-labelledby": n  } = param;
+    const { texts: c  } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, y] = _react.useState(!1);
+    _react.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__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(l, "ProgressBarStepped")), {
+        role: "progressbar",
+        "aria-valuenow": a,
+        "aria-valuemin": 0,
+        "aria-valuemax": r,
+        "aria-label": A,
+        "aria-labelledby": n,
+        className: _progressbarcssmistica.progressBarSteppedContainer,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+            space: 8,
+            fullWidth: !0,
+            children: Array.from({
+                length: r
+            }, (e, m)=>{
+                const g = m === a, u = m < a, v = m === a - 1;
+                return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _progressbarcssmistica.barBackground,
+                    "aria-hidden": "true",
+                    children: (u || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(_progressbarcssmistica.bar, {
+                            [_progressbarcssmistica.normal]: v && !s,
+                            [_progressbarcssmistica.inverse]: g && s
+                        }),
+                        style: {
+                            backgroundColor: d !== null && d !== void 0 ? d : _skincontractcssmistica.vars.colors.controlActivated,
+                            maxWidth: u || v && !s ? "100%" : "0"
+                        }
+                    })
+                }, m);
+            })
+        })
+    }));
+};

package/dist/skins/telefonica.js

@@ -146,7 +146,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,
@@ -280,7 +280,7 @@ const e = {
             input: "0px",
             legacyDisplay: "0px",
             popup: "0px",
-            sheet: "8px"
+            sheet: "0px"
         },
         textPresets: {
             cardTitle: {

package/dist/skins/vivo-new.js

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

package/dist/slider.css-mistica.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    container: function() {
+        return v;
+    },
+    progress: function() {
+        return r;
+    },
+    rangeSlider: function() {
+        return l;
+    },
+    sliderDisabled: function() {
+        return f;
+    },
+    sliderThumbVariant: function() {
+        return a;
+    },
+    sliderVariant: function() {
+        return e;
+    },
+    targetContainer: function() {
+        return y;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./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";

package/dist/slider.css.d.ts

@@ -0,0 +1,9 @@
+export declare const container: string;
+export declare const targetContainer: string;
+export declare const rangeSlider: string;
+export declare const sliderBase: string;
+export declare const sliderVariant: Record<"default" | "ios", string>;
+export declare const sliderDisabled: string;
+export declare const sliderThumbBase: string;
+export declare const sliderThumbVariant: Record<"default" | "ios", string>;
+export declare const progress: string;

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

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

package/dist/slider.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface SliderProps {
+    disabled?: boolean;
+    steps?: number | Array<number>;
+    max?: number;
+    min?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    getStepArrayIndex?: (value: number) => void;
+    'arial-label'?: string;
+    tooltip?: boolean;
+}
+declare const Slider: React.FC<SliderProps>;
+export default Slider;