@zerodev/wallet-react-ui 0.0.5 → 0.0.7

package/dist/index.mjs

@@ -1,83 +1,81 @@
-import { jsxs as c, jsx as n, Fragment as A } from "react/jsx-runtime";
-import { Text as m, cn as G, PoweredBy as B, Button as E, Wrapper as ne, ListItem as $, ListItemChevron as re, ListItemIcon as D, Input as se, Icon as ie, Screen as ae, TopNav as oe } from "@zerodev/react-ui";
-import { useState as w, useEffect as O, useMemo as le, useRef as K } from "react";
-import { useStore as I, create as de } from "zustand";
-import { useConfig as ce, useConnect as ue } from "wagmi";
-import { useSendMagicLink as Y, useSendOTP as J, useVerifyOTP as he, useAuthenticateOAuth as pe, useRegisterPasskey as me, useLoginPasskey as ze, useVerifyMagicLink as fe, zeroDevWallet as ge, NotAuthenticatedError as ye } from "@zerodev/wallet-react";
-import { subscribeWithSelector as xe } from "zustand/middleware";
-const we = "" + new URL("error.webp", import.meta.url).href, Se = "" + new URL("loading.webp", import.meta.url).href, Ne = "" + new URL("send.webp", import.meta.url).href, ve = "" + new URL("success.webp", import.meta.url).href, be = {
-  error: we,
-  loading: Se,
-  send: Ne,
-  success: ve
+import { jsxs as d, jsx as t, Fragment as N } from "react/jsx-runtime";
+import { Text as m, cn as H, PoweredBy as T, Button as w, Wrapper as Q, Input as Z, Icon as ee, ListItem as _, ListItemChevron as te, ListItemIcon as q, Screen as ne, TopNav as re } from "@zerodev/react-ui";
+import { useState as z, useEffect as k, useMemo as ie, useRef as D, createContext as se, useContext as oe } from "react";
+import { useStore as C, create as ae } from "zustand";
+import { useConfig as de, useConnect as ce } from "wagmi";
+import { useSendMagicLink as W, useSendOTP as F, useVerifyOTP as le, useAuthenticateOAuth as ue, useRegisterPasskey as pe, useLoginPasskey as he, useVerifyMagicLink as me, zeroDevWallet as fe, NotAuthenticatedError as ge } from "@zerodev/wallet-react";
+import { subscribeWithSelector as ze } from "zustand/middleware";
+const ye = "" + new URL("error.webp", import.meta.url).href, xe = "" + new URL("loading.webp", import.meta.url).href, we = "" + new URL("send.webp", import.meta.url).href, Se = "" + new URL("success.webp", import.meta.url).href, Ne = {
+  error: ye,
+  loading: xe,
+  send: we,
+  success: Se
 };
-function P({
+function E({
   imageName: e,
-  title: s,
-  children: a,
-  className: t
+  title: r,
+  children: s,
+  className: i
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "div",
     {
-      className: G("zd:flex zd:flex-col zd:gap-8 zd:items-center", t),
+      className: H("zd:flex zd:flex-col zd:gap-8 zd:items-center", i),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "img",
           {
-            src: be[e],
+            src: Ne[e],
             alt: e,
             className: "zd:w-[118px] zd:h-[118px] zd:bg-transparent"
           }
         ),
-        /* @__PURE__ */ c("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:items-center", children: [
-          /* @__PURE__ */ n(m, { className: "zd:text-h2 zd:text-center zd:whitespace-pre-wrap", children: s }),
-          /* @__PURE__ */ n(m, { className: "zd:text-center zd:whitespace-pre-wrap", children: a })
+        /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:items-center", children: [
+          /* @__PURE__ */ t(m, { className: "zd:text-h2 zd:text-center zd:whitespace-pre-wrap", children: r }),
+          /* @__PURE__ */ t(m, { className: "zd:text-center zd:whitespace-pre-wrap", children: s })
         ] })
       ]
     }
   );
 }
-function X() {
-  const s = ce().connectors.find((a) => a.id === "zerodev-wallet");
-  if (!s || !("getKitStore" in s))
+function ve() {
+  const r = de().connectors.find((s) => s.id === "zerodev-wallet");
+  if (!r || !("getKitStore" in r))
     throw new Error("useKitStore must be used with the zeroDevWallet connector");
-  return s.getKitStore();
+  return r.getKitStore();
 }
-function R() {
-  const e = X(), s = I(e, (l) => l.auth.step), a = I(e, (l) => l.auth.stepHistory), t = I(e, (l) => l.auth.email), r = I(e, (l) => l.auth.otpId), d = I(
+function S() {
+  const e = ve(), r = C(e, (o) => o.auth.step), s = C(e, (o) => o.auth.stepHistory), i = C(e, (o) => o.auth.email), n = C(e, (o) => o.auth.otpId), a = C(
     e,
-    (l) => l.auth.otpEncryptionTargetBundle
-  ), i = I(e, (l) => l.auth.enabledMethods), u = I(e, (l) => l.auth.config);
+    (o) => o.auth.otpEncryptionTargetBundle
+  );
   return {
-    step: s,
-    email: t,
-    otpId: r,
-    otpEncryptionTargetBundle: d,
-    enabledMethods: i,
-    config: u,
+    step: r,
+    email: i,
+    otpId: n,
+    otpEncryptionTargetBundle: a,
     goToStep: e.getState().auth.goToStep,
-    goBack: a.length > 0 ? e.getState().auth.goBack : null,
+    goBack: s.length > 0 ? e.getState().auth.goBack : null,
     reset: e.getState().auth.reset,
     setEmail: e.getState().auth.setEmail,
     setOtpSession: e.getState().auth.setOtpSession,
     clearOtpSession: e.getState().auth.clearOtpSession
   };
 }
-function Ee() {
-  const { email: e, setOtpSession: s } = R(), { mutateAsync: a, isPending: t } = Y(), [r, d] = w(60), i = r <= 0 && !t;
-  return O(() => {
-    if (r <= 0) return;
+function be() {
+  const { email: e, setOtpSession: r } = S(), { mutateAsync: s, isPending: i } = W(), [n, a] = z(60), o = n <= 0 && !i;
+  return k(() => {
+    if (n <= 0) return;
     const l = setInterval(() => {
-      d((h) => Math.max(0, h - 1));
+      a((p) => Math.max(0, p - 1));
     }, 1e3);
     return () => {
       clearInterval(l);
     };
-  }, [r]), /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
-      /* @__PURE__ */ c(
-        P,
+  }, [n]), /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
+      /* @__PURE__ */ d(
+        E,
         {
           imageName: "send",
           title: `Check your email!
@@ -85,279 +83,277 @@ function Ee() {
           children: [
             "We've sent a magic link to",
             " ",
-            /* @__PURE__ */ n(m, { as: "span", className: "zd:text-solarOrange", children: e }),
+            /* @__PURE__ */ t(m, { as: "span", className: "zd:text-solarOrange", children: e }),
             `
 `,
             "Please open the email and click the link to log in."
           ]
         }
       ),
-      /* @__PURE__ */ n("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ c(m, { className: "zd:text-center", children: [
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ d(m, { className: "zd:text-center", children: [
         "Did not get an email?",
         " ",
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            disabled: !i,
+            disabled: !o,
             onClick: async () => {
-              if (!(!e || !i))
+              if (!(!e || !o))
                 try {
-                  const { otpId: l, otpEncryptionTargetBundle: h } = await a({
+                  const { otpId: l, otpEncryptionTargetBundle: p } = await s({
                     email: e
                   });
-                  s({ otpId: l, otpEncryptionTargetBundle: h }), d(60);
+                  r({ otpId: l, otpEncryptionTargetBundle: p }), a(60);
                 } catch {
                 }
             },
             className: "zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed",
-            children: i ? "Resend" : `Resend in ${r} ${r === 1 ? "second" : "seconds"}`
+            children: o ? "Resend" : `Resend in ${n} ${n === 1 ? "second" : "seconds"}`
           }
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ n(B, { className: "zd:self-center zd:pt-4 zd:pb-6" })
+    /* @__PURE__ */ t(T, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function ke() {
+function Ee() {
   return typeof window > "u" ? !1 : new URLSearchParams(window.location.search).has("code");
 }
-function M() {
+function A() {
   if (typeof window > "u") return;
   const e = new URL(window.location.href);
   e.searchParams.has("code") && (e.searchParams.delete("code"), window.history.replaceState(null, "", e.toString()));
 }
-function Te({
+function ke({
   title: e = "Oops, something went wrong",
-  message: s = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
-  showRetry: a = !1,
-  showChooseAnother: t = !0
+  message: r = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
+  showRetry: s = !1,
+  showChooseAnother: i = !0
 }) {
-  const { goToStep: r, goBack: d, reset: i } = R();
-  return /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
-      /* @__PURE__ */ n(P, { imageName: "error", title: e, children: s }),
-      /* @__PURE__ */ c("div", { className: "zd:flex zd:flex-col zd:gap-1", children: [
-        a && /* @__PURE__ */ n(E, { action: "primary", text: "Try again", onClick: d ?? (() => r("sign-up")) }),
-        t && /* @__PURE__ */ n(
-          E,
+  const { goToStep: n, goBack: a, reset: o } = S();
+  return /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
+      /* @__PURE__ */ t(E, { imageName: "error", title: e, children: r }),
+      /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-1", children: [
+        s && /* @__PURE__ */ t(w, { action: "primary", text: "Try again", onClick: a ?? (() => n("sign-up")) }),
+        i && /* @__PURE__ */ t(
+          w,
           {
-            action: a ? "secondary" : "primary",
+            action: s ? "secondary" : "primary",
             onClick: () => {
-              M(), r("sign-up");
+              A(), n("sign-up");
             },
             text: "Choose another sign-in method"
           }
         ),
-        !a && !t && /* @__PURE__ */ n(E, { action: "primary", text: "Start over", onClick: i })
+        !s && !i && /* @__PURE__ */ t(w, { action: "primary", text: "Start over", onClick: o })
       ] })
     ] }),
-    /* @__PURE__ */ n(B, { className: "zd:self-center zd:pt-4 zd:pb-6" })
+    /* @__PURE__ */ t(T, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-const Ie = 4, Ae = 8, Ce = 6;
-function Le(e) {
-  return Math.max(Ie, Math.min(Ae, e));
+const Te = 4, Ie = 8, Ce = 6;
+function Ae(e) {
+  return Math.max(Te, Math.min(Ie, e));
 }
-function Pe({ char: e, isFocused: s }) {
-  return /* @__PURE__ */ n(
-    ne,
+function Pe({ char: e, isFocused: r }) {
+  return /* @__PURE__ */ t(
+    Q,
     {
       "data-testid": "code-input-box",
-      "data-active": s || void 0,
-      className: G(
+      "data-active": r || void 0,
+      className: H(
         "zd:h-16 zd:w-14 zd:rounded-lg zd:flex zd:items-center zd:justify-center",
-        s && "zd:border-[1.5px] zd:border-greyScale"
+        r && "zd:border-[1.5px] zd:border-greyScale"
       ),
-      children: /* @__PURE__ */ n(m, { className: "zd:text-h2", children: e })
+      children: /* @__PURE__ */ t(m, { className: "zd:text-h2", children: e })
     }
   );
 }
 function Re({
   onChange: e,
-  onComplete: s,
-  disabled: a = !1,
-  error: t = !1,
-  autoFocus: r = !1,
-  length: d = Ce,
-  "data-testid": i
+  onComplete: r,
+  disabled: s = !1,
+  error: i = !1,
+  autoFocus: n = !1,
+  length: a = Ce,
+  "data-testid": o
 }) {
-  const u = Le(d), l = le(
-    () => Array.from({ length: u }, (p, g) => ({
-      id: `char-${g}`,
-      index: g
+  const c = Ae(a), l = ie(
+    () => Array.from({ length: c }, (u, x) => ({
+      id: `char-${x}`,
+      index: x
     })),
-    [u]
-  ), [h, x] = w(""), [f, N] = w(!1), k = K(null);
-  O(() => {
-    var p;
-    r && !a && ((p = k.current) == null || p.focus());
-  }, [r, a]), O(() => {
-    x((p) => p.slice(0, u));
-  }, [u]);
-  const v = (p) => {
-    const g = p.slice(0, u).toUpperCase();
-    x(g), e == null || e(g), g.length === u && setTimeout(() => {
-      var C;
-      s == null || s(g), (C = k.current) == null || C.blur();
+    [c]
+  ), [p, h] = z(""), [v, b] = z(!1), f = D(null);
+  k(() => {
+    var u;
+    n && !s && ((u = f.current) == null || u.focus());
+  }, [n, s]), k(() => {
+    h((u) => u.slice(0, c));
+  }, [c]);
+  const y = (u) => {
+    const x = u.slice(0, c).toUpperCase();
+    h(x), e == null || e(x), x.length === c && setTimeout(() => {
+      var g;
+      r == null || r(x), (g = f.current) == null || g.blur();
     }, 0);
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
       className: "zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2 zd:w-full zd:cursor-text",
       onClick: () => {
-        var p;
-        return (p = k.current) == null ? void 0 : p.focus();
+        var u;
+        return (u = f.current) == null ? void 0 : u.focus();
       },
-      disabled: a,
-      "data-testid": i,
+      disabled: s,
+      "data-testid": o,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: k,
-            value: h,
-            onChange: (p) => v(p.target.value),
-            onFocus: () => N(!0),
-            onBlur: () => N(!1),
-            maxLength: u,
-            disabled: a,
+            ref: f,
+            value: p,
+            onChange: (u) => y(u.target.value),
+            onFocus: () => b(!0),
+            onBlur: () => b(!1),
+            maxLength: c,
+            disabled: s,
             className: "zd:absolute zd:opacity-0 zd:pointer-events-none",
             style: { position: "absolute", opacity: 0 },
             "aria-label": "Verification code"
           }
         ),
-        l.map((p) => /* @__PURE__ */ n(
+        l.map((u) => /* @__PURE__ */ t(
           Pe,
           {
-            char: h[p.index] ?? "",
-            isFocused: !t && f && p.index === h.length
+            char: p[u.index] ?? "",
+            isFocused: !i && v && u.index === p.length
           },
-          p.id
+          u.id
         ))
       ]
     }
   );
 }
-function Oe() {
+function Le() {
   const {
     email: e,
-    otpId: s,
-    otpEncryptionTargetBundle: a,
-    setOtpSession: t,
-    clearOtpSession: r,
-    goToStep: d,
-    config: i
-  } = R(), { mutateAsync: u, isPending: l } = J(), { mutateAsync: h, isPending: x } = he(), [f, N] = w(""), [k, v] = w(!1), [p, g] = w(60);
-  O(() => {
-    if (p <= 0) return;
-    const S = setInterval(() => {
-      g((T) => Math.max(0, T - 1));
+    otpId: r,
+    otpEncryptionTargetBundle: s,
+    setOtpSession: i,
+    clearOtpSession: n,
+    goToStep: a
+  } = S(), { mutateAsync: o, isPending: c } = F(), { mutateAsync: l, isPending: p } = le(), [h, v] = z(""), [b, f] = z(!1), [y, u] = z(60);
+  k(() => {
+    if (y <= 0) return;
+    const I = setInterval(() => {
+      u((O) => Math.max(0, O - 1));
     }, 1e3);
-    return () => clearInterval(S);
-  }, [p]);
-  const C = async () => {
-    var S, T;
-    if (!(!f.trim() || !s || !a)) {
-      v(!1);
+    return () => clearInterval(I);
+  }, [y]);
+  const x = async () => {
+    if (!(!h.trim() || !r || !s)) {
+      f(!1);
       try {
-        await h({
-          otpId: s,
-          code: f.trim(),
-          otpEncryptionTargetBundle: a
-        }), r(), d("authenticated"), (S = i == null ? void 0 : i.onSuccess) == null || S.call(i);
-      } catch (F) {
-        v(!0), (T = i == null ? void 0 : i.onError) == null || T.call(i, F);
+        await l({
+          otpId: r,
+          code: h.trim(),
+          otpEncryptionTargetBundle: s
+        }), n(), a("authenticated");
+      } catch {
+        f(!0);
       }
     }
-  }, y = (S) => {
-    N(S);
-  }, H = async () => {
-    if (!(!e || p > 0 || l))
+  }, g = (I) => {
+    v(I);
+  }, L = async () => {
+    if (!(!e || y > 0 || c))
       try {
-        const { otpId: S, otpEncryptionTargetBundle: T } = await u({ email: e });
-        t({
-          otpId: S,
-          otpEncryptionTargetBundle: T
-        }), g(60), v(!1);
+        const { otpId: I, otpEncryptionTargetBundle: O } = await o({ email: e });
+        i({
+          otpId: I,
+          otpEncryptionTargetBundle: O
+        }), u(60), f(!1);
       } catch {
-        v(!0);
+        f(!0);
       }
-  }, U = p <= 0 && !l;
-  return /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center zd:items-center", children: [
-      /* @__PURE__ */ c("div", { className: "zd:flex zd:flex-col zd:gap-4", children: [
-        /* @__PURE__ */ n(m, { className: "zd:text-h2 zd:text-center", children: "Enter verification code" }),
-        /* @__PURE__ */ c(m, { className: "zd:text-center", children: [
+  }, P = y <= 0 && !c;
+  return /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center zd:items-center", children: [
+      /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-4", children: [
+        /* @__PURE__ */ t(m, { className: "zd:text-h2 zd:text-center", children: "Enter verification code" }),
+        /* @__PURE__ */ d(m, { className: "zd:text-center", children: [
           "Enter the code from the email we sent to",
           " ",
-          /* @__PURE__ */ n(m, { className: "zd:text-solarOrange", children: e })
+          /* @__PURE__ */ t(m, { className: "zd:text-solarOrange", children: e })
         ] })
       ] }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ t(
         Re,
         {
-          onComplete: y,
-          onChange: () => v(!1),
-          disabled: x,
-          error: k,
+          onComplete: g,
+          onChange: () => f(!1),
+          disabled: p,
+          error: b,
           autoFocus: !0
         }
       ),
-      /* @__PURE__ */ n(
-        E,
+      /* @__PURE__ */ t(
+        w,
         {
           text: "Confirm code",
-          onClick: C,
-          disabled: !f.trim() || x
+          onClick: x,
+          disabled: !h.trim() || p
         }
       ),
-      /* @__PURE__ */ n("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ c(m, { className: "zd:text-center", children: [
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ d(m, { className: "zd:text-center", children: [
         "Did not get an email?",
         " ",
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            disabled: !U,
-            onClick: H,
+            disabled: !P,
+            onClick: L,
             className: "zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed",
-            children: U ? "Resend" : `Resend in ${p} ${p === 1 ? "second" : "seconds"}`
+            children: P ? "Resend" : `Resend in ${y} ${y === 1 ? "second" : "seconds"}`
           }
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ n(B, { className: "zd:self-center zd:pt-4 zd:pb-6" })
+    /* @__PURE__ */ t(T, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function Be({
+function Oe({
   termsAndConditionsUrl: e,
-  privacyPolicyUrl: s,
-  agreedToTerms: a,
-  setAgreedToTerms: t,
-  highlight: r = !1
+  privacyPolicyUrl: r,
+  agreedToTerms: s,
+  setAgreedToTerms: i,
+  highlight: n = !1
 }) {
-  return /* @__PURE__ */ c("div", { className: "zd:flex zd:flex-col zd:items-center zd:gap-5", children: [
-    !!(e || s) && /* @__PURE__ */ c(
+  return /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:items-center zd:gap-5", children: [
+    !!(e || r) && /* @__PURE__ */ d(
       "div",
       {
-        className: `zd:flex zd:flex-row zd:items-center zd:gap-2 zd:rounded-md zd:p-2 zd:transition-colors ${r ? "zd:border zd:border-negative" : "zd:border zd:border-transparent"}`,
+        className: `zd:flex zd:flex-row zd:items-center zd:gap-2 zd:rounded-md zd:p-2 zd:transition-colors ${n ? "zd:border zd:border-negative" : "zd:border zd:border-transparent"}`,
         children: [
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ t(
             "input",
             {
               type: "checkbox",
-              checked: a,
-              onChange: (i) => t(i.target.checked),
+              checked: s,
+              onChange: (o) => i(o.target.checked),
               className: "zd:cursor-pointer zd:[color-scheme:light]"
             }
           ),
-          /* @__PURE__ */ c(m, { className: "zd:flex-1", children: [
+          /* @__PURE__ */ d(m, { className: "zd:flex-1", children: [
             "I agree to the",
             " ",
-            e && /* @__PURE__ */ n(
+            e && /* @__PURE__ */ t(
               m,
               {
                 as: "a",
@@ -368,12 +364,12 @@ function Be({
                 children: "Terms & Conditions"
               }
             ),
-            e && s && " and ",
-            s && /* @__PURE__ */ n(
+            e && r && " and ",
+            r && /* @__PURE__ */ t(
               m,
               {
                 as: "a",
-                href: s,
+                href: r,
                 target: "_blank",
                 rel: "noopener noreferrer",
                 className: "zd:underline",
@@ -384,21 +380,17 @@ function Be({
         ]
       }
     ),
-    /* @__PURE__ */ n(B, {})
+    /* @__PURE__ */ t(T, {})
   ] });
 }
-const Me = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function j(e) {
-  return Me.test(e.trim());
-}
-const Ue = "" + new URL("blob.webm", import.meta.url).href;
-function je({ className: e }) {
-  return /* @__PURE__ */ n(
+const Be = "" + new URL("blob.webm", import.meta.url).href;
+function Ue({ className: e }) {
+  return /* @__PURE__ */ t(
     "video",
     {
       className: e,
       style: { aspectRatio: "1 / 1" },
-      src: Ue,
+      src: Be,
       autoPlay: !0,
       loop: !0,
       muted: !0,
@@ -408,286 +400,292 @@ function je({ className: e }) {
     }
   );
 }
-function _(e) {
-  return e instanceof Error ? e.name === "AbortError" || e.name === "NotAllowedError" ? !0 : e.message.toLowerCase().includes("oauth popup was closed") : !1;
+const V = se(null);
+function R() {
+  const e = oe(V);
+  if (!e)
+    throw new Error("SignUp.* components must be rendered inside <SignUp>");
+  return e;
 }
-function He() {
-  const { goToStep: e, setEmail: s, setOtpSession: a, config: t, enabledMethods: r } = R(), [d, i] = w(!1), [u, l] = w(!1), [h, x] = w(""), f = (t == null ? void 0 : t.emailAuthMethod) === "otp", { mutateAsync: N, isPending: k } = J(), { mutateAsync: v, isPending: p } = Y(), g = k || p, [C, y] = w(null), { mutateAsync: H, isPending: U } = pe({
-    mutation: {
-      onSuccess: async () => {
-        var o;
-        e("authenticated"), (o = t == null ? void 0 : t.onSuccess) == null || o.call(t);
-      },
-      onError: (o) => {
-        var z;
-        (z = t == null ? void 0 : t.onError) == null || z.call(t, o);
+function U(e) {
+  const { setAuthPending: r } = R();
+  k(() => (r(e), () => r(!1)), [e, r]);
+}
+const Me = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function B(e) {
+  return Me.test(e.trim());
+}
+function $() {
+  const { goToStep: e, setEmail: r, setOtpSession: s } = S(), {
+    authPending: i,
+    emailAuthMethod: n,
+    needsAgreement: a,
+    guardAgreement: o,
+    setError: c
+  } = R(), [l, p] = z(""), h = n === "otp", { mutateAsync: v, isPending: b } = F(), { mutateAsync: f, isPending: y } = W(), u = b || y;
+  U(u);
+  const x = async () => {
+    if (!(!l || i) && B(l) && o()) {
+      c(null);
+      try {
+        const g = h ? v : f, { otpId: L, otpEncryptionTargetBundle: P } = await g({
+          email: l
+        });
+        r(l), s({ otpId: L, otpEncryptionTargetBundle: P }), e(h ? "otp-input" : "email-verification");
+      } catch (g) {
+        c(
+          g instanceof Error ? g.message : "Failed to send verification code"
+        );
       }
     }
-  }), { mutate: S, isPending: T } = me({
-    mutation: {
-      onSuccess: () => {
-        var o;
-        e("authenticated"), (o = t == null ? void 0 : t.onSuccess) == null || o.call(t);
+  };
+  return /* @__PURE__ */ t(
+    Z,
+    {
+      iconName: "email",
+      placeholder: "Enter your email",
+      value: l,
+      onChange: (g) => p(g.target.value),
+      type: "email",
+      autoCapitalize: "none",
+      autoComplete: "email",
+      disabled: i,
+      variant: "listItemStyle",
+      onKeyDown: (g) => {
+        g.key === "Enter" && l && !i && x();
       },
-      onError: (o) => {
-        var z;
-        _(o) || y(o instanceof Error ? o.message : String(o)), (z = t == null ? void 0 : t.onError) == null || z.call(t, o);
-      }
+      children: u ? /* @__PURE__ */ t("div", { className: "zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center", children: /* @__PURE__ */ t("div", { className: "zd:w-5 zd:h-5 zd:border-2 zd:border-solarOrange zd:border-t-transparent zd:rounded-full zd:animate-spin" }) }) : /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          disabled: !B(l) || a,
+          className: `zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${B(l) && !a ? "zd:cursor-pointer" : "zd:cursor-not-allowed zd:opacity-50"}`,
+          onClick: () => x(),
+          children: /* @__PURE__ */ t(ee, { name: "chevronRight", className: "zd:text-greyScale" })
+        }
+      )
     }
-  }), { mutate: F, isPending: Q } = ze({
+  );
+}
+function G(e) {
+  return e instanceof Error ? e.name === "AbortError" || e.name === "NotAllowedError" ? !0 : e.message.toLowerCase().includes("oauth popup was closed") : !1;
+}
+function K() {
+  const { goToStep: e } = S(), { authPending: r, guardAgreement: s, setError: i } = R(), { mutateAsync: n, isPending: a } = ue({
     mutation: {
       onSuccess: () => {
-        var o;
-        e("authenticated"), (o = t == null ? void 0 : t.onSuccess) == null || o.call(t);
-      },
-      onError: (o) => {
-        var z;
-        _(o) || y(o instanceof Error ? o.message : String(o)), (z = t == null ? void 0 : t.onError) == null || z.call(t, o);
+        e("authenticated");
       }
     }
-  }), b = U || g || T || Q, L = !!(t != null && t.termsAndConditionsUrl || t != null && t.privacyPolicyUrl) && !d, Z = () => {
-    if (!b) {
-      if (L) {
-        l(!0);
-        return;
-      }
-      y(null), S();
-    }
-  }, ee = () => {
-    if (!b) {
-      if (L) {
-        l(!0);
-        return;
-      }
-      y(null), F();
-    }
-  }, te = async () => {
-    if (L) {
-      l(!0);
-      return;
-    }
-    y(null);
-    try {
-      await H({ provider: "google" });
-    } catch (o) {
-      const z = o instanceof Error ? o.message : String(o);
-      _(o) || y(z);
-    }
-  }, W = f ? async () => {
-    if (!(!h || b) && j(h)) {
-      if (L) {
-        l(!0);
-        return;
-      }
-      y(null);
-      try {
-        const { otpId: o, otpEncryptionTargetBundle: z } = await N({
-          email: h
-        });
-        s(h), a({ otpId: o, otpEncryptionTargetBundle: z }), e("otp-input");
-      } catch (o) {
-        y(
-          o instanceof Error ? o.message : "Failed to send verification code"
-        );
+  });
+  return U(a), /* @__PURE__ */ t(
+    _,
+    {
+      icon: /* @__PURE__ */ t(q, { name: "google" }),
+      title: "Google",
+      trailing: /* @__PURE__ */ t(te, {}),
+      disabled: r,
+      onClick: async () => {
+        if (!r && s()) {
+          i(null);
+          try {
+            await n({ provider: "google" });
+          } catch (c) {
+            G(c) || i(c instanceof Error ? c.message : String(c));
+          }
+        }
       }
     }
-  } : async () => {
-    if (!(!h || b) && j(h)) {
-      if (L) {
-        l(!0);
-        return;
-      }
-      y(null);
-      try {
-        const { otpId: o, otpEncryptionTargetBundle: z } = await v({
-          email: h
-        });
-        s(h), a({ otpId: o, otpEncryptionTargetBundle: z }), e("email-verification");
-      } catch (o) {
-        y(
-          o instanceof Error ? o.message : "Failed to send verification code"
-        );
-      }
+  );
+}
+function Y() {
+  const { goToStep: e } = S(), { authPending: r, guardAgreement: s, setError: i } = R(), n = {
+    onSuccess: () => {
+      e("authenticated");
+    },
+    onError: (h) => {
+      G(h) || i(h instanceof Error ? h.message : String(h));
     }
+  }, { mutate: a, isPending: o } = pe({ mutation: n }), { mutate: c, isPending: l } = he({
+    mutation: n
+  });
+  U(o || l);
+  const p = (h) => () => {
+    r || s() && (i(null), h());
   };
-  return C ? /* @__PURE__ */ n("div", { className: "zd:flex zd:items-center zd:justify-center zd:h-full", children: /* @__PURE__ */ c("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:max-w-md", children: [
-    /* @__PURE__ */ n(m, { className: "zd:text-h2 zd:text-center", children: "Error occurred" }),
-    /* @__PURE__ */ n(m, { className: "zd:text-center zd:text-red-500", children: C }),
-    /* @__PURE__ */ n(
-      E,
+  return /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ t(
+      w,
       {
-        action: "primary",
-        text: "Try again",
-        onClick: () => y(null)
+        action: "secondary",
+        text: "Create a passkey",
+        iconName: "key",
+        trailIcon: !0,
+        disabled: r,
+        onClick: p(() => a())
+      }
+    ),
+    /* @__PURE__ */ t(
+      w,
+      {
+        action: "secondary",
+        text: "Log in with passkey",
+        iconName: "key",
+        trailIcon: !0,
+        disabled: r,
+        onClick: p(() => c())
       }
     )
-  ] }) }) : /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-hidden", children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-center", children: [
-      /* @__PURE__ */ c("div", { className: "zd:px-4 zd:flex zd:flex-col zd:items-center", children: [
-        /* @__PURE__ */ n("div", { className: "zd:w-full zd:px-16 zd:py-4", children: /* @__PURE__ */ n(je, { className: "zd:w-full zd:pointer-events-none zd:select-none" }) }),
-        /* @__PURE__ */ n(m, { className: "zd:text-h2 zd:text-center", children: "Continue to your wallet" }),
-        /* @__PURE__ */ n(m, { className: "zd:mt-2 zd:text-center zd:text-greyScale/50", children: "Choose a sign-in method to proceed" })
-      ] }),
-      /* @__PURE__ */ c("div", { className: "zd:mt-6 zd:flex zd:flex-col zd:gap-4 zd:mb-4", children: [
-        r.includes("passkey") && /* @__PURE__ */ c(A, { children: [
-          /* @__PURE__ */ c("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
-            /* @__PURE__ */ n(
-              E,
-              {
-                action: "secondary",
-                text: "Create a passkey",
-                iconName: "key",
-                trailIcon: !0,
-                disabled: b,
-                onClick: Z
-              }
-            ),
-            /* @__PURE__ */ n(
-              E,
-              {
-                action: "secondary",
-                text: "Log in with passkey",
-                iconName: "key",
-                trailIcon: !0,
-                disabled: b,
-                onClick: ee
-              }
-            )
-          ] }),
-          /* @__PURE__ */ c("div", { className: "zd:flex zd:items-center zd:gap-3", children: [
-            /* @__PURE__ */ n("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" }),
-            /* @__PURE__ */ n(m, { className: "zd:text-body3", children: "or" }),
-            /* @__PURE__ */ n("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" })
-          ] })
-        ] }),
-        /* @__PURE__ */ c("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
-          r.includes("google") && /* @__PURE__ */ n(
-            $,
+  ] });
+}
+function J({
+  children: e,
+  termsAndConditionsUrl: r,
+  privacyPolicyUrl: s,
+  emailAuthMethod: i = "magicLink"
+}) {
+  const [n, a] = z(!1), [o, c] = z(!1), [l, p] = z(null), [h, v] = z(!1), f = !!(r || s) && !n, y = () => f ? (c(!0), !1) : !0;
+  return /* @__PURE__ */ d(
+    V.Provider,
+    {
+      value: {
+        authPending: h,
+        emailAuthMethod: i,
+        setAuthPending: v,
+        needsAgreement: f,
+        guardAgreement: y,
+        setError: p
+      },
+      children: [
+        l !== null && /* @__PURE__ */ t("div", { className: "zd:flex zd:items-center zd:justify-center zd:h-full", children: /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:max-w-md", children: [
+          /* @__PURE__ */ t(m, { className: "zd:text-h2 zd:text-center", children: "Error occurred" }),
+          /* @__PURE__ */ t(m, { className: "zd:text-center zd:text-red-500", children: l }),
+          /* @__PURE__ */ t(
+            w,
             {
-              icon: /* @__PURE__ */ n(D, { name: "google" }),
-              title: "Google",
-              trailing: /* @__PURE__ */ n(re, {}),
-              className: "zd:rounded-3xl",
-              disabled: b,
-              onClick: te
+              action: "primary",
+              text: "Try again",
+              onClick: () => p(null)
             }
-          ),
-          r.includes("email") && /* @__PURE__ */ n(
-            se,
-            {
-              iconName: "email",
-              placeholder: "Enter your email",
-              value: h,
-              onChange: (o) => x(o.target.value),
-              type: "email",
-              autoCapitalize: "none",
-              autoComplete: "email",
-              disabled: b,
-              variant: "listItemStyle",
-              containerClassName: "zd:rounded-3xl",
-              onKeyDown: (o) => {
-                o.key === "Enter" && h && !b && W();
-              },
-              children: g ? /* @__PURE__ */ n("div", { className: "zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center", children: /* @__PURE__ */ n("div", { className: "zd:w-5 zd:h-5 zd:border-2 zd:border-solarOrange zd:border-t-transparent zd:rounded-full zd:animate-spin" }) }) : /* @__PURE__ */ n(
-                "button",
+          )
+        ] }) }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: `zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-hidden${l !== null ? " zd:hidden" : ""}`,
+            children: [
+              /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-center", children: [
+                /* @__PURE__ */ d("div", { className: "zd:px-4 zd:flex zd:flex-col zd:items-center", children: [
+                  /* @__PURE__ */ t("div", { className: "zd:w-full zd:px-16 zd:py-4", children: /* @__PURE__ */ t(Ue, { className: "zd:w-full zd:pointer-events-none zd:select-none" }) }),
+                  /* @__PURE__ */ t(m, { className: "zd:text-h2 zd:text-center", children: "Continue to your wallet" }),
+                  /* @__PURE__ */ t(m, { className: "zd:mt-2 zd:text-center zd:text-greyScale/50", children: "Choose a sign-in method to proceed" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "zd:mt-6 zd:mb-4 zd:px-4 zd:flex zd:flex-col zd:gap-2", children: e })
+              ] }),
+              /* @__PURE__ */ t("div", { className: "zd:px-4", children: /* @__PURE__ */ t(
+                Oe,
                 {
-                  type: "button",
-                  disabled: !j(h) || L,
-                  className: `zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${j(h) && !L ? "zd:cursor-pointer" : "zd:cursor-not-allowed zd:opacity-50"}`,
-                  onClick: () => W(),
-                  children: /* @__PURE__ */ n(ie, { name: "chevronRight", className: "zd:text-greyScale" })
+                  termsAndConditionsUrl: r,
+                  privacyPolicyUrl: s,
+                  agreedToTerms: n,
+                  setAgreedToTerms: (u) => {
+                    a(u), u && c(!1);
+                  },
+                  highlight: o
                 }
-              )
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ n("div", { className: "zd:px-4", children: /* @__PURE__ */ n(
-      Be,
-      {
-        termsAndConditionsUrl: t == null ? void 0 : t.termsAndConditionsUrl,
-        privacyPolicyUrl: t == null ? void 0 : t.privacyPolicyUrl,
-        agreedToTerms: d,
-        setAgreedToTerms: (o) => {
-          i(o), o && l(!1);
-        },
-        highlight: u
-      }
-    ) })
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function X({ label: e = "or" }) {
+  return /* @__PURE__ */ d("div", { className: "zd:-mx-4 zd:my-2 zd:flex zd:items-center zd:gap-3", children: [
+    /* @__PURE__ */ t("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" }),
+    /* @__PURE__ */ t(m, { className: "zd:text-body3", children: e }),
+    /* @__PURE__ */ t("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" })
   ] });
 }
-function Fe() {
-  return typeof window > "u" ? null : new URLSearchParams(window.location.search).get("code");
+function je(e) {
+  return /* @__PURE__ */ d(J, { ...e, children: [
+    /* @__PURE__ */ t(Y, {}),
+    /* @__PURE__ */ t(X, {}),
+    /* @__PURE__ */ t(K, {}),
+    /* @__PURE__ */ t($, {})
+  ] });
 }
+const He = Object.assign(J, {
+  Default: je,
+  Passkey: Y,
+  Google: K,
+  Email: $,
+  Divider: X
+});
 function _e() {
-  const {
-    otpId: e,
-    otpEncryptionTargetBundle: s,
-    goToStep: a,
-    clearOtpSession: t,
-    config: r
-  } = R(), [d] = w(Fe), [i, u] = w(null), l = K(!1), { mutate: h, isPending: x } = fe({
+  return typeof window > "u" ? null : new URLSearchParams(window.location.search).get("code");
+}
+function qe() {
+  const { otpId: e, otpEncryptionTargetBundle: r, goToStep: s, clearOtpSession: i } = S(), [n] = z(_e), [a, o] = z(null), c = D(!1), { mutate: l, isPending: p } = me({
     mutation: {
-      onSuccess: async () => {
-        var f;
-        t(), a("authenticated"), (f = r == null ? void 0 : r.onSuccess) == null || f.call(r);
+      onSuccess: () => {
+        i(), s("authenticated");
       },
-      onError: (f) => {
-        var N;
-        u(f), (N = r == null ? void 0 : r.onError) == null || N.call(r, f);
+      onError: (h) => {
+        o(h);
       }
     }
   });
-  return O(() => {
-    if (!(l.current || !d)) {
-      if (l.current = !0, !e || !s) {
-        M(), a(null);
+  return k(() => {
+    if (!(c.current || !n)) {
+      if (c.current = !0, !e || !r) {
+        A(), s(null);
         return;
       }
-      h({ otpId: e, code: d, otpEncryptionTargetBundle: s });
+      l({ otpId: e, code: n, otpEncryptionTargetBundle: r });
     }
-  }, [e, s, d, h, a]), /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
-      !i && x && /* @__PURE__ */ n(P, { imageName: "loading", title: "Verifying Your Email", children: "Please wait while we securely connect your wallet." }),
-      !i && !d && !x && /* @__PURE__ */ c(A, { children: [
-        /* @__PURE__ */ c(P, { imageName: "error", title: "Invalid Link", children: [
+  }, [e, r, n, l, s]), /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
+      !a && p && /* @__PURE__ */ t(E, { imageName: "loading", title: "Verifying Your Email", children: "Please wait while we securely connect your wallet." }),
+      !a && !n && !p && /* @__PURE__ */ d(N, { children: [
+        /* @__PURE__ */ d(E, { imageName: "error", title: "Invalid Link", children: [
           "This verification link is invalid or incomplete.",
-          /* @__PURE__ */ n("br", {}),
+          /* @__PURE__ */ t("br", {}),
           "Please check your email and try again with the correct link."
         ] }),
-        /* @__PURE__ */ n(
-          E,
+        /* @__PURE__ */ t(
+          w,
           {
             action: "primary",
             onClick: () => {
-              M(), a("sign-up");
+              A(), s("sign-up");
             },
             text: "Choose another sign-in method"
           }
         )
       ] }),
-      i != null && /* @__PURE__ */ c(A, { children: [
-        /* @__PURE__ */ n(P, { imageName: "error", title: "Oops, something went wrong", children: "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request." }),
-        /* @__PURE__ */ n(
-          E,
+      a != null && /* @__PURE__ */ d(N, { children: [
+        /* @__PURE__ */ t(E, { imageName: "error", title: "Oops, something went wrong", children: "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request." }),
+        /* @__PURE__ */ t(
+          w,
           {
             action: "primary",
             onClick: () => {
-              M(), a("sign-up");
+              A(), s("sign-up");
             },
             text: "Choose another sign-in method"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ n(B, { className: "zd:self-center zd:pt-4 zd:pb-6" })
+    /* @__PURE__ */ t(T, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function qe() {
-  const { goToStep: e } = R(), { connect: s, connectors: a, isPending: t } = ue(), r = a.filter((i) => i.id !== "zerodev-wallet"), d = (i) => {
-    s(
-      { connector: i },
+function De() {
+  const { goToStep: e } = S(), { connect: r, connectors: s, isPending: i } = ce(), n = s.filter((o) => o.id !== "zerodev-wallet"), a = (o) => {
+    r(
+      { connector: o },
       {
         onSuccess: () => {
           e(null);
@@ -695,104 +693,107 @@ function qe() {
       }
     );
   };
-  return /* @__PURE__ */ c(A, { children: [
-    /* @__PURE__ */ c("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
-      /* @__PURE__ */ n(m, { className: "zd:text-h2 zd:text-center", children: "Select your wallet" }),
-      /* @__PURE__ */ n("div", { className: "zd:flex zd:flex-col zd:gap-2", children: r.length === 0 ? /* @__PURE__ */ n(m, { className: "zd:text-center", children: "No wallets detected. Install a browser wallet extension to continue." }) : r.map((i) => /* @__PURE__ */ n(
-        $,
+  return /* @__PURE__ */ d(N, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
+      /* @__PURE__ */ t(m, { className: "zd:text-h2 zd:text-center", children: "Select your wallet" }),
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-2", children: n.length === 0 ? /* @__PURE__ */ t(m, { className: "zd:text-center", children: "No wallets detected. Install a browser wallet extension to continue." }) : n.map((o) => /* @__PURE__ */ t(
+        _,
         {
-          title: i.name,
-          icon: i.icon ? /* @__PURE__ */ n(
+          title: o.name,
+          icon: o.icon ? /* @__PURE__ */ t(
             "img",
             {
-              src: i.icon,
+              src: o.icon,
               alt: "",
               className: "zd:w-6 zd:h-6"
             }
-          ) : /* @__PURE__ */ n(D, { name: "walletOutline" }),
-          disabled: t,
-          onClick: () => d(i),
+          ) : /* @__PURE__ */ t(q, { name: "walletOutline" }),
+          disabled: i,
+          onClick: () => a(o),
           className: "zd:rounded-3xl"
         },
-        i.uid
+        o.uid
       )) })
     ] }),
-    /* @__PURE__ */ n(B, { className: "zd:self-center zd:pt-4 zd:pb-6" })
+    /* @__PURE__ */ t(T, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
 const We = {
   "wallet-selection": "Choose your wallet"
 };
-function Ve() {
-  return /* @__PURE__ */ n("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ n(P, { imageName: "loading", title: "Authenticating...", children: "Please wait while we complete the OAuth authentication." }) });
+function Fe() {
+  return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(E, { imageName: "loading", title: "Authenticating...", children: "Please wait while we complete the OAuth authentication." }) });
 }
-function Ge() {
-  return /* @__PURE__ */ n("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ n(P, { imageName: "loading", title: "Passkey authentication", children: "Please authenticate with your passkey." }) });
+function Ve() {
+  return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(E, { imageName: "loading", title: "Passkey authentication", children: "Please authenticate with your passkey." }) });
 }
-function $e(e) {
+function $e(e, r) {
   switch (e) {
     case "sign-up":
-      return /* @__PURE__ */ n(He, {});
+      return r ? r() : /* @__PURE__ */ t(He.Default, {});
     case "email-verification":
-      return /* @__PURE__ */ n(Ee, {});
+      return /* @__PURE__ */ t(be, {});
     case "otp-input":
-      return /* @__PURE__ */ n(Oe, {});
+      return /* @__PURE__ */ t(Le, {});
     case "verifying-otp":
-      return /* @__PURE__ */ n(_e, {});
+      return /* @__PURE__ */ t(qe, {});
     case "oauth-in-progress":
-      return /* @__PURE__ */ n(Ve, {});
+      return /* @__PURE__ */ t(Fe, {});
     case "passkey-prompt":
-      return /* @__PURE__ */ n(Ge, {});
+      return /* @__PURE__ */ t(Ve, {});
     case "wallet-selection":
-      return /* @__PURE__ */ n(qe, {});
+      return /* @__PURE__ */ t(De, {});
     case "error":
-      return /* @__PURE__ */ n(Te, {});
+      return /* @__PURE__ */ t(ke, {});
     default:
       return null;
   }
 }
-function lt({
+function st({
   onClose: e,
-  size: s
+  size: r,
+  renderSignUp: s,
+  logo: i
 } = {}) {
-  const { step: a, goToStep: t, goBack: r, reset: d } = R(), i = I(X(), (x) => x.logo);
-  O(() => {
-    a === null && ke() && t("verifying-otp");
-  }, [a, t]);
-  const u = $e(a);
-  if (!u) return null;
-  const l = () => {
-    M(), d(), e == null || e();
-  }, h = a ? We[a] : void 0;
-  return /* @__PURE__ */ n(
-    ae,
+  const { step: n, goToStep: a, goBack: o, reset: c } = S();
+  k(() => {
+    n === null && Ee() && a("verifying-otp");
+  }, [n, a]);
+  const l = $e(n, s);
+  if (!l) return null;
+  const p = () => {
+    A(), c(), e == null || e();
+  }, h = n ? We[n] : void 0;
+  return /* @__PURE__ */ t(
+    ne,
     {
-      ...s && { size: s },
-      contentClassName: a === "sign-up" ? "zd:px-0" : void 0,
-      topNav: /* @__PURE__ */ n(
-        oe,
+      ...r && { size: r },
+      className: n === "sign-up" ? "zd:h-auto zd:max-h-202.5" : void 0,
+      contentClassName: n === "sign-up" ? "zd:px-0" : void 0,
+      topNav: /* @__PURE__ */ t(
+        re,
         {
-          ...r !== null && { onLeftButtonClick: r },
-          onRightButtonClick: l,
+          ...o !== null && { onLeftButtonClick: o },
+          onRightButtonClick: p,
           ...h && { title: h },
-          ...a === "sign-up" && {
+          ...n === "sign-up" && {
             ...i && { logo: i },
             className: "zd:px-4"
           }
         }
       ),
-      children: u
+      children: l
     }
   );
 }
-const q = "zerodev:auth:otpSession";
-function De() {
+const M = "zerodev:auth:otpSession";
+function Ge() {
   if (typeof window > "u") return null;
   try {
-    const e = window.localStorage.getItem(q);
+    const e = window.localStorage.getItem(M);
     if (!e) return null;
-    const s = JSON.parse(e);
-    return !(s != null && s.otpId) || !(s != null && s.otpEncryptionTargetBundle) ? null : s;
+    const r = JSON.parse(e);
+    return !(r != null && r.otpId) || !(r != null && r.otpEncryptionTargetBundle) ? null : r;
   } catch {
     return null;
   }
@@ -801,69 +802,63 @@ function Ke(e) {
   if (!(typeof window > "u"))
     try {
       window.localStorage.setItem(
-        q,
+        M,
         JSON.stringify(e)
       );
     } catch {
     }
 }
-function V() {
+function j() {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.removeItem(q);
+      window.localStorage.removeItem(M);
     } catch {
     }
 }
-const Ye = (e, s, a) => ({
+const Ye = (e, r, s) => ({
   auth: {
     // Initial state
     step: null,
     stepHistory: [],
-    enabledMethods: [],
     email: null,
     otpId: null,
     otpEncryptionTargetBundle: null,
-    config: null,
     // Actions
-    initialize: (t) => {
-      const r = De();
-      e((d) => ({
+    initialize: () => {
+      const i = Ge();
+      i && e((n) => ({
         auth: {
-          ...d.auth,
-          config: t,
-          enabledMethods: t.enabledMethods,
-          ...r && {
-            otpId: r.otpId,
-            otpEncryptionTargetBundle: r.otpEncryptionTargetBundle
-          }
+          ...n.auth,
+          otpId: i.otpId,
+          otpEncryptionTargetBundle: i.otpEncryptionTargetBundle
         }
       }));
     },
-    goToStep: (t) => {
-      e((r) => ({
+    goToStep: (i) => {
+      e((n) => ({
         auth: {
-          ...r.auth,
-          step: t,
-          stepHistory: r.auth.step === null ? r.auth.stepHistory : [...r.auth.stepHistory, r.auth.step]
+          ...n.auth,
+          step: i,
+          stepHistory: n.auth.step === null ? n.auth.stepHistory : [...n.auth.stepHistory, n.auth.step]
         }
       }));
     },
     goBack: () => {
-      const { auth: t } = s();
-      if (t.stepHistory.length === 0) return;
-      const r = [...t.stepHistory], d = r.pop();
-      e((i) => ({
+      const { auth: i } = r();
+      if (i.stepHistory.length === 0) return;
+      const n = [...i.stepHistory], a = n.pop();
+      e((o) => ({
         auth: {
-          ...i.auth,
-          step: d,
-          stepHistory: r
+          ...o.auth,
+          step: a,
+          stepHistory: n
         }
       }));
     },
     reset: () => {
-      V(), e((t) => ({
+      j(), e((i) => ({
         auth: {
-          ...t.auth,
+          ...i.auth,
           step: null,
           stepHistory: [],
           email: null,
@@ -872,95 +867,93 @@ const Ye = (e, s, a) => ({
         }
       }));
     },
-    setEmail: (t) => {
-      e((r) => ({
+    setEmail: (i) => {
+      e((n) => ({
         auth: {
-          ...r.auth,
-          email: t
+          ...n.auth,
+          email: i
         }
       }));
     },
-    setOtpSession: ({ otpId: t, otpEncryptionTargetBundle: r }) => {
-      Ke({ otpId: t, otpEncryptionTargetBundle: r }), e((d) => ({
+    setOtpSession: ({ otpId: i, otpEncryptionTargetBundle: n }) => {
+      Ke({ otpId: i, otpEncryptionTargetBundle: n }), e((a) => ({
         auth: {
-          ...d.auth,
-          otpId: t,
-          otpEncryptionTargetBundle: r
+          ...a.auth,
+          otpId: i,
+          otpEncryptionTargetBundle: n
         }
       }));
     },
     clearOtpSession: () => {
-      V(), e((t) => ({
+      j(), e((i) => ({
         auth: {
-          ...t.auth,
+          ...i.auth,
           otpId: null,
           otpEncryptionTargetBundle: null
         }
       }));
     }
   }
-}), Je = (e = {}) => de()(
-  xe((s, a, t) => ({
+}), Je = () => ae()(
+  ze((e, r, s) => ({
     pendingRequests: [],
     userConfirmationListenerActive: !1,
-    logo: e.logo ?? null,
-    addPendingRequest: (r) => s((d) => ({
-      pendingRequests: [...d.pendingRequests, r]
+    addPendingRequest: (i) => e((n) => ({
+      pendingRequests: [...n.pendingRequests, i]
     })),
-    removePendingRequest: (r) => s((d) => ({
-      pendingRequests: d.pendingRequests.filter((i) => i.id !== r)
+    removePendingRequest: (i) => e((n) => ({
+      pendingRequests: n.pendingRequests.filter((a) => a.id !== i)
     })),
-    clearPendingRequests: () => s({ pendingRequests: [] }),
-    setUserConfirmationListenerActive: (r) => s({ userConfirmationListenerActive: r }),
-    ...Ye(s, a)
+    clearPendingRequests: () => e({ pendingRequests: [] }),
+    setUserConfirmationListenerActive: (i) => e({ userConfirmationListenerActive: i }),
+    ...Ye(e, r)
   }))
 );
 function Xe(e) {
-  return new Promise((s, a) => {
-    const t = e.subscribe(
-      (r) => r.auth.step,
-      (r) => {
-        r === "authenticated" ? (t(), s()) : r === null && (t(), a(new Error("Auth flow dismissed")));
+  return new Promise((r, s) => {
+    const i = e.subscribe(
+      (n) => n.auth.step,
+      (n) => {
+        n === "authenticated" ? (i(), r()) : n === null && (i(), s(new Error("Auth flow dismissed")));
       }
     );
   });
 }
-function dt(e) {
-  var t, r;
-  const s = ge(e), a = Je({ logo: (t = e.config) == null ? void 0 : t.logo });
-  return (r = e.config) != null && r.auth && a.getState().auth.initialize(e.config.auth), (d) => {
-    const i = s(d);
+function ot(e) {
+  const r = fe(e), s = Je();
+  return (i) => {
+    const n = r(i);
     return {
-      ...i,
-      async connect(u) {
-        var l;
+      ...n,
+      async connect(a) {
         try {
-          return await i.connect(u);
-        } catch (h) {
-          if (u != null && u.isReconnecting || !((l = e.config) != null && l.auth) || !(h instanceof ye))
-            throw h;
-          if (a.getState().auth.step !== null)
+          return await n.connect(a);
+        } catch (o) {
+          if (a != null && a.isReconnecting || !(o instanceof ge))
+            throw o;
+          if (s.getState().auth.step !== null)
             throw new Error("Auth flow already in progress");
-          return a.getState().auth.goToStep("sign-up"), await Xe(a), i.connect(u);
+          return s.getState().auth.goToStep("sign-up"), await Xe(s), n.connect(a);
         }
       },
       async disconnect() {
-        var u, l;
-        await ((u = i.disconnect) == null ? void 0 : u.call(i)), (l = e.config) != null && l.auth && a.getState().auth.reset();
+        var a;
+        await ((a = n.disconnect) == null ? void 0 : a.call(n)), s.getState().auth.reset();
       },
       async setup() {
-        var u;
-        await ((u = i.setup) == null ? void 0 : u.call(i)), typeof window > "u";
+        var a;
+        await ((a = n.setup) == null ? void 0 : a.call(n)), !(typeof window > "u") && s.getState().auth.initialize();
       },
       getKitStore() {
-        return a;
+        return s;
       }
     };
   };
 }
 export {
-  lt as AuthFlow,
-  R as useAuth,
-  dt as zeroDevWallet
+  st as ConnectWallet,
+  He as SignUp,
+  S as useAuth,
+  ot as zeroDevWallet
 };
 //# sourceMappingURL=index.mjs.map