@spicenet-io/spiceflow-ui 1.9.33 → 1.9.35

package/dist/auth-dynamic.js

@@ -1,1026 +1,12 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useEffect, useState, useCallback } from 'react';
-import { c as createTheme, B as Button } from './Button-CWjGZdAM.js';
-import { useDynamicContext, useConnectWithOtp } from '@dynamic-labs/sdk-react-core';
-
-const Input = ({
-  label,
-  error,
-  helper,
-  fullWidth = false,
-  startAdornment,
-  endAdornment,
-  className = "",
-  style,
-  theme: providedTheme,
-  ...props
-}) => {
-  const theme = providedTheme || createTheme("light");
-  const containerStyles = {
-    width: fullWidth ? "100%" : "auto",
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing.xs
-  };
-  const inputContainerStyles = {
-    position: "relative",
-    display: "flex",
-    alignItems: "center"
-  };
-  const inputStyles = {
-    backgroundColor: theme.colors.surface,
-    border: `1px solid ${error ? theme.colors.error : theme.colors.border}`,
-    borderRadius: theme.borderRadius.md,
-    color: theme.colors.text,
-    fontSize: theme.typography.fontSize.base,
-    padding: theme.spacing.md,
-    paddingLeft: startAdornment ? theme.spacing.xl : theme.spacing.md,
-    paddingRight: endAdornment ? theme.spacing.xl : theme.spacing.md,
-    width: "100%",
-    outline: "none",
-    transition: `border-color ${theme.animation.normal}`,
-    ":focus": {
-      borderColor: error ? theme.colors.error : theme.colors.primary
-    },
-    ":hover": {
-      borderColor: error ? theme.colors.error : theme.colors.borderHover
-    },
-    "::placeholder": {
-      color: theme.colors.textMuted
-    }
-  };
-  const labelStyles = {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.medium,
-    color: theme.colors.textSecondary
-  };
-  const helperStyles = {
-    fontSize: theme.typography.fontSize.xs,
-    color: error ? theme.colors.error : theme.colors.textMuted
-  };
-  const adornmentStyles = {
-    position: "absolute",
-    top: "50%",
-    transform: "translateY(-50%)",
-    color: theme.colors.textMuted,
-    pointerEvents: "none"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: containerStyles, children: [
-    label && /* @__PURE__ */ jsx("label", { style: labelStyles, children: label }),
-    /* @__PURE__ */ jsxs("div", { style: inputContainerStyles, children: [
-      startAdornment && /* @__PURE__ */ jsx("div", { style: { ...adornmentStyles, left: theme.spacing.md }, children: startAdornment }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          style: { ...inputStyles, ...style },
-          className,
-          ...props
-        }
-      ),
-      endAdornment && /* @__PURE__ */ jsx("div", { style: { ...adornmentStyles, right: theme.spacing.md }, children: endAdornment })
-    ] }),
-    (error || helper) && /* @__PURE__ */ jsx("span", { style: helperStyles, children: error || helper })
-  ] });
-};
-
-const Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  maxWidth = "32rem",
-  className = "",
-  theme: providedTheme
-}) => {
-  const theme = providedTheme || createTheme("light");
-  useEffect(() => {
-    const handleEscape = (event) => {
-      if (event.key === "Escape") {
-        onClose();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
-    }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "unset";
-    };
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  const overlayStyles = {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3,
-    padding: theme.spacing.md
-  };
-  const modalStyles = {
-    backgroundColor: theme.colors.background,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: theme.borderRadius.lg,
-    boxShadow: theme.shadows.lg,
-    maxWidth,
-    width: "100%",
-    maxHeight: "90vh",
-    overflow: "auto"
-  };
-  const headerStyles = {
-    padding: theme.spacing.lg,
-    borderBottom: `1px solid ${theme.colors.border}`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  };
-  const titleStyles = {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.text,
-    margin: 0
-  };
-  const closeButtonStyles = {
-    background: "none",
-    border: "none",
-    color: theme.colors.textMuted,
-    cursor: "pointer",
-    padding: theme.spacing.sm,
-    borderRadius: theme.borderRadius.sm,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: `color ${theme.animation.normal}`,
-    ":hover": {
-      color: theme.colors.text
-    }
-  };
-  const contentStyles = {
-    padding: theme.spacing.lg
-  };
-  return /* @__PURE__ */ jsx("div", { style: overlayStyles, onClick: onClose, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: modalStyles,
-      className,
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        title && /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
-          /* @__PURE__ */ jsx("h2", { style: titleStyles, children: title }),
-          /* @__PURE__ */ jsx("button", { style: closeButtonStyles, onClick: onClose, children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              width: "20",
-              height: "20",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: [
-                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-              ]
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: contentStyles, children })
-      ]
-    }
-  ) });
-};
-
-const DynamicLoginInternal = ({
-  onAuthSuccess,
-  onAuthError,
-  theme: themeMode = "light",
-  className = "",
-  buttonText = "Login with Dynamic",
-  autoTrigger = false
-}) => {
-  const theme = createTheme(themeMode);
-  const [isClient, setIsClient] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(autoTrigger);
-  const [hasAutoTriggered, setHasAutoTriggered] = useState(false);
-  const [email, setEmail] = useState("");
-  const [otp, setOtp] = useState("");
-  const [error, setError] = useState(null);
-  const [walletCreationStartTime, setWalletCreationStartTime] = useState(null);
-  const [timeoutReached, setTimeoutReached] = useState(false);
-  const [loginMethod, setLoginMethod] = useState(
-    "options"
-  );
-  let dynamicState = null;
-  let otpHooks = null;
-  let isDynamicReady = false;
-  let hookError = null;
-  try {
-    dynamicState = useDynamicContext();
-    otpHooks = useConnectWithOtp();
-    isDynamicReady = true;
-  } catch (error2) {
-    hookError = error2 instanceof Error ? error2.message : String(error2);
-  }
-  const connectWithEmail = otpHooks?.connectWithEmail;
-  const verifyOneTimePassword = otpHooks?.verifyOneTimePassword;
-  const handleLogOut = dynamicState?.handleLogOut;
-  const { user, primaryWallet } = dynamicState || {
-    user: null,
-    primaryWallet: null
-  };
-  const isAuthenticated = !!user;
-  const address = primaryWallet?.address;
-  const isConnected = isAuthenticated && !!address;
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  useEffect(() => {
-    if (autoTrigger && isClient && isDynamicReady && !isConnected && !hasAutoTriggered) {
-      setHasAutoTriggered(true);
-      setIsModalOpen(true);
-    }
-  }, [autoTrigger, isClient, isDynamicReady, isConnected, hasAutoTriggered]);
-  useEffect(() => {
-    if (isClient && !isDynamicReady && hookError) {
-      const retryTimer = setTimeout(() => {
-        setError(null);
-      }, 2e3);
-      return () => clearTimeout(retryTimer);
-    }
-  }, [isClient, isDynamicReady, hookError]);
-  useEffect(() => {
-    if (walletCreationStartTime) {
-      const timer = setTimeout(() => {
-        setTimeoutReached(true);
-      }, 3e4);
-      return () => clearTimeout(timer);
-    }
-  }, [walletCreationStartTime]);
-  useEffect(() => {
-    if (isConnected && address) {
-      setIsModalOpen(false);
-      setLoginMethod("options");
-      setEmail("");
-      setOtp("");
-      setError(null);
-      setWalletCreationStartTime(null);
-      setTimeoutReached(false);
-      if (onAuthSuccess) {
-        onAuthSuccess(address);
-      }
-    }
-  }, [isConnected, address, onAuthSuccess]);
-  const handleEmailSubmit = useCallback(
-    async (e) => {
-      e.preventDefault();
-      if (!email.trim()) {
-        setError("Please enter a valid email address");
-        return;
-      }
-      if (!connectWithEmail) {
-        setError("Dynamic context not ready. Please try again.");
-        return;
-      }
-      setError(null);
-      try {
-        await connectWithEmail(email);
-        setLoginMethod("otp");
-      } catch (error2) {
-        setError("Failed to send verification code. Please try again.");
-        if (onAuthError) {
-          onAuthError(`Failed to send verification code: ${String(error2)}`);
-        }
-      }
-    },
-    [email, connectWithEmail, onAuthError]
-  );
-  const handleOtpSubmit = useCallback(
-    async (e) => {
-      e.preventDefault();
-      if (!otp.trim()) {
-        setError("Please enter the verification code");
-        return;
-      }
-      if (!verifyOneTimePassword) {
-        setError("Dynamic context not ready. Please try again.");
-        return;
-      }
-      setError(null);
-      try {
-        await verifyOneTimePassword(otp);
-        if (user && !primaryWallet) {
-          setWalletCreationStartTime(Date.now());
-        }
-      } catch (error2) {
-        setError("Invalid verification code. Please try again.");
-        if (onAuthError) {
-          onAuthError(`OTP verification failed: ${String(error2)}`);
-        }
-      }
-    },
-    [otp, verifyOneTimePassword, user, primaryWallet, onAuthError]
-  );
-  const handleLogout = useCallback(async () => {
-    try {
-      if (handleLogOut) {
-        await handleLogOut();
-      }
-      setIsModalOpen(false);
-      setLoginMethod("options");
-      setEmail("");
-      setOtp("");
-      setError(null);
-      setWalletCreationStartTime(null);
-      setTimeoutReached(false);
-    } catch (error2) {
-      setIsModalOpen(false);
-      setLoginMethod("options");
-      setEmail("");
-      setOtp("");
-      setError(null);
-      setWalletCreationStartTime(null);
-      setTimeoutReached(false);
-    }
-  }, [handleLogOut]);
-  if (!isClient) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: true, theme, children: buttonText }) });
-  }
-  if (!isDynamicReady) {
-    return /* @__PURE__ */ jsxs("div", { className, children: [
-      /* @__PURE__ */ jsx(Button, { variant: "primary", disabled: true, theme, children: "Loading Dynamic..." }),
-      hookError && /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            marginTop: "8px",
-            fontSize: "12px",
-            color: theme.colors.error,
-            padding: theme.spacing.xs,
-            backgroundColor: theme.mode === "light" ? "#fef2f2" : `${theme.colors.error}20`,
-            borderRadius: theme.borderRadius.sm
-          },
-          children: "Initializing Dynamic context..."
-        }
-      )
-    ] });
-  }
-  const renderAuthOptionsStep = () => /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[450px] space-y-8", children: [
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: theme.spacing.lg }, children: /* @__PURE__ */ jsx(
-      "h1",
-      {
-        style: {
-          fontSize: "1.875rem",
-          fontWeight: "bold",
-          color: theme.colors.text,
-          marginBottom: theme.spacing.sm
-        },
-        children: "Get Started"
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "primary",
-        fullWidth: true,
-        onClick: () => setLoginMethod("email"),
-        theme,
-        children: "Continue with Email"
-      }
-    ) }),
-    error && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          padding: theme.spacing.md,
-          backgroundColor: theme.mode === "light" ? "#fef2f2" : `${theme.colors.error}20`,
-          border: `1px solid ${theme.mode === "light" ? "#fecaca" : theme.colors.error}`,
-          borderRadius: theme.borderRadius.md,
-          marginTop: theme.spacing.md
-        },
-        children: /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              color: theme.colors.error,
-              fontSize: theme.typography.fontSize.sm,
-              margin: 0
-            },
-            children: error
-          }
-        )
-      }
-    )
-  ] });
-  const renderEmailStep = () => /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[450px] space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: theme.spacing.lg }, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: "4rem",
-            height: "4rem",
-            backgroundColor: theme.colors.primary,
-            borderRadius: "50%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: `0 auto ${theme.spacing.md}`
-          },
-          children: /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem" }, children: "\u2709\uFE0F" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "h1",
-        {
-          style: {
-            fontSize: "1.5rem",
-            fontWeight: "bold",
-            color: theme.colors.text,
-            marginBottom: theme.spacing.sm
-          },
-          children: "Email Authentication"
-        }
-      ),
-      /* @__PURE__ */ jsx("p", { style: { color: theme.colors.textMuted }, children: "Enter your email to get started" })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleEmailSubmit,
-        style: { marginBottom: theme.spacing.md },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme.spacing.md }, children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                style: {
-                  display: "block",
-                  fontSize: theme.typography.fontSize.sm,
-                  fontWeight: theme.typography.fontWeight.medium,
-                  color: theme.colors.text,
-                  marginBottom: theme.spacing.xs
-                },
-                children: "Email Address"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "email",
-                value: email,
-                onChange: (e) => setEmail(e.target.value),
-                placeholder: "Enter your email address",
-                required: true,
-                theme
-              }
-            )
-          ] }),
-          error && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: theme.spacing.md,
-                backgroundColor: theme.mode === "light" ? "#fef2f2" : `${theme.colors.error}20`,
-                border: `1px solid ${theme.mode === "light" ? "#fecaca" : theme.colors.error}`,
-                borderRadius: theme.borderRadius.md,
-                marginBottom: theme.spacing.md
-              },
-              children: /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    color: theme.colors.error,
-                    fontSize: theme.typography.fontSize.sm,
-                    margin: 0
-                  },
-                  children: error
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: theme.spacing.sm
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "submit",
-                    variant: "primary",
-                    fullWidth: true,
-                    disabled: !email.trim(),
-                    theme,
-                    children: "Send Verification Code"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    fullWidth: true,
-                    onClick: () => {
-                      setLoginMethod("options");
-                      setError(null);
-                      setEmail("");
-                    },
-                    theme,
-                    children: "\u2190 Back"
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  const renderOtpStep = () => /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[450px] space-y-6", children: [
-    /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: theme.spacing.lg }, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            width: "4rem",
-            height: "4rem",
-            backgroundColor: theme.colors.success,
-            borderRadius: "50%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            margin: `0 auto ${theme.spacing.md}`
-          },
-          children: /* @__PURE__ */ jsx("span", { style: { fontSize: "1.25rem", color: "#ffffff" }, children: "\u2713" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "h1",
-        {
-          style: {
-            fontSize: "1.5rem",
-            fontWeight: "bold",
-            color: theme.colors.text,
-            marginBottom: theme.spacing.sm
-          },
-          children: "Check Your Email"
-        }
-      ),
-      /* @__PURE__ */ jsxs("p", { style: { color: theme.colors.textMuted }, children: [
-        "Enter the verification code sent to",
-        " ",
-        /* @__PURE__ */ jsx("span", { style: { color: theme.colors.primary, fontWeight: "medium" }, children: email })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleOtpSubmit,
-        style: { marginBottom: theme.spacing.md },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: theme.spacing.md }, children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                style: {
-                  display: "block",
-                  fontSize: theme.typography.fontSize.sm,
-                  fontWeight: theme.typography.fontWeight.medium,
-                  color: theme.colors.text,
-                  marginBottom: theme.spacing.xs
-                },
-                children: "Verification Code"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "text",
-                value: otp,
-                onChange: (e) => setOtp(e.target.value),
-                placeholder: "Enter 6-digit code",
-                maxLength: 6,
-                required: true,
-                theme,
-                className: "ibm-plex-mono",
-                style: {
-                  textAlign: "center",
-                  fontSize: "1.3rem",
-                  letterSpacing: "0.2em",
-                  fontFamily: "IBM Plex Mono"
-                }
-              }
-            )
-          ] }),
-          error && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: theme.spacing.md,
-                backgroundColor: theme.mode === "light" ? "#fef2f2" : `${theme.colors.error}20`,
-                border: `1px solid ${theme.mode === "light" ? "#fecaca" : theme.colors.error}`,
-                borderRadius: theme.borderRadius.md,
-                marginBottom: theme.spacing.md
-              },
-              children: /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: {
-                    color: theme.colors.error,
-                    fontSize: theme.typography.fontSize.sm,
-                    margin: 0
-                  },
-                  children: error
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: theme.spacing.sm
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "submit",
-                    variant: "primary",
-                    fullWidth: true,
-                    disabled: !otp.trim(),
-                    theme,
-                    children: "Verify Code"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "secondary",
-                    fullWidth: true,
-                    onClick: () => {
-                      setError(null);
-                      setOtp("");
-                      setLoginMethod("email");
-                    },
-                    theme,
-                    children: "\u2190 Back to Email"
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  const renderWalletCreationStep = () => {
-    const isStuck = timeoutReached || walletCreationStartTime && Date.now() - (walletCreationStartTime || 0) > 3e4;
-    return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[450px] space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: theme.spacing.lg }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: "4rem",
-              height: "4rem",
-              backgroundColor: theme.colors.warning,
-              borderRadius: "50%",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              margin: `0 auto ${theme.spacing.md}`
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "1.5rem",
-                  height: "1.5rem",
-                  border: `2px solid ${theme.colors.text}`,
-                  borderTop: "2px solid transparent",
-                  borderRadius: "50%",
-                  animation: "spin 1s linear infinite"
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "h1",
-          {
-            style: {
-              fontSize: "1.5rem",
-              fontWeight: "bold",
-              color: theme.colors.text,
-              marginBottom: theme.spacing.sm
-            },
-            children: "Setting up your wallet..."
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { style: { color: theme.colors.textMuted }, children: "Creating your wallet automatically. This may take a few moments." }),
-        walletCreationStartTime && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              fontSize: theme.typography.fontSize.sm,
-              color: theme.colors.textMuted,
-              marginTop: theme.spacing.sm
-            },
-            children: [
-              /* @__PURE__ */ jsxs("p", { children: [
-                "Waiting time:",
-                " ",
-                Math.floor(
-                  (Date.now() - (walletCreationStartTime || 0)) / 1e3
-                ),
-                "s"
-              ] }),
-              timeoutReached && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  style: { color: theme.colors.warning, fontWeight: "medium" },
-                  children: "\u26A0\uFE0F Taking longer than expected"
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: theme.spacing.sm
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                fullWidth: true,
-                onClick: () => window.location.reload(),
-                theme,
-                children: "Retry Automatic Creation"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                fullWidth: true,
-                onClick: handleLogout,
-                theme,
-                children: "Cancel & Start Over"
-              }
-            )
-          ]
-        }
-      ),
-      isStuck && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            marginTop: theme.spacing.md,
-            padding: theme.spacing.md,
-            backgroundColor: theme.mode === "light" ? "#fef3c7" : `${theme.colors.warning}20`,
-            border: `1px solid ${theme.mode === "light" ? "#fde68a" : theme.colors.warning}`,
-            borderRadius: theme.borderRadius.md
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                style: {
-                  color: theme.colors.warning,
-                  fontSize: theme.typography.fontSize.sm,
-                  marginBottom: theme.spacing.sm
-                },
-                children: "\u26A0\uFE0F Wallet creation is taking longer than expected. This might be due to network issues."
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  fontSize: theme.typography.fontSize.xs,
-                  color: theme.colors.textMuted
-                },
-                children: [
-                  /* @__PURE__ */ jsx("p", { children: "\u2022 Try refreshing the page to restart automatic creation" }),
-                  /* @__PURE__ */ jsx("p", { children: "\u2022 Check your internet connection" }),
-                  /* @__PURE__ */ jsx("p", { children: "\u2022 If the issue persists, start over with a new email" })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  };
-  const getModalContent = () => {
-    if (!isDynamicReady) {
-      return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: theme.spacing.xl }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: "2.5rem",
-              height: "2.5rem",
-              border: `2px solid ${theme.colors.border}`,
-              borderTop: `2px solid ${theme.colors.primary}`,
-              borderRadius: "50%",
-              animation: "spin 1s linear infinite",
-              margin: `0 auto ${theme.spacing.md}`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { style: { color: theme.colors.textMuted }, children: "Initializing Dynamic..." })
-      ] });
-    }
-    if (isAuthenticated && !address) {
-      return renderWalletCreationStep();
-    }
-    if (loginMethod === "otp") {
-      return renderOtpStep();
-    }
-    if (loginMethod === "email") {
-      return renderEmailStep();
-    }
-    return renderAuthOptionsStep();
-  };
-  if (isConnected && address) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleLogout, theme, children: [
-      "Logout (",
-      address.slice(0, 6),
-      "...",
-      address.slice(-4),
-      ")"
-    ] }) });
-  }
-  if (autoTrigger) {
-    return /* @__PURE__ */ jsxs("div", { className, children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: "20px",
-            flexDirection: "column",
-            gap: "12px"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: "40px",
-                  height: "40px",
-                  border: "3px solid #e5e7eb",
-                  borderTop: "3px solid #3b82f6",
-                  borderRadius: "50%",
-                  animation: "spin 1s linear infinite"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { style: { color: "#6b7280", fontSize: "14px" }, children: "Opening login..." })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Modal,
-        {
-          isOpen: isModalOpen,
-          onClose: () => {
-            if (!isAuthenticated || isConnected) {
-              setIsModalOpen(false);
-              setLoginMethod("options");
-              setEmail("");
-              setOtp("");
-              setError(null);
-            }
-          },
-          title: "",
-          theme,
-          children: getModalContent()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "style",
-        {
-          dangerouslySetInnerHTML: {
-            __html: `
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import re,{useEffect as B,useState as b,useCallback as _}from"react";import{c as A,B as m}from"./Button-4ryz2e1P.js";import{useDynamicContext as oe,useConnectWithOtp as ie}from"@dynamic-labs/sdk-react-core";const J=({label:s,error:n,helper:y,fullWidth:p=!1,startAdornment:h,endAdornment:c,className:e="",style:i,theme:E,...C})=>{const r=E||A("light"),k={width:p?"100%":"auto",display:"flex",flexDirection:"column",gap:r.spacing.xs},R={position:"relative",display:"flex",alignItems:"center"},g={backgroundColor:r.colors.surface,border:`1px solid ${n?r.colors.error:r.colors.border}`,borderRadius:r.borderRadius.md,color:r.colors.text,fontSize:r.typography.fontSize.base,padding:r.spacing.md,paddingLeft:h?r.spacing.xl:r.spacing.md,paddingRight:c?r.spacing.xl:r.spacing.md,width:"100%",outline:"none",transition:`border-color ${r.animation.normal}`,":focus":{borderColor:n?r.colors.error:r.colors.primary},":hover":{borderColor:n?r.colors.error:r.colors.borderHover},"::placeholder":{color:r.colors.textMuted}},d={fontSize:r.typography.fontSize.sm,fontWeight:r.typography.fontWeight.medium,color:r.colors.textSecondary},f={fontSize:r.typography.fontSize.xs,color:n?r.colors.error:r.colors.textMuted},u={position:"absolute",top:"50%",transform:"translateY(-50%)",color:r.colors.textMuted,pointerEvents:"none"};return o("div",{style:k,children:[s&&t("label",{style:d,children:s}),o("div",{style:R,children:[h&&t("div",{style:{...u,left:r.spacing.md},children:h}),t("input",{style:{...g,...i},className:e,...C}),c&&t("div",{style:{...u,right:r.spacing.md},children:c})]}),(n||y)&&t("span",{style:f,children:n||y})]})},K=({isOpen:s,onClose:n,title:y,children:p,maxWidth:h="32rem",className:c="",theme:e})=>{const i=e||A("light");if(B(()=>{const d=f=>{f.key==="Escape"&&n()};return s&&(document.addEventListener("keydown",d),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",d),document.body.style.overflow="unset"}},[s,n]),!s)return null;const E={position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:1e3,padding:i.spacing.md},C={backgroundColor:i.colors.background,border:`1px solid ${i.colors.border}`,borderRadius:i.borderRadius.lg,boxShadow:i.shadows.lg,maxWidth:h,width:"100%",maxHeight:"90vh",overflow:"auto"},r={padding:i.spacing.lg,borderBottom:`1px solid ${i.colors.border}`,display:"flex",alignItems:"center",justifyContent:"space-between"},k={fontSize:i.typography.fontSize.lg,fontWeight:i.typography.fontWeight.semibold,color:i.colors.text,margin:0},R={background:"none",border:"none",color:i.colors.textMuted,cursor:"pointer",padding:i.spacing.sm,borderRadius:i.borderRadius.sm,display:"flex",alignItems:"center",justifyContent:"center",transition:`color ${i.animation.normal}`,":hover":{color:i.colors.text}},g={padding:i.spacing.lg};return t("div",{style:E,onClick:n,children:o("div",{style:C,className:c,onClick:d=>d.stopPropagation(),children:[y&&o("div",{style:r,children:[t("h2",{style:k,children:y}),t("button",{style:R,onClick:n,children:o("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[t("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),t("div",{style:g,children:p})]})})},ne=({onAuthSuccess:s,onAuthError:n,theme:y="light",className:p="",buttonText:h="Login with Dynamic",autoTrigger:c=!1})=>{const e=A(y),[i,E]=b(!1),[C,r]=b(c),[k,R]=b(!1),[g,d]=b(""),[f,u]=b(""),[z,a]=b(null),[W,T]=b(null),[V,$]=b(!1),[q,x]=b("options");let M=null,N=null,w=!1,D=null;try{M=oe(),N=ie(),w=!0}catch(l){D=l instanceof Error?l.message:String(l)}const L=N?.connectWithEmail,P=N?.verifyOneTimePassword,F=M?.handleLogOut,{user:j,primaryWallet:O}=M||{user:null,primaryWallet:null},I=!!j,v=O?.address,S=I&&!!v;B(()=>{E(!0)},[]),B(()=>{c&&i&&w&&!S&&!k&&(R(!0),r(!0))},[c,i,w,S,k]),B(()=>{if(i&&!w&&D){const l=setTimeout(()=>{a(null)},2e3);return()=>clearTimeout(l)}},[i,w,D]),B(()=>{if(W){const l=setTimeout(()=>{$(!0)},3e4);return()=>clearTimeout(l)}},[W]),B(()=>{S&&v&&(r(!1),x("options"),d(""),u(""),a(null),T(null),$(!1),s&&s(v))},[S,v,s]);const Q=_(async l=>{if(l.preventDefault(),!g.trim()){a("Please enter a valid email address");return}if(!L){a("Dynamic context not ready. Please try again.");return}a(null);try{await L(g),x("otp")}catch(H){a("Failed to send verification code. Please try again."),n&&n(`Failed to send verification code: ${String(H)}`)}},[g,L,n]),U=_(async l=>{if(l.preventDefault(),!f.trim()){a("Please enter the verification code");return}if(!P){a("Dynamic context not ready. Please try again.");return}a(null);try{await P(f),j&&!O&&T(Date.now())}catch(H){a("Invalid verification code. Please try again."),n&&n(`OTP verification failed: ${String(H)}`)}},[f,P,j,O,n]),Y=_(async()=>{try{F&&await F(),r(!1),x("options"),d(""),u(""),a(null),T(null),$(!1)}catch{r(!1),x("options"),d(""),u(""),a(null),T(null),$(!1)}},[F]);if(!i)return t("div",{className:p,children:t(m,{variant:"primary",disabled:!0,theme:e,children:h})});if(!w)return o("div",{className:p,children:[t(m,{variant:"primary",disabled:!0,theme:e,children:"Loading Dynamic..."}),D&&t("div",{style:{marginTop:"8px",fontSize:"12px",color:e.colors.error,padding:e.spacing.xs,backgroundColor:e.mode==="light"?"#fef2f2":`${e.colors.error}20`,borderRadius:e.borderRadius.sm},children:"Initializing Dynamic context..."})]});const X=()=>o("div",{className:"w-full max-w-[450px] space-y-8",children:[t("div",{style:{textAlign:"center",marginBottom:e.spacing.lg},children:t("h1",{style:{fontSize:"1.875rem",fontWeight:"bold",color:e.colors.text,marginBottom:e.spacing.sm},children:"Get Started"})}),t("div",{style:{marginBottom:e.spacing.md},children:t(m,{variant:"primary",fullWidth:!0,onClick:()=>x("email"),theme:e,children:"Continue with Email"})}),z&&t("div",{style:{padding:e.spacing.md,backgroundColor:e.mode==="light"?"#fef2f2":`${e.colors.error}20`,border:`1px solid ${e.mode==="light"?"#fecaca":e.colors.error}`,borderRadius:e.borderRadius.md,marginTop:e.spacing.md},children:t("p",{style:{color:e.colors.error,fontSize:e.typography.fontSize.sm,margin:0},children:z})})]}),Z=()=>o("div",{className:"w-full max-w-[450px] space-y-6",children:[o("div",{style:{textAlign:"center",marginBottom:e.spacing.lg},children:[t("div",{style:{width:"4rem",height:"4rem",backgroundColor:e.colors.primary,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:`0 auto ${e.spacing.md}`},children:t("span",{style:{fontSize:"1.25rem"},children:"\u2709\uFE0F"})}),t("h1",{style:{fontSize:"1.5rem",fontWeight:"bold",color:e.colors.text,marginBottom:e.spacing.sm},children:"Email Authentication"}),t("p",{style:{color:e.colors.textMuted},children:"Enter your email to get started"})]}),o("form",{onSubmit:Q,style:{marginBottom:e.spacing.md},children:[o("div",{style:{marginBottom:e.spacing.md},children:[t("label",{style:{display:"block",fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.medium,color:e.colors.text,marginBottom:e.spacing.xs},children:"Email Address"}),t(J,{type:"email",value:g,onChange:l=>d(l.target.value),placeholder:"Enter your email address",required:!0,theme:e})]}),z&&t("div",{style:{padding:e.spacing.md,backgroundColor:e.mode==="light"?"#fef2f2":`${e.colors.error}20`,border:`1px solid ${e.mode==="light"?"#fecaca":e.colors.error}`,borderRadius:e.borderRadius.md,marginBottom:e.spacing.md},children:t("p",{style:{color:e.colors.error,fontSize:e.typography.fontSize.sm,margin:0},children:z})}),o("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[t(m,{type:"submit",variant:"primary",fullWidth:!0,disabled:!g.trim(),theme:e,children:"Send Verification Code"}),t(m,{type:"button",variant:"secondary",fullWidth:!0,onClick:()=>{x("options"),a(null),d("")},theme:e,children:"\u2190 Back"})]})]})]}),ee=()=>o("div",{className:"w-full max-w-[450px] space-y-6",children:[o("div",{style:{textAlign:"center",marginBottom:e.spacing.lg},children:[t("div",{style:{width:"4rem",height:"4rem",backgroundColor:e.colors.success,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:`0 auto ${e.spacing.md}`},children:t("span",{style:{fontSize:"1.25rem",color:"#ffffff"},children:"\u2713"})}),t("h1",{style:{fontSize:"1.5rem",fontWeight:"bold",color:e.colors.text,marginBottom:e.spacing.sm},children:"Check Your Email"}),o("p",{style:{color:e.colors.textMuted},children:["Enter the verification code sent to"," ",t("span",{style:{color:e.colors.primary,fontWeight:"medium"},children:g})]})]}),o("form",{onSubmit:U,style:{marginBottom:e.spacing.md},children:[o("div",{style:{marginBottom:e.spacing.md},children:[t("label",{style:{display:"block",fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.medium,color:e.colors.text,marginBottom:e.spacing.xs},children:"Verification Code"}),t(J,{type:"text",value:f,onChange:l=>u(l.target.value),placeholder:"Enter 6-digit code",maxLength:6,required:!0,theme:e,className:"ibm-plex-mono",style:{textAlign:"center",fontSize:"1.3rem",letterSpacing:"0.2em",fontFamily:"IBM Plex Mono"}})]}),z&&t("div",{style:{padding:e.spacing.md,backgroundColor:e.mode==="light"?"#fef2f2":`${e.colors.error}20`,border:`1px solid ${e.mode==="light"?"#fecaca":e.colors.error}`,borderRadius:e.borderRadius.md,marginBottom:e.spacing.md},children:t("p",{style:{color:e.colors.error,fontSize:e.typography.fontSize.sm,margin:0},children:z})}),o("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[t(m,{type:"submit",variant:"primary",fullWidth:!0,disabled:!f.trim(),theme:e,children:"Verify Code"}),t(m,{type:"button",variant:"secondary",fullWidth:!0,onClick:()=>{a(null),u(""),x("email")},theme:e,children:"\u2190 Back to Email"})]})]})]}),te=()=>{const l=V||W&&Date.now()-(W||0)>3e4;return o("div",{className:"w-full max-w-[450px] space-y-6",children:[o("div",{style:{textAlign:"center",marginBottom:e.spacing.lg},children:[t("div",{style:{width:"4rem",height:"4rem",backgroundColor:e.colors.warning,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:`0 auto ${e.spacing.md}`},children:t("div",{style:{width:"1.5rem",height:"1.5rem",border:`2px solid ${e.colors.text}`,borderTop:"2px solid transparent",borderRadius:"50%",animation:"spin 1s linear infinite"}})}),t("h1",{style:{fontSize:"1.5rem",fontWeight:"bold",color:e.colors.text,marginBottom:e.spacing.sm},children:"Setting up your wallet..."}),t("p",{style:{color:e.colors.textMuted},children:"Creating your wallet automatically. This may take a few moments."}),W&&o("div",{style:{fontSize:e.typography.fontSize.sm,color:e.colors.textMuted,marginTop:e.spacing.sm},children:[o("p",{children:["Waiting time:"," ",Math.floor((Date.now()-(W||0))/1e3),"s"]}),V&&t("p",{style:{color:e.colors.warning,fontWeight:"medium"},children:"\u26A0\uFE0F Taking longer than expected"})]})]}),o("div",{style:{display:"flex",flexDirection:"column",gap:e.spacing.sm},children:[t(m,{variant:"secondary",fullWidth:!0,onClick:()=>window.location.reload(),theme:e,children:"Retry Automatic Creation"}),t(m,{variant:"secondary",fullWidth:!0,onClick:Y,theme:e,children:"Cancel & Start Over"})]}),l&&o("div",{style:{marginTop:e.spacing.md,padding:e.spacing.md,backgroundColor:e.mode==="light"?"#fef3c7":`${e.colors.warning}20`,border:`1px solid ${e.mode==="light"?"#fde68a":e.colors.warning}`,borderRadius:e.borderRadius.md},children:[t("p",{style:{color:e.colors.warning,fontSize:e.typography.fontSize.sm,marginBottom:e.spacing.sm},children:"\u26A0\uFE0F Wallet creation is taking longer than expected. This might be due to network issues."}),o("div",{style:{fontSize:e.typography.fontSize.xs,color:e.colors.textMuted},children:[t("p",{children:"\u2022 Try refreshing the page to restart automatic creation"}),t("p",{children:"\u2022 Check your internet connection"}),t("p",{children:"\u2022 If the issue persists, start over with a new email"})]})]})]})},G=()=>w?I&&!v?te():q==="otp"?ee():q==="email"?Z():X():o("div",{style:{textAlign:"center",padding:e.spacing.xl},children:[t("div",{style:{width:"2.5rem",height:"2.5rem",border:`2px solid ${e.colors.border}`,borderTop:`2px solid ${e.colors.primary}`,borderRadius:"50%",animation:"spin 1s linear infinite",margin:`0 auto ${e.spacing.md}`}}),t("p",{style:{color:e.colors.textMuted},children:"Initializing Dynamic..."})]});return S&&v?t("div",{className:p,children:o(m,{variant:"primary",onClick:Y,theme:e,children:["Logout (",v.slice(0,6),"...",v.slice(-4),")"]})}):c?o("div",{className:p,children:[o("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"20px",flexDirection:"column",gap:"12px"},children:[t("div",{style:{width:"40px",height:"40px",border:"3px solid #e5e7eb",borderTop:"3px solid #3b82f6",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t("p",{style:{color:"#6b7280",fontSize:"14px"},children:"Opening login..."})]}),t(K,{isOpen:C,onClose:()=>{(!I||S)&&(r(!1),x("options"),d(""),u(""),a(null))},title:"",theme:e,children:G()}),t("style",{dangerouslySetInnerHTML:{__html:`
             @keyframes spin {
               0% { transform: rotate(0deg); }
               100% { transform: rotate(360deg); }
             }
-          `
-          }
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "primary",
-        onClick: () => setIsModalOpen(true),
-        theme,
-        children: buttonText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Modal,
-      {
-        isOpen: isModalOpen,
-        onClose: () => {
-          if (!isAuthenticated || isConnected) {
-            setIsModalOpen(false);
-            setLoginMethod("options");
-            setEmail("");
-            setOtp("");
-            setError(null);
-          }
-        },
-        title: "",
-        theme,
-        children: getModalContent()
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "style",
-      {
-        dangerouslySetInnerHTML: {
-          __html: `
+          `}})]}):o("div",{className:p,children:[t(m,{variant:"primary",onClick:()=>r(!0),theme:e,children:h}),t(K,{isOpen:C,onClose:()=>{(!I||S)&&(r(!1),x("options"),d(""),u(""),a(null))},title:"",theme:e,children:G()}),t("style",{dangerouslySetInnerHTML:{__html:`
           @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
           }
-        `
-        }
-      }
-    )
-  ] });
-};
-class DynamicErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-  static getDerivedStateFromError() {
-    return { hasError: true };
-  }
-  componentDidCatch(error) {
-  }
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback;
-    }
-    return this.props.children;
-  }
-}
-const DynamicLogin = (props) => {
-  const {
-    theme: themeMode = "light",
-    className = "",
-    buttonText = "Login with Dynamic",
-    onAuthError
-  } = props;
-  const theme = createTheme(themeMode);
-  const fallbackComponent = /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "primary",
-      onClick: () => {
-        const errorMessage = "DynamicLogin must be used within SpiceFlowProvider. Please wrap your app with <SpiceFlowProvider>.";
-        if (onAuthError) {
-          onAuthError(errorMessage);
-        }
-      },
-      theme,
-      children: buttonText
-    }
-  ) });
-  return /* @__PURE__ */ jsx(DynamicErrorBoundary, { fallback: fallbackComponent, children: /* @__PURE__ */ jsx(DynamicLoginInternal, { ...props }) });
-};
-
-export { DynamicLogin };
+        `}})]})};class le extends re.Component{constructor(n){super(n),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(n){}render(){return this.state.hasError?this.props.fallback:this.props.children}}const ae=s=>{const{theme:n="light",className:y="",buttonText:p="Login with Dynamic",onAuthError:h}=s,c=A(n);return t(le,{fallback:t("div",{className:y,children:t(m,{variant:"primary",onClick:()=>{h&&h("DynamicLogin must be used within SpiceFlowProvider. Please wrap your app with <SpiceFlowProvider>.")},theme:c,children:p})}),children:t(ne,{...s})})};export{ae as DynamicLogin};