@getpara/react-sdk-lite 2.0.0-alpha.33

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

@@ -0,0 +1,179 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useMemo } from "react";
+import { CpslButton, CpslDivider, CpslIcon, CpslIconGroup } from "@getpara/react-components";
+import { safeStyled } from "@getpara/react-common";
+import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { AuthLayout } from "../../types/modalProps.js";
+import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
+import { AuthOptions } from "../AuthOptions/AuthOptions.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useAccount, useParaStatus } from "../../../provider/index.js";
+const AuthMainStepContent = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
+  const { wallets, connectFarcasterMiniApp } = useExternalWallets();
+  const { createGuestWallets } = useAuthActions();
+  const { isFarcasterMiniApp } = useParaStatus();
+  const { embedded } = useAccount();
+  const authLayout = useModalStore((state) => state.authLayout);
+  const setStep = useModalStore((state) => state.setStep);
+  const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
+  const isDark = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+  });
+  const isGuestMode = (embedded == null ? void 0 : embedded.isConnected) && embedded.isGuestMode;
+  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 = [];
+    if (isFarcasterMiniApp) {
+      methods.push([
+        /* @__PURE__ */ jsxs(FarcasterButton, { variant: "primary", fullWidth: true, onClick: connectFarcasterMiniApp, children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "farcaster" }),
+          "Continue with Farcaster"
+        ] }),
+        "FARCASTER"
+      ]);
+    }
+    authLayout == null ? void 0 : authLayout.forEach((layout) => {
+      switch (layout) {
+        case AuthLayout.AUTH_FULL: {
+          methods.push([
+            /* @__PURE__ */ jsx(
+              AuthOptions,
+              {
+                oAuthMethods,
+                disableEmailLogin,
+                disablePhoneLogin,
+                isGuestModeEnabled
+              },
+              "authFull"
+            ),
+            layout
+          ]);
+          break;
+        }
+        case AuthLayout.AUTH_CONDENSED: {
+          const icons = [];
+          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"]));
+          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)) });
+  }, [isFarcasterMiniApp, oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, authLayout]);
+  return /* @__PURE__ */ jsxs(Container, { "data-testid": "main-auth-step-content", children: [
+    Content,
+    isGuestModeEnabled && !isGuestMode && !isFarcasterMiniApp && /* @__PURE__ */ jsx(
+      GuestMode,
+      {
+        href: "#",
+        isDark,
+        onClick: (e) => {
+          e.preventDefault();
+          createGuestWallets();
+        },
+        children: "Continue as Guest"
+      }
+    )
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const StyledIconGroup = safeStyled(CpslIconGroup)`
+  --icon-item-color: ${({ $isDark }) => $isDark ? "white" : "black"};
+  flex: 1;
+  justify-content: flex-end;
+`;
+const IconGroupSpacer = safeStyled(StyledIconGroup)`
+  visibility: hidden;
+`;
+const CondensedButton = safeStyled(CpslButton)`
+  --button-justify-content: space-between;
+
+  &::part(button-native) {
+    max-height: 50px;
+  }
+`;
+const GuestMode = safeStyled.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  color: ${({ isDark }) => isDark ? "white" : "black"};
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--cpsl-font-family);
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+const FarcasterButton = safeStyled(CpslButton)`
+  --button-primary-icon-color: white;
+  --button-primary-hover-icon-color: white;
+  --button-primary-active-icon-color: white;
+  --button-primary-background-color: #7e50d1;
+  --button-primary-hover-background-color: #8A63D2;
+  --button-primary-active-background-color: #8A63D2;
+  --button-primary-color: white;
+  --button-primary-hover-color: white;
+  --button-primary-active-color: white;
+`;
+export {
+  AuthMainStepContent
+};

package/dist/modal/components/AuthOptions/AuthOptions.d.ts

@@ -0,0 +1,9 @@
+import { TOAuthMethod } from '@getpara/web-sdk';
+interface AuthOptionsProps {
+    oAuthMethods?: TOAuthMethod[];
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+    isGuestModeEnabled: boolean;
+}
+export declare const AuthOptions: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,85 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { safeStyled } from "@getpara/react-common";
+import { OAuth } from "../OAuth/OAuth.js";
+import { AuthInput } from "../AuthInput/AuthInput.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useModalStore } from "../../stores/index.js";
+import { CpslIcon, CpslText } from "@getpara/react-components";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { isEmail, isPhone } from "@getpara/user-management-client";
+const AuthOptions = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const defaultAuthIdentifier = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
+  });
+  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
+  const { wallets } = useExternalWallets();
+  const guestAddFundsTab = useModalStore((state) => state.guestAddFundsTab);
+  const defaultAuth = defaultAuthIdentifier ? /^\+\d+$/.test(defaultAuthIdentifier) ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier } : para.authInfo && (isEmail((_a = para.authInfo) == null ? void 0 : _a.auth) || isPhone((_b = para.authInfo) == null ? void 0 : _b.auth)) ? para.authInfo.auth : void 0;
+  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,
+          {
+            sticky: true,
+            defaultAuth,
+            disableEmailLogin,
+            disablePhoneLogin,
+            onSubmit: signUpOrLogIn,
+            isSubmitting: isSignUpOrLogInPending
+          },
+          "input"
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: Methods });
+  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { children: [
+      /* @__PURE__ */ jsx(CompleteAccountIcon, { icon: "stars02", size: "16px" }),
+      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", weight: "bold", children: [
+        "Complete account setup to",
+        " ",
+        guestAddFundsTab === "BUY" ? "buy assets" : guestAddFundsTab === "WITHDRAW" ? "sell assets" : "continue",
+        "."
+      ] })
+    ] }),
+    Content
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const CompleteAccountSetup = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: var(--cpsl-color-text-primary);
+  margin-bottom: 8px;
+`;
+const CompleteAccountIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-primary);
+`;
+export {
+  AuthOptions
+};

package/dist/modal/components/AwaitingBiometricsStep/AwaitingBiometricsStep.d.ts

@@ -0,0 +1 @@
+export declare const AwaitingBiometricsStep: () => import("react/jsx-runtime").JSX.Element;

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/AwaitingIFrameStep/AwaitingIFrameStep.d.ts

@@ -0,0 +1 @@
+export declare const AwaitingIFrameStep: () => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/AwaitingIFrameStep/AwaitingIFrameStep.js

@@ -0,0 +1,12 @@
+"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 AwaitingIFrameStep = () => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  return /* @__PURE__ */ jsx(Waiting, { heading: isLogin ? "Logging you in..." : "Creating your account..." });
+};
+export {
+  AwaitingIFrameStep
+};

package/dist/modal/components/AwaitingOAuthStep/AwaitingOAuthStep.d.ts

@@ -0,0 +1 @@
+export declare const AwaitingOAuthStep: () => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1 @@
+export declare const AwaitingPasswordStep: () => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    isGuestMode?: boolean;
+};
+export declare const AwaitingWalletCreationStep: ({ isGuestMode }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,49 @@
+"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 { useStore } from "../../../provider/stores/useStore.js";
+import { useAccount } from "../../../provider/index.js";
+const AwaitingWalletCreationStep = ({ isGuestMode = false }) => {
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const [showInfoBox, setShowInfoBox] = useState(false);
+  const showInfoBoxTimeout = useRef();
+  const { embedded } = useAccount();
+  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: isGuestMode ? "Creating Guest Account" : (embedded == null ? void 0 : embedded.isGuestMode) ? hideWallets ? "Linking Guest Account" : "Linking Guest Wallet" : 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.d.ts

@@ -0,0 +1 @@
+export declare const BiometricCreationStep: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,62 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useModalStore } from "../../stores/index.js";
+import { InnerStepContainer, StepContainer, Heading, QRContainer } from "../common.js";
+import { useCopyToClipboard, UserIdentifier } from "@getpara/react-common";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { AuthMethod } from "@getpara/web-sdk";
+import { useStore } from "../../../provider/stores/useStore.js";
+const BiometricCreationStep = () => {
+  const para = useInternalClient();
+  const authInfo = para.authInfo;
+  const appName = useStore((state) => state.appName);
+  const { presentSignupUi } = useAuthActions();
+  const signupState = useModalStore((state) => state.getSignupState());
+  const authStepRoute = useModalStore((state) => state.authStepRoute);
+  const [isCopied, copy] = useCopyToClipboard();
+  const handleCopy = () => {
+    if (signupState == null ? void 0 : signupState.passkeyUrl) {
+      copy(signupState.passkeyUrl);
+    }
+  };
+  const onClick = (method) => () => {
+    presentSignupUi(method, signupState);
+  };
+  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && !!(signupState == null ? void 0 : signupState.passwordUrl);
+  if (!signupState) {
+    return null;
+  }
+  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, { 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: [
+      (signupState == null ? void 0 : signupState.isPasskeySupported) ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), 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: !(signupState == null ? void 0 : signupState.passkeyUrl) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: signupState.passkeyUrl }) }),
+        /* @__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: onClick(AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+          "Choose Password"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  BiometricCreationStep
+};

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.d.ts

@@ -0,0 +1 @@
+export declare const BiometricLoginStep: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,48 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
+import { useModalStore } from "../../stores/index.js";
+import { Heading, StepContainer, InnerStepContainer } from "../common.js";
+import { safeStyled } from "@getpara/react-common";
+import { AuthMethod } from "@getpara/web-sdk";
+import { KnownDevices, UserIdentifier } from "@getpara/react-common";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+const BiometricLoginStep = () => {
+  var _a;
+  const loginState = useModalStore((state) => state.getLoginState());
+  const para = useInternalClient();
+  const { biometricHints, presentLoginUi } = useAuthActions();
+  if (!loginState) {
+    return null;
+  }
+  const { passkeyUrl, passkeyKnownDeviceUrl, passwordUrl, isPasskeySupported } = loginState;
+  const { isOnKnownDevice = false, formattedHints } = biometricHints || {};
+  const isPasskey = !!passkeyUrl, isPassword = !!passwordUrl, isNeither = !isPasskey && !isPassword, hasHints = (_a = formattedHints == null ? void 0 : formattedHints.length) != null ? _a : 0 > 0, isPasskeyOnKnownDevice = isPasskeySupported && isOnKnownDevice, isPasskeyUnavailable = hasHints && !isOnKnownDevice || !isPasskeySupported || isNeither, displayKnownDevices = isPasskeyUnavailable && !!biometricHints && (hasHints || !!passkeyKnownDeviceUrl), displayWelcomeBack = isPasskeyOnKnownDevice || isPassword;
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
+      /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
+    ] }),
+    /* @__PURE__ */ jsxs(MainContainer, { children: [
+      isPassword && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSWORD, loginState), children: "Login" }),
+      isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
+        displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),
+          /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
+        ] }),
+        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState), children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
+          "Login with passkey"
+        ] }) })
+      ] })
+    ] })
+  ] });
+};
+const MainContainer = safeStyled(InnerStepContainer)`
+  gap: 16px;
+`;
+export {
+  BiometricLoginStep
+};

package/dist/modal/components/Body/AnimatedHeightWrapper.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+interface AnimatedHeightWrapperProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const AnimatedHeightWrapper: React.FC<AnimatedHeightWrapperProps>;
+export {};

package/dist/modal/components/Body/AnimatedHeightWrapper.js

@@ -0,0 +1,29 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+import { safeStyled } from "@getpara/react-common";
+const AnimatedHeightWrapper = ({ children, className }) => {
+  const containerRef = useRef(null);
+  const [height, setHeight] = useState("auto");
+  useEffect(() => {
+    if (containerRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        const observedHeight = entries[0].contentRect.height;
+        setHeight(observedHeight);
+      });
+      resizeObserver.observe(containerRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
+};
+const Container = safeStyled(motion.div)`
+  overflow: hidden;
+`;
+export {
+  AnimatedHeightWrapper
+};

package/dist/modal/components/Body/Body.d.ts

@@ -0,0 +1,11 @@
+import { TOAuthMethod } from '@getpara/web-sdk';
+interface BodyProps {
+    oAuthMethods?: TOAuthMethod[];
+    twoFactorAuthEnabled?: boolean;
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
+    onClose: () => void;
+}
+export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};