@getpara/react-sdk 1.6.0 → 1.6.1-dev.0

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

@@ -0,0 +1,253 @@
+"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

@@ -0,0 +1,37 @@
+"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

@@ -0,0 +1,113 @@
+"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

@@ -0,0 +1,33 @@
+"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

@@ -0,0 +1,18 @@
+"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

@@ -0,0 +1,10 @@
+"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

@@ -0,0 +1,18 @@
+"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

@@ -0,0 +1,44 @@
+"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

@@ -0,0 +1,52 @@
+"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, 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";
+const BiometricCreationStep = () => {
+  const createAccount = useCreateAccount();
+  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: 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

@@ -0,0 +1,93 @@
+"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
+};