@telefonica/mistica 12.8.0 → 12.9.0

package/dist-es/feedback.js

@@ -1,517 +1,379 @@
-function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
+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";
+const P = (e) => !le(e) && !me(e), T = ({
+  primaryButton: e,
+  secondaryButton: o
+}) => !!e || !!o, K = te((e) => ({
+  background: {
+    background: ({
+      isInverse: o
+    }) => o ? e.colors.backgroundBrand : "initial"
+  },
+  desktopBoxed: {
+    borderRadius: 16
+  },
+  desktopContainer: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  desktopContent: {
+    [e.mq.desktopOrBigger]: {
+      width: "50%"
     }
-    return obj;
-}
-function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
+  },
+  desktopImage: {
+    backgroundImage: ({
+      imageUrl: o
+    }) => `url(${o})`,
+    backgroundPosition: ({
+      imageFit: o
+    }) => o === "fit" ? "bottom right" : "center right",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: ({
+      imageFit: o
+    }) => o === "fit" ? "contain" : "cover",
+    flex: 1,
+    maxWidth: 600
+  },
+  container: {
+    display: "flex",
+    height: "100%",
+    width: "100%",
+    margin: "auto",
+    "& *": {
+      zIndex: 1
     }
-    return _arr;
-}
-function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _objectSpread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    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) {
-    return {
-        background: {
-            background: function(param) {
-                var isInverse = param.isInverse;
-                return isInverse ? theme.colors.backgroundBrand : "initial";
-            }
-        },
-        desktopBoxed: {
-            borderRadius: 16
-        },
-        desktopContainer: {
-            display: "flex",
-            justifyContent: "space-between"
-        },
-        desktopContent: _defineProperty({}, theme.mq.desktopOrBigger, {
-            width: "50%"
-        }),
-        desktopImage: {
-            backgroundImage: function(param) {
-                var imageUrl = param.imageUrl;
-                return "url(".concat(imageUrl, ")");
-            },
-            backgroundPosition: function(param) {
-                var imageFit = param.imageFit;
-                return imageFit === "fit" ? "bottom right" : "center right";
-            },
-            backgroundRepeat: "no-repeat",
-            backgroundSize: function(param) {
-                var imageFit = param.imageFit;
-                return imageFit === "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 footerHeight = param.footerHeight;
-                return footerHeight;
-            },
-            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, ")");
-            },
-            background: function(param) {
-                var isInverse = param.isInverse;
-                return isInverse ? theme.colors.backgroundBrand : theme.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)"
-        }
+  },
+  backgroundDiv: {
+    position: "absolute",
+    bottom: ({
+      footerHeight: o
+    }) => o,
+    top: 0,
+    left: 0,
+    right: 0,
+    height: ({
+      contentHeight: o,
+      hasButtons: t
+    }) => t ? `calc(${o} + 1px)` : `calc(${o})`,
+    background: ({
+      isInverse: o
+    }) => 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 = () => {
+  const {
+    colors: e
+  } = k(), t = `body {background:${W() ? e.backgroundBrand : e.background}}`;
+  return /* @__PURE__ */ r("style", {
+    children: t
+  });
+}, $ = (e) => {
+  se() && de(e).catch(() => {
+  });
+}, G = (e) => {
+  v.useEffect(() => {
+    let o;
+    return e === "success" && (o = setTimeout(() => $("success"), 700)), e === "error" && (o = setTimeout(() => $("error"), 1e3)), () => {
+      clearTimeout(o);
     };
-});
-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
+  }, [e]);
+}, M = () => {
+  const [e, o] = v.useState(!1);
+  return z(() => {
+    const t = window.requestAnimationFrame(() => {
+      o(!0);
     });
-};
-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);
-        };
-    }, [
-        type
-    ]);
-};
-/**
- * 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);
-        });
-        return function() {
-            return window.cancelAnimationFrame(requestId);
-        };
-    }, []);
-    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, {
-        space: 24,
-        children: [
-            icon,
-            /*#__PURE__*/ _jsxs(Stack, {
-                space: 16,
-                className: classnames(classes.feedbackData, animateText && classes.feedbackDataAppear, animateText && appear && classes.feedbackDataAppearActive),
-                children: [
-                    /*#__PURE__*/ _jsx(Text6, {
-                        as: "h1",
-                        children: title
-                    }),
-                    normalizedDescription && /*#__PURE__*/ _jsx(Text3, {
-                        regular: true,
-                        color: colors.textSecondary,
-                        children: normalizedDescription
-                    }),
-                    children
-                ]
-            })
-        ]
-    });
-};
-var renderInlineFeedbackBody = function(feedbackBody, buttons) {
-    var hasButtons = checkHasButtons(buttons);
-    return /*#__PURE__*/ _jsxs(Stack, {
-        space: 24,
-        children: [
-            feedbackBody,
-            hasButtons && /*#__PURE__*/ _jsx(ButtonGroup, _objectSpread({}, buttons))
-        ]
-    });
-};
-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,
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.desktopContent,
-                    children: /*#__PURE__*/ _jsx(Box, {
-                        padding: 64,
-                        children: inlineFeedbackBody
-                    })
-                }),
-                imageUrl && /*#__PURE__*/ _jsx("div", {
-                    className: classes.desktopImage
-                })
-            ]
+    return () => window.cancelAnimationFrame(t);
+  }, []), e;
+}, U = ({
+  icon: e,
+  title: o,
+  description: t,
+  children: n
+}, c, a, i, p) => {
+  const d = t && Array.isArray(t) ? t.map((b, u) => /* @__PURE__ */ r("p", {
+    children: b
+  }, u)) : t;
+  return /* @__PURE__ */ m(y, {
+    space: 24,
+    children: [e, /* @__PURE__ */ m(y, {
+      space: 16,
+      className: ke(i.feedbackData, c && i.feedbackDataAppear, c && a && i.feedbackDataAppearActive),
+      children: [/* @__PURE__ */ r(pe, {
+        as: "h1",
+        children: o
+      }), d && /* @__PURE__ */ r(be, {
+        regular: !0,
+        color: p.textSecondary,
+        children: d
+      }), n]
+    })]
+  });
+}, J = (e, o) => {
+  const t = T(o);
+  return /* @__PURE__ */ m(y, {
+    space: 24,
+    children: [e, t && /* @__PURE__ */ r(he, {
+      ...o
+    })]
+  });
+}, Q = ({
+  isInverse: e,
+  inlineFeedbackBody: o,
+  classes: t,
+  imageUrl: n,
+  dataAttributes: c
+}) => /* @__PURE__ */ r(fe, {
+  className: t.desktopBoxed,
+  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
+    })]
+  })
+}), N = ({
+  title: e,
+  description: o,
+  children: t,
+  primaryButton: n,
+  secondaryButton: c,
+  link: a,
+  hapticFeedback: i,
+  icon: p,
+  animateText: d = !1,
+  unstable_inlineInDesktop: b,
+  imageUrl: u,
+  imageFit: S,
+  dataAttributes: I
+}) => {
+  G(i);
+  const l = W(), {
+    colors: s,
+    platformOverrides: x,
+    isDarkMode: F,
+    skinName: h
+  } = k(), g = ne(), {
+    isTabletOrSmaller: D
+  } = A(), [X, Y] = v.useState(typeof self < "u"), [w, Z] = v.useState(0), ee = `${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(() => {
+    Y(!1);
+  }, []);
+  const 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 (!D && b)
+    return H;
+  const re = /* @__PURE__ */ r("div", {
+    className: f.container,
+    children: /* @__PURE__ */ r(B, {
+      children: /* @__PURE__ */ r("div", {
+        className: f.innerContainer,
+        children: O
+      })
+    })
+  });
+  return D ? /* @__PURE__ */ m(ge, {
+    children: [l && /* @__PURE__ */ r(L, {}), /* @__PURE__ */ r("div", {
+      style: {
+        position: "relative"
+      },
+      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
+      })
+    }), h === q && /* @__PURE__ */ r("div", {
+      className: f.backgroundDiv
+    }), h !== q && /* @__PURE__ */ r(ve, {})]
+  }) : /* @__PURE__ */ r(B, {
+    children: /* @__PURE__ */ r(C, {
+      paddingTop: 64,
+      children: Q({
+        isInverse: l,
+        inlineFeedbackBody: H,
+        classes: f,
+        imageUrl: u,
+        dataAttributes: I
+      })
+    })
+  });
+}, Le = (e) => {
+  const {
+    isTabletOrSmaller: o
+  } = A(), {
+    skinName: t
+  } = k();
+  return /* @__PURE__ */ r(E, {
+    isInverse: !e.unstable_inlineInDesktop || o,
+    children: /* @__PURE__ */ r(N, {
+      ...e,
+      hapticFeedback: "success",
+      icon: t === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
+      animateText: !0,
+      imageUrl: e.imageUrl,
+      imageFit: e.imageFit
+    })
+  });
+}, Re = ({
+  children: e,
+  errorReference: o,
+  ...t
+}) => {
+  const {
+    colors: n
+  } = k();
+  return /* @__PURE__ */ m(N, {
+    ...t,
+    hapticFeedback: "error",
+    icon: /* @__PURE__ */ r(ae, {}),
+    animateText: !0,
+    children: [e, o && /* @__PURE__ */ r(ue, {
+      color: n.textSecondary,
+      regular: !0,
+      children: o
+    })]
+  });
+}, _e = (e) => /* @__PURE__ */ r(N, {
+  ...e,
+  icon: /* @__PURE__ */ r(ie, {})
+}), je = ({
+  title: e,
+  description: o,
+  children: t,
+  primaryButton: n,
+  secondaryButton: c,
+  link: a,
+  imageUrl: i,
+  imageFit: p,
+  dataAttributes: d
+}) => {
+  G("success");
+  const {
+    isTabletOrSmaller: b
+  } = A(), {
+    skinName: u,
+    platformOverrides: S,
+    colors: I
+  } = k(), 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__ */ r(E, {
+    isInverse: !0,
+    children: b ? /* @__PURE__ */ m(B, {
+      className: s.background,
+      children: [/* @__PURE__ */ r(L, {}), /* @__PURE__ */ r(C, {
+        paddingBottom: 32,
+        children: /* @__PURE__ */ r("div", {
+          className: s.innerContainer,
+          children: g
         })
-    });
+      })]
+    }) : Q({
+      isInverse: !0,
+      inlineFeedbackBody: g,
+      classes: s,
+      imageUrl: i,
+      dataAttributes: d
+    })
+  });
 };
-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);
-    }, []);
-    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
-    });
-    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
-            })
-        })
-    });
-    return isTabletOrSmaller ? /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            isInverse && /*#__PURE__*/ _jsx(OverscrollColor, {}),
-            /*#__PURE__*/ _jsx("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
-                })
-            }),
-            skinName === O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx("div", {
-                className: classes.backgroundDiv
-            }),
-            skinName !== O2_CLASSIC_SKIN && /*#__PURE__*/ _jsx(BackgroundColor, {})
-        ]
-    }) : /*#__PURE__*/ _jsx(ResponsiveLayout, {
-        children: /*#__PURE__*/ _jsx(Box, {
-            paddingTop: 64,
-            children: renderFeedbackInDesktop({
-                isInverse: isInverse,
-                inlineFeedbackBody: inlineFeedbackBody,
-                classes: classes,
-                imageUrl: imageUrl,
-                dataAttributes: dataAttributes
-            })
-        })
-    });
-};
-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, {
-            hapticFeedback: "success",
-            icon: skinName === VIVO_SKIN ? /*#__PURE__*/ _jsx(IconSuccessVivo, {}) : /*#__PURE__*/ _jsx(IcnSuccess, {}),
-            animateText: true,
-            imageUrl: props.imageUrl,
-            imageFit: props.imageFit
-        }))
-    });
-};
-var ErrorFeedbackScreen = function(_param) {
-    var children = _param.children, errorReference = _param.errorReference, otherProps = _objectWithoutProperties(_param, [
-        "children",
-        "errorReference"
-    ]);
-    var colors = useTheme().colors;
-    return /*#__PURE__*/ _jsxs(FeedbackScreen, _objectSpread({}, otherProps, {
-        hapticFeedback: "error",
-        icon: /*#__PURE__*/ _jsx(IcnError, {}),
-        animateText: true,
-        children: [
-            children,
-            errorReference && /*#__PURE__*/ _jsx(Text2, {
-                color: colors.textSecondary,
-                regular: true,
-                children: errorReference
-            })
-        ]
-    }));
-};
-export { ErrorFeedbackScreen };
-export var InfoFeedbackScreen = function(props) {
-    return /*#__PURE__*/ _jsx(FeedbackScreen, _objectSpread({}, props, {
-        icon: /*#__PURE__*/ _jsx(IcnInfo, {})
-    }));
-};
-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
-    });
-    return /*#__PURE__*/ _jsx(ThemeVariant, {
-        isInverse: true,
-        children: isTabletOrSmaller ? /*#__PURE__*/ _jsxs(ResponsiveLayout, {
-            className: classes.background,
-            children: [
-                /*#__PURE__*/ _jsx(OverscrollColor, {}),
-                /*#__PURE__*/ _jsx(Box, {
-                    paddingBottom: 32,
-                    children: /*#__PURE__*/ _jsx("div", {
-                        className: classes.innerContainer,
-                        children: inlineFeedbackBody
-                    })
-                })
-            ]
-        }) : renderFeedbackInDesktop({
-            isInverse: true,
-            inlineFeedbackBody: inlineFeedbackBody,
-            classes: classes,
-            imageUrl: imageUrl,
-            dataAttributes: dataAttributes
-        })
-    });
+export {
+  Re as ErrorFeedbackScreen,
+  N as FeedbackScreen,
+  _e as InfoFeedbackScreen,
+  je as SuccessFeedback,
+  Le as SuccessFeedbackScreen
 };