@lumiapassport/ui-kit 1.16.6 → 1.16.8

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.16.6</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.16.8</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -4411,7 +4411,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.16.6";
+var IFRAME_VERSION = "1.16.8";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -3536,10 +3536,38 @@ var init_iframe_manager = __esm({
           if (projectId) {
             verifyUrl.searchParams.set("projectId", projectId);
           }
-          const response = await fetch(verifyUrl.toString(), {
+          const { jwtTokenManager: jwtTokenManager4, ensureValidToken: ensureValidToken2 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
+          const hasValidToken = await ensureValidToken2();
+          const headers = {
+            "Content-Type": "application/json"
+          };
+          if (hasValidToken) {
+            const accessToken = jwtTokenManager4.getAccessToken();
+            if (accessToken) {
+              headers["Authorization"] = `Bearer ${accessToken}`;
+            }
+          }
+          let response = await fetch(verifyUrl.toString(), {
             method: "GET",
+            headers,
             credentials: "include"
           });
+          if (response.status === 401) {
+            this.log("[IframeManager] X auth verify got 401, attempting token refresh...");
+            const refreshSuccess = await jwtTokenManager4.refreshAccessToken();
+            if (refreshSuccess) {
+              const newAccessToken = jwtTokenManager4.getAccessToken();
+              if (newAccessToken) {
+                headers["Authorization"] = `Bearer ${newAccessToken}`;
+                this.log("[IframeManager] Token refreshed, retrying verify...");
+                response = await fetch(verifyUrl.toString(), {
+                  method: "GET",
+                  headers,
+                  credentials: "include"
+                });
+              }
+            }
+          }
           if (!response.ok) {
             this.log("[IframeManager] X auth fallback verify returned status:", response.status);
             this.recordProviderSession("x", null);
@@ -3832,24 +3860,24 @@ var init_useLayoutDataStore = __esm({
   "src/internal/hooks/useLayoutDataStore.ts"() {
     import_zustand = require("zustand");
     init_constants();
-    PageKey = /* @__PURE__ */ ((PageKey3) => {
-      PageKey3["AUTH"] = "auth";
-      PageKey3["TERMS_OF_SERVICE"] = "terms-of-service";
-      PageKey3["MAIN_MENU"] = "main-menu";
-      PageKey3["SETTINGS"] = "settings";
-      PageKey3["SEND"] = "send";
-      PageKey3["RECEIVE"] = "receive";
-      PageKey3["BUY"] = "buy";
-      PageKey3["KYC"] = "kyc";
-      PageKey3["TRANSACTIONS"] = "transactions";
-      PageKey3["ASSETS"] = "assets";
-      PageKey3["MANAGE_WALLET"] = "manage-wallet";
-      PageKey3["UNLINK_PROVIDER"] = "unlink-provider";
-      PageKey3["SECURITY"] = "security";
-      PageKey3["KEYSARE_BACKUP"] = "keysare-backup";
-      PageKey3["KEYSHARE_RESTORE"] = "keyshare-restore";
-      PageKey3["NICKNAME_SETTINGS"] = "nickname-settings";
-      return PageKey3;
+    PageKey = /* @__PURE__ */ ((PageKey4) => {
+      PageKey4["AUTH"] = "auth";
+      PageKey4["TERMS_OF_SERVICE"] = "terms-of-service";
+      PageKey4["MAIN_MENU"] = "main-menu";
+      PageKey4["SETTINGS"] = "settings";
+      PageKey4["SEND"] = "send";
+      PageKey4["RECEIVE"] = "receive";
+      PageKey4["BUY"] = "buy";
+      PageKey4["KYC"] = "kyc";
+      PageKey4["TRANSACTIONS"] = "transactions";
+      PageKey4["ASSETS"] = "assets";
+      PageKey4["MANAGE_WALLET"] = "manage-wallet";
+      PageKey4["UNLINK_PROVIDER"] = "unlink-provider";
+      PageKey4["SECURITY"] = "security";
+      PageKey4["KEYSARE_BACKUP"] = "keysare-backup";
+      PageKey4["KEYSHARE_RESTORE"] = "keyshare-restore";
+      PageKey4["NICKNAME_SETTINGS"] = "nickname-settings";
+      return PageKey4;
     })(PageKey || {});
     useLayoutDataStore = (0, import_zustand.create)((set) => ({
       page: null,
@@ -5799,7 +5827,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@lumiapassport/ui-kit",
-      version: "1.16.6",
+      version: "1.16.8",
       description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -6474,13 +6502,12 @@ var init_useAuthStore = __esm({
 // src/internal/components/AuthMenu/AuthFailedStep.tsx
 function AuthFailedStep() {
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const { alert: alert2, failedType, setStep, setFailedType, setAlert } = useAuthStore();
+  const { failedType, setStep, setFailedType, setAlert } = useAuthStore();
   const isCritical = failedType === "critical" || failedType === "config";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-full p-[var(--l-pass-pd)]", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col text-center gap-[var(--l-pass-gap)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Highlight, { type: isCritical ? "error" : "warning", className: "flex flex-col gap-[var(--l-pass-gap)]", children: [
       isCritical ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.AlertTriangle, { className: "w-4 h-4 text-[var(--l-pass-error)]" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Info, { className: "w-4 h-4 text-[var(--l-pass-warning)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-center block flex-1 text-lg font-semibold", children: failedType === "config" ? "Configuration Error" : failedType === "critical" ? "Critical Error" : alert2.title || "Failed" }),
-      alert2?.message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-center block", children: alert2.message })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-center block flex-1 text-lg font-semibold", children: failedType === "config" ? "Configuration Error" : failedType === "critical" ? "Critical Error" : "Failed" })
     ] }),
     failedType === "config" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "p-2 rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-info)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm font-medium text-[var(--l-pass-info)] mb-2", children: "To fix this issue:" }),
@@ -6513,14 +6540,13 @@ function AuthFailedStep() {
         children: "Back to Sign In"
       }
     )
-  ] }) });
+  ] });
 }
 var import_lucide_react9, import_jsx_runtime17;
 var init_AuthFailedStep = __esm({
   "src/internal/components/AuthMenu/AuthFailedStep.tsx"() {
     import_lucide_react9 = require("lucide-react");
     init_LumiaPassportSessionContext();
-    init_Expandable2();
     init_button();
     init_highlight();
     init_useAuthStore();
@@ -6531,12 +6557,12 @@ var init_AuthFailedStep = __esm({
 // src/internal/components/AuthMenu/LoadingStep.tsx
 function LoadingStep() {
   const passportStatus = useLumiaPassportSession((st) => st.status);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-full p-[var(--l-pass-pd)] flex flex-col items-center gap-[var(--l-pass-gap)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full items-center gap-[var(--l-pass-gap)] justify-center px-4 py-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.Loader, { className: "w-6 h-6 animate-spin" }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "font-bold text-xl leading-6", children: "Account" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs text-[var(--l-pass-fg-muted)] leading-4 block pb-2", children: (passportStatus !== "idle" ? passportStatus : "Securing...").toUpperCase() })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "w-full text-center text-xs text-[var(--l-pass-fg-muted)] leading-4 block pb-2", children: (passportStatus !== "idle" ? passportStatus : "Securing...").toUpperCase() })
   ] });
 }
 var import_lucide_react10, import_jsx_runtime18;
@@ -6743,46 +6769,42 @@ function PassKeyStep(props) {
       setIsLoading(false);
     }
   }, [onAuthSuccess, setPage, callbacks]);
-  return (
-    /* --------------------------------------------------------------------------------------------------------------- */
-    /* -------- EXPANDABLE is designed to adjust its height automatically whenever ANY 1ST LEVEL CHILD changes! ------ */
-    /* In order to ensure smooth expand animation consistency do not use 2nd (or 3rd etc) nested conditional rendering */
-    /* elements, cause it might outcome Expandable not reacting to deeply nested elements' height changes ----------   */
-    /* --------------------------------------------------------------------------------------------------------------- */
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Key, { className: "w-6 h-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-bold text-xl leading-6", children: "Passkey" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          Button,
-          {
-            style: { opacity: 0.5, transform: "translate(-4px, -4px)" },
-            title: "Back to SignIn",
-            variant: "ghost",
-            size: "icon",
-            className: "absolute left-0 top-0 w-5 h-5",
-            onClick: () => setStep("signin"),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ArrowLeft, { className: "h-4 w-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Back to SignIn" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { variant: "default", size: "large", className: "w-full", onClick: onPasskeyAuth, disabled: isLoading, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Key, { className: "w-4 h-4" }),
-        "Sign in with existing Passkey"
-      ] }),
-      config.passkey.showCreateButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "block w-full text-center text-sm text-[var(--l-pass-fg-muted)]", children: "Don't have a passkey?" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { variant: "outline", size: "large", className: "w-full", onClick: onPasskeyRegister, disabled: isLoading, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PasskeyAddIcon, { className: "w-4 h-4" }),
-          "Create Passkey"
-        ] })
-      ] }),
-      passkeyStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "w-full p-[var(--l-pass-pd)] rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-success)]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "w-full block text-sm text-[var(--l-pass-success)] break-words whitespace-pre-wrap text-center", children: passkeyStatus }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Key, { className: "w-6 h-6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "font-bold text-xl leading-6", children: "Passkey" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        Button,
+        {
+          style: { opacity: 0.5, transform: "translate(-4px, -4px)" },
+          title: "Back to SignIn",
+          variant: "ghost",
+          size: "icon",
+          className: "absolute left-0 top-0 w-5 h-5",
+          onClick: () => setStep("signin"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.ArrowLeft, { className: "h-4 w-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Back to SignIn" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { variant: "default", size: "large", className: "w-full", onClick: onPasskeyAuth, disabled: isLoading, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Key, { className: "w-4 h-4" }),
+      "Sign in with existing Passkey"
+    ] }),
+    !!config.passkey?.showCreateButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "block w-full text-center text-sm text-[var(--l-pass-fg-muted)]", children: "Don't have a passkey?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Button, { variant: "outline", size: "large", className: "w-full", onClick: onPasskeyRegister, disabled: isLoading, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PasskeyAddIcon, { className: "w-4 h-4" }),
+        "Create Passkey"
+      ] })
+    ] }),
+    passkeyStatus !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Highlight, { className: "flex gap-[var(--l-pass-gap)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react11.Key, { className: "w-4 h-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "w-full block text-sm break-words whitespace-pre-wrap text-center", children: passkeyStatus })
     ] })
-  );
+  ] });
 }
 var import_lucide_react11, import_react12, import_jsx_runtime20;
 var init_PassKeyStep = __esm({
@@ -6794,8 +6816,8 @@ var init_PassKeyStep = __esm({
     init_PasskeyAddIcon();
     init_auth();
     init_useLayoutDataStore();
-    init_Expandable2();
     init_button();
+    init_highlight();
     init_useAuthStore();
     import_jsx_runtime20 = require("react/jsx-runtime");
   }
@@ -7157,7 +7179,7 @@ function Social(props) {
             return;
           }
           console.log("[AuthModal] onAuthSuccess completed successfully");
-          onAuthSuccess?.();
+          await onAuthSuccess?.();
           setStep("signin");
           setEmail("");
           setAlert(null);
@@ -7480,14 +7502,13 @@ function SignInStep(props) {
   const { pendingLoginResponseRef, onAuthSuccess } = props;
   const config = useLumiaPassportConfig().config;
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const alert2 = useAuthStore((st) => st.alert);
   const enabledSigninMethods = getSignInEnabledMethods(config);
   const signInRenderComponents = {
     email: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Email, {}),
     social: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Social, { pendingLoginResponseRef, onAuthSuccess }),
     wallet: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wallet, {})
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full p-[var(--l-pass-pd)]", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.UserCircle, { className: "w-6 h-6" }),
       /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-bold text-xl leading-6", children: "Sign In" })
@@ -7512,15 +7533,8 @@ function SignInStep(props) {
           children: "Terms of Service"
         }
       )
-    ] }),
-    alert2 && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react13.AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block font-bold leading-5", children: alert2.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "block whitespace-pre-line", children: alert2.message || "Unknown error" })
-      ] })
     ] })
-  ] }) });
+  ] });
 }
 var import_lucide_react13, import_react16, import_jsx_runtime25;
 var init_SignInStep = __esm({
@@ -7529,10 +7543,7 @@ var init_SignInStep = __esm({
     import_lucide_react13 = require("lucide-react");
     import_react16 = require("react");
     init_useLayoutDataStore();
-    init_Expandable2();
     init_button();
-    init_highlight();
-    init_useAuthStore();
     init_Email();
     init_Social();
     init_utils3();
@@ -7761,7 +7772,6 @@ var init_VerificationCodeInput = __esm({
   "src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx"() {
     import_react18 = require("react");
     init_utils();
-    init_Expandable2();
     init_button();
     init_useAuthStore();
     import_jsx_runtime27 = require("react/jsx-runtime");
@@ -7837,7 +7847,7 @@ var init_VerificationCodeInput = __esm({
       };
       const mm = Math.floor(timeLeft / 60).toString();
       const ss = (timeLeft % 60).toString().padStart(2, "0");
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Expandable, { isExpanded: true, contentClassName: "flex flex-col items-center gap-2 text-center", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-center gap-2", children: digits.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
@@ -7866,13 +7876,13 @@ var init_VerificationCodeInput = __esm({
           },
           i
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-xs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "w-full text-center block text-xs", children: [
           "Code expires in ",
           mm,
           ":",
           ss
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "w-full flex items-center justify-center gap-[var(--l-pass-gap)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-[var(--l-pass-fg-muted)]", children: "Didn't receive code?" }),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Button,
@@ -7905,7 +7915,6 @@ function VerifyStep(props) {
   const {
     email,
     expiresIn,
-    alert: alert2,
     setFailedType,
     setStep,
     setEmail,
@@ -8018,7 +8027,7 @@ function VerifyStep(props) {
     }
   });
   const isLoading = isSessionLoading || isCodeVerifying || isCodeResending;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full p-[var(--l-pass-pd)]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OtpIcon, { className: "w-6 h-6" }),
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-bold text-xl leading-6", children: "Verification code" }),
@@ -8052,15 +8061,8 @@ function VerifyStep(props) {
         isLoading,
         expiresIn
       }
-    ),
-    alert2 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "block font-bold leading-5", children: alert2.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "block whitespace-pre-line", children: alert2.message || "Unknown error" })
-      ] })
-    ] })
-  ] }) });
+    )
+  ] });
 }
 var import_react_query9, import_lucide_react14, import_jsx_runtime28;
 var init_VerifyStep = __esm({
@@ -8072,9 +8074,7 @@ var init_VerifyStep = __esm({
     import_lucide_react14 = require("lucide-react");
     init_OtpIcon();
     init_projectId();
-    init_Expandable2();
     init_button();
-    init_highlight();
     init_useAuthStore();
     init_VerificationCodeInput();
     import_jsx_runtime28 = require("react/jsx-runtime");
@@ -8089,15 +8089,17 @@ var init_VerifyStep2 = __esm({
 });
 
 // src/internal/components/AuthMenu/AuthMenu.tsx
-var import_framer_motion, import_lucide_react15, import_react19, import_jsx_runtime29, AuthMenu;
+var import_lucide_react15, import_react19, import_jsx_runtime29, AuthMenu;
 var init_AuthMenu = __esm({
   "src/internal/components/AuthMenu/AuthMenu.tsx"() {
     init_LumiaPassportSessionContext();
-    import_framer_motion = require("framer-motion");
     import_lucide_react15 = require("lucide-react");
     import_react19 = require("react");
     init_constants();
     init_useLayoutDataStore();
+    init_useLayoutStore();
+    init_Expandable2();
+    init_highlight();
     init_AuthFailedStep();
     init_LoadingStep();
     init_PassKeyStep();
@@ -8108,9 +8110,9 @@ var init_AuthMenu = __esm({
     import_jsx_runtime29 = require("react/jsx-runtime");
     AuthMenu = () => {
       const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
-      const mainPageHeight = useLayoutDataStore((st) => st.mainPageHeight);
+      const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
       const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-      const { step, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
+      const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
       const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn } = useAuthMenuHandlers();
       (0, import_react19.useEffect)(() => {
         setMainPageHeight(DEFAULT_AUTH_MENU_HEIGHT);
@@ -8144,18 +8146,26 @@ var init_AuthMenu = __esm({
         }),
         [onAuthSuccess, goBackToSignIn]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_framer_motion.motion.div,
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
         {
-          initial: { opacity: 0, height: mainPageHeight },
-          animate: { opacity: 1, height: "auto" },
-          exit: { opacity: 0, height: mainPageHeight },
-          style: { overflow: "hidden" },
-          transition: Y_ANIMATION_SETUP,
-          children: stepContent[step]
-        },
-        step
-      ) }) });
+          style: {
+            "--l-pass-scrollbar-mah": `${maxScrollHeight}px`,
+            "--l-pass-list-scrollbar-pd-r": "var(--l-pass-pd)"
+          },
+          className: "list-scrollbar-y w-full p-[var(--l-pass-pd)]",
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
+            stepContent[step],
+            alert2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block font-bold leading-5", children: alert2.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block whitespace-pre-line", children: alert2.message || "Unknown error" })
+              ] })
+            ] })
+          ] })
+        }
+      );
     };
   }
 });
@@ -9148,7 +9158,7 @@ function useOnRestoreSuccess() {
         setSession(sess);
         setAddress(addr);
         setStatus("ready");
-        setPage("main-menu" /* MAIN_MENU */);
+        setPage(null);
         setTimeout(() => {
           setIsDialogForced(false);
         }, 375);
@@ -9757,7 +9767,7 @@ function PasswordPasskey(props) {
       mode === "backup" && onCreatePasskey && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
         Button,
         {
-          size: "medium",
+          size: "large",
           variant: "outline",
           onClick: onCreatePasskey,
           disabled: isLoading || disabled,
@@ -11136,8 +11146,8 @@ function EmailNotConnectedWarning() {
     config: { current: config }
   } = useLumiaPassportConfig();
   const isShown = config.warnings?.emailNotConnectedWarning && !hasEmail;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_framer_motion2.AnimatePresence, { mode: "wait", initial: false, children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_framer_motion2.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", initial: false, children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_framer_motion.motion.div,
     {
       initial: { opacity: 0, height: 0 },
       animate: { opacity: 1, height: "auto" },
@@ -11153,11 +11163,11 @@ function EmailNotConnectedWarning() {
     }
   ) : null });
 }
-var import_framer_motion2, import_lucide_react30, import_jsx_runtime50;
+var import_framer_motion, import_lucide_react30, import_jsx_runtime50;
 var init_EmailNotConnectedWarning = __esm({
   "src/internal/components/ManageWalletMenu/EmailNotConnectedWarning.tsx"() {
     init_LumiaPassportContext();
-    import_framer_motion2 = require("framer-motion");
+    import_framer_motion = require("framer-motion");
     import_lucide_react30 = require("lucide-react");
     init_auth();
     init_constants();
@@ -15020,6 +15030,13 @@ var init_api3 = __esm({
 });
 
 // src/internal/components/TransactionsMenu/utils.ts
+function formatIntl(price, fractionDigits) {
+  const formatter = Intl.NumberFormat("en-US", {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits
+  });
+  return formatter.format(price);
+}
 var formatAddress2, parseValue, formatValue2, openInExplorer2, formatTimestamp;
 var init_utils6 = __esm({
   "src/internal/components/TransactionsMenu/utils.ts"() {
@@ -15048,11 +15065,11 @@ var init_utils6 = __esm({
       const whole = amount / scale;
       const fraction = amount % scale;
       if (fraction === 0n) {
-        return whole.toString();
+        return formatIntl(Number(whole), 0);
       }
       const fractionStr = fraction.toString().padStart(decimals, "0").replace(/0+$/, "");
       const trimmed = fractionStr.slice(0, Math.min(6, fractionStr.length));
-      return `${whole.toString()}.${trimmed}`;
+      return `${formatIntl(Number(whole), 0)}.${trimmed}`;
     };
     openInExplorer2 = (txHash) => {
       if (!txHash) {
@@ -15596,8 +15613,8 @@ function LumiaPassportDialog() {
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DialogTitle, { children: dialogTitle }) }),
         /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DialogDescription, { className: "sr-only", children: dialogDescription }),
         !isHeaderHidden && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Header, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_framer_motion3.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          import_framer_motion3.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_framer_motion2.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          import_framer_motion2.motion.div,
           {
             initial: { opacity: 0, height: mainPageHeight },
             animate: { opacity: 1, height: "auto" },
@@ -15613,12 +15630,12 @@ function LumiaPassportDialog() {
     }
   );
 }
-var import_framer_motion3, import_react57, import_jsx_runtime78;
+var import_framer_motion2, import_react57, import_jsx_runtime78;
 var init_LumiaPassportDialog = __esm({
   "src/internal/components/Dialog/LumiaPassportDialog.tsx"() {
     init_LumiaPassportContext();
     init_LumiaPassportSessionContext();
-    import_framer_motion3 = require("framer-motion");
+    import_framer_motion2 = require("framer-motion");
     import_react57 = require("react");
     init_Footer2();
     init_Header2();