@authon/react 0.3.2 → 0.7.15

package/dist/index.js

@@ -11,32 +11,35 @@ function AuthonProvider({ publishableKey, children, config }) {
   const [activeOrganization, setActiveOrganization] = useState(null);
   const clientRef = useRef(null);
   useEffect(() => {
+    let active = true;
+    let receivedSessionChange = false;
     const client = new Authon(publishableKey, config);
+    const sessionClient = client;
     clientRef.current = client;
-    client.on("signedIn", (u) => {
-      setUser(u);
+    const unsubscribeSession = sessionClient.onSessionChange((change) => {
+      if (!active) return;
+      receivedSessionChange = true;
+      setUser(change.user);
       setIsLoading(false);
-    });
-    client.on("signedOut", () => {
-      setUser(null);
+      if (!change.user) setActiveOrganization(null);
     });
     client.on("error", () => {
       setIsLoading(false);
     });
-    const existingUser = client.getUser();
-    if (existingUser) {
-      setUser(existingUser);
-    }
-    setIsLoading(false);
+    void sessionClient.waitUntilReady().then(() => {
+      if (!active) return;
+      if (!receivedSessionChange) setUser(client.getUser());
+      setIsLoading(false);
+    });
     return () => {
+      active = false;
+      unsubscribeSession();
       client.destroy();
       clientRef.current = null;
     };
   }, [publishableKey]);
   const signOut = useCallback(async () => {
     await clientRef.current?.signOut();
-    setUser(null);
-    setActiveOrganization(null);
   }, []);
   const openSignIn = useCallback(async () => {
     await clientRef.current?.openSignIn();
@@ -82,9 +85,9 @@ function useUser() {
 }
 
 // src/components/SignIn.tsx
-import { useState as useState5 } from "react";
+import { useRef as useRef4, useState as useState6 } from "react";
 import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES } from "@authon/shared";
-import { getProviderButtonConfig } from "@authon/js";
+import { AuthonMfaRequiredError, getProviderButtonConfig } from "@authon/js";
 
 // src/hooks/useBranding.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
@@ -187,7 +190,7 @@ function ThemeProvider({ branding, children, overrides, style, className }) {
 }
 
 // src/components/shared/Input.tsx
-import { useState as useState3 } from "react";
+import { useId, useState as useState3 } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Input({
   label,
@@ -200,8 +203,10 @@ function Input({
   ...rest
 }) {
   const theme = useTheme();
+  const generatedId = useId();
   const [focused, setFocused] = useState3(false);
   const resolvedStyle = inputStyle ?? theme.inputStyle;
+  const inputId = rest.id ?? generatedId;
   const wrapperStyle = {
     display: "flex",
     flexDirection: "column",
@@ -258,12 +263,13 @@ function Input({
     color: error ? "#ef4444" : theme.textMuted
   };
   return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
-    label && /* @__PURE__ */ jsx3("label", { style: labelStyle, children: label }),
+    label && /* @__PURE__ */ jsx3("label", { htmlFor: inputId, style: labelStyle, children: label }),
     /* @__PURE__ */ jsxs("div", { style: inputContainerStyle, children: [
       /* @__PURE__ */ jsx3(
         "input",
         {
           ...rest,
+          id: inputId,
           style: { ...baseInputStyle, ...inputVariantStyle },
           onFocus: (e) => {
             setFocused(true);
@@ -411,19 +417,212 @@ function Divider({ label = "Or continue with" }) {
   ] });
 }
 
-// src/components/SignIn.tsx
+// src/components/shared/AuthChallengeForms.tsx
+import { useId as useId2, useRef as useRef3, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
+function errorMessage(error, fallback) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+function CodeForm({
+  title,
+  description,
+  label,
+  submitLabel,
+  backLabel,
+  onSubmit,
+  onBack,
+  onResend
+}) {
+  const theme = useTheme();
+  const [code, setCode] = useState5("");
+  const [error, setError] = useState5("");
+  const [status, setStatus] = useState5("");
+  const [loading, setLoading] = useState5(false);
+  const [resending, setResending] = useState5(false);
+  const errorId = useId2();
+  const submitPending = useRef3(false);
+  const resendPending = useRef3(false);
+  const handleSubmit = async () => {
+    if (submitPending.current) return;
+    if (!code.trim()) {
+      setError(`${label} is required`);
+      return;
+    }
+    submitPending.current = true;
+    setLoading(true);
+    setError("");
+    setStatus("");
+    try {
+      await onSubmit(code.trim());
+    } catch (submitError) {
+      setError(errorMessage(submitError, "Verification failed"));
+    } finally {
+      submitPending.current = false;
+      setLoading(false);
+    }
+  };
+  const handleResend = async () => {
+    if (!onResend || resendPending.current) return;
+    resendPending.current = true;
+    setResending(true);
+    setError("");
+    setStatus("");
+    try {
+      await onResend();
+      setStatus("Verification code sent");
+    } catch (resendError) {
+      setError(errorMessage(resendError, "Could not resend verification code"));
+    } finally {
+      resendPending.current = false;
+      setResending(false);
+    }
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: 24,
+    fontWeight: 700,
+    color: theme.text,
+    textAlign: "center",
+    letterSpacing: "-0.3px"
+  };
+  const descriptionStyle = {
+    margin: "-8px 0 0",
+    fontSize: 14,
+    lineHeight: 1.5,
+    color: theme.textMuted,
+    textAlign: "center"
+  };
+  const errorStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#fef2f2",
+    border: "1px solid #fecaca",
+    color: "#dc2626",
+    fontSize: 13
+  };
+  const statusStyle = {
+    padding: "10px 14px",
+    borderRadius: theme.borderRadius,
+    background: "#f0fdf4",
+    border: "1px solid #bbf7d0",
+    color: "#15803d",
+    fontSize: 13
+  };
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("h1", { style: titleStyle, children: title }),
+    /* @__PURE__ */ jsx6("p", { style: descriptionStyle, children: description }),
+    error && /* @__PURE__ */ jsx6("div", { id: errorId, role: "alert", style: errorStyle, children: error }),
+    status && /* @__PURE__ */ jsx6("div", { role: "status", "aria-live": "polite", style: statusStyle, children: status }),
+    /* @__PURE__ */ jsx6(
+      Input,
+      {
+        label,
+        value: code,
+        onChange: setCode,
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        disabled: loading,
+        "aria-invalid": !!error,
+        "aria-describedby": error ? errorId : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        variant: "primary",
+        fullWidth: true,
+        loading,
+        disabled: resending,
+        onClick: handleSubmit,
+        children: submitLabel
+      }
+    ),
+    onResend && /* @__PURE__ */ jsx6(
+      Button,
+      {
+        variant: "outline",
+        fullWidth: true,
+        loading: resending,
+        disabled: loading,
+        onClick: handleResend,
+        children: "Resend code"
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Button,
+      {
+        variant: "ghost",
+        fullWidth: true,
+        disabled: loading || resending,
+        onClick: onBack,
+        children: backLabel
+      }
+    )
+  ] });
+}
+function VerificationForm({
+  email,
+  backLabel,
+  onVerify,
+  onResend,
+  onBack
+}) {
+  return /* @__PURE__ */ jsx6(
+    CodeForm,
+    {
+      title: "Verify your email",
+      description: `Enter the verification code sent to ${email}.`,
+      label: "Verification code",
+      submitLabel: "Verify email",
+      backLabel,
+      onSubmit: onVerify,
+      onResend,
+      onBack
+    }
+  );
+}
+function MfaForm({ onVerify, onBack }) {
+  return /* @__PURE__ */ jsx6(
+    CodeForm,
+    {
+      title: "Two-factor authentication",
+      description: "Enter the code from your authenticator app.",
+      label: "Authenticator code",
+      submitLabel: "Verify code",
+      backLabel: "Back to sign in",
+      onSubmit: onVerify,
+      onBack
+    }
+  );
+}
+
+// src/components/shared/navigation.ts
+function navigateTo(url) {
+  window.location.assign(url);
+}
+
+// src/components/SignIn.tsx
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function SignInCard({ afterSignInUrl, onSignIn, onForgotPassword, onNavigateSignUp }) {
   const theme = useTheme();
   const { client } = useAuthon();
   const { branding, providers, isLoaded } = useBranding();
-  const [email, setEmail] = useState5("");
-  const [password, setPassword] = useState5("");
-  const [showPassword, setShowPassword] = useState5(false);
-  const [loading, setLoading] = useState5(false);
-  const [oauthLoading, setOauthLoading] = useState5(null);
-  const [error, setError] = useState5("");
-  const [fieldErrors, setFieldErrors] = useState5({});
+  const [email, setEmail] = useState6("");
+  const [password, setPassword] = useState6("");
+  const [showPassword, setShowPassword] = useState6(false);
+  const [loading, setLoading] = useState6(false);
+  const [oauthLoading, setOauthLoading] = useState6(null);
+  const [error, setError] = useState6("");
+  const [step, setStep] = useState6({ kind: "credentials" });
+  const [fieldErrors, setFieldErrors] = useState6({});
+  const authAttemptPending = useRef4(false);
+  const completed = useRef4(false);
+  const completeSignIn = () => {
+    if (completed.current) return;
+    completed.current = true;
+    if (afterSignInUrl) navigateTo(afterSignInUrl);
+    onSignIn?.();
+  };
   const validate = () => {
     const errs = {};
     if (!email.trim()) errs.email = "Email is required";
@@ -433,21 +632,35 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     return Object.keys(errs).length === 0;
   };
   const handleSubmit = async () => {
-    if (!validate() || !client) return;
+    if (authAttemptPending.current || !validate() || !client) return;
+    authAttemptPending.current = true;
     setLoading(true);
     setError("");
     try {
-      await client.signInWithEmail(email, password);
-      if (afterSignInUrl) window.location.assign(afterSignInUrl);
-      onSignIn?.();
-    } catch (e) {
-      setError(e?.message ?? "Sign in failed");
+      const result = await client.signInWithEmail(email, password);
+      if ("needsVerification" in result && result.needsVerification) {
+        setStep({ kind: "verification", email: result.email });
+        return;
+      }
+      completeSignIn();
+    } catch (submitError) {
+      if (submitError instanceof AuthonMfaRequiredError) {
+        setStep({ kind: "mfa", mfaToken: submitError.mfaToken });
+      } else {
+        setError(submitError instanceof Error && submitError.message ? submitError.message : "Sign in failed");
+      }
     } finally {
+      authAttemptPending.current = false;
       setLoading(false);
     }
   };
+  const backToCredentials = () => {
+    setError("");
+    setStep({ kind: "credentials" });
+  };
   const handleOAuth = async (provider) => {
-    if (!client) return;
+    if (!client || authAttemptPending.current) return;
+    authAttemptPending.current = true;
     setOauthLoading(provider);
     setError("");
     try {
@@ -455,6 +668,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     } catch (e) {
       setError(e?.message ?? "OAuth sign in failed");
     } finally {
+      authAttemptPending.current = false;
       setOauthLoading(null);
     }
   };
@@ -525,7 +739,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
     (p) => !(branding.hiddenProviders ?? []).includes(p)
   );
   if (!isLoaded) {
-    return /* @__PURE__ */ jsx6("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx7(
       "span",
       {
         style: {
@@ -540,17 +754,49 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs4("div", { style: cardStyle, children: [
-    /* @__PURE__ */ jsxs4("div", { style: logoStyle, children: [
-      branding.logoDataUrl && /* @__PURE__ */ jsx6("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
-      /* @__PURE__ */ jsx6("h1", { style: titleStyle, children: "Sign in" }),
-      branding.brandName && /* @__PURE__ */ jsxs4("p", { style: subtitleStyle, children: [
+  if (step.kind === "verification") {
+    return /* @__PURE__ */ jsx7("div", { style: cardStyle, children: /* @__PURE__ */ jsx7(
+      VerificationForm,
+      {
+        email: step.email,
+        backLabel: "Back to sign in",
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.verifyEmail(step.email, code);
+          completeSignIn();
+        },
+        onResend: async () => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.resendVerificationCode(step.email);
+        },
+        onBack: backToCredentials
+      }
+    ) });
+  }
+  if (step.kind === "mfa") {
+    return /* @__PURE__ */ jsx7("div", { style: cardStyle, children: /* @__PURE__ */ jsx7(
+      MfaForm,
+      {
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign in is unavailable");
+          await client.verifyMfa(step.mfaToken, code);
+          completeSignIn();
+        },
+        onBack: backToCredentials
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs5("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ jsx7("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ jsx7("h1", { style: titleStyle, children: "Sign in" }),
+      branding.brandName && /* @__PURE__ */ jsxs5("p", { style: subtitleStyle, children: [
         "to ",
         branding.brandName
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx6("div", { style: errorBoxStyle, children: error }),
-    providersToShow.length > 0 && /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx6(
+    error && /* @__PURE__ */ jsx7("div", { role: "alert", style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx7(
       OAuthButton,
       {
         provider,
@@ -560,7 +806,7 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         borderRadius: theme.borderRadius
       },
       provider
-    )) : /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx6(
+    )) : /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx7(
       CompactOAuthButton,
       {
         provider,
@@ -571,9 +817,9 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
       },
       provider
     )) }) }),
-    showDivider && /* @__PURE__ */ jsx6(Divider, {}),
-    showEmailPw && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx6(
+    showDivider && /* @__PURE__ */ jsx7(Divider, {}),
+    showEmailPw && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(
         Input,
         {
           label: "Email",
@@ -585,8 +831,8 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
           autoComplete: "email"
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+        /* @__PURE__ */ jsx7(
           Input,
           {
             label: "Password",
@@ -596,21 +842,21 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
             onChange: setPassword,
             error: fieldErrors.password,
             autoComplete: "current-password",
-            rightElement: /* @__PURE__ */ jsx6(
+            rightElement: /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
                 onClick: () => setShowPassword((v) => !v),
                 style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", color: theme.textMuted },
                 "aria-label": showPassword ? "Hide password" : "Show password",
-                children: /* @__PURE__ */ jsx6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx6("path", { d: eyeIconPath }) })
+                children: /* @__PURE__ */ jsx7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: eyeIconPath }) })
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx6("div", { style: forgotStyle, children: /* @__PURE__ */ jsx6("button", { type: "button", style: linkStyle, children: "Forgot password?" }) })
+        onForgotPassword && /* @__PURE__ */ jsx7("div", { style: forgotStyle, children: /* @__PURE__ */ jsx7("button", { type: "button", style: linkStyle, onClick: onForgotPassword, children: "Forgot password?" }) })
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         Button,
         {
           variant: "primary",
@@ -622,10 +868,10 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs4("div", { style: footerStyle, children: [
+    /* @__PURE__ */ jsxs5("div", { style: footerStyle, children: [
       "Don't have an account?",
       " ",
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -635,16 +881,16 @@ function SignInCard({ afterSignInUrl, onSignIn, onNavigateSignUp }) {
         }
       )
     ] }),
-    branding.showSecuredBy !== false && /* @__PURE__ */ jsx6(SecuredByAuthon, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
-    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs4("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
-      branding.termsUrl && /* @__PURE__ */ jsx6("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Terms" }),
+    branding.showSecuredBy !== false && /* @__PURE__ */ jsx7(SecuredByAuthon, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+      branding.termsUrl && /* @__PURE__ */ jsx7("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Terms" }),
       branding.termsUrl && branding.privacyUrl && " \xB7 ",
-      branding.privacyUrl && /* @__PURE__ */ jsx6("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Privacy" })
+      branding.privacyUrl && /* @__PURE__ */ jsx7("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.textMuted }, children: "Privacy" })
     ] }) : null
   ] });
 }
 function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = useState5(false);
+  const [hovered, setHovered] = useState6(false);
   const colors = PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = getProviderButtonConfig(provider);
@@ -670,7 +916,7 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
     transition: "opacity 0.15s",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
@@ -680,9 +926,9 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ jsx6("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        /* @__PURE__ */ jsx6("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
-        /* @__PURE__ */ jsxs4("span", { children: [
+      children: loading ? /* @__PURE__ */ jsx7("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx7("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ jsxs5("span", { children: [
           "Continue with ",
           name
         ] })
@@ -691,7 +937,7 @@ function OAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
   );
 }
 function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = useState5(false);
+  const [hovered, setHovered] = useState6(false);
   const colors = PROVIDER_COLORS[provider] ?? { bg: "#333", text: "#fff" };
   const name = PROVIDER_DISPLAY_NAMES[provider] ?? provider;
   const config = getProviderButtonConfig(provider);
@@ -710,7 +956,7 @@ function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius
     transition: "opacity 0.15s",
     padding: 0
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       type: "button",
@@ -720,33 +966,34 @@ function CompactOAuthButton({ provider, loading, disabled, onClick, borderRadius
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ jsx6("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsx6("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+      children: loading ? /* @__PURE__ */ jsx7("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsx7("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
     }
   );
 }
 function SecuredByAuthon({ primaryStart, textMuted }) {
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
-    /* @__PURE__ */ jsxs4("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ jsx6("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
-      /* @__PURE__ */ jsx6("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ jsxs5("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx7("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
+      /* @__PURE__ */ jsx7("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
     ] }),
-    /* @__PURE__ */ jsxs4("span", { style: { fontSize: 11, color: textMuted }, children: [
+    /* @__PURE__ */ jsxs5("span", { style: { fontSize: 11, color: textMuted }, children: [
       "Secured by",
       " ",
-      /* @__PURE__ */ jsx6("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
+      /* @__PURE__ */ jsx7("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
     ] })
   ] });
 }
-function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }) {
+function SignIn({ appearance, afterSignInUrl, onSignIn, onForgotPassword, onNavigateSignUp }) {
   const { branding, isLoaded } = useBranding();
   const effectiveBranding = isLoaded ? { ...branding, ...appearance?.variables ?? {} } : branding;
-  return /* @__PURE__ */ jsxs4(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
-    /* @__PURE__ */ jsx6("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx7("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx7(
       SignInCard,
       {
         afterSignInUrl,
         onSignIn,
+        onForgotPassword,
         onNavigateSignUp
       }
     )
@@ -754,23 +1001,32 @@ function SignIn({ appearance, afterSignInUrl, onSignIn, onNavigateSignUp }) {
 }
 
 // src/components/SignUp.tsx
-import { useState as useState6 } from "react";
+import { useRef as useRef5, useState as useState7 } from "react";
 import { PROVIDER_COLORS as PROVIDER_COLORS2, PROVIDER_DISPLAY_NAMES as PROVIDER_DISPLAY_NAMES2 } from "@authon/shared";
 import { getProviderButtonConfig as getProviderButtonConfig2 } from "@authon/js";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
   const theme = useTheme();
   const { client } = useAuthon();
   const { branding, providers, isLoaded } = useBranding();
-  const [displayName, setDisplayName] = useState6("");
-  const [email, setEmail] = useState6("");
-  const [password, setPassword] = useState6("");
-  const [confirmPassword, setConfirmPassword] = useState6("");
-  const [showPassword, setShowPassword] = useState6(false);
-  const [loading, setLoading] = useState6(false);
-  const [oauthLoading, setOauthLoading] = useState6(null);
-  const [error, setError] = useState6("");
-  const [fieldErrors, setFieldErrors] = useState6({});
+  const [displayName, setDisplayName] = useState7("");
+  const [email, setEmail] = useState7("");
+  const [password, setPassword] = useState7("");
+  const [confirmPassword, setConfirmPassword] = useState7("");
+  const [showPassword, setShowPassword] = useState7(false);
+  const [loading, setLoading] = useState7(false);
+  const [oauthLoading, setOauthLoading] = useState7(null);
+  const [error, setError] = useState7("");
+  const [verificationEmail, setVerificationEmail] = useState7(null);
+  const [fieldErrors, setFieldErrors] = useState7({});
+  const authAttemptPending = useRef5(false);
+  const completed = useRef5(false);
+  const completeSignUp = () => {
+    if (completed.current) return;
+    completed.current = true;
+    if (afterSignUpUrl) navigateTo(afterSignUpUrl);
+    onSignUp?.();
+  };
   const validate = () => {
     const errs = {};
     if (!email.trim()) errs.email = "Email is required";
@@ -782,21 +1038,27 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     return Object.keys(errs).length === 0;
   };
   const handleSubmit = async () => {
-    if (!validate() || !client) return;
+    if (authAttemptPending.current || !validate() || !client) return;
+    authAttemptPending.current = true;
     setLoading(true);
     setError("");
     try {
-      await client.signUpWithEmail(email, password, displayName ? { displayName } : void 0);
-      if (afterSignUpUrl) window.location.assign(afterSignUpUrl);
-      onSignUp?.();
-    } catch (e) {
-      setError(e?.message ?? "Sign up failed");
+      const result = await client.signUpWithEmail(email, password, displayName ? { displayName } : void 0);
+      if ("needsVerification" in result && result.needsVerification) {
+        setVerificationEmail(result.email);
+        return;
+      }
+      completeSignUp();
+    } catch (submitError) {
+      setError(submitError instanceof Error && submitError.message ? submitError.message : "Sign up failed");
     } finally {
+      authAttemptPending.current = false;
       setLoading(false);
     }
   };
   const handleOAuth = async (provider) => {
-    if (!client) return;
+    if (!client || authAttemptPending.current) return;
+    authAttemptPending.current = true;
     setOauthLoading(provider);
     setError("");
     try {
@@ -804,6 +1066,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     } catch (e) {
       setError(e?.message ?? "OAuth sign in failed");
     } finally {
+      authAttemptPending.current = false;
       setOauthLoading(null);
     }
   };
@@ -869,7 +1132,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
     (p) => !(branding.hiddenProviders ?? []).includes(p)
   );
   if (!isLoaded) {
-    return /* @__PURE__ */ jsx7("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8("div", { style: { ...cardStyle, alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx8(
       "span",
       {
         style: {
@@ -884,18 +1147,40 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
       }
     ) });
   }
+  if (verificationEmail) {
+    return /* @__PURE__ */ jsx8("div", { style: cardStyle, children: /* @__PURE__ */ jsx8(
+      VerificationForm,
+      {
+        email: verificationEmail,
+        backLabel: "Back to sign up",
+        onVerify: async (code) => {
+          if (!client) throw new Error("Sign up is unavailable");
+          await client.verifyEmail(verificationEmail, code);
+          completeSignUp();
+        },
+        onResend: async () => {
+          if (!client) throw new Error("Sign up is unavailable");
+          await client.resendVerificationCode(verificationEmail);
+        },
+        onBack: () => {
+          setError("");
+          setVerificationEmail(null);
+        }
+      }
+    ) });
+  }
   const eyeIconPath = showPassword ? "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24 M1 1l22 22" : "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 9a3 3 0 100 6 3 3 0 000-6z";
-  return /* @__PURE__ */ jsxs5("div", { style: cardStyle, children: [
-    /* @__PURE__ */ jsxs5("div", { style: logoStyle, children: [
-      branding.logoDataUrl && /* @__PURE__ */ jsx7("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
-      /* @__PURE__ */ jsx7("h1", { style: titleStyle, children: "Create account" }),
-      branding.brandName && /* @__PURE__ */ jsxs5("p", { style: subtitleStyle, children: [
+  return /* @__PURE__ */ jsxs6("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs6("div", { style: logoStyle, children: [
+      branding.logoDataUrl && /* @__PURE__ */ jsx8("img", { src: branding.logoDataUrl, alt: branding.brandName ?? "Logo", style: { height: 40, objectFit: "contain" } }),
+      /* @__PURE__ */ jsx8("h1", { style: titleStyle, children: "Create account" }),
+      branding.brandName && /* @__PURE__ */ jsxs6("p", { style: subtitleStyle, children: [
         "Join ",
         branding.brandName
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx7("div", { style: errorBoxStyle, children: error }),
-    providersToShow.length > 0 && /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx7(
+    error && /* @__PURE__ */ jsx8("div", { role: "alert", style: errorBoxStyle, children: error }),
+    providersToShow.length > 0 && /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: providersToShow.length <= 3 ? providersToShow.map((provider) => /* @__PURE__ */ jsx8(
       OAuthButtonFull,
       {
         provider,
@@ -905,7 +1190,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
         borderRadius: theme.borderRadius
       },
       provider
-    )) : /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx7(
+    )) : /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }, children: providersToShow.map((provider) => /* @__PURE__ */ jsx8(
       CompactOAuthBtn,
       {
         provider,
@@ -916,9 +1201,9 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
       },
       provider
     )) }) }),
-    showDivider && /* @__PURE__ */ jsx7(Divider, {}),
-    showEmailPw && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx7(
+    showDivider && /* @__PURE__ */ jsx8(Divider, {}),
+    showEmailPw && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+      /* @__PURE__ */ jsx8(
         Input,
         {
           label: "Display name",
@@ -930,7 +1215,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "name"
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         Input,
         {
           label: "Email",
@@ -942,7 +1227,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "email"
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         Input,
         {
           label: "Password",
@@ -952,19 +1237,19 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           onChange: setPassword,
           error: fieldErrors.password,
           autoComplete: "new-password",
-          rightElement: /* @__PURE__ */ jsx7(
+          rightElement: /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
               onClick: () => setShowPassword((v) => !v),
               style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", color: theme.textMuted },
               "aria-label": showPassword ? "Hide password" : "Show password",
-              children: /* @__PURE__ */ jsx7("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: eyeIconPath }) })
+              children: /* @__PURE__ */ jsx8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("path", { d: eyeIconPath }) })
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         Input,
         {
           label: "Confirm password",
@@ -976,7 +1261,7 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
           autoComplete: "new-password"
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         Button,
         {
           variant: "primary",
@@ -988,23 +1273,23 @@ function SignUpCard({ afterSignUpUrl, onSignUp, onNavigateSignIn }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: footerStyle, children: [
+    /* @__PURE__ */ jsxs6("div", { style: footerStyle, children: [
       "Already have an account?",
       " ",
-      /* @__PURE__ */ jsx7("button", { type: "button", style: linkStyle, onClick: onNavigateSignIn, children: "Sign in" })
+      /* @__PURE__ */ jsx8("button", { type: "button", style: linkStyle, onClick: onNavigateSignIn, children: "Sign in" })
     ] }),
-    branding.showSecuredBy !== false && /* @__PURE__ */ jsx7(SecuredByAuthon2, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
-    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
+    branding.showSecuredBy !== false && /* @__PURE__ */ jsx8(SecuredByAuthon2, { primaryStart: theme.primaryStart, textMuted: theme.textMuted }),
+    branding.termsUrl || branding.privacyUrl ? /* @__PURE__ */ jsxs6("div", { style: { textAlign: "center", fontSize: 11, color: theme.textMuted, marginTop: -8 }, children: [
       "By creating an account you agree to our",
       " ",
-      branding.termsUrl && /* @__PURE__ */ jsx7("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Terms" }),
+      branding.termsUrl && /* @__PURE__ */ jsx8("a", { href: branding.termsUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Terms" }),
       branding.termsUrl && branding.privacyUrl && " and ",
-      branding.privacyUrl && /* @__PURE__ */ jsx7("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Privacy Policy" })
+      branding.privacyUrl && /* @__PURE__ */ jsx8("a", { href: branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", style: { color: theme.primaryStart }, children: "Privacy Policy" })
     ] }) : null
   ] });
 }
 function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = useState6(false);
+  const [hovered, setHovered] = useState7(false);
   const colors = PROVIDER_COLORS2[provider] ?? { bg: "#333", text: "#fff" };
   const name = PROVIDER_DISPLAY_NAMES2[provider] ?? provider;
   const config = getProviderButtonConfig2(provider);
@@ -1030,7 +1315,7 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
     transition: "opacity 0.15s",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -1040,9 +1325,9 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ jsx7("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx7("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
-        /* @__PURE__ */ jsxs5("span", { children: [
+      children: loading ? /* @__PURE__ */ jsx8("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx8("span", { style: { display: "flex", alignItems: "center" }, dangerouslySetInnerHTML: { __html: config.iconSvg } }),
+        /* @__PURE__ */ jsxs6("span", { children: [
           "Continue with ",
           name
         ] })
@@ -1051,7 +1336,7 @@ function OAuthButtonFull({ provider, loading, disabled, onClick, borderRadius })
   );
 }
 function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius }) {
-  const [hovered, setHovered] = useState6(false);
+  const [hovered, setHovered] = useState7(false);
   const colors = PROVIDER_COLORS2[provider] ?? { bg: "#333", text: "#fff" };
   const name = PROVIDER_DISPLAY_NAMES2[provider] ?? provider;
   const config = getProviderButtonConfig2(provider);
@@ -1070,7 +1355,7 @@ function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius })
     transition: "opacity 0.15s",
     padding: 0
   };
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       type: "button",
@@ -1080,29 +1365,29 @@ function CompactOAuthBtn({ provider, loading, disabled, onClick, borderRadius })
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       "aria-label": `Continue with ${name}`,
-      children: loading ? /* @__PURE__ */ jsx7("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsx7("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
+      children: loading ? /* @__PURE__ */ jsx8("span", { style: { width: 18, height: 18, border: `2px solid ${colors.text}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.6s linear infinite" } }) : /* @__PURE__ */ jsx8("span", { style: { display: "flex" }, dangerouslySetInnerHTML: { __html: config.iconSvg } })
     }
   );
 }
 function SecuredByAuthon2({ primaryStart, textMuted }) {
-  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
-    /* @__PURE__ */ jsxs5("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-      /* @__PURE__ */ jsx7("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
-      /* @__PURE__ */ jsx7("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 5, marginTop: -8 }, children: [
+    /* @__PURE__ */ jsxs6("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+      /* @__PURE__ */ jsx8("path", { d: "M6 0L0.5 2.5V6.5C0.5 9.7 2.9 12.7 6 13.5C9.1 12.7 11.5 9.7 11.5 6.5V2.5L6 0Z", fill: primaryStart, opacity: "0.85" }),
+      /* @__PURE__ */ jsx8("path", { d: "M4 7L5.5 8.5L8.5 5.5", stroke: "white", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
     ] }),
-    /* @__PURE__ */ jsxs5("span", { style: { fontSize: 11, color: textMuted }, children: [
+    /* @__PURE__ */ jsxs6("span", { style: { fontSize: 11, color: textMuted }, children: [
       "Secured by",
       " ",
-      /* @__PURE__ */ jsx7("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
+      /* @__PURE__ */ jsx8("a", { href: "https://authon.dev", target: "_blank", rel: "noopener noreferrer", style: { color: primaryStart, textDecoration: "none", fontWeight: 600 }, children: "Authon" })
     ] })
   ] });
 }
 function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }) {
   const { branding, isLoaded } = useBranding();
   const effectiveBranding = isLoaded ? { ...branding, ...appearance?.variables ?? {} } : branding;
-  return /* @__PURE__ */ jsxs5(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
-    /* @__PURE__ */ jsx7("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(ThemeProvider, { branding: effectiveBranding, overrides: appearance?.variables, style: { display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx8("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx8(
       SignUpCard,
       {
         afterSignUpUrl,
@@ -1114,8 +1399,8 @@ function SignUp({ appearance, afterSignUpUrl, onSignUp, onNavigateSignIn }) {
 }
 
 // src/components/UserButton.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function UserAvatar({
   avatarUrl,
   displayName,
@@ -1139,13 +1424,13 @@ function UserAvatar({
     fontWeight: 700,
     userSelect: "none"
   };
-  return /* @__PURE__ */ jsx8("div", { style: avatarStyle, children: avatarUrl ? /* @__PURE__ */ jsx8("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials });
+  return /* @__PURE__ */ jsx9("div", { style: avatarStyle, children: avatarUrl ? /* @__PURE__ */ jsx9("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials });
 }
 function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
   const theme = useTheme();
   const { user, signOut, openSignIn, isSignedIn, activeOrganization, client } = useAuthon();
-  const [open, setOpen] = useState7(false);
-  const dropdownRef = useRef3(null);
+  const [open, setOpen] = useState8(false);
+  const dropdownRef = useRef6(null);
   const handleClickOutside = useCallback3((e) => {
     if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
       setOpen(false);
@@ -1156,7 +1441,7 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open, handleClickOutside]);
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1225,8 +1510,8 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
     fontFamily: theme.fontFamily,
     boxSizing: "border-box"
   });
-  return /* @__PURE__ */ jsxs6("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx8("button", { type: "button", style: triggerStyle, onClick: () => setOpen((v) => !v), "aria-label": "User menu", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7("div", { ref: dropdownRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx9("button", { type: "button", style: triggerStyle, onClick: () => setOpen((v) => !v), "aria-label": "User menu", children: /* @__PURE__ */ jsx9(
       UserAvatar,
       {
         avatarUrl: user?.avatarUrl,
@@ -1237,9 +1522,9 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
         primaryEnd: theme.primaryEnd
       }
     ) }),
-    open && /* @__PURE__ */ jsxs6("div", { style: dropdownStyle, children: [
-      /* @__PURE__ */ jsxs6("div", { style: headerStyle, children: [
-        /* @__PURE__ */ jsx8(
+    open && /* @__PURE__ */ jsxs7("div", { style: dropdownStyle, children: [
+      /* @__PURE__ */ jsxs7("div", { style: headerStyle, children: [
+        /* @__PURE__ */ jsx9(
           UserAvatar,
           {
             avatarUrl: user?.avatarUrl,
@@ -1250,12 +1535,12 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             primaryEnd: theme.primaryEnd
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
-          user?.displayName && /* @__PURE__ */ jsx8("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: user.displayName }),
-          user?.email && /* @__PURE__ */ jsx8("div", { style: { fontSize: 12, color: theme.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 1 }, children: user.email })
+        /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
+          user?.displayName && /* @__PURE__ */ jsx9("div", { style: { fontSize: 14, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: user.displayName }),
+          user?.email && /* @__PURE__ */ jsx9("div", { style: { fontSize: 12, color: theme.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginTop: 1 }, children: user.email })
         ] })
       ] }),
-      activeOrganization && /* @__PURE__ */ jsx8(
+      activeOrganization && /* @__PURE__ */ jsx9(
         OrgSwitcherRow,
         {
           org: activeOrganization,
@@ -1264,7 +1549,7 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
           client
         }
       ),
-      userProfileUrl && /* @__PURE__ */ jsx8(
+      userProfileUrl && /* @__PURE__ */ jsx9(
         MenuButton,
         {
           style: menuItemStyle(),
@@ -1272,14 +1557,14 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             setOpen(false);
             window.location.assign(userProfileUrl);
           },
-          icon: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx8("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" }),
-            /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "7", r: "4" })
+          icon: /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx9("path", { d: "M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" }),
+            /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "7", r: "4" })
           ] }),
           children: "Manage account"
         }
       ),
-      /* @__PURE__ */ jsx8("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9("div", { style: { borderTop: `1px solid ${theme.border}` }, children: /* @__PURE__ */ jsx9(
         MenuButton,
         {
           style: menuItemStyle(true),
@@ -1288,10 +1573,10 @@ function UserButtonInner({ afterSignOutUrl, userProfileUrl }) {
             await signOut();
             if (afterSignOutUrl) window.location.assign(afterSignOutUrl);
           },
-          icon: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ jsx8("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" }),
-            /* @__PURE__ */ jsx8("polyline", { points: "16 17 21 12 16 7" }),
-            /* @__PURE__ */ jsx8("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+          icon: /* @__PURE__ */ jsxs7("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx9("path", { d: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" }),
+            /* @__PURE__ */ jsx9("polyline", { points: "16 17 21 12 16 7" }),
+            /* @__PURE__ */ jsx9("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
           ] }),
           children: "Sign out"
         }
@@ -1305,8 +1590,8 @@ function MenuButton({
   icon,
   children
 }) {
-  const [hovered, setHovered] = useState7(false);
-  return /* @__PURE__ */ jsxs6(
+  const [hovered, setHovered] = useState8(false);
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
@@ -1330,7 +1615,7 @@ function OrgSwitcherRow({
   theme,
   client
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: {
@@ -1341,7 +1626,7 @@ function OrgSwitcherRow({
         gap: 10
       },
       children: [
-        org.logoUrl ? /* @__PURE__ */ jsx8("img", { src: org.logoUrl, alt: org.name, style: { width: 24, height: 24, borderRadius: 6, objectFit: "cover" } }) : /* @__PURE__ */ jsx8(
+        org.logoUrl ? /* @__PURE__ */ jsx9("img", { src: org.logoUrl, alt: org.name, style: { width: 24, height: 24, borderRadius: 6, objectFit: "cover" } }) : /* @__PURE__ */ jsx9(
           "div",
           {
             style: {
@@ -1359,9 +1644,9 @@ function OrgSwitcherRow({
             children: org.name[0]?.toUpperCase()
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx8("div", { style: { fontSize: 12, color: theme.textMuted }, children: "Organization" }),
-          /* @__PURE__ */ jsx8("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: org.name })
+        /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: 12, color: theme.textMuted }, children: "Organization" }),
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: 13, fontWeight: 600, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: org.name })
         ] })
       ]
     }
@@ -1370,39 +1655,39 @@ function OrgSwitcherRow({
 function UserButton({ appearance, afterSignOutUrl, userProfileUrl }) {
   const { branding } = useBranding();
   const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
-  return /* @__PURE__ */ jsx8(ThemeProvider, { branding: effectiveBranding, style: { display: "inline-block" }, children: /* @__PURE__ */ jsx8(UserButtonInner, { afterSignOutUrl, userProfileUrl }) });
+  return /* @__PURE__ */ jsx9(ThemeProvider, { branding: effectiveBranding, style: { display: "inline-block" }, children: /* @__PURE__ */ jsx9(UserButtonInner, { afterSignOutUrl, userProfileUrl }) });
 }
 
 // src/SignedIn.tsx
-import { Fragment as Fragment4, jsx as jsx9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
 function SignedIn({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || !isSignedIn) return null;
-  return /* @__PURE__ */ jsx9(Fragment4, { children });
+  return /* @__PURE__ */ jsx10(Fragment5, { children });
 }
 
 // src/SignedOut.tsx
-import { Fragment as Fragment5, jsx as jsx10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
 function SignedOut({ children }) {
   const { isSignedIn, isLoading } = useAuthon();
   if (isLoading || isSignedIn) return null;
-  return /* @__PURE__ */ jsx10(Fragment5, { children });
+  return /* @__PURE__ */ jsx11(Fragment6, { children });
 }
 
 // src/Protect.tsx
-import { Fragment as Fragment6, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx12 } from "react/jsx-runtime";
 function Protect({ children, fallback = null, condition }) {
   const { isSignedIn, isLoading, user } = useAuthon();
   if (isLoading) return null;
-  if (!isSignedIn || !user) return /* @__PURE__ */ jsx11(Fragment6, { children: fallback });
-  if (condition && !condition(user)) return /* @__PURE__ */ jsx11(Fragment6, { children: fallback });
-  return /* @__PURE__ */ jsx11(Fragment6, { children });
+  if (!isSignedIn || !user) return /* @__PURE__ */ jsx12(Fragment7, { children: fallback });
+  if (condition && !condition(user)) return /* @__PURE__ */ jsx12(Fragment7, { children: fallback });
+  return /* @__PURE__ */ jsx12(Fragment7, { children });
 }
 
 // src/SocialButton.tsx
 import { PROVIDER_COLORS as PROVIDER_COLORS3, PROVIDER_DISPLAY_NAMES as PROVIDER_DISPLAY_NAMES3 } from "@authon/shared";
 import { getProviderButtonConfig as getProviderButtonConfig3 } from "@authon/js";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var baseStyle = {
   display: "flex",
   alignItems: "center",
@@ -1448,7 +1733,7 @@ function SocialButton({
   const iconSvg = config.iconSvg.replace(/width="\d+"/, `width="${resolvedIconSize}"`).replace(/height="\d+"/, `height="${resolvedIconSize}"`);
   const borderProps = needsBorder ? { border: "1px solid #dadce0" } : {};
   if (compact) {
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       "button",
       {
         className,
@@ -1464,7 +1749,7 @@ function SocialButton({
         onClick: () => onClick(provider),
         disabled: disabled || loading,
         "aria-label": `Sign in with ${displayName}`,
-        children: loading ? /* @__PURE__ */ jsx12(
+        children: loading ? /* @__PURE__ */ jsx13(
           "span",
           {
             style: {
@@ -1477,7 +1762,7 @@ function SocialButton({
               animation: "authon-spin 0.6s linear infinite"
             }
           }
-        ) : /* @__PURE__ */ jsx12(
+        ) : /* @__PURE__ */ jsx13(
           "span",
           {
             style: { display: "flex", alignItems: "center", flexShrink: 0 },
@@ -1487,7 +1772,7 @@ function SocialButton({
       }
     );
   }
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       className,
@@ -1503,7 +1788,7 @@ function SocialButton({
       onClick: () => onClick(provider),
       disabled: disabled || loading,
       "aria-label": `Sign in with ${displayName}`,
-      children: loading ? /* @__PURE__ */ jsx12(
+      children: loading ? /* @__PURE__ */ jsx13(
         "span",
         {
           style: {
@@ -1516,23 +1801,23 @@ function SocialButton({
             animation: "authon-spin 0.6s linear infinite"
           }
         }
-      ) : /* @__PURE__ */ jsxs7(Fragment7, { children: [
-        /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsxs8(Fragment8, { children: [
+        /* @__PURE__ */ jsx13(
           "span",
           {
             style: { display: "flex", alignItems: "center", flexShrink: 0 },
             dangerouslySetInnerHTML: { __html: iconSvg }
           }
         ),
-        /* @__PURE__ */ jsx12("span", { style: { fontSize: 15, fontWeight: 600, whiteSpace: "nowrap" }, children: buttonLabel })
+        /* @__PURE__ */ jsx13("span", { style: { fontSize: 15, fontWeight: 600, whiteSpace: "nowrap" }, children: buttonLabel })
       ] })
     }
   );
 }
 
 // src/SocialButtons.tsx
-import { useState as useState8, useEffect as useEffect4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { useState as useState9, useEffect as useEffect4 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function SocialButtons({
   onSuccess,
   onError,
@@ -1544,8 +1829,8 @@ function SocialButtons({
   buttonProps
 }) {
   const { client } = useAuthon();
-  const [providers, setProviders] = useState8([]);
-  const [loadingProvider, setLoadingProvider] = useState8(null);
+  const [providers, setProviders] = useState9([]);
+  const [loadingProvider, setLoadingProvider] = useState9(null);
   useEffect4(() => {
     if (!client) return;
     client.getProviders().then((p) => setProviders(p));
@@ -1566,7 +1851,7 @@ function SocialButtons({
     }
   };
   const containerStyle = compact ? { display: "flex", flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: resolvedGap, ...userStyle } : { display: "flex", flexDirection: "column", gap: resolvedGap, ...userStyle };
-  return /* @__PURE__ */ jsx13("div", { className, style: containerStyle, children: providers.map((provider) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14("div", { className, style: containerStyle, children: providers.map((provider) => /* @__PURE__ */ jsx14(
     SocialButton,
     {
       provider,
@@ -1582,12 +1867,12 @@ function SocialButtons({
 }
 
 // src/useAuthonMfa.ts
-import { useCallback as useCallback4, useContext as useContext3, useState as useState9 } from "react";
+import { useCallback as useCallback4, useContext as useContext3, useState as useState10 } from "react";
 function useAuthonMfa() {
   const ctx = useContext3(AuthonContext);
   if (!ctx) throw new Error("useAuthonMfa must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10(null);
   const wrap = useCallback4(
     async (fn) => {
       setIsLoading(true);
@@ -1650,12 +1935,12 @@ function useAuthonMfa() {
 }
 
 // src/useAuthonPasskeys.ts
-import { useCallback as useCallback5, useContext as useContext4, useState as useState10 } from "react";
+import { useCallback as useCallback5, useContext as useContext4, useState as useState11 } from "react";
 function useAuthonPasskeys() {
   const ctx = useContext4(AuthonContext);
   if (!ctx) throw new Error("useAuthonPasskeys must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = useState10(false);
-  const [error, setError] = useState10(null);
+  const [isLoading, setIsLoading] = useState11(false);
+  const [error, setError] = useState11(null);
   const wrap = useCallback5(
     async (fn) => {
       setIsLoading(true);
@@ -1709,12 +1994,12 @@ function useAuthonPasskeys() {
 }
 
 // src/useAuthonPasswordless.ts
-import { useCallback as useCallback6, useContext as useContext5, useState as useState11 } from "react";
+import { useCallback as useCallback6, useContext as useContext5, useState as useState12 } from "react";
 function useAuthonPasswordless() {
   const ctx = useContext5(AuthonContext);
   if (!ctx) throw new Error("useAuthonPasswordless must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = useState11(false);
-  const [error, setError] = useState11(null);
+  const [isLoading, setIsLoading] = useState12(false);
+  const [error, setError] = useState12(null);
   const wrap = useCallback6(
     async (fn) => {
       setIsLoading(true);
@@ -1761,12 +2046,12 @@ function useAuthonPasswordless() {
 }
 
 // src/useAuthonWeb3.ts
-import { useCallback as useCallback7, useContext as useContext6, useState as useState12 } from "react";
+import { useCallback as useCallback7, useContext as useContext6, useState as useState13 } from "react";
 function useAuthonWeb3() {
   const ctx = useContext6(AuthonContext);
   if (!ctx) throw new Error("useAuthonWeb3 must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [isLoading, setIsLoading] = useState13(false);
+  const [error, setError] = useState13(null);
   const wrap = useCallback7(
     async (fn) => {
       setIsLoading(true);
@@ -1822,12 +2107,12 @@ function useAuthonWeb3() {
 }
 
 // src/useAuthonSessions.ts
-import { useCallback as useCallback8, useContext as useContext7, useState as useState13 } from "react";
+import { useCallback as useCallback8, useContext as useContext7, useState as useState14 } from "react";
 function useAuthonSessions() {
   const ctx = useContext7(AuthonContext);
   if (!ctx) throw new Error("useAuthonSessions must be used within <AuthonProvider>");
-  const [isLoading, setIsLoading] = useState13(false);
-  const [error, setError] = useState13(null);
+  const [isLoading, setIsLoading] = useState14(false);
+  const [error, setError] = useState14(null);
   const wrap = useCallback8(
     async (fn) => {
       setIsLoading(true);
@@ -1863,12 +2148,12 @@ function useAuthonSessions() {
 }
 
 // src/useOrganization.ts
-import { useContext as useContext8, useEffect as useEffect5, useState as useState14 } from "react";
+import { useContext as useContext8, useEffect as useEffect5, useState as useState15 } from "react";
 function useOrganization() {
   const ctx = useContext8(AuthonContext);
   if (!ctx) throw new Error("useOrganization must be used within <AuthonProvider>");
-  const [members, setMembers] = useState14([]);
-  const [isLoaded, setIsLoaded] = useState14(false);
+  const [members, setMembers] = useState15([]);
+  const [isLoaded, setIsLoaded] = useState15(false);
   const organization = ctx.activeOrganization;
   useEffect5(() => {
     if (!organization || !ctx.client) {
@@ -1893,12 +2178,12 @@ function useOrganization() {
 }
 
 // src/useOrganizationList.ts
-import { useCallback as useCallback10, useContext as useContext9, useEffect as useEffect6, useState as useState15 } from "react";
+import { useCallback as useCallback10, useContext as useContext9, useEffect as useEffect6, useState as useState16 } from "react";
 function useOrganizationList() {
   const ctx = useContext9(AuthonContext);
   if (!ctx) throw new Error("useOrganizationList must be used within <AuthonProvider>");
-  const [organizations, setOrganizations] = useState15([]);
-  const [isLoaded, setIsLoaded] = useState15(false);
+  const [organizations, setOrganizations] = useState16([]);
+  const [isLoaded, setIsLoaded] = useState16(false);
   useEffect6(() => {
     if (!ctx.client || !ctx.isSignedIn) {
       setOrganizations([]);
@@ -1942,16 +2227,16 @@ function useOrganizationList() {
 }
 
 // src/components/UserProfile.tsx
-import { useCallback as useCallback11, useEffect as useEffect7, useState as useState16 } from "react";
-import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useCallback as useCallback11, useEffect as useEffect7, useState as useState17 } from "react";
+import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function ProfileTab() {
   const theme = useTheme();
   const { user, client } = useAuthon();
-  const [displayName, setDisplayName] = useState16(user?.displayName ?? "");
-  const [phone, setPhone] = useState16(user?.phone ?? "");
-  const [loading, setLoading] = useState16(false);
-  const [success, setSuccess] = useState16("");
-  const [error, setError] = useState16("");
+  const [displayName, setDisplayName] = useState17(user?.displayName ?? "");
+  const [phone, setPhone] = useState17(user?.phone ?? "");
+  const [loading, setLoading] = useState17(false);
+  const [success, setSuccess] = useState17("");
+  const [error, setError] = useState17("");
   const handleSave = async () => {
     if (!client) return;
     setLoading(true);
@@ -1967,9 +2252,9 @@ function ProfileTab() {
     }
   };
   const initials = user?.displayName ? user.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : (user?.email?.[0] ?? "?").toUpperCase();
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
-    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+      /* @__PURE__ */ jsx15(
         "div",
         {
           style: {
@@ -1986,36 +2271,36 @@ function ProfileTab() {
             overflow: "hidden",
             flexShrink: 0
           },
-          children: user?.avatarUrl ? /* @__PURE__ */ jsx14("img", { src: user.avatarUrl, alt: "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
+          children: user?.avatarUrl ? /* @__PURE__ */ jsx15("img", { src: user.avatarUrl, alt: "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials
         }
       ),
-      /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx14("div", { style: { fontSize: 16, fontWeight: 600, color: theme.text }, children: user?.displayName ?? "User" }),
-        /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, color: theme.textMuted }, children: user?.email }),
-        !user?.emailVerified && /* @__PURE__ */ jsx14("span", { style: { fontSize: 11, color: "#d97706", background: "#fef3c7", padding: "2px 8px", borderRadius: 99, fontWeight: 500, marginTop: 4, display: "inline-block" }, children: "Email not verified" })
+      /* @__PURE__ */ jsxs9("div", { children: [
+        /* @__PURE__ */ jsx15("div", { style: { fontSize: 16, fontWeight: 600, color: theme.text }, children: user?.displayName ?? "User" }),
+        /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, color: theme.textMuted }, children: user?.email }),
+        !user?.emailVerified && /* @__PURE__ */ jsx15("span", { style: { fontSize: 11, color: "#d97706", background: "#fef3c7", padding: "2px 8px", borderRadius: 99, fontWeight: 500, marginTop: 4, display: "inline-block" }, children: "Email not verified" })
       ] })
     ] }),
-    success && /* @__PURE__ */ jsx14("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#166534", fontSize: 13 }, children: success }),
-    error && /* @__PURE__ */ jsx14("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13 }, children: error }),
-    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-      /* @__PURE__ */ jsx14(Input, { label: "Display name", value: displayName, onChange: setDisplayName, placeholder: "Your name" }),
-      /* @__PURE__ */ jsx14(Input, { label: "Email", type: "email", value: user?.email ?? "", disabled: true, placeholder: "Email" }),
-      /* @__PURE__ */ jsx14(Input, { label: "Phone", type: "tel", value: phone, onChange: setPhone, placeholder: "+1 (555) 000-0000" })
+    success && /* @__PURE__ */ jsx15("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#f0fdf4", border: "1px solid #bbf7d0", color: "#166534", fontSize: 13 }, children: success }),
+    error && /* @__PURE__ */ jsx15("div", { style: { padding: "10px 14px", borderRadius: theme.borderRadius, background: "#fef2f2", border: "1px solid #fecaca", color: "#dc2626", fontSize: 13 }, children: error }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+      /* @__PURE__ */ jsx15(Input, { label: "Display name", value: displayName, onChange: setDisplayName, placeholder: "Your name" }),
+      /* @__PURE__ */ jsx15(Input, { label: "Email", type: "email", value: user?.email ?? "", disabled: true, placeholder: "Email" }),
+      /* @__PURE__ */ jsx15(Input, { label: "Phone", type: "tel", value: phone, onChange: setPhone, placeholder: "+1 (555) 000-0000" })
     ] }),
-    /* @__PURE__ */ jsx14(Button, { variant: "primary", onClick: handleSave, loading, style: { alignSelf: "flex-start", minWidth: 120 }, children: "Save changes" })
+    /* @__PURE__ */ jsx15(Button, { variant: "primary", onClick: handleSave, loading, style: { alignSelf: "flex-start", minWidth: 120 }, children: "Save changes" })
   ] });
 }
 function SecurityTab() {
   const theme = useTheme();
   const { client } = useAuthon();
-  const [currentPw, setCurrentPw] = useState16("");
-  const [newPw, setNewPw] = useState16("");
-  const [confirmPw, setConfirmPw] = useState16("");
-  const [pwLoading, setPwLoading] = useState16(false);
-  const [pwError, setPwError] = useState16("");
-  const [pwSuccess, setPwSuccess] = useState16("");
-  const [mfaStatus, setMfaStatus] = useState16(null);
-  const [mfaLoading, setMfaLoading] = useState16(false);
+  const [currentPw, setCurrentPw] = useState17("");
+  const [newPw, setNewPw] = useState17("");
+  const [confirmPw, setConfirmPw] = useState17("");
+  const [pwLoading, setPwLoading] = useState17(false);
+  const [pwError, setPwError] = useState17("");
+  const [pwSuccess, setPwSuccess] = useState17("");
+  const [mfaStatus, setMfaStatus] = useState17(null);
+  const [mfaLoading, setMfaLoading] = useState17(false);
   useEffect7(() => {
     if (!client) return;
     client.getMfaStatus().then(setMfaStatus).catch(() => null);
@@ -2053,26 +2338,26 @@ function SecurityTab() {
     paddingBottom: 10,
     borderBottom: `1px solid ${theme.border}`
   };
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Change password" }),
-      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ jsx14(Input, { label: "Current password", type: "password", value: currentPw, onChange: setCurrentPw, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" }),
-        /* @__PURE__ */ jsx14(Input, { label: "New password", type: "password", value: newPw, onChange: setNewPw, placeholder: "Minimum 8 characters", autoComplete: "new-password" }),
-        /* @__PURE__ */ jsx14(Input, { label: "Confirm new password", type: "password", value: confirmPw, onChange: setConfirmPw, placeholder: "Repeat new password", autoComplete: "new-password" }),
-        pwError && /* @__PURE__ */ jsx14("div", { style: { color: "#dc2626", fontSize: 13 }, children: pwError }),
-        pwSuccess && /* @__PURE__ */ jsx14("div", { style: { color: "#166534", fontSize: 13 }, children: pwSuccess }),
-        /* @__PURE__ */ jsx14(Button, { variant: "primary", onClick: handlePasswordChange, loading: pwLoading, style: { alignSelf: "flex-start", minWidth: 160 }, children: "Update password" })
+  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx15("div", { style: sectionTitle, children: "Change password" }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsx15(Input, { label: "Current password", type: "password", value: currentPw, onChange: setCurrentPw, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "current-password" }),
+        /* @__PURE__ */ jsx15(Input, { label: "New password", type: "password", value: newPw, onChange: setNewPw, placeholder: "Minimum 8 characters", autoComplete: "new-password" }),
+        /* @__PURE__ */ jsx15(Input, { label: "Confirm new password", type: "password", value: confirmPw, onChange: setConfirmPw, placeholder: "Repeat new password", autoComplete: "new-password" }),
+        pwError && /* @__PURE__ */ jsx15("div", { style: { color: "#dc2626", fontSize: 13 }, children: pwError }),
+        pwSuccess && /* @__PURE__ */ jsx15("div", { style: { color: "#166534", fontSize: 13 }, children: pwSuccess }),
+        /* @__PURE__ */ jsx15(Button, { variant: "primary", onClick: handlePasswordChange, loading: pwLoading, style: { alignSelf: "flex-start", minWidth: 160 }, children: "Update password" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Two-factor authentication" }),
-      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0" }, children: [
-        /* @__PURE__ */ jsxs8("div", { children: [
-          /* @__PURE__ */ jsx14("div", { style: { fontSize: 14, fontWeight: 500, color: theme.text }, children: "Authenticator app" }),
-          /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, color: theme.textMuted, marginTop: 2 }, children: mfaStatus?.enabled ? `Enabled \xB7 ${mfaStatus.backupCodesRemaining} backup codes remaining` : "Add extra security to your account" })
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx15("div", { style: sectionTitle, children: "Two-factor authentication" }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 0" }, children: [
+        /* @__PURE__ */ jsxs9("div", { children: [
+          /* @__PURE__ */ jsx15("div", { style: { fontSize: 14, fontWeight: 500, color: theme.text }, children: "Authenticator app" }),
+          /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, color: theme.textMuted, marginTop: 2 }, children: mfaStatus?.enabled ? `Enabled \xB7 ${mfaStatus.backupCodesRemaining} backup codes remaining` : "Add extra security to your account" })
         ] }),
-        /* @__PURE__ */ jsx14("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsx15("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsxs9(
           "span",
           {
             style: {
@@ -2087,7 +2372,7 @@ function SecurityTab() {
               color: mfaStatus?.enabled ? "#166534" : theme.textMuted
             },
             children: [
-              /* @__PURE__ */ jsx14("span", { style: { width: 6, height: 6, borderRadius: "50%", background: mfaStatus?.enabled ? "#22c55e" : "#9ca3af", display: "inline-block" } }),
+              /* @__PURE__ */ jsx15("span", { style: { width: 6, height: 6, borderRadius: "50%", background: mfaStatus?.enabled ? "#22c55e" : "#9ca3af", display: "inline-block" } }),
               mfaStatus?.enabled ? "Enabled" : "Disabled"
             ]
           }
@@ -2099,9 +2384,9 @@ function SecurityTab() {
 function SessionsTab() {
   const theme = useTheme();
   const { client } = useAuthon();
-  const [sessions, setSessions] = useState16([]);
-  const [loading, setLoading] = useState16(true);
-  const [revoking, setRevoking] = useState16(null);
+  const [sessions, setSessions] = useState17([]);
+  const [loading, setLoading] = useState17(true);
+  const [revoking, setRevoking] = useState17(null);
   const loadSessions = useCallback11(async () => {
     if (!client) return;
     setLoading(true);
@@ -2136,11 +2421,11 @@ function SessionsTab() {
     borderBottom: `1px solid ${theme.border}`
   };
   if (loading) {
-    return /* @__PURE__ */ jsx14("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ jsx14("span", { style: { width: 24, height: 24, border: `3px solid ${theme.primaryStart}33`, borderTopColor: theme.primaryStart, borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.7s linear infinite" } }) });
+    return /* @__PURE__ */ jsx15("div", { style: { display: "flex", justifyContent: "center", padding: 40 }, children: /* @__PURE__ */ jsx15("span", { style: { width: 24, height: 24, border: `3px solid ${theme.primaryStart}33`, borderTopColor: theme.primaryStart, borderRadius: "50%", display: "inline-block", animation: "authon-spin 0.7s linear infinite" } }) });
   }
-  return /* @__PURE__ */ jsxs8("div", { children: [
-    /* @__PURE__ */ jsx14("div", { style: sectionTitle, children: "Active sessions" }),
-    /* @__PURE__ */ jsx14("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: sessions.length === 0 ? /* @__PURE__ */ jsx14("div", { style: { color: theme.textMuted, fontSize: 14, textAlign: "center", padding: "24px 0" }, children: "No active sessions" }) : sessions.map((session) => /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsx15("div", { style: sectionTitle, children: "Active sessions" }),
+    /* @__PURE__ */ jsx15("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: sessions.length === 0 ? /* @__PURE__ */ jsx15("div", { style: { color: theme.textMuted, fontSize: 14, textAlign: "center", padding: "24px 0" }, children: "No active sessions" }) : sessions.map((session) => /* @__PURE__ */ jsxs9(
       "div",
       {
         style: {
@@ -2153,24 +2438,24 @@ function SessionsTab() {
           gap: 12
         },
         children: [
-          /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx14("div", { style: { width: 36, height: 36, borderRadius: "50%", background: `${theme.primaryStart}18`, color: theme.primaryStart, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsxs8("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx14("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
-              /* @__PURE__ */ jsx14("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
-              /* @__PURE__ */ jsx14("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx15("div", { style: { width: 36, height: 36, borderRadius: "50%", background: `${theme.primaryStart}18`, color: theme.primaryStart, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsxs9("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx15("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+              /* @__PURE__ */ jsx15("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+              /* @__PURE__ */ jsx15("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
             ] }) }),
-            /* @__PURE__ */ jsxs8("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx14("div", { style: { fontSize: 13, fontWeight: 500, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: session.userAgent ? session.userAgent.length > 50 ? session.userAgent.slice(0, 50) + "\u2026" : session.userAgent : "Unknown device" }),
-              /* @__PURE__ */ jsxs8("div", { style: { fontSize: 12, color: theme.textMuted, marginTop: 2 }, children: [
+            /* @__PURE__ */ jsxs9("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx15("div", { style: { fontSize: 13, fontWeight: 500, color: theme.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: session.userAgent ? session.userAgent.length > 50 ? session.userAgent.slice(0, 50) + "\u2026" : session.userAgent : "Unknown device" }),
+              /* @__PURE__ */ jsxs9("div", { style: { fontSize: 12, color: theme.textMuted, marginTop: 2 }, children: [
                 session.ipAddress ?? "Unknown IP",
-                session.lastActiveAt && /* @__PURE__ */ jsxs8(Fragment8, { children: [
+                session.lastActiveAt && /* @__PURE__ */ jsxs9(Fragment9, { children: [
                   " \xB7 ",
                   formatRelative(session.lastActiveAt)
                 ] })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx15(
             Button,
             {
               variant: "outline",
@@ -2198,7 +2483,7 @@ function formatRelative(dateStr) {
 }
 function UserProfilePanel() {
   const theme = useTheme();
-  const [tab, setTab] = useState16("profile");
+  const [tab, setTab] = useState17("profile");
   const panelStyle = {
     width: "100%",
     maxWidth: 640,
@@ -2233,9 +2518,9 @@ function UserProfilePanel() {
     { key: "security", label: "Security" },
     { key: "sessions", label: "Sessions" }
   ];
-  return /* @__PURE__ */ jsxs8("div", { style: panelStyle, children: [
-    /* @__PURE__ */ jsx14("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
-    /* @__PURE__ */ jsx14("div", { style: tabBarStyle, children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsx15("style", { children: `@keyframes authon-spin { to { transform: rotate(360deg); } }` }),
+    /* @__PURE__ */ jsx15("div", { style: tabBarStyle, children: tabs.map(({ key, label }) => /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
@@ -2245,26 +2530,26 @@ function UserProfilePanel() {
       },
       key
     )) }),
-    /* @__PURE__ */ jsxs8("div", { style: contentStyle, children: [
-      tab === "profile" && /* @__PURE__ */ jsx14(ProfileTab, {}),
-      tab === "security" && /* @__PURE__ */ jsx14(SecurityTab, {}),
-      tab === "sessions" && /* @__PURE__ */ jsx14(SessionsTab, {})
+    /* @__PURE__ */ jsxs9("div", { style: contentStyle, children: [
+      tab === "profile" && /* @__PURE__ */ jsx15(ProfileTab, {}),
+      tab === "security" && /* @__PURE__ */ jsx15(SecurityTab, {}),
+      tab === "sessions" && /* @__PURE__ */ jsx15(SessionsTab, {})
     ] })
   ] });
 }
 function UserProfile({ appearance }) {
   const { branding } = useBranding();
   const effectiveBranding = { ...branding, ...appearance?.variables ?? {} };
-  return /* @__PURE__ */ jsx14(ThemeProvider, { branding: effectiveBranding, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx14(UserProfilePanel, {}) });
+  return /* @__PURE__ */ jsx15(ThemeProvider, { branding: effectiveBranding, style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx15(UserProfilePanel, {}) });
 }
 
 // src/components/shared/ProviderIcon.tsx
 import { getProviderButtonConfig as getProviderButtonConfig4 } from "@authon/js";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function ProviderIcon({ provider, size = 20 }) {
   const config = getProviderButtonConfig4(provider);
   const svg = config.iconSvg.replace(/width="\d+"/, `width="${size}"`).replace(/height="\d+"/, `height="${size}"`);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       style: { display: "flex", alignItems: "center", flexShrink: 0 },