@openfort/react 0.2.4 → 0.2.6

package/build/index.es.js

@@ -15,7 +15,7 @@ import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors
 import { useTransition } from 'react-transition-state';
 import ResizeObserver from 'resize-observer-polyfill';
 import { createPortal } from 'react-dom';
-import { numberToHex, formatUnits, parseUnits, isAddress, parseAbi, encodeFunctionData, parseSignature } from 'viem';
+import { custom, createWalletClient, numberToHex, formatUnits, parseUnits, isAddress, parseAbi, encodeFunctionData, parseSignature } from 'viem';
 import { erc7811Actions, erc7715Actions } from 'viem/experimental';
 import calculateEntropy from 'fast-password-entropy';
 import QRCodeUtil from 'qrcode';
@@ -5643,7 +5643,7 @@ const FitText = ({ children, maxFontSize = 100, minFontSize = 70, justifyContent
 };
 FitText.displayName = 'FitText';
 
-const OPENFORT_VERSION = '0.2.4';
+const OPENFORT_VERSION = '0.2.6';
 
 const Portal = (props) => {
     props = {
@@ -6492,8 +6492,6 @@ onInfo, }) => {
                 return locales.downloadAppScreen_heading;
             case routes.ONBOARDING:
                 return locales.onboardingScreen_heading;
-            case routes.CONNECTED:
-                return locales.profileScreen_heading;
             case routes.SWITCHNETWORKS:
                 return locales.switchNetworkScreen_heading;
             default:
@@ -6550,7 +6548,8 @@ onInfo, }) => {
                                                 duration: mobile ? 0 : 0.17,
                                                 delay: mobile ? 0.01 : 0,
                                             }, children: jsx(FitText, { children: getHeading() }) }, `${route}-${'signedIn'}`) }) }), jsx(InnerContainer$1, { children: Object.keys(pages).map((key) => {
-                                        const page = pages[key];
+                                        var _a, _b;
+                                        const page = (_b = (_a = context.uiConfig.customPageComponents) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : pages[key];
                                         return (
                                         // OLD_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) && (
@@ -7096,7 +7095,7 @@ function useSignOut(hookOptions = {}) {
     };
 }
 
-const PageContent = ({ children, width, onBack = 'back', logoutOnBack }) => {
+const PageContent = ({ children, width, onBack = 'back', logoutOnBack, header }) => {
     const { setOnBack, setRoute, setPreviousRoute, setRouteHistory } = useOpenfort();
     const { signOut } = useSignOut();
     useEffect(() => {
@@ -7139,7 +7138,7 @@ const PageContent = ({ children, width, onBack = 'back', logoutOnBack }) => {
         else
             setOnBack(null);
     }, [!!onBack, !!logoutOnBack]);
-    return jsx(PageContentStyle, { style: { width }, children: children });
+    return (jsxs(PageContentStyle, { style: { width }, children: [header && jsx(ModalHeading, { children: header }), children] }));
 };
 
 const pulseAnim = { scale: [0.9, 1.25, 1.6], opacity: [0, 0.11, 0] };
@@ -7589,11 +7588,130 @@ const About = () => {
                         } }, s.key))) }) }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.aboutScreen_ctaText })] }));
 };
 
+/**
+ * Hook for accessing current user information and authentication state
+ *
+ * This hook provides access to the current authenticated user's information and
+ * authentication status. It also offers methods to manage access tokens and validate
+ * user sessions. The hook automatically updates when authentication state changes.
+ *
+ * @returns Current user state and authentication utilities
+ *
+ * @example
+ * ```tsx
+ * const userHook = useUser();
+ *
+ * // Check if user is authenticated
+ * if (userHook.isAuthenticated && userHook.user) {
+ *   console.log('User is authenticated:', userHook.user);
+ *   console.log('User ID:', userHook.user.id);
+ *   console.log('User email:', userHook.user.email);
+ *   console.log('Linked accounts:', userHook.linkedAccounts);
+ * } else {
+ *   console.log('User is not authenticated');
+ * }
+ *
+ * // Get fresh access token
+ * const getToken = async () => {
+ *   try {
+ *     const token = await userHook.getAccessToken();
+ *     console.log('Access token:', token);
+ *   } catch (error) {
+ *     console.error('Failed to get access token:', error);
+ *   }
+ * };
+ *
+ * // Validate and refresh token if needed
+ * const refreshToken = async () => {
+ *   try {
+ *     await userHook.validateAndRefreshToken();
+ *     console.log('Token validated and refreshed');
+ *   } catch (error) {
+ *     console.error('Token validation failed:', error);
+ *   }
+ * };
+ * ```
+ */
+function useUser() {
+    const { user, client, embeddedState, linkedAccounts } = useOpenfortCore();
+    const getAccessTokenAndUpdate = useCallback(async () => {
+        try {
+            await client.validateAndRefreshToken();
+            const token = await client.getAccessToken();
+            return token;
+        }
+        catch (error) {
+            handleOAuthConfigError(error);
+            throw error;
+        }
+    }, [client]);
+    const validateAndRefresh = useCallback(async () => {
+        try {
+            await client.validateAndRefreshToken();
+        }
+        catch (error) {
+            handleOAuthConfigError(error);
+            throw error;
+        }
+    }, [client]);
+    return {
+        user,
+        linkedAccounts,
+        isAuthenticated: embeddedState !== EmbeddedState.NONE && embeddedState !== EmbeddedState.UNAUTHENTICATED,
+        getAccessToken: getAccessTokenAndUpdate,
+        validateAndRefreshToken: validateAndRefresh,
+    };
+}
+
 const useWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000 } = {}) => {
     const chainId = useChainId();
     const { data: walletClient } = useWalletClient();
-    const { walletConfig } = useOpenfort();
+    const { walletConfig, publishableKey, overrides, thirdPartyAuth } = useOpenfort();
     const { address } = useAccount();
+    const { getAccessToken } = useUser();
+    const buildHeaders = useCallback(async () => {
+        if (thirdPartyAuth) {
+            const accessToken = await thirdPartyAuth.getAccessToken();
+            if (!accessToken) {
+                throw new OpenfortError('Failed to get access token from third party auth provider', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+            }
+            const headers = {
+                'Content-Type': 'application/json',
+                'x-auth-provider': thirdPartyAuth.provider,
+                'x-player-token': accessToken,
+                'x-token-type': 'idToken',
+                Authorization: `Bearer ${publishableKey}`,
+            };
+            return headers;
+        }
+        const headers = {
+            'Content-Type': 'application/json',
+            'x-project-key': publishableKey,
+            Authorization: `Bearer ${await getAccessToken()}`,
+        };
+        return headers;
+    }, [publishableKey, getAccessToken, thirdPartyAuth]);
+    const customTransport = useMemo(() => () => {
+        return custom({
+            async request({ method, params }) {
+                const res = await fetch(`${(overrides === null || overrides === void 0 ? void 0 : overrides.backendUrl) || 'https://api.openfort.io'}/rpc`, {
+                    method: 'POST',
+                    headers: await buildHeaders(),
+                    body: JSON.stringify({
+                        method,
+                        params: params[0],
+                        id: 1,
+                        jsonrpc: '2.0',
+                    }),
+                });
+                const data = await res.json();
+                if (data.error) {
+                    throw new Error(data.error.message);
+                }
+                return data.result;
+            },
+        });
+    }, [publishableKey, getAccessToken]);
     const customAssetsToFetch = useMemo(() => {
         const assetsFromConfig = (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.assets) ? walletConfig.assets[chainId] || [] : [];
         const assetsFromHook = hookCustomAssets ? hookCustomAssets[chainId] || [] : [];
@@ -7608,7 +7726,12 @@ const useWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000 } = {}) =
                     error: new Error('Wallet client not initialized'),
                 });
             }
-            const extendedClient = walletClient.extend(erc7811Actions());
+            const customClient = createWalletClient({
+                account: walletClient.account,
+                chain: walletClient.chain,
+                transport: customTransport(),
+            });
+            const extendedClient = customClient.extend(erc7811Actions());
             // Fetch default assets
             const defaultAssetsPromise = extendedClient.getAssets({
                 chainIds: [chainId],
@@ -10343,7 +10466,8 @@ const Connected = () => {
     const separator = ['web95', 'rounded', 'minimal'].includes((_c = (_b = themeContext.theme) !== null && _b !== void 0 ? _b : context.uiConfig.theme) !== null && _c !== void 0 ? _c : '')
         ? '....'
         : undefined;
-    return (jsxs(PageContent, { onBack: null, children: [jsx(ModalContent, { style: { paddingBottom: 6, gap: 6 }, children: address ? (jsxs(Fragment, { children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [jsx(ChainSelectorContainer, { children: jsx(ChainSelector, {}) }), jsx(Avatar, { address: address })] }) }), jsx(ModalH1, { children: jsx(CopyText, { value: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), (context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance) ? null : (jsxs(ModalBody, { children: [jsxs(BalanceContainer, { children: [!!assets && !isLoading && (jsx(TextLinkButton, { type: "button", onClick: () => {
+    const locales = useLocales();
+    return (jsxs(PageContent, { onBack: null, header: locales.profileScreen_heading, children: [jsx(ModalContent, { style: { paddingBottom: 6, gap: 6 }, children: address ? (jsxs(Fragment, { children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [jsx(ChainSelectorContainer, { children: jsx(ChainSelector, {}) }), jsx(Avatar, { address: address })] }) }), jsx(ModalH1, { children: jsx(CopyText, { value: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), (context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance) ? null : (jsxs(ModalBody, { children: [jsxs(BalanceContainer, { children: [!!assets && !isLoading && (jsx(TextLinkButton, { type: "button", onClick: () => {
                                                 const firstBalanceAsset = assets === null || assets === void 0 ? void 0 : assets.find((a) => a.balance && a.balance > BigInt(0));
                                                 if (!firstBalanceAsset) {
                                                     setRoute(routes.NO_ASSETS_AVAILABLE);
@@ -11272,81 +11396,6 @@ const Connectors = ({ logoutOnBack }) => {
     return (jsx(PageContent, { logoutOnBack: logoutOnBack, width: 312, children: isMobile ? jsx(ConnectWithMobile$1, {}) : jsx(ConnectorList, {}) }));
 };
 
-/**
- * Hook for accessing current user information and authentication state
- *
- * This hook provides access to the current authenticated user's information and
- * authentication status. It also offers methods to manage access tokens and validate
- * user sessions. The hook automatically updates when authentication state changes.
- *
- * @returns Current user state and authentication utilities
- *
- * @example
- * ```tsx
- * const userHook = useUser();
- *
- * // Check if user is authenticated
- * if (userHook.isAuthenticated && userHook.user) {
- *   console.log('User is authenticated:', userHook.user);
- *   console.log('User ID:', userHook.user.id);
- *   console.log('User email:', userHook.user.email);
- *   console.log('Linked accounts:', userHook.linkedAccounts);
- * } else {
- *   console.log('User is not authenticated');
- * }
- *
- * // Get fresh access token
- * const getToken = async () => {
- *   try {
- *     const token = await userHook.getAccessToken();
- *     console.log('Access token:', token);
- *   } catch (error) {
- *     console.error('Failed to get access token:', error);
- *   }
- * };
- *
- * // Validate and refresh token if needed
- * const refreshToken = async () => {
- *   try {
- *     await userHook.validateAndRefreshToken();
- *     console.log('Token validated and refreshed');
- *   } catch (error) {
- *     console.error('Token validation failed:', error);
- *   }
- * };
- * ```
- */
-function useUser() {
-    const { user, client, embeddedState, linkedAccounts } = useOpenfortCore();
-    const getAccessTokenAndUpdate = useCallback(async () => {
-        try {
-            await client.validateAndRefreshToken();
-            const token = await client.getAccessToken();
-            return token;
-        }
-        catch (error) {
-            handleOAuthConfigError(error);
-            throw error;
-        }
-    }, [client]);
-    const validateAndRefresh = useCallback(async () => {
-        try {
-            await client.validateAndRefreshToken();
-        }
-        catch (error) {
-            handleOAuthConfigError(error);
-            throw error;
-        }
-    }, [client]);
-    return {
-        user,
-        linkedAccounts,
-        isAuthenticated: embeddedState !== EmbeddedState.NONE && embeddedState !== EmbeddedState.UNAUTHENTICATED,
-        getAccessToken: getAccessTokenAndUpdate,
-        validateAndRefreshToken: validateAndRefresh,
-    };
-}
-
 // get accounts from the same address and chain type
 const getSimpleAccounts = ({ address, embeddedAccounts, }) => {
     return embeddedAccounts
@@ -11436,7 +11485,7 @@ const mapWalletStatus = (status) => {
  */
 function useWallets(hookOptions = {}) {
     const { client, embeddedAccounts, isLoadingAccounts: isLoadingWallets, updateEmbeddedAccounts } = useOpenfortCore();
-    const { linkedAccounts } = useUser();
+    const { linkedAccounts, user } = useUser();
     const { walletConfig, setOpen, setRoute, setConnector, uiConfig } = useOpenfort();
     const { connector, isConnected, address } = useAccount();
     const chainId = useChainId();
@@ -11477,24 +11526,88 @@ function useWallets(hookOptions = {}) {
         },
     });
     const openfortConnector = useMemo(() => { var _a; return (_a = availableWallets.find((c) => c.connector.id === embeddedWalletId)) === null || _a === void 0 ? void 0 : _a.connector; }, [availableWallets]);
-    const getEncryptionSession = useCallback(async () => {
-        if (!walletConfig || !walletConfig.createEncryptedSessionEndpoint) {
-            throw new Error('No createEncryptedSessionEndpoint set in walletConfig');
+    const getEncryptionSession = useCallback(async ({ accessToken, userId, otpCode }) => {
+        if (!walletConfig) {
+            throw new Error('No walletConfig found');
+        }
+        if (walletConfig.getEncryptionSession) {
+            return await walletConfig.getEncryptionSession({ userId, otpCode: otpCode, accessToken });
+        }
+        if (!walletConfig.createEncryptedSessionEndpoint) {
+            throw new Error('No requestWalletRecoverOTPEndpoint set in walletConfig');
         }
         const resp = await fetch(walletConfig.createEncryptedSessionEndpoint, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
             },
+            body: JSON.stringify({ user_id: userId, otp_code: otpCode }),
         });
+        const respJSON = await resp.json();
         if (!resp.ok) {
+            if (respJSON.error === 'OTP_REQUIRED')
+                throw new Error('OTP_REQUIRED');
             throw new Error('Failed to create encryption session');
         }
-        const respJSON = await resp.json();
         return respJSON.session;
     }, [walletConfig]);
+    const isWalletRecoveryOTPEnabled = useMemo(() => {
+        return !!walletConfig && (!!walletConfig.requestWalletRecoverOTP || !!walletConfig.requestWalletRecoverOTPEndpoint);
+    }, [walletConfig]);
+    const requestWalletRecoverOTP = useCallback(async () => {
+        try {
+            logger.log('Requesting wallet recover OTP for user', { userId: user === null || user === void 0 ? void 0 : user.id });
+            if (!walletConfig) {
+                throw new Error('No walletConfig found');
+            }
+            const accessToken = await client.getAccessToken();
+            if (!accessToken) {
+                throw new OpenfortError('Openfort access token not found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+            }
+            if (!(user === null || user === void 0 ? void 0 : user.id)) {
+                throw new OpenfortError('User not found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+            }
+            const userId = user.id;
+            const email = user.email;
+            const phone = user.email ? undefined : user.phoneNumber;
+            if (!email && !phone) {
+                throw new OpenfortError('No email or phone number found for user', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+            }
+            logger.log('Requesting wallet recover OTP for user', { userId, email, phone });
+            if (walletConfig.requestWalletRecoverOTP) {
+                await walletConfig.requestWalletRecoverOTP({ userId, accessToken, email, phone });
+                return { sentTo: email ? 'email' : 'phone', email, phone };
+            }
+            if (!walletConfig.requestWalletRecoverOTPEndpoint) {
+                throw new Error('No requestWalletRecoverOTPEndpoint set in walletConfig');
+            }
+            const resp = await fetch(walletConfig.requestWalletRecoverOTPEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ user_id: userId, email, phone }),
+            });
+            if (!resp.ok) {
+                throw new Error('Failed to request wallet recover OTP');
+            }
+            return { sentTo: email ? 'email' : 'phone', email, phone };
+        }
+        catch (err) {
+            logger.log('Error requesting wallet recover OTP:', err);
+            const error = new OpenfortError('Failed to request wallet recover OTP', OpenfortReactErrorType.WALLET_ERROR);
+            return onError({
+                error,
+                hookOptions,
+            });
+        }
+    }, [walletConfig]);
     const parseWalletRecovery = useMemo(() => async function parseWalletRecovery(recovery, embeddedAccounts, walletAddress) {
         var _a, _b;
+        const user = await client.user.get();
+        if (!(user === null || user === void 0 ? void 0 : user.id)) {
+            throw new OpenfortError('User not found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+        }
         switch (recovery === null || recovery === void 0 ? void 0 : recovery.recoveryMethod) {
             case undefined:
             case RecoveryMethod.AUTOMATIC: {
@@ -11504,9 +11617,11 @@ function useWallets(hookOptions = {}) {
                 }
                 return {
                     recoveryMethod: RecoveryMethod.AUTOMATIC,
-                    encryptionSession: (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.getEncryptionSession)
-                        ? await walletConfig.getEncryptionSession(accessToken)
-                        : await getEncryptionSession(),
+                    encryptionSession: await getEncryptionSession({
+                        accessToken,
+                        otpCode: recovery === null || recovery === void 0 ? void 0 : recovery.otpCode,
+                        userId: user.id,
+                    }),
                 };
             }
             case RecoveryMethod.PASSWORD:
@@ -11544,7 +11659,7 @@ function useWallets(hookOptions = {}) {
             default:
                 throw new OpenfortError('Invalid recovery method', OpenfortReactErrorType.VALIDATION_ERROR);
         }
-    }, [walletConfig, getEncryptionSession]);
+    }, [walletConfig, getEncryptionSession, user === null || user === void 0 ? void 0 : user.id]);
     const userLinkedWalletConnectors = useMemo(() => {
         const userWallets = linkedAccounts
             ? linkedAccounts
@@ -11604,7 +11719,7 @@ function useWallets(hookOptions = {}) {
             connect({ connector: connectToConnector.connector });
     }, [connectToConnector]);
     const setActiveWallet = useCallback(async (options) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const optionsObject = typeof options === 'string' ? { walletId: options } : options;
         const { showUI } = optionsObject;
         let connector = null;
@@ -11715,6 +11830,7 @@ function useWallets(hookOptions = {}) {
                     const recovery = {
                         recoveryMethod: (_c = accountToRecover.recoveryMethod) !== null && _c !== void 0 ? _c : RecoveryMethod.AUTOMATIC,
                         password: (_d = optionsObject.recovery) === null || _d === void 0 ? void 0 : _d.password,
+                        otpCode: (_e = optionsObject.recovery) === null || _e === void 0 ? void 0 : _e.otpCode,
                     };
                     const recoveryParams = await parseWalletRecovery(recovery, embeddedAccounts, walletAddress);
                     embeddedAccount = await client.embeddedWallet.recover({
@@ -11741,8 +11857,9 @@ function useWallets(hookOptions = {}) {
                     }
                     logger.log('Found embedded wallet to recover (without walletAddress)', accountToRecover);
                     const recovery = {
-                        recoveryMethod: (_e = accountToRecover.recoveryMethod) !== null && _e !== void 0 ? _e : RecoveryMethod.AUTOMATIC,
-                        password: (_f = optionsObject.recovery) === null || _f === void 0 ? void 0 : _f.password,
+                        recoveryMethod: (_f = accountToRecover.recoveryMethod) !== null && _f !== void 0 ? _f : RecoveryMethod.AUTOMATIC,
+                        password: (_g = optionsObject.recovery) === null || _g === void 0 ? void 0 : _g.password,
+                        otpCode: (_h = optionsObject.recovery) === null || _h === void 0 ? void 0 : _h.otpCode,
                     };
                     const recoveryParams = await parseWalletRecovery(recovery, embeddedAccounts, walletAddress);
                     embeddedAccount = await client.embeddedWallet.recover({
@@ -11793,15 +11910,29 @@ function useWallets(hookOptions = {}) {
                     }
                 }
                 logger.log('Error handling recovery with Openfort:', error, err);
+                let isOTPRequired = false;
+                if (error.message === 'OTP_REQUIRED') {
+                    if (!isWalletRecoveryOTPEnabled) {
+                        error = new OpenfortError('OTP code is required to recover the wallet.\nPlease set requestWalletRecoverOTP or requestWalletRecoverOTPEndpoint in OpenfortProvider.', OpenfortReactErrorType.WALLET_ERROR);
+                    }
+                    else {
+                        error = new OpenfortError('OTP code is required to recover the wallet.', OpenfortReactErrorType.WALLET_ERROR);
+                    }
+                    isOTPRequired = true;
+                }
                 setStatus({
                     status: 'error',
                     error,
                 });
-                return onError({
+                onError({
                     error,
                     options: optionsObject,
                     hookOptions,
                 });
+                return {
+                    error,
+                    isOTPRequired,
+                };
             }
             finally {
                 if (hasToSwitchChain) {
@@ -11878,18 +12009,29 @@ function useWallets(hookOptions = {}) {
         }
         catch (e) {
             const errorObj = e instanceof Error ? e : new Error('Failed to create wallet');
-            const error = e instanceof OpenfortError
+            let error = e instanceof OpenfortError
                 ? e
                 : new OpenfortError('Failed to create wallet', OpenfortReactErrorType.WALLET_ERROR, { error: errorObj });
+            let isOTPRequired = false;
+            if (error.message === 'OTP_REQUIRED') {
+                if (!isWalletRecoveryOTPEnabled) {
+                    error = new OpenfortError('OTP code is required to recover the wallet.\nPlease set requestWalletRecoverOTP or requestWalletRecoverOTPEndpoint in OpenfortProvider.', OpenfortReactErrorType.WALLET_ERROR);
+                }
+                else {
+                    error = new OpenfortError('OTP code is required to recover the wallet.', OpenfortReactErrorType.WALLET_ERROR);
+                }
+                isOTPRequired = true;
+            }
             setStatus({
                 status: 'error',
                 error,
             });
-            return onError({
+            onError({
                 error,
                 hookOptions,
                 options,
             });
+            return { error, isOTPRequired };
         }
     }, [client, uiConfig, chainId]);
     const setRecovery = useCallback(async (params) => {
@@ -11938,6 +12080,8 @@ function useWallets(hookOptions = {}) {
         reset: () => setStatus({ status: 'idle' }),
         createWallet,
         setActiveWallet,
+        requestWalletRecoverOTP,
+        isWalletRecoveryOTPEnabled,
         ...mapWalletStatus(status),
         exportPrivateKey: () => client.embeddedWallet.exportPrivateKey(),
     };
@@ -12192,1381 +12336,1462 @@ const Input = ({ ...props }) => {
     return (jsx(InputContainer, { children: jsx(Input$1, { ...props }) }));
 };
 
-const TickListContainer = styled.ul `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-`;
-const TickItem = styled.li `
-  display: flex;
-  align-items: center;
-  text-align: left;
-  gap: 8px;
-  font-size: 16px;
-  line-height: 24px;
+const caretBlink = keyframes `
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
 `;
-const TickIconWrapper = styled.span `
+const OtpContainer = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-`;
+  scale: ${({ scale }) => scale || '1'};
 
-const TickList = ({ items }) => {
-    return (jsx(TickListContainer, { children: items.map((item) => (jsxs(TickItem, { children: [jsx(TickIconWrapper, { children: jsx(TickIcon, {}) }), jsx("span", { children: item })] }, item))) }));
-};
-TickList.displayName = 'TickList';
-
-var wave = (jsxs("svg", { "aria-hidden": "true", width: "298", height: "188", viewBox: "0 0 298 188", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 55.2757L21.6438 46.0285C55.5896 30.8228 94.4104 30.8228 128.356 46.0286L169.644 64.5229C203.59 79.7287 242.41 79.7286 276.356 64.5229L297 55.2757M1 44.2118L21.6438 34.9646C55.5896 19.7589 94.4104 19.7589 128.356 34.9646L169.644 53.459C203.59 68.6647 242.41 68.6647 276.356 53.459L297 44.2118M1 33.1477L21.6438 23.9005C55.5896 8.69479 94.4104 8.69479 128.356 23.9005L169.644 42.3949C203.59 57.6006 242.41 57.6006 276.356 42.3949L297 33.1477M1 22.1477L21.6438 12.9005C55.5896 -2.30521 94.4104 -2.30521 128.356 12.9005L169.644 31.3949C203.59 46.6006 242.41 46.6006 276.356 31.3949L297 22.1477M1 66.3398L21.6438 57.0926C55.5896 41.8869 94.4104 41.8869 128.356 57.0926L169.644 75.587C203.59 90.7927 242.41 90.7927 276.356 75.587L297 66.3398M1 77.404L21.6438 68.1568C55.5896 52.9511 94.4104 52.9511 128.356 68.1569L169.644 86.6512C203.59 101.857 242.41 101.857 276.356 86.6512L297 77.404M1 88.4681L21.6438 79.2209C55.5896 64.0152 94.4104 64.0152 128.356 79.2209L169.644 97.7153C203.59 112.921 242.41 112.921 276.356 97.7153L297 88.4681M1 121.66L21.6438 112.413C55.5896 97.2075 94.4104 97.2075 128.356 112.413L169.644 130.908C203.59 146.113 242.41 146.113 276.356 130.908L297 121.66M1 110.596L21.6438 101.349C55.5896 86.1433 94.4104 86.1433 128.356 101.349L169.644 119.843C203.59 135.049 242.41 135.049 276.356 119.843L297 110.596M1 99.5321L21.6438 90.2849C55.5896 75.0792 94.4104 75.0792 128.356 90.2849L169.644 108.779C203.59 123.985 242.41 123.985 276.356 108.779L297 99.5321M1 132.724L21.6438 123.477C55.5896 108.271 94.4104 108.271 128.356 123.477L169.644 141.971C203.59 157.177 242.41 157.177 276.356 141.971L297 132.724M1 143.788L21.6438 134.541C55.5896 119.336 94.4104 119.336 128.356 134.541L169.644 153.036C203.59 168.241 242.41 168.241 276.356 153.036L297 143.788M1 154.853L21.6438 145.605C55.5896 130.4 94.4104 130.4 128.356 145.605L169.644 164.1C203.59 179.305 242.41 179.305 276.356 164.1L297 154.853M1 165.853L21.6438 156.605C55.5896 141.4 94.4104 141.4 128.356 156.605L169.644 175.1C203.59 190.305 242.41 190.305 276.356 175.1L297 165.853", stroke: "url(#paint0_linear_1094_2077)", strokeOpacity: "0.9", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1094_2077", x1: "1", y1: "112.587", x2: "297.034", y2: "79.6111", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-01)" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-02)", offset: "0.239583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-03)", offset: "0.515625" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-04)", offset: "0.739583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-05)", offset: "1" })] }) })] }));
-
-const Graphic = styled(motion.div) `
-  position: relative;
-  margin-top: ${({ $marginTop }) => $marginTop !== null && $marginTop !== void 0 ? $marginTop : '16px'};
-  margin-bottom: ${({ $marginBottom }) => $marginBottom !== null && $marginBottom !== void 0 ? $marginBottom : '20px'};
-  margin-left: auto;
-  margin-right: auto;
-  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : '190px'};
-  max-width: 295px;
-  pointer-events: none;
-  user-select: none;
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    height: 200px;
-    max-width: 100%;
-    margin-bottom: 32px;
-  }
+  --border: ${({ showBorder }) => (showBorder ? 'var(--ck-body-color-muted)' : 'transparent')};
 `;
-const LogoGroup = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-`;
-const graphicIn = keyframes `
-  0%{
-    opacity:0;
-    transform:scale(0.9);
-  }
-  100%{
-    opacity:1;
-    transform:none;
-  }
-`;
-const GraphicBackground = styled(motion.div) `
-  z-index: 1;
-  position: absolute;
-  inset: 0;
-  top: -2px;
-  overflow: hidden;
-  &:before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--ck-body-background);
-    background: radial-gradient(
-      closest-side,
-      var(--ck-body-background-transparent, transparent) 18.75%,
-      var(--ck-body-background) 100%
-    );
-    background-size: 100%;
-  }
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-  animation: ${graphicIn} 1000ms 100ms ease both;
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    animation: none;
+const pulse = keyframes `
+  0% {
+    opacity: 100%;
   }
-`;
-const logoIn = keyframes `
-  0%{
-    opacity:0;
-    transform:scale(0) translateY(40%);
+  50% {
+    opacity: 40%;
   }
-  100%{
-    opacity:1;
-    transform:none;
+  100% {
+    opacity: 100%;
   }
 `;
-const LogoPosition = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
-  animation-delay: inherit;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
 `;
-const LogoInner = styled(motion.div) `
-  position: absolute;
+const keyframeSuccess = keyframes `
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
 `;
-const LogoGraphic$1 = styled(motion.div) `
-  position: relative;
-  overflow: hidden;
-  height: 58px;
-  width: 58px;
-  border-radius: 13.84px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+const OTPGroup = styled.div `
+  display: flex;
 
-  svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-`;
-const float = keyframes `
-  0%,100%{ transform:none; }
-  50%{ transform: translateY(-10%) }
-`;
-const FloatWrapper = styled(motion.div) `
-  position: relative;
-  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
-  animation-name: ${float};
-  animation-duration: 3600ms;
-`;
-const rotate = keyframes `
-  0%,100%{ transform:rotate(-3deg); }
-  50%{ transform:rotate(3deg); }
+  outline-width: 3px;
+  outline-style: solid;
+  border-radius: 0.375rem;
+  transition: outline-color 0.3s, border-radius .5s;
+
+  outline-color: ${({ isError, isSuccess }) => {
+    if (isError)
+        return 'var(--ck-body-color-danger)';
+    if (isSuccess)
+        return 'var(--ck-body-color-valid)';
+    return 'transparent';
+}};
+
+  ${({ isLoading }) => isLoading &&
+    css `
+      animation: ${pulse} 1s ease-in-out infinite;
+    `}
+
+  ${({ isError }) => isError &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+    `}
+
+  ${({ isSuccess }) => isSuccess &&
+    css `
+      border-radius: 3rem;
+      min-width: 3.5rem;
+      ${OTPSlotWrapper} {
+        width: 0;
+        border: 0;
+        transition: width .5s, border .5s;
+      }
+      animation: ${keyframeSuccess} 220ms ease-out both;
+      animation-delay: 250ms;
+    `}
 `;
-const RotateWrapper = styled(motion.div) `
+const OTPSlotWrapper = styled.div `
   position: relative;
-  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
-  animation-name: ${rotate};
-  animation-duration: 3200ms;
-`;
-const Logo$1 = styled(motion.div) `
-  position: absolute;
-  inset: 0;
+  width: 2.5rem;
+  height: 3.5rem;     
+  font-size: 2rem;
 
-  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
-  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
-  &:nth-child(2){ z-index:1; animation-delay:60ms; }
-  &:nth-child(3){ z-index:1; animation-delay:30ms; }
-  &:nth-child(4){ z-index:1; animation-delay:90ms; }
-  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
-  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
-  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
-  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
-  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+  transition: all 0.3s;
 
-  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
-  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
-  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
-  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
-  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  border-right: 0.5px solid var(--border);
+  border-left: 0.5px solid var(--border);
 
-  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
-    animation: none !important;
-    ${RotateWrapper},${FloatWrapper} {
-      animation: none !important;
-    }
+  &:first-child {
+    border-left: 1px solid var(--border);
+    border-radius: 0.375rem 0 0 0.375rem;
   }
 
-  ${LogoInner} {
-    transform: translate(-50%, -50%);
+  &:last-child {
+    border-radius: 0 0.375rem 0.375rem 0;
   }
 
-  &:nth-child(1) ${LogoPosition} {
-    transform: translate(50%, 50%);
-    ${LogoGraphic$1} {
-      border-radius: 17.2px;
-      width: 72px;
-      height: 72px;
-    }
-  }
-  &:nth-child(2) ${LogoPosition} {
-    transform: translate(21%, 21.5%);
-  }
-  &:nth-child(3) ${LogoPosition} {
-    transform: translate(78%, 14%);
-  }
-  &:nth-child(4) ${LogoPosition} {
-    transform: translate(22.5%, 76%);
-  }
-  &:nth-child(5) ${LogoPosition} {
-    transform: translate(76%, 80%);
-  }
+  outline: ${({ isActive }) => (isActive ? '2px solid var(--ck-connectbutton-color)' : '0')};
+  z-index: ${({ isActive }) => (isActive ? 1 : 0)};
+  outline-offset: 0;
+
+  cursor: text;
+  color: var(--ck-body-color);
+`;
+const OTPNumberValue = styled.div `
+  opacity: ${({ $hide }) => ($hide ? 0 : 1)};
+  transition: opacity 0.3s;
+`;
+const OTPHiddenInput = styled.input `
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: text;
+  caret-color: transparent; /* Hide native caret */
 `;
+const FakeCaretWrapper = styled.div `
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 
-const LogoGraphic = ({ size = '100%', logo }) => {
-    return (jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { style: { transform: `scale(${size})` }, children: logo }) }) }) }) }) }));
-};
-const FloatingGraphic = ({ height = '130px', marginBottom, marginTop, logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft, }) => {
-    return (jsxs(Graphic, { "$height": height, "$marginBottom": marginBottom, "$marginTop": marginTop, children: [jsxs(LogoGroup, { children: [jsx(LogoGraphic, { ...logoCenter }), logoTopLeft ? jsx(LogoGraphic, { ...logoTopLeft }) : jsx("div", {}), logoTopRight ? jsx(LogoGraphic, { ...logoTopRight }) : jsx("div", {}), logoBottomLeft ? jsx(LogoGraphic, { ...logoBottomLeft }) : jsx("div", {}), logoBottomRight ? jsx(LogoGraphic, { ...logoBottomRight }) : jsx("div", {})] }), jsx(GraphicBackground, { children: wave })] }));
-};
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-/**
- * Password utility helpers for strength calculation and validation.
- *
- * Provides functions for password strength calculation, passphrase generation, and password validation.
- */
-// ============================================================================
-// Constants and Regular Expressions
-// ============================================================================
-/**
- * Regular expression to match lowercase letters.
- */
-const LOWERCASE_REGEX = /[a-z]/;
-/**
- * Regular expression to match uppercase letters.
- */
-const UPPERCASE_REGEX = /[A-Z]/;
-/**
- * Regular expression to match digits.
- */
-const DIGIT_REGEX = /[0-9]/;
-/**
- * Special characters allowed in passwords.
- */
-const SPECIAL_CHARACTERS = '!@#$%^&()\\-*+.';
-/**
- * Escape regex metacharacters for safe use inside a character class.
- */
-function escapeForCharClass(str) {
-    return str.replace(/[-\\^]/g, '\\$&');
-    // escapes -, \, and ^ (the only risky chars in [])
-}
-/**
- * Regular expression to match special characters.
- */
-const SPECIAL_CHARACTER_REGEX = new RegExp(`[${escapeForCharClass(SPECIAL_CHARACTERS)}]`);
-/**
- * Maximum entropy score for normalization.
- */
-const MAX_ENTROPY_SCORE = 95;
-/**
- * Minimum password length for security.
- */
-const MIN_PASSWORD_LENGTH = 8;
-/**
- * Weight for diversity score in overall strength calculation.
- */
-const DIVERSITY_WEIGHT = 0.3;
-const ENTROPY_WEIGHT = 0.7;
-const MEDIUM_SCORE_THRESHOLD = 0.5;
-const STRONG_SCORE_THRESHOLD = 0.75;
-const VERY_STRONG_SCORE_THRESHOLD = 0.9;
-/**
- * Converts a numeric password strength score to a human-readable label.
- *
- * @param score - The strength score (0-1).
- * @returns The corresponding strength label.
- *
- * @example
- * ```ts
- * const label = getPasswordStrengthLabel(0.8);
- * // label === 'Strong'
- * ```
- */
-function getPasswordStrengthLabel(score) {
-    if (score > VERY_STRONG_SCORE_THRESHOLD) {
-        return 'Very Strong';
-    }
-    else if (score > STRONG_SCORE_THRESHOLD) {
-        return 'Strong';
-    }
-    else if (score > MEDIUM_SCORE_THRESHOLD) {
-        return 'Medium';
-    }
-    else {
-        return 'Weak';
-    }
-}
-/**
- * Calculates the diversity score of a password based on character types used.
- *
- * Considers lowercase, uppercase, digits, and special characters.
- *
- * @param password - The password to analyse.
- * @returns A score between 0 and 1 representing character diversity.
- *
- * @example
- * ```ts
- * const diversity = calculatePasswordDiversityScore('Password123!');
- * ```
- */
-function calculatePasswordDiversityScore(password) {
-    // Passwords shorter than minimum length get a score of 0
-    if (password.length < MIN_PASSWORD_LENGTH) {
-        return 0;
-    }
-    let characterTypesUsed = 0;
-    if (LOWERCASE_REGEX.test(password)) {
-        characterTypesUsed += 1;
-    }
-    if (UPPERCASE_REGEX.test(password)) {
-        characterTypesUsed += 1;
-    }
-    if (DIGIT_REGEX.test(password)) {
-        characterTypesUsed += 1;
-    }
-    if (SPECIAL_CHARACTER_REGEX.test(password)) {
-        characterTypesUsed += 1;
-    }
-    return Math.max(0, Math.min(1, characterTypesUsed / 4));
+  animation: ${caretBlink} 1.2s ease-out infinite;
+`;
+const CaretBar = styled.div `
+  width: 1px;
+  height: 2rem;
+  background: var(--ck-body-color);
+`;
+const keyframeWrapper = keyframes `
+  0% { transform: scale(0); }
+  100% { transform: scale(1); }
+`;
+const SuccessTickWrapper = styled.div `
+  position: absolute;
+  inset: 5px;
+  display: flex;
+  animation: ${keyframeWrapper} 200ms ease-out both;
+  animation-delay: 200ms;
+  color: var(--ck-body-color-valid);
+`;
+
+function FakeCaret() {
+    return (jsx(FakeCaretWrapper, { children: jsx(CaretBar, {}) }));
 }
-/**
- * Calculates the overall password strength combining diversity and entropy.
- *
- * @param password - The password to analyse.
- * @returns A strength score between 0 and 1.
- *
- * @example
- * ```ts
- * const strength = getPasswordStrength('Password123!');
- * ```
- */
-function getPasswordStrength(password = '') {
-    const diversityScore = calculatePasswordDiversityScore(password);
-    const entropyScore = calculateEntropy(password) / MAX_ENTROPY_SCORE;
-    return Math.min(diversityScore * DIVERSITY_WEIGHT + entropyScore * ENTROPY_WEIGHT, 1);
+function OtpInputStandalone({ length = 6, onChange, onComplete, isLoading, isError, isSuccess, scale, }) {
+    const [values, setValues] = useState(Array(length).fill(''));
+    const [activeIndex, setActiveIndex] = useState(0);
+    const canEdit = !isLoading && !isError && !isSuccess;
+    const inputsRef = useRef([]);
+    const handleInput = (index, char) => {
+        var _a;
+        if (!char.match(/^[0-9]$/))
+            return;
+        if (!canEdit)
+            return;
+        const newValues = [...values];
+        newValues[index] = char;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        // Move cursor to next box
+        if (index < length - 1) {
+            setActiveIndex(index + 1);
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    useEffect(() => {
+        if (values.every((v) => v !== '')) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(values.join(''));
+        }
+    }, [values]);
+    const handleBackspace = (index) => {
+        var _a;
+        const newValues = [...values];
+        if (newValues[index] === '') {
+            if (index > 0) {
+                // Move back
+                setActiveIndex(index - 1);
+                (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            newValues[index - 1] = '';
+        }
+        else {
+            newValues[index] = '';
+        }
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+    };
+    const handlePaste = (e) => {
+        var _a;
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
+        if (!pasted)
+            return;
+        const arr = pasted.substring(0, length).split('');
+        const newValues = [...values];
+        arr.forEach((char, i) => {
+            newValues[i] = char;
+        });
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        const finalIndex = Math.min(arr.length - 1, length - 1);
+        setActiveIndex(finalIndex);
+        (_a = inputsRef.current[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleFocus = (i) => {
+        var _a, _b;
+        if (activeIndex !== -1) {
+            setActiveIndex(i);
+            return;
+        }
+        const firstEmptyIndex = values.indexOf('');
+        if (firstEmptyIndex !== -1) {
+            setActiveIndex(firstEmptyIndex);
+            (_a = inputsRef.current[firstEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            setActiveIndex(length - 1);
+            (_b = inputsRef.current[length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (!isError) {
+            setValues(Array(length).fill(''));
+            setActiveIndex(0);
+            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isError]);
+    return (jsx(OtpContainer, { showBorder: !isSuccess, scale: scale, children: jsxs(OTPGroup, { isError: isError, isSuccess: isSuccess, isLoading: isLoading, children: [values.slice(0, length).map((value, idx) => {
+                    const index = idx;
+                    return (jsxs(OTPSlotWrapper, { isActive: canEdit && activeIndex === index, children: [jsx(OTPHiddenInput, { ref: (el) => {
+                                    inputsRef.current[index] = el;
+                                }, value: "", inputMode: "numeric", onBlur: () => setActiveIndex(-1), autoComplete: "one-time-code", autoFocus: index === 0, onFocus: () => handleFocus(index), onPaste: handlePaste, onKeyDown: (e) => {
+                                    if (!canEdit)
+                                        return;
+                                    if (e.key === 'Backspace') {
+                                        e.preventDefault();
+                                        handleBackspace(index);
+                                    }
+                                }, onChange: (e) => handleInput(index, e.target.value) }), value && jsx(OTPNumberValue, { "$hide": isSuccess, children: value }), !value && activeIndex === index && jsx(FakeCaret, {})] }, index));
+                }), isSuccess && (jsx(SuccessTickWrapper, { children: jsx(TickIcon, { width: '100%', height: '100%' }) }))] }) }));
 }
 
-const Container$1 = styled.div `
+const TickListContainer = styled.ul `
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  text-align: left;
-`;
-const BarWrapper = styled.div `
-  width: 100%;
-  height: 4px;
-  background: var(--ck-secondary-button-background);
-  border-radius: 4px;
-  overflow: hidden;
+  gap: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 `;
-const Progress = styled(motion.div) `
-  height: 100%;
-  background: ${({ color }) => color};
-  border-radius: 4px;
+const TickItem = styled.li `
+  display: flex;
+  align-items: center;
+  text-align: left;
+  gap: 8px;
+  font-size: 16px;
+  line-height: 24px;
 `;
-const Label$1 = styled.div `
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--ck-body-color-muted);
+const TickIconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 `;
-const LabelColor = styled.span `
-  color: ${({ color }) => color};
-`;
-const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) => {
-    const passwordStrength = getPasswordStrength(password); // should return a number between 0 and 1
-    const label = getPasswordStrengthLabel(passwordStrength);
-    const color = useMemo(() => {
-        switch (label) {
-            case 'Weak':
-                return '#ef4444'; // red-500
-            case 'Medium':
-                return '#f59e0b'; // amber-500
-            case 'Strong':
-                return '#10b981'; // emerald-500
-            case 'Very Strong':
-                return '#3b82f6'; // blue-500
-            default:
-                return '#d1d5db'; // gray-300
-        }
-    }, [label]);
-    return (jsxs(Container$1, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: 'easeOut', duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
-                            opacity: showPasswordIsTooWeakError ? 0 : 1,
-                            y: showPasswordIsTooWeakError ? 5 : 0,
-                        }, transition: { duration: 0.3 }, children: jsxs(Label$1, { children: ["Password strength: ", jsx(LabelColor, { color: color, children: label })] }) }), jsx(motion.div, { initial: { opacity: 0 }, animate: {
-                            opacity: showPasswordIsTooWeakError ? 1 : 0,
-                            y: showPasswordIsTooWeakError ? 0 : -5,
-                        }, transition: { duration: 0.3 }, style: { color: '#ef4444', fontSize: '0.875rem', fontWeight: 500, position: 'absolute', top: '0' }, children: "Password is too weak" })] })] }));
-};
-
-const ProviderInputInner = styled.div `
-  // Styles from react-international-phone (imported here to avoid importing the whole CSS file for nextjs compatibility)
-  .react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
 
-  border-radius: var(--ck-secondary-button-border-radius);
-  font-size: 1rem;
-  color: var(--ck-body-color);
-  transition: all 0.2s;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 12px;
-
-  box-shadow: var(--ck-secondary-button-box-shadow);
-  background: var(--ck-secondary-button-background);
-
-  padding-right: 20px;
-
-  &:focus-within {
-    box-shadow: var(--ck-secondary-button-hover-box-shadow);
-  }
-
-  input {
-    padding-left: 20px;
-    padding-right: 10px;
-
-    border: none !important;
-    outline: none !important;
-    background: transparent !important;
-    box-shadow: none !important;
+const TickList = ({ items }) => {
+    return (jsx(TickListContainer, { children: items.map((item) => (jsxs(TickItem, { children: [jsx(TickIconWrapper, { children: jsx(TickIcon, {}) }), jsx("span", { children: item })] }, item))) }));
+};
+TickList.displayName = 'TickList';
 
-    ::placeholder {
-      color: var(--ck-body-color-muted);
-    }
-    
-    width: 100%;
-    height: 100%;
-  }
+var wave = (jsxs("svg", { "aria-hidden": "true", width: "298", height: "188", viewBox: "0 0 298 188", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M1 55.2757L21.6438 46.0285C55.5896 30.8228 94.4104 30.8228 128.356 46.0286L169.644 64.5229C203.59 79.7287 242.41 79.7286 276.356 64.5229L297 55.2757M1 44.2118L21.6438 34.9646C55.5896 19.7589 94.4104 19.7589 128.356 34.9646L169.644 53.459C203.59 68.6647 242.41 68.6647 276.356 53.459L297 44.2118M1 33.1477L21.6438 23.9005C55.5896 8.69479 94.4104 8.69479 128.356 23.9005L169.644 42.3949C203.59 57.6006 242.41 57.6006 276.356 42.3949L297 33.1477M1 22.1477L21.6438 12.9005C55.5896 -2.30521 94.4104 -2.30521 128.356 12.9005L169.644 31.3949C203.59 46.6006 242.41 46.6006 276.356 31.3949L297 22.1477M1 66.3398L21.6438 57.0926C55.5896 41.8869 94.4104 41.8869 128.356 57.0926L169.644 75.587C203.59 90.7927 242.41 90.7927 276.356 75.587L297 66.3398M1 77.404L21.6438 68.1568C55.5896 52.9511 94.4104 52.9511 128.356 68.1569L169.644 86.6512C203.59 101.857 242.41 101.857 276.356 86.6512L297 77.404M1 88.4681L21.6438 79.2209C55.5896 64.0152 94.4104 64.0152 128.356 79.2209L169.644 97.7153C203.59 112.921 242.41 112.921 276.356 97.7153L297 88.4681M1 121.66L21.6438 112.413C55.5896 97.2075 94.4104 97.2075 128.356 112.413L169.644 130.908C203.59 146.113 242.41 146.113 276.356 130.908L297 121.66M1 110.596L21.6438 101.349C55.5896 86.1433 94.4104 86.1433 128.356 101.349L169.644 119.843C203.59 135.049 242.41 135.049 276.356 119.843L297 110.596M1 99.5321L21.6438 90.2849C55.5896 75.0792 94.4104 75.0792 128.356 90.2849L169.644 108.779C203.59 123.985 242.41 123.985 276.356 108.779L297 99.5321M1 132.724L21.6438 123.477C55.5896 108.271 94.4104 108.271 128.356 123.477L169.644 141.971C203.59 157.177 242.41 157.177 276.356 141.971L297 132.724M1 143.788L21.6438 134.541C55.5896 119.336 94.4104 119.336 128.356 134.541L169.644 153.036C203.59 168.241 242.41 168.241 276.356 153.036L297 143.788M1 154.853L21.6438 145.605C55.5896 130.4 94.4104 130.4 128.356 145.605L169.644 164.1C203.59 179.305 242.41 179.305 276.356 164.1L297 154.853M1 165.853L21.6438 156.605C55.5896 141.4 94.4104 141.4 128.356 156.605L169.644 175.1C203.59 190.305 242.41 190.305 276.356 175.1L297 165.853", stroke: "url(#paint0_linear_1094_2077)", strokeOpacity: "0.9", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1094_2077", x1: "1", y1: "112.587", x2: "297.034", y2: "79.6111", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-01)" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-02)", offset: "0.239583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-03)", offset: "0.515625" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-04)", offset: "0.739583" }), jsx("stop", { stopColor: "var(--ck-graphic-wave-stop-05)", offset: "1" })] }) })] }));
 
-  .react-international-phone-country-selector-button {
-    padding-left: 20px;
-    padding-right: 10px;
-    --react-international-phone-border-color: none;
-    --react-international-phone-border-radius: var(--ck-secondary-button-border-radius);
-    --react-international-phone-background-color: var(--ck-secondary-button-background);
-    --react-international-phone-text-color: var(--ck-body-color);
-    border-radius: var(--ck-secondary-button-border-radius) 0px 0px var(--ck-secondary-button-border-radius);
-    transition: all .2s ease-out;
+const Graphic = styled(motion.div) `
+  position: relative;
+  margin-top: ${({ $marginTop }) => $marginTop !== null && $marginTop !== void 0 ? $marginTop : '16px'};
+  margin-bottom: ${({ $marginBottom }) => $marginBottom !== null && $marginBottom !== void 0 ? $marginBottom : '20px'};
+  margin-left: auto;
+  margin-right: auto;
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : '190px'};
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
   }
-
-  .react-international-phone-country-selector-dropdown {
-    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+`;
+const LogoGroup = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0.9);
   }
-    
-  .react-international-phone-country-selector-button__dropdown-arrow {
-    border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777) !important;
-    border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
-    border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
-    margin-right: 4px;
-    transition: all .1s ease-out;
+  100%{
+    opacity:1;
+    transform:none;
   }
 `;
-const EmailInnerButton = styled(motion.button) `
-  color: var(--ck-body-action-color);
-  transition: background-color 200ms ease, transform 100ms ease, color 200ms ease, transition 200ms ease, opacity 200ms ease;
-  border-radius: 16px;
-  
+const GraphicBackground = styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
   svg {
     display: block;
-    position: relative;
-    padding: 4px;
+    width: 100%;
+    height: auto;
   }
-
-  &:enabled {
-    cursor: pointer;
-    &:hover {
-      background: var(--ck-body-background-secondary);
-      color: var(--ck-body-action-hover-color);
-    }
-    &:active {
-      transform: scale(0.9);
-    }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none;
   }
 `;
-const ProvidersButton = styled.div `
-  ${ButtonContainer} {
-    height: 64px;
-    font-size: 17px;
-    font-weight: var(--ck-primary-button-font-weight, 500);
-    line-height: 20px;
-  }
-
-  ${ProviderInputInner} {
-    height: 64px;
-  }
-
-  &:first-of-type {
-    ${ButtonContainer}, ${ProviderInputInner} {
-      margin-top: 0;
-    }
-  }
-
-  ${ButtonContainerInner} {
-    padding: 0 20px;
-    justify-content: space-between;
+const logoIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
   }
-
-  ${InnerContainer} {
-    justify-content: space-between;
-    width: 100%;
-    max-width: 100%;
+  100%{
+    opacity:1;
+    transform:none;
   }
 `;
-const ProviderLabel = styled.span `
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 2px 0;
+const LogoPosition = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
 `;
-const ProviderIcon$1 = styled.div `
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  svg,
-  img {
+const LogoInner = styled(motion.div) `
+  position: absolute;
+`;
+const LogoGraphic$1 = styled(motion.div) `
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
     display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
     width: 100%;
     height: 100%;
   }
-
-  &[data-shape='squircle'] {
-    border-radius: 22.5%;
-  }
-  &[data-shape='circle'] {
-    border-radius: 100%;
-  }
-  &[data-shape='square'] {
-    border-radius: 0;
-  }
 `;
-
-const OtherMethodButton = styled.button `
-  width: 100%;
-  color: var(--ck-body-color-muted);
-  background: none;
-  font-size: 14px;
-  margin-top: 10px;
-  transition: color 0.2s;
-
-  &:hover {
-    color: var(--ck-body-color);
-  }
+const float = keyframes `
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
 `;
-
-const OtherMethod = ({ currentMethod, onChangeMethod, }) => {
-    const { uiConfig } = useOpenfort();
-    const otherMethods = useMemo(() => {
-        const allowedMethods = uiConfig.walletRecovery.allowedMethods;
-        const otherMethods = allowedMethods.filter((method) => method !== currentMethod);
-        return otherMethods;
-    }, [uiConfig, currentMethod]);
-    if (otherMethods.length === 0)
-        return null;
-    if (otherMethods.length === 1) {
-        const method = otherMethods[0];
-        let text;
-        switch (method) {
-            case RecoveryMethod.PASSWORD:
-                text = 'Use password recovery instead';
-                break;
-            case RecoveryMethod.AUTOMATIC:
-                text = 'Skip for now';
-                break;
-            case RecoveryMethod.PASSKEY:
-                text = 'Use passkey recovery instead';
-                break;
-            default:
-                text = method;
-        }
-        return (jsx(OtherMethodButton, { onClick: () => {
-                onChangeMethod(method);
-            }, children: text }));
+const FloatWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes `
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+const RotateWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+const Logo$1 = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
+  &:nth-child(2){ z-index:1; animation-delay:60ms; }
+  &:nth-child(3){ z-index:1; animation-delay:30ms; }
+  &:nth-child(4){ z-index:1; animation-delay:90ms; }
+  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+
+  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
+  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
+  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
+  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+
+  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
+  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
+  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
+  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none !important;
+    ${RotateWrapper},${FloatWrapper} {
+      animation: none !important;
     }
-    return jsx(OtherMethodButton, { onClick: () => onChangeMethod('other'), children: "Choose another recovery method" });
-};
-const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
-    const { embeddedState } = useOpenfortCore();
-    const { createWallet } = useWallets();
-    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
-    useEffect(() => {
-        // To ensure the wallet is created only once
-        if (shouldCreateWallet) {
-            (async () => {
-                logger.log('Creating wallet Automatic recover');
-                const response = await createWallet();
-                if (response.error) {
-                    logger.log('Error creating wallet', response.error);
-                }
-            })();
-        }
-    }, [shouldCreateWallet]);
-    useEffect(() => {
-        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
-            setShouldCreateWallet(true);
-        }
-    }, [embeddedState]);
-    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { header: "Creating wallet..." }) }));
-};
-const CreateWalletPasskeyRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
-    const { triggerResize } = useOpenfort();
-    const { createWallet, error: recoveryError } = useWallets();
-    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
-    const { embeddedState } = useOpenfortCore();
-    useEffect(() => {
-        // To ensure the wallet is created only once
-        if (shouldCreateWallet) {
-            (async () => {
-                logger.log('Creating wallet passkey recovery');
-                const response = await createWallet({
-                    recovery: {
-                        recoveryMethod: RecoveryMethod.PASSKEY,
-                    },
-                });
-                if (response.error) {
-                    logger.log('Error creating wallet', response.error);
-                    setShouldCreateWallet(false);
-                }
-            })();
-        }
-    }, [shouldCreateWallet]);
-    useEffect(() => {
-        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
-            setShouldCreateWallet(true);
-        }
-    }, [embeddedState]);
-    useEffect(() => {
-        if (recoveryError)
-            triggerResize();
-    }, [recoveryError]);
-    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? 'Invalid passkey.' : 'Creating wallet with passkey...', description: recoveryError ? 'There was an error creating your passkey. Please try again.' : undefined, onRetry: () => setShouldCreateWallet(true) }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSKEY, onChangeMethod: onChangeMethod })] }));
-};
-const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
-    const [recoveryPhrase, setRecoveryPhrase] = useState('');
-    const [recoveryError, setRecoveryError] = useState(false);
-    const { triggerResize } = useOpenfort();
-    const [showPasswordIsTooWeakError, setShowPasswordIsTooWeakError] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const { createWallet } = useWallets();
-    const handleSubmit = async () => {
-        if (getPasswordStrength(recoveryPhrase) < MEDIUM_SCORE_THRESHOLD) {
-            setShowPasswordIsTooWeakError(true);
-            return;
-        }
-        setLoading(true);
-        const { error } = await createWallet({
-            recovery: {
-                recoveryMethod: RecoveryMethod.PASSWORD,
-                password: recoveryPhrase,
-            },
-        });
-        setLoading(false);
-        if (error) {
-            setRecoveryError(error.message || 'There was an error recovering your account');
-        }
-        else {
-            logger.log('Recovery success');
-        }
-    };
-    useEffect(() => {
-        if (recoveryError)
-            triggerResize();
-    }, [recoveryError]);
-    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: {
-                    logo: jsx(KeyIcon, {}),
-                    size: '1.2',
-                }, logoTopLeft: {
-                    logo: jsx(ShieldIcon, {}),
-                    size: '0.75',
-                }, logoBottomRight: {
-                    logo: jsx(LockIcon, {}),
-                    size: '0.5',
-                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
-                            e.preventDefault();
-                            handleSubmit();
-                        }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
-                                    if (showPasswordIsTooWeakError)
-                                        setShowPasswordIsTooWeakError(false);
-                                    setRecoveryPhrase(e.target.value);
-                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
-};
-const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
-    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon$1, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon$1, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon$1, { children: jsx(LockIcon, {}) })] }) })] }));
-};
-const CreateEmbeddedWallet = ({ onBack, logoutOnBack }) => {
-    const { uiConfig, triggerResize } = useOpenfort();
-    const [userSelectedMethod, setUserSelectedMethod] = useState(null);
-    useEffect(() => {
-        triggerResize();
-    }, [userSelectedMethod]);
-    const method = userSelectedMethod !== null && userSelectedMethod !== void 0 ? userSelectedMethod : uiConfig.walletRecovery.defaultMethod;
-    switch (method) {
-        case RecoveryMethod.PASSWORD:
-            return (jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
-        case RecoveryMethod.AUTOMATIC:
-            return jsx(CreateWalletAutomaticRecovery, { onBack: onBack, logoutOnBack: logoutOnBack });
-        case RecoveryMethod.PASSKEY:
-            return (jsx(CreateWalletPasskeyRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
-        case 'other':
-            return (jsx(ChooseRecoveryMethod, { onChangeMethod: setUserSelectedMethod, onBack: () => {
-                    setUserSelectedMethod(null);
-                }, logoutOnBack: logoutOnBack }));
-        default:
-            logger.error(`Unsupported recovery method: ${userSelectedMethod}${uiConfig.walletRecovery.defaultMethod}`);
-            return null;
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic$1} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
     }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+
+const LogoGraphic = ({ size = '100%', logo }) => {
+    return (jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { style: { transform: `scale(${size})` }, children: logo }) }) }) }) }) }));
 };
-const CreateOrConnectWallet = () => {
-    const [showCreateEmbeddedWallet, setShowCreateEmbeddedWallet] = useState(false);
-    const { setRoute } = useOpenfort();
-    if (showCreateEmbeddedWallet)
-        return jsx(CreateEmbeddedWallet, { onBack: () => setShowCreateEmbeddedWallet(false), logoutOnBack: false });
-    return (jsxs(PageContent, { onBack: routes.PROVIDERS, logoutOnBack: true, children: [jsx(ModalHeading, { children: "Choose an option" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => setShowCreateEmbeddedWallet(true), children: [jsx(ProviderLabel, { children: "Create Wallet" }), jsx(ProviderIcon$1, { children: jsx(PlusIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => {
-                        setRoute({ route: routes.CONNECTORS, connectType: 'link' });
-                    }, children: [jsx(ProviderLabel, { children: "Connect Wallet" }), jsx(ProviderIcon$1, { children: jsx(Logos.OtherWallets, {}) })] }) })] }));
+const FloatingGraphic = ({ height = '130px', marginBottom, marginTop, logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft, }) => {
+    return (jsxs(Graphic, { "$height": height, "$marginBottom": marginBottom, "$marginTop": marginTop, children: [jsxs(LogoGroup, { children: [jsx(LogoGraphic, { ...logoCenter }), logoTopLeft ? jsx(LogoGraphic, { ...logoTopLeft }) : jsx("div", {}), logoTopRight ? jsx(LogoGraphic, { ...logoTopRight }) : jsx("div", {}), logoBottomLeft ? jsx(LogoGraphic, { ...logoBottomLeft }) : jsx("div", {}), logoBottomRight ? jsx(LogoGraphic, { ...logoBottomRight }) : jsx("div", {})] }), jsx(GraphicBackground, { children: wave })] }));
 };
-const CreateWallet = () => {
-    const { uiConfig, walletConfig, setRoute } = useOpenfort();
-    const { user } = useOpenfortCore();
-    const { isConnected } = useAccount();
-    useEffect(() => {
-        if (isConnected && user)
-            setRoute(routes.CONNECTED_SUCCESS);
-    }, [isConnected, user]);
-    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.OPTIONAL) {
-        return jsx(CreateOrConnectWallet, {});
+
+/**
+ * Password utility helpers for strength calculation and validation.
+ *
+ * Provides functions for password strength calculation, passphrase generation, and password validation.
+ */
+// ============================================================================
+// Constants and Regular Expressions
+// ============================================================================
+/**
+ * Regular expression to match lowercase letters.
+ */
+const LOWERCASE_REGEX = /[a-z]/;
+/**
+ * Regular expression to match uppercase letters.
+ */
+const UPPERCASE_REGEX = /[A-Z]/;
+/**
+ * Regular expression to match digits.
+ */
+const DIGIT_REGEX = /[0-9]/;
+/**
+ * Special characters allowed in passwords.
+ */
+const SPECIAL_CHARACTERS = '!@#$%^&()\\-*+.';
+/**
+ * Escape regex metacharacters for safe use inside a character class.
+ */
+function escapeForCharClass(str) {
+    return str.replace(/[-\\^]/g, '\\$&');
+    // escapes -, \, and ^ (the only risky chars in [])
+}
+/**
+ * Regular expression to match special characters.
+ */
+const SPECIAL_CHARACTER_REGEX = new RegExp(`[${escapeForCharClass(SPECIAL_CHARACTERS)}]`);
+/**
+ * Maximum entropy score for normalization.
+ */
+const MAX_ENTROPY_SCORE = 95;
+/**
+ * Minimum password length for security.
+ */
+const MIN_PASSWORD_LENGTH = 8;
+/**
+ * Weight for diversity score in overall strength calculation.
+ */
+const DIVERSITY_WEIGHT = 0.3;
+const ENTROPY_WEIGHT = 0.7;
+const MEDIUM_SCORE_THRESHOLD = 0.5;
+const STRONG_SCORE_THRESHOLD = 0.75;
+const VERY_STRONG_SCORE_THRESHOLD = 0.9;
+/**
+ * Converts a numeric password strength score to a human-readable label.
+ *
+ * @param score - The strength score (0-1).
+ * @returns The corresponding strength label.
+ *
+ * @example
+ * ```ts
+ * const label = getPasswordStrengthLabel(0.8);
+ * // label === 'Strong'
+ * ```
+ */
+function getPasswordStrengthLabel(score) {
+    if (score > VERY_STRONG_SCORE_THRESHOLD) {
+        return 'Very Strong';
     }
-    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.REQUIRED ||
-        (!walletConfig && uiConfig.linkWalletOnSignUp !== LinkWalletOnSignUpOption.DISABLED)) {
-        return jsx(Connectors, { logoutOnBack: true });
+    else if (score > STRONG_SCORE_THRESHOLD) {
+        return 'Strong';
+    }
+    else if (score > MEDIUM_SCORE_THRESHOLD) {
+        return 'Medium';
+    }
+    else {
+        return 'Weak';
     }
-    return jsx(CreateEmbeddedWallet, { onBack: routes.PROVIDERS, logoutOnBack: true });
-};
-
-function useWindowSize() {
-    const [windowSize, setWindowSize] = useState({
-        width: 0,
-        height: 0,
-    });
-    useEffect(() => {
-        function handleResize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
-            });
-        }
-        window.addEventListener('resize', handleResize);
-        handleResize();
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    return windowSize;
 }
-
-const generateMatrix = (value, errorCorrectionLevel) => {
-    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
-    const sqrt = Math.sqrt(arr.length);
-    return arr.reduce((rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows, []);
-};
-function QRCode({ ecl = 'M', size: sizeProp = 200, uri, clearArea = false, image, imageBackground = 'transparent', }) {
-    const logoSize = clearArea ? 76 : 0;
-    const size = sizeProp - 10 * 2;
-    const dots = useMemo(() => {
-        const dots = [];
-        const matrix = generateMatrix(uri, ecl);
-        const cellSize = size / matrix.length;
-        const qrList = [
-            { x: 0, y: 0 },
-            { x: 1, y: 0 },
-            { x: 0, y: 1 },
-        ];
-        qrList.forEach(({ x, y }) => {
-            const x1 = (matrix.length - 7) * cellSize * x;
-            const y1 = (matrix.length - 7) * cellSize * y;
-            for (let i = 0; i < 3; i++) {
-                dots.push(jsx("rect", { fill: i % 2 !== 0 ? 'var(--ck-qr-background, var(--ck-body-background))' : 'var(--ck-qr-dot-color)', rx: (i - 2) * -5 + (i === 0 ? 2 : 3), ry: (i - 2) * -5 + (i === 0 ? 2 : 3), width: cellSize * (7 - i * 2), height: cellSize * (7 - i * 2), x: x1 + cellSize * i, y: y1 + cellSize * i }, `${i}-${x}-${y}`));
-            }
-        });
-        if (image) {
-            const x1 = (matrix.length - 7) * cellSize * 1;
-            const y1 = (matrix.length - 7) * cellSize * 1;
-            dots.push(jsxs(Fragment, { children: [jsx("rect", { fill: imageBackground, rx: (0 - 2) * -5 + 2, ry: (0 - 2) * -5 + 2, width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0 }), jsx("foreignObject", { width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0, children: jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: 'hidden' }, children: image }) })] }));
-        }
-        const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
-        const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
-        const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
-        matrix.forEach((row, i) => {
-            row.forEach((_, j) => {
-                if (matrix[i][j]) {
-                    // Do not render dots under position squares
-                    if (!((i < 7 && j < 7) || (i > matrix.length - 8 && j < 7) || (i < 7 && j > matrix.length - 8))) {
-                        //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
-                        if (image ||
-                            !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
-                            dots.push(jsx("circle", { cx: i * cellSize + cellSize / 2, cy: j * cellSize + cellSize / 2, fill: "var(--ck-qr-dot-color)", r: cellSize / 3 }, `qr-dot-${i}-${j}`));
-                        }
-                    }
-                }
-            });
-        });
-        return dots;
-    }, [ecl, size, uri]);
-    return (jsxs("svg", { height: size, width: size, viewBox: `0 0 ${size} ${size}`, style: {
-            width: size,
-            height: size,
-        }, children: [jsx("title", { children: "QR Code" }), jsx("rect", { fill: "transparent", height: size, width: size }), dots] }));
+/**
+ * Calculates the diversity score of a password based on character types used.
+ *
+ * Considers lowercase, uppercase, digits, and special characters.
+ *
+ * @param password - The password to analyse.
+ * @returns A score between 0 and 1 representing character diversity.
+ *
+ * @example
+ * ```ts
+ * const diversity = calculatePasswordDiversityScore('Password123!');
+ * ```
+ */
+function calculatePasswordDiversityScore(password) {
+    // Passwords shorter than minimum length get a score of 0
+    if (password.length < MIN_PASSWORD_LENGTH) {
+        return 0;
+    }
+    let characterTypesUsed = 0;
+    if (LOWERCASE_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (UPPERCASE_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (DIGIT_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    if (SPECIAL_CHARACTER_REGEX.test(password)) {
+        characterTypesUsed += 1;
+    }
+    return Math.max(0, Math.min(1, characterTypesUsed / 4));
+}
+/**
+ * Calculates the overall password strength combining diversity and entropy.
+ *
+ * @param password - The password to analyse.
+ * @returns A strength score between 0 and 1.
+ *
+ * @example
+ * ```ts
+ * const strength = getPasswordStrength('Password123!');
+ * ```
+ */
+function getPasswordStrength(password = '') {
+    const diversityScore = calculatePasswordDiversityScore(password);
+    const entropyScore = calculateEntropy(password) / MAX_ENTROPY_SCORE;
+    return Math.min(diversityScore * DIVERSITY_WEIGHT + entropyScore * ENTROPY_WEIGHT, 1);
 }
 
-const QRCodeContainer = styled(motion.div) `
-  z-index: 3;
-  position: relative;
-  overflow: hidden;
-  height: 0;
-  padding-bottom: 100% !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 1px 0 2px;
-  border-radius: var(--ck-qr-border-radius, 24px);
-  background: var(--ck-qr-background, transparent);
-  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
-  backface-visibility: hidden;
-  svg {
-    display: block;
-    max-width: 100%;
-    width: 100%;
-    height: auto;
-  }
+const Container$1 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  text-align: left;
+`;
+const BarWrapper = styled.div `
+  width: 100%;
+  height: 4px;
+  background: var(--ck-secondary-button-background);
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const Progress = styled(motion.div) `
+  height: 100%;
+  background: ${({ color }) => color};
+  border-radius: 4px;
+`;
+const Label$1 = styled.div `
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+`;
+const LabelColor = styled.span `
+  color: ${({ color }) => color};
+`;
+const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) => {
+    const passwordStrength = getPasswordStrength(password); // should return a number between 0 and 1
+    const label = getPasswordStrengthLabel(passwordStrength);
+    const color = useMemo(() => {
+        switch (label) {
+            case 'Weak':
+                return '#ef4444'; // red-500
+            case 'Medium':
+                return '#f59e0b'; // amber-500
+            case 'Strong':
+                return '#10b981'; // emerald-500
+            case 'Very Strong':
+                return '#3b82f6'; // blue-500
+            default:
+                return '#d1d5db'; // gray-300
+        }
+    }, [label]);
+    return (jsxs(Container$1, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: 'easeOut', duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
+                            opacity: showPasswordIsTooWeakError ? 0 : 1,
+                            y: showPasswordIsTooWeakError ? 5 : 0,
+                        }, transition: { duration: 0.3 }, children: jsxs(Label$1, { children: ["Password strength: ", jsx(LabelColor, { color: color, children: label })] }) }), jsx(motion.div, { initial: { opacity: 0 }, animate: {
+                            opacity: showPasswordIsTooWeakError ? 1 : 0,
+                            y: showPasswordIsTooWeakError ? 0 : -5,
+                        }, transition: { duration: 0.3 }, style: { color: '#ef4444', fontSize: '0.875rem', fontWeight: 500, position: 'absolute', top: '0' }, children: "Password is too weak" })] })] }));
+};
+
+const Body$1 = styled.p `
+  color: var(--ck-body-color);
+  text-align: center;
+  margin-bottom: 16px;
 `;
-const QRCodeContent = styled(motion.div) `
-  position: absolute;
-  inset: 13px;
-  svg {
-    width: 100% !important;
-    height: auto !important;
+const ResultContainer$1 = styled.div `
+  margin-top: 16px;
+  height: 24px;
+  text-align: center;
+`;
+const FooterButtonText$1 = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--ck-body-color-muted);
+  transition: color 0.3s;
+
+  &:disabled {
+    color: var(--ck-body-color-muted) !important;
+    cursor: not-allowed;
   }
 `;
-const PlaceholderKeyframes = keyframes `
-  0%{ background-position: 100% 0; }
-  100%{ background-position: -100% 0; }
+const FooterTextButton$1 = styled.p `
+  color: var(--ck-body-color-muted);
+  text-align: center;
+  margin-top: 16px;
+  &:hover {
+    ${FooterButtonText$1} {
+      color: var(--ck-body-color);
+    }
+  }
 `;
-const QRPlaceholder = styled(motion.div) `
-  --color: var(--ck-qr-dot-color);
-  --bg: var(--ck-qr-background, var(--ck-body-background));
 
-  position: absolute;
-  inset: 0;
+const ProviderInputInner = styled.div `
+  // Styles from react-international-phone (imported here to avoid importing the whole CSS file for nextjs compatibility)
+  .react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
+
+  border-radius: var(--ck-secondary-button-border-radius);
+  font-size: 1rem;
+  color: var(--ck-body-color);
+  transition: all 0.2s;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  > div {
-    z-index: 4;
-    position: relative;
-    width: 28%;
-    height: 28%;
-    border-radius: 20px;
-    background: var(--bg);
-    box-shadow: 0 0 0 7px var(--bg);
+  margin-top: 12px;
+
+  box-shadow: var(--ck-secondary-button-box-shadow);
+  background: var(--ck-secondary-button-background);
+
+  padding-right: 20px;
+
+  &:focus-within {
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
   }
-  > span {
-    z-index: 4;
-    position: absolute;
-    background: var(--color);
-    border-radius: 12px;
-    width: 13.25%;
-    height: 13.25%;
-    box-shadow: 0 0 0 4px var(--bg);
-    &:before {
-      content: '';
-      position: absolute;
-      inset: 9px;
-      border-radius: 3px;
-      box-shadow: 0 0 0 4px var(--bg);
-    }
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
+
+  input {
+    padding-left: 20px;
+    padding-right: 10px;
+
+    border: none !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+
+    ::placeholder {
+      color: var(--ck-body-color-muted);
     }
+    
+    width: 100%;
+    height: 100%;
   }
-  &:before {
-    z-index: 3;
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: repeat;
-    background-size: 1.888% 1.888%;
-    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+
+  .react-international-phone-country-selector-button {
+    padding-left: 20px;
+    padding-right: 10px;
+    --react-international-phone-border-color: none;
+    --react-international-phone-border-radius: var(--ck-secondary-button-border-radius);
+    --react-international-phone-background-color: var(--ck-secondary-button-background);
+    --react-international-phone-text-color: var(--ck-body-color);
+    border-radius: var(--ck-secondary-button-border-radius) 0px 0px var(--ck-secondary-button-border-radius);
+    transition: all .2s ease-out;
   }
-  &:after {
-    z-index: 5;
-    content: '';
-    position: absolute;
-    inset: 0;
-    transform: scale(1.5) rotate(45deg);
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 50%,
-      rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0)
-    );
-    background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+
+  .react-international-phone-country-selector-dropdown {
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+  }
+    
+  .react-international-phone-country-selector-button__dropdown-arrow {
+    border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777) !important;
+    border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    margin-right: 4px;
+    transition: all .1s ease-out;
   }
 `;
-const LogoContainer$1 = styled(motion.div) `
-  z-index: 6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: translateY(50%) scale(0.9999); // Shifting fix
+const EmailInnerButton = styled(motion.button) `
+  color: var(--ck-body-action-color);
+  transition: background-color 200ms ease, transform 100ms ease, color 200ms ease, transition 200ms ease, opacity 200ms ease;
+  border-radius: 16px;
+  
+  svg {
+    display: block;
+    position: relative;
+    padding: 4px;
+  }
+
+  &:enabled {
+    cursor: pointer;
+    &:hover {
+      background: var(--ck-body-background-secondary);
+      color: var(--ck-body-action-hover-color);
+    }
+    &:active {
+      transform: scale(0.9);
+    }
+  }
 `;
-const LogoIcon = styled(motion.div) `
-  z-index: 6;
-  position: absolute;
-  left: 50%;
-  overflow: hidden;
+const ProvidersButton = styled.div `
+  ${ButtonContainer} {
+    height: 64px;
+    font-size: 17px;
+    font-weight: var(--ck-primary-button-font-weight, 500);
+    line-height: 20px;
+  }
+
+  ${ProviderInputInner} {
+    height: 64px;
+  }
+
+  &:first-of-type {
+    ${ButtonContainer}, ${ProviderInputInner} {
+      margin-top: 0;
+    }
+  }
 
-  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+  ${ButtonContainerInner} {
+    padding: 0 20px;
+    justify-content: space-between;
+  }
 
-  svg {
+  ${InnerContainer} {
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+const ProviderLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+`;
+const ProviderIcon$1 = styled.div `
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  svg,
+  img {
     display: block;
     position: relative;
+    pointer-events: none;
+    overflow: hidden;
     width: 100%;
     height: 100%;
   }
 
-  ${(props) => props.$wcLogo
-    ? css `
-          width: 29%;
-          height: 20.5%;
-        `
-    : css `
-          width: 28%;
-          height: 28%;
-          border-radius: 17px;
-          &:before {
-            pointer-events: none;
-            z-index: 2;
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-          }
-        `}
+  &[data-shape='squircle'] {
+    border-radius: 22.5%;
+  }
+  &[data-shape='circle'] {
+    border-radius: 100%;
+  }
+  &[data-shape='square'] {
+    border-radius: 0;
+  }
 `;
 
-function CustomQRCode({ value, image, imageBackground, imagePosition = 'center', tooltipMessage }) {
-    const windowSize = useWindowSize();
-    const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
-    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer$1, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
-                            background: imagePosition === 'center' ? imageBackground : undefined,
-                        }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
-                            duration: 0.2,
-                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "M", clearArea: !!(imagePosition === 'center' && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
-                            duration: 0.2,
-                        }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
-}
-CustomQRCode.displayName = 'CustomQRCode';
-
-const DownloadApp = () => {
-    var _a, _b, _c;
-    const context = useOpenfort();
-    const wallet = useWallet(context.connector.id);
-    const locales = useLocales({
-        CONNECTORNAME: wallet === null || wallet === void 0 ? void 0 : wallet.name,
-    });
-    if (!wallet)
-        return jsx(Fragment, { children: "Wallet not found" });
-    const downloads = {
-        ios: (_a = wallet.downloadUrls) === null || _a === void 0 ? void 0 : _a.ios,
-        android: (_b = wallet.downloadUrls) === null || _b === void 0 ? void 0 : _b.android,
-        redirect: (_c = wallet.downloadUrls) === null || _c === void 0 ? void 0 : _c.download,
-    };
-    const bodycopy = downloads.ios && downloads.android
-        ? locales.downloadAppScreen_iosAndroid
-        : downloads.ios
-            ? locales.downloadAppScreen_ios
-            : locales.downloadAppScreen_android;
-    return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: '20px', padding: '0 12px' }, children: bodycopy })] }) }));
-};
+const OtherMethodButton = styled.button `
+  width: 100%;
+  color: var(--ck-body-color-muted);
+  background: none;
+  font-size: 14px;
+  margin-top: 10px;
+  transition: color 0.2s;
 
-const isValidEmail = (email) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-};
+  &:hover {
+    color: var(--ck-body-color);
+  }
+`;
 
-const buildCallbackUrl = ({ email, callbackUrl, provider, isOpen, }) => {
-    if (callbackUrl && !callbackUrl.startsWith('http')) {
-        callbackUrl = `${window.location.origin}${callbackUrl.startsWith('/') ? '' : '/'}${callbackUrl}`;
-    }
-    const redirectUrl = new URL(callbackUrl || window.location.origin);
-    redirectUrl.searchParams.append('openfortAuthProvider', provider);
-    if (email) {
-        redirectUrl.searchParams.append('email', email);
-    }
-    if (isOpen) {
-        redirectUrl.searchParams.append('openfortEmailVerificationUI', 'true');
+const OtherMethod = ({ currentMethod, onChangeMethod, }) => {
+    const { uiConfig } = useOpenfort();
+    const otherMethods = useMemo(() => {
+        const allowedMethods = uiConfig.walletRecovery.allowedMethods;
+        const otherMethods = allowedMethods.filter((method) => method !== currentMethod);
+        return otherMethods;
+    }, [uiConfig, currentMethod]);
+    if (otherMethods.length === 0)
+        return null;
+    if (otherMethods.length === 1) {
+        const method = otherMethods[0];
+        let text;
+        switch (method) {
+            case RecoveryMethod.PASSWORD:
+                text = 'Use password recovery instead';
+                break;
+            case RecoveryMethod.AUTOMATIC:
+                text = 'Skip for now';
+                break;
+            case RecoveryMethod.PASSKEY:
+                text = 'Use passkey recovery instead';
+                break;
+            default:
+                text = method;
+        }
+        return (jsx(OtherMethodButton, { onClick: () => {
+                onChangeMethod(method);
+            }, children: text }));
     }
-    return redirectUrl.toString();
+    return jsx(OtherMethodButton, { onClick: () => onChangeMethod('other'), children: "Choose another recovery method" });
 };
-
-/**
- * Hook for email-based authentication operations
- *
- * This hook manages email authentication flows including sign-in, sign-up, password reset,
- * email verification, and email linking. It handles both password and passwordless authentication
- * and automatically manages wallet connection after successful authentication.
- *
- * @param hookOptions - Optional configuration with callback functions and authentication options
- * @returns Current authentication state with email auth actions
- *
- * @example
- * ```tsx
- * const emailAuth = useEmailAuth({
- *   onSignInEmailSuccess: (result) => console.log('Signed in:', result.user),
- *   onSignInEmailError: (error) => console.error('Sign-in failed:', error),
- *   emailVerificationRedirectTo: 'https://yourapp.com/verify',
- *   recoverWalletAutomatically: true,
- * });
- *
- * // Sign up with email and password
- * await emailAuth.signUpEmail({
- *   email: 'user@example.com',
- *   password: 'securePassword123',
- *   name: 'John Doe',
- * });
- *
- * // Sign in with email and password
- * await emailAuth.signInEmail({
- *   email: 'user@example.com',
- *   password: 'securePassword123',
- * });
- *
- * // Request password reset
- * await emailAuth.requestResetPassword({
- *   email: 'user@example.com',
- * });
- *
- * // Reset password with state token
- * await emailAuth.resetPassword({
- *   email: 'user@example.com',
- *   password: 'newPassword123',
- *   state: 'reset-token-from-email',
- * });
- *
- * // Verify email with state token
- * await emailAuth.verifyEmail({
- *   email: 'user@example.com',
- *   state: 'verification-token-from-email',
- * });
- *
- * // Link email to existing authenticated account
- * await emailAuth.linkEmail({
- *   email: 'secondary@example.com',
- *   password: 'password123',
- * });
- *
- * // Check authentication state
- * if (emailAuth.isLoading) {
- *   console.log('Processing authentication...');
- * } else if (emailAuth.isError) {
- *   console.error('Authentication error:', emailAuth.error);
- * } else if (emailAuth.isSuccess) {
- *   console.log('Authentication successful');
- * }
- *
- * // Handle email verification requirement
- * if (emailAuth.requiresEmailVerification) {
- *   console.log('Please check your email to verify your account');
- * }
- * ```
- */
-const useEmailAuth = (hookOptions = {}) => {
-    const { client, updateUser } = useOpenfortCore();
-    const { isOpen } = useUI();
-    const [requiresEmailVerification, setRequiresEmailVerification] = useState(false);
-    const [status, setStatus] = useState({
-        status: 'idle',
-    });
-    const reset = useCallback(() => {
-        setStatus({
-            status: 'idle',
+const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
+    var _a;
+    const { embeddedState } = useOpenfortCore();
+    const { setRoute, triggerResize } = useOpenfort();
+    const [recoveryError, setRecoveryError] = useState(null);
+    const { createWallet, isWalletRecoveryOTPEnabled, requestWalletRecoverOTP } = useWallets();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const [needsOTP, setNeedsOTP] = useState(false);
+    const [otpResponse, setOtpResponse] = useState(null);
+    const [otpStatus, setOtpStatus] = useState('idle');
+    const [error, setError] = useState(false);
+    const handleCompleteOtp = async (otp) => {
+        setOtpStatus('loading');
+        const response = await createWallet({
+            recovery: {
+                recoveryMethod: RecoveryMethod.AUTOMATIC,
+                otpCode: otp,
+            },
         });
-        setRequiresEmailVerification(false);
+        if (response.error) {
+            setOtpStatus('error');
+            setError(response.error.message || 'There was an error verifying the OTP');
+            logger.log('Error verifying OTP for wallet recovery', response.error);
+            setTimeout(() => {
+                setOtpStatus('idle');
+                setError(false);
+            }, 1000);
+        }
+        else {
+            setOtpStatus('success');
+            // setTimeout(() => {
+            //   setRoute(routes.CONNECTED_SUCCESS)
+            // }, 1000)
+        }
+    };
+    useEffect(() => {
+        // To ensure the wallet is created only once
+        if (shouldCreateWallet) {
+            (async () => {
+                logger.log('Creating wallet Automatic recover');
+                const response = await createWallet();
+                if (response.isOTPRequired && isWalletRecoveryOTPEnabled) {
+                    const response = await requestWalletRecoverOTP();
+                    setNeedsOTP(true);
+                    setOtpResponse(response);
+                    if (response.error) {
+                        logger.log('Error requesting OTP for wallet recovery', response.error);
+                        setRecoveryError(response.error);
+                    }
+                }
+                else if (response.error) {
+                    logger.log('Error creating wallet', response.error);
+                    setRecoveryError(response.error);
+                }
+                triggerResize();
+            })();
+        }
+    }, [shouldCreateWallet]);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
+        }
+    }, [embeddedState]);
+    const handleResendClick = useCallback(() => {
+        setOtpStatus('send-otp');
+        setCanSendOtp(false);
     }, []);
-    const { tryUseWallet } = useConnectToWalletPostAuth();
-    const signInEmail = useCallback(async (options) => {
-        var _a, _b, _c;
-        try {
-            setStatus({
-                status: 'loading',
-            });
-            setRequiresEmailVerification(false);
-            if (!options.email || !options.password) {
-                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
-            if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
-            const result = await client.auth.logInWithEmailPassword({
-                email: options.email,
-                password: options.password,
-            });
-            if ('action' in result) {
-                setStatus({
-                    status: 'awaiting-input',
-                });
-                client.auth.requestEmailVerification({
-                    email: options.email,
-                    redirectUrl: buildCallbackUrl({
-                        email: options.email,
-                        callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                        provider: 'email',
-                        isOpen,
-                    }),
-                });
-                setRequiresEmailVerification(true);
-                return onSuccess({
-                    data: { requiresEmailVerification: true },
-                    hookOptions,
-                    options,
-                });
-            }
-            else {
-                const { wallet } = await tryUseWallet({
-                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
-                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
-                });
-                setStatus({
-                    status: 'success',
-                });
-                const user = result.user;
-                await updateUser();
-                return onSuccess({
-                    data: { user, wallet },
-                    hookOptions,
-                    options,
+    const isResendDisabled = !canSendOtp || otpStatus === 'sending-otp' || otpStatus === 'send-otp';
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (otpStatus === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, otpStatus]);
+    if (needsOTP && isWalletRecoveryOTPEnabled) {
+        if ((!(otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email) && !(otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone)) || ((_a = otpResponse.email) === null || _a === void 0 ? void 0 : _a.includes('@openfort.anonymous'))) {
+            return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(Loader, { isError: true, description: 'You cannot create a wallet without authentication, please link email or phone to continue.', header: 'Cannot create wallet.' }), jsx(Button, { onClick: () => setRoute(routes.PROVIDERS), children: "Add an authentication method" })] }));
+        }
+        return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                        logo: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? jsx(PhoneIcon, {}) : jsx(EmailIcon, {}),
+                    } }), jsxs(ModalBody, { children: [jsxs(Body$1, { children: ["Please check ", jsx("b", { children: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone : otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email }), " and enter your code below."] }), jsx(OtpInputStandalone, { length: 9, scale: "80%", onComplete: handleCompleteOtp, isLoading: otpStatus === 'loading', isError: otpStatus === 'error', isSuccess: otpStatus === 'success' }), jsxs(ResultContainer$1, { children: [otpStatus === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), otpStatus === 'error' && jsx(ModalBody, { "$error": true, children: error || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton$1, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText$1, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] })] }));
+    }
+    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { isError: !!recoveryError, header: recoveryError ? 'Error creating wallet.' : `Creating wallet...`, description: recoveryError ? recoveryError.message : undefined }) }));
+};
+const CreateWalletPasskeyRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    const { triggerResize } = useOpenfort();
+    const { createWallet, error: recoveryError } = useWallets();
+    const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
+    const { embeddedState } = useOpenfortCore();
+    useEffect(() => {
+        // To ensure the wallet is created only once
+        if (shouldCreateWallet) {
+            (async () => {
+                logger.log('Creating wallet passkey recovery');
+                const response = await createWallet({
+                    recovery: {
+                        recoveryMethod: RecoveryMethod.PASSKEY,
+                    },
                 });
-            }
+                if (response.error) {
+                    logger.log('Error creating wallet', response.error);
+                    setShouldCreateWallet(false);
+                }
+            })();
         }
-        catch (e) {
-            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
-            setStatus({
-                status: 'error',
-                error: error,
-            });
-            return onError({
-                hookOptions,
-                options,
-                error: error,
-            });
+    }, [shouldCreateWallet]);
+    useEffect(() => {
+        if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
+            setShouldCreateWallet(true);
         }
-    }, [client, setStatus, updateUser, hookOptions]);
-    const requestResetPassword = useCallback(async (options) => {
-        var _a;
-        try {
-            if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
-            setStatus({
-                status: 'loading',
-            });
-            setRequiresEmailVerification(false);
-            await client.auth.requestResetPassword({
-                email: options.email,
-                redirectUrl: buildCallbackUrl({
-                    email: options.email,
-                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                    provider: 'password',
-                    isOpen,
-                }),
-            });
-            setStatus({
-                status: 'success',
-            });
-            setRequiresEmailVerification(true);
-            return onSuccess({
-                data: { requiresEmailVerification: true },
-                hookOptions,
-                options,
-            });
+    }, [embeddedState]);
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(Loader, { icon: jsx(FingerPrintIcon, {}), isError: !!recoveryError, header: recoveryError ? 'Invalid passkey.' : 'Creating wallet with passkey...', description: recoveryError ? 'There was an error creating your passkey. Please try again.' : undefined, onRetry: () => setShouldCreateWallet(true) }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSKEY, onChangeMethod: onChangeMethod })] }));
+};
+const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    const [recoveryPhrase, setRecoveryPhrase] = useState('');
+    const [recoveryError, setRecoveryError] = useState(false);
+    const { triggerResize } = useOpenfort();
+    const [showPasswordIsTooWeakError, setShowPasswordIsTooWeakError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const { createWallet } = useWallets();
+    const handleSubmit = async () => {
+        if (getPasswordStrength(recoveryPhrase) < MEDIUM_SCORE_THRESHOLD) {
+            setShowPasswordIsTooWeakError(true);
+            return;
         }
-        catch (e) {
-            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
-                error: e,
-            });
-            setStatus({
-                status: 'error',
-                error,
-            });
-            return onError({
-                hookOptions,
-                options,
-                error: error,
+        setLoading(true);
+        const { error } = await createWallet({
+            recovery: {
+                recoveryMethod: RecoveryMethod.PASSWORD,
+                password: recoveryPhrase,
+            },
+        });
+        setLoading(false);
+        if (error) {
+            setRecoveryError(error.message || 'There was an error recovering your account');
+        }
+        else {
+            logger.log('Recovery success');
+        }
+    };
+    useEffect(() => {
+        if (recoveryError)
+            triggerResize();
+    }, [recoveryError]);
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: {
+                    logo: jsx(KeyIcon, {}),
+                    size: '1.2',
+                }, logoTopLeft: {
+                    logo: jsx(ShieldIcon, {}),
+                    size: '0.75',
+                }, logoBottomRight: {
+                    logo: jsx(LockIcon, {}),
+                    size: '0.5',
+                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+                            e.preventDefault();
+                            handleSubmit();
+                        }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
+                                    if (showPasswordIsTooWeakError)
+                                        setShowPasswordIsTooWeakError(false);
+                                    setRecoveryPhrase(e.target.value);
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+};
+const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon$1, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon$1, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon$1, { children: jsx(LockIcon, {}) })] }) })] }));
+};
+const CreateEmbeddedWallet = ({ onBack, logoutOnBack }) => {
+    const { uiConfig, triggerResize } = useOpenfort();
+    const [userSelectedMethod, setUserSelectedMethod] = useState(null);
+    useEffect(() => {
+        triggerResize();
+    }, [userSelectedMethod]);
+    const method = userSelectedMethod !== null && userSelectedMethod !== void 0 ? userSelectedMethod : uiConfig.walletRecovery.defaultMethod;
+    switch (method) {
+        case RecoveryMethod.PASSWORD:
+            return (jsx(CreateWalletPasswordRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(CreateWalletAutomaticRecovery, { onBack: onBack, logoutOnBack: logoutOnBack });
+        case RecoveryMethod.PASSKEY:
+            return (jsx(CreateWalletPasskeyRecovery, { onChangeMethod: setUserSelectedMethod, onBack: onBack, logoutOnBack: logoutOnBack }));
+        case 'other':
+            return (jsx(ChooseRecoveryMethod, { onChangeMethod: setUserSelectedMethod, onBack: () => {
+                    setUserSelectedMethod(null);
+                }, logoutOnBack: logoutOnBack }));
+        default:
+            logger.error(`Unsupported recovery method: ${userSelectedMethod}${uiConfig.walletRecovery.defaultMethod}`);
+            return null;
+    }
+};
+const CreateOrConnectWallet = () => {
+    const [showCreateEmbeddedWallet, setShowCreateEmbeddedWallet] = useState(false);
+    const { setRoute } = useOpenfort();
+    if (showCreateEmbeddedWallet)
+        return jsx(CreateEmbeddedWallet, { onBack: () => setShowCreateEmbeddedWallet(false), logoutOnBack: false });
+    return (jsxs(PageContent, { onBack: routes.PROVIDERS, logoutOnBack: true, children: [jsx(ModalHeading, { children: "Choose an option" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => setShowCreateEmbeddedWallet(true), children: [jsx(ProviderLabel, { children: "Create Wallet" }), jsx(ProviderIcon$1, { children: jsx(PlusIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => {
+                        setRoute({ route: routes.CONNECTORS, connectType: 'link' });
+                    }, children: [jsx(ProviderLabel, { children: "Connect Wallet" }), jsx(ProviderIcon$1, { children: jsx(Logos.OtherWallets, {}) })] }) })] }));
+};
+const CreateWallet = () => {
+    const { uiConfig, walletConfig, setRoute } = useOpenfort();
+    const { user } = useOpenfortCore();
+    const { isConnected } = useAccount();
+    useEffect(() => {
+        if (isConnected && user)
+            setRoute(routes.CONNECTED_SUCCESS);
+    }, [isConnected, user]);
+    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.OPTIONAL) {
+        return jsx(CreateOrConnectWallet, {});
+    }
+    if (uiConfig.linkWalletOnSignUp === LinkWalletOnSignUpOption.REQUIRED ||
+        (!walletConfig && uiConfig.linkWalletOnSignUp !== LinkWalletOnSignUpOption.DISABLED)) {
+        return jsx(Connectors, { logoutOnBack: true });
+    }
+    return jsx(CreateEmbeddedWallet, { onBack: routes.PROVIDERS, logoutOnBack: true });
+};
+
+function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
             });
         }
-    }, [client, setStatus, updateUser, hookOptions]);
-    const resetPassword = useCallback(async (options) => {
-        try {
-            if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowSize;
+}
+
+const generateMatrix = (value, errorCorrectionLevel) => {
+    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
+    const sqrt = Math.sqrt(arr.length);
+    return arr.reduce((rows, key, index) => (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows, []);
+};
+function QRCode({ ecl = 'M', size: sizeProp = 200, uri, clearArea = false, image, imageBackground = 'transparent', }) {
+    const logoSize = clearArea ? 76 : 0;
+    const size = sizeProp - 10 * 2;
+    const dots = useMemo(() => {
+        const dots = [];
+        const matrix = generateMatrix(uri, ecl);
+        const cellSize = size / matrix.length;
+        const qrList = [
+            { x: 0, y: 0 },
+            { x: 1, y: 0 },
+            { x: 0, y: 1 },
+        ];
+        qrList.forEach(({ x, y }) => {
+            const x1 = (matrix.length - 7) * cellSize * x;
+            const y1 = (matrix.length - 7) * cellSize * y;
+            for (let i = 0; i < 3; i++) {
+                dots.push(jsx("rect", { fill: i % 2 !== 0 ? 'var(--ck-qr-background, var(--ck-body-background))' : 'var(--ck-qr-dot-color)', rx: (i - 2) * -5 + (i === 0 ? 2 : 3), ry: (i - 2) * -5 + (i === 0 ? 2 : 3), width: cellSize * (7 - i * 2), height: cellSize * (7 - i * 2), x: x1 + cellSize * i, y: y1 + cellSize * i }, `${i}-${x}-${y}`));
             }
-            setStatus({
-                status: 'loading',
-            });
-            setRequiresEmailVerification(false);
-            await client.auth.resetPassword({
-                password: options.password,
-                token: options.state,
-            });
-            setStatus({
-                status: 'success',
-            });
-            setRequiresEmailVerification(true);
-            return onSuccess({
-                data: { requiresEmailVerification: true },
-                hookOptions,
-                options,
-            });
+        });
+        if (image) {
+            const x1 = (matrix.length - 7) * cellSize * 1;
+            const y1 = (matrix.length - 7) * cellSize * 1;
+            dots.push(jsxs(Fragment, { children: [jsx("rect", { fill: imageBackground, rx: (0 - 2) * -5 + 2, ry: (0 - 2) * -5 + 2, width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0 }), jsx("foreignObject", { width: cellSize * (7 - 0 * 2), height: cellSize * (7 - 0 * 2), x: x1 + cellSize * 0, y: y1 + cellSize * 0, children: jsx("div", { style: { borderRadius: (0 - 2) * -5 + 2, overflow: 'hidden' }, children: image }) })] }));
         }
-        catch (e) {
-            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
-                error: e,
-            });
-            setStatus({
-                status: 'error',
-                error,
-            });
-            return onError({
-                hookOptions,
-                options,
-                error: error,
+        const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+        const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+        const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+        matrix.forEach((row, i) => {
+            row.forEach((_, j) => {
+                if (matrix[i][j]) {
+                    // Do not render dots under position squares
+                    if (!((i < 7 && j < 7) || (i > matrix.length - 8 && j < 7) || (i < 7 && j > matrix.length - 8))) {
+                        //if (image && i > matrix.length - 9 && j > matrix.length - 9) return;
+                        if (image ||
+                            !(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
+                            dots.push(jsx("circle", { cx: i * cellSize + cellSize / 2, cy: j * cellSize + cellSize / 2, fill: "var(--ck-qr-dot-color)", r: cellSize / 3 }, `qr-dot-${i}-${j}`));
+                        }
+                    }
+                }
             });
-        }
-    }, [client, setStatus, updateUser, hookOptions]);
-    const signUpEmail = useCallback(async (options) => {
+        });
+        return dots;
+    }, [ecl, size, uri]);
+    return (jsxs("svg", { height: size, width: size, viewBox: `0 0 ${size} ${size}`, style: {
+            width: size,
+            height: size,
+        }, children: [jsx("title", { children: "QR Code" }), jsx("rect", { fill: "transparent", height: size, width: size }), dots] }));
+}
+
+const QRCodeContainer = styled(motion.div) `
+  z-index: 3;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 2px;
+  border-radius: var(--ck-qr-border-radius, 24px);
+  background: var(--ck-qr-background, transparent);
+  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
+  backface-visibility: hidden;
+  svg {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+`;
+const QRCodeContent = styled(motion.div) `
+  position: absolute;
+  inset: 13px;
+  svg {
+    width: 100% !important;
+    height: auto !important;
+  }
+`;
+const PlaceholderKeyframes = keyframes `
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const QRPlaceholder = styled(motion.div) `
+  --color: var(--ck-qr-dot-color);
+  --bg: var(--ck-qr-background, var(--ck-body-background));
+
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    z-index: 4;
+    position: relative;
+    width: 28%;
+    height: 28%;
+    border-radius: 20px;
+    background: var(--bg);
+    box-shadow: 0 0 0 7px var(--bg);
+  }
+  > span {
+    z-index: 4;
+    position: absolute;
+    background: var(--color);
+    border-radius: 12px;
+    width: 13.25%;
+    height: 13.25%;
+    box-shadow: 0 0 0 4px var(--bg);
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 9px;
+      border-radius: 3px;
+      box-shadow: 0 0 0 4px var(--bg);
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+  }
+  &:before {
+    z-index: 3;
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeat;
+    background-size: 1.888% 1.888%;
+    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+  }
+  &:after {
+    z-index: 5;
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: scale(1.5) rotate(45deg);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes} 1000ms linear infinite both;
+  }
+`;
+const LogoContainer$1 = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(50%) scale(0.9999); // Shifting fix
+`;
+const LogoIcon = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  left: 50%;
+  overflow: hidden;
+
+  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  ${(props) => props.$wcLogo
+    ? css `
+          width: 29%;
+          height: 20.5%;
+        `
+    : css `
+          width: 28%;
+          height: 28%;
+          border-radius: 17px;
+          &:before {
+            pointer-events: none;
+            z-index: 2;
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+          }
+        `}
+`;
+
+function CustomQRCode({ value, image, imageBackground, imagePosition = 'center', tooltipMessage }) {
+    const windowSize = useWindowSize();
+    const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
+    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer$1, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
+                            background: imagePosition === 'center' ? imageBackground : undefined,
+                        }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: jsx(QRCode, { uri: value, size: 288, ecl: "M", clearArea: !!(imagePosition === 'center' && image) }) }, value)) : (jsxs(QRPlaceholder, { initial: { opacity: 0.1 }, animate: { opacity: 0.1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
+                            duration: 0.2,
+                        }, children: [jsx("span", {}), jsx("span", {}), jsx("span", {}), jsx("div", {})] })) })] }) }));
+}
+CustomQRCode.displayName = 'CustomQRCode';
+
+const DownloadApp = () => {
+    var _a, _b, _c;
+    const context = useOpenfort();
+    const wallet = useWallet(context.connector.id);
+    const locales = useLocales({
+        CONNECTORNAME: wallet === null || wallet === void 0 ? void 0 : wallet.name,
+    });
+    if (!wallet)
+        return jsx(Fragment, { children: "Wallet not found" });
+    const downloads = {
+        ios: (_a = wallet.downloadUrls) === null || _a === void 0 ? void 0 : _a.ios,
+        android: (_b = wallet.downloadUrls) === null || _b === void 0 ? void 0 : _b.android,
+        redirect: (_c = wallet.downloadUrls) === null || _c === void 0 ? void 0 : _c.download,
+    };
+    const bodycopy = downloads.ios && downloads.android
+        ? locales.downloadAppScreen_iosAndroid
+        : downloads.ios
+            ? locales.downloadAppScreen_ios
+            : locales.downloadAppScreen_android;
+    return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: '20px', padding: '0 12px' }, children: bodycopy })] }) }));
+};
+
+const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+
+const buildCallbackUrl = ({ email, callbackUrl, provider, isOpen, }) => {
+    if (callbackUrl && !callbackUrl.startsWith('http')) {
+        callbackUrl = `${window.location.origin}${callbackUrl.startsWith('/') ? '' : '/'}${callbackUrl}`;
+    }
+    const redirectUrl = new URL(callbackUrl || window.location.origin);
+    redirectUrl.searchParams.append('openfortAuthProvider', provider);
+    if (email) {
+        redirectUrl.searchParams.append('email', email);
+    }
+    if (isOpen) {
+        redirectUrl.searchParams.append('openfortEmailVerificationUI', 'true');
+    }
+    return redirectUrl.toString();
+};
+
+/**
+ * Hook for email-based authentication operations
+ *
+ * This hook manages email authentication flows including sign-in, sign-up, password reset,
+ * email verification, and email linking. It handles both password and passwordless authentication
+ * and automatically manages wallet connection after successful authentication.
+ *
+ * @param hookOptions - Optional configuration with callback functions and authentication options
+ * @returns Current authentication state with email auth actions
+ *
+ * @example
+ * ```tsx
+ * const emailAuth = useEmailAuth({
+ *   onSignInEmailSuccess: (result) => console.log('Signed in:', result.user),
+ *   onSignInEmailError: (error) => console.error('Sign-in failed:', error),
+ *   emailVerificationRedirectTo: 'https://yourapp.com/verify',
+ *   recoverWalletAutomatically: true,
+ * });
+ *
+ * // Sign up with email and password
+ * await emailAuth.signUpEmail({
+ *   email: 'user@example.com',
+ *   password: 'securePassword123',
+ *   name: 'John Doe',
+ * });
+ *
+ * // Sign in with email and password
+ * await emailAuth.signInEmail({
+ *   email: 'user@example.com',
+ *   password: 'securePassword123',
+ * });
+ *
+ * // Request password reset
+ * await emailAuth.requestResetPassword({
+ *   email: 'user@example.com',
+ * });
+ *
+ * // Reset password with state token
+ * await emailAuth.resetPassword({
+ *   email: 'user@example.com',
+ *   password: 'newPassword123',
+ *   state: 'reset-token-from-email',
+ * });
+ *
+ * // Verify email with state token
+ * await emailAuth.verifyEmail({
+ *   email: 'user@example.com',
+ *   state: 'verification-token-from-email',
+ * });
+ *
+ * // Link email to existing authenticated account
+ * await emailAuth.linkEmail({
+ *   email: 'secondary@example.com',
+ *   password: 'password123',
+ * });
+ *
+ * // Check authentication state
+ * if (emailAuth.isLoading) {
+ *   console.log('Processing authentication...');
+ * } else if (emailAuth.isError) {
+ *   console.error('Authentication error:', emailAuth.error);
+ * } else if (emailAuth.isSuccess) {
+ *   console.log('Authentication successful');
+ * }
+ *
+ * // Handle email verification requirement
+ * if (emailAuth.requiresEmailVerification) {
+ *   console.log('Please check your email to verify your account');
+ * }
+ * ```
+ */
+const useEmailAuth = (hookOptions = {}) => {
+    const { client, updateUser } = useOpenfortCore();
+    const { isOpen } = useUI();
+    const [requiresEmailVerification, setRequiresEmailVerification] = useState(false);
+    const [status, setStatus] = useState({
+        status: 'idle',
+    });
+    const reset = useCallback(() => {
+        setStatus({
+            status: 'idle',
+        });
+        setRequiresEmailVerification(false);
+    }, []);
+    const { tryUseWallet } = useConnectToWalletPostAuth();
+    const signInEmail = useCallback(async (options) => {
         var _a, _b, _c;
         try {
-            if (!options.email || !options.password) {
-                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
-            if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
             setStatus({
                 status: 'loading',
             });
             setRequiresEmailVerification(false);
-            const result = await client.auth.signUpWithEmailPassword({
-                email: options.email,
-                password: options.password,
-                callbackURL: buildCallbackUrl({
-                    email: options.email,
-                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                    provider: 'email',
-                    isOpen,
-                }),
-                ...(options.name && { name: options.name }),
-            });
-            // TODO: TMP FIX
-            if ('token' in result && result.token !== null) {
-                const { wallet } = await tryUseWallet({
-                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
-                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
-                });
-                setStatus({
-                    status: 'success',
-                });
-                const user = result.user;
-                await updateUser(user);
-                return onSuccess({
-                    data: { user, wallet },
-                    hookOptions,
-                    options,
-                });
-            }
-            else {
-                setStatus({
-                    status: 'awaiting-input',
-                });
-                setRequiresEmailVerification(true);
-                return onSuccess({
-                    data: { requiresEmailVerification: true },
-                    hookOptions,
-                    options,
-                });
-            }
-        }
-        catch (e) {
-            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
-            setStatus({
-                status: 'error',
-                error,
-            });
-            return onError({
-                hookOptions,
-                options,
-                error: error,
-            });
-        }
-    }, [client, setStatus, updateUser, hookOptions, isOpen]);
-    const linkEmail = useCallback(async (options) => {
-        var _a;
-        try {
-            if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+            if (!options.email || !options.password) {
+                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13577,11 +13802,8 @@ const useEmailAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            await client.validateAndRefreshToken();
-            const authToken = await client.getAccessToken();
-            if (!authToken) {
-                logger.log('No token found');
-                const error = new OpenfortError('No token found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13592,29 +13814,49 @@ const useEmailAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            await client.auth.addEmail({
-                // name: options.name || '',
+            const result = await client.auth.logInWithEmailPassword({
                 email: options.email,
-                // password: options.password,
-                // method: 'password',
-                callbackURL: buildCallbackUrl({
-                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                    email: options.email,
-                    provider: 'email',
-                    isOpen,
-                }),
-            });
-            logger.log('Email linked successfully');
-            return onSuccess({
-                data: {},
-                hookOptions,
-                options,
+                password: options.password,
             });
+            if ('action' in result) {
+                setStatus({
+                    status: 'awaiting-input',
+                });
+                client.auth.requestEmailVerification({
+                    email: options.email,
+                    redirectUrl: buildCallbackUrl({
+                        email: options.email,
+                        callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                        provider: 'email',
+                        isOpen,
+                    }),
+                });
+                setRequiresEmailVerification(true);
+                return onSuccess({
+                    data: { requiresEmailVerification: true },
+                    hookOptions,
+                    options,
+                });
+            }
+            else {
+                const { wallet } = await tryUseWallet({
+                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
+                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
+                });
+                setStatus({
+                    status: 'success',
+                });
+                const user = result.user;
+                await updateUser();
+                return onSuccess({
+                    data: { user, wallet },
+                    hookOptions,
+                    options,
+                });
+            }
         }
         catch (e) {
-            const error = new OpenfortError('Failed to link email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
-                error: e,
-            });
+            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
             setStatus({
                 status: 'error',
                 error: error,
@@ -13625,11 +13867,9 @@ const useEmailAuth = (hookOptions = {}) => {
                 error: error,
             });
         }
-    }, [client, setStatus, updateUser, hookOptions, isOpen]);
-    const verifyEmail = useCallback(async (options) => {
-        setStatus({
-            status: 'loading',
-        });
+    }, [client, setStatus, updateUser, hookOptions]);
+    const requestResetPassword = useCallback(async (options) => {
+        var _a;
         try {
             if (!isValidEmail(options.email)) {
                 const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
@@ -13643,199 +13883,46 @@ const useEmailAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            await client.auth.verifyEmail({
-                token: options.state,
+            setStatus({
+                status: 'loading',
+            });
+            setRequiresEmailVerification(false);
+            await client.auth.requestResetPassword({
+                email: options.email,
+                redirectUrl: buildCallbackUrl({
+                    email: options.email,
+                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                    provider: 'password',
+                    isOpen,
+                }),
             });
             setStatus({
                 status: 'success',
             });
+            setRequiresEmailVerification(true);
             return onSuccess({
+                data: { requiresEmailVerification: true },
                 hookOptions,
                 options,
-                data: {
-                    email: options.email,
-                },
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to verify email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
-            });
-            setStatus({
-                status: 'error',
-                error,
-            });
-            logger.log('Error verifying email', e);
-            return onError({
-                hookOptions,
-                options,
-                error,
-            });
-        }
-    }, [client, hookOptions]);
-    return {
-        signInEmail,
-        signUpEmail,
-        verifyEmail,
-        linkEmail,
-        requestResetPassword,
-        resetPassword,
-        reset,
-        ...mapStatus(status),
-        requiresEmailVerification,
-        isAwaitingInput: status.status === 'awaiting-input',
-    };
-};
-
-const FooterContainer = styled.span `
-  padding: 12px 4px 0px 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  line-height: 1rem;
-  color: var(--ck-body-disclaimer-color, var(--ck-body-color-muted, inherit));
-
-  & button {
-    color: var(--ck-body-disclaimer-link-color, inherit);
-    font-weight: var(--ck-body-disclaimer-font-weight, 400);
-    text-decoration: none;
-    transition: color 200ms ease;
-    &:hover {
-      color: var(--ck-body-disclaimer-link-hover-color, inherit);
-    }
-  }
-`;
-
-// TODO: Localize
-const textVariants$1 = {
-    initial: {
-        opacity: 0,
-    },
-    animate: {
-        opacity: 1,
-        transition: {
-            duration: 0.3,
-            ease: [0.25, 1, 0.5, 1],
-        },
-    },
-    exit: {
-        position: 'absolute',
-        opacity: 0,
-        transition: {
-            duration: 0,
-        },
-    },
-};
-const EmailLogin = () => {
-    const [password, setPassword] = React.useState('');
-    const { setRoute, triggerResize, setEmailInput: setEmail, emailInput: email, previousRoute } = useOpenfort();
-    const [isRegister, setIsRegister] = React.useState(false);
-    const { signUpEmail, signInEmail, error: loginError, isLoading: loginLoading, } = useEmailAuth({
-        recoverWalletAutomatically: false,
-    });
-    const handleSubmit = async () => {
-        if (isRegister) {
-            return handleSignUp();
-        }
-        setIsRegister(false);
-        setTimeout(() => {
-            triggerResize();
-        });
-        const { error, requiresEmailVerification } = await signInEmail({
-            email,
-            password,
-        });
-        logger.log('SIGN IN RESPONSE', { error, requiresEmailVerification });
-        if (!error) {
-            if (requiresEmailVerification) {
-                setRoute(routes.EMAIL_VERIFICATION);
-            }
-            else {
-                setRoute(routes.LOAD_WALLETS);
-            }
-        }
-        else {
-            setTimeout(() => {
-                triggerResize();
-            }, 100);
-        }
-    };
-    const handleSignUp = async () => {
-        setIsRegister(true);
-        setTimeout(() => {
-            triggerResize();
-        });
-        const { error, requiresEmailVerification } = await signUpEmail({
-            email,
-            password,
-        });
-        logger.log('SIGN UP RESPONSE', { error, requiresEmailVerification });
-        if (!error) {
-            if (requiresEmailVerification) {
-                setRoute(routes.EMAIL_VERIFICATION);
-            }
-            else {
-                setEmail('');
-                setRoute(routes.LOAD_WALLETS);
-            }
-        }
-        else {
-            setTimeout(() => {
-                triggerResize();
-            }, 100);
-        }
-    };
-    const handleToggle = () => {
-        setIsRegister((prev) => !prev);
-    };
-    const errorMessage = loginError
-        ? loginError.message === 'Unauthorized'
-            ? 'Invalid email or password'
-            : loginError.message
-        : null;
-    const onBack = useMemo(() => {
-        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.EMAIL_VERIFICATION)
-            return routes.PROVIDERS;
-        return 'back';
-    }, [previousRoute]);
-    return (jsxs(PageContent, { onBack: onBack, children: [jsxs("form", { onSubmit: (e) => {
-                    e.preventDefault();
-                    handleSubmit();
-                }, noValidate: true, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), jsx(Input, { value: password, onChange: (e) => setPassword(e.target.value), type: "password", placeholder: "Enter your password", disabled: loginLoading, autoFocus: true }), jsx(ModalBody, { style: { marginTop: 12 }, "$error": !!loginError, children: jsx(AnimatePresence, { initial: false, children: jsxs(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: [jsx(FitText, { maxFontSize: 80, children: jsx("span", { style: { textAlign: 'center', color: 'var(--color-error)', marginRight: '4px' }, children: errorMessage }) }, loginError ? 'text-error' : 'text-no-error'), jsx(FitText, { maxFontSize: 80, children: jsx(TextLinkButton, { type: "button", onClick: () => {
-                                                setRoute(routes.FORGOT_PASSWORD);
-                                            }, children: "Forgot password?" }) })] }, loginError ? 'error' : 'no-error') }) }), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: isRegister ? 'Signing up...' : 'Logging in...' }, "connectedText")) : isRegister ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign up" }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign in" }, "connectedText")) }) })] }), jsxs(FooterContainer, { children: ["or", jsx("button", { type: "button", onClick: handleToggle, disabled: loginLoading, children: isRegister ? 'Sign in' : 'Sign up' })] })] }));
-};
-
-const useEmailOtpAuth = (hookOptions = {}) => {
-    const { client, updateUser } = useOpenfortCore();
-    const [status, setStatus] = useState({
-        status: 'idle',
-    });
-    const reset = useCallback(() => {
-        setStatus({
-            status: 'idle',
-        });
-    }, []);
-    const { tryUseWallet } = useConnectToWalletPostAuth();
-    const signInEmailOtp = useCallback(async (options) => {
-        var _a, _b;
-        try {
+            });
             setStatus({
-                status: 'loading',
+                status: 'error',
+                error,
             });
-            if (!options.email || !options.otp) {
-                const error = new OpenfortError('Email and OTP are required', OpenfortReactErrorType.VALIDATION_ERROR);
-                setStatus({
-                    status: 'error',
-                    error,
-                });
-                return onError({
-                    hookOptions,
-                    options,
-                    error,
-                });
-            }
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions]);
+    const resetPassword = useCallback(async (options) => {
+        try {
             if (!isValidEmail(options.email)) {
                 const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
@@ -13848,32 +13935,31 @@ const useEmailOtpAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            const result = await client.auth.logInWithEmailOtp({
-                email: options.email,
-                otp: options.otp,
+            setStatus({
+                status: 'loading',
             });
-            const { wallet } = await tryUseWallet({
-                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
-                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
+            setRequiresEmailVerification(false);
+            await client.auth.resetPassword({
+                password: options.password,
+                token: options.state,
             });
             setStatus({
                 status: 'success',
             });
-            const user = result.user;
-            await updateUser();
+            setRequiresEmailVerification(true);
             return onSuccess({
-                data: { user, wallet },
+                data: { requiresEmailVerification: true },
                 hookOptions,
                 options,
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to login with email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
                 status: 'error',
-                error: error,
+                error,
             });
             return onError({
                 hookOptions,
@@ -13882,13 +13968,11 @@ const useEmailOtpAuth = (hookOptions = {}) => {
             });
         }
     }, [client, setStatus, updateUser, hookOptions]);
-    const requestEmailOtp = useCallback(async (options) => {
+    const signUpEmail = useCallback(async (options) => {
+        var _a, _b, _c;
         try {
-            setStatus({
-                status: 'requesting',
-            });
-            if (!options.email) {
-                const error = new OpenfortError('Email is required', OpenfortReactErrorType.VALIDATION_ERROR);
+            if (!options.email || !options.password) {
+                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13911,12 +13995,106 @@ const useEmailOtpAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            await client.auth.requestEmailOtp({
+            setStatus({
+                status: 'loading',
+            });
+            setRequiresEmailVerification(false);
+            const result = await client.auth.signUpWithEmailPassword({
                 email: options.email,
+                password: options.password,
+                callbackURL: buildCallbackUrl({
+                    email: options.email,
+                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                    provider: 'email',
+                    isOpen,
+                }),
+                ...(options.name && { name: options.name }),
             });
+            // TODO: TMP FIX
+            if ('token' in result && result.token !== null) {
+                const { wallet } = await tryUseWallet({
+                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
+                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
+                });
+                setStatus({
+                    status: 'success',
+                });
+                const user = result.user;
+                await updateUser(user);
+                return onSuccess({
+                    data: { user, wallet },
+                    hookOptions,
+                    options,
+                });
+            }
+            else {
+                setStatus({
+                    status: 'awaiting-input',
+                });
+                setRequiresEmailVerification(true);
+                return onSuccess({
+                    data: { requiresEmailVerification: true },
+                    hookOptions,
+                    options,
+                });
+            }
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
             setStatus({
-                status: 'success',
+                status: 'error',
+                error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions, isOpen]);
+    const linkEmail = useCallback(async (options) => {
+        var _a;
+        try {
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            await client.validateAndRefreshToken();
+            const authToken = await client.getAccessToken();
+            if (!authToken) {
+                logger.log('No token found');
+                const error = new OpenfortError('No token found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            await client.auth.addEmail({
+                // name: options.name || '',
+                email: options.email,
+                // password: options.password,
+                // method: 'password',
+                callbackURL: buildCallbackUrl({
+                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                    email: options.email,
+                    provider: 'email',
+                    isOpen,
+                }),
             });
+            logger.log('Email linked successfully');
             return onSuccess({
                 data: {},
                 hookOptions,
@@ -13924,7 +14102,7 @@ const useEmailOtpAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to request email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to link email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
@@ -13937,298 +14115,328 @@ const useEmailOtpAuth = (hookOptions = {}) => {
                 error: error,
             });
         }
-    }, [client, setStatus, updateUser, hookOptions]);
-    return {
-        signInEmailOtp,
-        requestEmailOtp,
-        reset,
-        isRequesting: status.status === 'requesting',
-        ...mapStatus(status),
-        isAwaitingInput: status.status === 'awaiting-input',
-    };
-};
-
-const caretBlink = keyframes `
-  0%, 70%, 100% { opacity: 1; }
-  20%, 50% { opacity: 0; }
-`;
-const OtpContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  --border: ${({ showBorder }) => (showBorder ? 'var(--ck-body-color-muted)' : 'transparent')};
-`;
-const pulse = keyframes `
-  0% {
-    opacity: 100%;
-  }
-  50% {
-    opacity: 40%;
-  }
-  100% {
-    opacity: 100%;
-  }
-`;
-const dist = 2;
-const shakeKeyframes = keyframes `
-  0%{ transform:none; }
-  25%{ transform:translateX(${dist}px); }
-  50%{ transform:translateX(-${dist}px); }
-  75%{ transform:translateX(${dist}px); }
-  100%{ transform:none; }
-`;
-const keyframeSuccess = keyframes `
-  0% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
-`;
-const OTPGroup = styled.div `
-  display: flex;
-
-  outline-width: 3px;
-  outline-style: solid;
-  border-radius: 0.375rem;
-  transition: outline-color 0.3s, border-radius .5s;
-
-  outline-color: ${({ isError, isSuccess }) => {
-    if (isError)
-        return 'var(--ck-body-color-danger)';
-    if (isSuccess)
-        return 'var(--ck-body-color-valid)';
-    return 'transparent';
-}};
-
-  ${({ isLoading }) => isLoading &&
-    css `
-      animation: ${pulse} 1s ease-in-out infinite;
-    `}
-
-  ${({ isError }) => isError &&
-    css `
-      animation: ${shakeKeyframes} 220ms ease-out both;
-    `}
-
-  ${({ isSuccess }) => isSuccess &&
-    css `
-      border-radius: 3rem;
-      min-width: 3.5rem;
-      ${OTPSlotWrapper} {
-        width: 0;
-        border: 0;
-        transition: width .5s, border .5s;
-      }
-      animation: ${keyframeSuccess} 220ms ease-out both;
-      animation-delay: 250ms;
-    `}
-`;
-const OTPSlotWrapper = styled.div `
-  position: relative;
-  width: 2.5rem;
-  height: 3.5rem;     
-  font-size: 2rem;
+    }, [client, setStatus, updateUser, hookOptions, isOpen]);
+    const verifyEmail = useCallback(async (options) => {
+        setStatus({
+            status: 'loading',
+        });
+        try {
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            await client.auth.verifyEmail({
+                token: options.state,
+            });
+            setStatus({
+                status: 'success',
+            });
+            return onSuccess({
+                hookOptions,
+                options,
+                data: {
+                    email: options.email,
+                },
+            });
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to verify email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error,
+            });
+            logger.log('Error verifying email', e);
+            return onError({
+                hookOptions,
+                options,
+                error,
+            });
+        }
+    }, [client, hookOptions]);
+    return {
+        signInEmail,
+        signUpEmail,
+        verifyEmail,
+        linkEmail,
+        requestResetPassword,
+        resetPassword,
+        reset,
+        ...mapStatus(status),
+        requiresEmailVerification,
+        isAwaitingInput: status.status === 'awaiting-input',
+    };
+};
 
+const FooterContainer = styled.span `
+  padding: 12px 4px 0px 0px;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
+  line-height: 1rem;
+  color: var(--ck-body-disclaimer-color, var(--ck-body-color-muted, inherit));
 
-  transition: all 0.3s;
-
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  border-right: 0.5px solid var(--border);
-  border-left: 0.5px solid var(--border);
-
-  &:first-child {
-    border-left: 1px solid var(--border);
-    border-radius: 0.375rem 0 0 0.375rem;
-  }
-
-  &:last-child {
-    border-radius: 0 0.375rem 0.375rem 0;
+  & button {
+    color: var(--ck-body-disclaimer-link-color, inherit);
+    font-weight: var(--ck-body-disclaimer-font-weight, 400);
+    text-decoration: none;
+    transition: color 200ms ease;
+    &:hover {
+      color: var(--ck-body-disclaimer-link-hover-color, inherit);
+    }
   }
-
-  outline: ${({ isActive }) => (isActive ? '2px solid var(--ck-connectbutton-color)' : '0')};
-  z-index: ${({ isActive }) => (isActive ? 1 : 0)};
-  outline-offset: 0;
-
-  cursor: text;
-  color: var(--ck-body-color);
-`;
-const OTPNumberValue = styled.div `
-  opacity: ${({ $hide }) => ($hide ? 0 : 1)};
-  transition: opacity 0.3s;
-`;
-const OTPHiddenInput = styled.input `
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  cursor: text;
-  caret-color: transparent; /* Hide native caret */
-`;
-const FakeCaretWrapper = styled.div `
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  animation: ${caretBlink} 1.2s ease-out infinite;
-`;
-const CaretBar = styled.div `
-  width: 1px;
-  height: 2rem;
-  background: var(--ck-body-color);
-`;
-const keyframeWrapper = keyframes `
-  0% { transform: scale(0); }
-  100% { transform: scale(1); }
-`;
-const SuccessTickWrapper = styled.div `
-  position: absolute;
-  inset: 5px;
-  display: flex;
-  animation: ${keyframeWrapper} 200ms ease-out both;
-  animation-delay: 200ms;
-  color: var(--ck-body-color-valid);
 `;
 
-function FakeCaret() {
-    return (jsx(FakeCaretWrapper, { children: jsx(CaretBar, {}) }));
-}
-function OtpInputStandalone({ length = 6, onChange, onComplete, isLoading, isError, isSuccess, }) {
-    const [values, setValues] = useState(Array(length).fill(''));
-    const [activeIndex, setActiveIndex] = useState(0);
-    const canEdit = !isLoading && !isError && !isSuccess;
-    const inputsRef = useRef([]);
-    const handleInput = (index, char) => {
-        var _a;
-        if (!char.match(/^[0-9]$/))
-            return;
-        if (!canEdit)
-            return;
-        const newValues = [...values];
-        newValues[index] = char;
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
-        // Move cursor to next box
-        if (index < length - 1) {
-            setActiveIndex(index + 1);
-            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+// TODO: Localize
+const textVariants$1 = {
+    initial: {
+        opacity: 0,
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        position: 'absolute',
+        opacity: 0,
+        transition: {
+            duration: 0,
+        },
+    },
+};
+const EmailLogin = () => {
+    const [password, setPassword] = React.useState('');
+    const { setRoute, triggerResize, setEmailInput: setEmail, emailInput: email, previousRoute } = useOpenfort();
+    const [isRegister, setIsRegister] = React.useState(false);
+    const { signUpEmail, signInEmail, error: loginError, isLoading: loginLoading, } = useEmailAuth({
+        recoverWalletAutomatically: false,
+    });
+    const handleSubmit = async () => {
+        if (isRegister) {
+            return handleSignUp();
         }
-    };
-    useEffect(() => {
-        if (values.every((v) => v !== '')) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(values.join(''));
+        setIsRegister(false);
+        setTimeout(() => {
+            triggerResize();
+        });
+        const { error, requiresEmailVerification } = await signInEmail({
+            email,
+            password,
+        });
+        logger.log('SIGN IN RESPONSE', { error, requiresEmailVerification });
+        if (!error) {
+            if (requiresEmailVerification) {
+                setRoute(routes.EMAIL_VERIFICATION);
+            }
+            else {
+                setRoute(routes.LOAD_WALLETS);
+            }
         }
-    }, [values]);
-    const handleBackspace = (index) => {
-        var _a;
-        const newValues = [...values];
-        if (newValues[index] === '') {
-            if (index > 0) {
-                // Move back
-                setActiveIndex(index - 1);
-                (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        else {
+            setTimeout(() => {
+                triggerResize();
+            }, 100);
+        }
+    };
+    const handleSignUp = async () => {
+        setIsRegister(true);
+        setTimeout(() => {
+            triggerResize();
+        });
+        const { error, requiresEmailVerification } = await signUpEmail({
+            email,
+            password,
+        });
+        logger.log('SIGN UP RESPONSE', { error, requiresEmailVerification });
+        if (!error) {
+            if (requiresEmailVerification) {
+                setRoute(routes.EMAIL_VERIFICATION);
+            }
+            else {
+                setEmail('');
+                setRoute(routes.LOAD_WALLETS);
             }
-            newValues[index - 1] = '';
         }
         else {
-            newValues[index] = '';
+            setTimeout(() => {
+                triggerResize();
+            }, 100);
         }
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
     };
-    const handlePaste = (e) => {
-        var _a;
-        const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
-        if (!pasted)
-            return;
-        const arr = pasted.substring(0, length).split('');
-        const newValues = [...values];
-        arr.forEach((char, i) => {
-            newValues[i] = char;
+    const handleToggle = () => {
+        setIsRegister((prev) => !prev);
+    };
+    const errorMessage = loginError
+        ? loginError.message === 'Unauthorized'
+            ? 'Invalid email or password'
+            : loginError.message
+        : null;
+    const onBack = useMemo(() => {
+        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.EMAIL_VERIFICATION)
+            return routes.PROVIDERS;
+        return 'back';
+    }, [previousRoute]);
+    return (jsxs(PageContent, { onBack: onBack, children: [jsxs("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    handleSubmit();
+                }, noValidate: true, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), jsx(Input, { value: password, onChange: (e) => setPassword(e.target.value), type: "password", placeholder: "Enter your password", disabled: loginLoading, autoFocus: true }), jsx(ModalBody, { style: { marginTop: 12 }, "$error": !!loginError, children: jsx(AnimatePresence, { initial: false, children: jsxs(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: [jsx(FitText, { maxFontSize: 80, children: jsx("span", { style: { textAlign: 'center', color: 'var(--color-error)', marginRight: '4px' }, children: errorMessage }) }, loginError ? 'text-error' : 'text-no-error'), jsx(FitText, { maxFontSize: 80, children: jsx(TextLinkButton, { type: "button", onClick: () => {
+                                                setRoute(routes.FORGOT_PASSWORD);
+                                            }, children: "Forgot password?" }) })] }, loginError ? 'error' : 'no-error') }) }), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: isRegister ? 'Signing up...' : 'Logging in...' }, "connectedText")) : isRegister ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign up" }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign in" }, "connectedText")) }) })] }), jsxs(FooterContainer, { children: ["or", jsx("button", { type: "button", onClick: handleToggle, disabled: loginLoading, children: isRegister ? 'Sign in' : 'Sign up' })] })] }));
+};
+
+const useEmailOtpAuth = (hookOptions = {}) => {
+    const { client, updateUser } = useOpenfortCore();
+    const [status, setStatus] = useState({
+        status: 'idle',
+    });
+    const reset = useCallback(() => {
+        setStatus({
+            status: 'idle',
         });
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
-        const finalIndex = Math.min(arr.length - 1, length - 1);
-        setActiveIndex(finalIndex);
-        (_a = inputsRef.current[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleFocus = (i) => {
+    }, []);
+    const { tryUseWallet } = useConnectToWalletPostAuth();
+    const signInEmailOtp = useCallback(async (options) => {
         var _a, _b;
-        if (activeIndex !== -1) {
-            setActiveIndex(i);
-            return;
+        try {
+            setStatus({
+                status: 'loading',
+            });
+            if (!options.email || !options.otp) {
+                const error = new OpenfortError('Email and OTP are required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            const result = await client.auth.logInWithEmailOtp({
+                email: options.email,
+                otp: options.otp,
+            });
+            const { wallet } = await tryUseWallet({
+                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
+                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
+            });
+            setStatus({
+                status: 'success',
+            });
+            const user = result.user;
+            await updateUser();
+            return onSuccess({
+                data: { user, wallet },
+                hookOptions,
+                options,
+            });
         }
-        const firstEmptyIndex = values.indexOf('');
-        if (firstEmptyIndex !== -1) {
-            setActiveIndex(firstEmptyIndex);
-            (_a = inputsRef.current[firstEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        catch (e) {
+            const error = new OpenfortError('Failed to login with email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
         }
-        else {
-            setActiveIndex(length - 1);
-            (_b = inputsRef.current[length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [client, setStatus, updateUser, hookOptions]);
+    const requestEmailOtp = useCallback(async (options) => {
+        try {
+            setStatus({
+                status: 'requesting',
+            });
+            if (!options.email) {
+                const error = new OpenfortError('Email is required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            await client.auth.requestEmailOtp({
+                email: options.email,
+            });
+            setStatus({
+                status: 'success',
+            });
+            return onSuccess({
+                data: {},
+                hookOptions,
+                options,
+            });
         }
-    };
-    useEffect(() => {
-        var _a;
-        if (!isError) {
-            setValues(Array(length).fill(''));
-            setActiveIndex(0);
-            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        catch (e) {
+            const error = new OpenfortError('Failed to request email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
         }
-    }, [isError]);
-    return (jsx(OtpContainer, { showBorder: !isSuccess, children: jsxs(OTPGroup, { isError: isError, isSuccess: isSuccess, isLoading: isLoading, children: [values.slice(0, 6).map((value, idx) => {
-                    const index = idx;
-                    return (jsxs(OTPSlotWrapper, { isActive: canEdit && activeIndex === index, children: [jsx(OTPHiddenInput, { ref: (el) => {
-                                    inputsRef.current[index] = el;
-                                }, value: "", inputMode: "numeric", onBlur: () => setActiveIndex(-1), autoComplete: "one-time-code", autoFocus: index === 0, onFocus: () => handleFocus(index), onPaste: handlePaste, onKeyDown: (e) => {
-                                    if (!canEdit)
-                                        return;
-                                    if (e.key === 'Backspace') {
-                                        e.preventDefault();
-                                        handleBackspace(index);
-                                    }
-                                }, onChange: (e) => handleInput(index, e.target.value) }), value && jsx(OTPNumberValue, { "$hide": isSuccess, children: value }), !value && activeIndex === index && jsx(FakeCaret, {})] }, index));
-                }), isSuccess && (jsx(SuccessTickWrapper, { children: jsx(TickIcon, { width: '100%', height: '100%' }) }))] }) }));
-}
-
-const Body$1 = styled.p `
-  color: var(--ck-body-color);
-  text-align: center;
-  margin-bottom: 16px;
-`;
-const ResultContainer$1 = styled.div `
-  margin-top: 16px;
-  height: 24px;
-  text-align: center;
-`;
-const FooterButtonText$1 = styled.button `
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--ck-body-color-muted);
-  transition: color 0.3s;
-
-  &:disabled {
-    color: var(--ck-body-color-muted) !important;
-    cursor: not-allowed;
-  }
-`;
-const FooterTextButton$1 = styled.p `
-  color: var(--ck-body-color-muted);
-  text-align: center;
-  margin-top: 16px;
-  &:hover {
-    ${FooterButtonText$1} {
-      color: var(--ck-body-color);
-    }
-  }
-`;
+    }, [client, setStatus, updateUser, hookOptions]);
+    return {
+        signInEmailOtp,
+        requestEmailOtp,
+        reset,
+        isRequesting: status.status === 'requesting',
+        ...mapStatus(status),
+        isAwaitingInput: status.status === 'awaiting-input',
+    };
+};
 
 const RESEND_COOLDOWN_MS$1 = 10000;
 const SUCCESS_REDIRECT_DELAY_MS$1 = 2000;
@@ -14600,7 +14808,7 @@ const LinkEmail = () => {
     return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Link your email" }), jsxs("form", { onSubmit: (e) => {
                     e.preventDefault();
                     handleSubmit();
-                }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), loginError && (jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: loginError }) })), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Linking email..." }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Link email" }, "connectedText")) }) })] })] }));
+                }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), loginError && (jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: loginError })), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Linking email..." }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Link email" }, "connectedText")) }) })] })] }));
 };
 
 const getProviderName = (provider) => {
@@ -15861,16 +16069,25 @@ const RecoverPasskeyWallet = ({ wallet, onBack, logoutOnBack, }) => {
 };
 const RecoverAutomaticWallet = ({ walletAddress, onBack, logoutOnBack, }) => {
     const { embeddedState } = useOpenfortCore();
-    const { setActiveWallet } = useWallets();
+    const { setActiveWallet, isWalletRecoveryOTPEnabled, requestWalletRecoverOTP } = useWallets();
     const { setRoute } = useOpenfort();
     const [error, setError] = useState(false);
+    const [needsOTP, setNeedsOTP] = useState(false);
+    const [otpResponse, setOtpResponse] = useState(null);
+    const [otpStatus, setOtpStatus] = useState('idle');
     const recoverWallet = useCallback(async () => {
         if (embeddedState === EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED) {
             logger.log('Automatically recovering wallet', walletAddress);
             const response = await setActiveWallet({
                 walletId: embeddedWalletId,
+                address: walletAddress,
             });
-            if (response.error) {
+            if (response.isOTPRequired && isWalletRecoveryOTPEnabled) {
+                const response = await requestWalletRecoverOTP();
+                setNeedsOTP(true);
+                setOtpResponse(response);
+            }
+            else if (response.error) {
                 setError(response.error.message || 'There was an error recovering your account');
                 logger.log('Error recovering wallet', response.error);
             }
@@ -15878,7 +16095,7 @@ const RecoverAutomaticWallet = ({ walletAddress, onBack, logoutOnBack, }) => {
                 setRoute(routes.CONNECTED_SUCCESS);
             }
         }
-    }, [walletAddress, setActiveWallet, setRoute]);
+    }, [walletAddress, setActiveWallet, setRoute, isWalletRecoveryOTPEnabled, requestWalletRecoverOTP]);
     const shouldRecoverWallet = useRef(false);
     useEffect(() => {
         if (shouldRecoverWallet.current)
@@ -15886,6 +16103,67 @@ const RecoverAutomaticWallet = ({ walletAddress, onBack, logoutOnBack, }) => {
         shouldRecoverWallet.current = true;
         recoverWallet();
     }, []);
+    const handleCompleteOtp = async (otp) => {
+        setOtpStatus('loading');
+        const response = await setActiveWallet({
+            walletId: embeddedWalletId,
+            recovery: {
+                recoveryMethod: RecoveryMethod.AUTOMATIC,
+                otpCode: otp,
+            },
+            address: walletAddress,
+        });
+        if (response.error) {
+            setOtpStatus('error');
+            setError(response.error.message || 'There was an error verifying the OTP');
+            logger.log('Error verifying OTP for wallet recovery', response.error);
+            setTimeout(() => {
+                setOtpStatus('idle');
+                setError(false);
+            }, 1000);
+        }
+        else {
+            setOtpStatus('success');
+            setTimeout(() => {
+                setRoute(routes.CONNECTED_SUCCESS);
+            }, 1000);
+        }
+    };
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: walletAddress,
+        config: ensFallbackConfig,
+    });
+    const walletDisplay = ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(walletAddress);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    // Handle resend cooldown
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => {
+            setCanSendOtp(true);
+        }, 10000);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    const handleResendClick = useCallback(() => {
+        setOtpStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || otpStatus === 'sending-otp' || otpStatus === 'send-otp';
+    // Memoize button text to avoid recalculation
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (otpStatus === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, otpStatus]);
+    if (needsOTP && isWalletRecoveryOTPEnabled) {
+        return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                        logo: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? jsx(PhoneIcon, {}) : jsx(EmailIcon, {}),
+                    } }), jsxs(ModalBody, { children: [jsxs(Body$1, { children: ["Recovering wallet ", jsx(CopyText, { value: walletAddress, children: walletDisplay }), "Please check ", jsx("b", { children: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone : otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email }), " and enter your code below."] }), jsx(OtpInputStandalone, { length: 9, scale: "80%", onComplete: handleCompleteOtp, isLoading: otpStatus === 'loading', isError: otpStatus === 'error', isSuccess: otpStatus === 'success' }), jsxs(ResultContainer$1, { children: [otpStatus === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), otpStatus === 'error' && jsx(ModalBody, { "$error": true, children: error || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton$1, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText$1, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] })] }));
+    }
     if (error) {
         return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(ModalBody, { style: { textAlign: 'center' }, "$error": true, children: jsx(FitText, { children: error }) }) }));
     }
@@ -18390,6 +18668,10 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
                  })), children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : ckMode, customTheme: ckCustomTheme })] }) }));
 };
 
+const PageLayout = ({ children, width, header }) => {
+    return (jsx(PageContent, { width: width, header: header, onBack: null, children: children }));
+};
+
 /**
  * Hook for OAuth-based authentication operations
  *
@@ -19305,5 +19587,5 @@ const wallets = Object.keys(walletConfigs).reduce((acc, key) => {
     return acc;
 }, {});
 
-export { UIAuthProvider as AuthProvider, Avatar, Chain as ChainIcon, LinkWalletOnSignUpOption, OPENFORT_VERSION, OpenfortButton, OpenfortError, OpenfortReactErrorType as OpenfortErrorType, OpenfortProvider, embeddedWalletId, defaultConfig as getDefaultConfig, defaultConnectors as getDefaultConnectors, use7702Authorization, useAuthCallback, useChainIsSupported, useChains, useConnectWithSiwe, useEmailAuth, useEmailOtpAuth, useGrantPermissions, useGuestAuth, useOAuth, useOpenfortCore as useOpenfort, usePhoneOtpAuth, useRevokePermissions, useSignOut, useUI, useUser, useWalletAssets, useWalletAuth, useWallets, wallets };
+export { UIAuthProvider as AuthProvider, Avatar, Chain as ChainIcon, LinkWalletOnSignUpOption, OPENFORT_VERSION, OpenfortButton, OpenfortError, OpenfortReactErrorType as OpenfortErrorType, OpenfortProvider, PageLayout, embeddedWalletId, defaultConfig as getDefaultConfig, defaultConnectors as getDefaultConnectors, use7702Authorization, useAuthCallback, useChainIsSupported, useChains, useConnectWithSiwe, useEmailAuth, useEmailOtpAuth, useGrantPermissions, useGuestAuth, useOAuth, useOpenfortCore as useOpenfort, usePhoneOtpAuth, useRevokePermissions, useSignOut, useUI, useUser, useWalletAssets, useWalletAuth, useWallets, wallets };
 //# sourceMappingURL=index.es.js.map