@telefonica/mistica 14.37.0 → 14.38.0

package/dist/inline.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -5,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return k;
+        return N;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,6 +16,8 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _inlinecssmistica = require("./inline.css-mistica.js");
 const _css = require("./utils/css.js");
+const _platform = require("./utils/platform.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -113,21 +116,26 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const j = (param)=>{
-    let { space: r, className: l, children: e, role: o, alignItems: a = "stretch", "aria-labelledby": s, fullWidth: m, wrap: n, dataAttributes: f } = param;
-    const p = m || typeof r == "string";
+const C = (param)=>{
+    let { space: r, className: o, children: s, role: l, alignItems: n = "stretch", "aria-labelledby": m, fullWidth: a, wrap: p, dataAttributes: f } = param;
+    const d = a || typeof r == "string", { platformOverrides: i } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(l, (0, _sprinklescssmistica.sprinkles)({
-            alignItems: a
-        }), n ? _inlinecssmistica.wrap : p ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, typeof r != "number" && _inlinecssmistica.justifyVariants[r]),
+        className: (0, _classnames.default)(o, (0, _sprinklescssmistica.sprinkles)({
+            alignItems: n
+        }), p ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, typeof r != "number" && _inlinecssmistica.justifyVariants[r]),
         style: typeof r == "number" ? (0, _css.applyCssVars)({
             [_inlinecssmistica.vars.space]: `${r}px`
         }) : void 0,
-        role: o,
-        "aria-labelledby": s
-    }, (0, _dom.getPrefixedDataAttributes)(f)), {
-        children: _react.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        role: l,
+        "aria-labelledby": m
+    }, (0, _dom.getPrefixedDataAttributes)(f, "Inline")), {
+        children: _react.Children.map(s, (t)=>t || t === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    // Hack to fix https://jira.tid.es/browse/WEB-1683
+                    // In iOS the inline component sometimes cuts the last line of the content
+                    paddingBottom: (0, _platform.isIos)(i) && !(0, _platform.isRunningAcceptanceTest)(i) ? 1 : void 0
+                },
                 children: t
             }) : null)
     }));
-}, k = j;
+}, N = C;

package/dist/loading-screen.css-mistica.js

@@ -0,0 +1,51 @@
+"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, {
+    inOutAnimationMs: function() {
+        return r;
+    },
+    loadingScreen: function() {
+        return a;
+    },
+    loadingScreenChildren: function() {
+        return v;
+    },
+    loadingScreenText: function() {
+        return f;
+    },
+    loadingScreenTextAnimated: function() {
+        return g;
+    },
+    loadingScreenTextAnimatedOut: function() {
+        return l;
+    },
+    logo: function() {
+        return o;
+    },
+    pulseLogo: function() {
+        return i;
+    },
+    screenBackground: function() {
+        return d;
+    },
+    screenBackgroundAnimated: function() {
+        return t;
+    },
+    screenBackgroundFadeOut: function() {
+        return k;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./loading-screen.css.ts.vanilla.css-mistica.js");
+var r = 500, a = "flke8b1 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgv", v = "_1y2v1nfh2 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgv _1y2v1nfgp", f = "flke8b9 _1y2v1nf6u", g = "flke8bb", l = "flke8bc", o = "flke8bf", i = "flke8be", d = {
+    default: "flke8b4",
+    inverse: "flke8b5"
+}, t = "flke8b3", k = "flke8b6";

package/dist/loading-screen.css.d.ts

@@ -0,0 +1,11 @@
+export declare const loadingScreen: string;
+export declare const inOutAnimationMs = 500;
+export declare const screenBackgroundAnimated: string;
+export declare const screenBackground: Record<"inverse" | "default", string>;
+export declare const screenBackgroundFadeOut: string;
+export declare const loadingScreenChildren: string;
+export declare const loadingScreenText: string;
+export declare const loadingScreenTextAnimated: string;
+export declare const loadingScreenTextAnimatedOut: string;
+export declare const pulseLogo: string;
+export declare const logo: string;

package/dist/loading-screen.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 a;
+    }
+});
+const a = "";

package/dist/loading-screen.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { DataAttributes } from './utils/types';
+type TextProps = ExclusifyUnion<{
+    title?: string;
+    description?: string;
+} | {
+    texts: Array<{
+        title?: string;
+        description?: string;
+        duration?: number;
+    }>;
+}>;
+type LoadingScreenProps = {
+    isInverse?: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+export declare const LoadingScreen: React.ForwardRefExoticComponent<LoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+type BrandLoadingScreenProps = {
+    isLoading?: boolean;
+    onClose?: () => void;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+export declare const BrandLoadingScreen: React.ForwardRefExoticComponent<BrandLoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/loading-screen.js

@@ -0,0 +1,398 @@
+"use client";
+"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, {
+    BrandLoadingScreen: function() {
+        return pe;
+    },
+    LoadingScreen: function() {
+        return he;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _overscrollcolorcontext = /*#__PURE__*/ _interop_require_default(require("./overscroll-color-context.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _text = require("./text.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _loadingscreencssmistica = require("./loading-screen.css-mistica.js");
+const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _logo = require("./logo.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+const _hooks = require("./hooks.js");
+const _constants = require("./skins/constants.js");
+const _dom = require("./utils/dom.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 = {
+        __proto__: null
+    };
+    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;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const L = (param)=>{
+    let { isInverse: e } = param;
+    const r = `body {background:${e ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}`;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+        children: r
+    });
+}, Q = (param)=>{
+    let { animateText: e, isLoading: r, onClose: t, texts: c } = param;
+    const [o, s] = _react.useState(0), [a, l] = _react.useState(!1), u = _react.useCallback(()=>{
+        s((o + 1) % c.length), l(!1);
+    }, [
+        o,
+        c.length
+    ]);
+    _react.useEffect(()=>{
+        if (!r || c.length === 1) return;
+        var _c_o_duration;
+        const h = setTimeout(()=>{
+            e ? l(!0) : u();
+        }, (_c_o_duration = c[o].duration) !== null && _c_o_duration !== void 0 ? _c_o_duration : 5e3);
+        return ()=>{
+            clearTimeout(h);
+        };
+    }, [
+        e,
+        o,
+        a,
+        r,
+        u,
+        c
+    ]);
+    const m = ()=>{
+        if (!r) {
+            t == null || t();
+            return;
+        }
+        a && u();
+    }, { title: d, description: f } = c[o % c.length];
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreenText, {
+                [_loadingscreencssmistica.loadingScreenTextAnimatedOut]: e && (!r || a)
+            }),
+            onTransitionEnd: m,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 8,
+                children: [
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "h1",
+                            children: d
+                        })
+                    }),
+                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        style: {
+                            animationDelay: "200ms"
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "p",
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: f
+                        })
+                    })
+                ]
+            })
+        }, o)
+    });
+}, x = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { isInverse: e, children: r, isLoading: t = !0, animateText: c, animateBackground: o, onClose: s, dataAttributes: a, title: l, description: u, texts: m = [
+        {
+            title: l,
+            description: u
+        }
+    ] } = param;
+    const [f, h] = _react.useState(!1);
+    _react.useEffect(()=>{
+        if (!t) return;
+        const A = setTimeout(()=>{
+            h(!0);
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        t
+    ]);
+    const v = _react.useRef(!1), p = _react.useCallback(()=>{
+        !t && !v.current && (v.current = !0, s == null || s());
+    }, [
+        t,
+        s
+    ]);
+    _react.useEffect(()=>{
+        if (t) return;
+        if (!c && !o) {
+            s == null || s();
+            return;
+        }
+        const A = setTimeout(()=>{
+            p();
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        o,
+        c,
+        p,
+        t,
+        s
+    ]);
+    const b = !r;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        isInverse: e,
+        children: [
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+                ref: d
+            }, (0, _dom.getPrefixedDataAttributes)(a)), {
+                className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreen, _loadingscreencssmistica.screenBackground[e ? "inverse" : "default"], {
+                    [_loadingscreencssmistica.screenBackgroundFadeOut]: !t && o,
+                    [_loadingscreencssmistica.screenBackgroundAnimated]: o
+                }, (0, _sprinklescssmistica.sprinkles)({
+                    justifyContent: b ? "center" : "space-between"
+                })),
+                onAnimationEnd: ()=>{
+                    h(!0);
+                },
+                onTransitionEnd: p,
+                children: [
+                    r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _loadingscreencssmistica.loadingScreenChildren,
+                        children: r
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        delay: "0s",
+                        size: 32,
+                        color: e ? _skincontractcssmistica.vars.colors.inverse : void 0
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+                        animateText: c,
+                        isLoading: t,
+                        texts: m,
+                        onClose: p
+                    }),
+                    !b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            height: 104
+                        }
+                    })
+                ]
+            })),
+            t && f && /* @__PURE__ */ (0, _jsxruntime.jsx)(L, {
+                isInverse: !!e
+            })
+        ]
+    });
+}), he = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+        ref: r
+    }, e), {
+        dataAttributes: _object_spread({
+            "component-name": "LoadingScreen"
+        }, e.dataAttributes),
+        animateBackground: !0
+    }))), U = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { texts: c } = (0, _hooks.useTheme)(), [o, s] = _react.useState(!0), a = ()=>{
+        e || (r == null || r(), s(!1), t == null || t());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(_loadingscreencssmistica.logo, {
+            [_loadingscreencssmistica.pulseLogo]: o
+        }),
+        onAnimationIteration: a,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: c.loading
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+                size: 128
+            })
+        ]
+    });
+}, X = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./vivinho-loading-animation/index.js")))), Y = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { skinName: c } = (0, _hooks.useTheme)();
+    return c === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+            isLoading: e,
+            onCloseStart: r,
+            onCloseEnd: t
+        })
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+        isLoading: e,
+        onCloseStart: r,
+        onCloseEnd: t
+    });
+}, pe = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, c = _object_without_properties(_param, [
+        "isLoading",
+        "onClose",
+        "dataAttributes"
+    ]);
+    const [s, a] = _react.useState(!1), l = _react.useRef(!1), u = _react.useRef(!1), m = ()=>{
+        a(!0);
+    }, d = ()=>{
+        l.current && u.current && (r == null || r());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread_props(_object_spread({
+        ref: o,
+        isInverse: !0
+    }, c), {
+        isLoading: e || !s,
+        onClose: ()=>{
+            u.current = !0, d();
+        },
+        animateText: !0,
+        dataAttributes: _object_spread({
+            "component-name": "BrandLoadingScreen"
+        }, t),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
+            isLoading: e,
+            onCloseStart: m,
+            onCloseEnd: ()=>{
+                l.current = !0, d();
+            }
+        })
+    }));
+});

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "14.37.0";
+const o = "14.38.0";

package/dist/tabs.css.d.ts

@@ -5,6 +5,6 @@ export declare const inner: string;
 export declare const tabsContainer: string;
 export declare const tabVariants: Record<"default" | "fullWidth", string>;
 export declare const tabHover: Record<"inverse" | "default", string>;
-export declare const tabSelectionVariants: Record<"noSelected" | "noSelectedInverse" | "selected" | "selectedInverse" | "selectedAnimating" | "selectedAnimatingInverse", string>;
+export declare const tabSelectionVariants: Record<"selected" | "noSelected" | "noSelectedInverse" | "selectedInverse" | "selectedAnimating" | "selectedAnimatingInverse", string>;
 export declare const icon: string;
 export declare const animatedLine: string;