@getpara/react-sdk 1.8.0 → 2.0.0-alpha.3

package/dist/modal/components/AuthInput/phoneMasks.js

@@ -1,253 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-const defaultPhoneMask = "#################";
-const phoneMasks = {
-  AF: "### ### ####",
-  AX: "## ### ####",
-  AL: "(###) ### ###",
-  DZ: "(###) ### ###",
-  AS: "(###) ###-####",
-  AD: "### ###",
-  AO: "(###) ### ###",
-  AI: "(###) ###-####",
-  AG: "(###) ###-####",
-  AR: "(###) ###-####",
-  AM: "## ### ###",
-  AW: "### ####",
-  AU: "# #### ####",
-  AT: "(###) ### ####",
-  AZ: "(###) ### ## ##",
-  BS: "(###) ###-####",
-  BH: "#### ####",
-  BD: "# ### ###",
-  BB: "(###) ###-####",
-  BY: "(##) ###-##-##",
-  BE: "(###) ### ###",
-  BZ: "###-####",
-  BJ: "##-##-####",
-  BM: "(###) ###-####",
-  BT: "# ### ###",
-  BO: "# ### ####",
-  BA: "## ###-###",
-  BW: "## ### ###",
-  BR: "(##) ####-####",
-  IO: "### ####",
-  BN: "### ####",
-  BG: "(###) ### ###",
-  BF: "## ## ####",
-  BI: "## ## ####",
-  KH: "## ### ###",
-  CM: "#### ####",
-  CA: "(###) ###-####",
-  CV: "(###) ## ##",
-  KY: "(###) ###-####",
-  CF: "## ## ####",
-  TD: "## ## ## ##",
-  CL: "# #### ####",
-  CN: "(###) #### ####",
-  CX: "# ## ## ##",
-  CC: "# ## ## ##",
-  CO: "(###) ### ####",
-  KM: "## ## ## ##",
-  CG: "## ### ####",
-  CK: "## ###",
-  CR: "#### ####",
-  HR: "## #### ###",
-  CU: "# ### ####",
-  CY: "## ### ###",
-  CZ: "### ### ###",
-  CD: "### ### ###",
-  DK: "## ## ## ##",
-  DJ: "## ## ## ##",
-  DM: "(###) ###-####",
-  DO: "(###) ###-####",
-  EC: "## ### ####",
-  EG: "# #### ####",
-  SV: "#### ####",
-  GQ: "## ### ####",
-  ER: "# ### ###",
-  EE: "#### ####",
-  SZ: "#### ####",
-  ET: "## ### ####",
-  FK: "#####",
-  FO: "######",
-  FJ: "### ####",
-  FI: "## ### ####",
-  FR: "## ## ## ## ##",
-  GF: "### ## ## ##",
-  PF: "## ## ##",
-  GA: "# ## ## ##",
-  GM: "### ####",
-  GE: "(###) ## ## ##",
-  DE: "###########",
-  GH: "## ### ####",
-  GI: "### #####",
-  GR: "(###) ### ####",
-  GL: "## ## ##",
-  GD: "(###) ###-####",
-  GP: "### ## ## ##",
-  GU: "(###) ###-####",
-  GT: "# ### ####",
-  GG: "(####) ### ###",
-  GN: "## ### ###",
-  GW: "# #######",
-  GY: "### ####",
-  HT: "## ## ####",
-  VA: "### ####",
-  HN: "####-####",
-  HK: "#### ####",
-  HU: "(##) ### ####",
-  IS: "### ####",
-  IN: "####### ###",
-  ID: "(###) ###-####",
-  IR: "(###) ### ####",
-  IQ: "(###) ### ####",
-  IE: "(###) ### ###",
-  IM: "(####) ### ###",
-  IL: "#-###-####",
-  IT: "(###) #### ###",
-  CI: "## ## ## ##",
-  JM: "(###) ###-####",
-  JP: "(###) ###-####",
-  JE: "(####) ### ###",
-  JO: "# #### ####",
-  KZ: "(###) ###-##-##",
-  KE: "### ######",
-  KI: "## ###",
-  KP: "###-###-####",
-  KR: "(###) ####-####",
-  XK: "## ### ###",
-  KW: "#### ####",
-  KG: "(###) ###-###",
-  LA: "## ## ####",
-  LV: "## ### ###",
-  LB: "## ### ###",
-  LS: "# ### ####",
-  LR: "## ### ###",
-  LY: "##-#######",
-  LI: "(###) ###-####",
-  LT: "(###) ## ###",
-  LU: "### ### ###",
-  MO: "#### ####",
-  MG: "## ## ### ##",
-  MW: "# #### ####",
-  MY: "(###) ###-###",
-  MV: "###-####",
-  ML: "## ## ####",
-  MT: "#### ####",
-  MH: "###-####",
-  MQ: "### ## ## ##",
-  MR: "## ## ####",
-  MU: "### ####",
-  YT: "### ## ## ##",
-  MX: "(###) ###-####",
-  FM: "### ####",
-  MD: "#### ####",
-  MC: "(###) ###-###",
-  MN: "## ## ####",
-  ME: "## ### ###",
-  MS: "(###) ###-####",
-  MA: "#-####-####",
-  MZ: "## ### ####",
-  MM: "# ### ####",
-  NA: "## ### ####",
-  NR: "### ####",
-  NP: "#-######",
-  NL: "## ### ####",
-  NC: "##.##.##",
-  NZ: "## ### ###",
-  NI: "#### ####",
-  NE: "## ## ## ##",
-  NG: "## ### ####",
-  NU: "####",
-  NF: "### ###",
-  MK: "## ### ###",
-  MP: "(###) ###-####",
-  NO: "### ## ###",
-  OM: "#### ####",
-  PK: "(###) #######",
-  PW: "### ####",
-  PS: "## ### ####",
-  PA: "####-####",
-  PG: "(###) ## ###",
-  PY: "## ### ####",
-  PE: "(###) ### ###",
-  PH: "(###) ###-####",
-  PN: "### ####",
-  PL: "### ### ###",
-  PT: "## ### ####",
-  PR: "(###) ###-####",
-  QA: "#### ####",
-  RE: "##### ####",
-  RO: "## ### ####",
-  RU: "(###) ###-##-##",
-  RW: "(###) ### ###",
-  BL: "### ## ## ##",
-  SH: "####",
-  KN: "(###) ###-####",
-  LC: "(###) ###-####",
-  MF: "### ## ## ##",
-  PM: "## ## ##",
-  VC: "(###) ###-####",
-  WS: "####",
-  SM: "(####) ######",
-  ST: "## ####",
-  SA: "# ### ####",
-  SN: "## ### ####",
-  RS: "## ### ####",
-  SC: "# ### ###",
-  SL: "## ######",
-  SG: "#### ####",
-  SX: "(###) ###-####",
-  SK: "(###) ### ###",
-  SI: "## ### ###",
-  SB: "### ####",
-  SO: "# ### ###",
-  ZA: "## ### ####",
-  GS: "####",
-  SS: "# ### ####",
-  ES: "### ### ###",
-  LK: "## ### ####",
-  SD: "## ### ####",
-  SR: "###-####",
-  SJ: "### ## ###",
-  SE: "## ### ####",
-  CH: "## ### ####",
-  SY: "## #### ###",
-  TW: "#### ####",
-  TJ: "## ### ####",
-  TZ: "## ### ####",
-  TH: "# #### ####",
-  TL: "#### ####",
-  TG: "## ## ## ##",
-  TK: "####",
-  TO: "####",
-  TT: "(###) ###-####",
-  TN: "## ### ###",
-  TR: "(###) ### ####",
-  TM: "# ### ###",
-  TC: "(###) ###-####",
-  TV: "####",
-  UG: "## ### ####",
-  UA: "## ### ####",
-  AE: "# ### ####",
-  GB: "#### ### ###",
-  US: "(###) ###-####",
-  UM: "(###) ###-####",
-  UY: "# ### ## ##",
-  UZ: "## ### ####",
-  VU: "## ####",
-  VE: "###-###-####",
-  VN: "## #### ###",
-  VG: "(###) ###-####",
-  VI: "(###) ###-####",
-  WF: "## ####",
-  EH: "###-###-###",
-  YE: "# ### ###",
-  ZM: "## ### ####",
-  ZW: "# #######"
-};
-export {
-  defaultPhoneMask,
-  phoneMasks
-};

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -1,37 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
-import { AuthMainStepContent } from "./AuthMainStepContent.js";
-import { CenteredText } from "../common.js";
-const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-  const logo = useThemeStore((state) => state.getLogo());
-  const appName = useThemeStore((state) => state.appName);
-  const authLayout = useThemeStore((state) => state.authLayout);
-  const embeddedModal = useThemeStore((state) => state.embeddedModal);
-  const firstLayoutType = authLayout[0].split(":")[0];
-  const heading = firstLayoutType === "AUTH" ? "Sign Up or Login" : "Connect Wallet";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    logo && /* @__PURE__ */ jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ""}logo` }),
-    !embeddedModal && /* @__PURE__ */ jsx(CenteredText, { variant: logo ? "bodyM" : "headingS", weight: "semiBold", children: heading }),
-    /* @__PURE__ */ jsx(
-      AuthMainStepContent,
-      {
-        disableEmailLogin,
-        disablePhoneLogin,
-        oAuthMethods
-      }
-    )
-  ] });
-};
-const Logo = styled.img`
-  height: 100px;
-  max-width: 260px;
-  object-fit: contain;
-  box-sizing: content-box;
-  align-self: center;
-`;
-export {
-  AuthMainStep
-};

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -1,113 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment2, useMemo } from "react";
-import { CpslButton, CpslDivider, CpslIconGroup } from "@getpara/react-components";
-import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { AuthLayout } from "../../types/modalProps.js";
-import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
-import { AuthOptions } from "../AuthOptions/AuthOptions.js";
-const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-  const { wallets } = useExternalWallets();
-  const authLayout = useThemeStore((state) => state.authLayout);
-  const setStep = useModalStore((state) => state.setStep);
-  const oAuthLogoVariant = useThemeStore((state) => state.oAuthLogoVariant);
-  const isDark = useThemeStore((state) => state.isDark);
-  const useBrandedLogos = oAuthLogoVariant === "default";
-  const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
-  const handleCondensedAuthClick = () => {
-    setStep(ModalStep.AUTH_MORE);
-  };
-  const handleCondensedExternalClick = () => {
-    setStep(ModalStep.EX_WALLET_MORE);
-  };
-  const Content = useMemo(() => {
-    const methods = [];
-    authLayout.forEach((layout) => {
-      switch (layout) {
-        case AuthLayout.AUTH_FULL: {
-          methods.push([
-            /* @__PURE__ */ jsx(
-              AuthOptions,
-              {
-                oAuthMethods,
-                disableEmailLogin,
-                disablePhoneLogin
-              },
-              "authFull"
-            ),
-            layout
-          ]);
-          break;
-        }
-        case AuthLayout.AUTH_CONDENSED: {
-          const icons = [];
-          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method]));
-          methods.push([
-            /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [
-              /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              "Sign Up or Login",
-              /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
-            ] }, "authCondensed"),
-            layout
-          ]);
-          break;
-        }
-        case AuthLayout.EXTERNAL_FULL: {
-          if (!!wallets.length) {
-            methods.push([/* @__PURE__ */ jsx(ExternalWallets, {}, "externalWallets"), layout]);
-          }
-          break;
-        }
-        case AuthLayout.EXTERNAL_CONDENSED: {
-          const icons = [];
-          wallets == null ? void 0 : wallets.forEach((wallet) => icons.push(wallet.iconUrl));
-          methods.push([
-            /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedExternalClick, variant: "tertiary", fullWidth: true, children: [
-              /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              "Connect Wallet",
-              /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
-            ] }, "authCondensed"),
-            layout
-          ]);
-          break;
-        }
-        default: {
-          break;
-        }
-      }
-    });
-    return /* @__PURE__ */ jsx(Fragment, { children: methods.map(([reactNode, key], index) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-      reactNode,
-      methods.length > 1 && index < methods.length - 1 && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }, "or")
-    ] }, key)) });
-  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets, authLayout]);
-  return /* @__PURE__ */ jsx(Container, { "data-testid": "main-auth-step-content", children: Content });
-};
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const StyledIconGroup = styled(CpslIconGroup)`
-  --icon-item-color: ${({ $isDark }) => $isDark ? "white" : "black"};
-  flex: 1;
-  justify-content: flex-end;
-`;
-const IconGroupSpacer = styled(StyledIconGroup)`
-  visibility: hidden;
-`;
-const CondensedButton = styled(CpslButton)`
-  --button-justify-content: space-between;
-
-  &::part(button-native) {
-    max-height: 50px;
-  }
-`;
-export {
-  AuthMainStepContent
-};

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -1,33 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import styled from "styled-components";
-import { OAuth } from "../OAuth/OAuth.js";
-import { AuthInput } from "../AuthInput/AuthInput.js";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-const AuthOptions = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-  const { wallets } = useExternalWallets();
-  const showAllOAuth = useModalStore((state) => state.step === ModalStep.AUTH_MORE);
-  const Content = useMemo(() => {
-    const Methods = [];
-    if (!!(oAuthMethods == null ? void 0 : oAuthMethods.length)) {
-      Methods.push(/* @__PURE__ */ jsx(OAuth, { methods: oAuthMethods }, "oAuth"));
-    }
-    if (!disableEmailLogin || !disablePhoneLogin) {
-      Methods.push(/* @__PURE__ */ jsx(AuthInput, { disableEmailLogin, disablePhoneLogin }, "input"));
-    }
-    return /* @__PURE__ */ jsx(Fragment, { children: Methods });
-  }, [showAllOAuth, oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets]);
-  return /* @__PURE__ */ jsx(Container, { children: Content });
-};
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-export {
-  AuthOptions
-};

package/dist/modal/components/AwaitingBiometricsStep/AwaitingBiometricsStep.js

@@ -1,18 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { useModalStore } from "../../stores/index.js";
-import { Waiting } from "../Waiting/Waiting.js";
-const AwaitingBiometricsStep = () => {
-  const isLogin = useModalStore((state) => state.isLogin());
-  return /* @__PURE__ */ jsx(
-    Waiting,
-    {
-      heading: isLogin ? "Waiting for Passkey" : "Creating Passkey",
-      subheading: "Follow the prompts presented by your browser."
-    }
-  );
-};
-export {
-  AwaitingBiometricsStep
-};

package/dist/modal/components/AwaitingOAuthStep/AwaitingOAuthStep.js

@@ -1,10 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { Waiting } from "../Waiting/Waiting.js";
-const AwaitingOAuthStep = () => {
-  return /* @__PURE__ */ jsx(Waiting, { heading: "Complete Login", subheading: "Follow the prompts presented by your browser." });
-};
-export {
-  AwaitingOAuthStep
-};

package/dist/modal/components/AwaitingPasswordStep/AwaitingPasswordStep.js

@@ -1,18 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { useModalStore } from "../../stores/index.js";
-import { Waiting } from "../Waiting/Waiting.js";
-const AwaitingPasswordStep = () => {
-  const isLogin = useModalStore((state) => state.isLogin());
-  return /* @__PURE__ */ jsx(
-    Waiting,
-    {
-      heading: isLogin ? "Waiting for Password" : "Creating Password",
-      subheading: "Follow the prompts presented by your browser."
-    }
-  );
-};
-export {
-  AwaitingPasswordStep
-};

package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js

@@ -1,44 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslIcon, CpslInfoBox, CpslText } from "@getpara/react-components";
-import { InfoBoxContent, InfoBoxHeader, StepContainer } from "../common.js";
-import { useEffect, useRef, useState } from "react";
-import { Waiting } from "../Waiting/Waiting.js";
-import { useThemeStore } from "../../stores/index.js";
-const AwaitingWalletCreationStep = () => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
-  const [showInfoBox, setShowInfoBox] = useState(false);
-  const showInfoBoxTimeout = useRef();
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      showInfoBoxTimeout.current = window.setTimeout(() => {
-        setShowInfoBox(true);
-      }, 4e3);
-    }
-    return () => clearTimeout(showInfoBoxTimeout.current);
-  }, []);
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsx(
-      Waiting,
-      {
-        heading: hideWallets ? "Creating Your Account" : "Creating Your Wallet",
-        subheading: "This should only take a couple of seconds."
-      }
-    ),
-    showInfoBox && /* @__PURE__ */ jsx(CpslInfoBox, { children: /* @__PURE__ */ jsxs(InfoBoxContent, { children: [
-      /* @__PURE__ */ jsxs(InfoBoxHeader, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { icon: "clock" }),
-        /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Hang on" })
-      ] }),
-      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", weight: "medium", color: "secondary", children: [
-        "Creating your ",
-        hideWallets ? "account" : "wallet",
-        " is taking a little longer than expected, but we're working on it!"
-      ] })
-    ] }) })
-  ] });
-};
-export {
-  AwaitingWalletCreationStep
-};

package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js

@@ -1,55 +0,0 @@
-"use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
-import { InnerStepContainer, StepContainer, Heading, QRContainer } from "../common.js";
-import { useCopyToClipboard, UserIdentifier } from "@getpara/react-common";
-import { useCreateAccount } from "../../hooks/useCreateAccount.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const BiometricCreationStep = () => {
-  const createAccount = useCreateAccount();
-  const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
-  const webAuthURLForCreate = useModalStore((state) => state.webAuthURLForCreate);
-  const iFrameUrl = useModalStore((state) => state.iFrameUrl);
-  const isPasskeySupported = useModalStore((state) => state.isPasskeySupported);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
-  const [isCopied, copy] = useCopyToClipboard();
-  const handleCopy = () => {
-    copy(webAuthURLForCreate);
-  };
-  const isBoth = !!webAuthURLForCreate && !!iFrameUrl;
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: para.isExternalWalletAuth ? `Finish setup for your${appName ? ` ${appName}` : ""} wallet` : isBoth ? "Secure Your Account" : "Create Passkey" }),
-      /* @__PURE__ */ jsx(UserIdentifier, __spreadValues({}, authInfo)),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? "Choose a password or set up a passkey" : "Your Passkey keeps your account safe." })
-    ] }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      isPasskeySupported ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: createAccount.withPasskey, children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
-        isBoth ? "Create Passkey" : "Create"
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-        /* @__PURE__ */ jsx(QRContainer, { children: !webAuthURLForCreate ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: webAuthURLForCreate }) }),
-        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-          isCopied ? "Copied" : "Copy Link"
-        ] })
-      ] }),
-      isBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: createAccount.withPassword, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
-          "Choose Password"
-        ] })
-      ] })
-    ] })
-  ] });
-};
-export {
-  BiometricCreationStep
-};

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -1,93 +0,0 @@
-"use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
-import { useMemo } from "react";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { Heading, StepContainer, InnerStepContainer } from "../common.js";
-import { openPopup } from "../../utils/openPopup.js";
-import styled from "styled-components";
-import { AuthMethod } from "@getpara/web-sdk";
-import { formatBiometricHints, KnownDevices, UserIdentifier } from "@getpara/react-common";
-const BiometricLoginStep = () => {
-  const refs = useModalStore((state) => state.refs);
-  const supportedAuthMethods = useModalStore((state) => state.supportedAuthMethods);
-  const passwordUrlForLogin = useModalStore((state) => state.passwordUrlForLogin);
-  const webAuthURLForLogin = useModalStore((state) => state.webAuthURLForLogin);
-  const setStep = useModalStore((state) => state.setStep);
-  const biometricLocationHints = useModalStore((state) => state.biometricLocationHints);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
-  const passkeysSupported = useModalStore((state) => state.isPasskeySupported);
-  const formattedHints = useMemo(() => formatBiometricHints(biometricLocationHints), [biometricLocationHints]);
-  const handlePasskeyClick = () => {
-    refs.popupWindow.current = openPopup({
-      url: webAuthURLForLogin,
-      target: "ParaPasskey",
-      type: "LOGIN_PASSKEY",
-      current: refs.popupWindow.current
-    });
-    setStep(ModalStep.AWAITING_BIOMETRIC_LOGIN);
-  };
-  const handlePasswordClick = () => {
-    refs.popupWindow.current = openPopup({
-      url: passwordUrlForLogin,
-      target: "ParaPassword",
-      type: "LOGIN_PASSWORD",
-      current: refs.popupWindow.current
-    });
-    setStep(ModalStep.AWAITING_PASSWORD_LOGIN);
-  };
-  function shouldShowWelcomeBack() {
-    return !(biometricLocationHints == null ? void 0 : biometricLocationHints.length) || passkeysSupported && formattedHints.isOnKnownDevice || (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD);
-  }
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      shouldShowWelcomeBack() && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
-      /* @__PURE__ */ jsx(UserIdentifier, __spreadValues({}, authInfo))
-    ] }),
-    /* @__PURE__ */ jsxs(MainContainer, { children: [
-      (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD) && passwordUrlForLogin && /* @__PURE__ */ jsx(PasswordOnly, { handlePasswordClick }),
-      (supportedAuthMethods == null ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY) && webAuthURLForLogin && /* @__PURE__ */ jsx(
-        BiometricOnly,
-        {
-          handlePasskeyClick,
-          formattedHints,
-          shortLoginLink: webAuthURLForLogin,
-          passkeysSupported,
-          biometricLocationHints
-        }
-      )
-    ] })
-  ] });
-};
-const PasswordOnly = ({ handlePasswordClick }) => {
-  return /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: "Login" });
-};
-const BiometricOnly = ({
-  handlePasskeyClick,
-  formattedHints,
-  shortLoginLink,
-  passkeysSupported,
-  biometricLocationHints = []
-}) => {
-  const [hasHints, isOnKnownDevice] = [biometricLocationHints.length > 0, formattedHints.isOnKnownDevice];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    (hasHints && !isOnKnownDevice || !passkeysSupported) && /* @__PURE__ */ jsx(KnownDevices, { hints: formattedHints, link: shortLoginLink }),
-    passkeysSupported && /* @__PURE__ */ jsxs(Fragment, { children: [
-      hasHints && !isOnKnownDevice && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-      /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: !hasHints || isOnKnownDevice ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
-        "Login with passkey"
-      ] }) : "Continue anyway" })
-    ] })
-  ] });
-};
-const MainContainer = styled(InnerStepContainer)`
-  gap: 16px;
-`;
-export {
-  BiometricLoginStep
-};