@telefonica/mistica 14.42.0 → 14.43.0

package/dist-es/feedback.js

@@ -79,95 +79,96 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as F from "react";
-import { useTheme as v, useWindowHeight as Q, useScreenSize as H, useIsomorphicLayoutEffect as Y } from "./hooks.js";
+import * as v from "react";
+import { useTheme as F, useWindowHeight as Q, useScreenSize as O, useIsomorphicLayoutEffect as Y } from "./hooks.js";
 import { tabletOrSmaller as Z } from "./media-queries.css-mistica.js";
 import ee from "./button-fixed-footer-layout.js";
 import oe from "./overscroll-color-context.js";
-import { O2_CLASSIC_SKIN as C, VIVO_SKIN as $, VIVO_NEW_SKIN as w } from "./skins/constants.js";
-import E from "./icons/icon-success.js";
-import _ from "./icons/icon-success-vivo.js";
+import { O2_CLASSIC_SKIN as C, VIVO_SKIN as H, VIVO_NEW_SKIN as $ } from "./skins/constants.js";
+import w from "./icons/icon-success.js";
+import E from "./icons/icon-success-vivo.js";
 import re from "./icons/icon-error.js";
 import te from "./icons/icon-info.js";
 import { isWebViewBridgeAvailable as ce, requestVibration as ne } from "@tef-novum/webview-bridge";
 import { isRunningAcceptanceTest as ie } from "./utils/platform.js";
-import { Text2 as se, Text6 as ae, Text3 as de } from "./text.js";
+import { Text2 as ae, Text6 as se, Text3 as de } from "./text.js";
 import b from "./box.js";
 import { InternalBoxed as le } from "./boxed.js";
 import me from "./responsive-layout.js";
-import u from "./stack.js";
-import p from "classnames";
+import p from "./stack.js";
+import u from "classnames";
 import ue from "./button-group.js";
-import { vars as a } from "./skins/skin-contract.css-mistica.js";
-import { container as pe, innerContainer as be, backgroundBrand as fe, iconContainer as ke, feedbackData as he, feedbackTextAppearFast as ge, feedbackTextAppearMedium as V, feedbackTextAppearSlow as Se, desktopContainer as Fe, desktopContent as ve, desktopImage as xe } from "./feedback.css-mistica.js";
-import D from "./icons/icon-success-vivo-new.js";
-const R = (r)=>!ie(r), L = (param)=>{
+import { vars as d } from "./skins/skin-contract.css-mistica.js";
+import { feedbackScreenInverse as pe, container as be, innerContainer as fe, innerContainerWithButtons as he, backgroundBrand as ke, iconContainer as ge, feedbackData as Se, feedbackTextAppearFast as ve, feedbackTextAppearMedium as V, feedbackTextAppearSlow as Fe, desktopContainer as xe, desktopContent as Ie, desktopImage as Ne } from "./feedback.css-mistica.js";
+import _ from "./icons/icon-success-vivo-new.js";
+import { ThemeVariant as Te } from "./theme-variant-context.js";
+const D = (r)=>!ie(r), R = (param)=>{
     let { primaryButton: r, secondaryButton: o } = param;
     return !!r || !!o;
-}, Ie = (param)=>{
+}, Be = (param)=>{
     let { isInverse: r } = param;
     const o = `@media ${Z} {
-        body {background:${r ? a.colors.backgroundBrand : a.colors.background}}
+        body {background:${r ? d.colors.backgroundBrand : d.colors.background}; background-attachment: fixed;}
     }`;
     return /* @__PURE__ */ e("style", {
         children: o
     });
-}, O = (r)=>{
+}, z = (r)=>{
     ce() && ne(r).catch(()=>{});
 }, W = (r)=>{
-    F.useEffect(()=>{
+    v.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>O("success"), 700)), r === "error" && (o = setTimeout(()=>O("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>z("success"), 700)), r === "error" && (o = setTimeout(()=>z("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
         r
     ]);
-}, q = (param, n)=>{
+}, L = (param, n)=>{
     let { icon: r, title: o, description: t, extra: c } = param;
-    const i = t && Array.isArray(t) ? /* @__PURE__ */ e(u, {
+    const i = t && Array.isArray(t) ? /* @__PURE__ */ e(p, {
         space: 16,
-        children: t.map((d, m)=>/* @__PURE__ */ e("p", {
-                children: d
+        children: t.map((s, m)=>/* @__PURE__ */ e("p", {
+                children: s
             }, m))
     }) : t;
-    return /* @__PURE__ */ l(u, {
+    return /* @__PURE__ */ l(p, {
         space: 24,
         children: [
             /* @__PURE__ */ e("div", {
-                className: ke,
+                className: ge,
                 children: r
             }),
-            /* @__PURE__ */ l(u, {
+            /* @__PURE__ */ l(p, {
                 space: 16,
-                className: p(he),
+                className: u(Se),
                 children: [
                     /* @__PURE__ */ e("div", {
-                        className: p(n && ge),
-                        children: /* @__PURE__ */ e(ae, {
+                        className: u(n && ve),
+                        children: /* @__PURE__ */ e(se, {
                             as: "h1",
                             children: o
                         })
                     }),
                     i && /* @__PURE__ */ e("div", {
-                        className: p(n && V),
+                        className: u(n && V),
                         children: i && /* @__PURE__ */ e(de, {
                             regular: !0,
-                            color: a.colors.textSecondary,
+                            color: d.colors.textSecondary,
                             children: i
                         })
                     }),
                     c && /* @__PURE__ */ e("div", {
-                        className: p(n && (i ? Se : V)),
+                        className: u(n && (i ? Fe : V)),
                         children: c
                     })
                 ]
             })
         ]
     });
-}, K = (r, o)=>{
-    const t = L(o);
-    return /* @__PURE__ */ l(u, {
+}, q = (r, o)=>{
+    const t = R(o);
+    return /* @__PURE__ */ l(p, {
         space: {
             desktop: 40,
             mobile: 24
@@ -177,18 +178,18 @@ const R = (r)=>!ie(r), L = (param)=>{
             t && /* @__PURE__ */ e(ue, _object_spread({}, o))
         ]
     });
-}, j = (param)=>{
+}, K = (param)=>{
     let { isInverse: r, body: o, imageFit: t, imageUrl: c, dataAttributes: n } = param;
     return /* @__PURE__ */ e(le, {
-        borderRadius: a.borderRadii.legacyDisplay,
+        borderRadius: d.borderRadii.legacyDisplay,
         desktopOnly: !0,
         isInverse: r,
         dataAttributes: n,
         children: /* @__PURE__ */ l("div", {
-            className: Fe,
+            className: xe,
             children: [
                 /* @__PURE__ */ e("div", {
-                    className: ve,
+                    className: Ie,
                     children: /* @__PURE__ */ e(b, {
                         padding: {
                             desktop: 64,
@@ -199,7 +200,7 @@ const R = (r)=>!ie(r), L = (param)=>{
                     })
                 }),
                 c && /* @__PURE__ */ e("div", {
-                    className: xe,
+                    className: Ne,
                     style: {
                         backgroundImage: `url(${c})`,
                         backgroundPosition: t === "fit" ? "bottom right" : "center right",
@@ -213,53 +214,59 @@ const R = (r)=>!ie(r), L = (param)=>{
         })
     });
 }, x = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, hapticFeedback: m, icon: f, animateText: k = !1, isInverse: s = !1, unstable_inlineInDesktop: h, imageUrl: I, imageFit: g, dataAttributes: S } = param;
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: s, hapticFeedback: m, icon: f, animateText: h = !1, isInverse: a = !1, unstable_inlineInDesktop: k, imageUrl: I, imageFit: g, dataAttributes: S } = param;
     W(m);
-    const { platformOverrides: M, isDarkMode: N, skinName: B } = v(), G = Q(), { isTabletOrSmaller: P } = H(), [U, X] = F.useState(typeof self < "u"), [y, J] = F.useState(0), T = U ? "100vh" : `${G - y}px`, A = L({
+    const { platformOverrides: j, isDarkMode: M, skinName: N } = F(), G = Q(), { isTabletOrSmaller: P } = O(), [U, X] = v.useState(typeof self < "u"), [T, J] = v.useState(0), B = U ? "100vh" : `${G - T}px`, y = R({
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     });
     Y(()=>{
         X(!1);
     }, []);
-    const z = q({
+    const A = L({
         icon: f,
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, k && R(M));
-    return !P && h ? K(z, {
+    }, h && D(j));
+    return !P && k ? q(A, {
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     }) : /* @__PURE__ */ l("div", {
         style: {
             position: "relative"
         },
+        className: a ? pe : void 0,
         children: [
-            s && /* @__PURE__ */ e(oe, {}),
+            a && /* @__PURE__ */ e(Te, {
+                isInverse: !0,
+                children: /* @__PURE__ */ e(oe, {})
+            }),
             /* @__PURE__ */ e(me, {
                 children: /* @__PURE__ */ e(b, {
                     paddingTop: {
                         desktop: 64,
                         mobile: 0
                     },
-                    children: j({
-                        isInverse: s,
+                    children: K({
+                        isInverse: a,
                         body: /* @__PURE__ */ e(ee, {
-                            isFooterVisible: A,
+                            isFooterVisible: y,
                             button: n,
                             secondaryButton: i,
-                            link: d,
-                            footerBgColor: s && !N ? a.colors.backgroundFeedbackBottom : void 0,
-                            containerBgColor: s && !N ? a.colors.backgroundFeedbackBottom : void 0,
+                            link: s,
+                            footerBgColor: a && !M ? d.colors.backgroundFeedbackBottom : void 0,
+                            containerBgColor: "transparent",
                             onChangeFooterHeight: J,
                             children: /* @__PURE__ */ e("div", {
-                                className: pe,
+                                className: be,
                                 children: /* @__PURE__ */ e("div", {
-                                    className: be,
-                                    children: z
+                                    className: u(fe, {
+                                        [he]: n || i || s
+                                    }),
+                                    children: A
                                 })
                             })
                         }),
@@ -269,37 +276,37 @@ const R = (r)=>!ie(r), L = (param)=>{
                     })
                 })
             }),
-            B === C && /* @__PURE__ */ e("div", {
+            N === C && /* @__PURE__ */ e("div", {
                 style: {
                     position: "absolute",
-                    bottom: y,
+                    bottom: T,
                     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: A ? `calc(${T} + 1px)` : `calc(${T})`,
-                    background: s ? a.colors.backgroundBrand : a.colors.background
+                    height: y ? `calc(${B} + 1px)` : `calc(${B})`,
+                    background: a ? d.colors.backgroundBrand : d.colors.background
                 }
             }),
-            B !== C && /* @__PURE__ */ e(Ie, {
-                isInverse: s
+            N !== C && /* @__PURE__ */ e(Be, {
+                isInverse: a
             })
         ]
     });
-}, Ge = (_param)=>{
+}, Je = (_param)=>{
     var { dataAttributes: r } = _param, o = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t } = H(), { skinName: c } = v();
+    const { isTabletOrSmaller: t } = O(), { skinName: c } = F();
     return /* @__PURE__ */ e(x, _object_spread_props(_object_spread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
         hapticFeedback: "success",
-        icon: c === $ ? /* @__PURE__ */ e(_, {
+        icon: c === H ? /* @__PURE__ */ e(E, {
             size: "100%"
-        }) : c === w ? /* @__PURE__ */ e(D, {
+        }) : c === $ ? /* @__PURE__ */ e(_, {
             size: "100%"
-        }) : /* @__PURE__ */ e(E, {
+        }) : /* @__PURE__ */ e(w, {
             size: "100%"
         }),
         animateText: !0,
@@ -309,7 +316,7 @@ const R = (r)=>!ie(r), L = (param)=>{
             "component-name": "SuccessFeedbackScreen"
         }, r)
     }));
-}, Pe = (_param)=>{
+}, Qe = (_param)=>{
     var { children: r, errorReference: o, dataAttributes: t } = _param, c = _object_without_properties(_param, [
         "children",
         "errorReference",
@@ -324,19 +331,19 @@ const R = (r)=>!ie(r), L = (param)=>{
         dataAttributes: _object_spread({
             "component-name": "ErrorFeedbackScreen"
         }, t),
-        extra: /* @__PURE__ */ l(u, {
+        extra: /* @__PURE__ */ l(p, {
             space: 16,
             children: [
                 r,
-                o && /* @__PURE__ */ e(se, {
-                    color: a.colors.textSecondary,
+                o && /* @__PURE__ */ e(ae, {
+                    color: d.colors.textSecondary,
                     regular: !0,
                     children: o
                 })
             ]
         })
     }));
-}, Ue = (_param)=>{
+}, Ye = (_param)=>{
     var { dataAttributes: r, Icon: o = te } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "Icon"
@@ -349,29 +356,29 @@ const R = (r)=>!ie(r), L = (param)=>{
             size: "100%"
         })
     }, t));
-}, Xe = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, imageUrl: m, imageFit: f, dataAttributes: k } = param;
+}, Ze = (param)=>{
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: s, imageUrl: m, imageFit: f, dataAttributes: h } = param;
     W("success");
-    const { skinName: s, platformOverrides: h } = v(), g = q({
-        icon: s === $ ? /* @__PURE__ */ e(_, {
+    const { skinName: a, platformOverrides: k } = F(), g = L({
+        icon: a === H ? /* @__PURE__ */ e(E, {
             size: "100%"
-        }) : s === w ? /* @__PURE__ */ e(D, {
+        }) : a === $ ? /* @__PURE__ */ e(_, {
             size: "100%"
-        }) : /* @__PURE__ */ e(E, {
+        }) : /* @__PURE__ */ e(w, {
             size: "100%"
         }),
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, R(h)), S = K(g, {
+    }, D(k)), S = q(g, {
         primaryButton: n,
         secondaryButton: i,
-        link: d
+        link: s
     });
-    return j({
+    return K({
         isInverse: !0,
         body: /* @__PURE__ */ e("div", {
-            className: fe,
+            className: ke,
             children: /* @__PURE__ */ e(b, {
                 paddingX: {
                     mobile: 16,
@@ -392,7 +399,7 @@ const R = (r)=>!ie(r), L = (param)=>{
         imageUrl: m,
         dataAttributes: _object_spread({
             "component-name": "SuccessFeedback"
-        }, k)
+        }, h)
     });
 };
-export { Pe as ErrorFeedbackScreen, x as FeedbackScreen, Ue as InfoFeedbackScreen, Xe as SuccessFeedback, Ge as SuccessFeedbackScreen };
+export { Qe as ErrorFeedbackScreen, x as FeedbackScreen, Ye as InfoFeedbackScreen, Ze as SuccessFeedback, Je as SuccessFeedbackScreen };