@embarkai/ui-kit 0.4.82 → 0.4.83

package/dist/index.js

@@ -7158,13 +7158,13 @@ var init_useAuthStore = __esm({
       step: "signin",
       alert: null,
       email: "",
-      expiresIn: null,
+      emailChallenge: null,
       codeSendError: null,
       passkeyStatus: "idle",
       failedType: "general",
       setStep: (step) => set({ step }),
       setEmail: (email) => set({ email }),
-      setExpiresIn: (expiresIn) => set({ expiresIn }),
+      setEmailChallenge: (emailChallenge) => set({ emailChallenge }),
       setPasskeyStatus: (status) => set({ passkeyStatus: status }),
       setAlert: (alert2) => set({ alert: alert2 }),
       setFailedType: (type) => set({ failedType: type })
@@ -7722,6 +7722,23 @@ var init_input = __esm({
   }
 });
 
+// src/internal/components/AuthMenu/emailChallenge.ts
+var normalizeChallengeEmail, createEmailChallenge, isEmailChallengeActive, shouldDiscardEmailChallengeForError;
+var init_emailChallenge = __esm({
+  "src/internal/components/AuthMenu/emailChallenge.ts"() {
+    normalizeChallengeEmail = (email) => email.trim().toLowerCase();
+    createEmailChallenge = (email, expiresIn, now = Date.now()) => ({
+      email: normalizeChallengeEmail(email),
+      expiresAt: now + Math.max(0, expiresIn) * 1e3
+    });
+    isEmailChallengeActive = (challenge, email, now = Date.now()) => challenge !== null && challenge.email === normalizeChallengeEmail(email) && challenge.expiresAt > now;
+    shouldDiscardEmailChallengeForError = (message) => {
+      const normalizedMessage = message.toLowerCase();
+      return normalizedMessage.includes("expired") || normalizedMessage.includes("429") || normalizedMessage.includes("too many") || normalizedMessage.includes("code_not_found") || normalizedMessage.includes("no verification code");
+    };
+  }
+});
+
 // src/internal/components/AuthMenu/SignInStep/Email.tsx
 import { useMutation as useMutation3 } from "@tanstack/react-query";
 import { ChevronRight, Loader as Loader2, Mail as Mail2 } from "lucide-react";
@@ -7736,7 +7753,7 @@ function Email() {
   const isLoading = useSession((st) => st.isLoading);
   const setIsLoading = useSession((st) => st.setIsLoading);
   const isMobileView = useLayoutStore((st) => st.isMobileView);
-  const { email, alert: alert2, setEmail, setExpiresIn, setStep, setAlert } = useAuthStore();
+  const { email, emailChallenge, alert: alert2, setEmail, setEmailChallenge, setStep, setAlert } = useAuthStore();
   const { mutate: onSendVerificationCode } = useMutation3({
     mutationFn: async (mail) => {
       const isEmailValid = mail.length !== 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail);
@@ -7753,10 +7770,10 @@ function Email() {
         body: JSON.stringify({ email: mail, purpose: "login" })
       });
     },
-    onSuccess: async (response) => {
+    onSuccess: async (response, requestedEmail) => {
       const data = await response.json();
       if (response.ok) {
-        setExpiresIn(data.expiresIn || 300);
+        setEmailChallenge(createEmailChallenge(requestedEmail, data.expiresIn ?? 600));
         setStep("verify");
       } else {
         if (response.status === 429) {
@@ -7788,6 +7805,14 @@ function Email() {
       setIsLoading(false);
     }
   });
+  const continueWithEmail = () => {
+    if (isEmailChallengeActive(emailChallenge, email)) {
+      setAlert(null);
+      setStep("verify");
+      return;
+    }
+    onSendVerificationCode(email);
+  };
   useEffect9(() => {
     if (!focusRef.current || !isMobileView) return;
     focusRef.current?.focus();
@@ -7841,7 +7866,7 @@ function Email() {
               variant: "default",
               size: "large",
               disabled: !email || isLoading,
-              onClick: () => onSendVerificationCode(email),
+              onClick: continueWithEmail,
               children: isLoading ? /* @__PURE__ */ jsx14(Loader2, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx14(ChevronRight, { className: "w-4 h-4" })
             }
           )
@@ -7860,6 +7885,7 @@ var init_Email = __esm({
     init_projectId();
     init_button();
     init_input();
+    init_emailChallenge();
     init_useAuthStore();
   }
 });
@@ -8695,16 +8721,10 @@ var init_VerificationCodeInput = __esm({
     init_useAuthStore();
     getRemainingSeconds = (expiresAt) => Math.max(0, Math.ceil((expiresAt - Date.now()) / 1e3));
     VerificationCodeInput = (props) => {
-      const { onVerifyCode, onResendCode, isLoading, expiresIn } = props;
+      const { onVerifyCode, onResendCode, isLoading, expiresAt } = props;
       const { t } = useT();
       const setAlert = useAuthStore((st) => st.setAlert);
-      const [expiresAt, setExpiresAt] = useState3(() => Date.now() + Math.max(0, expiresIn) * 1e3);
       const [timeLeft, setTimeLeft] = useState3(() => getRemainingSeconds(expiresAt));
-      useEffect10(() => {
-        const nextExpiresAt = Date.now() + Math.max(0, expiresIn) * 1e3;
-        setExpiresAt(nextExpiresAt);
-        setTimeLeft(getRemainingSeconds(nextExpiresAt));
-      }, [expiresIn]);
       useEffect10(() => {
         let intervalId;
         const syncTimeLeft = () => {
@@ -8794,7 +8814,9 @@ var init_VerificationCodeInput = __esm({
           "input",
           {
             name: `verification-code-symbol-${i}`,
-            ref: (el) => inputsRef.current[i] = el,
+            ref: (el) => {
+              inputsRef.current[i] = el;
+            },
             type: "text",
             autoComplete: "off",
             disabled: isLoading,
@@ -8856,11 +8878,11 @@ function VerifyStep(props) {
   const setIsLoading = useSession((st) => st.setIsLoading);
   const {
     email,
-    expiresIn,
+    emailChallenge,
     setFailedType,
     setStep,
     setEmail,
-    setExpiresIn,
+    setEmailChallenge,
     setAlert
   } = useAuthStore();
   const [resendCount, setResendCount] = useState4(0);
@@ -8901,6 +8923,7 @@ function VerifyStep(props) {
       const needsRecovery = loginResponse.hasKeyshare && !loginResponse.isNewUser && !localKeyshare;
       if (!recoveryUserId && !needsRecovery) {
         setEmail("");
+        setEmailChallenge(null);
         setAlert(null);
       }
       await onAuthSuccess?.();
@@ -8912,11 +8935,13 @@ function VerifyStep(props) {
       let errorMessage = "";
       const rawErrorMessage = error.message || "";
       const normalizedErrorMessage = rawErrorMessage.toLowerCase();
+      if (shouldDiscardEmailChallengeForError(rawErrorMessage)) {
+        setEmailChallenge(null);
+      }
       if (normalizedErrorMessage.includes("invalid")) {
         errorMessage = "Invalid verification code. Please try again.";
       } else if (normalizedErrorMessage.includes("expired")) {
         errorMessage = "Verification code expired. Please request a new one.";
-        setExpiresIn(0);
       } else if (normalizedErrorMessage.includes("429") || normalizedErrorMessage.includes("too many")) {
         errorMessage = "Too many attempts. Please try again later.";
       } else {
@@ -8948,7 +8973,7 @@ function VerifyStep(props) {
     onSuccess: async (response) => {
       const data = await response.json();
       if (response.ok) {
-        setExpiresIn(data.expiresIn || 300);
+        setEmailChallenge(createEmailChallenge(email, data.expiresIn ?? 600));
         setResendCount((c) => c + 1);
       }
       if (!response.ok && response.status === 429) {
@@ -9006,7 +9031,7 @@ function VerifyStep(props) {
         onVerifyCode,
         onResendCode,
         isLoading,
-        expiresIn
+        expiresAt: emailChallenge?.expiresAt ?? Date.now()
       },
       resendCount
     )
@@ -9021,6 +9046,7 @@ var init_VerifyStep = __esm({
     init_icons();
     init_projectId();
     init_button();
+    init_emailChallenge();
     init_useAuthStore();
     init_VerificationCodeInput();
   }
@@ -9063,7 +9089,7 @@ var init_AuthMenu = __esm({
       const setTransitionPageHeight = useLayoutDataStore((st) => st.setTransitionPageHeight);
       const pendingWalletLogin = useLayoutDataStore((st) => st.pendingWalletLogin);
       const setPendingWalletLogin = useLayoutDataStore((st) => st.setPendingWalletLogin);
-      const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
+      const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setEmailChallenge, setAlert } = useAuthStore();
       const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn } = useAuthMenuHandlers();
       useEffect11(() => {
         if (!pendingWalletLogin) return;
@@ -9080,6 +9106,7 @@ var init_AuthMenu = __esm({
         return () => {
           setStep("signin");
           setEmail("");
+          setEmailChallenge(null);
           setPasskeyStatus("idle");
           setAlert(null);
         };
@@ -13598,6 +13625,41 @@ var init_passkey2 = __esm({
   }
 });
 
+// src/internal/auth/providers/email.ts
+async function sendEmailLinkCode(email) {
+  const hasValidToken = await ensureValidToken();
+  if (!hasValidToken) throw new Error("No authentication token available");
+  const response = await authenticatedFetch(`${getTssUrl3()}/api/auth/link/email/send-code`, {
+    method: "POST",
+    body: JSON.stringify({ email })
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || `Failed to send email verification code: ${response.statusText}`);
+  }
+  const data = await response.json().catch(() => ({}));
+  return data.expiresIn ?? 600;
+}
+async function verifyEmailLinkCode(email, code) {
+  const hasValidToken = await ensureValidToken();
+  if (!hasValidToken) throw new Error("No authentication token available");
+  const response = await authenticatedFetch(`${getTssUrl3()}/api/auth/link/email/verify-code`, {
+    method: "POST",
+    credentials: "include",
+    body: JSON.stringify({ email, code })
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || `Failed to verify email and link provider: ${response.statusText}`);
+  }
+}
+var init_email = __esm({
+  "src/internal/auth/providers/email.ts"() {
+    init_auth();
+    init_types();
+  }
+});
+
 // src/internal/components/ManageWalletMenu/hooks/useStore.ts
 import { create as create8 } from "zustand";
 var useManageWalletStore;
@@ -13609,7 +13671,7 @@ var init_useStore = __esm({
       emailStep: "input",
       email: "",
       emailCode: "",
-      emailCodeExpiresIn: 0,
+      emailCodeExpiresAt: 0,
       linkIsLoading: false,
       // linkError: null,
       providerType: null,
@@ -13618,7 +13680,7 @@ var init_useStore = __esm({
       setEmailStep: (emailStep) => set({ emailStep }),
       setEmail: (email) => set({ email }),
       setEmailCode: (emailCode) => set({ emailCode }),
-      setEmailCodeExpiresIn: (emailCodeExpiresIn) => set({ emailCodeExpiresIn }),
+      setEmailCodeExpiresAt: (emailCodeExpiresAt) => set({ emailCodeExpiresAt }),
       setLinkIsLoading: (linkIsLoading) => {
         useLayoutStore.setState({ isDialogForced: linkIsLoading });
         set({ linkIsLoading });
@@ -13630,74 +13692,47 @@ var init_useStore = __esm({
   }
 });
 
-// src/internal/components/ManageWalletMenu/EmailForm.tsx
+// src/internal/components/ManageWalletMenu/hooks/useSendVerificationCode.ts
 import { useMutation as useMutation8 } from "@tanstack/react-query";
+function useSendVerificationCode() {
+  const setAlert = useManageWalletStore((st) => st.setAlert);
+  const setLinkIsLoading = useManageWalletStore((st) => st.setLinkIsLoading);
+  const setEmailCodeExpiresAt = useManageWalletStore((st) => st.setEmailCodeExpiresAt);
+  return useMutation8({
+    mutationFn: async (email) => {
+      if (!email) {
+        throw new Error("Email is required");
+      }
+      setAlert(null);
+      setLinkIsLoading(true);
+      return await sendEmailLinkCode(email);
+    },
+    onError: (error) => {
+      console.error("Failed to send verification code", error.message);
+      setAlert({ title: "Error", message: error?.message || "Failed to send verification code" });
+      setLinkIsLoading(false);
+    },
+    onSuccess: (expiresIn) => {
+      setEmailCodeExpiresAt(Date.now() + expiresIn * 1e3);
+      console.log("Verification code sent");
+      setLinkIsLoading(false);
+    }
+  });
+}
+var init_useSendVerificationCode = __esm({
+  "src/internal/components/ManageWalletMenu/hooks/useSendVerificationCode.ts"() {
+    init_email();
+    init_useStore();
+  }
+});
+
+// src/internal/components/ManageWalletMenu/EmailForm.tsx
 import { ChevronRight as ChevronRight2, Loader as Loader8, Mail as Mail4 } from "lucide-react";
 import { jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
 function EmailForm() {
-  const { callbacksRef } = useProviderConfig();
   const { t } = useT();
-  const isLoading = useSession((st) => st.isLoading);
-  const setIsLoading = useSession((st) => st.setIsLoading);
-  const { email, setEmail, setAlert, setEmailCodeExpiresIn, setEmailStep } = useManageWalletStore();
-  const { mutate: onSendVerificationCode } = useMutation8({
-    mutationFn: async () => {
-      if (!email) return;
-      setIsLoading(true);
-      setAlert(null);
-      try {
-        const response = await fetch(addProjectIdToUrl(`${getServiceUrls().tssUrl}/api/auth/email/send-code`), {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          credentials: "include",
-          body: JSON.stringify({
-            email,
-            purpose: "login"
-          })
-        });
-        const data = await response.json();
-        if (response.ok) {
-          setEmailCodeExpiresIn(data?.expiresIn || 300);
-          setEmailStep("verify");
-        } else {
-          if (response.status === 429) {
-            const retryAfter = data.retryAfter || 60;
-            setAlert({
-              title: "Too Many Requests",
-              message: `Code already sent recently. Please wait ${retryAfter} seconds before requesting another.`
-            });
-          } else if (response.status === 400) {
-            setAlert({
-              title: "Invalid Email",
-              message: data.message || "Invalid email address"
-            });
-          } else {
-            setAlert({
-              title: "Error",
-              message: data.message || "Failed to send verification code"
-            });
-          }
-        }
-      } catch (error) {
-        const errorMessage = "Network error. Please check your connection.";
-        setAlert({
-          title: "Network Error",
-          message: errorMessage
-        });
-        try {
-          callbacksRef.current?.onError?.({
-            error: error instanceof Error ? error : new Error(errorMessage),
-            message: errorMessage
-          });
-        } catch {
-        }
-      } finally {
-        setIsLoading(false);
-      }
-    }
-  });
+  const { email, linkIsLoading, setEmail, setEmailStep } = useManageWalletStore();
+  const { mutate: onSendVerificationCode } = useSendVerificationCode();
   return /* @__PURE__ */ jsxs54("div", { className: "w-full flex gap-[10px] items-center", children: [
     /* @__PURE__ */ jsx61(
       Input,
@@ -13718,22 +13753,19 @@ function EmailForm() {
         className: "w-12 h-12 flex-none",
         variant: "default",
         size: "large",
-        disabled: !email || isLoading,
-        onClick: () => onSendVerificationCode(),
-        children: isLoading ? /* @__PURE__ */ jsx61(Loader8, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx61(ChevronRight2, { className: "w-4 h-4" })
+        disabled: !email || linkIsLoading,
+        onClick: () => onSendVerificationCode(email, { onSuccess: () => setEmailStep("verify") }),
+        children: linkIsLoading ? /* @__PURE__ */ jsx61(Loader8, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx61(ChevronRight2, { className: "w-4 h-4" })
       }
     )
   ] });
 }
 var init_EmailForm = __esm({
   "src/internal/components/ManageWalletMenu/EmailForm.tsx"() {
-    init_initial();
-    init_ProviderContext();
-    init_SessionContext();
     init_i18n();
-    init_projectId();
     init_button();
     init_input();
+    init_useSendVerificationCode();
     init_useStore();
   }
 });
@@ -13760,75 +13792,8 @@ var init_useProvidersList = __esm({
   }
 });
 
-// src/internal/auth/providers/email.ts
-async function sendEmailLinkCode(email) {
-  const hasValidToken = await ensureValidToken();
-  if (!hasValidToken) throw new Error("No authentication token available");
-  const response = await authenticatedFetch(`${getTssUrl3()}/api/auth/link/email/send-code`, {
-    method: "POST",
-    body: JSON.stringify({ email })
-  });
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.message || `Failed to send email verification code: ${response.statusText}`);
-  }
-}
-async function verifyEmailLinkCode(email, code) {
-  const hasValidToken = await ensureValidToken();
-  if (!hasValidToken) throw new Error("No authentication token available");
-  const response = await authenticatedFetch(`${getTssUrl3()}/api/auth/link/email/verify-code`, {
-    method: "POST",
-    credentials: "include",
-    body: JSON.stringify({ email, code })
-  });
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.message || `Failed to verify email and link provider: ${response.statusText}`);
-  }
-}
-var init_email = __esm({
-  "src/internal/auth/providers/email.ts"() {
-    init_auth();
-    init_types();
-  }
-});
-
-// src/internal/components/ManageWalletMenu/hooks/useSendVerificationCode.ts
-import { useMutation as useMutation9 } from "@tanstack/react-query";
-function useSendVerificationCode() {
-  const setAlert = useManageWalletStore((st) => st.setAlert);
-  const setLinkIsLoading = useManageWalletStore((st) => st.setLinkIsLoading);
-  const setEmailCodeExpiresIn = useManageWalletStore((st) => st.setEmailCodeExpiresIn);
-  return useMutation9({
-    mutationFn: async (email) => {
-      if (!email) {
-        throw new Error("Email is required");
-      }
-      setAlert(null);
-      setLinkIsLoading(true);
-      await sendEmailLinkCode(email);
-    },
-    onError: (error) => {
-      console.error("Failed to send verification code", error.message);
-      setAlert({ title: "Error", message: error?.message || "Failed to send verification code" });
-      setLinkIsLoading(false);
-    },
-    onSuccess: () => {
-      setEmailCodeExpiresIn(300);
-      console.log("Verification code sent");
-      setLinkIsLoading(false);
-    }
-  });
-}
-var init_useSendVerificationCode = __esm({
-  "src/internal/components/ManageWalletMenu/hooks/useSendVerificationCode.ts"() {
-    init_email();
-    init_useStore();
-  }
-});
-
 // src/internal/components/ManageWalletMenu/hooks/useVerifyCode.ts
-import { useMutation as useMutation10, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
+import { useMutation as useMutation9, useQueryClient as useQueryClient9 } from "@tanstack/react-query";
 function useVerifyCode() {
   const { callbacksRef } = useProviderConfig();
   const qc = useQueryClient9();
@@ -13840,12 +13805,12 @@ function useVerifyCode() {
     setEmail,
     setEmailStep,
     setEmailCode,
-    setEmailCodeExpiresIn,
+    setEmailCodeExpiresAt,
     setProviderType,
     setLinkIsLoading,
     setAlert
   } = useManageWalletStore();
-  return useMutation10({
+  return useMutation9({
     mutationFn: async (codeToVerify) => {
       const code = codeToVerify ?? emailCode;
       if (!code) {
@@ -13874,8 +13839,8 @@ function useVerifyCode() {
     },
     onError: (error) => {
       const message = error?.message || "Failed to verify and link email";
-      if (message.toLowerCase().includes("expired")) {
-        setEmailCodeExpiresIn(0);
+      if (shouldDiscardEmailChallengeForError(message)) {
+        setEmailCodeExpiresAt(0);
       }
       setAlert({ title: "Error", message });
       setIsLoading(false);
@@ -13889,6 +13854,7 @@ var init_useVerifyCode = __esm({
     init_SessionContext();
     init_linkedProfiles();
     init_email();
+    init_emailChallenge();
     init_useProvidersList();
     init_useStore();
   }
@@ -13917,7 +13883,7 @@ function AddProvider() {
     providerType,
     email,
     emailStep,
-    emailCodeExpiresIn,
+    emailCodeExpiresAt,
     setAlert,
     setProviderType,
     setLinkIsLoading
@@ -13944,7 +13910,7 @@ function AddProvider() {
           onVerifyCode,
           onResendCode: () => onResendCode(email),
           isLoading,
-          expiresIn: emailCodeExpiresIn
+          expiresAt: emailCodeExpiresAt
         }
       )
     ] }),
@@ -14525,7 +14491,7 @@ function ManageWalletMenu() {
     setProviderType,
     setEmail,
     setEmailStep,
-    setEmailCodeExpiresIn,
+    setEmailCodeExpiresAt,
     setEmailCode
   } = useManageWalletStore();
   const configuredProviders = getConfiguredProviders(config.current);
@@ -14573,7 +14539,7 @@ function ManageWalletMenu() {
                   case "email":
                     setEmail("");
                     setEmailCode("");
-                    setEmailCodeExpiresIn(0);
+                    setEmailCodeExpiresAt(0);
                     setEmailStep("input");
                     setProviderType(provider);
                     break;
@@ -14636,7 +14602,7 @@ function ManageWalletMenu() {
                     setEmail("");
                     setEmailCode("");
                     setEmailStep("input");
-                    setEmailCodeExpiresIn(0);
+                    setEmailCodeExpiresAt(0);
                   }
                   if (!providerType) useLayoutDataStore.getState().setPage("settings" /* SETTINGS */);
                   setProviderType(null);
@@ -14701,7 +14667,7 @@ var init_ManageWallet = __esm({
 });
 
 // src/internal/components/ManageWalletMenu/UnlinkProviderMenu.tsx
-import { useMutation as useMutation11, useQueryClient as useQueryClient13 } from "@tanstack/react-query";
+import { useMutation as useMutation10, useQueryClient as useQueryClient13 } from "@tanstack/react-query";
 import { Key as Key4, Loader as Loader10 } from "lucide-react";
 import { useState as useState12 } from "react";
 import { useDisconnect } from "wagmi";
@@ -14716,7 +14682,7 @@ function UnlinkProviderMenu() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const { confirmUnlink, setConfirmUnlink, setAlert } = useManageWalletStore();
   const [confirmInput, setConfirmInput] = useState12("");
-  const { mutate: handleUnlinkProvider, isPending: isProviderUnlinking } = useMutation11({
+  const { mutate: handleUnlinkProvider, isPending: isProviderUnlinking } = useMutation10({
     mutationFn: async () => {
       if (!confirmUnlink) {
         throw new Error("No provider to unlink");
@@ -14844,7 +14810,7 @@ var init_useConnectExternalWalletMenuParams = __esm({
 });
 
 // src/internal/components/ConnectExternalWalletMenu/ConnectExternalWalletMenu.tsx
-import { useMutation as useMutation12, useQuery as useQuery8, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
+import { useMutation as useMutation11, useQuery as useQuery8, useQueryClient as useQueryClient14 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft7, Loader as Loader11, Wallet2Icon as Wallet2Icon2 } from "lucide-react";
 import { useCallback as useCallback16, useMemo as useMemo8 } from "react";
 import { useConnect, useConnection, useConnectors, useDisconnect as useDisconnect2, useSignMessage } from "wagmi";
@@ -14875,7 +14841,7 @@ function ConnectExternalWalletMenu() {
     queryKey: [PROVIDERS_QUERY_KEY, embarkAiAddress],
     queryFn: async () => getLinkedProviders()
   });
-  const { mutateAsync: onLinkingComplete } = useMutation12({
+  const { mutateAsync: onLinkingComplete } = useMutation11({
     mutationFn: async (success) => {
       useManageWalletStore.getState().setProviderType(null);
       useLayoutDataStore.getState().setPage(walletMenuOpenedFrom || "manage-wallet" /* MANAGE_WALLET */);
@@ -14886,7 +14852,7 @@ function ConnectExternalWalletMenu() {
       callbacksRef.current?.onAccountUpdate?.({ providers: providers2 });
     }
   });
-  const { mutateAsync: loginOrLinkOrConnectWallet, isPending: isLoginOrLinkOrConnectWallet } = useMutation12({
+  const { mutateAsync: loginOrLinkOrConnectWallet, isPending: isLoginOrLinkOrConnectWallet } = useMutation11({
     mutationFn: async (payload) => {
       const { walletData, connectFlowType } = payload;
       const { walletMenuOpenedFrom: walletMenuOpenedFrom2, setPage, setPendingWalletLogin } = useLayoutDataStore.getState();
@@ -15243,7 +15209,7 @@ var init_ConnectExternalWalletMenu2 = __esm({
 });
 
 // src/internal/clients/devices.ts
-import { useMutation as useMutation13, useQuery as useQuery9, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
+import { useMutation as useMutation12, useQuery as useQuery9, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
 async function getDevices() {
   const response = await tssClient.get("/api/auth/devices", true);
   if (!response.success || !response.data) {
@@ -15276,7 +15242,7 @@ function useDevices() {
 }
 function useLinkDevice() {
   const qc = useQueryClient15();
-  return useMutation13({
+  return useMutation12({
     mutationFn: (code) => linkDevice(code),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: [DEVICES_QUERY_KEY] });
@@ -15285,7 +15251,7 @@ function useLinkDevice() {
 }
 function useUnlinkDevice() {
   const qc = useQueryClient15();
-  return useMutation13({
+  return useMutation12({
     mutationFn: (deviceId) => unlinkDevice(deviceId),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: [DEVICES_QUERY_KEY] });
@@ -16838,7 +16804,7 @@ var init_cloudStorage = __esm({
 });
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useCreateBackup.ts
-import { useMutation as useMutation14, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
+import { useMutation as useMutation13, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
 import { useCallback as useCallback21, useEffect as useEffect25 } from "react";
 function useCreateBackup() {
   const qc = useQueryClient16();
@@ -16859,7 +16825,7 @@ function useCreateBackup() {
   const onBackupSuccess = useCallback21(() => {
     console.log("[EMBARKAI BACKUP] Backup created successfully");
   }, [hasServerVault]);
-  const { mutate: createPasswordBackup, isPending: isPasswordBackupCreating } = useMutation14({
+  const { mutate: createPasswordBackup, isPending: isPasswordBackupCreating } = useMutation13({
     mutationFn: async () => {
       const iframeManager = getIframeManager();
       if (!iframeManager) {
@@ -16904,7 +16870,7 @@ function useCreateBackup() {
       qc.invalidateQueries({ queryKey: [CHECK_BACKUP_QUERY_KEY, address] });
     }
   });
-  const { mutate: createLocalBackup, isPending: isLocalBackupCreating } = useMutation14({
+  const { mutate: createLocalBackup, isPending: isLocalBackupCreating } = useMutation13({
     mutationFn: async () => {
       const iframeManager = getIframeManager();
       if (!usePasskey && !restorePassword) {
@@ -16938,7 +16904,7 @@ function useCreateBackup() {
       qc.invalidateQueries({ queryKey: [CHECK_BACKUP_QUERY_KEY, address] });
     }
   });
-  const { mutate: createPasskey, isPending: isPasskeyCreating } = useMutation14({
+  const { mutate: createPasskey, isPending: isPasskeyCreating } = useMutation13({
     mutationFn: async () => {
       useRestoreStore.getState().setIsCreatingPasskey(true);
       const { linkPasskeyWithWebAuthn: linkPasskeyWithWebAuthn2 } = await Promise.resolve().then(() => (init_passkey2(), passkey_exports2));
@@ -16965,7 +16931,7 @@ function useCreateBackup() {
       }
     }
   });
-  const { mutate: createCloudBackup, isPending: isCloudBackupCreating } = useMutation14({
+  const { mutate: createCloudBackup, isPending: isCloudBackupCreating } = useMutation13({
     mutationFn: async () => {
       const iframeManager = getIframeManager();
       const encryptedData = await iframeManager.encryptBackupData(passportUserId);
@@ -17028,7 +16994,7 @@ var init_useCreateBackup = __esm({
 });
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useRestoreAccount.ts
-import { useMutation as useMutation15 } from "@tanstack/react-query";
+import { useMutation as useMutation14 } from "@tanstack/react-query";
 function useRestoreAccount() {
   const recoveryUserId = useSession((st) => st.recoveryUserId);
   const {
@@ -17042,7 +17008,7 @@ function useRestoreAccount() {
     setRestoreFile
   } = useRestoreStore();
   const { onRestoreSuccess } = useOnRestoreSuccess();
-  const { mutate: restoreFromServer2, isPending: isRestoringFromServer } = useMutation15({
+  const { mutate: restoreFromServer2, isPending: isRestoringFromServer } = useMutation14({
     mutationFn: async () => {
       setError(null);
       setSuccess(null);
@@ -17081,7 +17047,7 @@ function useRestoreAccount() {
       setError(errorMsg);
     }
   });
-  const { mutate: restoreFromFile, isPending: isRestoringFromFile } = useMutation15({
+  const { mutate: restoreFromFile, isPending: isRestoringFromFile } = useMutation14({
     mutationFn: async () => {
       if (!restoreFile) {
         throw new Error("Please select a backup file");
@@ -17115,7 +17081,7 @@ function useRestoreAccount() {
       setError(errorMsg);
     }
   });
-  const { mutate: restoreFromCloud, isPending: isRestoringFromCloud } = useMutation15({
+  const { mutate: restoreFromCloud, isPending: isRestoringFromCloud } = useMutation14({
     mutationFn: async () => {
       alert("Cloud restore not implemented yet");
       return null;
@@ -18208,7 +18174,7 @@ var init_methods = __esm({
 });
 
 // src/internal/components/KeyshareRestoreMenu/KeyshareRestoreMenu.tsx
-import { useMutation as useMutation16, useQuery as useQuery11, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
+import { useMutation as useMutation15, useQuery as useQuery11, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle2, CheckCircle2, CloudDownload as CloudDownload2, Loader as Loader14, UserCircle as UserCircle2 } from "lucide-react";
 import { useEffect as useEffect30 } from "react";
 import { useDisconnect as useDisconnect4 } from "wagmi";
@@ -18289,7 +18255,7 @@ var init_KeyshareRestoreMenu = __esm({
       useEffect30(() => {
         if (!!hasServerBackup) useRestoreStore.getState().setMethod("server");
       }, [hasServerBackup]);
-      const { mutate: disconnect, isPending: isDisconnecting } = useMutation16({
+      const { mutate: disconnect, isPending: isDisconnecting } = useMutation15({
         mutationFn: async () => {
           const { setStatus, setIsLoading } = useSession.getState();
           const { setError, setMethod } = useRestoreStore.getState();
@@ -19225,7 +19191,7 @@ var init_useNicknameStore = __esm({
 });
 
 // src/internal/components/NicknameMenu/useNicknameAvailability.ts
-import { useMutation as useMutation17 } from "@tanstack/react-query";
+import { useMutation as useMutation16 } from "@tanstack/react-query";
 import { debounce as debounce4 } from "lodash-es";
 import { useCallback as useCallback23, useEffect as useEffect35 } from "react";
 function useNicknameAvailability(currentNickname) {
@@ -19235,7 +19201,7 @@ function useNicknameAvailability(currentNickname) {
     if (!currentNickname) return;
     useNicknameStore.getState().setNicknameValue(currentNickname);
   }, [currentNickname]);
-  const { mutate: checkAvailability, isPending: isCheckingAvailability } = useMutation17({
+  const { mutate: checkAvailability, isPending: isCheckingAvailability } = useMutation16({
     mutationFn: async (newNickname) => {
       useNicknameStore.getState().setError(null);
       useNicknameStore.getState().setAvailability(null);
@@ -19280,7 +19246,7 @@ var init_useNicknameAvailability = __esm({
 });
 
 // src/internal/components/NicknameMenu/NicknameEditForm.tsx
-import { useMutation as useMutation18, useQueryClient as useQueryClient19 } from "@tanstack/react-query";
+import { useMutation as useMutation17, useQueryClient as useQueryClient19 } from "@tanstack/react-query";
 import { AtSignIcon, CopyIcon, LoaderIcon as LoaderIcon10, SaveIcon } from "lucide-react";
 import { useCallback as useCallback24, useState as useState20 } from "react";
 import { Fragment as Fragment30, jsx as jsx87, jsxs as jsxs80 } from "react/jsx-runtime";
@@ -19296,7 +19262,7 @@ function NicknameEditForm(props) {
   const nicknameAvailability = useNicknameStore((st) => st.availability);
   const { isCheckingAvailability } = useNicknameAvailability(nicknameInfo ? nicknameInfo.handle : "");
   const [isNicknameCopied, setIsNicknameCopied] = useState20(false);
-  const { mutate: changeNickname2, isPending: isNicknameChanging } = useMutation18({
+  const { mutate: changeNickname2, isPending: isNicknameChanging } = useMutation17({
     mutationFn: (handle) => changeNickname(handle),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: [QUERY_KEYS.nicknameInfo] });
@@ -21051,7 +21017,7 @@ var init_ConnectedApps = __esm({
 });
 
 // src/internal/components/SecurityMenu/ConnectedApps/UntrustApplication.tsx
-import { useMutation as useMutation19, useQueryClient as useQueryClient22 } from "@tanstack/react-query";
+import { useMutation as useMutation18, useQueryClient as useQueryClient22 } from "@tanstack/react-query";
 import { AppWindowMac as AppWindowMac2, Loader as Loader18 } from "lucide-react";
 import { jsx as jsx94, jsxs as jsxs87 } from "react/jsx-runtime";
 function UntrustApplication() {
@@ -21059,7 +21025,7 @@ function UntrustApplication() {
   const qc = useQueryClient22();
   const userId = useSession((st) => st?.session?.mpcUserId);
   const appToUntrust = useSecurityStore((st) => st.appToUntrust);
-  const { mutate: handleUntrustApp, isPending: isUntrustingApp } = useMutation19({
+  const { mutate: handleUntrustApp, isPending: isUntrustingApp } = useMutation18({
     mutationFn: async () => {
       if (!userId || !appToUntrust) return;
       const iframeManager = getIframeManager();
@@ -22164,7 +22130,7 @@ var init_useOperationHashesStore = __esm({
 });
 
 // src/internal/components/SendMenu/hyperbridge/hooks/useBridge.ts
-import { useMutation as useMutation20, useQueryClient as useQueryClient23 } from "@tanstack/react-query";
+import { useMutation as useMutation19, useQueryClient as useQueryClient23 } from "@tanstack/react-query";
 import { useCallback as useCallback27 } from "react";
 import { useSwitchChain, useWalletClient } from "wagmi";
 function useBridge() {
@@ -22186,7 +22152,7 @@ function useBridge() {
     setOriginChain(destinationChain);
     setDestinationChain(originChain);
   }, []);
-  const { mutate: estimateQuote } = useMutation20({
+  const { mutate: estimateQuote } = useMutation19({
     mutationFn: async (amountToBridge) => {
       useFlowSelectorStore.getState().setError(null);
       useFlowSelectorStore.getState().setIsUiLocked(true);
@@ -22253,7 +22219,7 @@ function useBridge() {
       })
     );
   }, []);
-  const { mutate: bridgeAsset, isPending: isAssetBridging } = useMutation20({
+  const { mutate: bridgeAsset, isPending: isAssetBridging } = useMutation19({
     mutationFn: async () => {
       const directWalletAddress = useExternalWalletStore.getState().externalAddress;
       const directWalletChainId = useExternalWalletStore.getState().externalChainId;
@@ -24734,7 +24700,7 @@ var init_InputSendStep = __esm({
 });
 
 // src/internal/components/SendMenu/send/sendSteps/ConfirmSendStep.tsx
-import { useMutation as useMutation21 } from "@tanstack/react-query";
+import { useMutation as useMutation20 } from "@tanstack/react-query";
 import { AlertTriangle as AlertTriangle3, AtSign as AtSign3, Loader as Loader21, Shield, ShieldAlert as ShieldAlert2, ShieldCheck as ShieldCheck3 } from "lucide-react";
 import { Fragment as Fragment41, jsx as jsx114, jsxs as jsxs104 } from "react/jsx-runtime";
 function ConfirmSendStep(props) {
@@ -24748,7 +24714,7 @@ function ConfirmSendStep(props) {
   const isNft = isNftAsset3(selectedAsset);
   const isSecurity = isSecurityToken2(selectedAsset);
   const effectiveAddress = isNicknameInput ? resolvedAddress : recipient;
-  const { mutate: handleConfirm, isPending: isTransactionPending } = useMutation21({
+  const { mutate: handleConfirm, isPending: isTransactionPending } = useMutation20({
     mutationFn: async () => {
       if (!effectiveAddress || !selectedAsset) return;
       setTxStep("pending");
@@ -26777,7 +26743,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.82",
+      version: "0.4.83",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -26877,7 +26843,7 @@ var init_package = __esm({
 });
 
 // src/internal/components/Footer/Footer.tsx
-import { useMutation as useMutation22, useQueryClient as useQueryClient27 } from "@tanstack/react-query";
+import { useMutation as useMutation21, useQueryClient as useQueryClient27 } from "@tanstack/react-query";
 import { Loader as Loader29, LogOut } from "lucide-react";
 import { useDisconnect as useDisconnect5 } from "wagmi";
 import { jsx as jsx122, jsxs as jsxs111 } from "react/jsx-runtime";
@@ -26899,7 +26865,7 @@ function Footer() {
       }
     }
   });
-  const { mutate: disconnect, isPending: isDisconnecting } = useMutation22({
+  const { mutate: disconnect, isPending: isDisconnecting } = useMutation21({
     mutationFn: async (disconnectAddress) => {
       if (!disconnectAddress) throw new Error("No address to disconnect");
       const { setError, setStatus, setIsLoading } = useSession.getState();
@@ -31815,6 +31781,7 @@ init_tokens();
 init_wallets();
 
 // src/index.ts
+init_Expandable2();
 init_i18n();
 
 // src/internal/exportedQueryKeys.ts
@@ -31841,6 +31808,7 @@ export {
   Address,
   ConnectWalletButton,
   ErrorCodes,
+  Expandable,
   Hash,
   KeyshareBackupMenu as KeyshareBackup,
   LOCAL_STORAGE_I18N_KEY,