@crossmint/client-sdk-react-ui 1.9.2 → 1.10.0

package/dist/chunk-FOCUIKYH.cjs

@@ -0,0 +1,1265 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkDJ32OEWGcjs = require('./chunk-DJ32OEWG.cjs');
+
+
+var _chunkZCYU7QA6cjs = require('./chunk-ZCYU7QA6.cjs');
+
+
+var _chunk5S4VO6RBcjs = require('./chunk-5S4VO6RB.cjs');
+
+
+var _chunkQQXBYOKAcjs = require('./chunk-QQXBYOKA.cjs');
+
+
+var _chunkMJHLKJ6Xcjs = require('./chunk-MJHLKJ6X.cjs');
+
+
+
+
+
+var _chunkQT7UEJZGcjs = require('./chunk-QT7UEJZG.cjs');
+
+
+
+
+var _chunkMH37OJT2cjs = require('./chunk-MH37OJT2.cjs');
+
+
+var _chunkPBSL6JOFcjs = require('./chunk-PBSL6JOF.cjs');
+
+
+var _chunkB7LYPQ4Kcjs = require('./chunk-B7LYPQ4K.cjs');
+
+
+var _chunkBE2ZLB3Lcjs = require('./chunk-BE2ZLB3L.cjs');
+
+
+var _chunkGY6G3ZC2cjs = require('./chunk-GY6G3ZC2.cjs');
+
+
+var _chunk5RX5WFEWcjs = require('./chunk-5RX5WFEW.cjs');
+
+
+var _chunkKNOUJZN5cjs = require('./chunk-KNOUJZN5.cjs');
+
+
+var _chunkZMSST6ZZcjs = require('./chunk-ZMSST6ZZ.cjs');
+
+
+
+var _chunkQK5J7FD3cjs = require('./chunk-QK5J7FD3.cjs');
+
+
+var _chunkAXZLLRBUcjs = require('./chunk-AXZLLRBU.cjs');
+
+
+var _chunkURKPLEPVcjs = require('./chunk-URKPLEPV.cjs');
+
+
+var _chunkHPOZ6I54cjs = require('./chunk-HPOZ6I54.cjs');
+
+
+var _chunkENCR5SUWcjs = require('./chunk-ENCR5SUW.cjs');
+
+
+var _chunkKEKBOJCFcjs = require('./chunk-KEKBOJCF.cjs');
+
+
+
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/providers/CrossmintWalletProvider.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+
+
+
+var _clientsdksmartwallet = require('@crossmint/client-sdk-smart-wallet');
+
+// src/hooks/useWallet.ts
+
+function useWallet() {
+  const walletContext = _react.useContext.call(void 0, WalletContext);
+  if (!walletContext) {
+    throw new Error("useWallet must be used within CrossmintAuthProvider or CrossmintWalletProvider");
+  }
+  return walletContext;
+}
+
+// src/hooks/useAuth.ts
+
+
+// src/providers/CrossmintAuthProvider.tsx
+
+var _clientsdkauth = require('@crossmint/client-sdk-auth');
+var _commonsdkbase = require('@crossmint/common-sdk-base');
+var _commonsdkauth = require('@crossmint/common-sdk-auth');
+
+// src/components/auth/AuthFormDialog.tsx
+var _reactvisuallyhidden = require('@radix-ui/react-visually-hidden');
+
+// src/providers/auth/AuthFormProvider.tsx
+
+
+// src/hooks/useCrossmintAuth.ts
+
+function useCrossmintAuth() {
+  const context = _react.useContext.call(void 0, AuthContext);
+  if (!context) {
+    throw new Error("useCrossmintAuth must be used within a CrossmintAuthProvider");
+  }
+  return context;
+}
+
+// src/providers/auth/AuthFormProvider.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var initialOAuthUrlMap = {
+  google: ""
+  // Farcaster is not included here as it uses a different authentication method
+};
+var AuthFormContext = _react.createContext.call(void 0, void 0);
+var useAuthForm = () => {
+  const context = _react.useContext.call(void 0, AuthFormContext);
+  if (!context) {
+    throw new Error("useAuthForm must be used within an AuthFormProvider");
+  }
+  return context;
+};
+var AuthFormProvider = ({
+  children,
+  initialState
+}) => {
+  const { crossmintAuth } = useCrossmintAuth();
+  const [step, setStep] = _react.useState.call(void 0, "initial");
+  const [oauthUrlMap, setOauthUrlMap] = _react.useState.call(void 0, initialOAuthUrlMap);
+  const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = _react.useState.call(void 0, true);
+  const { loginMethods, baseUrl, setDialogOpen, appearance, embeddedWallets } = initialState;
+  if (loginMethods.includes("web3") && (embeddedWallets == null ? void 0 : embeddedWallets.createOnLogin) === "all-users") {
+    throw new Error("Creating wallets on login is not yet supported for web3 login method");
+  }
+  const preFetchAndSetOauthUrl = _react.useCallback.call(void 0, () => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
+    setIsLoadingOauthUrlMap(true);
+    try {
+      const oauthProviders = loginMethods.filter(
+        (method) => method in initialOAuthUrlMap
+      );
+      const oauthPromiseList = oauthProviders.map((provider) => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
+        const url = yield crossmintAuth == null ? void 0 : crossmintAuth.getOAuthUrl(provider);
+        return { [provider]: url };
+      }));
+      const oauthUrlMap2 = Object.assign({}, ...yield Promise.all(oauthPromiseList));
+      setOauthUrlMap(oauthUrlMap2);
+    } catch (error) {
+      console.error("Error fetching OAuth URLs:", error);
+    } finally {
+      setIsLoadingOauthUrlMap(false);
+    }
+  }), [loginMethods, crossmintAuth]);
+  _react.useEffect.call(void 0, () => {
+    preFetchAndSetOauthUrl();
+  }, [preFetchAndSetOauthUrl]);
+  const handleToggleDialog = (open) => {
+    setDialogOpen == null ? void 0 : setDialogOpen(open);
+    if (!open) {
+      setTimeout(() => setStep("initial"), 250);
+    }
+  };
+  const value = {
+    step,
+    baseUrl,
+    appearance,
+    loginMethods,
+    oauthUrlMap,
+    isLoadingOauthUrlMap,
+    setDialogOpen: handleToggleDialog,
+    setStep
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AuthFormContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5S4VO6RBcjs.WagmiAuthProvider, { children }) });
+};
+
+// src/components/auth/methods/email/EmailAuthFlow.tsx
+
+
+// src/components/auth/methods/email/EmailOTPInput.tsx
+
+
+var EMAIL_VERIFICATION_TOKEN_LENGTH = 6;
+function EmailOTPInput({
+  otpEmailData,
+  setOtpEmailData
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  const { crossmintAuth } = useCrossmintAuth();
+  const { appearance, setDialogOpen, setStep } = useAuthForm();
+  const [token, setToken] = _react.useState.call(void 0, "");
+  const [hasError, setHasError] = _react.useState.call(void 0, false);
+  const [loading, setLoading] = _react.useState.call(void 0, false);
+  const handleOnSubmit = () => _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+    var _a2, _b2;
+    setLoading(true);
+    try {
+      const oneTimeSecret = yield crossmintAuth == null ? void 0 : crossmintAuth.confirmEmailOtp(
+        (_a2 = otpEmailData == null ? void 0 : otpEmailData.email) != null ? _a2 : "",
+        (_b2 = otpEmailData == null ? void 0 : otpEmailData.emailId) != null ? _b2 : "",
+        token
+      );
+      yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
+      setDialogOpen(false);
+      setStep("initial");
+    } catch (e) {
+      console.error("Error signing in via email ", e);
+      setHasError(true);
+    } finally {
+      setLoading(false);
+    }
+  });
+  const handleOnBack = () => {
+    setStep("initial");
+    setOtpEmailData(null);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkGY6G3ZC2cjs.AuthFormBackButton,
+      {
+        onClick: handleOnBack,
+        iconColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
+        ringColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center justify-start w-full", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "relative left-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkURKPLEPVcjs.EmailOtpIcon,
+        {
+          customAccentColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.accent,
+          customButtonBackgroundColor: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.buttonBackground,
+          customBackgroundColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.background
+        }
+      ) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "p",
+        {
+          className: "text-base font-normal mt-4 mb-1 text-center text-cm-text-primary",
+          style: { color: (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.textPrimary },
+          children: "Check your email"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "p",
+        {
+          className: "text-center text-cm-text-secondary px-4",
+          style: { color: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.textSecondary },
+          children: "A temporary login code has been sent to your email"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "py-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkMH37OJT2cjs.InputOTP,
+        {
+          maxLength: EMAIL_VERIFICATION_TOKEN_LENGTH,
+          value: token,
+          onChange: (val) => {
+            setToken(val);
+            setHasError(false);
+          },
+          onComplete: handleOnSubmit,
+          disabled: loading,
+          customStyles: {
+            accent: (_i = (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.accent) != null ? _i : "#04AA6D",
+            danger: (_k = (_j = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _j.danger) != null ? _k : "#f44336",
+            border: (_m = (_l = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _l.border) != null ? _m : "#E5E7EB",
+            textPrimary: (_o = (_n = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _n.textPrimary) != null ? _o : "#909ca3",
+            buttonBackground: (_q = (_p = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _p.buttonBackground) != null ? _q : "#eff6ff",
+            inputBackground: (_s = (_r = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _r.inputBackground) != null ? _s : "#FFFFFF",
+            borderRadius: appearance == null ? void 0 : appearance.borderRadius
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkMH37OJT2cjs.InputOTPGroup, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 0, hasError }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 1, hasError }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 2, hasError }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 3, hasError }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 4, hasError }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMH37OJT2cjs.InputOTPSlot, { index: 5, hasError })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm leading-tight text-cm-text-secondary text-center", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { color: (_t = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _t.textSecondary }, children: "Can't find the email? Check spam folder or contact" }),
+        " ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "a",
+          {
+            className: "transition-opacity duration-150 text-cm-link hover:opacity-70",
+            style: { color: (_u = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _u.textLink },
+            href: "mailto:support@crossmint.io",
+            children: "support@crossmint.io"
+          },
+          "resend-email-link"
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/auth/methods/email/EmailSignIn.tsx
+
+var _color = require('color'); var _color2 = _interopRequireDefault(_color);
+
+
+function EmailSignIn({ setOtpEmailData }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { crossmintAuth } = useCrossmintAuth();
+  const { appearance, setStep } = useAuthForm();
+  const [emailInput, setEmailInput] = _react.useState.call(void 0, "");
+  const [emailError, setEmailError] = _react.useState.call(void 0, "");
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  function handleOnSubmit(e) {
+    return _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+      e.preventDefault();
+      if (!_commonsdkauth.isEmailValid.call(void 0, emailInput)) {
+        setEmailError("Please enter a valid email address");
+        return;
+      }
+      setIsLoading(true);
+      try {
+        const trimmedEmailInput = emailInput.trim().toLowerCase();
+        const emailSignInRes = yield crossmintAuth == null ? void 0 : crossmintAuth.sendEmailOtp(trimmedEmailInput);
+        setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId });
+        setStep("otp");
+      } catch (_e2) {
+        setIsLoading(false);
+        setEmailError("Failed to send email. Please try again or contact support.");
+      }
+    });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-col items-start justify-start w-full rounded-lg", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "form",
+      {
+        role: "form",
+        className: "relative",
+        onSubmit: handleOnSubmit,
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "emailInput", className: "sr-only", children: "Email" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+                "flex-grow text-cm-text-secondary text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
+                "transition-none duration-200 ease-in-out",
+                "focus:outline-none focus-ring-custom",
+                // Add focus ring
+                emailError ? "border-red-500" : ""
+              ),
+              style: {
+                color: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
+                borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+                borderColor: emailError ? (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.danger : (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.border,
+                backgroundColor: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.inputBackground,
+                // @ts-expect-error Add custom ring color to tailwind
+                "--focus-ring-color": new (0, _color2.default)((_f = (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.accent) != null ? _f : "#04AA6D").alpha(0.18).toString()
+              },
+              type: "email",
+              placeholder: "Enter email",
+              value: emailInput,
+              onChange: (e) => {
+                setEmailInput(e.target.value);
+                setEmailError("");
+              },
+              readOnly: isLoading,
+              "aria-describedby": "emailError"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "absolute inset-y-0 right-0 flex items-center pr-4", children: [
+            emailError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZMSST6ZZcjs.AlertIcon, { customColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.danger }),
+            isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkB7LYPQ4Kcjs.Spinner,
+              {
+                style: {
+                  color: (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.textSecondary,
+                  fill: (_i = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _i.textPrimary
+                }
+              }
+            ),
+            !emailError && !isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "submit",
+                className: _chunk5RX5WFEWcjs.classNames.call(void 0, "cursor-pointer font-medium text-cm-accent text-nowrap"),
+                style: { color: (_j = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _j.accent },
+                disabled: !emailInput,
+                children: "Sign in"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    emailError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs text-red-500 mb-2 pt-2", children: emailError })
+  ] }) }) });
+}
+
+// src/components/auth/methods/email/EmailAuthFlow.tsx
+
+function EmailAuthFlow() {
+  const { step } = useAuthForm();
+  const [otpEmailData, setOtpEmailData] = _react.useState.call(void 0, null);
+  if (step === "otp") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailOTPInput, { otpEmailData, setOtpEmailData });
+  }
+  if (step === "initial") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailSignIn, { setOtpEmailData });
+  }
+  return null;
+}
+
+// src/components/common/Divider.tsx
+
+function Divider({ appearance, text }) {
+  var _a, _b, _c;
+  const { step } = useAuthForm();
+  if (step !== "initial") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-center w-full pt-2 pb-3", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border } }),
+    text != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "p",
+      {
+        className: "flex-none px-2 text-sm text-cm-text-primary",
+        style: { color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary },
+        children: text
+      }
+    ) : null,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.border } })
+  ] });
+}
+
+// src/hooks/useOAuthWindowListener.ts
+var _clientsdkwindow = require('@crossmint/client-sdk-window');
+
+var _zod = require('zod');
+var useOAuthWindowListener = (provider) => {
+  const { crossmintAuth } = useCrossmintAuth();
+  const { oauthUrlMap } = useAuthForm();
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const childRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (childRef.current == null) {
+      childRef.current = new (0, _clientsdkwindow.ChildWindow)(window.opener || window.parent, "*", {
+        incomingEvents,
+        outgoingEvents
+      });
+    }
+    return () => {
+      if (childRef.current != null) {
+        childRef.current.off("authMaterialFromPopupCallback");
+      }
+    };
+  }, []);
+  const createPopupAndSetupListeners = () => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
+    if (childRef.current == null) {
+      throw new Error("Child window not initialized");
+    }
+    setIsLoading(true);
+    const popup = yield _clientsdkwindow.PopupWindow.init(oauthUrlMap[provider], {
+      awaitToLoad: false,
+      crossOrigin: true,
+      width: 400,
+      height: 700
+    });
+    const handleAuthMaterial = (data) => _chunk4DAZAO6Ycjs.__async.call(void 0, void 0, null, function* () {
+      var _a;
+      yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(data.oneTimeSecret);
+      (_a = childRef.current) == null ? void 0 : _a.off("authMaterialFromPopupCallback");
+      popup.window.close();
+      setIsLoading(false);
+    });
+    childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
+    const checkWindowClosure = setInterval(() => {
+      var _a;
+      if (popup.window.closed) {
+        clearInterval(checkWindowClosure);
+        setIsLoading(false);
+        (_a = childRef.current) == null ? void 0 : _a.off("authMaterialFromPopupCallback");
+      }
+    }, 2500);
+  });
+  return {
+    createPopupAndSetupListeners,
+    isLoading
+  };
+};
+var incomingEvents = {
+  authMaterialFromPopupCallback: _zod.z.object({ oneTimeSecret: _zod.z.string() })
+};
+var outgoingEvents = {
+  authMaterialFromAuthFrame: _zod.z.object({ oneTimeSecret: _zod.z.string() })
+};
+
+// src/components/auth/methods/google/GoogleSignIn.tsx
+
+function GoogleSignIn(_a) {
+  var props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _a, []);
+  var _a2, _b, _c, _d;
+  const { step, appearance, isLoadingOauthUrlMap } = useAuthForm();
+  const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google");
+  const isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow;
+  if (step !== "initial") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {
+      className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+        "transition-colors duration-200 ease-in-out",
+        "hover:bg-cm-hover focus:bg-cm-hover outline-none",
+        isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
+      ),
+      style: {
+        borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+        backgroundColor: (_a2 = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a2.buttonBackground
+      },
+      onClick: isLoading ? void 0 : createPopupAndSetupListeners
+    }, props), {
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkENCR5SUWcjs.GoogleIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
+          isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkB7LYPQ4Kcjs.Spinner,
+            {
+              style: {
+                color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary,
+                fill: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary
+              }
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: "font-medium",
+              style: { margin: "0px 32px", color: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary },
+              children: "Sign in with Google"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Sign in with Google" })
+      ]
+    })
+  );
+}
+
+// src/components/auth/methods/farcaster/FarcasterSignIn.tsx
+
+var _authkit = require('@farcaster/auth-kit');
+
+function FarcasterSignIn() {
+  var _a, _b;
+  const { step, appearance, setStep } = useAuthForm();
+  if (step === "initial") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+          "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+          "transition-colors duration-200 ease-in-out",
+          "hover:bg-cm-hover focus:bg-cm-hover outline-none"
+        ),
+        style: {
+          borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+          backgroundColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.buttonBackground
+        },
+        onClick: () => {
+          setStep("qrCode");
+        },
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHPOZ6I54cjs.FarcasterIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "span",
+            {
+              className: "font-medium",
+              style: { margin: "0px 32px", color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textPrimary },
+              children: "Sign in with Farcaster"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Sign in with Farcaster" })
+        ]
+      }
+    ) });
+  }
+  if (step === "qrCode") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FarcasterQRCode, {});
+  }
+  return null;
+}
+function FarcasterQRCode() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { crossmintAuth } = useCrossmintAuth();
+  const { appearance, setStep, setDialogOpen } = useAuthForm();
+  const [farcasterData, setFarcasterData] = _react.useState.call(void 0, null);
+  const farcasterProps = _react.useMemo.call(void 0, 
+    () => ({
+      onSuccess: (data) => {
+        setFarcasterData(data);
+      }
+    }),
+    []
+  );
+  const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = _authkit.useSignIn.call(void 0, farcasterProps);
+  const handleFarcasterSignIn = (data) => _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+    try {
+      const oneTimeSecret = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithFarcaster(data);
+      yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
+      setDialogOpen(false);
+      setStep("initial");
+    } catch (error) {
+      console.error("Error during Farcaster sign-in:", error);
+    }
+  });
+  _react.useEffect.call(void 0, () => {
+    if (farcasterData != null) {
+      handleFarcasterSignIn(farcasterData);
+    }
+  }, [farcasterData]);
+  _react.useEffect.call(void 0, () => {
+    if (isConnected) {
+      signIn();
+    }
+  }, [isConnected]);
+  _react.useEffect.call(void 0, () => {
+    connect();
+  }, []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkGY6G3ZC2cjs.AuthFormBackButton,
+      {
+        onClick: () => {
+          signOut();
+          setStep("initial");
+        },
+        iconColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
+        ringColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "h3",
+          {
+            className: "text-lg font-semibold text-cm-text-primary mb-2",
+            style: { color: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary },
+            children: "Sign in with Farcaster"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "p",
+          {
+            className: "text-base font-normal text-cm-text-secondary",
+            style: { color: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textSecondary },
+            children: "Scan with your phone's camera to continue."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "bg-white aspect-square rounded-lg p-4",
+          style: {
+            backgroundColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.inputBackground,
+            borderRadius: appearance == null ? void 0 : appearance.borderRadius
+          },
+          children: qrCodeUrl != null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _authkit.QRCode, { uri: qrCodeUrl, size: 280 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-[246px] flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkB7LYPQ4Kcjs.Spinner,
+            {
+              style: {
+                color: (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.textSecondary,
+                fill: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.textPrimary
+              }
+            }
+          ) })
+        }
+      ),
+      qrCodeUrl ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "p",
+          {
+            className: "text-base text-center font-normal text-cm-text-secondary",
+            style: { color: (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.textSecondary },
+            children: "Alternatively, click on this link to open Warpcast."
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "a",
+          {
+            href: qrCodeUrl,
+            rel: "noopener noreferrer",
+            target: "_blank",
+            className: "text-base font-normal text-cm-link",
+            style: { color: (_i = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _i.textLink },
+            children: "Open Warpcast"
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+
+// src/components/auth/methods/web3/Web3SignIn.tsx
+
+function Web3SignIn() {
+  var _a, _b, _c, _d, _e;
+  const { step, appearance, setStep } = useAuthForm();
+  if (step !== "initial") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      className: _chunk5RX5WFEWcjs.classNames.call(void 0, 
+        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+        "transition-colors duration-200 ease-in-out",
+        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
+      ),
+      style: {
+        borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+        borderColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border,
+        backgroundColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.buttonBackground
+      },
+      onClick: () => setStep("web3"),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkKNOUJZN5cjs.WalletIcon,
+          {
+            className: "h-[21px] w-[21px] absolute left-[20px]",
+            style: { color: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary }
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", style: { margin: "0px 32px", color: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary }, children: "Continue with a wallet" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkAXZLLRBUcjs.ChevronRightIcon,
+          {
+            className: "h-[21px] w-[21px] absolute right-[20px]",
+            style: { color: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.textSecondary }
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: "Continue with a wallet" })
+      ]
+    }
+  );
+}
+
+// src/components/auth/methods/web3/Web3AuthWrapper.tsx
+
+var _wagmi = require('wagmi');
+
+function Web3AuthWrapper({ providerType, flag, icon }) {
+  var _a, _b;
+  const { crossmintAuth } = useCrossmintAuth();
+  const { appearance } = useAuthForm();
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const [error, setError] = _react.useState.call(void 0, null);
+  const chainId = _wagmi.useChainId.call(void 0, );
+  const { address, status: accountStatus } = _wagmi.useAccount.call(void 0, );
+  const { signMessageAsync, status: signMessageStatus } = _wagmi.useSignMessage.call(void 0, );
+  const { connect, connectors } = _wagmi.useConnect.call(void 0, {
+    mutation: {
+      onError: () => setIsLoading(false)
+    }
+  });
+  const isExtensionInstalled = (_b = (_a = window.ethereum) == null ? void 0 : _a[flag]) != null ? _b : false;
+  if (!isExtensionInstalled) {
+    providerType = "walletConnect";
+  }
+  const connector = connectors.find((c) => c.id === providerType);
+  _react.useEffect.call(void 0, () => {
+    if (address != null) {
+      handleSignIn();
+    }
+  }, [address]);
+  const handleSignIn = () => _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+    if (address == null) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const res = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithSmartWallet(address);
+      const signature = yield signMessageAsync({ message: res.challenge });
+      const authResponse = yield crossmintAuth == null ? void 0 : crossmintAuth.authenticateSmartWallet(address, signature);
+      const oneTimeSecret = authResponse.oneTimeSecret;
+      yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
+    } catch (error2) {
+      console.error(`Error connecting to ${providerType}:`, error2);
+      setError(`Error connecting to ${providerType}. Please try again or contact support.`);
+    } finally {
+      setIsLoading(false);
+    }
+  });
+  const isLoadingOrPending = isLoading || accountStatus === "connecting" || accountStatus === "reconnecting" || signMessageStatus === "pending";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkZCYU7QA6cjs.Web3ConnectButton,
+    {
+      icon,
+      appearance,
+      headingText: signMessageStatus === "pending" ? "Sign to verify" : "Connect your wallet",
+      buttonText: error != null && !isLoadingOrPending ? "Retry" : isLoadingOrPending ? "Connecting" : "Connect",
+      isLoading: isLoadingOrPending,
+      onConnectClick: () => {
+        if (address != null) {
+          handleSignIn();
+        } else if (connector) {
+          connect({ connector, chainId });
+        }
+      }
+    }
+  );
+}
+
+// src/components/auth/methods/web3/Web3Connectors.tsx
+
+
+function Web3Connectors() {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { appearance, step, setStep } = useAuthForm();
+  const { isConnected } = _wagmi.useAccount.call(void 0, );
+  const { disconnect } = _wagmi.useDisconnect.call(void 0, );
+  if (step === "web3") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        {
+          onClick: () => setStep("initial"),
+          iconColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
+          ringColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-center mb-6", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "h3",
+          {
+            className: "text-lg font-semibold text-cm-text-primary",
+            style: { color: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary },
+            children: "Connect wallet"
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[10px] w-full", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkDJ32OEWGcjs.Web3ProviderButton,
+            {
+              title: "Metamask",
+              appearance,
+              img: _chunkQK5J7FD3cjs.metamaskIcon,
+              onClick: () => {
+                if (isConnected) {
+                  disconnect();
+                }
+                setTimeout(() => {
+                  setStep("web3/metamask");
+                }, 200);
+              }
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkDJ32OEWGcjs.Web3ProviderButton,
+            {
+              title: "WalletConnect",
+              appearance,
+              img: _chunkQK5J7FD3cjs.walletConnectIcon,
+              onClick: () => {
+                if (isConnected) {
+                  disconnect();
+                }
+                setTimeout(() => {
+                  setStep("web3/walletconnect");
+                }, 200);
+              }
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  if (step === "web3/metamask") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        {
+          onClick: () => setStep("web3"),
+          iconColor: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary,
+          ringColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.accent
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthWrapper, { providerType: "metaMaskSDK", flag: "isMetaMask", icon: _chunkQK5J7FD3cjs.metamaskIcon })
+    ] });
+  }
+  if (step === "web3/walletconnect") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkGY6G3ZC2cjs.AuthFormBackButton,
+        {
+          onClick: () => setStep("web3"),
+          iconColor: (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.textPrimary,
+          ringColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.accent
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthWrapper, { providerType: "walletConnect", icon: _chunkQK5J7FD3cjs.walletConnectIcon })
+    ] });
+  }
+  return null;
+}
+
+// src/components/auth/methods/web3/Web3AuthFlow.tsx
+
+function Web3AuthFlow() {
+  const { step } = useAuthForm();
+  if (step.startsWith("web3")) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3Connectors, {});
+  }
+  if (step === "initial") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3SignIn, {});
+  }
+  return null;
+}
+
+// src/components/auth/AuthForm.tsx
+
+function AuthForm({ className }) {
+  var _a, _b, _c, _d;
+  const { step, appearance, loginMethods, baseUrl } = useAuthForm();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk5RX5WFEWcjs.classNames.call(void 0, "flex flex-col gap-[10px] antialiased animate-none", className), children: [
+    step === "initial" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "h1",
+        {
+          className: "text-2xl font-bold text-cm-text-primary",
+          style: { color: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary },
+          children: "Sign In"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "p",
+        {
+          className: "text-base font-normal mb-3 text-cm-text-secondary",
+          style: { color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary },
+          children: "Sign in using one of the options below"
+        }
+      )
+    ] }) : null,
+    loginMethods.includes("email") ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailAuthFlow, {}),
+      loginMethods.length > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { appearance, text: "OR" }) : null
+    ] }) : null,
+    loginMethods.includes("google") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GoogleSignIn, {}) : null,
+    loginMethods.includes("farcaster") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQQXBYOKAcjs.FarcasterProvider, { baseUrl, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FarcasterSignIn, {}) }) : null,
+    loginMethods.includes("web3") ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Web3AuthFlow, {}) : null,
+    step === "initial" || step === "otp" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkPBSL6JOFcjs.PoweredByCrossmint,
+      {
+        className: "mt-4 justify-center",
+        color: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textSecondary) != null ? _d : "#A4AFB2"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/auth/AuthFormDialog.tsx
+
+
+function AuthFormDialog({ open }) {
+  var _a, _b, _c;
+  const { appearance, setDialogOpen } = useAuthForm();
+  _react.useEffect.call(void 0, () => {
+    document.body.style.overflow = open ? "hidden" : "";
+  }, [open]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQT7UEJZGcjs.Dialog, { modal: false, open, onOpenChange: setDialogOpen, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkQT7UEJZGcjs.DialogContent,
+    {
+      onInteractOutside: (e) => e.preventDefault(),
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      closeButtonColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
+      closeButtonRingColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent,
+      className: "cm-responsive-border-radius-auth-dialog",
+      style: {
+        borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+        backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.background
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactvisuallyhidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQT7UEJZGcjs.DialogTitle, { children: "Crossmint Auth" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactvisuallyhidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQT7UEJZGcjs.DialogDescription, { children: "Sign in via Crossmint" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AuthForm, { className: "max-w-[448px]" })
+      ]
+    }
+  ) });
+}
+
+// src/providers/CrossmintAuthProvider.tsx
+
+var defaultContextValue = {
+  crossmintAuth: void 0,
+  login: () => {
+  },
+  logout: () => {
+  },
+  jwt: void 0,
+  user: void 0,
+  status: "logged-out",
+  getUser: () => {
+  }
+};
+var AuthContext = _react.createContext.call(void 0, defaultContextValue);
+var defaultEmbeddedWallets = {
+  defaultChain: "base-sepolia",
+  createOnLogin: "off",
+  type: "evm-smart-wallet"
+};
+function CrossmintAuthProvider({
+  embeddedWallets = defaultEmbeddedWallets,
+  children,
+  appearance,
+  loginMethods = ["email", "google"],
+  refreshRoute,
+  logoutRoute
+}) {
+  const [user, setUser] = _react.useState.call(void 0, void 0);
+  const { crossmint, setJwt } = _chunkKEKBOJCFcjs.useCrossmint.call(void 0, "CrossmintAuthProvider must be used within CrossmintProvider");
+  const crossmintAuthRef = _react.useRef.call(void 0, null);
+  const crossmintAuth = _react.useMemo.call(void 0, () => {
+    if (!crossmintAuthRef.current) {
+      crossmintAuthRef.current = _clientsdkauth.CrossmintAuth.from(crossmint, {
+        callbacks: {
+          onLogout: () => {
+            setJwt(void 0);
+            setUser(void 0);
+          },
+          onTokenRefresh: (authMaterial) => {
+            setJwt(authMaterial.jwt);
+            setUser(authMaterial.user);
+          }
+        },
+        refreshRoute,
+        logoutRoute
+      });
+    }
+    return crossmintAuthRef.current;
+  }, []);
+  const crossmintBaseUrl = _commonsdkbase.validateApiKeyAndGetCrossmintBaseUrl.call(void 0, crossmint.apiKey);
+  const [dialogOpen, setDialogOpen] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    if (crossmint.jwt == null) {
+      const jwt = _clientsdkauth.getCookie.call(void 0, _commonsdkauth.SESSION_PREFIX);
+      setJwt(jwt);
+    }
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    if (crossmint.jwt == null) {
+      return;
+    }
+    setDialogOpen(false);
+  }, [crossmint.jwt]);
+  const login = () => {
+    if (crossmint.jwt != null) {
+      console.log("User already logged in");
+      return;
+    }
+    setDialogOpen(true);
+  };
+  const logout = () => {
+    crossmintAuth.logout();
+  };
+  const getAuthStatus = () => {
+    if (crossmint.jwt != null) {
+      return "logged-in";
+    }
+    if (dialogOpen) {
+      return "in-progress";
+    }
+    return "logged-out";
+  };
+  const getUser = () => _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+    if (crossmint.jwt == null) {
+      console.log("User not logged in");
+      return;
+    }
+    const user2 = yield crossmintAuth.getUser();
+    setUser(user2);
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBE2ZLB3Lcjs.TwindProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    AuthContext.Provider,
+    {
+      value: {
+        crossmintAuth,
+        login,
+        logout,
+        jwt: crossmint.jwt,
+        user,
+        status: getAuthStatus(),
+        getUser
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        CrossmintWalletProvider,
+        {
+          defaultChain: embeddedWallets.defaultChain,
+          showPasskeyHelpers: embeddedWallets.showPasskeyHelpers,
+          appearance,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            AuthFormProvider,
+            {
+              initialState: {
+                appearance,
+                setDialogOpen,
+                loginMethods,
+                embeddedWallets,
+                baseUrl: crossmintBaseUrl
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletManager, { embeddedWallets, accessToken: crossmint.jwt, children }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AuthFormDialog, { open: dialogOpen })
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+function WalletManager({
+  embeddedWallets,
+  children,
+  accessToken
+}) {
+  const { getOrCreateWallet, clearWallet, status } = useWallet();
+  _react.useEffect.call(void 0, () => {
+    if (embeddedWallets.createOnLogin === "all-users" && status === "not-loaded" && accessToken != null) {
+      getOrCreateWallet({
+        type: embeddedWallets.type,
+        signer: { type: "PASSKEY" }
+      });
+    }
+    if (status === "loaded" && accessToken == null) {
+      clearWallet();
+    }
+  }, [accessToken, status]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
+}
+
+// src/hooks/useAuth.ts
+function useAuth() {
+  const context = _react.useContext.call(void 0, AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+// src/providers/CrossmintWalletProvider.tsx
+
+var WalletContext = _react.createContext.call(void 0, {
+  status: "not-loaded",
+  getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
+  clearWallet: () => {
+  }
+});
+function CrossmintWalletProvider({
+  children,
+  defaultChain,
+  showPasskeyHelpers = true,
+  // enabled by default
+  appearance
+}) {
+  const { crossmint } = _chunkKEKBOJCFcjs.useCrossmint.call(void 0, "CrossmintWalletProvider must be used within CrossmintProvider");
+  const smartWalletSDK = _react.useMemo.call(void 0, () => _clientsdksmartwallet.SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
+  const [walletState, setWalletState] = _react.useState.call(void 0, { status: "not-loaded" });
+  const [passkeyPromptState, setPasskeyPromptState] = _react.useState.call(void 0, { open: false });
+  const getOrCreateWallet = (..._0) => _chunk4DAZAO6Ycjs.__async.call(void 0, this, [..._0], function* (config = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }) {
+    if (walletState.status == "in-progress") {
+      console.log("Wallet already loading");
+      return { startedCreation: false, reason: "Wallet is already loading." };
+    }
+    if (crossmint.jwt == null) {
+      return { startedCreation: false, reason: `Jwt not set in "CrossmintProvider".` };
+    }
+    try {
+      setWalletState({ status: "in-progress" });
+      const wallet = yield smartWalletSDK.getOrCreateWallet(
+        { jwt: crossmint.jwt },
+        defaultChain,
+        enhanceConfigWithPasskeyPrompts(config)
+      );
+      setWalletState({ status: "loaded", wallet });
+    } catch (error) {
+      console.error("There was an error creating a wallet ", error);
+      setWalletState(deriveErrorState(error));
+    }
+    return { startedCreation: true };
+  });
+  const enhanceConfigWithPasskeyPrompts = (config) => {
+    if (showPasskeyHelpers && config.signer.type === "PASSKEY") {
+      return _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, config), {
+        signer: _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, config.signer), {
+          onPrePasskeyRegistration: createPasskeyPrompt("create-wallet"),
+          onPasskeyRegistrationError: createPasskeyPrompt("create-wallet-error"),
+          onFirstTimePasskeySigning: createPasskeyPrompt("transaction"),
+          onFirstTimePasskeySigningError: createPasskeyPrompt("transaction-error")
+        })
+      });
+    }
+    return config;
+  };
+  const createPasskeyPrompt = (type) => () => new Promise((resolve) => {
+    setPasskeyPromptState({
+      type,
+      open: true,
+      primaryActionOnClick: () => {
+        setPasskeyPromptState({ open: false });
+        resolve();
+      },
+      secondaryActionOnClick: () => {
+        setPasskeyPromptState({ open: false });
+        resolve();
+      }
+    });
+  });
+  const clearWallet = () => {
+    setWalletState({ status: "not-loaded" });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, WalletContext.Provider, { value: _chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, walletState), { getOrCreateWallet, clearWallet }), children: [
+    children,
+    passkeyPromptState.open ? _reactdom.createPortal.call(void 0, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMJHLKJ6Xcjs.PasskeyPrompt, { state: passkeyPromptState, appearance }), document.body) : null
+  ] });
+}
+function deriveErrorState(error) {
+  if (error instanceof _clientsdksmartwallet.SmartWalletError) {
+    return { status: "loading-error", error };
+  }
+  const message = error instanceof Error ? error.message : String(error);
+  const stack = error instanceof Error ? error.stack : void 0;
+  return { status: "loading-error", error: new (0, _clientsdksmartwallet.SmartWalletError)(`Unknown Wallet Error: ${message}`, stack) };
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.WalletContext = WalletContext; exports.CrossmintWalletProvider = CrossmintWalletProvider; exports.useWallet = useWallet; exports.useCrossmintAuth = useCrossmintAuth; exports.useAuthForm = useAuthForm; exports.AuthFormProvider = AuthFormProvider; exports.EMAIL_VERIFICATION_TOKEN_LENGTH = EMAIL_VERIFICATION_TOKEN_LENGTH; exports.EmailOTPInput = EmailOTPInput; exports.EmailSignIn = EmailSignIn; exports.EmailAuthFlow = EmailAuthFlow; exports.Divider = Divider; exports.useOAuthWindowListener = useOAuthWindowListener; exports.GoogleSignIn = GoogleSignIn; exports.FarcasterSignIn = FarcasterSignIn; exports.Web3SignIn = Web3SignIn; exports.Web3AuthWrapper = Web3AuthWrapper; exports.Web3Connectors = Web3Connectors; exports.Web3AuthFlow = Web3AuthFlow; exports.AuthForm = AuthForm; exports.AuthFormDialog = AuthFormDialog; exports.AuthContext = AuthContext; exports.CrossmintAuthProvider = CrossmintAuthProvider; exports.useAuth = useAuth;
+//# sourceMappingURL=chunk-FOCUIKYH.cjs.map