@telefonica/mistica 14.20.1 → 14.21.0

package/dist-es/feedback.js

@@ -77,104 +77,117 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as f from "react";
-import { useTheme as v, useWindowHeight as ee, useScreenSize as I, useIsomorphicLayoutEffect as $ } from "./hooks.js";
-import { ThemeVariant as oe, useIsInverseVariant as re } from "./theme-variant-context.js";
-import te from "./button-fixed-footer-layout.js";
-import q from "./overscroll-color-context.js";
-import { O2_CLASSIC_SKIN as O, VIVO_SKIN as E } from "./skins/constants.js";
-import L from "./icons/icon-success.js";
-import _ from "./icons/icon-success-vivo.js";
-import ce from "./icons/icon-error.js";
-import ne from "./icons/icon-info.js";
-import { isWebViewBridgeAvailable as ae, requestVibration as se } from "@tef-novum/webview-bridge";
-import { isRunningAcceptanceTest as ie } from "./utils/platform.js";
-import { Text2 as de, Text6 as me, Text3 as le } from "./text.js";
-import B from "./box.js";
-import { Boxed as ue } from "./boxed.js";
-import F from "./responsive-layout.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as S from "react";
+import { useTheme as N, useWindowHeight as se, useScreenSize as x, useIsomorphicLayoutEffect as q } from "./hooks.js";
+import { ThemeVariant as ae, useIsInverseVariant as ie } from "./theme-variant-context.js";
+import de from "./button-fixed-footer-layout.js";
+import L from "./overscroll-color-context.js";
+import { O2_CLASSIC_SKIN as E, VIVO_SKIN as W, VIVO_NEW_SKIN as K } from "./skins/constants.js";
+import R from "./icons/icon-success.js";
+import j from "./icons/icon-success-vivo.js";
+import le from "./icons/icon-error.js";
+import me from "./icons/icon-info.js";
+import { isWebViewBridgeAvailable as ue, requestVibration as pe } from "@tef-novum/webview-bridge";
+import { isRunningAcceptanceTest as be } from "./utils/platform.js";
+import { Text2 as fe, Text6 as he, Text3 as ke } from "./text.js";
+import y from "./box.js";
+import { Boxed as Se } from "./boxed.js";
+import B from "./responsive-layout.js";
 import b from "./stack.js";
-import pe from "classnames";
-import be from "./button-group.js";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { innerContainer as z, feedbackData as fe, feedbackDataAppear as he, feedbackDataAppearActive as ke, desktopContainer as ge, desktopContent as Se, container as Fe } from "./feedback.css-mistica.js";
-const R = (r)=>!ie(r), W = (param)=>{
+import k from "classnames";
+import ge from "./button-group.js";
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { innerContainer as M, iconContainer as ve, feedbackData as Fe, feedbackDataAppear as A, feedbackDataAppearActiveFast as Ie, feedbackDataAppearActiveMedium as _, feedbackDataAppearActiveSlow as Ae, desktopContainer as Be, desktopContent as Ne, container as xe } from "./feedback.css-mistica.js";
+import G from "./icons/icon-success-vivo-new.js";
+const P = (r)=>!be(r), U = (param)=>{
     let { primaryButton: r , secondaryButton: o  } = param;
     return !!r || !!o;
-}, ve = ()=>{
-    const o = `body {background:${re() ? s.colors.backgroundBrand : s.colors.background}}`;
+}, ye = ()=>{
+    const o = `body {background:${ie() ? d.colors.backgroundBrand : d.colors.background}}`;
     return /* @__PURE__ */ e("style", {
         children: o
     });
-}, D = (r)=>{
-    ae() && se(r).catch(()=>{});
-}, j = (r)=>{
-    f.useEffect(()=>{
+}, $ = (r)=>{
+    ue() && pe(r).catch(()=>{});
+}, J = (r)=>{
+    S.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>D("success"), 700)), r === "error" && (o = setTimeout(()=>D("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>$("success"), 700)), r === "error" && (o = setTimeout(()=>$("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
         r
     ]);
-}, K = ()=>{
-    const [r, o] = f.useState(!1);
-    return $(()=>{
+}, Q = ()=>{
+    const [r, o] = S.useState(!1);
+    return q(()=>{
         const t = window.requestAnimationFrame(()=>{
             o(!0);
         });
         return ()=>window.cancelAnimationFrame(t);
     }, []), r;
-}, G = (param, n, i)=>{
-    let { icon: r , title: o , description: t , children: c  } = param;
-    const m = t && Array.isArray(t) ? /* @__PURE__ */ e(b, {
+}, X = (param, n, s)=>{
+    let { icon: r , title: o , description: t , extra: c  } = param;
+    const a = t && Array.isArray(t) ? /* @__PURE__ */ e(b, {
         space: 16,
-        children: t.map((u, l)=>/* @__PURE__ */ e("p", {
-                children: u
-            }, l))
+        children: t.map((m, u)=>/* @__PURE__ */ e("p", {
+                children: m
+            }, u))
     }) : t;
-    return /* @__PURE__ */ d(b, {
+    return /* @__PURE__ */ l(b, {
         space: 24,
         children: [
-            r,
-            /* @__PURE__ */ d(b, {
+            /* @__PURE__ */ e("div", {
+                className: ve,
+                children: r
+            }),
+            /* @__PURE__ */ l(b, {
                 space: 16,
-                className: pe(fe, n && he, n && i && ke),
+                className: k(Fe),
                 children: [
-                    /* @__PURE__ */ e(me, {
-                        as: "h1",
-                        children: o
+                    /* @__PURE__ */ e("div", {
+                        className: k(n && A, n && s && Ie),
+                        children: /* @__PURE__ */ e(he, {
+                            as: "h1",
+                            children: o
+                        })
                     }),
-                    m && /* @__PURE__ */ e(le, {
-                        regular: !0,
-                        color: s.colors.textSecondary,
-                        children: m
+                    /* @__PURE__ */ e("div", {
+                        className: k(n && A, n && s && _),
+                        children: a && /* @__PURE__ */ e(ke, {
+                            regular: !0,
+                            color: d.colors.textSecondary,
+                            children: a
+                        })
                     }),
-                    c
+                    /* @__PURE__ */ e("div", {
+                        className: k(n && A, n && s && (a ? Ae : _)),
+                        children: c
+                    })
                 ]
             })
         ]
     });
-}, M = (r, o)=>{
-    const t = W(o);
-    return /* @__PURE__ */ d(b, {
-        space: 24,
+}, Y = (r, o, t)=>{
+    const c = U(o);
+    return /* @__PURE__ */ l(b, {
+        space: t ? 24 : 40,
         children: [
             r,
-            t && /* @__PURE__ */ e(be, _object_spread({}, o))
+            c && /* @__PURE__ */ e(ge, _object_spread({}, o))
         ]
     });
-}, P = (param)=>/* @__PURE__ */ {
+}, Z = (param)=>/* @__PURE__ */ {
     let { isInverse: r , inlineFeedbackBody: o , imageFit: t , imageUrl: c , dataAttributes: n  } = param;
-    return d(ue, {
-        className: ge,
+    return l(Se, {
+        className: Be,
         isInverse: r,
         dataAttributes: n,
         children: [
             /* @__PURE__ */ e("div", {
-                className: Se,
-                children: /* @__PURE__ */ e(B, {
+                className: Ne,
+                children: /* @__PURE__ */ e(y, {
                     padding: 64,
                     children: o
                 })
@@ -191,92 +204,98 @@ const R = (r)=>!ie(r), W = (param)=>{
             })
         ]
     });
-}, A = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , hapticFeedback: m , icon: u , animateText: l = !1 , isInverse: a = !1 , unstable_inlineInDesktop: h , imageUrl: k , imageFit: g , dataAttributes: x  } = param;
-    j(m);
-    const { platformOverrides: S , isDarkMode: p , skinName: T  } = v(), U = ee(), { isTabletOrSmaller: y  } = I(), [J, Q] = f.useState(typeof self < "u"), [C, X] = f.useState(0), N = J ? "100vh" : `${U - C}px`, V = W({
-        primaryButton: c,
-        secondaryButton: n,
-        link: i
-    }), Y = K();
-    $(()=>{
-        Q(!1);
+}, V = (param)=>{
+    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , hapticFeedback: m , icon: u , animateText: f = !1 , isInverse: i = !1 , unstable_inlineInDesktop: h , imageUrl: g , imageFit: v , dataAttributes: C  } = param;
+    J(m);
+    const { platformOverrides: F , isDarkMode: p , skinName: z  } = N(), ee = se(), { isTabletOrSmaller: I  } = x(), [oe, re] = S.useState(typeof self < "u"), [w, te] = S.useState(0), T = oe ? "100vh" : `${ee - w}px`, D = U({
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }), ce = Q();
+    q(()=>{
+        re(!1);
     }, []);
-    const w = G({
+    const O = X({
         icon: u,
         title: r,
         description: o,
-        children: t
-    }, l && R(S), Y), H = M(w, {
-        primaryButton: c,
-        secondaryButton: n,
-        link: i
-    });
-    if (!y && h) return H;
-    const Z = /* @__PURE__ */ e("div", {
-        className: Fe,
-        children: /* @__PURE__ */ e(F, {
+        extra: c !== null && c !== void 0 ? c : t
+    }, f && P(F), ce), H = Y(O, {
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }, I);
+    if (!I && h) return H;
+    const ne = /* @__PURE__ */ e("div", {
+        className: xe,
+        children: /* @__PURE__ */ e(B, {
             children: /* @__PURE__ */ e("div", {
-                className: z,
-                children: w
+                className: M,
+                children: O
             })
         })
     });
-    return y ? /* @__PURE__ */ d(oe, {
-        isInverse: a,
+    return I ? /* @__PURE__ */ l(ae, {
+        isInverse: i,
         children: [
-            a && /* @__PURE__ */ e(q, {}),
+            i && /* @__PURE__ */ e(L, {}),
             /* @__PURE__ */ e("div", {
                 style: {
                     position: "relative"
                 },
-                children: /* @__PURE__ */ e(te, {
-                    isFooterVisible: V,
-                    button: c,
-                    secondaryButton: n,
-                    link: i,
-                    footerBgColor: a && !p ? s.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: a && !p ? s.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: X,
-                    children: Z
+                children: /* @__PURE__ */ e(de, {
+                    isFooterVisible: D,
+                    button: n,
+                    secondaryButton: s,
+                    link: a,
+                    footerBgColor: i && !p ? d.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: i && !p ? d.colors.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: te,
+                    children: ne
                 })
             }),
-            T === O && /* @__PURE__ */ e("div", {
+            z === E && /* @__PURE__ */ e("div", {
                 style: {
                     position: "absolute",
-                    bottom: C,
+                    bottom: w,
                     top: 0,
                     left: 0,
                     right: 0,
                     // This extra height is a workaround to make sure the background div is displayed *under* the fixed footer.
                     // Otherwise in some devices (Galaxy S20+) the background and the fixed footer are rendered with some distance between them
-                    height: V ? `calc(${N} + 1px)` : `calc(${N})`,
-                    background: a ? s.colors.backgroundBrand : s.colors.background
+                    height: D ? `calc(${T} + 1px)` : `calc(${T})`,
+                    background: i ? d.colors.backgroundBrand : d.colors.background
                 }
             }),
-            T !== O && /* @__PURE__ */ e(ve, {})
+            z !== E && /* @__PURE__ */ e(ye, {})
         ]
-    }) : /* @__PURE__ */ e(F, {
-        children: /* @__PURE__ */ e(B, {
+    }) : /* @__PURE__ */ e(B, {
+        children: /* @__PURE__ */ e(y, {
             paddingTop: 64,
-            children: P({
-                isInverse: a,
+            children: Z({
+                isInverse: i,
                 inlineFeedbackBody: H,
-                imageFit: g,
-                imageUrl: k,
-                dataAttributes: x
+                imageFit: v,
+                imageUrl: g,
+                dataAttributes: C
             })
         })
     });
-}, je = (_param)=>{
+}, Qe = (_param)=>{
     var { dataAttributes: r  } = _param, o = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t  } = I(), { skinName: c  } = v();
-    return /* @__PURE__ */ e(A, _object_spread_props(_object_spread({}, o), {
+    const { isTabletOrSmaller: t  } = x(), { skinName: c  } = N();
+    return /* @__PURE__ */ e(V, _object_spread_props(_object_spread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
         hapticFeedback: "success",
-        icon: c === E ? /* @__PURE__ */ e(_, {}) : /* @__PURE__ */ e(L, {}),
+        icon: c === W ? /* @__PURE__ */ e(j, {
+            size: "100%"
+        }) : c === K ? /* @__PURE__ */ e(G, {
+            size: "100%"
+        }) : /* @__PURE__ */ e(R, {
+            size: "100%"
+        }),
         animateText: !0,
         imageUrl: o.imageUrl,
         imageFit: o.imageFit,
@@ -284,74 +303,88 @@ const R = (r)=>!ie(r), W = (param)=>{
             "component-name": "SuccessFeedbackScreen"
         }, r)
     }));
-}, Ke = (_param)=>/* @__PURE__ */ {
+}, Xe = (_param)=>/* @__PURE__ */ {
     var { children: r , errorReference: o , dataAttributes: t  } = _param, c = _object_without_properties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
     ]);
-    return d(A, _object_spread_props(_object_spread({}, c), {
+    return e(V, _object_spread_props(_object_spread({}, c), {
         hapticFeedback: "error",
-        icon: /* @__PURE__ */ e(ce, {}),
+        icon: /* @__PURE__ */ e(le, {
+            size: "100%"
+        }),
         animateText: !0,
         dataAttributes: _object_spread({
             "component-name": "ErrorFeedbackScreen"
         }, t),
-        children: [
-            r,
-            o && /* @__PURE__ */ e(de, {
-                color: s.colors.textSecondary,
-                regular: !0,
-                children: o
-            })
-        ]
+        extra: /* @__PURE__ */ l(b, {
+            space: 16,
+            children: [
+                r,
+                o && /* @__PURE__ */ e(fe, {
+                    color: d.colors.textSecondary,
+                    regular: !0,
+                    children: o
+                })
+            ]
+        })
     }));
-}, Ge = (_param)=>/* @__PURE__ */ {
-    var { dataAttributes: r  } = _param, o = _object_without_properties(_param, [
-        "dataAttributes"
+}, Ye = (_param)=>/* @__PURE__ */ {
+    var { dataAttributes: r , Icon: o = me  } = _param, t = _object_without_properties(_param, [
+        "dataAttributes",
+        "Icon"
     ]);
-    return e(A, _object_spread({
+    return e(V, _object_spread({
         dataAttributes: _object_spread({
             "component-name": "InfoFeedbackScreen"
         }, r),
-        icon: /* @__PURE__ */ e(ne, {})
-    }, o));
-}, Me = (param)=>{
-    let { title: r , description: o , children: t , primaryButton: c , secondaryButton: n , link: i , imageUrl: m , imageFit: u , dataAttributes: l  } = param;
-    j("success");
-    const { isTabletOrSmaller: a  } = I(), { skinName: h , platformOverrides: k  } = v(), g = K(), S = G({
-        icon: h === E ? /* @__PURE__ */ e(_, {}) : /* @__PURE__ */ e(L, {}),
+        icon: /* @__PURE__ */ e(o, {
+            size: "100%"
+        })
+    }, t));
+}, Ze = (param)=>{
+    let { title: r , description: o , children: t , extra: c , primaryButton: n , secondaryButton: s , link: a , imageUrl: m , imageFit: u , dataAttributes: f  } = param;
+    J("success");
+    const { isTabletOrSmaller: i  } = x(), { skinName: h , platformOverrides: g  } = N(), v = Q(), F = X({
+        icon: h === W ? /* @__PURE__ */ e(j, {
+            size: "100%"
+        }) : h === K ? /* @__PURE__ */ e(G, {
+            size: "100%"
+        }) : /* @__PURE__ */ e(R, {
+            size: "100%"
+        }),
         title: r,
         description: o,
-        children: t
-    }, R(k), g), p = M(S, {
-        primaryButton: c,
-        secondaryButton: n,
-        link: i
-    });
-    return a ? /* @__PURE__ */ d(F, {
+        extra: c !== null && c !== void 0 ? c : t
+    }, P(g), v), p = Y(F, {
+        primaryButton: n,
+        secondaryButton: s,
+        link: a
+    }, i);
+    return i ? /* @__PURE__ */ l(B, {
         isInverse: !0,
         children: [
-            /* @__PURE__ */ e(q, {}),
-            /* @__PURE__ */ e(B, {
+            /* @__PURE__ */ e(L, {}),
+            /* @__PURE__ */ e(y, {
                 paddingBottom: 32,
                 dataAttributes: _object_spread({
                     "component-name": "SuccessFeedback"
-                }, l),
+                }, f),
                 children: /* @__PURE__ */ e("div", {
-                    className: z,
+                    className: M,
                     children: p
                 })
             })
         ]
-    }) : P({
+    }) : Z({
         isInverse: !0,
         inlineFeedbackBody: p,
         imageFit: u,
         imageUrl: m,
         dataAttributes: _object_spread({
             "component-name": "SuccessFeedback"
-        }, l)
+        }, f)
     });
 };
-export { Ke as ErrorFeedbackScreen, A as FeedbackScreen, Ge as InfoFeedbackScreen, Me as SuccessFeedback, je as SuccessFeedbackScreen };
+export { Xe as ErrorFeedbackScreen, V as FeedbackScreen, Ye as InfoFeedbackScreen, Ze as SuccessFeedback, Qe as SuccessFeedbackScreen };

package/dist-es/fixed-footer-layout.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./fixed-footer-layout.css.ts.vanilla.css-mistica.js";
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbr _1y2v1nf30", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbs _1y2v1nf30", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nfb3";
+}, p = "_1y2v1nfb4";
 export { v as container, a as elevated, j as fixedFooter, t as footer, e as vars, p as withoutFooter };

package/dist-es/fixed-footer-layout.js

@@ -53,7 +53,7 @@ function _object_spread_props(target, source) {
 import { jsxs as D, Fragment as L, jsx as c } from "react/jsx-runtime";
 import * as l from "react";
 import O from "classnames";
-import W from "lodash/debounce";
+import { debounce as W } from "./utils/helpers.js";
 import { isRunningAcceptanceTest as k } from "./utils/platform.js";
 import { useScreenSize as z, useTheme as N, useElementDimensions as P, useWindowHeight as $, useScreenHeight as j, useIsomorphicLayoutEffect as _, useIsWithinIFrame as B } from "./hooks.js";
 import { getScrollableParentElement as H, addPassiveEventListener as v, removePassiveEventListener as h, hasScroll as V, getScrollDistanceToBottom as q } from "./utils/dom.js";

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./hero.css.ts.vanilla.css-mistica.js";
-var v = "_16rbpto6 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", a = "_16rbpto2 _1y2v1nfb4", n = "_1y2v1nfbj _1y2v1nfc8", b = "_1y2v1nfba", _ = "_16rbpto7", i = {
+var v = "_16rbpto6 _1y2v1nfb5 _1y2v1nfbr _1y2v1nfbl", n = "_16rbpto2 _1y2v1nfb5", a = "_1y2v1nfbk _1y2v1nfc9", b = "_1y2v1nfbb", _ = "_16rbpto7", i = {
     height: "var(--_16rbpto0)"
 };
-export { v as actions, a as container, n as containerDesktop, b as containerMobile, _ as layout, i as vars };
+export { v as actions, n as container, a as containerDesktop, b as containerMobile, _ as layout, i as vars };

package/dist-es/highlighted-card.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./highlighted-card.css.ts.vanilla.css-mistica.js";
-var y = "wrb8722 _1y2v1nfb4 _1y2v1nfb9 _1y2v1nfbg _1y2v1nfbm", f = "wrb8725 _1y2v1nfb4", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w"
-}, b = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb4 _1y2v1nfbm _1y2v1nfdm _1y2v1nfbr _1y2v1nf5y";
+var y = "wrb8722 _1y2v1nfb5 _1y2v1nfba _1y2v1nfbh _1y2v1nfbn", f = "wrb8725 _1y2v1nfb5", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nfb5 _1y2v1nfbb _1y2v1nfbj _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nfb5 _1y2v1nfbb _1y2v1nfbj _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w"
+}, b = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb5 _1y2v1nfbn _1y2v1nfdn _1y2v1nfbs _1y2v1nf5y";
 export { y as container, f as imageContent, _ as textContainerVariant, b as touchableContainer };

package/dist-es/horizontal-scroll.css-mistica.js

@@ -1,5 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./horizontal-scroll.css.ts.vanilla.css-mistica.js";
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb4";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb5";
 export { m as noScrollbar, v as scroll };

package/dist-es/icon-button.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./icon-button.css.ts.vanilla.css-mistica.js";
-var t = "yqt1oe1 _1y2v1nfb8";
+var t = "yqt1oe1 _1y2v1nfb9";
 export { t as base };