@retinalabsllc/zairusjs 16.0.45 → 16.0.60

package/dist/index.mjs

@@ -293,141 +293,17 @@ var Header = ({
 };
 
 // src/components/PipleAuth.tsx
-import React6, { useState as useState4, useRef as useRef2, useEffect as useEffect3, Suspense } from "react";
+import React5, { useState as useState3, 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";
-
-// 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 getCustomFlagUrl = (code) => {
-  const map = {
-    "NG": "https://retinalabs.company/assets/images/ng.avif",
-    "GH": "https://retinalabs.company/assets/images/gh.avif",
-    "KE": "https://retinalabs.company/assets/images/ksh.avif",
-    "UG": "https://retinalabs.company/assets/images/ugx.avif"
-  };
-  return map[code?.toUpperCase()] || map["NG"];
-};
-var FlagImage = ({ countryCode }) => {
-  const [loaded, setLoaded] = useState3(false);
-  return /* @__PURE__ */ React5.createElement("div", { className: "relative w-5 h-5 rounded-full overflow-hidden flex items-center justify-center bg-neutral-100 shrink-0" }, !loaded && /* @__PURE__ */ React5.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner, null)), /* @__PURE__ */ React5.createElement(
-    "img",
-    {
-      src: getCustomFlagUrl(countryCode),
-      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 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" },
-  { code: "UG", dialCode: "+256", name: "Uganda" }
-];
-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 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 " }, c.name), /* @__PURE__ */ React6.createElement("span", { className: "text-sm text-neutral-400 " }, c.dialCode)))))));
-};
+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" }));
 function AuthFormInner({
   companyName,
   workspaceLabel = "Workspace",
-  termsUrl = "https://aeona.finance/terms-of-service",
-  privacyUrl = "https://aeona.finance/privacy-policy",
+  termsUrl = "https://truhuddle.com/terms-of-service",
+  privacyUrl = "https://truhuddle.com/privacy-policy",
   requireNames = true,
   requireOrganization = true,
   useRecaptcha = false,
@@ -438,76 +314,64 @@ function AuthFormInner({
   const searchParams = useSearchParams();
   const redirectUrl = searchParams.get("redirect") || defaultRedirectPath;
   const captchaContext = useRecaptcha ? useGoogleReCaptcha() : null;
-  const [mode, setMode] = useState4("LOGIN");
-  const [step, setStep] = useState4("INPUT");
+  const [mode, setMode] = useState3("LOGIN");
+  const [step, setStep] = useState3("INPUT");
   const getInitialSignupStep = () => {
-    if (requireNames) return "NAME";
-    if (requireOrganization) return "ORGANIZATION";
-    return "PHONE_ID";
+    return "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 [passcode, setPasscode] = useState4(["", "", "", "", "", ""]);
-  const otpRefs = useRef2([]);
-  const passRefs = useRef2([]);
+  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 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);
       return () => clearTimeout(timer);
     }
   }, [countdown]);
-  const handleArrayChange = (index, value, isPasscode) => {
+  const handleOtpChange = (index, value) => {
     const cleanValue = value.replace(/[^0-9]/g, "");
     if (!cleanValue && value !== "") return;
-    const arr = isPasscode ? [...passcode] : [...otp];
-    const setArr = isPasscode ? setPasscode : setOtp;
-    const refs = isPasscode ? passRefs : otpRefs;
-    arr[index] = cleanValue.slice(-1);
-    setArr(arr);
-    if (cleanValue && index < 5) refs.current[index + 1]?.focus();
+    const newOtp = [...otp];
+    newOtp[index] = cleanValue.slice(-1);
+    setOtp(newOtp);
+    if (cleanValue && index < 5) inputRefs.current[index + 1]?.focus();
   };
-  const handleArrayPaste = (e, isPasscode) => {
+  const handlePaste = (e) => {
     e.preventDefault();
     const pastedData = e.clipboardData.getData("text/plain");
     const numbersOnly = pastedData.replace(/[^0-9]/g, "");
     if (!numbersOnly) return;
-    const arr = isPasscode ? [...passcode] : [...otp];
-    const setArr = isPasscode ? setPasscode : setOtp;
-    const refs = isPasscode ? passRefs : otpRefs;
+    const newOtp = [...otp];
     const length = Math.min(numbersOnly.length, 6);
-    for (let i = 0; i < length; i++) arr[i] = numbersOnly[i];
-    setArr(arr);
-    if (length < 6) refs.current[length]?.focus();
+    for (let i = 0; i < length; i++) newOtp[i] = numbersOnly[i];
+    setOtp(newOtp);
+    if (length < 6) inputRefs.current[length]?.focus();
     else {
-      refs.current[5]?.focus();
-      if (isPasscode) verifyPasscodeSubmit(arr.join(""));
-      else verifyOtpCode(arr.join(""));
+      inputRefs.current[5]?.focus();
+      verifyOtpCode(newOtp.join(""));
     }
   };
-  const getFormattedPhoneNumber = () => {
-    const cleanNumber = phoneNumber.replace(/^0+/, "");
-    return `${selectedCountry.dialCode}${cleanNumber}`;
-  };
-  const handleAuthRequestSubmit = async (forceOtp = false) => {
+  const handleAuthRequestSubmit = async (e) => {
+    if (e) e.preventDefault();
     if (mode === "SIGNUP" && !agreedToTerms) {
       toast.error("You must agree to the Terms and Privacy Policy.");
       return;
     }
-    if (isSubmitting) return;
+    if (isSubmitting || countdown > 0) return;
     setIsSubmitting(true);
     try {
       let recaptchaToken = void 0;
@@ -515,28 +379,21 @@ function AuthFormInner({
         recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
       }
       const res = await onAuthRequest({
-        phoneNumber: getFormattedPhoneNumber(),
-        country: selectedCountry.code,
+        email: emailId,
         firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
         lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
         organizationName: mode === "SIGNUP" && requireOrganization ? orgName : void 0,
         r_c: mode === "SIGNUP" && invitationCode.trim() ? invitationCode.trim().toUpperCase() : void 0,
         mode,
-        recaptchaToken,
-        forceOtp
+        recaptchaToken
       });
       if (res.success) {
+        setUserHas2FA(!!res.has2FA);
         setUserHasPasskey(!!res.hasPasskey);
         if (res.passkeyOptions) setAuthOptions(res.passkeyOptions);
-        if (res.hasPuk && !forceOtp) {
-          setStep("PASSCODE");
-          setTimeout(() => passRefs.current[0]?.focus(), 100);
-        } else {
-          setStep("OTP");
-          setCountdown(60);
-          toast.success("Verification code sent");
-          setTimeout(() => otpRefs.current[0]?.focus(), 100);
-        }
+        toast.success(res.has2FA ? "Security check required" : "Verification code sent");
+        setStep("OTP");
+        setCountdown(60);
       } else {
         toast.error(res.error || "Authentication failed.");
       }
@@ -550,29 +407,13 @@ function AuthFormInner({
     if (codeToVerify.length !== 6 || isSubmitting) return;
     setIsSubmitting(true);
     try {
-      const res = await onVerifyOtp({ phoneNumber: getFormattedPhoneNumber(), code: codeToVerify });
-      if (res.success) window.location.href = res.redirect || redirectUrl;
-      else {
+      const res = await onVerifyOtp({ email: emailId, code: codeToVerify });
+      if (res.success) {
+        window.location.href = res.redirect || redirectUrl;
+      } else {
         toast.error(res.error || "Invalid code.");
         setOtp(["", "", "", "", "", ""]);
-        otpRefs.current[0]?.focus();
-      }
-    } catch {
-      toast.error("Verification failed.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const verifyPasscodeSubmit = async (passToVerify) => {
-    if (passToVerify.length !== 6 || isSubmitting) return;
-    setIsSubmitting(true);
-    try {
-      const res = await onVerifyOtp({ phoneNumber: getFormattedPhoneNumber(), passcode: passToVerify });
-      if (res.success) window.location.href = res.redirect || redirectUrl;
-      else {
-        toast.error(res.error || "Invalid passcode.");
-        setPasscode(["", "", "", "", "", ""]);
-        passRefs.current[0]?.focus();
+        inputRefs.current[0]?.focus();
       }
     } catch {
       toast.error("Verification failed.");
@@ -585,9 +426,12 @@ function AuthFormInner({
     setIsSubmitting(true);
     try {
       const credentialResponse = await startAuthentication({ optionsJSON: authOptions });
-      const res = await onVerifyOtp({ phoneNumber: getFormattedPhoneNumber(), isPasskey: true, passkeyCredential: credentialResponse });
-      if (res.success) window.location.href = res.redirect || redirectUrl;
-      else toast.error(res.error || "Device verification failed.");
+      const res = await onVerifyOtp({ email: emailId, isPasskey: true, passkeyCredential: credentialResponse });
+      if (res.success) {
+        window.location.href = res.redirect || redirectUrl;
+      } else {
+        toast.error(res.error || "Device verification failed.");
+      }
     } catch (err) {
       if (err.name !== "NotAllowedError") toast.error("Passkey verification interrupted.");
     } finally {
@@ -595,46 +439,38 @@ function AuthFormInner({
     }
   };
   const handleNextSignupStep = () => {
-    if (signupStep === "NAME") {
+    if (signupStep === "INVITATION") {
+      if (requireNames) setSignupStep("NAME");
+      else if (requireOrganization) setSignupStep("ORGANIZATION");
+      else setSignupStep("EMAIL_ID");
+    } else if (signupStep === "NAME") {
       if (requireOrganization) setSignupStep("ORGANIZATION");
-      else setSignupStep("PHONE_ID");
+      else setSignupStep("EMAIL_ID");
     } else if (signupStep === "ORGANIZATION") {
-      setSignupStep("PHONE_ID");
-    } else if (signupStep === "PHONE_ID") {
-      setSignupStep("INVITATION");
+      setSignupStep("EMAIL_ID");
     }
   };
   const isContinueDisabled = () => {
     if (isSubmitting) return true;
-    if (mode === "LOGIN") return phoneNumber.length < 5;
+    if (mode === "LOGIN") return emailId.length < 3;
     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 === "PHONE_ID") return phoneNumber.length < 5 || !agreedToTerms;
-      if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
+      if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
     }
     return false;
   };
-  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-6" }, step === "INPUT" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-12 mt-2 text-left" }, /* @__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: () => {
+  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: () => {
     setMode("SIGNUP");
     setSignupStep(getInitialSignupStep());
-  }, 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) => {
+  }, 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) => {
     e.preventDefault();
-    if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
+    if (mode === "SIGNUP" && signupStep === "INVITATION") handleNextSignupStep();
+    else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
     else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
-    else if (mode === "SIGNUP" && signupStep === "PHONE_ID") handleNextSignupStep();
-    else handleAuthRequestSubmit(false);
-  } }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__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 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__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 slide-in-from-right-4 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"), "."))), mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in slide-in-from-right-4 duration-300" }, /* @__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(
+    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(
     "input",
     {
       type: "text",
@@ -644,65 +480,45 @@ 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)"
     }
-  ))), /* @__PURE__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, mode === "SIGNUP" && signupStep === "INVITATION" ? "Complete Setup" : "Continue"))), step === "PASSCODE" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "text-left mb-10 mt-2" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Enter Passcode"), /* @__PURE__ */ React6.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter your secure 6-digit transaction passcode.")), /* @__PURE__ */ React6.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
-    e.preventDefault();
-    verifyPasscodeSubmit(passcode.join(""));
-  } }, /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between gap-2", onPaste: (e) => handleArrayPaste(e, true) }, passcode.map((digit, index) => /* @__PURE__ */ React6.createElement(
-    "input",
-    {
-      key: index,
-      ref: (el) => {
-        passRefs.current[index] = el;
-      },
-      type: "password",
-      inputMode: "numeric",
-      maxLength: 1,
-      value: digit,
-      onChange: (e) => handleArrayChange(index, e.target.value, true),
-      onKeyDown: (e) => {
-        if (e.key === "Backspace" && !passcode[index] && index > 0) passRefs.current[index - 1]?.focus();
-      },
-      className: "w-7 h-10 text-center text-lg bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300"
-    }
-  ))), /* @__PURE__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: passcode.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Login")), /* @__PURE__ */ React6.createElement("div", { className: "pt-6 flex flex-col gap-3" }, userHasPasskey && /* @__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-[11px] tracking-wide transition-colors outline-none disabled:opacity-50" }, "Use Passkey / Biometrics"), /* @__PURE__ */ React6.createElement("button", { onClick: () => handleAuthRequestSubmit(true), disabled: isSubmitting, className: "w-full text-center text-[12px] text-neutral-500 hover:text-black transition-colors outline-none mt-2" }, "Use OTP instead"))), step === "OTP" && /* @__PURE__ */ React6.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React6.createElement("div", { className: "text-left 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 verification code.")), /* @__PURE__ */ React6.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  ))), 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) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
-  } }, /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between gap-2", onPaste: (e) => handleArrayPaste(e, false) }, otp.map((digit, index) => /* @__PURE__ */ React6.createElement(
+  } }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
     "input",
     {
       key: index,
       ref: (el) => {
-        otpRefs.current[index] = el;
+        inputRefs.current[index] = el;
       },
       type: "text",
       inputMode: "numeric",
       maxLength: 1,
       value: digit,
-      onChange: (e) => handleArrayChange(index, e.target.value, false),
+      onChange: (e) => handleOtpChange(index, e.target.value),
       onKeyDown: (e) => {
-        if (e.key === "Backspace" && !otp[index] && index > 0) otpRefs.current[index - 1]?.focus();
+        if (e.key === "Backspace" && !otp[index] && index > 0) inputRefs.current[index - 1]?.focus();
       },
-      className: "w-7 h-10 text-center text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300"
+      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__ */ React6.createElement(ThreeDActionButton, { type: "submit", disabled: otp.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Verify Code")), /* @__PURE__ */ React6.createElement("div", { className: "pt-6 flex flex-col gap-3" }, /* @__PURE__ */ React6.createElement(
+  ))), /* @__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(
     "button",
     {
-      onClick: () => handleAuthRequestSubmit(true),
-      disabled: countdown > 0 || isSubmitting,
-      className: "w-full text-center text-[12px] text-neutral-500 hover:text-black transition-colors outline-none disabled:opacity-50"
+      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"
     },
-    countdown > 0 ? `Resend code in ${countdown}s` : "Resend OTP"
-  ), userHasPasskey && /* @__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-[11px] tracking-wide transition-colors outline-none disabled:opacity-50 mt-4" }, "Use Passkey / Biometrics")))))));
+    "Use Passkey / Biometrics"
+  ))))));
 }
 var PipleAuth = (props) => {
   if (props.useRecaptcha && props.recaptchaSiteKey) {
-    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(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(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 }));
 };
 
 // src/components/Footer.tsx
-import React7, { useState as useState5 } from "react";
+import React6, { useState as useState4 } from "react";
 import Link3 from "next/link";
 import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
 var Footer = ({
@@ -712,20 +528,20 @@ var Footer = ({
   copyrightText,
   topSection
 }) => {
-  const [openCol, setOpenCol] = useState5(null);
+  const [openCol, setOpenCol] = useState4(null);
   const toggleColumn = (idx) => {
     setOpenCol(openCol === idx ? null : 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) => {
+  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) => {
     const isOpen = openCol === idx;
-    return /* @__PURE__ */ React7.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React6.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ React6.createElement(
       "button",
       {
         onClick: () => toggleColumn(idx),
         className: "w-full flex items-center justify-between py-5 text-left outline-none"
       },
-      /* @__PURE__ */ React7.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React6.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
+      /* @__PURE__ */ React6.createElement(
         "svg",
         {
           className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
@@ -733,10 +549,10 @@ var Footer = ({
           viewBox: "0 0 24 24",
           stroke: "currentColor"
         },
-        /* @__PURE__ */ React7.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
+        /* @__PURE__ */ React6.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
       )
-    ), /* @__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(
+    ), /* @__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(
     "a",
     {
       key: idx,
@@ -745,12 +561,12 @@ var Footer = ({
       rel: "noopener noreferrer",
       className: "text-neutral-400 hover:text-black transition-colors"
     },
-    /* @__PURE__ */ React7.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
+    /* @__PURE__ */ React6.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
   ))))))));
 };
 
 // src/components/MobileNav.tsx
-import React8 from "react";
+import React7 from "react";
 import Link4 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
@@ -760,23 +576,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__ */ 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) => {
+  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) => {
     const isActive = !pathMatches && index === 0 ? true : item.href === "/" || item.href === "/app" ? pathname === "/" || pathname === "/app" : pathname === item.href || pathname?.startsWith(`${item.href}/`);
-    return /* @__PURE__ */ React8.createElement(
+    return /* @__PURE__ */ React7.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__ */ React8.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React7.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ React7.createElement(
         HugeiconsIcon3,
         {
           icon: item.icon,
           size: 20
         }
       )),
-      /* @__PURE__ */ React8.createElement(
+      /* @__PURE__ */ React7.createElement(
         "span",
         {
           className: `text-[9px] tracking-wide transition-colors duration-300  ${isActive ? "text-black" : "text-neutral-400"}`
@@ -792,10 +608,10 @@ import React11, { useState as useState7, useEffect as useEffect4 } from "react";
 import toast2 from "react-hot-toast";
 
 // src/components/ManagedToaster.tsx
-import React9 from "react";
+import React8 from "react";
 import { Toaster } from "react-hot-toast";
 var ManagedToaster = () => {
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Toaster,
     {
       position: "top-right",
@@ -826,6 +642,56 @@ var ManagedToaster = () => {
   );
 };
 
+// src/components/TextInput.tsx
+import React9, { useState as useState5 } 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 useState6 } from "react";
 import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
@@ -893,7 +759,7 @@ import {
   ArrowLeft01Icon,
   CircleLock02Icon
 } from "@hugeicons/core-free-icons";
-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 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 UniversalOrganizationPage = ({
   initialOrgName,
   initialSlug,
@@ -1025,7 +891,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(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(
+  ), /* @__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(
     ThreeDActionButton,
     {
       type: "submit",
@@ -2516,7 +2382,7 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
         /* @__PURE__ */ React22.createElement("path", { d: "m6 6 12 12" })
       )
     ),
-    /* @__PURE__ */ React22.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React22.createElement("div", { className: "mb-8 mt-2" }, /* @__PURE__ */ React22.createElement("h2", { className: "text-2xl text-black tracking-tight mb-2" }, "Join the Waitlist"), /* @__PURE__ */ React22.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Be the first to experience the future of Web3 freedom. Secure your early access spot today.")), /* @__PURE__ */ React22.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-8" }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React22.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React22.createElement("div", { className: "mb-8 mt-2" }, /* @__PURE__ */ React22.createElement("h2", { className: "text-2xl text-black tracking-tight mb-2" }, "Join the Waitlist"), /* @__PURE__ */ React22.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Be the first to be notified when we launch. Secure your early access spot today.")), /* @__PURE__ */ React22.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-8" }, /* @__PURE__ */ React22.createElement(
       TextInput,
       {
         label: "Email ID",
@@ -2541,10 +2407,8 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
 
 // src/components/HeroSection.tsx
 var HeroSection = ({
-  badgeText,
   titlePrefix,
   highlightText = "Retina",
-  cursorLabel,
   subtitle,
   ctaText,
   ctaHref,
@@ -2553,8 +2417,6 @@ var HeroSection = ({
   showApps = false,
   appsText,
   appLogos,
-  showImage = false,
-  imageSrc = "/assets/ai.avif",
   bgVideoSrc,
   bgImageSrc,
   isWaitlist = false
@@ -4391,27 +4253,23 @@ var UniversalBuyCryptoPage = ({
       const found = cryptoOptions.find((c) => c.code === defaultCryptoCode);
       if (found) return found;
     }
-    return cryptoOptions[0] || {
-      code: "USDC",
-      name: "USD Coin",
-      logoUrl: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png",
-      networks: [{ id: "POLYGON", name: "Polygon (MATIC)", symbol: "POLYGON" }]
-    };
+    return cryptoOptions[0];
   });
   const [selectedNetwork, setSelectedNetwork] = useState31(() => {
     if (defaultNetworkId && selectedCrypto?.networks) {
       const foundNet = selectedCrypto.networks.find((n) => n.id === defaultNetworkId);
       if (foundNet) return foundNet;
     }
-    return selectedCrypto?.networks?.[0] || { id: "POLYGON", name: "Polygon (MATIC)", symbol: "POLYGON" };
+    return selectedCrypto?.networks?.[0] || { id: "polygon", name: "Polygon", symbol: "POLYGON" };
   });
   const [fiatAmount, setFiatAmount] = useState31("");
   const [cryptoAmount, setCryptoAmount] = useState31("");
   const [activeSource, setActiveSource] = useState31("FIAT");
   const [isCalculating, setIsCalculating] = useState31(false);
   const [rateDisplay, setRateDisplay] = useState31(null);
+  const [currentRateKey, setCurrentRateKey] = useState31(null);
   const [recipientAddress, setRecipientAddress] = useState31(defaultRecipientAddress);
-  const [isAddressValid, setIsAddressValid] = useState31(null);
+  const [isAddressValid, setIsAddressValid] = useState31(false);
   const [isCryptoDialogOpen, setIsCryptoDialogOpen] = useState31(false);
   const [isNetworkDialogOpen, setIsNetworkDialogOpen] = useState31(false);
   const [isSubmitting, setIsSubmitting] = useState31(false);
@@ -4426,16 +4284,14 @@ var UniversalBuyCryptoPage = ({
   }, [selectedCrypto]);
   useEffect17(() => {
     if (!recipientAddress.trim()) {
-      setIsAddressValid(null);
+      setIsAddressValid(false);
       return;
     }
     const valid = validateWalletAddress(recipientAddress, selectedNetwork);
     setIsAddressValid(valid);
   }, [recipientAddress, selectedNetwork]);
   const triggerRateCalculation = useCallback((source, valFiat, valCrypto, currentCrypto) => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     const targetVal = source === "FIAT" ? valFiat : valCrypto;
     const numericVal = parseFloat(targetVal) || 0;
     if (numericVal <= 0) {
@@ -4455,25 +4311,16 @@ var UniversalBuyCryptoPage = ({
             crypto: currentCrypto,
             fiat: fiatCurrency
           });
-          if (source === "FIAT") {
-            setCryptoAmount(result.cryptoAmount || "");
-          } else {
-            setFiatAmount(result.fiatAmount || "");
-          }
-          if (result.ratePerToken) {
-            setRateDisplay(result.ratePerToken);
-          }
+          if (source === "FIAT") setCryptoAmount(result.cryptoAmount || "");
+          else setFiatAmount(result.fiatAmount || "");
+          if (result.ratePerToken) setRateDisplay(result.ratePerToken);
+          if (result.rateKey) setCurrentRateKey(result.rateKey);
         } catch {
-          toast11.error("Failed to calculate rate.");
+          toast11.error("Failed to calculate live rate.");
         } finally {
           setIsCalculating(false);
         }
       } else {
-        if (source === "FIAT") {
-          setCryptoAmount((numericVal / 1600).toFixed(2));
-        } else {
-          setFiatAmount((numericVal * 1600).toFixed(2));
-        }
         setIsCalculating(false);
       }
     }, 2e3);
@@ -4500,12 +4347,11 @@ var UniversalBuyCryptoPage = ({
   const handleCheckout = async () => {
     const numFiat = parseFloat(fiatAmount) || 0;
     const numCrypto = parseFloat(cryptoAmount) || 0;
-    if (numFiat <= 0 || numCrypto <= 0) {
-      return toast11.error("Please enter a valid purchase amount.");
-    }
-    if (!recipientAddress.trim() || !isAddressValid) {
-      return toast11.error("Please enter a valid recipient wallet address.");
+    if (numFiat <= 0 || numCrypto <= 0) return toast11.error("Please enter a valid amount.");
+    if (selectedNetwork.minimumWithdrawal && numCrypto < selectedNetwork.minimumWithdrawal) {
+      return toast11.error(`Minimum purchase for ${selectedNetwork.name} is ${selectedNetwork.minimumWithdrawal} ${selectedCrypto.code}`);
     }
+    if (!recipientAddress.trim() || !isAddressValid) return toast11.error("Please enter a valid wallet address.");
     if (onSubmitCheckout) {
       setIsSubmitting(true);
       try {
@@ -4515,16 +4361,16 @@ var UniversalBuyCryptoPage = ({
           selectedCrypto,
           selectedNetwork,
           recipientAddress: recipientAddress.trim(),
-          fiatCurrency
+          fiatCurrency,
+          rateKey: currentRateKey || void 0
         });
       } catch (err) {
-        toast11.error(err?.message || "Failed to process purchase.");
       } finally {
         setIsSubmitting(false);
       }
     }
   };
-  const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid;
+  const isButtonDisabled = isSubmitting || isCalculating || !fiatAmount || !cryptoAmount || !isAddressValid || !currentRateKey;
   return /* @__PURE__ */ React45.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React45.createElement(ManagedToaster, null), !hideBackButton && /* @__PURE__ */ React45.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React45.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: ArrowLeft01Icon12, size: 16 }), " Back")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 mb-6 px-1" }, /* @__PURE__ */ React45.createElement("h1", { className: "text-black text-xl tracking-tight" }, "Buy Crypto"), /* @__PURE__ */ React45.createElement("p", { className: "text-xs text-neutral-500" }, "Purchase digital assets instantly in your local currency with direct wallet delivery.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-6 p-6 sm:p-8 rounded-3xl bg-white w-full " }, /* @__PURE__ */ React45.createElement("div", { className: "relative flex flex-col gap-3" }, /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Pay (", fiatCurrency.code, ")"), isCalculating && activeSource === "CRYPTO" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
     "input",
     {
@@ -4534,7 +4380,7 @@ var UniversalBuyCryptoPage = ({
       onChange: handleFiatInputChange,
       placeholder: "0.00",
       disabled: isSubmitting,
-      className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
+      className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
     }
   )), /* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2 bg-neutral-50 rounded-full px-3 py-1.5 shrink-0 select-none" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: fiatCurrency.logoUrl, alt: fiatCurrency.code, fallbackText: fiatCurrency.code }), /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black" }, fiatCurrency.code))), /* @__PURE__ */ React45.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10" }, /* @__PURE__ */ React45.createElement("div", { className: "w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center" }, /* @__PURE__ */ React45.createElement("svg", { className: "w-4 h-4 text-black", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" })))), /* @__PURE__ */ React45.createElement("div", { className: "border border-neutral-200 rounded-2xl p-4 flex items-center justify-between transition-all focus-within:border-black" }, /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-1 flex-1 pr-3 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "You Receive"), isCalculating && activeSource === "FIAT" ? /* @__PURE__ */ React45.createElement("div", { className: "h-7 w-32 bg-neutral-100 animate-pulse rounded-md mt-1" }) : /* @__PURE__ */ React45.createElement(
     "input",
@@ -4545,7 +4391,7 @@ var UniversalBuyCryptoPage = ({
       onChange: handleCryptoInputChange,
       placeholder: "0.00",
       disabled: isSubmitting,
-      className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300"
+      className: "text-lg sm:text-xl text-black bg-transparent outline-none w-full placeholder-neutral-300 "
     }
   )), /* @__PURE__ */ React45.createElement(
     "button",
@@ -4564,7 +4410,7 @@ var UniversalBuyCryptoPage = ({
       type: "button",
       onClick: () => !readOnlyRecipientSection && setIsNetworkDialogOpen(true),
       disabled: isSubmitting || selectedCrypto?.networks?.length <= 1 || readOnlyRecipientSection,
-      className: `w-full px-2 py-3 text-sm bg-transparent border-b text-black transition-all outline-none flex items-center justify-between ${readOnlyRecipientSection ? "border-neutral-100 cursor-not-allowed" : "border-neutral-200 hover:border-black focus:border-black"}`
+      className: `w-full px-2 py-3 text-sm bg-transparent border-b text-black transition-all outline-none flex items-center justify-between ${readOnlyRecipientSection ? "border-neutral-200 cursor-default opacity-80" : "border-neutral-200 hover:border-black focus:border-black"}`
     },
     /* @__PURE__ */ React45.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React45.createElement(CircularLogo, { src: selectedNetwork.logoUrl || selectedCrypto.logoUrl, alt: selectedNetwork.name, fallbackText: selectedNetwork.symbol }), /* @__PURE__ */ React45.createElement("span", null, selectedNetwork.name)),
     !readOnlyRecipientSection && selectedCrypto?.networks?.length > 1 && /* @__PURE__ */ React45.createElement("svg", { className: "w-4 h-4 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React45.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
@@ -4591,34 +4437,20 @@ var UniversalBuyCryptoPage = ({
     "Buy ",
     selectedCrypto.code,
     " Now"
-  ))), isCryptoDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsCryptoDialogOpen(false) }), /* @__PURE__ */ React45.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__ */ React45.createElement(
-    "button",
-    {
-      onClick: () => setIsCryptoDialogOpen(false),
-      className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none"
-    },
-    /* @__PURE__ */ React45.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__ */ React45.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ React45.createElement("path", { d: "m6 6 12 12" }))
-  ), /* @__PURE__ */ React45.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React45.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ React45.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Cryptocurrency"), /* @__PURE__ */ React45.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Choose the digital asset you want to purchase.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto custom-scrollbar pr-1" }, cryptoOptions.map((c) => {
+  ))), isCryptoDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsCryptoDialogOpen(false) }), /* @__PURE__ */ React45.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__ */ React45.createElement("button", { onClick: () => setIsCryptoDialogOpen(false), className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none" }, /* @__PURE__ */ React45.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__ */ React45.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ React45.createElement("path", { d: "m6 6 12 12" }))), /* @__PURE__ */ React45.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React45.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ React45.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Cryptocurrency"), /* @__PURE__ */ React45.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Choose the digital asset you want to purchase.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto custom-scrollbar pr-1" }, cryptoOptions.map((c) => {
     const isSelected = c.code === selectedCrypto.code;
     return /* @__PURE__ */ React45.createElement(
       "button",
       {
         key: c.code,
         onClick: () => handleCryptoSelect(c),
-        className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
+        className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
       },
       /* @__PURE__ */ React45.createElement(CircularLogo, { src: c.logoUrl, alt: c.name, fallbackText: c.code }),
-      /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
+      /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black truncate" }, c.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, c.code)),
       isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
     );
-  }))))), isNetworkDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ React45.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__ */ React45.createElement(
-    "button",
-    {
-      onClick: () => setIsNetworkDialogOpen(false),
-      className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none"
-    },
-    /* @__PURE__ */ React45.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__ */ React45.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ React45.createElement("path", { d: "m6 6 12 12" }))
-  ), /* @__PURE__ */ React45.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React45.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ React45.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Network"), /* @__PURE__ */ React45.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Ensure your receiving wallet supports this network.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto custom-scrollbar pr-1" }, selectedCrypto?.networks?.map((net) => {
+  }))))), isNetworkDialogOpen && /* @__PURE__ */ React45.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ React45.createElement("div", { className: "absolute inset-0", onClick: () => setIsNetworkDialogOpen(false) }), /* @__PURE__ */ React45.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__ */ React45.createElement("button", { onClick: () => setIsNetworkDialogOpen(false), className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none" }, /* @__PURE__ */ React45.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__ */ React45.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ React45.createElement("path", { d: "m6 6 12 12" }))), /* @__PURE__ */ React45.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ React45.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ React45.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Network"), /* @__PURE__ */ React45.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Ensure your receiving wallet supports this network.")), /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-2 max-h-72 overflow-y-auto custom-scrollbar pr-1" }, selectedCrypto?.networks?.map((net) => {
     const isSelected = net.id === selectedNetwork.id;
     return /* @__PURE__ */ React45.createElement(
       "button",
@@ -4628,10 +4460,10 @@ var UniversalBuyCryptoPage = ({
           setSelectedNetwork(net);
           setIsNetworkDialogOpen(false);
         },
-        className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? " bg-neutral-50/50 border-neutral-400" : "border-transparent"}`
+        className: `flex items-center gap-4 p-3 rounded-full hover:bg-neutral-50 transition-colors text-left outline-none border ${isSelected ? "border-black bg-neutral-50/50" : "border-transparent"}`
       },
       /* @__PURE__ */ React45.createElement(CircularLogo, { src: net.logoUrl || selectedCrypto.logoUrl, alt: net.name, fallbackText: net.symbol }),
-      /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[13px] text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
+      /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React45.createElement("span", { className: "text-xs text-black truncate" }, net.name), /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] text-neutral-400" }, net.symbol)),
       isSelected && /* @__PURE__ */ React45.createElement(HugeiconsIcon31, { icon: CheckmarkCircle02Icon, size: 16, className: "text-black" })
     );
   }))))));