@retinalabsllc/zairusjs 15.0.85 → 15.0.90

package/dist/index.mjs

@@ -293,12 +293,143 @@ var Header = ({
 };
 
 // src/components/PipleAuth.tsx
-import React5, { useState as useState3, useRef as useRef2, useEffect as useEffect3, Suspense } from "react";
+import React6, { useState as useState4, useRef as useRef2, useEffect as useEffect3, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import toast from "react-hot-toast";
 import { useGoogleReCaptcha, GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
 import { startAuthentication } from "@simplewebauthn/browser";
-var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+
+// src/components/TextInput.tsx
+import React5, { useState as useState3 } from "react";
+var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-3 w-3 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var FlagImage = ({ countryCode }) => {
+  const [loaded, setLoaded] = useState3(false);
+  return /* @__PURE__ */ React5.createElement("div", { className: "relative w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0 border border-neutral-200" }, !loaded && /* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)), /* @__PURE__ */ React5.createElement(
+    "img",
+    {
+      src: `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`,
+      alt: countryCode,
+      className: `object-cover w-full h-full transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`,
+      onLoad: () => setLoaded(true)
+    }
+  ));
+};
+var TextInput = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  maxLength,
+  disabled,
+  readOnly,
+  type = "text",
+  onClick
+}) => /* @__PURE__ */ React5.createElement("div", { className: "space-y-2 flex-1 w-full", onClick }, label && /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ React5.createElement(
+  "input",
+  {
+    type,
+    value,
+    onChange: (e) => onChange(e.target.value.substring(0, maxLength || 100)),
+    placeholder,
+    disabled,
+    readOnly,
+    autoComplete: "off",
+    spellCheck: "false",
+    className: `w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black disabled:opacity-50 ${readOnly ? "cursor-pointer" : ""}`
+  }
+));
+var NumberInput = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  maxLength,
+  disabled
+}) => /* @__PURE__ */ React5.createElement("div", { className: "space-y-2 flex-1 w-full" }, label && /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ React5.createElement(
+  "input",
+  {
+    type: "text",
+    value,
+    onChange: (e) => {
+      const numOnly = e.target.value.replace(/[^0-9]/g, "");
+      onChange(numOnly.substring(0, maxLength || 20));
+    },
+    placeholder,
+    disabled,
+    autoComplete: "off",
+    spellCheck: "false",
+    className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black disabled:opacity-50"
+  }
+));
+var PhoneInput = ({
+  label,
+  value,
+  onChange,
+  selectedCountry,
+  onCountryClick,
+  placeholder,
+  disabled
+}) => /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 flex-1 w-full" }, label && /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ React5.createElement("div", { className: `flex items-center gap-3 border-b border-neutral-200 focus-within:border-black transition-all duration-300 pb-2 ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ React5.createElement(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: onCountryClick,
+    className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
+  },
+  /* @__PURE__ */ React5.createElement(FlagImage, { countryCode: selectedCountry.code }),
+  /* @__PURE__ */ React5.createElement("span", { className: "text-sm text-black font-medium pl-1" }, selectedCountry.dialCode),
+  /* @__PURE__ */ React5.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
+), /* @__PURE__ */ React5.createElement(
+  "input",
+  {
+    type: "tel",
+    value,
+    onChange: (e) => {
+      const numOnly = e.target.value.replace(/[^0-9]/g, "");
+      onChange(numOnly.substring(0, 15));
+    },
+    disabled,
+    required: true,
+    autoFocus: true,
+    autoComplete: "off",
+    spellCheck: "false",
+    className: "w-full text-sm bg-transparent text-black outline-none pt-1",
+    placeholder: placeholder || "0801 234 5678"
+  }
+)));
+
+// src/components/PipleAuth.tsx
+var SUPPORTED_COUNTRIES = [
+  { code: "NG", dialCode: "+234", name: "Nigeria" },
+  { code: "GH", dialCode: "+233", name: "Ghana" },
+  { code: "KE", dialCode: "+254", name: "Kenya" }
+];
+var InputSpinner2 = () => /* @__PURE__ */ React6.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React6.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React6.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var CountrySelectorDialog = ({ isOpen, onClose, onSelect }) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React6.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0", onClick: onClose }), /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-sm bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: onClose,
+      className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none"
+    },
+    /* @__PURE__ */ React6.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React6.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ React6.createElement("path", { d: "m6 6 12 12" }))
+  ), /* @__PURE__ */ React6.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Country"), /* @__PURE__ */ React6.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Choose your region to continue.")), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-2" }, SUPPORTED_COUNTRIES.map((c) => /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      key: c.code,
+      onClick: () => {
+        onSelect(c);
+        onClose();
+      },
+      className: "flex items-center gap-4 p-3 rounded-xl hover:bg-neutral-50 transition-colors text-left outline-none"
+    },
+    /* @__PURE__ */ React6.createElement(FlagImage, { countryCode: c.code }),
+    /* @__PURE__ */ React6.createElement("span", { className: "text-sm text-black flex-1 font-medium" }, c.name),
+    /* @__PURE__ */ React6.createElement("span", { className: "text-sm text-neutral-500 font-mono" }, c.dialCode)
+  ))))));
+};
 function AuthFormInner({
   companyName,
   workspaceLabel = "Workspace",
@@ -314,28 +445,26 @@ function AuthFormInner({
   const searchParams = useSearchParams();
   const redirectUrl = searchParams.get("redirect") || defaultRedirectPath;
   const captchaContext = useRecaptcha ? useGoogleReCaptcha() : null;
-  const [mode, setMode] = useState3("LOGIN");
-  const [step, setStep] = useState3("INPUT");
-  const getInitialSignupStep = () => {
-    return "INVITATION";
-  };
-  const [signupStep, setSignupStep] = useState3(getInitialSignupStep());
-  const [isSubmitting, setIsSubmitting] = useState3(false);
-  const [countdown, setCountdown] = useState3(0);
-  const [invitationCode, setInvitationCode] = useState3("");
-  const [emailId, setEmailId] = useState3("");
-  const [firstName, setFirstName] = useState3("");
-  const [lastName, setLastName] = useState3("");
-  const [orgName, setOrgName] = useState3("");
-  const [agreedToTerms, setAgreedToTerms] = useState3(false);
-  const [userHas2FA, setUserHas2FA] = useState3(false);
-  const [userHasPasskey, setUserHasPasskey] = useState3(false);
-  const [authOptions, setAuthOptions] = useState3(null);
-  const [otp, setOtp] = useState3(["", "", "", "", "", ""]);
+  const [mode, setMode] = useState4("LOGIN");
+  const [step, setStep] = useState4("INPUT");
+  const getInitialSignupStep = () => "INVITATION";
+  const [signupStep, setSignupStep] = useState4(getInitialSignupStep());
+  const [isSubmitting, setIsSubmitting] = useState4(false);
+  const [countdown, setCountdown] = useState4(0);
+  const [invitationCode, setInvitationCode] = useState4("");
+  const [phoneNumber, setPhoneNumber] = useState4("");
+  const [selectedCountry, setSelectedCountry] = useState4(SUPPORTED_COUNTRIES[0]);
+  const [isCountryDialogOpen, setIsCountryDialogOpen] = useState4(false);
+  const [firstName, setFirstName] = useState4("");
+  const [lastName, setLastName] = useState4("");
+  const [orgName, setOrgName] = useState4("");
+  const [agreedToTerms, setAgreedToTerms] = useState4(false);
+  const [userHasPasskey, setUserHasPasskey] = useState4(false);
+  const [authOptions, setAuthOptions] = useState4(null);
+  const [otp, setOtp] = useState4(["", "", "", "", "", ""]);
   const inputRefs = useRef2([]);
   const cleanAlpha = (val) => val.replace(/[^a-zA-Z]/g, "").substring(0, 50);
   const cleanOrgName = (val) => val.replace(/[^a-zA-Z0-9\s]/g, "").substring(0, 50);
-  const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
   useEffect3(() => {
     if (countdown > 0) {
       const timer = setTimeout(() => setCountdown(countdown - 1), 1e3);
@@ -365,6 +494,10 @@ function AuthFormInner({
       verifyOtpCode(newOtp.join(""));
     }
   };
+  const getFormattedPhoneNumber = () => {
+    const cleanNumber = phoneNumber.replace(/^0+/, "");
+    return `${selectedCountry.dialCode}${cleanNumber}`;
+  };
   const handleAuthRequestSubmit = async (e) => {
     if (e) e.preventDefault();
     if (mode === "SIGNUP" && !agreedToTerms) {
@@ -379,7 +512,8 @@ function AuthFormInner({
         recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
       }
       const res = await onAuthRequest({
-        email: emailId,
+        phoneNumber: getFormattedPhoneNumber(),
+        country: selectedCountry.code,
         firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
         lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
         organizationName: mode === "SIGNUP" && requireOrganization ? orgName : void 0,
@@ -388,10 +522,9 @@ function AuthFormInner({
         recaptchaToken
       });
       if (res.success) {
-        setUserHas2FA(!!res.has2FA);
         setUserHasPasskey(!!res.hasPasskey);
         if (res.passkeyOptions) setAuthOptions(res.passkeyOptions);
-        toast.success(res.has2FA ? "Security check required" : "Verification code sent");
+        toast.success(res.needsPukSetup ? "Verification code sent" : "Security check required");
         setStep("OTP");
         setCountdown(60);
       } else {
@@ -407,7 +540,10 @@ function AuthFormInner({
     if (codeToVerify.length !== 6 || isSubmitting) return;
     setIsSubmitting(true);
     try {
-      const res = await onVerifyOtp({ email: emailId, code: codeToVerify });
+      const res = await onVerifyOtp({
+        phoneNumber: getFormattedPhoneNumber(),
+        code: codeToVerify
+      });
       if (res.success) {
         window.location.href = res.redirect || redirectUrl;
       } else {
@@ -426,7 +562,11 @@ function AuthFormInner({
     setIsSubmitting(true);
     try {
       const credentialResponse = await startAuthentication({ optionsJSON: authOptions });
-      const res = await onVerifyOtp({ email: emailId, isPasskey: true, passkeyCredential: credentialResponse });
+      const res = await onVerifyOtp({
+        phoneNumber: getFormattedPhoneNumber(),
+        isPasskey: true,
+        passkeyCredential: credentialResponse
+      });
       if (res.success) {
         window.location.href = res.redirect || redirectUrl;
       } else {
@@ -442,35 +582,42 @@ function AuthFormInner({
     if (signupStep === "INVITATION") {
       if (requireNames) setSignupStep("NAME");
       else if (requireOrganization) setSignupStep("ORGANIZATION");
-      else setSignupStep("EMAIL_ID");
+      else setSignupStep("PHONE_ID");
     } else if (signupStep === "NAME") {
       if (requireOrganization) setSignupStep("ORGANIZATION");
-      else setSignupStep("EMAIL_ID");
+      else setSignupStep("PHONE_ID");
     } else if (signupStep === "ORGANIZATION") {
-      setSignupStep("EMAIL_ID");
+      setSignupStep("PHONE_ID");
     }
   };
   const isContinueDisabled = () => {
     if (isSubmitting) return true;
-    if (mode === "LOGIN") return emailId.length < 3;
+    if (mode === "LOGIN") return phoneNumber.length < 5;
     if (mode === "SIGNUP") {
       if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
       if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
       if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
-      if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
+      if (signupStep === "PHONE_ID") return phoneNumber.length < 5 || !agreedToTerms;
     }
     return false;
   };
-  return /* @__PURE__ */ React5.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ React5.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, "Don't have an account? ", /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    CountrySelectorDialog,
+    {
+      isOpen: isCountryDialogOpen,
+      onClose: () => setIsCountryDialogOpen(false),
+      onSelect: setSelectedCountry
+    }
+  ), /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ React6.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, "Don't have an account? ", /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => {
     setMode("SIGNUP");
     setSignupStep(getInitialSignupStep());
-  }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ React5.createElement(React5.Fragment, null, "Already have an account? ", /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ React5.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
+  }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, "Already have an account? ", /* @__PURE__ */ React6.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ React6.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     if (mode === "SIGNUP" && signupStep === "INVITATION") handleNextSignupStep();
     else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
     else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
     else handleAuthRequestSubmit();
-  } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ React5.createElement(
+  } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ React6.createElement(
     "input",
     {
       type: "text",
@@ -480,10 +627,20 @@ function AuthFormInner({
       className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
       placeholder: "Referral Code (Optional)"
     }
-  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ React5.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ React5.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React6.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React6.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "PHONE_ID") && /* @__PURE__ */ React6.createElement("div", { className: "space-y-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement(
+    PhoneInput,
+    {
+      label: "Phone Number",
+      value: phoneNumber,
+      onChange: setPhoneNumber,
+      selectedCountry,
+      onCountryClick: () => setIsCountryDialogOpen(true),
+      disabled: isSubmitting
+    }
+  ), mode === "SIGNUP" && /* @__PURE__ */ React6.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React6.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React6.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React6.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React6.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React6.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter your 6-digit security passcode or OTP.")), /* @__PURE__ */ React6.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
-  } }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
+  } }, /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React6.createElement(
     "input",
     {
       key: index,
@@ -500,25 +657,25 @@ function AuthFormInner({
       },
       className: "w-10 h-12 text-center text-lg bg-transparent border-b-2 border-neutral-200 text-black outline-none focus:border-black transition-all duration-300"
     }
-  ))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: otp.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Verify Code")), userHasPasskey && /* @__PURE__ */ React5.createElement("div", { className: "pt-6 " }, /* @__PURE__ */ React5.createElement(
+  ))), /* @__PURE__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: otp.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Verify Code")), userHasPasskey && /* @__PURE__ */ React6.createElement("div", { className: "pt-6" }, /* @__PURE__ */ React6.createElement(
     "button",
     {
       onClick: triggerPasskeyLogin,
       disabled: isSubmitting,
-      className: "w-full py-2.5 rounded-full text-black border border-neutral-200  hover:bg-neutral-50 text-xs  tracking-wide transition-colors outline-none disabled:opacity-50"
+      className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
     },
     "Use Passkey / Biometrics"
-  ))))));
+  )))))));
 }
 var PipleAuth = (props) => {
   if (props.useRecaptcha && props.recaptchaSiteKey) {
-    return /* @__PURE__ */ React5.createElement(GoogleReCaptchaProvider, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ React5.createElement(Suspense, { fallback: /* @__PURE__ */ React5.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)) }, /* @__PURE__ */ React5.createElement(AuthFormInner, { ...props })));
+    return /* @__PURE__ */ React6.createElement(GoogleReCaptchaProvider, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ React6.createElement(Suspense, { fallback: /* @__PURE__ */ React6.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React6.createElement(InputSpinner2, null)) }, /* @__PURE__ */ React6.createElement(AuthFormInner, { ...props })));
   }
-  return /* @__PURE__ */ React5.createElement(Suspense, { fallback: /* @__PURE__ */ React5.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)) }, /* @__PURE__ */ React5.createElement(AuthFormInner, { ...props }));
+  return /* @__PURE__ */ React6.createElement(Suspense, { fallback: /* @__PURE__ */ React6.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React6.createElement(InputSpinner2, null)) }, /* @__PURE__ */ React6.createElement(AuthFormInner, { ...props }));
 };
 
 // src/components/Footer.tsx
-import React6, { useState as useState4 } from "react";
+import React7, { useState as useState5 } from "react";
 import Link3 from "next/link";
 import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
 var Footer = ({
@@ -528,20 +685,20 @@ var Footer = ({
   copyrightText,
   topSection
 }) => {
-  const [openCol, setOpenCol] = useState4(null);
+  const [openCol, setOpenCol] = useState5(null);
   const toggleColumn = (idx) => {
     setOpenCol(openCol === idx ? null : idx);
   };
-  return /* @__PURE__ */ React6.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ React6.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ React6.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ React6.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ React6.createElement("img", { src: "https://retinalabs.company/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ React6.createElement("img", { src: "https://retinalabs.company/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("p", { className: "text-[11px]  text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ React6.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ React6.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ React6.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ React6.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React6.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ React6.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
+  return /* @__PURE__ */ React7.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ React7.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ React7.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ React7.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ React7.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ React7.createElement("img", { src: "https://retinalabs.company/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ React7.createElement("img", { src: "https://retinalabs.company/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement("p", { className: "text-[11px]  text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ React7.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ React7.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ React7.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ React7.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ React7.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ React7.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React7.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ React7.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
     const isOpen = openCol === idx;
-    return /* @__PURE__ */ React6.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ React7.createElement(
       "button",
       {
         onClick: () => toggleColumn(idx),
         className: "w-full flex items-center justify-between py-5 text-left outline-none"
       },
-      /* @__PURE__ */ React6.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
-      /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React7.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
+      /* @__PURE__ */ React7.createElement(
         "svg",
         {
           className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
@@ -549,10 +706,10 @@ var Footer = ({
           viewBox: "0 0 24 24",
           stroke: "currentColor"
         },
-        /* @__PURE__ */ React6.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
+        /* @__PURE__ */ React7.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
       )
-    ), /* @__PURE__ */ React6.createElement("div", { className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] pb-6 opacity-100" : "grid-rows-[0fr] opacity-0"}` }, /* @__PURE__ */ React6.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React6.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ React6.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React6.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ React6.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
-  })))), /* @__PURE__ */ React6.createElement("div", { className: "pt-8 mt-4  flex flex-col-reverse md:flex-row justify-between items-start md:items-center gap-6 relative z-20" }, /* @__PURE__ */ React6.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ React6.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] pb-6 opacity-100" : "grid-rows-[0fr] opacity-0"}` }, /* @__PURE__ */ React7.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React7.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ React7.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React7.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ React7.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
+  })))), /* @__PURE__ */ React7.createElement("div", { className: "pt-8 mt-4  flex flex-col-reverse md:flex-row justify-between items-start md:items-center gap-6 relative z-20" }, /* @__PURE__ */ React7.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ React7.createElement(
     "a",
     {
       key: idx,
@@ -561,12 +718,12 @@ var Footer = ({
       rel: "noopener noreferrer",
       className: "text-neutral-400 hover:text-black transition-colors"
     },
-    /* @__PURE__ */ React6.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
+    /* @__PURE__ */ React7.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
   ))))))));
 };
 
 // src/components/MobileNav.tsx
-import React7 from "react";
+import React8 from "react";
 import Link4 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
@@ -576,23 +733,23 @@ var MobileNav = ({ items }) => {
   const pathMatches = items.some((item) => {
     return item.href === "/" || item.href === "/app" ? pathname === "/" || pathname === "/app" : pathname === item.href || pathname?.startsWith(`${item.href}/`);
   });
-  return /* @__PURE__ */ React7.createElement("div", { className: "fixed bottom-6 inset-x-0 z-100 flex justify-center pointer-events-none px-3 animate-in slide-in-from-bottom-8 fade-in duration-500 md:hidden" }, /* @__PURE__ */ React7.createElement("nav", { className: "pointer-events-auto w-full max-w-sm bg-white/50 backdrop-blur-xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] rounded-full px-6 py-2.5 flex items-center justify-between" }, items.map((item, index) => {
+  return /* @__PURE__ */ React8.createElement("div", { className: "fixed bottom-6 inset-x-0 z-100 flex justify-center pointer-events-none px-3 animate-in slide-in-from-bottom-8 fade-in duration-500 md:hidden" }, /* @__PURE__ */ React8.createElement("nav", { className: "pointer-events-auto w-full max-w-sm bg-white/50 backdrop-blur-xl shadow-[0_8px_30px_rgb(0,0,0,0.08)] rounded-full px-6 py-2.5 flex items-center justify-between" }, items.map((item, index) => {
     const isActive = !pathMatches && index === 0 ? true : item.href === "/" || item.href === "/app" ? pathname === "/" || pathname === "/app" : pathname === item.href || pathname?.startsWith(`${item.href}/`);
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       Link4,
       {
         key: item.label,
         href: item.href,
         className: "flex flex-col items-center justify-center gap-1 min-w-14 transition-transform active:scale-95 outline-none"
       },
-      /* @__PURE__ */ React7.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ React8.createElement(
         HugeiconsIcon3,
         {
           icon: item.icon,
           size: 20
         }
       )),
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement(
         "span",
         {
           className: `text-[9px] tracking-wide transition-colors duration-300  ${isActive ? "text-black" : "text-neutral-400"}`
@@ -604,14 +761,14 @@ var MobileNav = ({ items }) => {
 };
 
 // src/components/UniversalOrganizationPage.tsx
-import React11, { useState as useState6, useEffect as useEffect4 } from "react";
+import React11, { useState as useState7, useEffect as useEffect4 } from "react";
 import toast2 from "react-hot-toast";
 
 // src/components/ManagedToaster.tsx
-import React8 from "react";
+import React9 from "react";
 import { Toaster } from "react-hot-toast";
 var ManagedToaster = () => {
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Toaster,
     {
       position: "top-right",
@@ -642,58 +799,8 @@ var ManagedToaster = () => {
   );
 };
 
-// src/components/TextInput.tsx
-import React9 from "react";
-var TextInput = ({
-  label,
-  value,
-  onChange,
-  placeholder,
-  maxLength,
-  disabled,
-  readOnly,
-  type = "text",
-  onClick
-}) => /* @__PURE__ */ React9.createElement("div", { className: "space-y-2 flex-1 w-full", onClick }, label && /* @__PURE__ */ React9.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ React9.createElement(
-  "input",
-  {
-    type,
-    value,
-    onChange: (e) => onChange(e.target.value.substring(0, maxLength || 100)),
-    placeholder,
-    disabled,
-    readOnly,
-    autoComplete: "off",
-    spellCheck: "false",
-    className: `w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black disabled:opacity-50 ${readOnly ? "cursor-pointer" : ""}`
-  }
-));
-var NumberInput = ({
-  label,
-  value,
-  onChange,
-  placeholder,
-  maxLength,
-  disabled
-}) => /* @__PURE__ */ React9.createElement("div", { className: "space-y-2 flex-1 w-full" }, label && /* @__PURE__ */ React9.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ React9.createElement(
-  "input",
-  {
-    type: "text",
-    value,
-    onChange: (e) => {
-      const numOnly = e.target.value.replace(/[^0-9]/g, "");
-      onChange(numOnly.substring(0, maxLength || 20));
-    },
-    placeholder,
-    disabled,
-    autoComplete: "off",
-    spellCheck: "false",
-    className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black transition-all outline-none focus:border-black disabled:opacity-50"
-  }
-));
-
 // src/components/Banner.tsx
-import React10, { useState as useState5 } from "react";
+import React10, { useState as useState6 } from "react";
 import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
 import {
   Alert02Icon,
@@ -710,7 +817,7 @@ var Banner = ({
   onDismiss,
   action
 }) => {
-  const [isVisible, setIsVisible] = useState5(true);
+  const [isVisible, setIsVisible] = useState6(true);
   if (!isVisible) return null;
   const handleDismiss = () => {
     setIsVisible(false);
@@ -759,7 +866,7 @@ import {
   ArrowLeft01Icon,
   CircleLock02Icon
 } from "@hugeicons/core-free-icons";
-var InputSpinner2 = () => /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React11.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
+var InputSpinner3 = () => /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React11.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React11.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
 var UniversalOrganizationPage = ({
   initialOrgName,
   initialSlug,
@@ -776,12 +883,12 @@ var UniversalOrganizationPage = ({
     if (typeof window !== "undefined") window.history.back();
   });
   const resolvedInitialUsername = initialUsername || initialSlug;
-  const [web3Name, setWeb3Name] = useState6(initialOrgName);
-  const [username, setUsername] = useState6(resolvedInitialUsername);
-  const [slug, setSlug] = useState6(initialSlug);
-  const [isCheckingSlug, setIsCheckingSlug] = useState6(false);
-  const [slugAvailable, setSlugAvailable] = useState6(null);
-  const [isSubmitting, setIsSubmitting] = useState6(false);
+  const [web3Name, setWeb3Name] = useState7(initialOrgName);
+  const [username, setUsername] = useState7(resolvedInitialUsername);
+  const [slug, setSlug] = useState7(initialSlug);
+  const [isCheckingSlug, setIsCheckingSlug] = useState7(false);
+  const [slugAvailable, setSlugAvailable] = useState7(null);
+  const [isSubmitting, setIsSubmitting] = useState7(false);
   useEffect4(() => {
     setWeb3Name(initialOrgName || "");
     setSlug(initialSlug || "");
@@ -891,7 +998,7 @@ var UniversalOrganizationPage = ({
       className: "w-full px-2 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed",
       placeholder: "sovereign-user-handle"
     }
-  ), /* @__PURE__ */ React11.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-8 shrink-0 whitespace-nowrap" }, slugPrefixUrl), /* @__PURE__ */ React11.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React11.createElement(InputSpinner2, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React11.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React11.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React11.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React11.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React11.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React11.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-8 shrink-0 whitespace-nowrap" }, slugPrefixUrl), /* @__PURE__ */ React11.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React11.createElement(InputSpinner3, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React11.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React11.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React11.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React11.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React11.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React11.createElement(
     ThreeDActionButton,
     {
       type: "submit",
@@ -916,7 +1023,7 @@ var UniversalOrganizationPage = ({
 };
 
 // src/components/UniversalProfileSettings.tsx
-import React12, { useState as useState7, useEffect as useEffect5 } from "react";
+import React12, { useState as useState8, useEffect as useEffect5 } from "react";
 import toast3 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
 import {
@@ -943,14 +1050,14 @@ var UniversalProfileSettings = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [firstName, setFirstName] = useState7(initialFirstName);
-  const [lastName, setLastName] = useState7(initialLastName);
-  const [isSubmitting, setIsSubmitting] = useState7(false);
-  const [isPinModalOpen, setIsPinModalOpen] = useState7(false);
-  const [oldPin, setOldPin] = useState7("");
-  const [newPin, setNewPin] = useState7("");
-  const [confirmPin, setConfirmPin] = useState7("");
-  const [isPinSubmitting, setIsPinSubmitting] = useState7(false);
+  const [firstName, setFirstName] = useState8(initialFirstName);
+  const [lastName, setLastName] = useState8(initialLastName);
+  const [isSubmitting, setIsSubmitting] = useState8(false);
+  const [isPinModalOpen, setIsPinModalOpen] = useState8(false);
+  const [oldPin, setOldPin] = useState8("");
+  const [newPin, setNewPin] = useState8("");
+  const [confirmPin, setConfirmPin] = useState8("");
+  const [isPinSubmitting, setIsPinSubmitting] = useState8(false);
   useEffect5(() => {
     setFirstName(initialFirstName || "");
     setLastName(initialLastName || "");
@@ -1214,7 +1321,7 @@ var UniversalErrorView = ({
 };
 
 // src/components/UniversalTransactionPage.tsx
-import React15, { useState as useState8, useEffect as useEffect6, useRef as useRef3 } from "react";
+import React15, { useState as useState9, useEffect as useEffect6, useRef as useRef3 } from "react";
 import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react";
 import toast4 from "react-hot-toast";
 import {
@@ -1276,12 +1383,12 @@ var UniversalTransactionPage = ({
   onReportTransaction,
   onGenerateReceipt
 }) => {
-  const [selectedTransaction, setSelectedTransaction] = useState8(null);
-  const [isGeneratingReceipt, setIsGeneratingReceipt] = useState8(false);
-  const [localSearchQuery, setLocalSearchQuery] = useState8(searchQuery);
-  const [isTyping, setIsTyping] = useState8(false);
-  const [isDirectionModalOpen, setIsDirectionModalOpen] = useState8(false);
-  const [isTypeModalOpen, setIsTypeModalOpen] = useState8(false);
+  const [selectedTransaction, setSelectedTransaction] = useState9(null);
+  const [isGeneratingReceipt, setIsGeneratingReceipt] = useState9(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState9(searchQuery);
+  const [isTyping, setIsTyping] = useState9(false);
+  const [isDirectionModalOpen, setIsDirectionModalOpen] = useState9(false);
+  const [isTypeModalOpen, setIsTypeModalOpen] = useState9(false);
   const directionDropdownRef = useRef3(null);
   const typeDropdownRef = useRef3(null);
   useEffect6(() => {
@@ -1448,7 +1555,7 @@ var UniversalTransactionPage = ({
 };
 
 // src/components/UniversalHomeView.tsx
-import React16, { useState as useState9, useEffect as useEffect7 } from "react";
+import React16, { useState as useState10, useEffect as useEffect7 } from "react";
 import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
 import {
   ViewOffSlashIcon,
@@ -1511,11 +1618,11 @@ var UniversalHomeView = ({
   customContent,
   transactionsProps
 }) => {
-  const [displayAmount, setDisplayAmount] = useState9("0.00");
-  const [isBalanceHidden, setIsBalanceHidden] = useState9(false);
-  const [isAvatarLoaded, setIsAvatarLoaded] = useState9(false);
-  const [showNotifDialog, setShowNotifDialog] = useState9(false);
-  const [selectedNotif, setSelectedNotif] = useState9(null);
+  const [displayAmount, setDisplayAmount] = useState10("0.00");
+  const [isBalanceHidden, setIsBalanceHidden] = useState10(false);
+  const [isAvatarLoaded, setIsAvatarLoaded] = useState10(false);
+  const [showNotifDialog, setShowNotifDialog] = useState10(false);
+  const [selectedNotif, setSelectedNotif] = useState10(null);
   const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
   const hasUnreadNotifs = notifications.some((n) => !n.isRead);
@@ -1643,7 +1750,7 @@ var UniversalHomeView = ({
 };
 
 // src/components/UniversalWalletPage.tsx
-import React18, { useState as useState10 } from "react";
+import React18, { useState as useState11 } from "react";
 import toast5 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react";
 import {
@@ -1706,7 +1813,7 @@ var truncateAddress2 = (ref) => {
   return `${ref.substring(0, 11)}.....${ref.substring(ref.length - 11)}`;
 };
 var WalletLogo = ({ src, alt, sizeClass = "w-10 h-10" }) => {
-  const [isLoaded, setIsLoaded] = useState10(false);
+  const [isLoaded, setIsLoaded] = useState11(false);
   return /* @__PURE__ */ React18.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden  ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React18.createElement(HugeiconsIcon12, { icon: Loading03Icon7, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React18.createElement("img", { src, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
 };
 var UniversalWalletPage = ({
@@ -1729,18 +1836,18 @@ var UniversalWalletPage = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [selectedWallet, setSelectedWallet] = useState10(null);
-  const [localSearchQuery, setLocalSearchQuery] = useState10("");
-  const [addModalOpen, setAddModalOpen] = useState10(false);
-  const [importModalOpen, setImportModalOpen] = useState10(false);
-  const [flowStep, setFlowStep] = useState10(1);
-  const [generatedPhrase, setGeneratedPhrase] = useState10("");
-  const [hasBackedUp, setHasBackedUp] = useState10(false);
-  const [verifyWords, setVerifyWords] = useState10([]);
-  const [walletPassword, setWalletPassword] = useState10("");
-  const [importWords, setImportWords] = useState10(Array(24).fill(""));
-  const [isProcessing, setIsProcessing] = useState10(false);
-  const [showCopyWarning, setShowCopyWarning] = useState10(false);
+  const [selectedWallet, setSelectedWallet] = useState11(null);
+  const [localSearchQuery, setLocalSearchQuery] = useState11("");
+  const [addModalOpen, setAddModalOpen] = useState11(false);
+  const [importModalOpen, setImportModalOpen] = useState11(false);
+  const [flowStep, setFlowStep] = useState11(1);
+  const [generatedPhrase, setGeneratedPhrase] = useState11("");
+  const [hasBackedUp, setHasBackedUp] = useState11(false);
+  const [verifyWords, setVerifyWords] = useState11([]);
+  const [walletPassword, setWalletPassword] = useState11("");
+  const [importWords, setImportWords] = useState11(Array(24).fill(""));
+  const [isProcessing, setIsProcessing] = useState11(false);
+  const [showCopyWarning, setShowCopyWarning] = useState11(false);
   const filteredWallets = wallets.filter((wallet) => {
     const q = localSearchQuery.toLowerCase();
     return wallet.name.toLowerCase().includes(q) || wallet.currency.toLowerCase().includes(q) || wallet.network.toLowerCase().includes(q);
@@ -1929,7 +2036,7 @@ var UniversalWalletPage = ({
 };
 
 // src/components/UniversalCardPage.tsx
-import React19, { useState as useState11, useEffect as useEffect8 } from "react";
+import React19, { useState as useState12, useEffect as useEffect8 } from "react";
 import { useRouter } from "next/navigation";
 import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
 import {
@@ -1959,13 +2066,13 @@ var UniversalCardPage = ({
       return 0;
     });
   }, [cards]);
-  const [activeTabIndex, setActiveTabIndex] = useState11(0);
+  const [activeTabIndex, setActiveTabIndex] = useState12(0);
   const activeCard = sortedCards[activeTabIndex];
-  const [isBgLoaded, setIsBgLoaded] = useState11(false);
-  const [isFreezing, setIsFreezing] = useState11(false);
-  const [isOverlayActionLoading, setIsOverlayActionLoading] = useState11(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState11(false);
-  const [isDeleting, setIsDeleting] = useState11(false);
+  const [isBgLoaded, setIsBgLoaded] = useState12(false);
+  const [isFreezing, setIsFreezing] = useState12(false);
+  const [isOverlayActionLoading, setIsOverlayActionLoading] = useState12(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState12(false);
+  const [isDeleting, setIsDeleting] = useState12(false);
   useEffect8(() => {
     setIsBgLoaded(false);
     if (!activeCard?.cardBgSrc) return;
@@ -2190,7 +2297,7 @@ var MenuRow = ({
 );
 
 // src/components/UniversalProfilePage.tsx
-import React20, { useState as useState12 } from "react";
+import React20, { useState as useState13 } from "react";
 import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
 import {
   UserIcon,
@@ -2219,11 +2326,11 @@ var UniversalProfilePage = ({
   onLogoutTap,
   onDeleteTap
 }) => {
-  const [isAvatarLoaded, setIsAvatarLoaded] = useState12(false);
-  const [showLogoutDialog, setShowLogoutDialog] = useState12(false);
-  const [isLoggingOut, setIsLoggingOut] = useState12(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState12(false);
-  const [isDeleting, setIsDeleting] = useState12(false);
+  const [isAvatarLoaded, setIsAvatarLoaded] = useState13(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState13(false);
+  const [isLoggingOut, setIsLoggingOut] = useState13(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState13(false);
+  const [isDeleting, setIsDeleting] = useState13(false);
   const handleConfirmLogout = async () => {
     setIsLoggingOut(true);
     try {
@@ -2374,7 +2481,7 @@ var MenuRow2 = ({ icon, title, subtitle, onClick, iconColor = "text-black", titl
 );
 
 // src/components/UniversalSidebar.tsx
-import React21, { useState as useState13 } from "react";
+import React21, { useState as useState14 } from "react";
 import Link5 from "next/link";
 import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
 import {
@@ -2387,8 +2494,8 @@ var UniversalSidebar = ({
   showLogoutAction = false,
   onLogout
 }) => {
-  const [showLogoutDialog, setShowLogoutDialog] = useState13(false);
-  const [isLoggingOut, setIsLoggingOut] = useState13(false);
+  const [showLogoutDialog, setShowLogoutDialog] = useState14(false);
+  const [isLoggingOut, setIsLoggingOut] = useState14(false);
   const hasActiveMatch = navItems.some(
     (item) => item.path === "/" || item.path === "/app" ? currentPath === "/" || currentPath === "/app" : currentPath === item.path || currentPath?.startsWith(`${item.path}/`)
   );
@@ -2446,16 +2553,16 @@ var UniversalSidebar = ({
 };
 
 // src/components/HeroSection.tsx
-import React23, { useState as useState15, useEffect as useEffect9, useRef as useRef4 } from "react";
+import React23, { useState as useState16, useEffect as useEffect9, useRef as useRef4 } from "react";
 import Link6 from "next/link";
 import Image3 from "next/image";
 
 // src/components/WaitlistDialog.tsx
-import React22, { useState as useState14 } from "react";
+import React22, { useState as useState15 } from "react";
 import { toast as toast6 } from "react-hot-toast";
 var WaitlistDialog = ({ isOpen, onClose }) => {
-  const [email, setEmail] = useState14("");
-  const [isLoading, setIsLoading] = useState14(false);
+  const [email, setEmail] = useState15("");
+  const [isLoading, setIsLoading] = useState15(false);
   if (!isOpen) return null;
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -2558,8 +2665,8 @@ var HeroSection = ({
   bgImageSrc,
   isWaitlist = false
 }) => {
-  const [isAnimating, setIsAnimating] = useState15(false);
-  const [isWaitlistOpen, setIsWaitlistOpen] = useState15(false);
+  const [isAnimating, setIsAnimating] = useState16(false);
+  const [isWaitlistOpen, setIsWaitlistOpen] = useState16(false);
   const titleRef = useRef4(null);
   useEffect9(() => {
     const observer = new IntersectionObserver(
@@ -2654,10 +2761,10 @@ var HeroSection = ({
 };
 
 // src/components/AppBento2.tsx
-import React24, { useState as useState16, useEffect as useEffect10, useRef as useRef5 } from "react";
+import React24, { useState as useState17, useEffect as useEffect10, useRef as useRef5 } from "react";
 import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
 var AppBento2 = ({ tagline, headline, features }) => {
-  const [isAnimating, setIsAnimating] = useState16(false);
+  const [isAnimating, setIsAnimating] = useState17(false);
   const titleRef = useRef5(null);
   useEffect10(() => {
     const observer = new IntersectionObserver(
@@ -2729,7 +2836,7 @@ var AppBento2 = ({ tagline, headline, features }) => {
 };
 
 // src/components/UniversalSecurityPage.tsx
-import React25, { useState as useState17, useRef as useRef6 } from "react";
+import React25, { useState as useState18, useRef as useRef6 } from "react";
 import toast7 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
 import {
@@ -2756,14 +2863,14 @@ var UniversalSecurityPage = ({
   onVerifyAndEnablePasskey,
   onDisablePasskey
 }) => {
-  const [show2FASetupModal, setShow2FASetupModal] = useState17(false);
-  const [show2FADisableModal, setShow2FADisableModal] = useState17(false);
-  const [showPasskeyModal, setShowPasskeyModal] = useState17(false);
-  const [twoFaSecret, setTwoFaSecret] = useState17("");
-  const [twoFaQr, setTwoFaQr] = useState17("");
-  const [isFetchingSetup, setIsFetchingSetup] = useState17(false);
-  const [otp, setOtp] = useState17(Array(6).fill(""));
-  const [isSubmitting, setIsSubmitting] = useState17(false);
+  const [show2FASetupModal, setShow2FASetupModal] = useState18(false);
+  const [show2FADisableModal, setShow2FADisableModal] = useState18(false);
+  const [showPasskeyModal, setShowPasskeyModal] = useState18(false);
+  const [twoFaSecret, setTwoFaSecret] = useState18("");
+  const [twoFaQr, setTwoFaQr] = useState18("");
+  const [isFetchingSetup, setIsFetchingSetup] = useState18(false);
+  const [otp, setOtp] = useState18(Array(6).fill(""));
+  const [isSubmitting, setIsSubmitting] = useState18(false);
   const inputRefs = useRef6([]);
   const resetOtp = () => {
     setOtp(Array(6).fill(""));
@@ -3050,13 +3157,13 @@ var MenuRow3 = ({
 );
 
 // src/components/FeatureScroll.tsx
-import React26, { useRef as useRef7, useState as useState18, useEffect as useEffect11 } from "react";
+import React26, { useRef as useRef7, useState as useState19, useEffect as useEffect11 } from "react";
 import Image4 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
 import { ArrowLeft01Icon as ArrowLeft01Icon7, ArrowRight01Icon as ArrowRight01Icon6, Loading03Icon as Loading03Icon11 } from "@hugeicons/core-free-icons";
 var FeatureCard = ({ feature, bgImage }) => {
-  const [isBgLoading, setIsBgLoading] = useState18(true);
-  const [isFgLoading, setIsFgLoading] = useState18(!!feature.image);
+  const [isBgLoading, setIsBgLoading] = useState19(true);
+  const [isFgLoading, setIsFgLoading] = useState19(!!feature.image);
   return /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React26.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React26.createElement(
     Image4,
     {
@@ -3095,8 +3202,8 @@ var FeatureCard = ({ feature, bgImage }) => {
 };
 var FeatureScroll = ({ tagline, headline, features }) => {
   const scrollRef = useRef7(null);
-  const [canScrollLeft, setCanScrollLeft] = useState18(false);
-  const [canScrollRight, setCanScrollRight] = useState18(true);
+  const [canScrollLeft, setCanScrollLeft] = useState19(false);
+  const [canScrollRight, setCanScrollRight] = useState19(true);
   const checkScroll = () => {
     if (scrollRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
@@ -3185,7 +3292,7 @@ var PlatformFeatures = ({
 };
 
 // src/components/ManagedDocument.tsx
-import React28, { useState as useState19, useEffect as useEffect12, useRef as useRef8 } from "react";
+import React28, { useState as useState20, useEffect as useEffect12, useRef as useRef8 } from "react";
 var ManagedDocument = ({
   tagline,
   title,
@@ -3193,7 +3300,7 @@ var ManagedDocument = ({
   contactText,
   contactEmail
 }) => {
-  const [isAnimating, setIsAnimating] = useState19(false);
+  const [isAnimating, setIsAnimating] = useState20(false);
   const titleRef = useRef8(null);
   useEffect12(() => {
     const observer = new IntersectionObserver(
@@ -3235,10 +3342,10 @@ var ManagedDocument = ({
 };
 
 // src/components/ManagedContactBlock.tsx
-import React29, { useState as useState20, useEffect as useEffect13 } from "react";
+import React29, { useState as useState21, useEffect as useEffect13 } from "react";
 import { HugeiconsIcon as HugeiconsIcon20 } from "@hugeicons/react";
 var SecureEmail = ({ user, domain, className }) => {
-  const [isMounted, setIsMounted] = useState20(false);
+  const [isMounted, setIsMounted] = useState21(false);
   useEffect13(() => {
     setIsMounted(true);
   }, []);
@@ -3300,7 +3407,7 @@ var ManagedContactBlock = ({
 };
 
 // src/components/ManagedPricingBlock.tsx
-import React30, { useState as useState21, useEffect as useEffect14, useRef as useRef9 } from "react";
+import React30, { useState as useState22, useEffect as useEffect14, useRef as useRef9 } from "react";
 import Link7 from "next/link";
 import Image5 from "next/image";
 var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React30.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React30.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React30.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -3311,8 +3418,8 @@ var ManagedPricingBlock = ({
   plans = [],
   tabs
 }) => {
-  const [isAnimating, setIsAnimating] = useState21(false);
-  const [activeTabIndex, setActiveTabIndex] = useState21(0);
+  const [isAnimating, setIsAnimating] = useState22(false);
+  const [activeTabIndex, setActiveTabIndex] = useState22(0);
   const titleRef = useRef9(null);
   useEffect14(() => {
     const observer = new IntersectionObserver(
@@ -3620,7 +3727,7 @@ var PortfolioHero = ({
 };
 
 // src/components/GifFeatureCard.tsx
-import React35, { useState as useState22 } from "react";
+import React35, { useState as useState23 } from "react";
 import Image9 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon23 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon12 } from "@hugeicons/core-free-icons";
@@ -3631,7 +3738,7 @@ var GifFeatureCard = ({
   alt = "Feature animation",
   className = "aspect-video"
 }) => {
-  const [isLoading, setIsLoading] = useState22(true);
+  const [isLoading, setIsLoading] = useState23(true);
   return /* @__PURE__ */ React35.createElement("div", { className: `relative w-full bg-black  overflow-hidden shadow-2xl ${className}` }, isLoading && /* @__PURE__ */ React35.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-black" }, /* @__PURE__ */ React35.createElement(
     HugeiconsIcon23,
     {
@@ -3664,7 +3771,7 @@ var GifFeatureCard = ({
 };
 
 // src/components/MedicalFeatureStatsBlock.tsx
-import React36, { useState as useState23, useEffect as useEffect16, useRef as useRef11 } from "react";
+import React36, { useState as useState24, useEffect as useEffect16, useRef as useRef11 } from "react";
 import Image10 from "next/image";
 var MedicalFeatureStatsBlock = ({
   bottomHeadline,
@@ -3673,7 +3780,7 @@ var MedicalFeatureStatsBlock = ({
   trustText,
   stats
 }) => {
-  const [isAnimating, setIsAnimating] = useState23(false);
+  const [isAnimating, setIsAnimating] = useState24(false);
   const titleRef = useRef11(null);
   useEffect16(() => {
     const observer = new IntersectionObserver(
@@ -3714,12 +3821,12 @@ var MedicalFeatureStatsBlock = ({
 };
 
 // src/components/ConsultantShowcase.tsx
-import React37, { useState as useState24 } from "react";
+import React37, { useState as useState25 } from "react";
 import Image11 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon24 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon13 } from "@hugeicons/core-free-icons";
 var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
-  const [isLoading, setIsLoading] = useState24(true);
+  const [isLoading, setIsLoading] = useState25(true);
   return /* @__PURE__ */ React37.createElement("div", { className: `absolute inset-0 bg-neutral-800 ${className}` }, isLoading && /* @__PURE__ */ React37.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-800/50 backdrop-blur-md transition-opacity duration-300" }, /* @__PURE__ */ React37.createElement(HugeiconsIcon24, { icon: Loading03Icon13, size: 24, className: "animate-spin text-white/50" })), /* @__PURE__ */ React37.createElement(
     Image11,
     {
@@ -3739,9 +3846,9 @@ var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
 var ConsultantShowcase = ({
   profiles
 }) => {
-  const [currentIndex, setCurrentIndex] = useState24(0);
-  const [touchStart, setTouchStart] = useState24(null);
-  const [touchEnd, setTouchEnd] = useState24(null);
+  const [currentIndex, setCurrentIndex] = useState25(0);
+  const [touchStart, setTouchStart] = useState25(null);
+  const [touchEnd, setTouchEnd] = useState25(null);
   const nextSlide = () => {
     setCurrentIndex((prev) => prev === profiles.length - 1 ? 0 : prev + 1);
   };
@@ -3809,7 +3916,7 @@ var ConsultantShowcase = ({
 };
 
 // src/components/ContentGridBlock.tsx
-import React38, { useState as useState25 } from "react";
+import React38, { useState as useState26 } from "react";
 import Image12 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon25 } from "@hugeicons/react";
 import { Loading03Icon as Loading03Icon14 } from "@hugeicons/core-free-icons";
@@ -3982,7 +4089,7 @@ var UniversalVerificationPage = ({
 };
 
 // src/components/UniversalRewardPage.tsx
-import React41, { useState as useState26 } from "react";
+import React41, { useState as useState27 } from "react";
 import axios from "axios";
 import toast8 from "react-hot-toast";
 import Confetti from "react-confetti";
@@ -3999,7 +4106,7 @@ var formatWeb3Name = (name) => {
 };
 var PageSpinner4 = () => /* @__PURE__ */ React41.createElement("div", { className: "flex justify-center items-center py-12 w-full" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon27, { icon: Loading03Icon16, size: 32, className: "animate-spin mb-4 text-black" }));
 var AvatarLogo = ({ src, alt, name, sizeClass = "w-12 h-12" }) => {
-  const [isLoaded, setIsLoaded] = useState26(false);
+  const [isLoaded, setIsLoaded] = useState27(false);
   const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
   const finalSrc = src || fallbackUrl;
   return /* @__PURE__ */ React41.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-[3px] border-white  ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React41.createElement(HugeiconsIcon27, { icon: Loading03Icon16, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React41.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
@@ -4017,11 +4124,11 @@ var UniversalRewardPage = ({
   const onBackHandler = onBack ?? (() => {
     if (typeof window !== "undefined") window.history.back();
   });
-  const [activeTabIndex, setActiveTabIndex] = useState26(1);
+  const [activeTabIndex, setActiveTabIndex] = useState27(1);
   const tabs = [{ label: "Today" }, { label: "Week" }, { label: "Month" }];
-  const [selectedReward, setSelectedReward] = useState26(null);
-  const [isClaiming, setIsClaiming] = useState26(false);
-  const [showConfetti, setShowConfetti] = useState26(false);
+  const [selectedReward, setSelectedReward] = useState27(null);
+  const [isClaiming, setIsClaiming] = useState27(false);
+  const [showConfetti, setShowConfetti] = useState27(false);
   const getActiveLeaderboard = () => {
     if (activeTabIndex === 0) return leaderboardToday || [];
     if (activeTabIndex === 1) return leaderboardWeek || [];
@@ -4096,7 +4203,7 @@ var UniversalRewardPage = ({
 };
 
 // src/components/UniversalReferralPage.tsx
-import React42, { useState as useState27 } from "react";
+import React42, { useState as useState28 } from "react";
 import toast9 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon28 } from "@hugeicons/react";
 import {
@@ -4136,7 +4243,7 @@ var UniversalReferralPage = ({
     }
   };
   const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
-    const [isLoaded, setIsLoaded] = useState27(false);
+    const [isLoaded, setIsLoaded] = useState28(false);
     const fallbackUrl = `/api/avatar/?name=${encodeURIComponent(name || " ")}&background=e0e0e0&color=000000&size=200&font-size=0.33`;
     const finalSrc = src || fallbackUrl;
     return /* @__PURE__ */ React42.createElement("div", { className: `relative shrink-0 rounded-full bg-neutral-100 flex items-center justify-center overflow-hidden border-2 border-white ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: Loading03Icon17, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ React42.createElement("img", { src: finalSrc, alt, onLoad: () => setIsLoaded(true), className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}` }));
@@ -4184,7 +4291,7 @@ var UniversalReferralPage = ({
 };
 
 // src/components/UniversalCardActionPage.tsx
-import React43, { useState as useState28 } from "react";
+import React43, { useState as useState29 } from "react";
 import Confetti2 from "react-confetti";
 import { useWindowSize as useWindowSize2 } from "react-use";
 import { HugeiconsIcon as HugeiconsIcon29 } from "@hugeicons/react";
@@ -4235,10 +4342,10 @@ var UniversalCardActionPage = ({
     if (typeof window !== "undefined") window.history.back();
   });
   const { width, height } = useWindowSize2();
-  const [selectedTier, setSelectedTier] = useState28(null);
-  const [intendedAction, setIntendedAction] = useState28(null);
-  const [isProcessing, setIsProcessing] = useState28(false);
-  const [showConfetti, setShowConfetti] = useState28(false);
+  const [selectedTier, setSelectedTier] = useState29(null);
+  const [intendedAction, setIntendedAction] = useState29(null);
+  const [isProcessing, setIsProcessing] = useState29(false);
+  const [showConfetti, setShowConfetti] = useState29(false);
   const availableTiers = tiers.filter((t) => t.isAvailable || t.acceptPreorder || t.acceptWaitlist);
   const handleTierClick = (tier, explicitAction) => {
     setSelectedTier(tier);
@@ -4378,7 +4485,7 @@ var UniversalCardActionPage = ({
 };
 
 // src/components/PinDialerBottomSheet.tsx
-import React44, { useState as useState29, useEffect as useEffect17 } from "react";
+import React44, { useState as useState30, useEffect as useEffect17 } from "react";
 import { HugeiconsIcon as HugeiconsIcon30 } from "@hugeicons/react";
 import { CancelCircleIcon as CancelCircleIcon7 } from "@hugeicons/core-free-icons";
 var PinDialerBottomSheet = ({
@@ -4388,7 +4495,7 @@ var PinDialerBottomSheet = ({
   onClose,
   onComplete
 }) => {
-  const [pin, setPin] = useState29("");
+  const [pin, setPin] = useState30("");
   useEffect17(() => {
     setPin("");
   }, [isOpen]);