@multiplatform.one/web3 5.0.27

package/dist/jsx/connectkit/components/Common/Modal/index.native.js

@@ -0,0 +1,660 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Modal_exports = {};
+__export(Modal_exports, {
+  OrDivider: () => OrDivider,
+  contentVariants: () => contentVariants,
+  default: () => Modal_default
+});
+module.exports = __toCommonJS(Modal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_styles = require("../../../styles/index.native.js");
+var import_Portal = __toESM(require("../Portal/index.native.js"));
+var import_utils = require("../../../utils/index.native.js");
+var import_styles2 = require("./styles.native.js");
+var import_ConnectKit = require("../../ConnectKit.native.js");
+var import_useLockBodyScroll = __toESM(require("../../../hooks/useLockBodyScroll.native.js"));
+var import_react_transition_state = require("react-transition-state");
+var import_useFocusTrap = __toESM(require("../../../hooks/useFocusTrap.native.js"));
+var import_usePrevious = __toESM(require("../../../hooks/usePrevious.native.js"));
+var import_ConnectKitThemeProvider = require("../../ConnectKitThemeProvider/ConnectKitThemeProvider.native.js");
+var import_wagmi = require("wagmi");
+var import_icons = require("../../../assets/icons.native.js");
+var import_siwe = require("../../../siwe/index.native.js");
+var import_useLocales = __toESM(require("../../../hooks/useLocales.native.js"));
+var import_FitText = __toESM(require("../FitText/index.native.js"));
+var import_useWallets = require("../../../wallets/useWallets.native.js");
+var ProfileIcon = function ProfileIcon2(param) {
+  var {
+    isSignedIn
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      position: "relative"
+    },
+    children: [isSignedIn ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.AuthIcon, {
+      style: {
+        bottom: -1,
+        right: -1
+      }
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        zIndex: 2,
+        position: "absolute",
+        top: -2,
+        right: -2,
+        background: "#1A88F8",
+        borderRadius: 8,
+        boxShadow: "0 0 0 2px var(--ck-body-background)",
+        width: 8,
+        height: 8
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+      "aria-hidden": "true",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        overflow: "visible"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "10",
+        cy: "10",
+        r: "9",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+        d: "M16.5 16.775C14.8618 15.0649 12.5552 14 10 14C7.44477 14 5.13825 15.0649 3.5 16.775",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
+        cx: "10",
+        cy: "8",
+        r: "3",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      })]
+    })]
+  });
+};
+var InfoIcon = function InfoIcon2(param) {
+  var {
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("svg", {
+    "aria-hidden": "true",
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 11C20 15.9706 15.9706 20 11 20C6.02944 20 2 15.9706 2 11C2 6.02944 6.02944 2 11 2C15.9706 2 20 6.02944 20 11ZM22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11ZM11.6445 12.7051C11.6445 13.1348 11.3223 13.4678 10.7744 13.4678C10.2266 13.4678 9.92578 13.1885 9.92578 12.6191V12.4795C9.92578 11.4268 10.4951 10.8574 11.2686 10.3203C12.2031 9.67578 12.665 9.32129 12.665 8.59082C12.665 7.76367 12.0205 7.21582 11.043 7.21582C10.3232 7.21582 9.80762 7.57031 9.45312 8.16113C9.38282 8.24242 9.32286 8.32101 9.2667 8.39461C9.04826 8.68087 8.88747 8.8916 8.40039 8.8916C8.0459 8.8916 7.66992 8.62305 7.66992 8.15039C7.66992 7.96777 7.70215 7.7959 7.75586 7.61328C8.05664 6.625 9.27051 5.75488 11.1182 5.75488C12.9336 5.75488 14.5234 6.71094 14.5234 8.50488C14.5234 9.7832 13.7822 10.417 12.7402 11.1045C11.999 11.5986 11.6445 11.9746 11.6445 12.5762V12.7051ZM11.9131 15.5625C11.9131 16.1855 11.376 16.6797 10.7529 16.6797C10.1299 16.6797 9.59277 16.1748 9.59277 15.5625C9.59277 14.9395 10.1191 14.4453 10.7529 14.4453C11.3867 14.4453 11.9131 14.9287 11.9131 15.5625Z",
+      fill: "currentColor"
+    })
+  });
+};
+var CloseIcon = function CloseIcon2(param) {
+  var {
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.motion.svg, {
+    width: 14,
+    height: 14,
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+      d: "M1 13L13 1M1 1L13 13",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    })
+  });
+};
+var BackIcon = function BackIcon2(param) {
+  var {
+    ...props
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.motion.svg, {
+    width: 9,
+    height: 16,
+    viewBox: "0 0 9 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+      d: "M8 1L1 8L8 15",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+var contentTransitionDuration = 0.22;
+var contentVariants = {
+  initial: {
+    //willChange: 'transform,opacity',
+    zIndex: 2,
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: contentTransitionDuration * 0.75,
+      delay: contentTransitionDuration * 0.25,
+      ease: [0.26, 0.08, 0.25, 1]
+    }
+  },
+  exit: {
+    zIndex: 1,
+    opacity: 0,
+    pointerEvents: "none",
+    position: "absolute",
+    left: ["50%", "50%"],
+    x: ["-50%", "-50%"],
+    transition: {
+      duration: contentTransitionDuration,
+      ease: [0.26, 0.08, 0.25, 1]
+    }
+  }
+};
+var Modal = function Modal2(param) {
+  var {
+    open,
+    pages,
+    pageId,
+    positionInside,
+    inline,
+    demo,
+    onClose,
+    onBack,
+    onInfo
+  } = param;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
+  var _context_connector, _context_options, _context_options1, _context_options2, _context_options3, _context_options4;
+  var context = (0, import_ConnectKit.useContext)();
+  var themeContext = (0, import_ConnectKitThemeProvider.useThemeContext)();
+  var mobile = (0, import_utils.isMobile)();
+  var {
+    isSignedIn,
+    reset
+  } = (0, import_siwe.useSIWE)();
+  var wallet = (0, import_useWallets.useWallet)((_context_connector = context.connector) === null || _context_connector === void 0 ? void 0 : _context_connector.id);
+  var walletInfo = {
+    name: wallet === null || wallet === void 0 ? void 0 : wallet.name,
+    shortName: (_ref = wallet === null || wallet === void 0 ? void 0 : wallet.shortName) !== null && _ref !== void 0 ? _ref : wallet === null || wallet === void 0 ? void 0 : wallet.name,
+    icon: (_ref1 = wallet === null || wallet === void 0 ? void 0 : wallet.iconConnector) !== null && _ref1 !== void 0 ? _ref1 : wallet === null || wallet === void 0 ? void 0 : wallet.icon,
+    iconShape: (_ref2 = wallet === null || wallet === void 0 ? void 0 : wallet.iconShape) !== null && _ref2 !== void 0 ? _ref2 : "circle",
+    iconShouldShrink: wallet === null || wallet === void 0 ? void 0 : wallet.iconShouldShrink
+  };
+  var locales = (0, import_useLocales.default)({
+    CONNECTORNAME: walletInfo === null || walletInfo === void 0 ? void 0 : walletInfo.name
+  });
+  var [state, setOpen] = (0, import_react_transition_state.useTransition)({
+    timeout: mobile ? 160 : 160,
+    // different animations, 10ms extra to avoid final-frame drops
+    preEnter: true,
+    mountOnEnter: true,
+    unmountOnExit: true
+  });
+  var mounted = !(state === "exited" || state === "unmounted");
+  var rendered = state === "preEnter" || state !== "exiting";
+  var currentDepth = context.route === import_ConnectKit.routes.CONNECTORS ? 0 : context.route === import_ConnectKit.routes.DOWNLOAD ? 2 : 1;
+  var prevDepth = (0, import_usePrevious.default)(currentDepth, currentDepth);
+  if (!positionInside) (0, import_useLockBodyScroll.default)(mounted);
+  var prevPage = (0, import_usePrevious.default)(pageId, pageId);
+  (0, import_react.useEffect)(function () {
+    setOpen(open);
+    if (open) setInTransition(void 0);
+  }, [open]);
+  var [dimensions, setDimensions] = (0, import_react.useState)({
+    width: void 0,
+    height: void 0
+  });
+  var [inTransition, setInTransition] = (0, import_react.useState)(void 0);
+  var updateBounds = function updateBounds2(node) {
+    var bounds = {
+      width: node === null || node === void 0 ? void 0 : node.offsetWidth,
+      height: node === null || node === void 0 ? void 0 : node.offsetHeight
+    };
+    setDimensions({
+      width: `${bounds === null || bounds === void 0 ? void 0 : bounds.width}px`,
+      height: `${bounds === null || bounds === void 0 ? void 0 : bounds.height}px`
+    });
+  };
+  var blockTimeout;
+  var contentRef = (0, import_react.useCallback)(function (node) {
+    if (!node) return;
+    ref.current = node;
+    setInTransition(inTransition === void 0 ? false : true);
+    clearTimeout(blockTimeout);
+    blockTimeout = setTimeout(function () {
+      return setInTransition(false);
+    }, 360);
+    updateBounds(node);
+  }, [open, inTransition]);
+  var {
+    chain
+  } = (0, import_wagmi.useAccount)();
+  var {
+    switchChain
+  } = (0, import_wagmi.useSwitchChain)();
+  var ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(function () {
+    if (ref.current) updateBounds(ref.current);
+  }, [chain, switchChain, mobile, isSignedIn, context.options, context.resize]);
+  (0, import_react.useEffect)(function () {
+    if (!mounted) {
+      setDimensions({
+        width: void 0,
+        height: void 0
+      });
+      return;
+    }
+    var listener = function listener2(e) {
+      if (e.key === "Escape" && onClose) onClose();
+    };
+    document.addEventListener("keydown", listener);
+    return function () {
+      document.removeEventListener("keydown", listener);
+    };
+  }, [mounted, onClose]);
+  var dimensionsCSS = {
+    "--height": dimensions.height,
+    "--width": dimensions.width
+  };
+  function shouldUseQrcode() {
+    if (!wallet) return false;
+    var useInjector = !wallet.getWalletConnectDeeplink || wallet.isInstalled;
+    return !useInjector;
+  }
+  function getHeading() {
+    switch (context.route) {
+      case import_ConnectKit.routes.ABOUT:
+        return locales.aboutScreen_heading;
+      case import_ConnectKit.routes.CONNECT:
+        if (shouldUseQrcode()) {
+          var _wallet_connector;
+          return (0, import_utils.isWalletConnectConnector)(wallet === null || wallet === void 0 ? void 0 : (_wallet_connector = wallet.connector) === null || _wallet_connector === void 0 ? void 0 : _wallet_connector.id) ? locales.scanScreen_heading : locales.scanScreen_heading_withConnector;
+        } else {
+          return walletInfo === null || walletInfo === void 0 ? void 0 : walletInfo.name;
+        }
+      case import_ConnectKit.routes.CONNECTORS:
+        return locales.connectorsScreen_heading;
+      case import_ConnectKit.routes.MOBILECONNECTORS:
+        return locales.mobileConnectorsScreen_heading;
+      case import_ConnectKit.routes.DOWNLOAD:
+        return locales.downloadAppScreen_heading;
+      case import_ConnectKit.routes.ONBOARDING:
+        return locales.onboardingScreen_heading;
+      case import_ConnectKit.routes.PROFILE:
+        return locales.profileScreen_heading;
+      case import_ConnectKit.routes.SWITCHNETWORKS:
+        return locales.switchNetworkScreen_heading;
+      case import_ConnectKit.routes.SIGNINWITHETHEREUM:
+        return isSignedIn ? locales.signInWithEthereumScreen_signedIn_heading : locales.signInWithEthereumScreen_signedOut_heading;
+      default:
+        return "";
+    }
+  }
+  var Content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles.ResetContainer, {
+    $useTheme: (_ref3 = demo === null || demo === void 0 ? void 0 : demo.theme) !== null && _ref3 !== void 0 ? _ref3 : themeContext.theme,
+    $useMode: (_ref4 = demo === null || demo === void 0 ? void 0 : demo.mode) !== null && _ref4 !== void 0 ? _ref4 : themeContext.mode,
+    $customTheme: (_ref5 = demo === null || demo === void 0 ? void 0 : demo.customTheme) !== null && _ref5 !== void 0 ? _ref5 : themeContext.customTheme,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styles2.ModalContainer, {
+      role: "dialog",
+      style: {
+        pointerEvents: rendered ? "auto" : "none",
+        position: positionInside ? "absolute" : void 0
+      },
+      children: [!inline && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.BackgroundOverlay, {
+        $active: rendered,
+        onClick: onClose,
+        $blur: (_context_options = context.options) === null || _context_options === void 0 ? void 0 : _context_options.overlayBlur
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styles2.Container, {
+        style: dimensionsCSS,
+        initial: false,
+        children: [
+        // transition={{
+        //   ease: [0.2555, 0.1111, 0.2555, 1.0001],
+        //   duration: !positionInside && state !== 'entered' ? 0 : 0.24,
+        // }}
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)("div", {
+          style: {
+            pointerEvents: inTransition ? "all" : "none",
+            // Block interaction while transitioning
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: "var(--width)",
+            zIndex: 9,
+            transition: "width 200ms ease"
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styles2.BoxContainer, {
+          className: `${rendered && "active"}`,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, {
+            initial: false,
+            children: ((_context_options1 = context.options) === null || _context_options1 === void 0 ? void 0 : _context_options1.disclaimer) && context.route === import_ConnectKit.routes.CONNECTORS && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.DisclaimerBackground, {
+              initial: {
+                opacity: 0
+              },
+              animate: {
+                opacity: 1
+              },
+              exit: {
+                opacity: 0
+              },
+              transition: {
+                delay: 0,
+                duration: 0.2,
+                ease: [0.25, 0.1, 0.25, 1]
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.Disclaimer, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+                  children: (_context_options2 = context.options) === null || _context_options2 === void 0 ? void 0 : _context_options2.disclaimer
+                })
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, {
+            initial: false,
+            children: context.errorMessage && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styles2.ErrorMessage, {
+              initial: {
+                y: "10%",
+                x: "-50%"
+              },
+              animate: {
+                y: "-100%"
+              },
+              exit: {
+                y: "100%"
+              },
+              transition: {
+                duration: 0.2,
+                ease: "easeInOut"
+              },
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+                children: context.errorMessage
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+                onClick: function onClick() {
+                  return context.displayError(null);
+                },
+                style: {
+                  position: "absolute",
+                  right: 24,
+                  top: 24,
+                  cursor: "pointer"
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CloseIcon, {})
+              })]
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styles2.ControllerContainer, {
+            children: [onClose && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.CloseButton, {
+              "aria-label": (0, import_utils.flattenChildren)(locales.close).toString(),
+              onClick: onClose,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(CloseIcon, {})
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+              style: {
+                position: "absolute",
+                top: 23,
+                left: 20,
+                width: 32,
+                height: 32
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, {
+                children: onBack ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.BackButton, {
+                  disabled: inTransition,
+                  "aria-label": (0, import_utils.flattenChildren)(locales.back).toString(),
+                  onClick: onBack,
+                  initial: {
+                    opacity: 0
+                  },
+                  animate: {
+                    opacity: 1
+                  },
+                  exit: {
+                    opacity: 0
+                  },
+                  transition: {
+                    duration: mobile ? 0 : 0.1,
+                    delay: mobile ? 0.01 : 0
+                  },
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(BackIcon, {})
+                }, "backButton") : context.route === import_ConnectKit.routes.PROFILE && context.signInWithEthereum ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+                  children: [!isSignedIn && !((_context_options3 = context.options) === null || _context_options3 === void 0 ? void 0 : _context_options3.hideTooltips) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      pointerEvents: "none"
+                    },
+                    initial: {
+                      opacity: 0,
+                      scale: 0.8
+                    },
+                    animate: {
+                      opacity: 1,
+                      scale: 1,
+                      transition: {
+                        delay: 0.5,
+                        duration: 0.2
+                      }
+                    },
+                    exit: {
+                      opacity: 0,
+                      scale: 0.6,
+                      transition: {
+                        delay: 0,
+                        duration: mobile ? 0 : 0.1
+                      }
+                    },
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.SignInTooltip, {
+                      children: locales.signInWithEthereumScreen_tooltip
+                    })
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.SiweButton, {
+                    disabled: inTransition,
+                    "aria-label": locales.signInWithEthereumScreen_signedOut_heading,
+                    onClick: function onClick() {
+                      reset();
+                      context.setRoute(import_ConnectKit.routes.SIGNINWITHETHEREUM);
+                    },
+                    initial: {
+                      opacity: 0
+                    },
+                    animate: {
+                      opacity: 1
+                    },
+                    exit: {
+                      opacity: 0
+                    },
+                    transition: {
+                      duration: mobile ? 0 : 0.1,
+                      delay: mobile ? 0.01 : 0
+                    },
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ProfileIcon, {
+                      isSignedIn
+                    })
+                  }, "siweButton")]
+                }) : onInfo && !((_context_options4 = context.options) === null || _context_options4 === void 0 ? void 0 : _context_options4.hideQuestionMarkCTA) && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.InfoButton, {
+                  disabled: inTransition,
+                  "aria-label": (0, import_utils.flattenChildren)(locales.moreInformation).toString(),
+                  onClick: onInfo,
+                  initial: {
+                    opacity: 0
+                  },
+                  animate: {
+                    opacity: 1
+                  },
+                  exit: {
+                    opacity: 0
+                  },
+                  transition: {
+                    duration: mobile ? 0 : 0.1,
+                    delay: mobile ? 0.01 : 0
+                  },
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InfoIcon, {})
+                }, "infoButton")
+              })
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.ModalHeading, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: 52,
+                  right: 52,
+                  display: "flex",
+                  //alignItems: 'center',
+                  justifyContent: "center"
+                },
+                initial: {
+                  opacity: 0
+                },
+                animate: {
+                  opacity: 1
+                },
+                exit: {
+                  opacity: 0
+                },
+                transition: {
+                  duration: mobile ? 0 : 0.17,
+                  delay: mobile ? 0.01 : 0
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FitText.default, {
+                  children: getHeading()
+                })
+              }, `${context.route}-${isSignedIn ? "signedIn" : ""}`)
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.InnerContainer, {
+            children: Object.keys(pages).map(function (key) {
+              var page = pages[key];
+              return (
+                // TODO: We may need to use the follow check avoid unnecessary computations, but this causes a bug where the content flashes
+                // (key === pageId || key === prevPage) && (
+                /* @__PURE__ */
+                (0, import_jsx_runtime.jsx)(Page, {
+                  open: key === pageId,
+                  initial: !positionInside && state !== "entered",
+                  enterAnim: key === pageId ? currentDepth > prevDepth ? "active-scale-up" : "active" : "",
+                  exitAnim: key !== pageId ? currentDepth < prevDepth ? "exit-scale-down" : "exit" : "",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.PageContents, {
+                    ref: contentRef,
+                    style: {
+                      pointerEvents: key === pageId && rendered ? "auto" : "none"
+                    },
+                    children: page
+                  }, `inner-${key}`)
+                }, key)
+              );
+            })
+          })]
+        })]
+      })]
+    })
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: positionInside ? Content : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Portal.default, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useFocusTrap.default, {
+            children: Content
+          })
+        })
+      })
+    })
+  });
+};
+var Page = function Page2(param) {
+  var {
+    children,
+    open,
+    initial,
+    prevDepth,
+    currentDepth,
+    enterAnim,
+    exitAnim
+  } = param;
+  var [state, setOpen] = (0, import_react_transition_state.useTransition)({
+    timeout: 400,
+    preEnter: true,
+    initialEntered: open,
+    mountOnEnter: true,
+    unmountOnExit: true
+  });
+  var mounted = !(state === "exited" || state === "unmounted");
+  var rendered = state === "preEnter" || state !== "exiting";
+  (0, import_react.useEffect)(function () {
+    setOpen(open);
+  }, [open]);
+  if (!mounted) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.PageContainer, {
+    className: `${rendered ? enterAnim : exitAnim}`,
+    style: {
+      animationDuration: initial ? "0ms" : void 0,
+      animationDelay: initial ? "0ms" : void 0
+    },
+    children
+  });
+};
+var OrDivider = function OrDivider2(param) {
+  var {
+    children,
+    hideHr
+  } = param;
+  var locales = (0, import_useLocales.default)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styles2.TextWithHr, {
+    $disableHr: hideHr,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      children: children !== null && children !== void 0 ? children : locales.or
+    })
+  });
+};
+var Modal_default = Modal;
+//# sourceMappingURL=index.native.js.map