@telefonica/mistica 12.9.1 → 12.11.0

package/dist-es/feedback.js

@@ -127,132 +127,48 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-import * as v from "react";
-import { createUseStyles as te } from "./jss.js";
-import { useTheme as k, useWindowHeight as ne, useScreenSize as A, useIsomorphicLayoutEffect as z } from "./hooks.js";
-import { useIsInverseVariant as W, ThemeVariant as E } from "./theme-variant-context.js";
-import ce from "./button-fixed-footer-layout.js";
+import * as b from "react";
+import { useTheme as f, useWindowHeight as oe, useScreenSize as B, useIsomorphicLayoutEffect as $ } from "./hooks.js";
+import { useIsInverseVariant as q, ThemeVariant as E } from "./theme-variant-context.js";
+import te from "./button-fixed-footer-layout.js";
 import L from "./overscroll-color-context.js";
-import { O2_CLASSIC_SKIN as q, VIVO_SKIN as R } from "./skins/constants.js";
-import _ from "./icons/icon-success.js";
-import j from "./icons/icon-success-vivo.js";
-import ae from "./icons/icon-error.js";
-import ie from "./icons/icon-info.js";
-import { isWebViewBridgeAvailable as se, requestVibration as de } from "@tef-novum/webview-bridge";
-import { isOldChrome as le, isRunningAcceptanceTest as me } from "./utils/platform.js";
-import { Text2 as ue, Text6 as pe, Text3 as be } from "./text.js";
-import C from "./box.js";
-import { Boxed as fe } from "./boxed.js";
-import B from "./responsive-layout.js";
-import y from "./stack.js";
-import ke from "classnames";
+import { O2_CLASSIC_SKIN as O, VIVO_SKIN as _ } from "./skins/constants.js";
+import z from "./icons/icon-success.js";
+import R from "./icons/icon-success-vivo.js";
+import ne from "./icons/icon-error.js";
+import ce from "./icons/icon-info.js";
+import { isWebViewBridgeAvailable as se, requestVibration as ie } from "@tef-novum/webview-bridge";
+import { isOldChrome as ae, isRunningAcceptanceTest as de } from "./utils/platform.js";
+import { Text2 as le, Text6 as me, Text3 as ue } from "./text.js";
+import x from "./box.js";
+import { Boxed as pe } from "./boxed.js";
+import F from "./responsive-layout.js";
+import h from "./stack.js";
+import fe from "classnames";
 import he from "./button-group.js";
-import { jsx as r, jsxs as m, Fragment as ge } from "./_virtual/jsx-runtime.js";
-var P = function(e) {
-    return !le(e) && !me(e);
-}, T = function(param) {
+import { vars as l } from "./skins/skin-contract.css-mistica.js";
+import { innerContainer as W, feedbackData as be, feedbackDataAppear as ke, feedbackDataAppearActive as ge, desktopContainer as Se, desktopContent as ve, container as Ie } from "./feedback.css-mistica.js";
+import { sprinkles as Fe } from "./sprinkles.css-mistica.js";
+import { jsxs as i, Fragment as Be, jsx as r } from "./_virtual/jsx-runtime.js";
+var j = function(e) {
+    return !ae(e) && !de(e);
+}, K = function(param) {
     var e = param.primaryButton, o = param.secondaryButton;
     return !!e || !!o;
-}, K = te(function(e) {
-    return {
-        background: {
-            background: function(param) {
-                var o = param.isInverse;
-                return o ? e.colors.backgroundBrand : "initial";
-            }
-        },
-        desktopBoxed: {
-            borderRadius: 16
-        },
-        desktopContainer: {
-            display: "flex",
-            justifyContent: "space-between"
-        },
-        desktopContent: _defineProperty({}, e.mq.desktopOrBigger, {
-            width: "50%"
-        }),
-        desktopImage: {
-            backgroundImage: function(param) {
-                var o = param.imageUrl;
-                return "url(".concat(o, ")");
-            },
-            backgroundPosition: function(param) {
-                var o = param.imageFit;
-                return o === "fit" ? "bottom right" : "center right";
-            },
-            backgroundRepeat: "no-repeat",
-            backgroundSize: function(param) {
-                var o = param.imageFit;
-                return o === "fit" ? "contain" : "cover";
-            },
-            flex: 1,
-            maxWidth: 600
-        },
-        container: {
-            display: "flex",
-            height: "100%",
-            width: "100%",
-            margin: "auto",
-            "& *": {
-                zIndex: 1
-            }
-        },
-        backgroundDiv: {
-            position: "absolute",
-            bottom: function(param) {
-                var o = param.footerHeight;
-                return o;
-            },
-            top: 0,
-            left: 0,
-            right: 0,
-            height: function(param) {
-                var o = param.contentHeight, t = param.hasButtons;
-                return t ? "calc(".concat(o, " + 1px)") : "calc(".concat(o, ")");
-            },
-            background: function(param) {
-                var o = param.isInverse;
-                return o ? e.colors.backgroundBrand : e.colors.background;
-            }
-        },
-        innerContainer: {
-            textAlign: "left",
-            padding: "64px 8px 16px"
-        },
-        feedbackData: {
-            "& p:not(:first-child)": {
-                marginTop: 16
-            },
-            maxWidth: 496,
-            overflowWrap: "break-word"
-        },
-        feedbackDataAppear: {
-            opacity: 0,
-            transform: "translate(0, 20px)"
-        },
-        feedbackDataAppearActive: {
-            transitionProperty: "opacity, transform",
-            transitionDuration: "0.8s",
-            transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-            transitionDelay: "0.6s",
-            opacity: 1,
-            transform: "translate(0, 0)"
-        }
-    };
-}), ve = function() {
-    var ref = k(), e = ref.colors, t = "body {background:".concat(W() ? e.backgroundBrand : e.background, "}");
+}, xe = function() {
+    var ref = f(), e = ref.colors, t = "body {background:".concat(q() ? e.backgroundBrand : e.background, "}");
     return /* @__PURE__ */ r("style", {
         children: t
     });
-}, $ = function(e) {
-    se() && de(e).catch(function() {});
+}, D = function(e) {
+    se() && ie(e).catch(function() {});
 }, G = function(e) {
-    v.useEffect(function() {
+    b.useEffect(function() {
         var o;
         return e === "success" && (o = setTimeout(function() {
-            return $("success");
+            return D("success");
         }, 700)), e === "error" && (o = setTimeout(function() {
-            return $("error");
+            return D("error");
         }, 1e3)), function() {
             clearTimeout(o);
         };
@@ -260,8 +176,8 @@ var P = function(e) {
         e
     ]);
 }, M = function() {
-    var ref = _slicedToArray(v.useState(!1), 2), e = ref[0], o = ref[1];
-    return z(function() {
+    var ref = _slicedToArray(b.useState(!1), 2), e = ref[0], o = ref[1];
+    return $(function() {
         var t = window.requestAnimationFrame(function() {
             o(!0);
         });
@@ -269,221 +185,218 @@ var P = function(e) {
             return window.cancelAnimationFrame(t);
         };
     }, []), e;
-}, U = function(param, c, a, i, p) {
+}, P = function(param, c, s) {
     var e = param.icon, o = param.title, t = param.description, n = param.children;
-    var d = t && Array.isArray(t) ? t.map(function(b, u) {
-        return /* @__PURE__ */ r("p", {
-            children: b
-        }, u);
+    var a = t && Array.isArray(t) ? /* @__PURE__ */ r(h, {
+        space: 16,
+        children: t.map(function(m, u) {
+            return /* @__PURE__ */ r("p", {
+                children: m
+            }, u);
+        })
     }) : t;
-    return /* @__PURE__ */ m(y, {
+    return /* @__PURE__ */ i(h, {
         space: 24,
         children: [
             e,
-            /* @__PURE__ */ m(y, {
+            /* @__PURE__ */ i(h, {
                 space: 16,
-                className: ke(i.feedbackData, c && i.feedbackDataAppear, c && a && i.feedbackDataAppearActive),
+                className: fe(be, c && ke, c && s && ge),
                 children: [
-                    /* @__PURE__ */ r(pe, {
+                    /* @__PURE__ */ r(me, {
                         as: "h1",
                         children: o
                     }),
-                    d && /* @__PURE__ */ r(be, {
+                    a && /* @__PURE__ */ r(ue, {
                         regular: !0,
-                        color: p.textSecondary,
-                        children: d
+                        color: l.colors.textSecondary,
+                        children: a
                     }),
                     n
                 ]
             })
         ]
     });
-}, J = function(e, o) {
-    var t = T(o);
-    return /* @__PURE__ */ m(y, {
+}, U = function(e, o) {
+    var t = K(o);
+    return /* @__PURE__ */ i(h, {
         space: 24,
         children: [
             e,
             t && /* @__PURE__ */ r(he, _objectSpread({}, o))
         ]
     });
-}, Q = function(param) {
-    var e = param.isInverse, o = param.inlineFeedbackBody, t = param.classes, n = param.imageUrl, c = param.dataAttributes;
-    return /* @__PURE__ */ r(fe, {
-        className: t.desktopBoxed,
+}, J = function(param) {
+    var e = param.isInverse, o = param.inlineFeedbackBody, t = param.imageFit, n = param.imageUrl, c = param.dataAttributes;
+    return /* @__PURE__ */ i(pe, {
+        className: Se,
         isInverse: e,
         dataAttributes: c,
-        children: /* @__PURE__ */ m("div", {
-            className: t.desktopContainer,
-            children: [
-                /* @__PURE__ */ r("div", {
-                    className: t.desktopContent,
-                    children: /* @__PURE__ */ r(C, {
-                        padding: 64,
-                        children: o
-                    })
-                }),
-                n && /* @__PURE__ */ r("div", {
-                    className: t.desktopImage
+        children: [
+            /* @__PURE__ */ r("div", {
+                className: ve,
+                children: /* @__PURE__ */ r(x, {
+                    padding: 64,
+                    children: o
                 })
-            ]
-        })
+            }),
+            n && /* @__PURE__ */ r("div", {
+                style: {
+                    backgroundImage: "url(".concat(n, ")"),
+                    backgroundPosition: t === "fit" ? "bottom right" : "center right",
+                    backgroundRepeat: "no-repeat",
+                    backgroundSize: t === "fit" ? "contain" : "cover",
+                    flex: 1,
+                    maxWidth: 600
+                }
+            })
+        ]
     });
-}, N = function(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, a = param.link, i = param.hapticFeedback, p = param.icon, tmp = param.animateText, d = tmp === void 0 ? !1 : tmp, b = param.unstable_inlineInDesktop, u = param.imageUrl, S = param.imageFit, I = param.dataAttributes;
-    G(i);
-    var l = W(), ref = k(), s = ref.colors, x = ref.platformOverrides, F = ref.isDarkMode, h = ref.skinName, g = ne(), ref1 = A(), D = ref1.isTabletOrSmaller, ref2 = _slicedToArray(v.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(v.useState(0), 2), w = ref3[0], Z = ref3[1], ee = "".concat(g - w, "px"), V = T({
+}, T = function(param) {
+    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, a = param.hapticFeedback, m = param.icon, tmp = param.animateText, u = tmp === void 0 ? !1 : tmp, k = param.unstable_inlineInDesktop, g = param.imageUrl, S = param.imageFit, v = param.dataAttributes;
+    G(a);
+    var d = q(), ref = f(), I = ref.platformOverrides, p = ref.isDarkMode, y = ref.skinName, Q = oe(), ref1 = B(), A = ref1.isTabletOrSmaller, ref2 = _slicedToArray(b.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(b.useState(0), 2), C = ref3[0], Z = ref3[1], N = X ? "100vh" : "".concat(Q - C, "px"), V = K({
         primaryButton: n,
         secondaryButton: c,
-        link: a
-    }), f = K({
-        isInverse: l,
-        contentHeight: X ? "100vh" : ee,
-        footerHeight: w,
-        animateText: d,
-        primaryButton: n,
-        imageUrl: u,
-        imageFit: S,
-        hasButtons: V
-    }), oe = M();
-    z(function() {
+        link: s
+    }), ee = M();
+    $(function() {
         Y(!1);
     }, []);
-    var O = U({
-        icon: p,
+    var w = P({
+        icon: m,
         title: e,
         description: o,
         children: t
-    }, d && P(x), oe, f, s), H = J(O, {
+    }, u && j(I), ee), H = U(w, {
         primaryButton: n,
         secondaryButton: c,
-        link: a
+        link: s
     });
-    if (!D && b) return H;
+    if (!A && k) return H;
     var re = /* @__PURE__ */ r("div", {
-        className: f.container,
-        children: /* @__PURE__ */ r(B, {
+        className: Ie,
+        children: /* @__PURE__ */ r(F, {
             children: /* @__PURE__ */ r("div", {
-                className: f.innerContainer,
-                children: O
+                className: W,
+                children: w
             })
         })
     });
-    return D ? /* @__PURE__ */ m(ge, {
+    return A ? /* @__PURE__ */ i(Be, {
         children: [
-            l && /* @__PURE__ */ r(L, {}),
+            d && /* @__PURE__ */ r(L, {}),
             /* @__PURE__ */ r("div", {
                 style: {
                     position: "relative"
                 },
-                children: /* @__PURE__ */ r(ce, {
+                children: /* @__PURE__ */ r(te, {
                     isFooterVisible: V,
                     button: n,
                     secondaryButton: c,
-                    link: a,
-                    footerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
-                    containerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
+                    link: s,
+                    footerBgColor: d && !p ? l.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: d && !p ? l.colors.backgroundFeedbackBottom : void 0,
                     onChangeFooterHeight: Z,
                     children: re
                 })
             }),
-            h === q && /* @__PURE__ */ r("div", {
-                className: f.backgroundDiv
+            y === O && /* @__PURE__ */ r("div", {
+                style: {
+                    position: "absolute",
+                    bottom: C,
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: V ? "calc(".concat(N, " + 1px)") : "calc(".concat(N, ")"),
+                    background: d ? l.colors.backgroundBrand : l.colors.background
+                }
             }),
-            h !== q && /* @__PURE__ */ r(ve, {})
+            y !== O && /* @__PURE__ */ r(xe, {})
         ]
-    }) : /* @__PURE__ */ r(B, {
-        children: /* @__PURE__ */ r(C, {
+    }) : /* @__PURE__ */ r(F, {
+        children: /* @__PURE__ */ r(x, {
             paddingTop: 64,
-            children: Q({
-                isInverse: l,
+            children: J({
+                isInverse: d,
                 inlineFeedbackBody: H,
-                classes: f,
-                imageUrl: u,
-                dataAttributes: I
+                imageFit: S,
+                imageUrl: g,
+                dataAttributes: v
             })
         })
     });
-}, Le = function(e) {
-    var ref = A(), o = ref.isTabletOrSmaller, ref1 = k(), t = ref1.skinName;
+}, Pe = function(e) {
+    var ref = B(), o = ref.isTabletOrSmaller, ref1 = f(), t = ref1.skinName;
     return /* @__PURE__ */ r(E, {
         isInverse: !e.unstable_inlineInDesktop || o,
-        children: /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
+        children: /* @__PURE__ */ r(T, _objectSpreadProps(_objectSpread({}, e), {
             hapticFeedback: "success",
-            icon: t === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
+            icon: t === _ ? /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ r(z, {}),
             animateText: !0,
             imageUrl: e.imageUrl,
             imageFit: e.imageFit
         }))
     });
-}, Re = function(_param) {
+}, Ue = function(_param) {
     var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
         "children",
         "errorReference"
     ]);
-    var ref = k(), n = ref.colors;
-    return /* @__PURE__ */ m(N, _objectSpreadProps(_objectSpread({}, t), {
+    var ref = f(), n = ref.colors;
+    return /* @__PURE__ */ i(T, _objectSpreadProps(_objectSpread({}, t), {
         hapticFeedback: "error",
-        icon: /* @__PURE__ */ r(ae, {}),
+        icon: /* @__PURE__ */ r(ne, {}),
         animateText: !0,
         children: [
             e,
-            o && /* @__PURE__ */ r(ue, {
+            o && /* @__PURE__ */ r(le, {
                 color: n.textSecondary,
                 regular: !0,
                 children: o
             })
         ]
     }));
-}, _e = function(e) {
-    return /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
-        icon: /* @__PURE__ */ r(ie, {})
+}, Je = function(e) {
+    return /* @__PURE__ */ r(T, _objectSpreadProps(_objectSpread({}, e), {
+        icon: /* @__PURE__ */ r(ce, {})
     }));
-}, je = function(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, a = param.link, i = param.imageUrl, p = param.imageFit, d = param.dataAttributes;
+}, Qe = function(param) {
+    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, a = param.imageUrl, m = param.imageFit, u = param.dataAttributes;
     G("success");
-    var ref = A(), b = ref.isTabletOrSmaller, ref1 = k(), u = ref1.skinName, S = ref1.platformOverrides, I = ref1.colors, l = T({
-        primaryButton: n,
-        secondaryButton: c,
-        link: a
-    }), s = K({
-        isInverse: !0,
-        animateText: !0,
-        primaryButton: n,
-        imageUrl: i,
-        imageFit: p,
-        hasButtons: l
-    }), x = M(), h = U({
-        icon: u === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
+    var ref = B(), k = ref.isTabletOrSmaller, ref1 = f(), g = ref1.skinName, S = ref1.platformOverrides, v = M(), I = P({
+        icon: g === _ ? /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ r(z, {}),
         title: e,
         description: o,
         children: t
-    }, P(S), x, s, I), g = J(h, {
+    }, j(S), v), p = U(I, {
         primaryButton: n,
         secondaryButton: c,
-        link: a
+        link: s
     });
     return /* @__PURE__ */ r(E, {
         isInverse: !0,
-        children: b ? /* @__PURE__ */ m(B, {
-            className: s.background,
+        children: k ? /* @__PURE__ */ i(F, {
+            className: Fe({
+                background: l.colors.backgroundBrand
+            }),
             children: [
                 /* @__PURE__ */ r(L, {}),
-                /* @__PURE__ */ r(C, {
+                /* @__PURE__ */ r(x, {
                     paddingBottom: 32,
                     children: /* @__PURE__ */ r("div", {
-                        className: s.innerContainer,
-                        children: g
+                        className: W,
+                        children: p
                     })
                 })
             ]
-        }) : Q({
+        }) : J({
             isInverse: !0,
-            inlineFeedbackBody: g,
-            classes: s,
-            imageUrl: i,
-            dataAttributes: d
+            inlineFeedbackBody: p,
+            imageFit: m,
+            imageUrl: a,
+            dataAttributes: u
         })
     });
 };
-export { Re as ErrorFeedbackScreen, N as FeedbackScreen, _e as InfoFeedbackScreen, je as SuccessFeedback, Le as SuccessFeedbackScreen };
+export { Ue as ErrorFeedbackScreen, T as FeedbackScreen, Je as InfoFeedbackScreen, Qe as SuccessFeedback, Pe as SuccessFeedbackScreen };