@zerodev/wallet-react-ui 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -1,45 +1,45 @@
-import { jsxs as a, jsx as t, Fragment as b } from "react/jsx-runtime";
-import { useId as D, useState as x, useEffect as P, useMemo as ie, useRef as K } from "react";
-import { useStore as O, create as se } from "zustand";
-import { cn as R, IconButton as q, Text as h, Icon as X, Button as C, Wrapper as de, ListItem as Y, Input as ae } from "@zerodev/react-ui";
-import { useConfig as le, useConnect as ce } from "wagmi";
-import { useSendMagicLink as J, useSendOTP as Q, useVerifyOTP as ue, useAuthenticateOAuth as pe, useRegisterPasskey as fe, useLoginPasskey as he, useVerifyMagicLink as ze, zeroDevWallet as me, NotAuthenticatedError as ge } from "@zerodev/wallet-react";
-import { subscribeWithSelector as ye } from "zustand/middleware";
+import { jsxs as d, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { useId as V, useState as w, useEffect as P, useMemo as re, useRef as K } from "react";
+import { useStore as O, create as ie } from "zustand";
+import { cn as R, IconButton as q, Text as h, ZeroDevLogo as se, Button as C, Wrapper as ae, ListItem as X, Input as de, Icon as le } from "@zerodev/react-ui";
+import { useConfig as ce, useConnect as ue } from "wagmi";
+import { useSendMagicLink as Y, useSendOTP as J, useVerifyOTP as pe, useAuthenticateOAuth as fe, useRegisterPasskey as he, useLoginPasskey as ze, useVerifyMagicLink as me, zeroDevWallet as ge, NotAuthenticatedError as ye } from "@zerodev/wallet-react";
+import { subscribeWithSelector as xe } from "zustand/middleware";
 const Z = 52;
-function xe({
+function we({
   onBack: e,
-  onClose: o,
-  title: i,
+  onClose: i,
+  title: r,
   logo: n,
-  className: r
+  className: o
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: R(
         "zd:absolute zd:top-4 zd:left-0 zd:right-0 zd:flex zd:flex-row zd:items-center zd:justify-between",
-        r
+        o
       ),
-      style: { height: Z },
+      style: { height: `calc(${Z / 4} * var(--zd-spacing))` },
       children: [
         e ? /* @__PURE__ */ t(q, { iconName: "chevronLeft", onClick: e }) : /* @__PURE__ */ t("div", { className: "zd:h-13 zd:w-13" }),
         n && /* @__PURE__ */ t("div", { className: "zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none", children: n }),
-        i && /* @__PURE__ */ t("div", { className: "zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none", children: /* @__PURE__ */ t(h, { className: "zd:text-body1", children: i }) }),
-        /* @__PURE__ */ t(q, { iconName: "x", onClick: o })
+        r && /* @__PURE__ */ t("div", { className: "zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none", children: /* @__PURE__ */ t(h, { className: "zd:text-body1", children: r }) }),
+        /* @__PURE__ */ t(q, { iconName: "x", onClick: i })
       ]
     }
   );
 }
-function we({
+function ve({
   layer: e,
-  rect: o
+  rect: i
 }) {
-  const { id: i, matrix: n, fillOpacity: r, stops: c } = e;
-  return /* @__PURE__ */ a(b, { children: [
+  const { id: r, matrix: n, fillOpacity: o, stops: c } = e;
+  return /* @__PURE__ */ d(b, { children: [
     /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t(
       "radialGradient",
       {
-        id: i,
+        id: r,
         cx: "0",
         cy: "0",
         r: "1",
@@ -59,24 +59,24 @@ function we({
     /* @__PURE__ */ t(
       "rect",
       {
-        x: o.x,
-        y: o.y,
-        width: o.width,
-        height: o.height,
-        fill: `url(#${i})`,
-        fillOpacity: r
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height,
+        fill: `url(#${r})`,
+        fillOpacity: o
       }
     )
   ] });
 }
-const ve = "-6 -6 412 812";
-function Ne() {
+const Ne = "-6 -6 412 812";
+function Se() {
   return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none", children: /* @__PURE__ */ t(
     "svg",
     {
       width: "100%",
       height: "100%",
-      viewBox: ve,
+      viewBox: Ne,
       preserveAspectRatio: "none",
       role: "img",
       "aria-label": "Decorative gradient background",
@@ -84,8 +84,8 @@ function Ne() {
     }
   ) });
 }
-function Se() {
-  const e = D(), o = [
+function Ee() {
+  const e = V(), i = [
     {
       // (CSS #6) blue → top-right. x-radius widened so the lobe reaches further
       // left; y-radius kept short so it stays up top and doesn't bleed into the
@@ -151,7 +151,7 @@ function Se() {
       ]
     }
   ];
-  return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ d(
     "svg",
     {
       width: "100%",
@@ -160,15 +160,15 @@ function Se() {
       preserveAspectRatio: "none",
       role: "presentation",
       children: [
-        o.map((i) => /* @__PURE__ */ t(
-          we,
+        i.map((r) => /* @__PURE__ */ t(
+          ve,
           {
-            layer: i,
+            layer: r,
             rect: { x: 0, y: 0, width: 400, height: 800 }
           },
-          i.id
+          r.id
         )),
-        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ a(
+        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ d(
           "linearGradient",
           {
             id: `${e}-vfade`,
@@ -196,7 +196,7 @@ function Se() {
             fill: `url(#${e}-vfade)`
           }
         ),
-        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ a(
+        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ d(
           "linearGradient",
           {
             id: `${e}-bluefade`,
@@ -227,8 +227,8 @@ function Se() {
     }
   ) });
 }
-function Ee() {
-  const e = D(), o = [
+function be() {
+  const e = V(), i = [
     {
       id: `${e}-g6`,
       // (CSS #6) blue, top-right
@@ -304,7 +304,7 @@ function Ee() {
       ]
     }
   ];
-  return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ d(
     "svg",
     {
       width: "100%",
@@ -313,78 +313,94 @@ function Ee() {
       role: "presentation",
       children: [
         /* @__PURE__ */ t("rect", { width: "100%", height: "100%", fill: "#130E0B" }),
-        /* @__PURE__ */ t("defs", { children: o.map((i) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("defs", { children: i.map((r) => /* @__PURE__ */ t(
           "radialGradient",
           {
-            id: i.id,
-            cx: `${i.cx / i.rx * 100}%`,
-            cy: `${i.cy / i.ry * 100}%`,
+            id: r.id,
+            cx: `${r.cx / r.rx * 100}%`,
+            cy: `${r.cy / r.ry * 100}%`,
             r: "100%",
             gradientUnits: "objectBoundingBox",
-            gradientTransform: `scale(${i.rx}, ${i.ry})`,
-            children: i.stops.map((n, r) => /* @__PURE__ */ t(
+            gradientTransform: `scale(${r.rx}, ${r.ry})`,
+            children: r.stops.map((n, o) => /* @__PURE__ */ t(
               "stop",
               {
                 offset: n.offset,
                 stopColor: n.color,
                 stopOpacity: n.opacity
               },
-              n.color + r.toString()
+              n.color + o.toString()
             ))
           },
-          i.id
+          r.id
         )) }),
-        o.map((i) => /* @__PURE__ */ t(
+        i.map((r) => /* @__PURE__ */ t(
           "rect",
           {
             width: "100%",
             height: "100%",
-            fill: `url(#${i.id})`
+            fill: `url(#${r.id})`
           },
-          `${i.id}-rect`
+          `${r.id}-rect`
         ))
       ]
     }
   ) });
 }
-const be = Z + 16;
-function Ce({
+const Ce = Z + 16;
+function ke({
   children: e,
-  className: o,
-  contentClassName: i,
-  style: n,
-  topNav: r
+  className: i,
+  contentClassName: r,
+  size: n = "lg",
+  style: o,
+  topNav: c
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     "div",
     {
+      "data-zd-size": n,
       className: R(
-        "zd:flex zd:flex-col zd:overflow-hidden zd:text-left",
-        "zd:fixed zd:inset-0 zd:z-50 zd:w-screen zd:h-[100dvh] zd:rounded-[36px]",
-        "zd:sm:relative zd:sm:z-auto zd:sm:w-100 zd:sm:max-w-full zd:sm:h-[810px] zd:sm:max-h-[100dvh]",
-        o
+        // 400×810 by default, but never taller/wider than the parent — a
+        // consumer wrapper with its own size caps the Screen (max-w/h-full =
+        // 100% of the parent). overflow-hidden clips the frame to its rounded
+        // border ring; content scrolls in the inner div below.
+        "zd:relative zd:flex zd:flex-col zd:text-left",
+        // w-100 = 400px, h-202.5 = 810px at density 1; both compile to
+        // calc(var(--zd-spacing) * N), so they scale with the size variants.
+        // rounded-[38px] = inner card radius (32px) + the 6px border-ring gap,
+        // so the ring has a uniform width — equal inner/outer radii would make
+        // the corners read thicker than the sides.
+        "zd:w-100 zd:h-202.5 zd:max-w-full zd:max-h-full zd:overflow-hidden zd:rounded-[38px]",
+        i
       ),
-      style: n,
+      style: o,
       children: [
-        /* @__PURE__ */ t(Ee, {}),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ t(be, {}),
+        /* @__PURE__ */ d(
           "div",
           {
             className: R(
+              // m-1.5 = calc(var(--zd-spacing) * 1.5) = 6px at density 1, so the
+              // gradient border ring thins with the size variants. (Corner radii
+              // stay fixed, so at smaller sizes the ring is marginally non-uniform
+              // at the corners — a minor cosmetic trade-off.)
               "zd:flex zd:flex-1 zd:flex-col zd:m-1.5 zd:px-4 zd:overflow-hidden zd:rounded-4xl zd:relative",
-              i
+              r
             ),
             style: { clipPath: "inset(0 round 32px)" },
             children: [
-              /* @__PURE__ */ t(Ne, {}),
               /* @__PURE__ */ t(Se, {}),
-              /* @__PURE__ */ a("div", { className: "zd:relative zd:z-10 zd:flex zd:flex-1 zd:flex-col zd:min-h-0", children: [
-                r,
+              /* @__PURE__ */ t(Ee, {}),
+              /* @__PURE__ */ d("div", { className: "zd:relative zd:z-10 zd:flex zd:flex-1 zd:flex-col zd:min-h-0", children: [
+                c,
                 /* @__PURE__ */ t(
                   "div",
                   {
                     className: "zd:flex zd:flex-1 zd:flex-col zd:min-h-0 zd:overflow-y-auto zd:overflow-x-hidden",
-                    style: { paddingTop: `${be}px` },
+                    style: {
+                      paddingTop: `calc(${Ce / 4} * var(--zd-spacing))`
+                    },
                     children: e
                   }
                 )
@@ -396,19 +412,19 @@ function Ce({
     }
   );
 }
-const ke = "" + new URL("error.webp", import.meta.url).href, Ae = "" + new URL("loading.webp", import.meta.url).href, Oe = "" + new URL("send.webp", import.meta.url).href, Te = "" + new URL("success.webp", import.meta.url).href, Be = {
-  error: ke,
-  loading: Ae,
-  send: Oe,
-  success: Te
+const Ae = "" + new URL("error.webp", import.meta.url).href, Oe = "" + new URL("loading.webp", import.meta.url).href, Te = "" + new URL("send.webp", import.meta.url).href, Be = "" + new URL("success.webp", import.meta.url).href, Ie = {
+  error: Ae,
+  loading: Oe,
+  send: Te,
+  success: Be
 };
 function I({
   imageName: e,
-  title: o,
-  children: i,
+  title: i,
+  children: r,
   className: n
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: R("zd:flex zd:flex-col zd:gap-8 zd:items-center", n),
@@ -416,39 +432,39 @@ function I({
         /* @__PURE__ */ t(
           "img",
           {
-            src: Be[e],
+            src: Ie[e],
             alt: e,
             className: "zd:w-[118px] zd:h-[118px] zd:bg-transparent"
           }
         ),
-        /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:items-center", children: [
-          /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center zd:whitespace-pre-wrap", children: o }),
-          /* @__PURE__ */ t(h, { className: "zd:text-center zd:whitespace-pre-wrap", children: i })
+        /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:items-center", children: [
+          /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center zd:whitespace-pre-wrap", children: i }),
+          /* @__PURE__ */ t(h, { className: "zd:text-center zd:whitespace-pre-wrap", children: r })
         ] })
       ]
     }
   );
 }
-function ee() {
-  const o = le().connectors.find((i) => i.id === "zerodev-wallet");
-  if (!o || !("getKitStore" in o))
+function Q() {
+  const i = ce().connectors.find((r) => r.id === "zerodev-wallet");
+  if (!i || !("getKitStore" in i))
     throw new Error("useKitStore must be used with the zeroDevWallet connector");
-  return o.getKitStore();
+  return i.getKitStore();
 }
 function F() {
-  const e = ee(), o = O(e, (l) => l.auth.step), i = O(e, (l) => l.auth.stepHistory), n = O(e, (l) => l.auth.email), r = O(e, (l) => l.auth.otpId), c = O(
+  const e = Q(), i = O(e, (l) => l.auth.step), r = O(e, (l) => l.auth.stepHistory), n = O(e, (l) => l.auth.email), o = O(e, (l) => l.auth.otpId), c = O(
     e,
     (l) => l.auth.otpEncryptionTargetBundle
   ), s = O(e, (l) => l.auth.enabledMethods), u = O(e, (l) => l.auth.config);
   return {
-    step: o,
+    step: i,
     email: n,
-    otpId: r,
+    otpId: o,
     otpEncryptionTargetBundle: c,
     enabledMethods: s,
     config: u,
     goToStep: e.getState().auth.goToStep,
-    goBack: i.length > 0 ? e.getState().auth.goBack : null,
+    goBack: r.length > 0 ? e.getState().auth.goBack : null,
     reset: e.getState().auth.reset,
     setEmail: e.getState().auth.setEmail,
     setOtpSession: e.getState().auth.setOtpSession,
@@ -457,9 +473,9 @@ function F() {
 }
 function L({
   className: e,
-  style: o
+  style: i
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: R(
@@ -469,30 +485,31 @@ function L({
       children: [
         /* @__PURE__ */ t(h, { children: "Powered by" }),
         /* @__PURE__ */ t(
-          X,
+          se,
           {
-            name: "zerodevLogo",
-            className: "zd:h-[18px] zd:w-auto",
-            style: o
+            variant: "lockup",
+            tone: "black",
+            className: "zd:h-4.5 zd:w-auto",
+            style: i
           }
         )
       ]
     }
   );
 }
-function Ie() {
-  const { email: e, setOtpSession: o } = F(), { mutateAsync: i, isPending: n } = J(), [r, c] = x(60), s = r <= 0 && !n;
+function Fe() {
+  const { email: e, setOtpSession: i } = F(), { mutateAsync: r, isPending: n } = Y(), [o, c] = w(60), s = o <= 0 && !n;
   return P(() => {
-    if (r <= 0) return;
+    if (o <= 0) return;
     const l = setInterval(() => {
       c((p) => Math.max(0, p - 1));
     }, 1e3);
     return () => {
       clearInterval(l);
     };
-  }, [r]), /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
-      /* @__PURE__ */ a(
+  }, [o]), /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
+      /* @__PURE__ */ d(
         I,
         {
           imageName: "send",
@@ -508,7 +525,7 @@ function Ie() {
           ]
         }
       ),
-      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ d(h, { className: "zd:text-center", children: [
         "Did not get an email?",
         " ",
         /* @__PURE__ */ t(
@@ -519,15 +536,15 @@ function Ie() {
             onClick: async () => {
               if (!(!e || !s))
                 try {
-                  const { otpId: l, otpEncryptionTargetBundle: p } = await i({
+                  const { otpId: l, otpEncryptionTargetBundle: p } = await r({
                     email: e
                   });
-                  o({ otpId: l, otpEncryptionTargetBundle: p }), c(60);
+                  i({ otpId: l, otpEncryptionTargetBundle: p }), c(60);
                 } catch {
                 }
             },
             className: "zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed",
-            children: s ? "Resend" : `Resend in ${r} ${r === 1 ? "second" : "seconds"}`
+            children: s ? "Resend" : `Resend in ${o} ${o === 1 ? "second" : "seconds"}`
           }
         )
       ] }) })
@@ -535,7 +552,7 @@ function Ie() {
     /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function Fe() {
+function Pe() {
   return typeof window > "u" ? !1 : new URLSearchParams(window.location.search).has("code");
 }
 function $() {
@@ -543,82 +560,82 @@ function $() {
   const e = new URL(window.location.href);
   e.searchParams.has("code") && (e.searchParams.delete("code"), window.history.replaceState(null, "", e.toString()));
 }
-function Pe({
+function Re({
   title: e = "Oops, something went wrong",
-  message: o = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
-  showRetry: i = !1,
+  message: i = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
+  showRetry: r = !1,
   showChooseAnother: n = !0
 }) {
-  const { goToStep: r, goBack: c, reset: s } = F();
-  return /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
-      /* @__PURE__ */ t(I, { imageName: "error", title: e, children: o }),
-      /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-1", children: [
-        i && /* @__PURE__ */ t(C, { action: "primary", text: "Try again", onClick: c ?? (() => r("sign-up")) }),
+  const { goToStep: o, goBack: c, reset: s } = F();
+  return /* @__PURE__ */ d(b, { 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(I, { imageName: "error", title: e, children: i }),
+      /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:gap-1", children: [
+        r && /* @__PURE__ */ t(C, { action: "primary", text: "Try again", onClick: c ?? (() => o("sign-up")) }),
         n && /* @__PURE__ */ t(
           C,
           {
-            action: i ? "secondary" : "primary",
+            action: r ? "secondary" : "primary",
             onClick: () => {
-              $(), r("sign-up");
+              $(), o("sign-up");
             },
             text: "Choose another sign-in method"
           }
         ),
-        !i && !n && /* @__PURE__ */ t(C, { action: "primary", text: "Start over", onClick: s })
+        !r && !n && /* @__PURE__ */ t(C, { action: "primary", text: "Start over", onClick: s })
       ] })
     ] }),
     /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-const Re = 4, Le = 8, $e = 6;
-function Ue(e) {
-  return Math.max(Re, Math.min(Le, e));
+const Le = 4, $e = 8, Ue = 6;
+function Me(e) {
+  return Math.max(Le, Math.min($e, e));
 }
-function Me({ char: e, isFocused: o }) {
+function je({ char: e, isFocused: i }) {
   return /* @__PURE__ */ t(
-    de,
+    ae,
     {
       "data-testid": "code-input-box",
-      "data-active": o || void 0,
+      "data-active": i || void 0,
       className: R(
         "zd:h-16 zd:w-14 zd:rounded-lg zd:flex zd:items-center zd:justify-center",
-        o && "zd:border-[1.5px] zd:border-greyScale"
+        i && "zd:border-[1.5px] zd:border-greyScale"
       ),
       children: /* @__PURE__ */ t(h, { className: "zd:text-h2", children: e })
     }
   );
 }
-function je({
+function _e({
   onChange: e,
-  onComplete: o,
-  disabled: i = !1,
+  onComplete: i,
+  disabled: r = !1,
   error: n = !1,
-  autoFocus: r = !1,
-  length: c = $e,
+  autoFocus: o = !1,
+  length: c = Ue,
   "data-testid": s
 }) {
-  const u = Ue(c), l = ie(
+  const u = Me(c), l = re(
     () => Array.from({ length: u }, (f, g) => ({
       id: `char-${g}`,
       index: g
     })),
     [u]
-  ), [p, w] = x(""), [m, N] = x(!1), k = K(null);
+  ), [p, x] = w(""), [m, N] = w(!1), k = K(null);
   P(() => {
     var f;
-    r && !i && ((f = k.current) == null || f.focus());
-  }, [r, i]), P(() => {
-    w((f) => f.slice(0, u));
+    o && !r && ((f = k.current) == null || f.focus());
+  }, [o, r]), P(() => {
+    x((f) => f.slice(0, u));
   }, [u]);
   const S = (f) => {
     const g = f.slice(0, u).toUpperCase();
-    w(g), e == null || e(g), g.length === u && setTimeout(() => {
+    x(g), e == null || e(g), g.length === u && setTimeout(() => {
       var T;
-      o == null || o(g), (T = k.current) == null || T.blur();
+      i == null || i(g), (T = k.current) == null || T.blur();
     }, 0);
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
@@ -627,7 +644,7 @@ function je({
         var f;
         return (f = k.current) == null ? void 0 : f.focus();
       },
-      disabled: i,
+      disabled: r,
       "data-testid": s,
       children: [
         /* @__PURE__ */ t(
@@ -639,14 +656,14 @@ function je({
             onFocus: () => N(!0),
             onBlur: () => N(!1),
             maxLength: u,
-            disabled: i,
+            disabled: r,
             className: "zd:absolute zd:opacity-0 zd:pointer-events-none",
             style: { position: "absolute", opacity: 0 },
             "aria-label": "Verification code"
           }
         ),
         l.map((f) => /* @__PURE__ */ t(
-          Me,
+          je,
           {
             char: p[f.index] ?? "",
             isFocused: !n && m && f.index === p.length
@@ -657,16 +674,16 @@ function je({
     }
   );
 }
-function _e() {
+function He() {
   const {
     email: e,
-    otpId: o,
-    otpEncryptionTargetBundle: i,
+    otpId: i,
+    otpEncryptionTargetBundle: r,
     setOtpSession: n,
-    clearOtpSession: r,
+    clearOtpSession: o,
     goToStep: c,
     config: s
-  } = F(), { mutateAsync: u, isPending: l } = Q(), { mutateAsync: p, isPending: w } = ue(), [m, N] = x(""), [k, S] = x(!1), [f, g] = x(60);
+  } = F(), { mutateAsync: u, isPending: l } = J(), { mutateAsync: p, isPending: x } = pe(), [m, N] = w(""), [k, S] = w(!1), [f, g] = w(60);
   P(() => {
     if (f <= 0) return;
     const v = setInterval(() => {
@@ -676,14 +693,14 @@ function _e() {
   }, [f]);
   const T = async () => {
     var v, A;
-    if (!(!m.trim() || !o || !i)) {
+    if (!(!m.trim() || !i || !r)) {
       S(!1);
       try {
         await p({
-          otpId: o,
+          otpId: i,
           code: m.trim(),
-          otpEncryptionTargetBundle: i
-        }), r(), c("authenticated"), (v = s == null ? void 0 : s.onSuccess) == null || v.call(s);
+          otpEncryptionTargetBundle: r
+        }), o(), c("authenticated"), (v = s == null ? void 0 : s.onSuccess) == null || v.call(s);
       } catch (_) {
         S(!0), (A = s == null ? void 0 : s.onError) == null || A.call(s, _);
       }
@@ -702,22 +719,22 @@ function _e() {
         S(!0);
       }
   }, U = f <= 0 && !l;
-  return /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center zd:items-center", children: [
-      /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4", children: [
+  return /* @__PURE__ */ d(b, { 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(h, { className: "zd:text-h2 zd:text-center", children: "Enter verification code" }),
-        /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
+        /* @__PURE__ */ d(h, { className: "zd:text-center", children: [
           "Enter the code from the email we sent to",
           " ",
           /* @__PURE__ */ t(h, { className: "zd:text-solarOrange", children: e })
         ] })
       ] }),
       /* @__PURE__ */ t(
-        je,
+        _e,
         {
           onComplete: y,
           onChange: () => S(!1),
-          disabled: w,
+          disabled: x,
           error: k,
           autoFocus: !0
         }
@@ -727,10 +744,10 @@ function _e() {
         {
           text: "Confirm code",
           onClick: T,
-          disabled: !m.trim() || w
+          disabled: !m.trim() || x
         }
       ),
-      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ d(h, { className: "zd:text-center", children: [
         "Did not get an email?",
         " ",
         /* @__PURE__ */ t(
@@ -748,29 +765,29 @@ function _e() {
     /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function He({
+function Ge({
   termsAndConditionsUrl: e,
-  privacyPolicyUrl: o,
-  agreedToTerms: i,
+  privacyPolicyUrl: i,
+  agreedToTerms: r,
   setAgreedToTerms: n,
-  highlight: r = !1
+  highlight: o = !1
 }) {
-  return /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:items-center zd:gap-5", children: [
-    !!(e || o) && /* @__PURE__ */ a(
+  return /* @__PURE__ */ d("div", { className: "zd:flex zd:flex-col zd:items-center zd:gap-5", children: [
+    !!(e || i) && /* @__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 ${o ? "zd:border zd:border-negative" : "zd:border zd:border-transparent"}`,
         children: [
           /* @__PURE__ */ t(
             "input",
             {
               type: "checkbox",
-              checked: i,
+              checked: r,
               onChange: (s) => n(s.target.checked),
               className: "zd:cursor-pointer zd:[color-scheme:light]"
             }
           ),
-          /* @__PURE__ */ a(h, { className: "zd:flex-1", children: [
+          /* @__PURE__ */ d(h, { className: "zd:flex-1", children: [
             "I agree to the",
             " ",
             e && /* @__PURE__ */ t(
@@ -784,12 +801,12 @@ function He({
                 children: "Terms & Conditions"
               }
             ),
-            e && o && " and ",
-            o && /* @__PURE__ */ t(
+            e && i && " and ",
+            i && /* @__PURE__ */ t(
               h,
               {
                 as: "a",
-                href: o,
+                href: i,
                 target: "_blank",
                 rel: "noopener noreferrer",
                 className: "zd:underline",
@@ -803,18 +820,18 @@ function He({
     /* @__PURE__ */ t(L, {})
   ] });
 }
-const Ge = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const We = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function M(e) {
-  return Ge.test(e.trim());
+  return We.test(e.trim());
 }
-const We = "" + new URL("blob.webm", import.meta.url).href;
-function qe({ className: e }) {
+const qe = "" + new URL("blob.webm", import.meta.url).href;
+function De({ className: e }) {
   return /* @__PURE__ */ t(
     "video",
     {
       className: e,
       style: { aspectRatio: "1 / 1" },
-      src: We,
+      src: qe,
       autoPlay: !0,
       loop: !0,
       muted: !0,
@@ -828,40 +845,40 @@ function H(e) {
   return e instanceof Error ? e.name === "AbortError" || e.name === "NotAllowedError" ? !0 : e.message.toLowerCase().includes("oauth popup was closed") : !1;
 }
 function Ve() {
-  const { goToStep: e, setEmail: o, setOtpSession: i, config: n, enabledMethods: r } = F(), [c, s] = x(!1), [u, l] = x(!1), [p, w] = x(""), m = (n == null ? void 0 : n.emailAuthMethod) === "otp", { mutateAsync: N, isPending: k } = Q(), { mutateAsync: S, isPending: f } = J(), g = k || f, [T, y] = x(null), { mutateAsync: j, isPending: U } = pe({
+  const { goToStep: e, setEmail: i, setOtpSession: r, config: n, enabledMethods: o } = F(), [c, s] = w(!1), [u, l] = w(!1), [p, x] = w(""), m = (n == null ? void 0 : n.emailAuthMethod) === "otp", { mutateAsync: N, isPending: k } = J(), { mutateAsync: S, isPending: f } = Y(), g = k || f, [T, y] = w(null), { mutateAsync: j, isPending: U } = fe({
     mutation: {
       onSuccess: async () => {
-        var d;
-        e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
+        var a;
+        e("authenticated"), (a = n == null ? void 0 : n.onSuccess) == null || a.call(n);
       },
-      onError: (d) => {
+      onError: (a) => {
         var z;
-        (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
+        (z = n == null ? void 0 : n.onError) == null || z.call(n, a);
       }
     }
-  }), { mutate: v, isPending: A } = fe({
+  }), { mutate: v, isPending: A } = he({
     mutation: {
       onSuccess: () => {
-        var d;
-        e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
+        var a;
+        e("authenticated"), (a = n == null ? void 0 : n.onSuccess) == null || a.call(n);
       },
-      onError: (d) => {
+      onError: (a) => {
         var z;
-        H(d) || y(d instanceof Error ? d.message : String(d)), (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
+        H(a) || y(a instanceof Error ? a.message : String(a)), (z = n == null ? void 0 : n.onError) == null || z.call(n, a);
       }
     }
-  }), { mutate: _, isPending: te } = he({
+  }), { mutate: _, isPending: ee } = ze({
     mutation: {
       onSuccess: () => {
-        var d;
-        e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
+        var a;
+        e("authenticated"), (a = n == null ? void 0 : n.onSuccess) == null || a.call(n);
       },
-      onError: (d) => {
+      onError: (a) => {
         var z;
-        H(d) || y(d instanceof Error ? d.message : String(d)), (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
+        H(a) || y(a instanceof Error ? a.message : String(a)), (z = n == null ? void 0 : n.onError) == null || z.call(n, a);
       }
     }
-  }), E = U || g || A || te, B = !!(n != null && n.termsAndConditionsUrl || n != null && n.privacyPolicyUrl) && !c, ne = () => {
+  }), E = U || g || A || ee, B = !!(n != null && n.termsAndConditionsUrl || n != null && n.privacyPolicyUrl) && !c, te = () => {
     if (!E) {
       if (B) {
         l(!0);
@@ -869,7 +886,7 @@ function Ve() {
       }
       y(null), v();
     }
-  }, oe = () => {
+  }, ne = () => {
     if (!E) {
       if (B) {
         l(!0);
@@ -877,7 +894,7 @@ function Ve() {
       }
       y(null), _();
     }
-  }, re = async () => {
+  }, oe = async () => {
     if (B) {
       l(!0);
       return;
@@ -885,9 +902,9 @@ function Ve() {
     y(null);
     try {
       await j({ provider: "google" });
-    } catch (d) {
-      const z = d instanceof Error ? d.message : String(d);
-      H(d) || y(z);
+    } catch (a) {
+      const z = a instanceof Error ? a.message : String(a);
+      H(a) || y(z);
     }
   }, W = m ? async () => {
     if (!(!p || E) && M(p)) {
@@ -897,13 +914,13 @@ function Ve() {
       }
       y(null);
       try {
-        const { otpId: d, otpEncryptionTargetBundle: z } = await N({
+        const { otpId: a, otpEncryptionTargetBundle: z } = await N({
           email: p
         });
-        o(p), i({ otpId: d, otpEncryptionTargetBundle: z }), e("otp-input");
-      } catch (d) {
+        i(p), r({ otpId: a, otpEncryptionTargetBundle: z }), e("otp-input");
+      } catch (a) {
         y(
-          d instanceof Error ? d.message : "Failed to send verification code"
+          a instanceof Error ? a.message : "Failed to send verification code"
         );
       }
     }
@@ -915,18 +932,18 @@ function Ve() {
       }
       y(null);
       try {
-        const { otpId: d, otpEncryptionTargetBundle: z } = await S({
+        const { otpId: a, otpEncryptionTargetBundle: z } = await S({
           email: p
         });
-        o(p), i({ otpId: d, otpEncryptionTargetBundle: z }), e("email-verification");
-      } catch (d) {
+        i(p), r({ otpId: a, otpEncryptionTargetBundle: z }), e("email-verification");
+      } catch (a) {
         y(
-          d instanceof Error ? d.message : "Failed to send verification code"
+          a instanceof Error ? a.message : "Failed to send verification code"
         );
       }
     }
   };
-  return T ? /* @__PURE__ */ t("div", { className: "zd:flex zd:items-center zd:justify-center zd:h-full", children: /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:max-w-md", children: [
+  return T ? /* @__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(h, { className: "zd:text-h2 zd:text-center", children: "Error occurred" }),
     /* @__PURE__ */ t(h, { className: "zd:text-center zd:text-red-500", children: T }),
     /* @__PURE__ */ t(
@@ -937,16 +954,16 @@ function Ve() {
         onClick: () => y(null)
       }
     )
-  ] }) }) : /* @__PURE__ */ a("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__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-center", children: [
-      /* @__PURE__ */ a("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(qe, { className: "zd:w-full zd:pointer-events-none zd:select-none" }) }),
+  ] }) }) : /* @__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", 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(De, { className: "zd:w-full zd:pointer-events-none zd:select-none" }) }),
         /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Continue to your wallet" }),
         /* @__PURE__ */ t(h, { className: "zd:mt-2 zd:text-center zd:text-greyScale/50", children: "Choose a sign-in method to proceed" })
       ] }),
-      /* @__PURE__ */ a("div", { className: "zd:mt-6 zd:flex zd:flex-col zd:gap-4 zd:mb-4", children: [
-        r.includes("passkey") && /* @__PURE__ */ a(b, { children: [
-          /* @__PURE__ */ a("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
+      /* @__PURE__ */ d("div", { className: "zd:mt-6 zd:flex zd:flex-col zd:gap-4 zd:mb-4", children: [
+        o.includes("passkey") && /* @__PURE__ */ d(b, { children: [
+          /* @__PURE__ */ d("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
             /* @__PURE__ */ t(
               C,
               {
@@ -955,7 +972,7 @@ function Ve() {
                 iconName: "key",
                 trailIcon: !0,
                 disabled: E,
-                onClick: ne
+                onClick: te
               }
             ),
             /* @__PURE__ */ t(
@@ -966,43 +983,43 @@ function Ve() {
                 iconName: "key",
                 trailIcon: !0,
                 disabled: E,
-                onClick: oe
+                onClick: ne
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "zd:flex zd:items-center zd:gap-3", children: [
+          /* @__PURE__ */ d("div", { className: "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(h, { className: "zd:text-body3", children: "or" }),
             /* @__PURE__ */ t("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" })
           ] })
         ] }),
-        /* @__PURE__ */ a("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
-          r.includes("google") && /* @__PURE__ */ t(
-            Y,
+        /* @__PURE__ */ d("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
+          o.includes("google") && /* @__PURE__ */ t(
+            X,
             {
               iconName: "google",
               title: "Google",
               chevron: !0,
               className: "zd:rounded-3xl",
               disabled: E,
-              onClick: re
+              onClick: oe
             }
           ),
-          r.includes("email") && /* @__PURE__ */ t(
-            ae,
+          o.includes("email") && /* @__PURE__ */ t(
+            de,
             {
               iconName: "email",
               placeholder: "Enter your email",
               value: p,
-              onChange: (d) => w(d.target.value),
+              onChange: (a) => x(a.target.value),
               type: "email",
               autoCapitalize: "none",
               autoComplete: "email",
               disabled: E,
               variant: "listItemStyle",
               containerClassName: "zd:rounded-3xl",
-              onKeyDown: (d) => {
-                d.key === "Enter" && p && !E && W();
+              onKeyDown: (a) => {
+                a.key === "Enter" && p && !E && W();
               },
               children: g ? /* @__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",
@@ -1011,7 +1028,7 @@ function Ve() {
                   disabled: !M(p) || B,
                   className: `zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${M(p) && !B ? "zd:cursor-pointer" : "zd:cursor-not-allowed zd:opacity-50"}`,
                   onClick: () => W(),
-                  children: /* @__PURE__ */ t(X, { name: "chevronRight", className: "zd:text-greyScale" })
+                  children: /* @__PURE__ */ t(le, { name: "chevronRight", className: "zd:text-greyScale" })
                 }
               )
             }
@@ -1020,54 +1037,54 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "zd:px-4", children: /* @__PURE__ */ t(
-      He,
+      Ge,
       {
         termsAndConditionsUrl: n == null ? void 0 : n.termsAndConditionsUrl,
         privacyPolicyUrl: n == null ? void 0 : n.privacyPolicyUrl,
         agreedToTerms: c,
-        setAgreedToTerms: (d) => {
-          s(d), d && l(!1);
+        setAgreedToTerms: (a) => {
+          s(a), a && l(!1);
         },
         highlight: u
       }
     ) })
   ] });
 }
-function De() {
+function Ke() {
   return typeof window > "u" ? null : new URLSearchParams(window.location.search).get("code");
 }
-function Ke() {
+function Xe() {
   const {
     otpId: e,
-    otpEncryptionTargetBundle: o,
-    goToStep: i,
+    otpEncryptionTargetBundle: i,
+    goToStep: r,
     clearOtpSession: n,
-    config: r
-  } = F(), [c] = x(De), [s, u] = x(null), l = K(!1), { mutate: p, isPending: w } = ze({
+    config: o
+  } = F(), [c] = w(Ke), [s, u] = w(null), l = K(!1), { mutate: p, isPending: x } = me({
     mutation: {
       onSuccess: async () => {
         var m;
-        n(), i("authenticated"), (m = r == null ? void 0 : r.onSuccess) == null || m.call(r);
+        n(), r("authenticated"), (m = o == null ? void 0 : o.onSuccess) == null || m.call(o);
       },
       onError: (m) => {
         var N;
-        u(m), (N = r == null ? void 0 : r.onError) == null || N.call(r, m);
+        u(m), (N = o == null ? void 0 : o.onError) == null || N.call(o, m);
       }
     }
   });
   return P(() => {
     if (!(l.current || !c)) {
-      if (l.current = !0, !e || !o) {
-        $(), i(null);
+      if (l.current = !0, !e || !i) {
+        $(), r(null);
         return;
       }
-      p({ otpId: e, code: c, otpEncryptionTargetBundle: o });
+      p({ otpId: e, code: c, otpEncryptionTargetBundle: i });
     }
-  }, [e, o, c, p, i]), /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
-      !s && w && /* @__PURE__ */ t(I, { imageName: "loading", title: "Verifying Your Email", children: "Please wait while we securely connect your wallet." }),
-      !s && !c && !w && /* @__PURE__ */ a(b, { children: [
-        /* @__PURE__ */ a(I, { imageName: "error", title: "Invalid Link", children: [
+  }, [e, i, c, p, r]), /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
+      !s && x && /* @__PURE__ */ t(I, { imageName: "loading", title: "Verifying Your Email", children: "Please wait while we securely connect your wallet." }),
+      !s && !c && !x && /* @__PURE__ */ d(b, { children: [
+        /* @__PURE__ */ d(I, { imageName: "error", title: "Invalid Link", children: [
           "This verification link is invalid or incomplete.",
           /* @__PURE__ */ t("br", {}),
           "Please check your email and try again with the correct link."
@@ -1077,20 +1094,20 @@ function Ke() {
           {
             action: "primary",
             onClick: () => {
-              $(), i("sign-up");
+              $(), r("sign-up");
             },
             text: "Choose another sign-in method"
           }
         )
       ] }),
-      s != null && /* @__PURE__ */ a(b, { children: [
+      s != null && /* @__PURE__ */ d(b, { children: [
         /* @__PURE__ */ t(I, { 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(
           C,
           {
             action: "primary",
             onClick: () => {
-              $(), i("sign-up");
+              $(), r("sign-up");
             },
             text: "Choose another sign-in method"
           }
@@ -1100,9 +1117,9 @@ function Ke() {
     /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-function Xe() {
-  const { goToStep: e } = F(), { connect: o, connectors: i, isPending: n } = ce(), r = i.filter((s) => s.id !== "zerodev-wallet"), c = (s) => {
-    o(
+function Ye() {
+  const { goToStep: e } = F(), { connect: i, connectors: r, isPending: n } = ue(), o = r.filter((s) => s.id !== "zerodev-wallet"), c = (s) => {
+    i(
       { connector: s },
       {
         onSuccess: () => {
@@ -1111,11 +1128,11 @@ function Xe() {
       }
     );
   };
-  return /* @__PURE__ */ a(b, { children: [
-    /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
+  return /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ d("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
       /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Select your wallet" }),
-      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-2", children: r.length === 0 ? /* @__PURE__ */ t(h, { className: "zd:text-center", children: "No wallets detected. Install a browser wallet extension to continue." }) : r.map((s) => /* @__PURE__ */ t(
-        Y,
+      /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-2", children: o.length === 0 ? /* @__PURE__ */ t(h, { className: "zd:text-center", children: "No wallets detected. Install a browser wallet extension to continue." }) : o.map((s) => /* @__PURE__ */ t(
+        X,
         {
           title: s.name,
           iconName: "walletOutline",
@@ -1130,82 +1147,84 @@ function Xe() {
     /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
   ] });
 }
-const Ye = {
+const Je = {
   "wallet-selection": "Choose your wallet"
 };
-function Je() {
+function Ze() {
   return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(I, { imageName: "loading", title: "Authenticating...", children: "Please wait while we complete the OAuth authentication." }) });
 }
 function Qe() {
   return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(I, { imageName: "loading", title: "Passkey authentication", children: "Please authenticate with your passkey." }) });
 }
-function Ze(e) {
+function et(e) {
   switch (e) {
     case "sign-up":
       return /* @__PURE__ */ t(Ve, {});
     case "email-verification":
-      return /* @__PURE__ */ t(Ie, {});
+      return /* @__PURE__ */ t(Fe, {});
     case "otp-input":
-      return /* @__PURE__ */ t(_e, {});
+      return /* @__PURE__ */ t(He, {});
     case "verifying-otp":
-      return /* @__PURE__ */ t(Ke, {});
+      return /* @__PURE__ */ t(Xe, {});
     case "oauth-in-progress":
-      return /* @__PURE__ */ t(Je, {});
+      return /* @__PURE__ */ t(Ze, {});
     case "passkey-prompt":
       return /* @__PURE__ */ t(Qe, {});
     case "wallet-selection":
-      return /* @__PURE__ */ t(Xe, {});
+      return /* @__PURE__ */ t(Ye, {});
     case "error":
-      return /* @__PURE__ */ t(Pe, {});
+      return /* @__PURE__ */ t(Re, {});
     default:
       return null;
   }
 }
-function zt({
-  onClose: e
+function mt({
+  onClose: e,
+  size: i
 } = {}) {
-  const { step: o, goToStep: i, goBack: n, reset: r } = F(), c = O(ee(), (p) => p.logo);
+  const { step: r, goToStep: n, goBack: o, reset: c } = F(), s = O(Q(), (x) => x.logo);
   P(() => {
-    o === null && Fe() && i("verifying-otp");
-  }, [o, i]);
-  const s = Ze(o);
-  if (!s) return null;
-  const u = () => {
-    $(), r(), e == null || e();
-  }, l = o ? Ye[o] : void 0;
+    r === null && Pe() && n("verifying-otp");
+  }, [r, n]);
+  const u = et(r);
+  if (!u) return null;
+  const l = () => {
+    $(), c(), e == null || e();
+  }, p = r ? Je[r] : void 0;
   return /* @__PURE__ */ t(
-    Ce,
+    ke,
     {
-      contentClassName: o === "sign-up" ? "zd:px-0" : void 0,
+      ...i && { size: i },
+      contentClassName: r === "sign-up" ? "zd:px-0" : void 0,
       topNav: /* @__PURE__ */ t(
-        xe,
+        we,
         {
-          ...n !== null && { onBack: n },
-          onClose: u,
-          ...l && { title: l },
-          ...o === "sign-up" && {
-            ...c && { logo: c },
+          ...o !== null && { onBack: o },
+          onClose: l,
+          ...p && { title: p },
+          ...r === "sign-up" && {
+            ...s && { logo: s },
             className: "zd:px-4"
           }
         }
       ),
-      children: s
+      children: u
     }
   );
 }
 const G = "zerodev:auth:otpSession";
-function et() {
+function tt() {
   if (typeof window > "u") return null;
   try {
     const e = window.localStorage.getItem(G);
     if (!e) return null;
-    const o = JSON.parse(e);
-    return !(o != null && o.otpId) || !(o != null && o.otpEncryptionTargetBundle) ? null : o;
+    const i = JSON.parse(e);
+    return !(i != null && i.otpId) || !(i != null && i.otpEncryptionTargetBundle) ? null : i;
   } catch {
     return null;
   }
 }
-function tt(e) {
+function nt(e) {
   if (!(typeof window > "u"))
     try {
       window.localStorage.setItem(
@@ -1215,14 +1234,14 @@ function tt(e) {
     } catch {
     }
 }
-function V() {
+function D() {
   if (!(typeof window > "u"))
     try {
       window.localStorage.removeItem(G);
     } catch {
     }
 }
-const nt = (e, o, i) => ({
+const ot = (e, i, r) => ({
   auth: {
     // Initial state
     step: null,
@@ -1234,42 +1253,42 @@ const nt = (e, o, i) => ({
     config: null,
     // Actions
     initialize: (n) => {
-      const r = et();
+      const o = tt();
       e((c) => ({
         auth: {
           ...c.auth,
           config: n,
           enabledMethods: n.enabledMethods,
-          ...r && {
-            otpId: r.otpId,
-            otpEncryptionTargetBundle: r.otpEncryptionTargetBundle
+          ...o && {
+            otpId: o.otpId,
+            otpEncryptionTargetBundle: o.otpEncryptionTargetBundle
           }
         }
       }));
     },
     goToStep: (n) => {
-      e((r) => ({
+      e((o) => ({
         auth: {
-          ...r.auth,
+          ...o.auth,
           step: n,
-          stepHistory: r.auth.step === null ? r.auth.stepHistory : [...r.auth.stepHistory, r.auth.step]
+          stepHistory: o.auth.step === null ? o.auth.stepHistory : [...o.auth.stepHistory, o.auth.step]
         }
       }));
     },
     goBack: () => {
-      const { auth: n } = o();
+      const { auth: n } = i();
       if (n.stepHistory.length === 0) return;
-      const r = [...n.stepHistory], c = r.pop();
+      const o = [...n.stepHistory], c = o.pop();
       e((s) => ({
         auth: {
           ...s.auth,
           step: c,
-          stepHistory: r
+          stepHistory: o
         }
       }));
     },
     reset: () => {
-      V(), e((n) => ({
+      D(), e((n) => ({
         auth: {
           ...n.auth,
           step: null,
@@ -1281,24 +1300,24 @@ const nt = (e, o, i) => ({
       }));
     },
     setEmail: (n) => {
-      e((r) => ({
+      e((o) => ({
         auth: {
-          ...r.auth,
+          ...o.auth,
           email: n
         }
       }));
     },
-    setOtpSession: ({ otpId: n, otpEncryptionTargetBundle: r }) => {
-      tt({ otpId: n, otpEncryptionTargetBundle: r }), e((c) => ({
+    setOtpSession: ({ otpId: n, otpEncryptionTargetBundle: o }) => {
+      nt({ otpId: n, otpEncryptionTargetBundle: o }), e((c) => ({
         auth: {
           ...c.auth,
           otpId: n,
-          otpEncryptionTargetBundle: r
+          otpEncryptionTargetBundle: o
         }
       }));
     },
     clearOtpSession: () => {
-      V(), e((n) => ({
+      D(), e((n) => ({
         auth: {
           ...n.auth,
           otpId: null,
@@ -1307,37 +1326,37 @@ const nt = (e, o, i) => ({
       }));
     }
   }
-}), ot = (e = {}) => se()(
-  ye((o, i, n) => ({
+}), rt = (e = {}) => ie()(
+  xe((i, r, n) => ({
     pendingRequests: [],
     userConfirmationListenerActive: !1,
     logo: e.logo ?? null,
-    addPendingRequest: (r) => o((c) => ({
-      pendingRequests: [...c.pendingRequests, r]
+    addPendingRequest: (o) => i((c) => ({
+      pendingRequests: [...c.pendingRequests, o]
     })),
-    removePendingRequest: (r) => o((c) => ({
-      pendingRequests: c.pendingRequests.filter((s) => s.id !== r)
+    removePendingRequest: (o) => i((c) => ({
+      pendingRequests: c.pendingRequests.filter((s) => s.id !== o)
     })),
-    clearPendingRequests: () => o({ pendingRequests: [] }),
-    setUserConfirmationListenerActive: (r) => o({ userConfirmationListenerActive: r }),
-    ...nt(o, i)
+    clearPendingRequests: () => i({ pendingRequests: [] }),
+    setUserConfirmationListenerActive: (o) => i({ userConfirmationListenerActive: o }),
+    ...ot(i, r)
   }))
 );
-function rt(e) {
-  return new Promise((o, i) => {
+function it(e) {
+  return new Promise((i, r) => {
     const n = e.subscribe(
-      (r) => r.auth.step,
-      (r) => {
-        r === "authenticated" ? (n(), o()) : r === null && (n(), i(new Error("Auth flow dismissed")));
+      (o) => o.auth.step,
+      (o) => {
+        o === "authenticated" ? (n(), i()) : o === null && (n(), r(new Error("Auth flow dismissed")));
       }
     );
   });
 }
-function mt(e) {
-  var n, r;
-  const o = me(e), i = ot({ logo: (n = e.config) == null ? void 0 : n.logo });
-  return (r = e.config) != null && r.auth && i.getState().auth.initialize(e.config.auth), (c) => {
-    const s = o(c);
+function gt(e) {
+  var n, o;
+  const i = ge(e), r = rt({ logo: (n = e.config) == null ? void 0 : n.logo });
+  return (o = e.config) != null && o.auth && r.getState().auth.initialize(e.config.auth), (c) => {
+    const s = i(c);
     return {
       ...s,
       async connect(u) {
@@ -1345,30 +1364,30 @@ function mt(e) {
         try {
           return await s.connect(u);
         } catch (p) {
-          if (u != null && u.isReconnecting || !((l = e.config) != null && l.auth) || !(p instanceof ge))
+          if (u != null && u.isReconnecting || !((l = e.config) != null && l.auth) || !(p instanceof ye))
             throw p;
-          if (i.getState().auth.step !== null)
+          if (r.getState().auth.step !== null)
             throw new Error("Auth flow already in progress");
-          return i.getState().auth.goToStep("sign-up"), await rt(i), s.connect(u);
+          return r.getState().auth.goToStep("sign-up"), await it(r), s.connect(u);
         }
       },
       async disconnect() {
         var u, l;
-        await ((u = s.disconnect) == null ? void 0 : u.call(s)), (l = e.config) != null && l.auth && i.getState().auth.reset();
+        await ((u = s.disconnect) == null ? void 0 : u.call(s)), (l = e.config) != null && l.auth && r.getState().auth.reset();
       },
       async setup() {
         var u;
         await ((u = s.setup) == null ? void 0 : u.call(s)), typeof window > "u";
       },
       getKitStore() {
-        return i;
+        return r;
       }
     };
   };
 }
 export {
-  zt as AuthFlow,
+  mt as AuthFlow,
   F as useAuth,
-  mt as zeroDevWallet
+  gt as zeroDevWallet
 };
 //# sourceMappingURL=index.mjs.map