@crossmint/client-sdk-react-ui 1.11.0 → 1.11.1

package/dist/chunk-LBGALVRW.js

@@ -1,1111 +0,0 @@
-import {
-  FarcasterProvider
-} from "./chunk-A7J4DAE7.js";
-import {
-  PasskeyPrompt
-} from "./chunk-XEZF7G64.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle
-} from "./chunk-NMXFWIFA.js";
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot
-} from "./chunk-33WZFL2D.js";
-import {
-  PoweredByCrossmint
-} from "./chunk-FKIMKZ4Y.js";
-import {
-  Spinner
-} from "./chunk-QTL5I5C2.js";
-import {
-  TwindProvider
-} from "./chunk-HATQVB6H.js";
-import {
-  classNames
-} from "./chunk-RZPQIRIY.js";
-import {
-  LeftArrowIcon
-} from "./chunk-ZDQGQY7Z.js";
-import {
-  AlertIcon
-} from "./chunk-7KIY6DLW.js";
-import {
-  EmailOtpIcon
-} from "./chunk-I63FQCIV.js";
-import {
-  FarcasterIcon
-} from "./chunk-ZIHCLVCD.js";
-import {
-  GoogleIcon
-} from "./chunk-YWVQCHQF.js";
-import {
-  useCrossmint
-} from "./chunk-3J6CUUWT.js";
-import {
-  __async,
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-CRTRMMJ7.js";
-
-// src/providers/CrossmintWalletProvider.tsx
-import { createContext as createContext3, useMemo as useMemo3, useState as useState8 } from "react";
-import { createPortal } from "react-dom";
-import {
-  SmartWalletError,
-  SmartWalletSDK
-} from "@crossmint/client-sdk-smart-wallet";
-
-// src/hooks/useWallet.ts
-import { useContext } from "react";
-function useWallet() {
-  const walletContext = useContext(WalletContext);
-  if (!walletContext) {
-    throw new Error("useWallet must be used within CrossmintAuthProvider or CrossmintWalletProvider");
-  }
-  return walletContext;
-}
-
-// src/hooks/useAuth.ts
-import { useContext as useContext4 } from "react";
-
-// src/providers/CrossmintAuthProvider.tsx
-import { createContext as createContext2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState7 } from "react";
-import { CrossmintAuth, getCookie } from "@crossmint/client-sdk-auth";
-import { validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
-import { SESSION_PREFIX } from "@crossmint/common-sdk-auth";
-
-// src/components/auth/AuthFormDialog.tsx
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-
-// src/providers/auth/AuthFormProvider.tsx
-import { createContext, useCallback, useContext as useContext3, useEffect, useState } from "react";
-
-// src/hooks/useCrossmintAuth.ts
-import { useContext as useContext2 } from "react";
-function useCrossmintAuth() {
-  const context = useContext2(AuthContext);
-  if (!context) {
-    throw new Error("useCrossmintAuth must be used within a CrossmintAuthProvider");
-  }
-  return context;
-}
-
-// src/providers/auth/AuthFormProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var initialOAuthUrlMap = {
-  google: ""
-  // Farcaster is not included here as it uses a different authentication method
-};
-var AuthFormContext = createContext(void 0);
-var useAuthForm = () => {
-  const context = useContext3(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] = useState("initial");
-  const [error, setError] = useState(null);
-  const [oauthUrlMap, setOauthUrlMap] = useState(initialOAuthUrlMap);
-  const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(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 = useCallback(() => __async(void 0, null, function* () {
-    setIsLoadingOauthUrlMap(true);
-    try {
-      const oauthProviders = loginMethods.filter(
-        (method) => method in initialOAuthUrlMap
-      );
-      const oauthPromiseList = oauthProviders.map((provider) => __async(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 (error2) {
-      console.error("Error fetching OAuth URLs:", error2);
-      setError("Unable to load oauth providers. Please try again later.");
-    } finally {
-      setIsLoadingOauthUrlMap(false);
-    }
-  }), [loginMethods, crossmintAuth]);
-  useEffect(() => {
-    preFetchAndSetOauthUrl();
-  }, [preFetchAndSetOauthUrl]);
-  const handleToggleDialog = (open) => {
-    setDialogOpen == null ? void 0 : setDialogOpen(open);
-    if (!open) {
-      setTimeout(() => setStep("initial"), 250);
-    }
-  };
-  const value = {
-    step,
-    error,
-    baseUrl,
-    appearance,
-    loginMethods,
-    oauthUrlMap,
-    isLoadingOauthUrlMap,
-    setDialogOpen: handleToggleDialog,
-    setError,
-    setStep
-  };
-  return /* @__PURE__ */ jsx(AuthFormContext.Provider, { value, children });
-};
-
-// src/components/auth/AuthForm.tsx
-import { lazy } from "react";
-import Color2 from "color";
-
-// src/components/auth/methods/email/EmailAuthFlow.tsx
-import { useState as useState4 } from "react";
-
-// src/components/auth/methods/email/EmailOTPInput.tsx
-import { useState as useState2 } from "react";
-
-// src/components/auth/AuthFormBackButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var AuthFormBackButton = (_a) => {
-  var _b = _a, {
-    className,
-    iconColor,
-    ringColor,
-    onClick
-  } = _b, props = __objRest(_b, [
-    "className",
-    "iconColor",
-    "ringColor",
-    "onClick"
-  ]);
-  const { setError } = useAuthForm();
-  return /* @__PURE__ */ jsx2(
-    "button",
-    __spreadProps(__spreadValues({
-      className: classNames(
-        "absolute left-4 top-4 min-[480px]:!left-6 min-[480px]:!top-6 rounded-full opacity-70 ring-offset-background text-cm-text-primary transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none",
-        className
-      ),
-      onClick: (event) => {
-        setError(null);
-        onClick == null ? void 0 : onClick(event);
-      }
-    }, props), {
-      children: /* @__PURE__ */ jsx2(LeftArrowIcon, { className: "w-6 h-6", style: { color: iconColor } })
-    })
-  );
-};
-
-// src/components/auth/methods/email/EmailOTPInput.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-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, setError } = useAuthForm();
-  const [token, setToken] = useState2("");
-  const [hasError, setHasError] = useState2(false);
-  const [loading, setLoading] = useState2(false);
-  const handleOnSubmit = () => __async(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 (error) {
-      console.error("Error confirming email OTP", error);
-      setError("Invalid code. Please try again.");
-      setHasError(true);
-    } finally {
-      setLoading(false);
-    }
-  });
-  const handleOnBack = () => {
-    setStep("initial");
-    setOtpEmailData(null);
-  };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx3(
-      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__ */ jsxs("div", { className: "flex flex-col items-center justify-start w-full", children: [
-      /* @__PURE__ */ jsx3("div", { className: "relative left-3", children: /* @__PURE__ */ jsx3(
-        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__ */ jsx3(
-        "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__ */ jsx3(
-        "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__ */ jsx3("div", { className: "py-8", children: /* @__PURE__ */ jsx3(
-        InputOTP,
-        {
-          maxLength: EMAIL_VERIFICATION_TOKEN_LENGTH,
-          value: token,
-          onChange: (val) => {
-            setToken(val);
-            setHasError(false);
-            setError(null);
-          },
-          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__ */ jsxs(InputOTPGroup, { children: [
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 0, hasError }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 1, hasError }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 2, hasError }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 3, hasError }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 4, hasError }),
-            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 5, hasError })
-          ] })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("p", { className: "text-sm leading-tight text-cm-text-secondary text-center", children: [
-        /* @__PURE__ */ jsx3("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__ */ jsx3(
-          "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
-import { useState as useState3 } from "react";
-import Color from "color";
-import { isEmailValid } from "@crossmint/common-sdk-auth";
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function EmailSignIn({ setOtpEmailData }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep, setError } = useAuthForm();
-  const [emailInput, setEmailInput] = useState3("");
-  const [emailError, setEmailError] = useState3("");
-  const [isLoading, setIsLoading] = useState3(false);
-  function handleOnSubmit(e) {
-    return __async(this, null, function* () {
-      e.preventDefault();
-      if (!isEmailValid(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);
-        setError("Failed to send email. Please try again or contact support.");
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-start justify-start w-full rounded-lg", children: /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs2(
-      "form",
-      {
-        role: "form",
-        className: "relative",
-        onSubmit: handleOnSubmit,
-        noValidate: true,
-        children: [
-          /* @__PURE__ */ jsx4("label", { htmlFor: "emailInput", className: "sr-only", children: "Email" }),
-          /* @__PURE__ */ jsx4(
-            "input",
-            {
-              className: classNames(
-                "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 Color((_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("");
-                setError(null);
-              },
-              readOnly: isLoading,
-              "aria-describedby": "emailError"
-            }
-          ),
-          /* @__PURE__ */ jsxs2("div", { className: "absolute inset-y-0 right-0 flex items-center pr-4", children: [
-            emailError && /* @__PURE__ */ jsx4(AlertIcon, { customColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.danger }),
-            isLoading && /* @__PURE__ */ jsx4(
-              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__ */ jsx4(
-              "button",
-              {
-                type: "submit",
-                className: classNames("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__ */ jsx4("p", { className: "text-xs text-red-500 mb-2 pt-2", children: emailError })
-  ] }) }) });
-}
-
-// src/components/auth/methods/email/EmailAuthFlow.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function EmailAuthFlow() {
-  const { step } = useAuthForm();
-  const [otpEmailData, setOtpEmailData] = useState4(null);
-  if (step === "otp") {
-    return /* @__PURE__ */ jsx5(EmailOTPInput, { otpEmailData, setOtpEmailData });
-  }
-  if (step === "initial") {
-    return /* @__PURE__ */ jsx5(EmailSignIn, { setOtpEmailData });
-  }
-  return null;
-}
-
-// src/components/common/Divider.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function Divider({ appearance, text }) {
-  var _a, _b, _c;
-  const { step } = useAuthForm();
-  if (step !== "initial") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center w-full pt-2 pb-3", children: [
-    /* @__PURE__ */ jsx6("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__ */ jsx6(
-      "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__ */ jsx6("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
-import { ChildWindow, PopupWindow } from "@crossmint/client-sdk-window";
-import { useEffect as useEffect2, useRef, useState as useState5 } from "react";
-import { z } from "zod";
-var useOAuthWindowListener = (provider) => {
-  const { crossmintAuth } = useCrossmintAuth();
-  const { oauthUrlMap, setError } = useAuthForm();
-  const [isLoading, setIsLoading] = useState5(false);
-  const childRef = useRef(null);
-  useEffect2(() => {
-    if (childRef.current == null) {
-      childRef.current = new ChildWindow(window.opener || window.parent, "*", {
-        incomingEvents
-      });
-    }
-    return () => {
-      if (childRef.current != null) {
-        childRef.current.off("authMaterialFromPopupCallback");
-      }
-    };
-  }, []);
-  const createPopupAndSetupListeners = () => __async(void 0, null, function* () {
-    if (childRef.current == null) {
-      throw new Error("Child window not initialized");
-    }
-    setIsLoading(true);
-    setError(null);
-    const popup = yield PopupWindow.init(oauthUrlMap[provider], {
-      awaitToLoad: false,
-      crossOrigin: true,
-      width: 400,
-      height: 700
-    });
-    const handleAuthMaterial = (data) => __async(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);
-    });
-    const handleError = (data) => {
-      var _a;
-      setError(data.error);
-      (_a = childRef.current) == null ? void 0 : _a.off("errorFromPopupCallback");
-      popup.window.close();
-      setIsLoading(false);
-    };
-    childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
-    childRef.current.on("errorFromPopupCallback", handleError);
-    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: z.object({ oneTimeSecret: z.string() }),
-  errorFromPopupCallback: z.object({ error: z.string() })
-};
-
-// src/components/auth/methods/google/GoogleSignIn.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function GoogleSignIn(_a) {
-  var props = __objRest(_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__ */ jsxs4(
-    "button",
-    __spreadProps(__spreadValues({
-      className: classNames(
-        "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__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsx7(GoogleIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
-          isLoading ? /* @__PURE__ */ jsx7(
-            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__ */ jsx7(
-            "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__ */ jsx7("span", { className: "sr-only", children: "Sign in with Google" })
-      ]
-    })
-  );
-}
-
-// src/components/auth/methods/farcaster/FarcasterSignIn.tsx
-import { useEffect as useEffect3, useMemo, useState as useState6 } from "react";
-import { useSignIn, QRCode } from "@farcaster/auth-kit";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function FarcasterSignIn() {
-  var _a, _b;
-  const { step, appearance, setStep, setError } = useAuthForm();
-  if (step === "initial") {
-    return /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsxs5(
-      "button",
-      {
-        className: classNames(
-          "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");
-          setError(null);
-        },
-        children: [
-          /* @__PURE__ */ jsx8(FarcasterIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
-          /* @__PURE__ */ jsx8(
-            "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__ */ jsx8("span", { className: "sr-only", children: "Sign in with Farcaster" })
-        ]
-      }
-    ) });
-  }
-  if (step === "qrCode") {
-    return /* @__PURE__ */ jsx8(FarcasterQRCode, {});
-  }
-  return null;
-}
-function FarcasterQRCode() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
-  const [farcasterData, setFarcasterData] = useState6(null);
-  const farcasterProps = useMemo(
-    () => ({
-      onSuccess: (data) => {
-        setFarcasterData(data);
-      }
-    }),
-    []
-  );
-  const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
-  const handleFarcasterSignIn = (data) => __async(this, null, function* () {
-    setError(null);
-    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);
-      setError("Failed to sign in with Farcaster");
-    }
-  });
-  useEffect3(() => {
-    if (farcasterData != null) {
-      handleFarcasterSignIn(farcasterData);
-    }
-  }, [farcasterData]);
-  useEffect3(() => {
-    if (isConnected) {
-      signIn();
-    }
-  }, [isConnected]);
-  useEffect3(() => {
-    connect();
-  }, []);
-  return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsx8(
-      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__ */ jsxs5("div", { className: "flex flex-col items-center gap-4", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx8(
-          "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__ */ jsx8(
-          "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__ */ jsx8(
-        "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__ */ jsx8(QRCode, { uri: qrCodeUrl, size: 280 }) : /* @__PURE__ */ jsx8("div", { className: "min-h-[246px] flex items-center justify-center", children: /* @__PURE__ */ jsx8(
-            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__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx8(
-          "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__ */ jsx8(
-          "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/AuthForm.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var Web3AuthFlow = lazy(
-  () => (
-    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-    import("./components/auth/methods/web3/Web3AuthFlow.js").then((mod) => ({
-      default: mod.Web3AuthFlow
-    }))
-  )
-);
-function AuthForm({ className }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: classNames(
-        "relative p-6 pb-4 !min-[480px]:p-10 !min-[480px]:pb-8 flex flex-col gap-[10px] antialiased animate-none",
-        className
-      ),
-      children: [
-        error ? /* @__PURE__ */ jsxs6(
-          "div",
-          {
-            className: "flex items-start justify-start w-full rounded-lg p-2 mt-4 bg-cm-danger-muted",
-            style: {
-              backgroundColor: new Color2((_b = (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.danger) != null ? _b : "#f44336").alpha(0.12).toString()
-            },
-            children: [
-              /* @__PURE__ */ jsx9(AlertIcon, { customColor: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.danger) != null ? _d : "#f44336" }),
-              /* @__PURE__ */ jsx9("p", { className: "ml-2 text-sm", style: { color: (_f = (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.danger) != null ? _f : "#f44336" }, children: error })
-            ]
-          }
-        ) : null,
-        step === "initial" ? /* @__PURE__ */ jsxs6("div", { children: [
-          /* @__PURE__ */ jsx9(
-            "h1",
-            {
-              className: "text-2xl font-bold text-cm-text-primary",
-              style: { color: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.textPrimary },
-              children: "Sign In"
-            }
-          ),
-          /* @__PURE__ */ jsx9(
-            "p",
-            {
-              className: "text-base font-normal mb-3 text-cm-text-secondary",
-              style: { color: (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.textSecondary },
-              children: "Sign in using one of the options below"
-            }
-          )
-        ] }) : null,
-        loginMethods.includes("email") ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          /* @__PURE__ */ jsx9(EmailAuthFlow, {}),
-          loginMethods.length > 1 ? /* @__PURE__ */ jsx9(Divider, { appearance, text: "OR" }) : null
-        ] }) : null,
-        loginMethods.includes("google") ? /* @__PURE__ */ jsx9(GoogleSignIn, {}) : null,
-        loginMethods.includes("farcaster") ? /* @__PURE__ */ jsx9(FarcasterProvider, { baseUrl, children: /* @__PURE__ */ jsx9(FarcasterSignIn, {}) }) : null,
-        loginMethods.includes("web3") ? /* @__PURE__ */ jsx9(Web3AuthFlow, {}) : null,
-        step === "initial" || step === "otp" ? /* @__PURE__ */ jsx9(
-          PoweredByCrossmint,
-          {
-            className: "mt-4 justify-center",
-            color: (_j = (_i = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _i.textSecondary) != null ? _j : "#A4AFB2"
-          }
-        ) : null
-      ]
-    }
-  );
-}
-
-// src/components/auth/AuthFormDialog.tsx
-import { useEffect as useEffect4 } from "react";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-function AuthFormDialog({ open }) {
-  var _a, _b, _c;
-  const { appearance, setDialogOpen } = useAuthForm();
-  useEffect4(() => {
-    document.body.style.overflow = open ? "hidden" : "";
-  }, [open]);
-  return /* @__PURE__ */ jsx10(Dialog, { modal: false, open, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs7(
-    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 !p-0 !min-[480px]:p-0",
-      style: {
-        borderRadius: appearance == null ? void 0 : appearance.borderRadius,
-        backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.background
-      },
-      children: [
-        /* @__PURE__ */ jsx10(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx10(DialogTitle, { children: "Crossmint Auth" }) }),
-        /* @__PURE__ */ jsx10(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx10(DialogDescription, { children: "Sign in via Crossmint" }) }),
-        /* @__PURE__ */ jsx10(AuthForm, { className: "max-w-[448px]" })
-      ]
-    }
-  ) });
-}
-
-// src/providers/CrossmintAuthProvider.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var defaultContextValue = {
-  crossmintAuth: void 0,
-  login: () => {
-  },
-  logout: () => {
-  },
-  jwt: void 0,
-  user: void 0,
-  status: "logged-out",
-  getUser: () => {
-  }
-};
-var AuthContext = createContext2(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] = useState7(void 0);
-  const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
-  const crossmintAuthRef = useRef2(null);
-  const crossmintAuth = useMemo2(() => {
-    if (!crossmintAuthRef.current) {
-      crossmintAuthRef.current = 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 = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
-  const [dialogOpen, setDialogOpen] = useState7(false);
-  useEffect5(() => {
-    if (crossmint.jwt == null) {
-      const jwt = getCookie(SESSION_PREFIX);
-      setJwt(jwt);
-    }
-  }, []);
-  useEffect5(() => {
-    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 = () => __async(this, null, function* () {
-    if (crossmint.jwt == null) {
-      console.log("User not logged in");
-      return;
-    }
-    const user2 = yield crossmintAuth.getUser();
-    setUser(user2);
-  });
-  return /* @__PURE__ */ jsx11(TwindProvider, { children: /* @__PURE__ */ jsx11(
-    AuthContext.Provider,
-    {
-      value: {
-        crossmintAuth,
-        login,
-        logout,
-        jwt: crossmint.jwt,
-        user,
-        status: getAuthStatus(),
-        getUser
-      },
-      children: /* @__PURE__ */ jsx11(
-        CrossmintWalletProvider,
-        {
-          defaultChain: embeddedWallets.defaultChain,
-          showPasskeyHelpers: embeddedWallets.showPasskeyHelpers,
-          appearance,
-          children: /* @__PURE__ */ jsxs8(
-            AuthFormProvider,
-            {
-              initialState: {
-                appearance,
-                setDialogOpen,
-                loginMethods,
-                embeddedWallets,
-                baseUrl: crossmintBaseUrl
-              },
-              children: [
-                /* @__PURE__ */ jsx11(WalletManager, { embeddedWallets, accessToken: crossmint.jwt, children }),
-                /* @__PURE__ */ jsx11(AuthFormDialog, { open: dialogOpen })
-              ]
-            }
-          )
-        }
-      )
-    }
-  ) });
-}
-function WalletManager({
-  embeddedWallets,
-  children,
-  accessToken
-}) {
-  const { getOrCreateWallet, clearWallet, status } = useWallet();
-  useEffect5(() => {
-    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__ */ jsx11(Fragment5, { children });
-}
-
-// src/hooks/useAuth.ts
-function useAuth() {
-  const context = useContext4(AuthContext);
-  if (context === void 0) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-}
-
-// src/providers/CrossmintWalletProvider.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var WalletContext = createContext3({
-  status: "not-loaded",
-  getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
-  clearWallet: () => {
-  }
-});
-function CrossmintWalletProvider({
-  children,
-  defaultChain,
-  showPasskeyHelpers = true,
-  // enabled by default
-  appearance
-}) {
-  const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
-  const smartWalletSDK = useMemo3(() => SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
-  const [walletState, setWalletState] = useState8({ status: "not-loaded" });
-  const [passkeyPromptState, setPasskeyPromptState] = useState8({ open: false });
-  const getOrCreateWallet = (..._0) => __async(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 __spreadProps(__spreadValues({}, config), {
-        signer: __spreadProps(__spreadValues({}, 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__ */ jsxs9(WalletContext.Provider, { value: __spreadProps(__spreadValues({}, walletState), { getOrCreateWallet, clearWallet }), children: [
-    children,
-    passkeyPromptState.open ? createPortal(/* @__PURE__ */ jsx12(PasskeyPrompt, { state: passkeyPromptState, appearance }), document.body) : null
-  ] });
-}
-function deriveErrorState(error) {
-  if (error instanceof 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 SmartWalletError(`Unknown Wallet Error: ${message}`, stack) };
-}
-
-export {
-  WalletContext,
-  CrossmintWalletProvider,
-  useWallet,
-  useCrossmintAuth,
-  useAuthForm,
-  AuthFormProvider,
-  AuthFormBackButton,
-  EMAIL_VERIFICATION_TOKEN_LENGTH,
-  EmailOTPInput,
-  EmailSignIn,
-  EmailAuthFlow,
-  Divider,
-  useOAuthWindowListener,
-  GoogleSignIn,
-  FarcasterSignIn,
-  AuthForm,
-  AuthFormDialog,
-  AuthContext,
-  CrossmintAuthProvider,
-  useAuth
-};
-//# sourceMappingURL=chunk-LBGALVRW.js.map