@telefonica/mistica 12.10.0 → 12.11.1

package/dist/feedback.js

@@ -10,23 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     ErrorFeedbackScreen: function() {
-        return _e;
+        return Ue;
     },
     FeedbackScreen: function() {
-        return N;
+        return T;
     },
     InfoFeedbackScreen: function() {
-        return je;
+        return Je;
     },
     SuccessFeedback: function() {
-        return Pe;
+        return Qe;
     },
     SuccessFeedbackScreen: function() {
-        return Re;
+        return Pe;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _jssJs = require("./jss.js");
 var _hooksJs = require("./hooks.js");
 var _themeVariantContextJs = require("./theme-variant-context.js");
 var _buttonFixedFooterLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./button-fixed-footer-layout.js"));
@@ -46,6 +45,8 @@ var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
 var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+var _feedbackCssMisticaJs = require("./feedback.css-mistica.js");
+var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -220,111 +221,25 @@ 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);
 }
-var P = function P(e) {
+var j = function j(e) {
     return !(0, _platformJs.isOldChrome)(e) && !(0, _platformJs.isRunningAcceptanceTest)(e);
-}, T = function T(param) {
+}, K = function K(param) {
     var e = param.primaryButton, o = param.secondaryButton;
     return !!e || !!o;
-}, K = (0, _jssJs.createUseStyles)(function(e) {
-    return {
-        background: {
-            background: function background(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 backgroundImage(param) {
-                var o = param.imageUrl;
-                return "url(".concat(o, ")");
-            },
-            backgroundPosition: function backgroundPosition(param) {
-                var o = param.imageFit;
-                return o === "fit" ? "bottom right" : "center right";
-            },
-            backgroundRepeat: "no-repeat",
-            backgroundSize: function backgroundSize(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 bottom(param) {
-                var o = param.footerHeight;
-                return o;
-            },
-            top: 0,
-            left: 0,
-            right: 0,
-            height: function height(param) {
-                var o = param.contentHeight, t = param.hasButtons;
-                return t ? "calc(".concat(o, " + 1px)") : "calc(".concat(o, ")");
-            },
-            background: function background(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 ve() {
+}, xe = function xe() {
     var ref = (0, _hooksJs.useTheme)(), e = ref.colors, t = "body {background:".concat((0, _themeVariantContextJs.useIsInverseVariant)() ? e.backgroundBrand : e.background, "}");
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("style", {
         children: t
     });
-}, $ = function $(e) {
+}, D = function D(e) {
     (0, _webviewBridge.isWebViewBridgeAvailable)() && (0, _webviewBridge.requestVibration)(e).catch(function() {});
 }, G = function G(e) {
     _react.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);
         };
@@ -341,12 +256,15 @@ var P = function P(e) {
             return window.cancelAnimationFrame(t);
         };
     }, []), e;
-}, U = function U(param, c, i, s) {
+}, P = function P(param, c, s) {
     var e = param.icon, o = param.title, t = param.description, n = param.children;
-    var l = t && Array.isArray(t) ? t.map(function(m, u) {
-        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
-            children: m
-        }, u);
+    var a = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
+        space: 16,
+        children: t.map(function(m, u) {
+            return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
+                children: m
+            }, u);
+        })
     }) : t;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
@@ -354,24 +272,24 @@ var P = function P(e) {
             e,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
-                className: (0, _classnames.default)(s.feedbackData, c && s.feedbackDataAppear, c && i && s.feedbackDataAppearActive),
+                className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, c && _feedbackCssMisticaJs.feedbackDataAppear, c && s && _feedbackCssMisticaJs.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         as: "h1",
                         children: o
                     }),
-                    l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                        children: l
+                        children: a
                     }),
                     n
                 ]
             })
         ]
     });
-}, J = function J(e, o) {
-    var t = T(o);
+}, U = function U(e, o) {
+    var t = K(o);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         children: [
@@ -379,71 +297,66 @@ var P = function P(e) {
             t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, o))
         ]
     });
-}, Q = function Q(param) {
-    var e = param.isInverse, o = param.inlineFeedbackBody, t = param.classes, n = param.imageUrl, c = param.dataAttributes;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
-        className: t.desktopBoxed,
+}, J = function J(param) {
+    var e = param.isInverse, o = param.inlineFeedbackBody, t = param.imageFit, n = param.imageUrl, c = param.dataAttributes;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
+        className: _feedbackCssMisticaJs.desktopContainer,
         isInverse: e,
         dataAttributes: c,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-            className: t.desktopContainer,
-            children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: t.desktopContent,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                        padding: 64,
-                        children: o
-                    })
-                }),
-                n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: t.desktopImage
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _feedbackCssMisticaJs.desktopContent,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                    padding: 64,
+                    children: o
                 })
-            ]
-        })
+            }),
+            n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("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 N(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, i = param.link, s = param.hapticFeedback, l = param.icon, tmp = param.animateText, m = tmp === void 0 ? !1 : tmp, u = param.unstable_inlineInDesktop, b = param.imageUrl, v = param.imageFit, S = param.dataAttributes;
-    G(s);
-    var a = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), I = ref.platformOverrides, x = ref.isDarkMode, k = ref.skinName, h = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), D = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(_react.useState(0), 2), w = ref3[0], Z = ref3[1], ee = "".concat(h - w, "px"), V = T({
+}, T = function T(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 = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), I = ref.platformOverrides, p = ref.isDarkMode, y = ref.skinName, Q = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), A = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(_react.useState(0), 2), C = ref3[0], Z = ref3[1], N = X ? "100vh" : "".concat(Q - C, "px"), V = K({
         primaryButton: n,
         secondaryButton: c,
-        link: i
-    }), p = K({
-        isInverse: a,
-        contentHeight: X ? "100vh" : ee,
-        footerHeight: w,
-        animateText: m,
-        primaryButton: n,
-        imageUrl: b,
-        imageFit: v,
-        hasButtons: V
-    }), oe = M();
+        link: s
+    }), ee = M();
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
         Y(!1);
     }, []);
-    var O = U({
-        icon: l,
+    var w = P({
+        icon: m,
         title: e,
         description: o,
         children: t
-    }, m && P(I), oe, p), H = J(O, {
+    }, u && j(I), ee), H = U(w, {
         primaryButton: n,
         secondaryButton: c,
-        link: i
+        link: s
     });
-    if (!D && u) return H;
+    if (!A && k) return H;
     var re = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: p.container,
+        className: _feedbackCssMisticaJs.container,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: p.innerContainer,
-                children: O
+                className: _feedbackCssMisticaJs.innerContainer,
+                children: w
             })
         })
     });
-    return D ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+    return A ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "relative"
@@ -452,35 +365,43 @@ var P = function P(e) {
                     isFooterVisible: V,
                     button: n,
                     secondaryButton: c,
-                    link: i,
-                    footerBgColor: a && !x ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: a && !x ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    link: s,
+                    footerBgColor: d && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: d && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
                     onChangeFooterHeight: Z,
                     children: re
                 })
             }),
-            k === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: p.backgroundDiv
+            y === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                style: {
+                    position: "absolute",
+                    bottom: C,
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: V ? "calc(".concat(N, " + 1px)") : "calc(".concat(N, ")"),
+                    background: d ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
+                }
             }),
-            k !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ve, {})
+            y !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(xe, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingTop: 64,
-            children: Q({
-                isInverse: a,
+            children: J({
+                isInverse: d,
                 inlineFeedbackBody: H,
-                classes: p,
-                imageUrl: b,
-                dataAttributes: S
+                imageFit: S,
+                imageUrl: g,
+                dataAttributes: v
             })
         })
     });
-}, Re = function Re(e) {
+}, Pe = function Pe(e) {
     var ref = (0, _hooksJs.useScreenSize)(), o = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), t = ref1.skinName;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
         isInverse: !e.unstable_inlineInDesktop || o,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(N, _objectSpreadProps(_objectSpread({}, e), {
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
             hapticFeedback: "success",
             icon: t === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
             animateText: !0,
@@ -488,13 +409,13 @@ var P = function P(e) {
             imageFit: e.imageFit
         }))
     });
-}, _e = function _e(_param) {
+}, Ue = function Ue(_param) {
     var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
         "children",
         "errorReference"
     ]);
     var ref = (0, _hooksJs.useTheme)(), n = ref.colors;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(N, _objectSpreadProps(_objectSpread({}, t), {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(T, _objectSpreadProps(_objectSpread({}, t), {
         hapticFeedback: "error",
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconErrorJs.default, {}),
         animateText: !0,
@@ -507,54 +428,45 @@ var P = function P(e) {
             })
         ]
     }));
-}, je = function je(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(N, _objectSpreadProps(_objectSpread({}, e), {
+}, Je = function Je(e) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconInfoJs.default, {})
     }));
-}, Pe = function Pe(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, i = param.link, s = param.imageUrl, l = param.imageFit, m = param.dataAttributes;
+}, Qe = function Qe(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 = (0, _hooksJs.useScreenSize)(), u = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), b = ref1.skinName, v = ref1.platformOverrides, S = T({
-        primaryButton: n,
-        secondaryButton: c,
-        link: i
-    }), a = K({
-        isInverse: !0,
-        animateText: !0,
-        primaryButton: n,
-        imageUrl: s,
-        imageFit: l,
-        hasButtons: S
-    }), I = M(), k = U({
-        icon: b === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+    var ref = (0, _hooksJs.useScreenSize)(), k = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), g = ref1.skinName, S = ref1.platformOverrides, v = M(), I = P({
+        icon: g === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
         title: e,
         description: o,
         children: t
-    }, P(v), I, a), h = J(k, {
+    }, j(S), v), p = U(I, {
         primaryButton: n,
         secondaryButton: c,
-        link: i
+        link: s
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
         isInverse: !0,
-        children: u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-            className: a.background,
+        children: k ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+            className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                background: _skinContractCssMisticaJs.vars.colors.backgroundBrand
+            }),
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingBottom: 32,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: a.innerContainer,
-                        children: h
+                        className: _feedbackCssMisticaJs.innerContainer,
+                        children: p
                     })
                 })
             ]
-        }) : Q({
+        }) : J({
             isInverse: !0,
-            inlineFeedbackBody: h,
-            classes: a,
-            imageUrl: s,
-            dataAttributes: m
+            inlineFeedbackBody: p,
+            imageFit: m,
+            imageUrl: a,
+            dataAttributes: u
         })
     });
 };