@telefonica/mistica 14.37.0 → 14.39.0

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

@@ -1,9 +1,8 @@
 import "./inline.css.ts.vanilla.css-mistica.js";
-var v = "kkfbnv2 kkfbnv1", n = {
-    between: "kkfbnv5",
-    around: "kkfbnv6",
-    evenly: "kkfbnv7"
-}, a = "kkfbnv4 kkfbnv1", f = {
-    space: "var(--kkfbnv0)"
-}, r = "kkfbnv3 kkfbnv1";
-export { v as fullWidth, n as justifyVariants, a as noFullWidth, f as vars, r as wrap };
+var v = "kkfbnv5", a = "kkfbnv7 kkfbnv6", n = "kkfbnv4", r = "kkfbnv9 kkfbnv6", b = {
+    space: "var(--kkfbnv0)",
+    spaceMobile: "var(--kkfbnv1)",
+    spaceTablet: "var(--kkfbnv2)",
+    spaceDesktop: "var(--kkfbnv3)"
+}, f = "kkfbnv8 kkfbnv6";
+export { v as flexInline, a as fullWidth, n as marginInline, r as noFullWidth, b as vars, f as wrap };

package/dist-es/inline.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -50,29 +51,43 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as i } from "react/jsx-runtime";
-import * as d from "react";
-import u from "classnames";
-import { sprinkles as y } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as b } from "./utils/dom.js";
-import { wrap as h, fullWidth as c, noFullWidth as v, justifyVariants as x, vars as W } from "./inline.css-mistica.js";
-import { applyCssVars as g } from "./utils/css.js";
-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";
-    return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
-        className: u(l, y({
-            alignItems: a
-        }), n ? h : p ? c : v, typeof r != "number" && x[r]),
-        style: typeof r == "number" ? g({
-            [W.space]: `${r}px`
-        }) : void 0,
-        role: o,
-        "aria-labelledby": s
-    }, b(f)), {
-        children: d.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
-                children: t
+import { jsx as o } from "react/jsx-runtime";
+import * as y from "react";
+import I from "classnames";
+import { sprinkles as g } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as h } from "./utils/dom.js";
+import { wrap as v, fullWidth as x, noFullWidth as W, flexInline as $, marginInline as k, vars as r } from "./inline.css-mistica.js";
+import { applyCssVars as F } from "./utils/css.js";
+import { isIos as T, isRunningAcceptanceTest as V } from "./utils/platform.js";
+import { useTheme as w } from "./hooks.js";
+const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, A = (t)=>{
+    if (typeof t == "number" || typeof t == "string") return {
+        [r.space]: i(t)
+    };
+    const e = {
+        [r.spaceMobile]: i(t.mobile),
+        [r.spaceDesktop]: i(t.desktop)
+    };
+    return t.tablet && (e[r.spaceTablet] = i(t.tablet)), e;
+}, C = (param)=>{
+    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": f, fullWidth: p, wrap: u, dataAttributes: c } = param;
+    const d = p || typeof t == "string", { platformOverrides: l } = w(), b = typeof t == "string";
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread({
+        className: I(e, g({
+            alignItems: m
+        }), u ? v : d ? x : W, b ? $ : k),
+        style: F(A(t)),
+        role: a,
+        "aria-labelledby": f
+    }, h(c, "Inline")), {
+        children: y.Children.map(s, (n)=>n || n === 0 ? /* @__PURE__ */ o("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: T(l) && !V(l) ? 1 : void 0
+                },
+                children: n
             }) : null)
     }));
-}, k = j;
-export { k as default };
+}, S = C;
+export { S as default };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./loading-bar.css.ts.vanilla.css-mistica.js";
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", g = "_1num3qg8 _1y2v1nfhk", y = "_1num3qg3 _1y2v1nfgc _1y2v1nfjn _1y2v1nfk2 _1y2v1nfkh", t = "_1num3qg6 _1y2v1nfgb _1y2v1nfhk _1y2v1nfh3", i = "_1y2v1nfh3 _1y2v1nfjh _1y2v1nfga _1y2v1nf4i _1y2v1nfhn";
-export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, a as exit, f as exitActive, g as innerProgress, y as portal, t as progress, i as progressContainer };
+var r = "_1num3qg3", _ = "_1num3qga _1y2v1nfhk", f = "_1num3qg2 _1y2v1nfgc _1y2v1nfjn _1y2v1nfk2 _1y2v1nfkh", y = "_1num3qg7 _1y2v1nfgb _1y2v1nfhk _1y2v1nfh3", g = "_1y2v1nfh3 _1y2v1nfjh _1y2v1nfga _1y2v1nf4i _1y2v1nfhn";
+export { r as hidden, _ as innerProgress, f as portal, y as progress, g as progressContainer };

package/dist-es/loading-bar.js

@@ -51,37 +51,27 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as e } from "react/jsx-runtime";
-import { CSSTransition as i } from "react-transition-group";
-import { Portal as n } from "./portal.js";
-import { TRANSITION_DURATION_MS as o, enter as a, enterActive as s, exit as m, exitActive as c, portal as d, progressContainer as l, progress as p, innerProgress as f } from "./loading-bar.css-mistica.js";
-import { getPrefixedDataAttributes as g } from "./utils/dom.js";
-import { isRunningAcceptanceTest as u } from "./utils/platform.js";
-const x = (param)=>/* @__PURE__ */ {
-    let { visible: r, dataAttributes: t } = param;
-    return e(i, {
-        in: r,
-        timeout: u() ? 0 : o,
-        classNames: {
-            enter: a,
-            enterActive: s,
-            exit: m,
-            exitActive: c
-        },
-        unmountOnExit: !0,
-        children: /* @__PURE__ */ e(n, {
-            className: d,
-            children: /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
-                className: l
-            }, g(t, "LoadingBar")), {
-                children: /* @__PURE__ */ e("div", {
-                    className: p,
-                    children: /* @__PURE__ */ e("div", {
-                        className: f
-                    })
+import { jsx as r } from "react/jsx-runtime";
+import { Portal as s } from "./portal.js";
+import { portal as e, hidden as i, progressContainer as t, progress as m, innerProgress as n } from "./loading-bar.css-mistica.js";
+import { getPrefixedDataAttributes as d } from "./utils/dom.js";
+import l from "classnames";
+const c = (param)=>/* @__PURE__ */ {
+    let { visible: a, dataAttributes: o } = param;
+    return r(s, {
+        className: l(e, {
+            [i]: !a
+        }),
+        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({
+            className: t
+        }, d(o, "LoadingBar")), {
+            children: /* @__PURE__ */ r("div", {
+                className: m,
+                children: /* @__PURE__ */ r("div", {
+                    className: n
                 })
-            }))
-        })
+            })
+        }))
     });
-}, B = x;
-export { B as default };
+}, u = c;
+export { u as default };

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

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./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";
+export { r as inOutAnimationMs, a as loadingScreen, v as loadingScreenChildren, f as loadingScreenText, g as loadingScreenTextAnimated, l as loadingScreenTextAnimatedOut, o as logo, i as pulseLogo, d as screenBackground, t as screenBackgroundAnimated, k as screenBackgroundFadeOut };

package/dist-es/loading-screen.css.ts.vanilla.css-mistica.js

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

package/dist-es/loading-screen.js

@@ -0,0 +1,335 @@
+"use client";
+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;
+}
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import * as i from "react";
+import N from "./overscroll-color-context.js";
+import { ThemeVariant as B } from "./theme-variant-context.js";
+import { vars as S } from "./skins/skin-contract.css-mistica.js";
+import E from "./responsive-layout.js";
+import { Text4 as I, Text2 as O } from "./text.js";
+import w from "./stack.js";
+import { inOutAnimationMs as k, loadingScreen as V, screenBackground as j, screenBackgroundFadeOut as z, screenBackgroundAnimated as D, loadingScreenChildren as P, loadingScreenText as _, loadingScreenTextAnimatedOut as F, loadingScreenTextAnimated as y, logo as K, pulseLogo as M } from "./loading-screen.css-mistica.js";
+import W from "./spinner.js";
+import T from "classnames";
+import { sprinkles as $ } from "./sprinkles.css-mistica.js";
+import { Logo as q } from "./logo.js";
+import G from "./screen-reader-only.js";
+import { useTheme as R } from "./hooks.js";
+import { VIVO_NEW_SKIN as H } from "./skins/constants.js";
+import { getPrefixedDataAttributes as J } from "./utils/dom.js";
+const L = (param)=>{
+    let { isInverse: e } = param;
+    const r = `body {background:${e ? S.colors.backgroundBrand : S.colors.background}}`;
+    return /* @__PURE__ */ n("style", {
+        children: r
+    });
+}, Q = (param)=>{
+    let { animateText: e, isLoading: r, onClose: t, texts: c } = param;
+    const [o, s] = i.useState(0), [a, l] = i.useState(!1), u = i.useCallback(()=>{
+        s((o + 1) % c.length), l(!1);
+    }, [
+        o,
+        c.length
+    ]);
+    i.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__ */ n(E, {
+        children: /* @__PURE__ */ n("div", {
+            className: T(_, {
+                [F]: e && (!r || a)
+            }),
+            onTransitionEnd: m,
+            children: /* @__PURE__ */ g(w, {
+                space: 8,
+                children: [
+                    d && /* @__PURE__ */ n("div", {
+                        className: e ? y : void 0,
+                        children: /* @__PURE__ */ n(I, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "h1",
+                            children: d
+                        })
+                    }),
+                    f && /* @__PURE__ */ n("div", {
+                        className: e ? y : void 0,
+                        style: {
+                            animationDelay: "200ms"
+                        },
+                        children: /* @__PURE__ */ n(O, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "p",
+                            color: S.colors.textSecondary,
+                            children: f
+                        })
+                    })
+                ]
+            })
+        }, o)
+    });
+}, x = /*#__PURE__*/ i.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] = i.useState(!1);
+    i.useEffect(()=>{
+        if (!t) return;
+        const A = setTimeout(()=>{
+            h(!0);
+        }, k);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        t
+    ]);
+    const v = i.useRef(!1), p = i.useCallback(()=>{
+        !t && !v.current && (v.current = !0, s == null || s());
+    }, [
+        t,
+        s
+    ]);
+    i.useEffect(()=>{
+        if (t) return;
+        if (!c && !o) {
+            s == null || s();
+            return;
+        }
+        const A = setTimeout(()=>{
+            p();
+        }, k);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        o,
+        c,
+        p,
+        t,
+        s
+    ]);
+    const b = !r;
+    return /* @__PURE__ */ g(B, {
+        isInverse: e,
+        children: [
+            e && /* @__PURE__ */ n(N, {}),
+            /* @__PURE__ */ g("div", _object_spread_props(_object_spread({
+                ref: d
+            }, J(a)), {
+                className: T(V, j[e ? "inverse" : "default"], {
+                    [z]: !t && o,
+                    [D]: o
+                }, $({
+                    justifyContent: b ? "center" : "space-between"
+                })),
+                onAnimationEnd: ()=>{
+                    h(!0);
+                },
+                onTransitionEnd: p,
+                children: [
+                    r ? /* @__PURE__ */ n("div", {
+                        className: P,
+                        children: r
+                    }) : /* @__PURE__ */ n(W, {
+                        delay: "0s",
+                        size: 32,
+                        color: e ? S.colors.inverse : void 0
+                    }),
+                    /* @__PURE__ */ n(Q, {
+                        animateText: c,
+                        isLoading: t,
+                        texts: m,
+                        onClose: p
+                    }),
+                    !b && /* @__PURE__ */ n("div", {
+                        style: {
+                            height: 104
+                        }
+                    })
+                ]
+            })),
+            t && f && /* @__PURE__ */ n(L, {
+                isInverse: !!e
+            })
+        ]
+    });
+}), he = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ n(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 } = R(), [o, s] = i.useState(!0), a = ()=>{
+        e || (r == null || r(), s(!1), t == null || t());
+    };
+    return /* @__PURE__ */ g("div", {
+        className: T(K, {
+            [M]: o
+        }),
+        onAnimationIteration: a,
+        children: [
+            /* @__PURE__ */ n(G, {
+                children: /* @__PURE__ */ n("div", {
+                    children: c.loading
+                })
+            }),
+            /* @__PURE__ */ n(q, {
+                size: 128
+            })
+        ]
+    });
+}, X = /*#__PURE__*/ i.lazy(()=>import("./vivinho-loading-animation/index.js")), Y = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { skinName: c } = R();
+    return c === H ? /* @__PURE__ */ n(i.Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ n(X, {
+            isLoading: e,
+            onCloseStart: r,
+            onCloseEnd: t
+        })
+    }) : /* @__PURE__ */ n(U, {
+        isLoading: e,
+        onCloseStart: r,
+        onCloseEnd: t
+    });
+}, pe = /*#__PURE__*/ i.forwardRef((_param, o)=>{
+    var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, c = _object_without_properties(_param, [
+        "isLoading",
+        "onClose",
+        "dataAttributes"
+    ]);
+    const [s, a] = i.useState(!1), l = i.useRef(!1), u = i.useRef(!1), m = ()=>{
+        a(!0);
+    }, d = ()=>{
+        l.current && u.current && (r == null || r());
+    };
+    return /* @__PURE__ */ n(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__ */ n(Y, {
+            isLoading: e,
+            onCloseStart: m,
+            onCloseEnd: ()=>{
+                l.current = !0, d();
+            }
+        })
+    }));
+});
+export { pe as BrandLoadingScreen, he as LoadingScreen };

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

@@ -1,3 +1,8 @@
 import "./logo.css.ts.vanilla.css-mistica.js";
-var r = "_140ft6x0";
-export { r as logoContainer };
+var t = "_140ft6x5", a = "_140ft6x4", e = {
+    size: "var(--_140ft6x0)",
+    sizeMobile: "var(--_140ft6x1)",
+    sizeTablet: "var(--_140ft6x2)",
+    sizeDesktop: "var(--_140ft6x3)"
+};
+export { t as logoContainer, a as svg, e as vars };