@pixygon/auth 1.0.0

package/dist/components/index.mjs

@@ -0,0 +1,1646 @@
+import {
+  useAuth
+} from "../chunk-E34M2RJD.mjs";
+
+// src/components/PixygonAuth.tsx
+import { useState as useState5, useCallback as useCallback5, useEffect as useEffect2 } from "react";
+
+// src/components/LoginForm.tsx
+import { useState, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LoginForm({
+  onSuccess,
+  onError,
+  onNavigateRegister,
+  onNavigateForgotPassword,
+  showBranding = true,
+  className = ""
+}) {
+  const { login, isLoading, error } = useAuth();
+  const [userName, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const [localError, setLocalError] = useState(null);
+  const handleSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      setLocalError(null);
+      if (!userName.trim()) {
+        setLocalError("Please enter your username or email");
+        return;
+      }
+      if (!password) {
+        setLocalError("Please enter your password");
+        return;
+      }
+      try {
+        const response = await login({ userName: userName.trim(), password });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err;
+        onError?.(authError);
+      }
+    },
+    [userName, password, login, onSuccess, onError]
+  );
+  const displayError = localError || error?.message;
+  return /* @__PURE__ */ jsxs("div", { className: `pixygon-auth-container ${className}`, children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .pixygon-auth-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #0f0f0f;
+          color: #ffffff;
+          padding: 2rem;
+          border-radius: 1rem;
+          max-width: 400px;
+          width: 100%;
+          margin: 0 auto;
+        }
+
+        .pixygon-auth-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .pixygon-auth-logo {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 1rem;
+          display: block;
+        }
+
+        .pixygon-auth-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0 0 0.5rem;
+        }
+
+        .pixygon-auth-subtitle {
+          font-size: 0.875rem;
+          color: #a3a3a3;
+          margin: 0;
+        }
+
+        .pixygon-auth-form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .pixygon-auth-input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 0.375rem;
+        }
+
+        .pixygon-auth-label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-input {
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          font-size: 1rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-input.error {
+          border-color: #ef4444;
+        }
+
+        .pixygon-auth-button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-button:hover:not(:disabled) {
+          background: #4f46e5;
+        }
+
+        .pixygon-auth-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid #ef4444;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #fca5a5;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-link {
+          color: #6366f1;
+          text-decoration: none;
+          font-size: 0.875rem;
+          cursor: pointer;
+          background: none;
+          border: none;
+          padding: 0;
+          font-family: inherit;
+        }
+
+        .pixygon-auth-link:hover {
+          color: #818cf8;
+          text-decoration: underline;
+        }
+
+        .pixygon-auth-footer {
+          text-align: center;
+          margin-top: 1.5rem;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-branding {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1.5rem;
+          font-size: 0.75rem;
+          color: #737373;
+        }
+
+        .pixygon-auth-spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: pixygon-spin 0.8s linear infinite;
+        }
+
+        @keyframes pixygon-spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .pixygon-auth-forgot-password {
+          text-align: right;
+          margin-top: -0.5rem;
+        }
+      ` }),
+    /* @__PURE__ */ jsxs("div", { className: "pixygon-auth-header", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "pixygon-auth-logo",
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M30 45L45 30L70 55L55 70L30 45Z",
+                fill: "white",
+                fillOpacity: "0.9"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M35 55L50 70L45 75L30 60L35 55Z",
+                fill: "white",
+                fillOpacity: "0.7"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: "pixygon-auth-title", children: "Welcome back" }),
+      /* @__PURE__ */ jsx("p", { className: "pixygon-auth-subtitle", children: "Sign in to your Pixygon Account" })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "pixygon-auth-form", onSubmit: handleSubmit, children: [
+      displayError && /* @__PURE__ */ jsx("div", { className: "pixygon-auth-error", children: displayError }),
+      /* @__PURE__ */ jsxs("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "pixygon-auth-label", htmlFor: "pixygon-login-username", children: "Username or Email" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "pixygon-login-username",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "text",
+            value: userName,
+            onChange: (e) => setUserName(e.target.value),
+            placeholder: "Enter your username or email",
+            autoComplete: "username",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx("label", { className: "pixygon-auth-label", htmlFor: "pixygon-login-password", children: "Password" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "pixygon-login-password",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            placeholder: "Enter your password",
+            autoComplete: "current-password",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      onNavigateForgotPassword && /* @__PURE__ */ jsx("div", { className: "pixygon-auth-forgot-password", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateForgotPassword,
+          children: "Forgot password?"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: "pixygon-auth-button",
+          disabled: isLoading,
+          children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "pixygon-auth-spinner" }),
+            "Signing in..."
+          ] }) : "Sign in"
+        }
+      )
+    ] }),
+    onNavigateRegister && /* @__PURE__ */ jsxs("div", { className: "pixygon-auth-footer", children: [
+      "Don't have an account?",
+      " ",
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateRegister,
+          children: "Create one"
+        }
+      )
+    ] }),
+    showBranding && /* @__PURE__ */ jsx("div", { className: "pixygon-auth-branding", children: "Secured by Pixygon Account" })
+  ] });
+}
+
+// src/components/RegisterForm.tsx
+import { useState as useState2, useCallback as useCallback2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function RegisterForm({
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = ""
+}) {
+  const { register, isLoading, error } = useAuth();
+  const [userName, setUserName] = useState2("");
+  const [email, setEmail] = useState2("");
+  const [password, setPassword] = useState2("");
+  const [confirmPassword, setConfirmPassword] = useState2("");
+  const [localError, setLocalError] = useState2(null);
+  const validateForm = useCallback2(() => {
+    if (!userName.trim()) {
+      setLocalError("Please enter a username");
+      return false;
+    }
+    if (userName.length < 3) {
+      setLocalError("Username must be at least 3 characters");
+      return false;
+    }
+    if (!/^[a-zA-Z0-9_-]+$/.test(userName)) {
+      setLocalError("Username can only contain letters, numbers, underscores, and hyphens");
+      return false;
+    }
+    if (!email.trim()) {
+      setLocalError("Please enter your email");
+      return false;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setLocalError("Please enter a valid email address");
+      return false;
+    }
+    if (!password) {
+      setLocalError("Please enter a password");
+      return false;
+    }
+    if (password.length < 6) {
+      setLocalError("Password must be at least 6 characters");
+      return false;
+    }
+    if (password !== confirmPassword) {
+      setLocalError("Passwords do not match");
+      return false;
+    }
+    return true;
+  }, [userName, email, password, confirmPassword]);
+  const handleSubmit = useCallback2(
+    async (e) => {
+      e.preventDefault();
+      setLocalError(null);
+      if (!validateForm()) return;
+      try {
+        const response = await register({
+          userName: userName.trim(),
+          email: email.trim().toLowerCase(),
+          password,
+          confirmPassword
+        });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err;
+        onError?.(authError);
+      }
+    },
+    [userName, email, password, confirmPassword, register, validateForm, onSuccess, onError]
+  );
+  const displayError = localError || error?.message;
+  const getPasswordStrength = (pwd) => {
+    if (!pwd) return { level: 0, label: "" };
+    let strength = 0;
+    if (pwd.length >= 6) strength++;
+    if (pwd.length >= 10) strength++;
+    if (/[A-Z]/.test(pwd)) strength++;
+    if (/[0-9]/.test(pwd)) strength++;
+    if (/[^A-Za-z0-9]/.test(pwd)) strength++;
+    if (strength <= 2) return { level: 1, label: "Weak" };
+    if (strength <= 3) return { level: 2, label: "Fair" };
+    if (strength <= 4) return { level: 3, label: "Good" };
+    return { level: 4, label: "Strong" };
+  };
+  const passwordStrength = getPasswordStrength(password);
+  return /* @__PURE__ */ jsxs2("div", { className: `pixygon-auth-container ${className}`, children: [
+    /* @__PURE__ */ jsx2("style", { children: `
+        .pixygon-auth-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #0f0f0f;
+          color: #ffffff;
+          padding: 2rem;
+          border-radius: 1rem;
+          max-width: 400px;
+          width: 100%;
+          margin: 0 auto;
+        }
+
+        .pixygon-auth-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .pixygon-auth-logo {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 1rem;
+          display: block;
+        }
+
+        .pixygon-auth-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0 0 0.5rem;
+        }
+
+        .pixygon-auth-subtitle {
+          font-size: 0.875rem;
+          color: #a3a3a3;
+          margin: 0;
+        }
+
+        .pixygon-auth-form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .pixygon-auth-input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 0.375rem;
+        }
+
+        .pixygon-auth-label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-input {
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          font-size: 1rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-input.error {
+          border-color: #ef4444;
+        }
+
+        .pixygon-auth-button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-button:hover:not(:disabled) {
+          background: #4f46e5;
+        }
+
+        .pixygon-auth-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid #ef4444;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #fca5a5;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-link {
+          color: #6366f1;
+          text-decoration: none;
+          font-size: 0.875rem;
+          cursor: pointer;
+          background: none;
+          border: none;
+          padding: 0;
+          font-family: inherit;
+        }
+
+        .pixygon-auth-link:hover {
+          color: #818cf8;
+          text-decoration: underline;
+        }
+
+        .pixygon-auth-footer {
+          text-align: center;
+          margin-top: 1.5rem;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-branding {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1.5rem;
+          font-size: 0.75rem;
+          color: #737373;
+        }
+
+        .pixygon-auth-spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: pixygon-spin 0.8s linear infinite;
+        }
+
+        @keyframes pixygon-spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .pixygon-auth-password-strength {
+          display: flex;
+          gap: 0.25rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-password-strength-bar {
+          flex: 1;
+          height: 4px;
+          border-radius: 2px;
+          background: #404040;
+          transition: background 0.3s;
+        }
+
+        .pixygon-auth-password-strength-bar.active {
+          background: #6366f1;
+        }
+
+        .pixygon-auth-password-strength-bar.weak {
+          background: #ef4444;
+        }
+
+        .pixygon-auth-password-strength-bar.fair {
+          background: #f59e0b;
+        }
+
+        .pixygon-auth-password-strength-bar.good {
+          background: #22c55e;
+        }
+
+        .pixygon-auth-password-strength-bar.strong {
+          background: #10b981;
+        }
+
+        .pixygon-auth-password-label {
+          font-size: 0.75rem;
+          color: #737373;
+          margin-top: 0.25rem;
+        }
+      ` }),
+    /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-header", children: [
+      /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          className: "pixygon-auth-logo",
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx2("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
+            /* @__PURE__ */ jsx2(
+              "path",
+              {
+                d: "M30 45L45 30L70 55L55 70L30 45Z",
+                fill: "white",
+                fillOpacity: "0.9"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "path",
+              {
+                d: "M35 55L50 70L45 75L30 60L35 55Z",
+                fill: "white",
+                fillOpacity: "0.7"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("h1", { className: "pixygon-auth-title", children: "Create Account" }),
+      /* @__PURE__ */ jsx2("p", { className: "pixygon-auth-subtitle", children: "Join Pixygon to access all apps" })
+    ] }),
+    /* @__PURE__ */ jsxs2("form", { className: "pixygon-auth-form", onSubmit: handleSubmit, children: [
+      displayError && /* @__PURE__ */ jsx2("div", { className: "pixygon-auth-error", children: displayError }),
+      /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "pixygon-auth-label", htmlFor: "pixygon-register-username", children: "Username" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "pixygon-register-username",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "text",
+            value: userName,
+            onChange: (e) => setUserName(e.target.value),
+            placeholder: "Choose a username",
+            autoComplete: "username",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "pixygon-auth-label", htmlFor: "pixygon-register-email", children: "Email" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "pixygon-register-email",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "Enter your email",
+            autoComplete: "email",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "pixygon-auth-label", htmlFor: "pixygon-register-password", children: "Password" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "pixygon-register-password",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            placeholder: "Create a password",
+            autoComplete: "new-password",
+            disabled: isLoading
+          }
+        ),
+        password && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2("div", { className: "pixygon-auth-password-strength", children: [1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: `pixygon-auth-password-strength-bar ${level <= passwordStrength.level ? passwordStrength.level === 1 ? "weak" : passwordStrength.level === 2 ? "fair" : passwordStrength.level === 3 ? "good" : "strong" : ""}`
+            },
+            level
+          )) }),
+          /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-password-label", children: [
+            "Password strength: ",
+            passwordStrength.label
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx2("label", { className: "pixygon-auth-label", htmlFor: "pixygon-register-confirm", children: "Confirm Password" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "pixygon-register-confirm",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "password",
+            value: confirmPassword,
+            onChange: (e) => setConfirmPassword(e.target.value),
+            placeholder: "Confirm your password",
+            autoComplete: "new-password",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "submit",
+          className: "pixygon-auth-button",
+          disabled: isLoading,
+          children: isLoading ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2("div", { className: "pixygon-auth-spinner" }),
+            "Creating account..."
+          ] }) : "Create Account"
+        }
+      )
+    ] }),
+    onNavigateLogin && /* @__PURE__ */ jsxs2("div", { className: "pixygon-auth-footer", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateLogin,
+          children: "Sign in"
+        }
+      )
+    ] }),
+    showBranding && /* @__PURE__ */ jsx2("div", { className: "pixygon-auth-branding", children: "Secured by Pixygon Account" })
+  ] });
+}
+
+// src/components/VerifyForm.tsx
+import { useState as useState3, useCallback as useCallback3, useRef, useEffect } from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function VerifyForm({
+  userName,
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = ""
+}) {
+  const { verify, resendVerification, isLoading, error } = useAuth();
+  const [code, setCode] = useState3(["", "", "", "", "", ""]);
+  const [localError, setLocalError] = useState3(null);
+  const [resendSuccess, setResendSuccess] = useState3(false);
+  const [resendCooldown, setResendCooldown] = useState3(0);
+  const inputRefs = useRef([]);
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  useEffect(() => {
+    if (resendCooldown > 0) {
+      const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1e3);
+      return () => clearTimeout(timer);
+    }
+  }, [resendCooldown]);
+  const handleChange = useCallback3(
+    (index, value) => {
+      if (!/^\d*$/.test(value)) return;
+      const newCode = [...code];
+      newCode[index] = value.slice(-1);
+      setCode(newCode);
+      if (value && index < 5) {
+        inputRefs.current[index + 1]?.focus();
+      }
+      if (newCode.every((digit) => digit) && value) {
+        handleSubmitCode(newCode.join(""));
+      }
+    },
+    [code]
+  );
+  const handleKeyDown = useCallback3(
+    (index, e) => {
+      if (e.key === "Backspace" && !code[index] && index > 0) {
+        inputRefs.current[index - 1]?.focus();
+      }
+    },
+    [code]
+  );
+  const handlePaste = useCallback3(
+    (e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
+      if (pasted.length === 6) {
+        const newCode = pasted.split("");
+        setCode(newCode);
+        inputRefs.current[5]?.focus();
+        handleSubmitCode(pasted);
+      }
+    },
+    []
+  );
+  const handleSubmitCode = useCallback3(
+    async (verificationCode) => {
+      setLocalError(null);
+      setResendSuccess(false);
+      try {
+        const response = await verify({ userName, verificationCode });
+        onSuccess?.(response.user);
+      } catch (err) {
+        const authError = err;
+        onError?.(authError);
+        setCode(["", "", "", "", "", ""]);
+        inputRefs.current[0]?.focus();
+      }
+    },
+    [userName, verify, onSuccess, onError]
+  );
+  const handleSubmit = useCallback3(
+    (e) => {
+      e.preventDefault();
+      const verificationCode = code.join("");
+      if (verificationCode.length !== 6) {
+        setLocalError("Please enter the complete 6-digit code");
+        return;
+      }
+      handleSubmitCode(verificationCode);
+    },
+    [code, handleSubmitCode]
+  );
+  const handleResend = useCallback3(async () => {
+    if (resendCooldown > 0) return;
+    setLocalError(null);
+    setResendSuccess(false);
+    try {
+      await resendVerification({ userName });
+      setResendSuccess(true);
+      setResendCooldown(60);
+    } catch (err) {
+      const authError = err;
+      setLocalError(authError.message);
+    }
+  }, [userName, resendVerification, resendCooldown]);
+  const displayError = localError || error?.message;
+  return /* @__PURE__ */ jsxs3("div", { className: `pixygon-auth-container ${className}`, children: [
+    /* @__PURE__ */ jsx3("style", { children: `
+        .pixygon-auth-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #0f0f0f;
+          color: #ffffff;
+          padding: 2rem;
+          border-radius: 1rem;
+          max-width: 400px;
+          width: 100%;
+          margin: 0 auto;
+        }
+
+        .pixygon-auth-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .pixygon-auth-logo {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 1rem;
+          display: block;
+        }
+
+        .pixygon-auth-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0 0 0.5rem;
+        }
+
+        .pixygon-auth-subtitle {
+          font-size: 0.875rem;
+          color: #a3a3a3;
+          margin: 0;
+        }
+
+        .pixygon-auth-form {
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+        }
+
+        .pixygon-auth-code-container {
+          display: flex;
+          gap: 0.5rem;
+          justify-content: center;
+        }
+
+        .pixygon-auth-code-input {
+          width: 3rem;
+          height: 3.5rem;
+          text-align: center;
+          font-size: 1.5rem;
+          font-weight: 600;
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-code-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-code-input.error {
+          border-color: #ef4444;
+        }
+
+        .pixygon-auth-button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+        }
+
+        .pixygon-auth-button:hover:not(:disabled) {
+          background: #4f46e5;
+        }
+
+        .pixygon-auth-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid #ef4444;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #fca5a5;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-success {
+          background: rgba(34, 197, 94, 0.1);
+          border: 1px solid #22c55e;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #86efac;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-link {
+          color: #6366f1;
+          text-decoration: none;
+          font-size: 0.875rem;
+          cursor: pointer;
+          background: none;
+          border: none;
+          padding: 0;
+          font-family: inherit;
+        }
+
+        .pixygon-auth-link:hover {
+          color: #818cf8;
+          text-decoration: underline;
+        }
+
+        .pixygon-auth-link:disabled {
+          color: #737373;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-footer {
+          text-align: center;
+          margin-top: 1.5rem;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-branding {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1.5rem;
+          font-size: 0.75rem;
+          color: #737373;
+        }
+
+        .pixygon-auth-spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: pixygon-spin 0.8s linear infinite;
+        }
+
+        @keyframes pixygon-spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .pixygon-auth-resend {
+          text-align: center;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+      ` }),
+    /* @__PURE__ */ jsxs3("div", { className: "pixygon-auth-header", children: [
+      /* @__PURE__ */ jsxs3(
+        "svg",
+        {
+          className: "pixygon-auth-logo",
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
+            /* @__PURE__ */ jsx3(
+              "path",
+              {
+                d: "M30 45L45 30L70 55L55 70L30 45Z",
+                fill: "white",
+                fillOpacity: "0.9"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "path",
+              {
+                d: "M35 55L50 70L45 75L30 60L35 55Z",
+                fill: "white",
+                fillOpacity: "0.7"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("h1", { className: "pixygon-auth-title", children: "Verify Email" }),
+      /* @__PURE__ */ jsx3("p", { className: "pixygon-auth-subtitle", children: "Enter the 6-digit code sent to your email" })
+    ] }),
+    /* @__PURE__ */ jsxs3("form", { className: "pixygon-auth-form", onSubmit: handleSubmit, children: [
+      displayError && /* @__PURE__ */ jsx3("div", { className: "pixygon-auth-error", children: displayError }),
+      resendSuccess && /* @__PURE__ */ jsx3("div", { className: "pixygon-auth-success", children: "Verification code sent! Check your email." }),
+      /* @__PURE__ */ jsx3("div", { className: "pixygon-auth-code-container", children: code.map((digit, index) => /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref: (el) => inputRefs.current[index] = el,
+          className: `pixygon-auth-code-input ${displayError ? "error" : ""}`,
+          type: "text",
+          inputMode: "numeric",
+          maxLength: 1,
+          value: digit,
+          onChange: (e) => handleChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: handlePaste,
+          disabled: isLoading,
+          "aria-label": `Digit ${index + 1}`
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "submit",
+          className: "pixygon-auth-button",
+          disabled: isLoading || code.some((d) => !d),
+          children: isLoading ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+            /* @__PURE__ */ jsx3("div", { className: "pixygon-auth-spinner" }),
+            "Verifying..."
+          ] }) : "Verify Email"
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "pixygon-auth-resend", children: [
+        "Didn't receive the code?",
+        " ",
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "pixygon-auth-link",
+            onClick: handleResend,
+            disabled: resendCooldown > 0,
+            children: resendCooldown > 0 ? `Resend in ${resendCooldown}s` : "Resend code"
+          }
+        )
+      ] })
+    ] }),
+    onNavigateLogin && /* @__PURE__ */ jsxs3("div", { className: "pixygon-auth-footer", children: [
+      "Wrong account?",
+      " ",
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateLogin,
+          children: "Sign in with a different account"
+        }
+      )
+    ] }),
+    showBranding && /* @__PURE__ */ jsx3("div", { className: "pixygon-auth-branding", children: "Secured by Pixygon Account" })
+  ] });
+}
+
+// src/components/ForgotPasswordForm.tsx
+import { useState as useState4, useCallback as useCallback4 } from "react";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ForgotPasswordForm({
+  onSuccess,
+  onError,
+  onNavigateLogin,
+  showBranding = true,
+  className = ""
+}) {
+  const { forgotPassword, isLoading, error } = useAuth();
+  const [email, setEmail] = useState4("");
+  const [localError, setLocalError] = useState4(null);
+  const [submitted, setSubmitted] = useState4(false);
+  const handleSubmit = useCallback4(
+    async (e) => {
+      e.preventDefault();
+      setLocalError(null);
+      if (!email.trim()) {
+        setLocalError("Please enter your email address");
+        return;
+      }
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setLocalError("Please enter a valid email address");
+        return;
+      }
+      try {
+        await forgotPassword({ email: email.trim().toLowerCase() });
+        setSubmitted(true);
+        onSuccess?.();
+      } catch (err) {
+        const authError = err;
+        onError?.(authError);
+      }
+    },
+    [email, forgotPassword, onSuccess, onError]
+  );
+  const displayError = localError || error?.message;
+  if (submitted) {
+    return /* @__PURE__ */ jsxs4("div", { className: `pixygon-auth-container ${className}`, children: [
+      /* @__PURE__ */ jsx4("style", { children: `
+          .pixygon-auth-container {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0f0f0f;
+            color: #ffffff;
+            padding: 2rem;
+            border-radius: 1rem;
+            max-width: 400px;
+            width: 100%;
+            margin: 0 auto;
+          }
+
+          .pixygon-auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+          }
+
+          .pixygon-auth-success-icon {
+            width: 64px;
+            height: 64px;
+            margin: 0 auto 1rem;
+            display: block;
+          }
+
+          .pixygon-auth-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin: 0 0 0.5rem;
+          }
+
+          .pixygon-auth-subtitle {
+            font-size: 0.875rem;
+            color: #a3a3a3;
+            margin: 0;
+            line-height: 1.5;
+          }
+
+          .pixygon-auth-link {
+            color: #6366f1;
+            text-decoration: none;
+            font-size: 0.875rem;
+            cursor: pointer;
+            background: none;
+            border: none;
+            padding: 0;
+            font-family: inherit;
+          }
+
+          .pixygon-auth-link:hover {
+            color: #818cf8;
+            text-decoration: underline;
+          }
+
+          .pixygon-auth-footer {
+            text-align: center;
+            margin-top: 1.5rem;
+            font-size: 0.875rem;
+            color: #a3a3a3;
+          }
+
+          .pixygon-auth-branding {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            margin-top: 1.5rem;
+            font-size: 0.75rem;
+            color: #737373;
+          }
+        ` }),
+      /* @__PURE__ */ jsxs4("div", { className: "pixygon-auth-header", children: [
+        /* @__PURE__ */ jsxs4(
+          "svg",
+          {
+            className: "pixygon-auth-success-icon",
+            viewBox: "0 0 100 100",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: "#22c55e" }),
+              /* @__PURE__ */ jsx4(
+                "path",
+                {
+                  d: "M30 50L45 65L70 35",
+                  stroke: "white",
+                  strokeWidth: "6",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("h1", { className: "pixygon-auth-title", children: "Check Your Email" }),
+        /* @__PURE__ */ jsxs4("p", { className: "pixygon-auth-subtitle", children: [
+          "We've sent password reset instructions to",
+          " ",
+          /* @__PURE__ */ jsx4("strong", { children: email }),
+          ". Please check your inbox."
+        ] })
+      ] }),
+      onNavigateLogin && /* @__PURE__ */ jsx4("div", { className: "pixygon-auth-footer", children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateLogin,
+          children: "Back to sign in"
+        }
+      ) }),
+      showBranding && /* @__PURE__ */ jsx4("div", { className: "pixygon-auth-branding", children: "Secured by Pixygon Account" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: `pixygon-auth-container ${className}`, children: [
+    /* @__PURE__ */ jsx4("style", { children: `
+        .pixygon-auth-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #0f0f0f;
+          color: #ffffff;
+          padding: 2rem;
+          border-radius: 1rem;
+          max-width: 400px;
+          width: 100%;
+          margin: 0 auto;
+        }
+
+        .pixygon-auth-header {
+          text-align: center;
+          margin-bottom: 2rem;
+        }
+
+        .pixygon-auth-logo {
+          width: 64px;
+          height: 64px;
+          margin: 0 auto 1rem;
+          display: block;
+        }
+
+        .pixygon-auth-title {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0 0 0.5rem;
+        }
+
+        .pixygon-auth-subtitle {
+          font-size: 0.875rem;
+          color: #a3a3a3;
+          margin: 0;
+        }
+
+        .pixygon-auth-form {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .pixygon-auth-input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 0.375rem;
+        }
+
+        .pixygon-auth-label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-input {
+          background: #262626;
+          border: 1px solid #404040;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          font-size: 1rem;
+          color: #ffffff;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+        }
+
+        .pixygon-auth-input:focus {
+          border-color: #6366f1;
+          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+
+        .pixygon-auth-input.error {
+          border-color: #ef4444;
+        }
+
+        .pixygon-auth-button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 0.5rem;
+          padding: 0.875rem 1.5rem;
+          font-size: 1rem;
+          font-weight: 600;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 0.5rem;
+        }
+
+        .pixygon-auth-button:hover:not(:disabled) {
+          background: #4f46e5;
+        }
+
+        .pixygon-auth-button:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+
+        .pixygon-auth-error {
+          background: rgba(239, 68, 68, 0.1);
+          border: 1px solid #ef4444;
+          border-radius: 0.5rem;
+          padding: 0.75rem 1rem;
+          color: #fca5a5;
+          font-size: 0.875rem;
+        }
+
+        .pixygon-auth-link {
+          color: #6366f1;
+          text-decoration: none;
+          font-size: 0.875rem;
+          cursor: pointer;
+          background: none;
+          border: none;
+          padding: 0;
+          font-family: inherit;
+        }
+
+        .pixygon-auth-link:hover {
+          color: #818cf8;
+          text-decoration: underline;
+        }
+
+        .pixygon-auth-footer {
+          text-align: center;
+          margin-top: 1.5rem;
+          font-size: 0.875rem;
+          color: #a3a3a3;
+        }
+
+        .pixygon-auth-branding {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          margin-top: 1.5rem;
+          font-size: 0.75rem;
+          color: #737373;
+        }
+
+        .pixygon-auth-spinner {
+          width: 20px;
+          height: 20px;
+          border: 2px solid transparent;
+          border-top-color: currentColor;
+          border-radius: 50%;
+          animation: pixygon-spin 0.8s linear infinite;
+        }
+
+        @keyframes pixygon-spin {
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs4("div", { className: "pixygon-auth-header", children: [
+      /* @__PURE__ */ jsxs4(
+        "svg",
+        {
+          className: "pixygon-auth-logo",
+          viewBox: "0 0 100 100",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "45", fill: "#6366f1" }),
+            /* @__PURE__ */ jsx4(
+              "path",
+              {
+                d: "M30 45L45 30L70 55L55 70L30 45Z",
+                fill: "white",
+                fillOpacity: "0.9"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "path",
+              {
+                d: "M35 55L50 70L45 75L30 60L35 55Z",
+                fill: "white",
+                fillOpacity: "0.7"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4("h1", { className: "pixygon-auth-title", children: "Reset Password" }),
+      /* @__PURE__ */ jsx4("p", { className: "pixygon-auth-subtitle", children: "Enter your email to receive reset instructions" })
+    ] }),
+    /* @__PURE__ */ jsxs4("form", { className: "pixygon-auth-form", onSubmit: handleSubmit, children: [
+      displayError && /* @__PURE__ */ jsx4("div", { className: "pixygon-auth-error", children: displayError }),
+      /* @__PURE__ */ jsxs4("div", { className: "pixygon-auth-input-group", children: [
+        /* @__PURE__ */ jsx4("label", { className: "pixygon-auth-label", htmlFor: "pixygon-forgot-email", children: "Email" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            id: "pixygon-forgot-email",
+            className: `pixygon-auth-input ${displayError ? "error" : ""}`,
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "Enter your email",
+            autoComplete: "email",
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "submit",
+          className: "pixygon-auth-button",
+          disabled: isLoading,
+          children: isLoading ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            /* @__PURE__ */ jsx4("div", { className: "pixygon-auth-spinner" }),
+            "Sending..."
+          ] }) : "Send Reset Link"
+        }
+      )
+    ] }),
+    onNavigateLogin && /* @__PURE__ */ jsxs4("div", { className: "pixygon-auth-footer", children: [
+      "Remember your password?",
+      " ",
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "pixygon-auth-link",
+          onClick: onNavigateLogin,
+          children: "Sign in"
+        }
+      )
+    ] }),
+    showBranding && /* @__PURE__ */ jsx4("div", { className: "pixygon-auth-branding", children: "Secured by Pixygon Account" })
+  ] });
+}
+
+// src/components/PixygonAuth.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function PixygonAuth({
+  mode: initialMode,
+  onSuccess,
+  onError,
+  onModeChange,
+  userName: initialUserName,
+  showBranding = true,
+  theme = "dark",
+  className = ""
+}) {
+  const [mode, setMode] = useState5(initialMode);
+  const [userName, setUserName] = useState5(initialUserName || "");
+  useEffect2(() => {
+    setMode(initialMode);
+  }, [initialMode]);
+  const handleModeChange = useCallback5(
+    (newMode) => {
+      setMode(newMode);
+      onModeChange?.(newMode);
+    },
+    [onModeChange]
+  );
+  const handleLoginSuccess = useCallback5(
+    (user) => {
+      if (!user.isVerified) {
+        setUserName(user.userName);
+        handleModeChange("verify");
+      } else {
+        onSuccess?.(user);
+      }
+    },
+    [handleModeChange, onSuccess]
+  );
+  const handleRegisterSuccess = useCallback5(
+    (user) => {
+      setUserName(user.userName);
+      handleModeChange("verify");
+    },
+    [handleModeChange]
+  );
+  const handleVerifySuccess = useCallback5(
+    (user) => {
+      onSuccess?.(user);
+    },
+    [onSuccess]
+  );
+  const handleForgotPasswordSuccess = useCallback5(() => {
+  }, []);
+  const handleError = useCallback5(
+    (error) => {
+      onError?.(error);
+    },
+    [onError]
+  );
+  const containerClassName = `pixygon-auth-wrapper ${theme === "light" ? "light" : ""} ${className}`;
+  return /* @__PURE__ */ jsxs5("div", { className: containerClassName, children: [
+    /* @__PURE__ */ jsx5("style", { children: `
+        .pixygon-auth-wrapper {
+          width: 100%;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-container {
+          background: #ffffff;
+          color: #0f0f0f;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-input {
+          background: #f5f5f5;
+          border-color: #e5e5e5;
+          color: #0f0f0f;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-input:focus {
+          border-color: #6366f1;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-label {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-subtitle {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-footer {
+          color: #525252;
+        }
+
+        .pixygon-auth-wrapper.light .pixygon-auth-branding {
+          color: #a3a3a3;
+        }
+      ` }),
+    mode === "login" && /* @__PURE__ */ jsx5(
+      LoginForm,
+      {
+        onSuccess: handleLoginSuccess,
+        onError: handleError,
+        onNavigateRegister: () => handleModeChange("register"),
+        onNavigateForgotPassword: () => handleModeChange("forgot-password"),
+        showBranding
+      }
+    ),
+    mode === "register" && /* @__PURE__ */ jsx5(
+      RegisterForm,
+      {
+        onSuccess: handleRegisterSuccess,
+        onError: handleError,
+        onNavigateLogin: () => handleModeChange("login"),
+        showBranding
+      }
+    ),
+    mode === "verify" && /* @__PURE__ */ jsx5(
+      VerifyForm,
+      {
+        userName,
+        onSuccess: handleVerifySuccess,
+        onError: handleError,
+        onNavigateLogin: () => handleModeChange("login"),
+        showBranding
+      }
+    ),
+    mode === "forgot-password" && /* @__PURE__ */ jsx5(
+      ForgotPasswordForm,
+      {
+        onSuccess: handleForgotPasswordSuccess,
+        onError: handleError,
+        onNavigateLogin: () => handleModeChange("login"),
+        showBranding
+      }
+    ),
+    mode === "recover-password" && // Recovery form would go here - handled via email link typically
+    /* @__PURE__ */ jsx5(
+      ForgotPasswordForm,
+      {
+        onSuccess: handleForgotPasswordSuccess,
+        onError: handleError,
+        onNavigateLogin: () => handleModeChange("login"),
+        showBranding
+      }
+    )
+  ] });
+}
+export {
+  ForgotPasswordForm,
+  LoginForm,
+  PixygonAuth,
+  RegisterForm,
+  VerifyForm
+};