@telefonica/mistica 12.8.0 → 12.9.1

package/dist-es/feedback.js

@@ -61,6 +61,30 @@ function _objectSpread(target) {
     }
     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 _objectSpreadProps(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 _objectWithoutProperties(source, excluded) {
     if (source == null) return {};
     var target = _objectWithoutPropertiesLoose(source, excluded);
@@ -91,6 +115,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
+var _typeof = function(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+};
 function _unsupportedIterableToArray(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -99,40 +127,38 @@ 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { createUseStyles } from "./jss";
-import { useTheme, useScreenSize, useWindowHeight, useIsomorphicLayoutEffect } from "./hooks";
-import { ThemeVariant, useIsInverseVariant } from "./theme-variant-context";
-import ButtonFixedFooterLayout from "./button-fixed-footer-layout";
-import OverscrollColor from "./overscroll-color-context";
-import { O2_CLASSIC_SKIN, VIVO_SKIN } from "./skins/constants";
-import IcnSuccess from "./icons/icon-success";
-import IconSuccessVivo from "./icons/icon-success-vivo";
-import IcnError from "./icons/icon-error";
-import IcnInfo from "./icons/icon-info";
-import { isWebViewBridgeAvailable, requestVibration as requestVibrationNative } from "@tef-novum/webview-bridge";
-import { isOldChrome, isRunningAcceptanceTest } from "./utils/platform";
-import { Text6, Text2, Text3 } from "./text";
-import Box from "./box";
-import { Boxed } from "./boxed";
-import ResponsiveLayout from "./responsive-layout";
-import Stack from "./stack";
-import classnames from "classnames";
-import ButtonGroup from "./button-group";
-var areAnimationsSupported = function(platformOverrides) {
-    return !isOldChrome(platformOverrides) && !isRunningAcceptanceTest(platformOverrides);
-};
-var checkHasButtons = function(param) {
-    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton;
-    return !!primaryButton || !!secondaryButton;
-};
-var useStyles = createUseStyles(function(theme) {
+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 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 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) {
+    var e = param.primaryButton, o = param.secondaryButton;
+    return !!e || !!o;
+}, K = te(function(e) {
     return {
         background: {
             background: function(param) {
-                var isInverse = param.isInverse;
-                return isInverse ? theme.colors.backgroundBrand : "initial";
+                var o = param.isInverse;
+                return o ? e.colors.backgroundBrand : "initial";
             }
         },
         desktopBoxed: {
@@ -142,22 +168,22 @@ var useStyles = createUseStyles(function(theme) {
             display: "flex",
             justifyContent: "space-between"
         },
-        desktopContent: _defineProperty({}, theme.mq.desktopOrBigger, {
+        desktopContent: _defineProperty({}, e.mq.desktopOrBigger, {
             width: "50%"
         }),
         desktopImage: {
             backgroundImage: function(param) {
-                var imageUrl = param.imageUrl;
-                return "url(".concat(imageUrl, ")");
+                var o = param.imageUrl;
+                return "url(".concat(o, ")");
             },
             backgroundPosition: function(param) {
-                var imageFit = param.imageFit;
-                return imageFit === "fit" ? "bottom right" : "center right";
+                var o = param.imageFit;
+                return o === "fit" ? "bottom right" : "center right";
             },
             backgroundRepeat: "no-repeat",
             backgroundSize: function(param) {
-                var imageFit = param.imageFit;
-                return imageFit === "fit" ? "contain" : "cover";
+                var o = param.imageFit;
+                return o === "fit" ? "contain" : "cover";
             },
             flex: 1,
             maxWidth: 600
@@ -174,21 +200,19 @@ var useStyles = createUseStyles(function(theme) {
         backgroundDiv: {
             position: "absolute",
             bottom: function(param) {
-                var footerHeight = param.footerHeight;
-                return footerHeight;
+                var o = param.footerHeight;
+                return o;
             },
             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: function(param) {
-                var contentHeight = param.contentHeight, hasButtons = param.hasButtons;
-                return hasButtons ? "calc(".concat(contentHeight, " + 1px)") : "calc(".concat(contentHeight, ")");
+                var o = param.contentHeight, t = param.hasButtons;
+                return t ? "calc(".concat(o, " + 1px)") : "calc(".concat(o, ")");
             },
             background: function(param) {
-                var isInverse = param.isInverse;
-                return isInverse ? theme.colors.backgroundBrand : theme.colors.background;
+                var o = param.isInverse;
+                return o ? e.colors.backgroundBrand : e.colors.background;
             }
         },
         innerContainer: {
@@ -215,303 +239,251 @@ var useStyles = createUseStyles(function(theme) {
             transform: "translate(0, 0)"
         }
     };
-});
-var BackgroundColor = function() {
-    var colors = useTheme().colors;
-    var isInverse = useIsInverseVariant();
-    var css = "body {background:".concat(isInverse ? colors.backgroundBrand : colors.background, "}");
-    return /*#__PURE__*/ _jsx("style", {
-        children: css
+}), ve = function() {
+    var ref = k(), e = ref.colors, t = "body {background:".concat(W() ? e.backgroundBrand : e.background, "}");
+    return /* @__PURE__ */ r("style", {
+        children: t
     });
-};
-var requestVibration = function(type) {
-    if (isWebViewBridgeAvailable()) {
-        requestVibrationNative(type).catch(function() {});
-    }
-};
-var useHapticFeedback = function(type) {
-    React.useEffect(function() {
-        var timeoutId;
-        if (type === "success") {
-            timeoutId = setTimeout(function() {
-                return requestVibration("success");
-            }, 700);
-        }
-        if (type === "error") {
-            timeoutId = setTimeout(function() {
-                return requestVibration("error");
-            }, 1000);
-        }
-        return function() {
-            clearTimeout(timeoutId);
+}, $ = function(e) {
+    se() && de(e).catch(function() {});
+}, G = function(e) {
+    v.useEffect(function() {
+        var o;
+        return e === "success" && (o = setTimeout(function() {
+            return $("success");
+        }, 700)), e === "error" && (o = setTimeout(function() {
+            return $("error");
+        }, 1e3)), function() {
+            clearTimeout(o);
         };
     }, [
-        type
+        e
     ]);
-};
-/**
- * Manage transitions manually in order to reach 'opacity: 1, translate: (0,0)'
- * even if animations/transitions are disabled by css
- * (CSSTransition does not work here when running in Storybook)
- * @returns boolean whether the transition should start
- */ var useAppearStatus = function() {
-    // A state to manage the text animation with transitions instead of keyframes
-    var ref = _slicedToArray(React.useState(false), 2), appear = ref[0], setAppear = ref[1];
-    useIsomorphicLayoutEffect(function() {
-        var requestId = window.requestAnimationFrame(function() {
-            setAppear(true);
+}, M = function() {
+    var ref = _slicedToArray(v.useState(!1), 2), e = ref[0], o = ref[1];
+    return z(function() {
+        var t = window.requestAnimationFrame(function() {
+            o(!0);
         });
         return function() {
-            return window.cancelAnimationFrame(requestId);
+            return window.cancelAnimationFrame(t);
         };
-    }, []);
-    return appear;
-};
-var renderFeedbackBody = function(param, animateText, appear, classes, colors) {
-    var icon = param.icon, title = param.title, description = param.description, children = param.children;
-    var normalizedDescription = description && Array.isArray(description) ? description.map(function(paragraph, i) {
-        return /*#__PURE__*/ _jsx("p", {
-            children: paragraph
-        }, i);
-    }) : description;
-    return /*#__PURE__*/ _jsxs(Stack, {
+    }, []), e;
+}, U = function(param, c, a, i, p) {
+    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);
+    }) : t;
+    return /* @__PURE__ */ m(y, {
         space: 24,
         children: [
-            icon,
-            /*#__PURE__*/ _jsxs(Stack, {
+            e,
+            /* @__PURE__ */ m(y, {
                 space: 16,
-                className: classnames(classes.feedbackData, animateText && classes.feedbackDataAppear, animateText && appear && classes.feedbackDataAppearActive),
+                className: ke(i.feedbackData, c && i.feedbackDataAppear, c && a && i.feedbackDataAppearActive),
                 children: [
-                    /*#__PURE__*/ _jsx(Text6, {
+                    /* @__PURE__ */ r(pe, {
                         as: "h1",
-                        children: title
+                        children: o
                     }),
-                    normalizedDescription && /*#__PURE__*/ _jsx(Text3, {
-                        regular: true,
-                        color: colors.textSecondary,
-                        children: normalizedDescription
+                    d && /* @__PURE__ */ r(be, {
+                        regular: !0,
+                        color: p.textSecondary,
+                        children: d
                     }),
-                    children
+                    n
                 ]
             })
         ]
     });
-};
-var renderInlineFeedbackBody = function(feedbackBody, buttons) {
-    var hasButtons = checkHasButtons(buttons);
-    return /*#__PURE__*/ _jsxs(Stack, {
+}, J = function(e, o) {
+    var t = T(o);
+    return /* @__PURE__ */ m(y, {
         space: 24,
         children: [
-            feedbackBody,
-            hasButtons && /*#__PURE__*/ _jsx(ButtonGroup, _objectSpread({}, buttons))
+            e,
+            t && /* @__PURE__ */ r(he, _objectSpread({}, o))
         ]
     });
-};
-var renderFeedbackInDesktop = function(param) {
-    var isInverse = param.isInverse, inlineFeedbackBody = param.inlineFeedbackBody, classes = param.classes, imageUrl = param.imageUrl, dataAttributes = param.dataAttributes;
-    return /*#__PURE__*/ _jsx(Boxed, {
-        className: classes.desktopBoxed,
-        isInverse: isInverse,
-        dataAttributes: dataAttributes,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: classes.desktopContainer,
+}, 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,
+        isInverse: e,
+        dataAttributes: c,
+        children: /* @__PURE__ */ m("div", {
+            className: t.desktopContainer,
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.desktopContent,
-                    children: /*#__PURE__*/ _jsx(Box, {
+                /* @__PURE__ */ r("div", {
+                    className: t.desktopContent,
+                    children: /* @__PURE__ */ r(C, {
                         padding: 64,
-                        children: inlineFeedbackBody
+                        children: o
                     })
                 }),
-                imageUrl && /*#__PURE__*/ _jsx("div", {
-                    className: classes.desktopImage
+                n && /* @__PURE__ */ r("div", {
+                    className: t.desktopImage
                 })
             ]
         })
     });
-};
-export var FeedbackScreen = function(param) {
-    var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, hapticFeedback = param.hapticFeedback, icon = param.icon, _animateText = param.animateText, animateText = _animateText === void 0 ? false : _animateText, unstable_inlineInDesktop = param.unstable_inlineInDesktop, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
-    useHapticFeedback(hapticFeedback);
-    var isInverse = useIsInverseVariant();
-    var ref = useTheme(), colors = ref.colors, platformOverrides = ref.platformOverrides, isDarkMode = ref.isDarkMode, skinName = ref.skinName;
-    var windowHeight = useWindowHeight();
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var ref1 = _slicedToArray(React.useState(typeof self !== "undefined"), 2), isServerSide = ref1[0], setIsServerSide = ref1[1];
-    var ref2 = _slicedToArray(React.useState(0), 2), footerHeight = ref2[0], setFooterHeight = ref2[1];
-    var contentHeightPx = "".concat(windowHeight - footerHeight, "px");
-    var hasButtons = checkHasButtons({
-        primaryButton: primaryButton,
-        secondaryButton: secondaryButton,
-        link: link
-    });
-    var classes = useStyles({
-        isInverse: isInverse,
-        contentHeight: isServerSide ? "100vh" : contentHeightPx,
-        footerHeight: footerHeight,
-        animateText: animateText,
-        primaryButton: primaryButton,
-        imageUrl: imageUrl,
-        imageFit: imageFit,
-        hasButtons: hasButtons
-    });
-    var appear = useAppearStatus();
-    // This trick along with the 100vh measure allows us to perform a first meaningful render on the server side.
-    // We can't use vh on client side because it causes problems with iOS (as sometimes the height is calculated as
-    // if there were no OS buttons on bottom): https://bugs.webkit.org/show_bug.cgi?id=141832
-    useIsomorphicLayoutEffect(function() {
-        setIsServerSide(false);
+}, 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({
+        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() {
+        Y(!1);
     }, []);
-    var feedbackBody = renderFeedbackBody({
-        icon: icon,
-        title: title,
-        description: description,
-        children: children
-    }, animateText && areAnimationsSupported(platformOverrides), appear, classes, colors);
-    var inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
-        primaryButton: primaryButton,
-        secondaryButton: secondaryButton,
-        link: link
+    var O = U({
+        icon: p,
+        title: e,
+        description: o,
+        children: t
+    }, d && P(x), oe, f, s), H = J(O, {
+        primaryButton: n,
+        secondaryButton: c,
+        link: a
     });
-    if (!isTabletOrSmaller && unstable_inlineInDesktop) {
-        return inlineFeedbackBody;
-    }
-    var feedbackContent = /*#__PURE__*/ _jsx("div", {
-        className: classes.container,
-        children: /*#__PURE__*/ _jsx(ResponsiveLayout, {
-            children: /*#__PURE__*/ _jsx("div", {
-                className: classes.innerContainer,
-                children: feedbackBody
+    if (!D && b) return H;
+    var re = /* @__PURE__ */ r("div", {
+        className: f.container,
+        children: /* @__PURE__ */ r(B, {
+            children: /* @__PURE__ */ r("div", {
+                className: f.innerContainer,
+                children: O
             })
         })
     });
-    return isTabletOrSmaller ? /*#__PURE__*/ _jsxs(_Fragment, {
+    return D ? /* @__PURE__ */ m(ge, {
         children: [
-            isInverse && /*#__PURE__*/ _jsx(OverscrollColor, {}),
-            /*#__PURE__*/ _jsx("div", {
+            l && /* @__PURE__ */ r(L, {}),
+            /* @__PURE__ */ r("div", {
                 style: {
                     position: "relative"
                 },
-                children: /*#__PURE__*/ _jsx(ButtonFixedFooterLayout, {
-                    isFooterVisible: hasButtons,
-                    button: primaryButton,
-                    secondaryButton: secondaryButton,
-                    link: link,
-                    footerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
-                    containerBgColor: isInverse && !isDarkMode ? colors.backgroundFeedbackBottom : undefined,
-                    onChangeFooterHeight: setFooterHeight,
-                    children: feedbackContent
+                children: /* @__PURE__ */ r(ce, {
+                    isFooterVisible: V,
+                    button: n,
+                    secondaryButton: c,
+                    link: a,
+                    footerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
+                    containerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: Z,
+                    children: re
                 })
             }),
-            skinName === O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx("div", {
-                className: classes.backgroundDiv
+            h === q && /* @__PURE__ */ r("div", {
+                className: f.backgroundDiv
             }),
-            skinName !== O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx(BackgroundColor, {})
+            h !== q && /* @__PURE__ */ r(ve, {})
         ]
-    }) : /*#__PURE__*/ _jsx(ResponsiveLayout, {
-        children: /*#__PURE__*/ _jsx(Box, {
+    }) : /* @__PURE__ */ r(B, {
+        children: /* @__PURE__ */ r(C, {
             paddingTop: 64,
-            children: renderFeedbackInDesktop({
-                isInverse: isInverse,
-                inlineFeedbackBody: inlineFeedbackBody,
-                classes: classes,
-                imageUrl: imageUrl,
-                dataAttributes: dataAttributes
+            children: Q({
+                isInverse: l,
+                inlineFeedbackBody: H,
+                classes: f,
+                imageUrl: u,
+                dataAttributes: I
             })
         })
     });
-};
-export var SuccessFeedbackScreen = function(props) {
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var skinName = useTheme().skinName;
-    return /*#__PURE__*/ _jsx(ThemeVariant, {
-        isInverse: !props.unstable_inlineInDesktop || isTabletOrSmaller,
-        children: /*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({}, props, {
+}, Le = function(e) {
+    var ref = A(), o = ref.isTabletOrSmaller, ref1 = k(), t = ref1.skinName;
+    return /* @__PURE__ */ r(E, {
+        isInverse: !e.unstable_inlineInDesktop || o,
+        children: /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
             hapticFeedback: "success",
-            icon: skinName === VIVO_SKIN ? /*#__PURE__*/ _jsx(IconSuccessVivo, {}) : /*#__PURE__*/ _jsx(IcnSuccess, {}),
-            animateText: true,
-            imageUrl: props.imageUrl,
-            imageFit: props.imageFit
+            icon: t === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
+            animateText: !0,
+            imageUrl: e.imageUrl,
+            imageFit: e.imageFit
         }))
     });
-};
-var ErrorFeedbackScreen = function(_param) {
-    var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, [
+}, Re = function(_param) {
+    var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
         "children",
         "errorReference"
     ]);
-    var colors = useTheme().colors;
-    return /*#__PURE__*/ _jsxs(FeedbackScreen, _objectSpread({}, otherProps, {
+    var ref = k(), n = ref.colors;
+    return /* @__PURE__ */ m(N, _objectSpreadProps(_objectSpread({}, t), {
         hapticFeedback: "error",
-        icon: /*#__PURE__*/ _jsx(IcnError, {}),
-        animateText: true,
+        icon: /* @__PURE__ */ r(ae, {}),
+        animateText: !0,
         children: [
-            children,
-            errorReference && /*#__PURE__*/ _jsx(Text2, {
-                color: colors.textSecondary,
-                regular: true,
-                children: errorReference
+            e,
+            o && /* @__PURE__ */ r(ue, {
+                color: n.textSecondary,
+                regular: !0,
+                children: o
             })
         ]
     }));
-};
-export { ErrorFeedbackScreen };
-export var InfoFeedbackScreen = function(props) {
-    return /*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({}, props, {
-        icon: /*#__PURE__*/ _jsx(IcnInfo, {})
+}, _e = function(e) {
+    return /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
+        icon: /* @__PURE__ */ r(ie, {})
     }));
-};
-export var SuccessFeedback = function(param) {
-    var title = param.title, description = param.description, children = param.children, primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, imageUrl = param.imageUrl, imageFit = param.imageFit, dataAttributes = param.dataAttributes;
-    useHapticFeedback("success");
-    var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
-    var ref = useTheme(), skinName = ref.skinName, platformOverrides = ref.platformOverrides, colors = ref.colors;
-    var hasButtons = checkHasButtons({
-        primaryButton: primaryButton,
-        secondaryButton: secondaryButton,
-        link: link
-    });
-    var classes = useStyles({
-        isInverse: true,
-        animateText: true,
-        primaryButton: primaryButton,
-        imageUrl: imageUrl,
-        imageFit: imageFit,
-        hasButtons: hasButtons
-    });
-    var appear = useAppearStatus();
-    var icon = skinName === VIVO_SKIN ? /*#__PURE__*/ _jsx(IconSuccessVivo, {}) : /*#__PURE__*/ _jsx(IcnSuccess, {});
-    var feedbackBody = renderFeedbackBody({
-        icon: icon,
-        title: title,
-        description: description,
-        children: children
-    }, areAnimationsSupported(platformOverrides), appear, classes, colors);
-    var inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
-        primaryButton: primaryButton,
-        secondaryButton: secondaryButton,
-        link: link
+}, 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;
+    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(_, {}),
+        title: e,
+        description: o,
+        children: t
+    }, P(S), x, s, I), g = J(h, {
+        primaryButton: n,
+        secondaryButton: c,
+        link: a
     });
-    return /*#__PURE__*/ _jsx(ThemeVariant, {
-        isInverse: true,
-        children: isTabletOrSmaller ? /*#__PURE__*/ _jsxs(ResponsiveLayout, {
-            className: classes.background,
+    return /* @__PURE__ */ r(E, {
+        isInverse: !0,
+        children: b ? /* @__PURE__ */ m(B, {
+            className: s.background,
             children: [
-                /*#__PURE__*/ _jsx(OverscrollColor, {}),
-                /*#__PURE__*/ _jsx(Box, {
+                /* @__PURE__ */ r(L, {}),
+                /* @__PURE__ */ r(C, {
                     paddingBottom: 32,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: classes.innerContainer,
-                        children: inlineFeedbackBody
+                    children: /* @__PURE__ */ r("div", {
+                        className: s.innerContainer,
+                        children: g
                     })
                 })
             ]
-        }) : renderFeedbackInDesktop({
-            isInverse: true,
-            inlineFeedbackBody: inlineFeedbackBody,
-            classes: classes,
-            imageUrl: imageUrl,
-            dataAttributes: dataAttributes
+        }) : Q({
+            isInverse: !0,
+            inlineFeedbackBody: g,
+            classes: s,
+            imageUrl: i,
+            dataAttributes: d
         })
     });
 };
+export { Re as ErrorFeedbackScreen, N as FeedbackScreen, _e as InfoFeedbackScreen, je as SuccessFeedback, Le as SuccessFeedbackScreen };