@retinalabsllc/zairusjs 15.0.85 → 15.0.95

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 {
@@ -929,28 +1036,28 @@ import {
 var UniversalProfileSettings = ({
   initialFirstName,
   initialLastName,
-  email,
+  phoneNumber,
   accountStatus = "GOOD",
   memberSince,
   isReadOnly = false,
   bannerProps,
-  hasPin = false,
-  isPinLoading = false,
-  onSavePin,
+  hasPasscode = false,
+  isPasscodeLoading = false,
+  onSavePasscode,
   onSaveProfile,
   onBack
 }) => {
   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 [isPasscodeModalOpen, setIsPasscodeModalOpen] = useState8(false);
+  const [oldPasscode, setOldPasscode] = useState8("");
+  const [newPasscode, setNewPasscode] = useState8("");
+  const [confirmPasscode, setConfirmPasscode] = useState8("");
+  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = useState8(false);
   useEffect5(() => {
     setFirstName(initialFirstName || "");
     setLastName(initialLastName || "");
@@ -979,40 +1086,40 @@ var UniversalProfileSettings = ({
       setIsSubmitting(false);
     }
   };
-  const closePinModal = () => {
-    if (isPinSubmitting) return;
-    setIsPinModalOpen(false);
-    setOldPin("");
-    setNewPin("");
-    setConfirmPin("");
+  const closePasscodeModal = () => {
+    if (isPasscodeSubmitting) return;
+    setIsPasscodeModalOpen(false);
+    setOldPasscode("");
+    setNewPasscode("");
+    setConfirmPasscode("");
   };
-  const handlePinInput = (val, setter) => {
-    setter(val.replace(/\D/g, "").substring(0, 4));
+  const handlePasscodeInput = (val, setter) => {
+    setter(val.replace(/\D/g, "").substring(0, 6));
   };
-  const handlePinSubmit = async (e) => {
+  const handlePasscodeSubmit = async (e) => {
     e.preventDefault();
-    if (!onSavePin) return;
-    if (hasPin && oldPin.length !== 4) return toast3.error("Old PIN must be exactly 4-digits.");
-    if (newPin.length !== 4) return toast3.error("New PIN must be exactly 4-digits.");
-    if (newPin !== confirmPin) return toast3.error("New PINs do not match.");
-    setIsPinSubmitting(true);
+    if (!onSavePasscode) return;
+    if (hasPasscode && oldPasscode.length !== 6) return toast3.error("Old Passcode must be exactly 6-digits.");
+    if (newPasscode.length !== 6) return toast3.error("New Passcode must be exactly 6-digits.");
+    if (newPasscode !== confirmPasscode) return toast3.error("New Passcodes do not match.");
+    setIsPasscodeSubmitting(true);
     try {
-      const action = hasPin ? "change_pin" : "create_pin";
-      const res = await onSavePin({
+      const action = hasPasscode ? "change_passcode" : "create_passcode";
+      const res = await onSavePasscode({
         action,
-        oldPin: hasPin ? oldPin : void 0,
-        newPin
+        oldPasscode: hasPasscode ? oldPasscode : void 0,
+        newPasscode
       });
       if (res.success) {
-        toast3.success(res.message || "PIN updated successfully.");
-        closePinModal();
+        toast3.success(res.message || "Passcode updated successfully.");
+        closePasscodeModal();
       } else {
-        toast3.error(res.error || "Failed to update PIN.");
+        toast3.error(res.error || "Failed to update Passcode.");
       }
     } catch (error) {
       toast3.error("Uh oh! Something went wrong.");
     } finally {
-      setIsPinSubmitting(false);
+      setIsPasscodeSubmitting(false);
     }
   };
   const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
@@ -1025,7 +1132,7 @@ var UniversalProfileSettings = ({
     },
     /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: ArrowLeft01Icon2, size: 16 }),
     " Back"
-  )), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col max-w-3xl w-full mx-auto rounded-2xl p-6 bg-white  gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React12.createElement(ManagedToaster, null), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("h1", { className: "text-black text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ React12.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ React12.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: CircleLock02Icon2, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ React12.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ React12.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React12.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React12.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React12.createElement(
+  )), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col max-w-3xl w-full mx-auto rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React12.createElement(ManagedToaster, null), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("h1", { className: "text-black text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ React12.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ React12.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: CircleLock02Icon2, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ React12.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ React12.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React12.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React12.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React12.createElement(
     TextInput,
     {
       label: "First Name",
@@ -1046,17 +1153,17 @@ var UniversalProfileSettings = ({
   ))), /* @__PURE__ */ React12.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React12.createElement(
     TextInput,
     {
-      label: "Email ID",
-      value: email,
+      label: "Registered Phone Number",
+      value: phoneNumber,
       onChange: () => {
       },
       disabled: true
     }
-  ), /* @__PURE__ */ React12.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-black block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A")), /* @__PURE__ */ React12.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your primary number, please contact support.")), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ React12.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React12.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-black block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A")), /* @__PURE__ */ React12.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ React12.createElement(
     "button",
     {
       type: "button",
-      onClick: () => setIsPinModalOpen(true),
+      onClick: () => setIsPasscodeModalOpen(true),
       className: "w-9 h-9 flex items-center justify-center border border-neutral-200 rounded-full text-black hover:bg-neutral-50 transition-colors outline-none"
     },
     /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: LockKeyIcon, size: 17, className: "text-black" })
@@ -1080,48 +1187,48 @@ var UniversalProfileSettings = ({
       className: "min-w-32 w-full sm:w-auto"
     },
     "Save Changes"
-  ))))), isPinModalOpen && /* @__PURE__ */ React12.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePinModal }), /* @__PURE__ */ React12.createElement("div", { className: "relative w-full max-w-sm bg-white  rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React12.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ React12.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: CancelCircleIcon, size: 18 }))), /* @__PURE__ */ React12.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: Loading03Icon2, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ React12.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-6" }, hasPin && /* @__PURE__ */ React12.createElement(
+  ))))), isPasscodeModalOpen && /* @__PURE__ */ React12.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePasscodeModal }), /* @__PURE__ */ React12.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React12.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPasscode ? "Change Passcode" : "Create Security Passcode"), /* @__PURE__ */ React12.createElement("button", { onClick: closePasscodeModal, disabled: isPasscodeSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: CancelCircleIcon, size: 18 }))), /* @__PURE__ */ React12.createElement("div", { className: "p-6" }, isPasscodeLoading ? /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React12.createElement(HugeiconsIcon6, { icon: Loading03Icon2, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ React12.createElement("form", { onSubmit: handlePasscodeSubmit, className: "flex flex-col gap-6" }, hasPasscode && /* @__PURE__ */ React12.createElement(
     TextInput,
     {
       type: "password",
-      label: "Old PIN",
-      maxLength: 4,
-      disabled: isPinSubmitting,
-      value: oldPin,
-      onChange: (val) => handlePinInput(val, setOldPin),
-      placeholder: "\u2022\u2022\u2022\u2022"
+      label: "Old 6-Digit Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: oldPasscode,
+      onChange: (val) => handlePasscodeInput(val, setOldPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
     }
   ), /* @__PURE__ */ React12.createElement(
     TextInput,
     {
       type: "password",
-      label: hasPin ? "New PIN" : "Enter 4-Digit PIN",
-      maxLength: 4,
-      disabled: isPinSubmitting,
-      value: newPin,
-      onChange: (val) => handlePinInput(val, setNewPin),
-      placeholder: "\u2022\u2022\u2022\u2022"
+      label: hasPasscode ? "New 6-Digit Passcode" : "Enter 6-Digit Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: newPasscode,
+      onChange: (val) => handlePasscodeInput(val, setNewPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
     }
   ), /* @__PURE__ */ React12.createElement(
     TextInput,
     {
       type: "password",
-      label: "Retype New PIN",
-      maxLength: 4,
-      disabled: isPinSubmitting,
-      value: confirmPin,
-      onChange: (val) => handlePinInput(val, setConfirmPin),
-      placeholder: "\u2022\u2022\u2022\u2022"
+      label: "Retype New Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: confirmPasscode,
+      onChange: (val) => handlePasscodeInput(val, setConfirmPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
     }
   ), /* @__PURE__ */ React12.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React12.createElement(
     ThreeDActionButton,
     {
       type: "submit",
-      disabled: isPinSubmitting || newPin.length !== 4 || confirmPin.length !== 4 || hasPin && oldPin.length !== 4,
-      isLoading: isPinSubmitting,
+      disabled: isPasscodeSubmitting || newPasscode.length !== 6 || confirmPasscode.length !== 6 || hasPasscode && oldPasscode.length !== 6,
+      isLoading: isPasscodeSubmitting,
       className: "w-full"
     },
-    hasPin ? "Update PIN" : "Set PIN"
+    hasPasscode ? "Update Passcode" : "Set Passcode"
   ))))))));
 };
 
@@ -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,
@@ -1457,50 +1564,18 @@ import {
   Notification01Icon,
   ArrowLeft01Icon as ArrowLeft01Icon4,
   ArrowRight01Icon as ArrowRight01Icon2,
-  CancelCircleIcon as CancelCircleIcon3
+  CancelCircleIcon as CancelCircleIcon3,
+  ArrowUpRight01Icon as ArrowUpRight01Icon2
 } from "@hugeicons/core-free-icons";
-var renderKMT = (val, currencySymbol) => {
-  let formatted = val;
-  let suffix = "";
-  if (val >= 1e12) {
-    formatted = val / 1e12;
-    suffix = "T";
-  } else if (val >= 1e6) {
-    formatted = val / 1e6;
-    suffix = "M";
-  } else if (val >= 1e3) {
-    formatted = val / 1e3;
-    suffix = "k";
-  }
-  const displayStr = parseFloat(formatted.toFixed(2)).toString();
-  return /* @__PURE__ */ React16.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] text-neutral-800 mr-0.5 " }, currencySymbol), /* @__PURE__ */ React16.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ React16.createElement("span", { className: "text-[14px] text-neutral-600 ml-0.5 " }, suffix));
-};
-var renderKMT2 = (val, currencySymbol) => {
-  let formatted = val;
-  let suffix = "";
-  if (val >= 1e12) {
-    formatted = val / 1e12;
-    suffix = "T";
-  } else if (val >= 1e6) {
-    formatted = val / 1e6;
-    suffix = "M";
-  } else if (val >= 1e3) {
-    formatted = val / 1e3;
-    suffix = "k";
-  }
-  const displayStr = parseFloat(formatted.toFixed(2)).toString();
-  return /* @__PURE__ */ React16.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[13px] text-white mr-0.5 " }, currencySymbol), /* @__PURE__ */ React16.createElement("span", { className: "text-xl text-white tracking-tight " }, displayStr), /* @__PURE__ */ React16.createElement("span", { className: "text-[14px] text-white/50 ml-0.5 " }, suffix));
-};
 var UniversalHomeView = ({
   fullName = "",
   avatarSrc,
-  balanceLabel = "Available Balance",
+  balanceLabel = "Pending Balance",
   balanceAmount,
   balanceCurrency = "$",
-  cashbackValue,
-  rewardsValue,
-  primaryAction,
-  secondaryAction,
+  calculatorAction,
+  buyCryptoAction,
+  referralAction,
   notifications = [],
   notificationPage = 1,
   notificationTotalPages = 1,
@@ -1511,11 +1586,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);
@@ -1564,7 +1639,7 @@ var UniversalHomeView = ({
         setShowNotifDialog(true);
         setSelectedNotif(null);
       },
-      className: "relative w-10 h-10 flex items-center justify-center rounded-full bg-white  outline-none hover:bg-neutral-50 transition-colors"
+      className: "relative w-10 h-10 flex items-center justify-center rounded-full bg-white outline-none hover:bg-neutral-50 transition-colors"
     },
     /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: Notification01Icon, size: 20, className: "text-black" }),
     hasUnreadNotifs && /* @__PURE__ */ React16.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
@@ -1575,35 +1650,44 @@ var UniversalHomeView = ({
       className: "text-neutral-400 hover:text-white transition-colors outline-none"
     },
     /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 16 })
-  )), /* @__PURE__ */ React16.createElement("p", { className: `text-2xl text-white tracking-tight mb-6 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ React16.createElement("div", { className: "flex items-center gap-3 w-full" }, primaryAction && /* @__PURE__ */ React16.createElement(
+  )), /* @__PURE__ */ React16.createElement("p", { className: `text-2xl text-white tracking-tight mb-6 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ React16.createElement("div", { className: "flex items-center w-full" }, calculatorAction && /* @__PURE__ */ React16.createElement(
     "button",
     {
-      onClick: primaryAction.onClick,
-      className: "px-6 py-2 bg-white text-black text-[12px] truncate rounded-full transition-opacity hover:opacity-90 outline-none  text-center"
+      onClick: calculatorAction.onClick,
+      className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none text-center"
     },
-    "Deposit"
-  ), secondaryAction && /* @__PURE__ */ React16.createElement(
-    "button",
+    calculatorAction.label || "Rate Calculator"
+  )))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement(
+    "div",
     {
-      onClick: secondaryAction.onClick,
-      className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none  text-center"
+      onClick: buyCryptoAction?.onClick,
+      className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
     },
-    "Earn Rewards"
-  )))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement("div", { className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-white mb-1" }, "Cashback"), renderKMT2(cashbackValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
-    "img",
-    {
-      src: "https://retinalabs.company/assets/images/save_box.avif",
-      alt: "Cashback",
-      className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
-    }
-  )), /* @__PURE__ */ React16.createElement("div", { className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-black mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ React16.createElement(
-    "img",
+    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-white font-medium" }, "Buy Crypto"), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 border border-white/10 flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowUpRight01Icon2, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ React16.createElement(
+      "img",
+      {
+        src: "https://retinalabs.company/assets/images/save_box.avif",
+        alt: "Buy Crypto",
+        className: "absolute bottom-4 right-2 translate-x-1/4 translate-y-1/2 w-32 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
+      }
+    )
+  ), /* @__PURE__ */ React16.createElement(
+    "div",
     {
-      src: "https://retinalabs.company/assets/images/gift_box.avif",
-      alt: "Rewards",
-      className: "absolute bottom-6 right-4 translate-x-1/4 translate-y-1/2 w-40 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
-    }
-  )))), customContent && /* @__PURE__ */ React16.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ React16.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React16.createElement(
+      onClick: referralAction?.onClick,
+      className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
+    },
+    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-black font-medium" }, "Referral"), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 border border-black/5 flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowRight01Icon2, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ React16.createElement(
+      "img",
+      {
+        src: "https://retinalabs.company/assets/images/gift_box.avif",
+        alt: "Referral",
+        className: "absolute bottom-4 right-2 translate-x-1/4 translate-y-1/2 w-32 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
+      }
+    )
+  ))), customContent && /* @__PURE__ */ React16.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ React16.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React16.createElement(
     UniversalTransactionPage,
     {
       ...transactionsProps,
@@ -1643,7 +1727,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 +1790,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 +1813,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,16 +2013,18 @@ 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 toast6 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
 import {
   SnowIcon,
   Delete02Icon,
   ArrowRight01Icon as ArrowRight01Icon3,
-  SlidersHorizontalIcon,
   ViewOffSlashIcon as ViewOffSlashIcon2,
   Loading03Icon as Loading03Icon8,
+  CancelCircleIcon as CancelCircleIcon5,
+  Copy01Icon as Copy01Icon3,
   PlusSignIcon as PlusSignIcon2
 } from "@hugeicons/core-free-icons";
 var UniversalCardPage = ({
@@ -1946,10 +2032,8 @@ var UniversalCardPage = ({
   actionPath = "/app/cards/action/",
   onReveal,
   onFreeze,
-  onSetLimits,
   onDelete,
-  onFundCard,
-  onCreateCard
+  onFundCard
 }) => {
   const router = useRouter();
   const sortedCards = React19.useMemo(() => {
@@ -1959,146 +2043,78 @@ 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 [showDeleteDialog, setShowDeleteDialog] = useState12(false);
+  const [isDeleting, setIsDeleting] = useState12(false);
   useEffect8(() => {
     setIsBgLoaded(false);
     if (!activeCard?.cardBgSrc) return;
     const img = new Image();
     img.src = activeCard.cardBgSrc;
-    img.onload = () => {
-      setTimeout(() => setIsBgLoaded(true), 300);
-    };
+    img.onload = () => setIsBgLoaded(true);
   }, [activeCard?.cardBgSrc]);
   if (!activeCard || sortedCards.length === 0) {
-    return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative min-h-100 justify-center" }, onCreateCard && /* @__PURE__ */ React19.createElement(
-      "button",
-      {
-        onClick: onCreateCard,
-        className: "fixed bottom-24 right-6 sm:right-50 z-50 w-11 h-11 rounded-full bg-white shadow-xl flex items-center justify-center text-black transition-all outline-none"
-      },
-      /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: PlusSignIcon2, size: 18 })
-    ), /* @__PURE__ */ React19.createElement("div", { className: "p-6 w-full max-w-md mx-auto text-center" }, /* @__PURE__ */ React19.createElement("div", { className: "mb-8 flex justify-center" }, /* @__PURE__ */ React19.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        className: "w-12 h-12 fill-neutral-100"
-      },
-      /* @__PURE__ */ React19.createElement("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" })
-    )), /* @__PURE__ */ React19.createElement("h1", { className: "text-xl text-black tracking-tight mb-4" }, "No cards available"), /* @__PURE__ */ React19.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-12" }, "You do not have any virtual or physical cards generated yet.")));
+    return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative min-h-100 justify-center" }, /* @__PURE__ */ React19.createElement("div", { className: "p-6 w-full max-w-md mx-auto text-center" }, /* @__PURE__ */ React19.createElement("div", { className: "mb-8 flex justify-center" }, /* @__PURE__ */ React19.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "w-12 h-12 fill-neutral-100" }, /* @__PURE__ */ React19.createElement("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }))), /* @__PURE__ */ React19.createElement("h1", { className: "text-xl text-black tracking-tight mb-4" }, "No cards available"), /* @__PURE__ */ React19.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-12" }, "You do not have any active cards on your account.")));
   }
   const isActivated = activeCard.status === "ACTIVATED";
   const isFrozen = activeCard.status === "FROZEN";
   const isUnactivated = activeCard.status === "UNACTIVATED";
   const isDead = ["BLOCKED", "EXPIRED", "DELETED"].includes(activeCard.status);
-  const isPreordered = activeCard.preOrder === true;
-  const actionsDisabled = !isActivated && !isFrozen;
-  const revealDisabled = !isActivated;
-  const freezeDisabled = isUnactivated || isDead;
-  const showActionOverlay = !isActivated && isBgLoaded && !isPreordered || isFrozen;
-  const overlayClasses = activeCard.contentDark ? "bg-white/20 backdrop-blur-[3px]" : "bg-black/10 backdrop-blur-[2px]";
-  const buttonClasses = activeCard.contentDark ? "bg-black/10 text-black hover:bg-black/20 font-medium" : "bg-white/25 text-white hover:bg-white/35";
-  const handleToggleFreeze = () => {
-    if (freezeDisabled || isFreezing) return;
+  const actionsDisabled = !isActivated && !isFrozen || isDead;
+  const showActionOverlay = !isActivated && isBgLoaded || isFrozen;
+  const overlayClasses = activeCard.contentDark ? "bg-white/30 backdrop-blur-[3px]" : "bg-black/30 backdrop-blur-[3px]";
+  const buttonClasses = activeCard.contentDark ? "bg-black text-white hover:bg-black/80 font-medium" : "bg-white text-black hover:bg-neutral-100 font-medium";
+  const handleToggleFreeze = async () => {
+    if (actionsDisabled || isFreezing || !onFreeze) return;
     setIsFreezing(true);
-    setTimeout(() => {
-      if (onFreeze) onFreeze(activeCard.id);
+    try {
+      await onFreeze(activeCard.id);
+    } finally {
       setIsFreezing(false);
-    }, 800);
+    }
   };
   const confirmDelete = async () => {
     setIsDeleting(true);
-    setTimeout(() => {
-      if (onDelete) onDelete(activeCard.id);
-      setIsDeleting(false);
-      setShowDeleteDialog(false);
-    }, 1200);
+    if (onDelete) onDelete(activeCard.id);
+    setIsDeleting(false);
+    setShowDeleteDialog(false);
   };
-  const formatTabLabel = (card) => {
-    if (card.prepaid) {
-      const capitalizedTier = card.tier.charAt(0).toUpperCase() + card.tier.slice(1).toLowerCase();
-      return `${capitalizedTier}`;
-    }
-    const capitalizedType = card.type.charAt(0).toUpperCase() + card.type.slice(1).toLowerCase();
-    return `${capitalizedType}`;
+  const formatTabLabel = (type) => {
+    return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
   };
-  return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React19.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), onCreateCard && /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React19.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), sortedCards.length > 1 && /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center bg-white rounded-full p-1 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => /* @__PURE__ */ React19.createElement(
     "button",
     {
-      onClick: onCreateCard,
-      className: "fixed bottom-24 right-6 sm:right-50 z-50 w-11 h-11 rounded-full bg-white shadow-xl flex items-center justify-center text-black transition-all outline-none"
+      key: tab.id,
+      onClick: () => setActiveTabIndex(idx),
+      className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${activeTabIndex === idx ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
     },
-    /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: PlusSignIcon2, size: 18 })
-  ), sortedCards.length > 1 && /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => {
-    const isActive = activeTabIndex === idx;
-    return /* @__PURE__ */ React19.createElement(
-      "button",
-      {
-        key: tab.id,
-        onClick: () => setActiveTabIndex(idx),
-        className: `px-4 py-1.5 rounded-full text-[11px] transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-100 text-black" : "text-neutral-500 hover:text-black hover:bg-neutral-50/50"}`
-      },
-      formatTabLabel(tab)
-    );
-  }))), /* @__PURE__ */ React19.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ React19.createElement(
-    "div",
+    formatTabLabel(tab.type)
+  )))), /* @__PURE__ */ React19.createElement("div", { className: "w-full pt-2 pb-6 flex justify-center" }, /* @__PURE__ */ React19.createElement("div", { className: "relative w-full max-w-85", style: { height: 179 } }, !isBgLoaded && /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 28, className: "animate-spin text-black" })), showActionOverlay && /* @__PURE__ */ React19.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ React19.createElement(
+    "button",
     {
-      className: "relative w-full max-w-85",
-      style: { height: 179 }
-    },
-    !isBgLoaded && /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 28, className: "animate-spin text-black" })),
-    showActionOverlay && /* @__PURE__ */ React19.createElement("div", { className: `absolute inset-0 z-40 w-full h-full rounded-2xl flex flex-col items-center justify-center transition-all ${overlayClasses}` }, isUnactivated && /* @__PURE__ */ React19.createElement(
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          router.push(`${actionPath}${activeCard.id}`);
-        },
-        className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none active:scale-95 ${buttonClasses}`
+      onClick: (e) => {
+        e.stopPropagation();
+        router.push(`${actionPath}${activeCard.id}`);
       },
-      "Activate Card"
-    ), isFrozen && /* @__PURE__ */ React19.createElement(
-      "button",
-      {
-        disabled: isOverlayActionLoading,
-        className: `px-6 py-2.5 text-[12px] rounded-full transition-all outline-none active:scale-95 flex items-center gap-2 disabled:opacity-80 ${buttonClasses}`
-      },
-      isOverlayActionLoading ? /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Card Frozen"
-    )),
-    /* @__PURE__ */ React19.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ React19.createElement(
-      "div",
-      {
-        className: "absolute inset-0 bg-cover bg-center",
-        style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
-      }
-    ), /* @__PURE__ */ React19.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.prepaid && /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React19.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ React19.createElement("span", { className: `text-[11px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier))), /* @__PURE__ */ React19.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React19.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, activeCard.prepaid ? "Card Balance" : "Card Tier"), /* @__PURE__ */ React19.createElement("span", { className: `text-[12px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.prepaid ? activeCard.balance || "$0.00" : activeCard.tier)), activeCard.networkLogoSrc && /* @__PURE__ */ React19.createElement(
-      "img",
-      {
-        src: activeCard.networkLogoSrc,
-        alt: "Network Logo",
-        className: "h-7 w-auto max-w-20 object-contain opacity-90"
-      }
-    ))))
-  )), activeCard.bannerProps ? /* @__PURE__ */ React19.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ React19.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ React19.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ React19.createElement(
-    Banner,
+      className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none ${buttonClasses}`
+    },
+    "Activate Card"
+  ), isFrozen && /* @__PURE__ */ React19.createElement("div", { className: `px-6 py-2.5 text-[12px] rounded-full flex items-center gap-2 ${buttonClasses}` }, "Card Frozen")), /* @__PURE__ */ React19.createElement("div", { className: `absolute inset-0 w-full h-full rounded-2xl overflow-hidden transition-all duration-700 ${isBgLoaded ? "opacity-100 scale-100" : "opacity-0 scale-105"}` }, /* @__PURE__ */ React19.createElement(
+    "div",
     {
-      type: "success",
-      title: "Order Secured",
-      message: `Your ${activeCard.tier} ${activeCard.type.toLowerCase()} card has been pre-ordered successfully and is pending batch processing.`,
-      isDismissible: false
+      className: "absolute inset-0 bg-cover bg-center",
+      style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
     }
-  )) : null, /* @__PURE__ */ React19.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ React19.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, activeCard.prepaid && /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React19.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.networkLogoSrc && /* @__PURE__ */ React19.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-7 w-auto max-w-20 object-contain opacity-90" })), /* @__PURE__ */ React19.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React19.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ React19.createElement("span", { className: `text-[16px] tracking-widest font-medium ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance))))))), /* @__PURE__ */ React19.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ React19.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React19.createElement(
     MenuRow,
     {
       icon: PlusSignIcon2,
       title: "Fund Card",
-      subtitle: "Add money to card",
+      subtitle: "Add money to card balance",
       onClick: () => {
         if (!actionsDisabled && onFundCard) onFundCard(activeCard.id);
       },
@@ -2111,9 +2127,9 @@ var UniversalCardPage = ({
       title: "Reveal Information",
       subtitle: "Show secure card details",
       onClick: () => {
-        if (!revealDisabled && onReveal) onReveal(activeCard.id);
+        if (!actionsDisabled && onReveal) onReveal(activeCard.id);
       },
-      disabled: revealDisabled
+      disabled: actionsDisabled
     }
   ), /* @__PURE__ */ React19.createElement(
     MenuRow,
@@ -2125,19 +2141,7 @@ var UniversalCardPage = ({
       isToggle: true,
       toggleState: isFrozen,
       toggleLoading: isFreezing,
-      disabled: freezeDisabled,
-      isLast: activeCard.prepaid
-    }
-  ), !activeCard.prepaid && /* @__PURE__ */ React19.createElement(
-    MenuRow,
-    {
-      icon: SlidersHorizontalIcon,
-      title: "Set Limits",
-      subtitle: "Set card limits",
-      onClick: () => {
-        if (!actionsDisabled && onSetLimits) onSetLimits(activeCard.id);
-      },
-      disabled: actionsDisabled,
+      disabled: isUnactivated || isDead,
       isLast: true
     }
   )), /* @__PURE__ */ React19.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React19.createElement(
@@ -2157,7 +2161,7 @@ var UniversalCardPage = ({
     {
       isOpen: showDeleteDialog,
       title: "Delete Card",
-      message: "Please ensure you spend all funds on this card before deleting. Once deleted, any remaining funds will be permanently lost and cannot be recovered.",
+      message: "Are you sure you want to delete this card? This action is permanent and cannot be undone.",
       confirmText: "Delete",
       isDestructive: true,
       isProcessing: isDeleting,
@@ -2166,31 +2170,10 @@ var UniversalCardPage = ({
     }
   ));
 };
-var MenuRow = ({
-  icon,
-  title,
-  subtitle,
-  onClick,
-  iconColor = "text-black",
-  titleColor = "text-black",
-  isLast = false,
-  isToggle = false,
-  toggleState = false,
-  toggleLoading = false,
-  disabled = false
-}) => /* @__PURE__ */ React19.createElement(
-  "div",
-  {
-    onClick: disabled ? void 0 : onClick,
-    className: `flex items-center p-3 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
-  },
-  /* @__PURE__ */ React19.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon, size: 16, className: iconColor })),
-  /* @__PURE__ */ React19.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ React19.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
-  isToggle ? /* @__PURE__ */ React19.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-100"} ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ React19.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: ArrowRight01Icon3, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
-);
+var MenuRow = ({ icon, title, subtitle, onClick, isLast = false, isToggle = false, toggleState = false, toggleLoading = false, disabled = false }) => /* @__PURE__ */ React19.createElement("div", { onClick: disabled ? void 0 : onClick, className: `flex items-center p-3 transition-colors ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}` }, /* @__PURE__ */ React19.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon, size: 16, className: "text-black" })), /* @__PURE__ */ React19.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("p", { className: "text-[13px] truncate text-black" }, title), /* @__PURE__ */ React19.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)), isToggle ? /* @__PURE__ */ React19.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-100"} ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ React19.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon8, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: ArrowRight01Icon3, size: 18, className: "text-neutral-400 shrink-0 ml-2" }));
 
 // 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 +2202,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 +2357,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 +2370,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,21 +2429,21 @@ 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 { toast as toast6 } from "react-hot-toast";
+import React22, { useState as useState15 } from "react";
+import { toast as toast7 } 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();
     if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      toast6.error("Please enter a valid email address.");
+      toast7.error("Please enter a valid email address.");
       return;
     }
     setIsLoading(true);
@@ -2474,14 +2457,14 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
       });
       const data = await response.json();
       if (response.ok && data.success) {
-        toast6.success(data.message || "You've been added to the waitlist!");
+        toast7.success(data.message || "You've been added to the waitlist!");
         setEmail("");
         onClose();
       } else {
-        toast6.error(data.error || "Something went wrong. Please try again.");
+        toast7.error(data.error || "Something went wrong. Please try again.");
       }
     } catch (error) {
-      toast6.error("Network error. Please check your connection.");
+      toast7.error("Network error. Please check your connection.");
     } finally {
       setIsLoading(false);
     }
@@ -2558,8 +2541,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 +2637,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,114 +2712,36 @@ var AppBento2 = ({ tagline, headline, features }) => {
 };
 
 // src/components/UniversalSecurityPage.tsx
-import React25, { useState as useState17, useRef as useRef6 } from "react";
-import toast7 from "react-hot-toast";
+import React25, { useState as useState18 } from "react";
+import toast8 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
 import {
-  CancelCircleIcon as CancelCircleIcon5,
+  CancelCircleIcon as CancelCircleIcon6,
   Loading03Icon as Loading03Icon10,
-  Copy01Icon as Copy01Icon3,
   ArrowLeft01Icon as ArrowLeft01Icon6,
-  CircleLockCheck02Icon,
   Key01Icon,
+  LockKeyIcon as LockKeyIcon3,
   ArrowRight01Icon as ArrowRight01Icon5
 } from "@hugeicons/core-free-icons";
 import { startRegistration } from "@simplewebauthn/browser";
 var UniversalSecurityPage = ({
-  has2FA,
+  hasPasscode,
   hasPasskey,
-  userEmail = "your account",
-  is2FALoading = false,
+  isPasscodeLoading = false,
   isPasskeyLoading = false,
   onBack,
-  onRequest2FASetup,
-  onVerifyAndEnable2FA,
-  onVerifyAndDisable2FA,
+  onSavePasscode,
   onRequestPasskeySetup,
   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 inputRefs = useRef6([]);
-  const resetOtp = () => {
-    setOtp(Array(6).fill(""));
-    setIsSubmitting(false);
-  };
-  const handleOtpChange = (index, value) => {
-    const sanitizedValue = value.replace(/\D/g, "").slice(-1);
-    const newOtp = [...otp];
-    newOtp[index] = sanitizedValue;
-    setOtp(newOtp);
-    if (sanitizedValue && index < 5) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-  const handlePaste = (e) => {
-    e.preventDefault();
-    const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
-    if (!pastedData) return;
-    const newOtp = [...otp];
-    for (let i = 0; i < pastedData.length; i++) {
-      newOtp[i] = pastedData[i];
-    }
-    setOtp(newOtp);
-    const focusIndex = Math.min(pastedData.length, 5);
-    inputRefs.current[focusIndex]?.focus();
-  };
-  const handleCopySecret = async (secret) => {
-    try {
-      if (navigator?.clipboard?.writeText && window.isSecureContext) {
-        await navigator.clipboard.writeText(secret);
-        toast7.success("Secret copied to clipboard");
-      } else {
-        throw new Error("Clipboard API not available");
-      }
-    } catch (e) {
-      try {
-        const textArea = document.createElement("textarea");
-        textArea.value = secret;
-        textArea.style.position = "fixed";
-        textArea.style.left = "-999999px";
-        textArea.style.top = "-999999px";
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        document.execCommand("copy");
-        textArea.remove();
-        toast7.success("Secret copied to clipboard");
-      } catch (err) {
-        toast7.error("Unable to copy. Please manually copy the key.");
-      }
-    }
-  };
-  const handleToggle2FA = async () => {
-    if (is2FALoading) return;
-    if (has2FA) {
-      resetOtp();
-      setShow2FADisableModal(true);
-    } else {
-      if (!onRequest2FASetup) return;
-      setIsFetchingSetup(true);
-      try {
-        const data = await onRequest2FASetup();
-        setTwoFaSecret(data.secret);
-        setTwoFaQr(data.qrCodeUrl);
-        resetOtp();
-        setShow2FASetupModal(true);
-      } catch (error) {
-        toast7.error("Failed to initialize 2FA setup");
-      } finally {
-        setIsFetchingSetup(false);
-      }
-    }
-  };
+  const [showPasskeyModal, setShowPasskeyModal] = useState18(false);
+  const [isSubmitting, setIsSubmitting] = useState18(false);
+  const [isPasscodeModalOpen, setIsPasscodeModalOpen] = useState18(false);
+  const [oldPasscode, setOldPasscode] = useState18("");
+  const [newPasscode, setNewPasscode] = useState18("");
+  const [confirmPasscode, setConfirmPasscode] = useState18("");
+  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = useState18(false);
   const handleTogglePasskey = () => {
     if (isPasskeyLoading) return;
     if (hasPasskey) {
@@ -2845,38 +2750,40 @@ var UniversalSecurityPage = ({
       setShowPasskeyModal(true);
     }
   };
-  const submitEnable2FA = async (code) => {
-    if (!onVerifyAndEnable2FA) return;
-    setIsSubmitting(true);
-    try {
-      const res = await onVerifyAndEnable2FA(code);
-      if (res.success) {
-        toast7.success("2FA Enabled Successfully");
-        setShow2FASetupModal(false);
-      } else {
-        toast7.error("Invalid verification code");
-      }
-    } catch (error) {
-      toast7.error("Verification failed");
-    } finally {
-      setIsSubmitting(false);
-    }
+  const closePasscodeModal = () => {
+    if (isPasscodeSubmitting) return;
+    setIsPasscodeModalOpen(false);
+    setOldPasscode("");
+    setNewPasscode("");
+    setConfirmPasscode("");
   };
-  const submitDisable2FA = async (code) => {
-    if (!onVerifyAndDisable2FA) return;
-    setIsSubmitting(true);
+  const handlePasscodeInput = (val, setter) => {
+    setter(val.replace(/\D/g, "").substring(0, 6));
+  };
+  const handlePasscodeSubmit = async (e) => {
+    e.preventDefault();
+    if (!onSavePasscode) return;
+    if (hasPasscode && oldPasscode.length !== 6) return toast8.error("Old Passcode must be exactly 6-digits.");
+    if (newPasscode.length !== 6) return toast8.error("New Passcode must be exactly 6-digits.");
+    if (newPasscode !== confirmPasscode) return toast8.error("New Passcodes do not match.");
+    setIsPasscodeSubmitting(true);
     try {
-      const res = await onVerifyAndDisable2FA(code);
+      const action = hasPasscode ? "change_passcode" : "create_passcode";
+      const res = await onSavePasscode({
+        action,
+        oldPasscode: hasPasscode ? oldPasscode : void 0,
+        newPasscode
+      });
       if (res.success) {
-        toast7.success("2FA Disabled");
-        setShow2FADisableModal(false);
+        toast8.success(res.message || "Passcode updated successfully.");
+        closePasscodeModal();
       } else {
-        toast7.error("Invalid verification code");
+        toast8.error(res.error || "Failed to update Passcode.");
       }
     } catch (error) {
-      toast7.error("Verification failed");
+      toast8.error("Uh oh! Something went wrong.");
     } finally {
-      setIsSubmitting(false);
+      setIsPasscodeSubmitting(false);
     }
   };
   const submitEnablePasskey = async () => {
@@ -2895,13 +2802,13 @@ var UniversalSecurityPage = ({
       }
       const res = await onVerifyAndEnablePasskey(credentialResponse);
       if (res.success) {
-        toast7.success("Passkey Created Successfully");
+        toast8.success("Passkey Created Successfully");
         setShowPasskeyModal(false);
       } else {
-        toast7.error("Failed to verify device passkey.");
+        toast8.error("Failed to verify device passkey.");
       }
     } catch (error) {
-      toast7.error(error.message || "Passkey setup interrupted.");
+      toast8.error(error.message || "Passkey setup interrupted.");
     } finally {
       setIsSubmitting(false);
     }
@@ -2910,20 +2817,18 @@ var UniversalSecurityPage = ({
     "button",
     {
       onClick: onBack,
-      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px]  outline-none"
+      className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none"
     },
     /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: ArrowLeft01Icon6, size: 16 }),
     " Back"
   )), /* @__PURE__ */ React25.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ React25.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React25.createElement(
     MenuRow3,
     {
-      icon: CircleLockCheck02Icon,
-      title: "Authenticator App",
-      subtitle: "Secure your account with 2FA",
-      onClick: handleToggle2FA,
-      isToggle: true,
-      toggleState: has2FA,
-      toggleLoading: is2FALoading || isFetchingSetup
+      icon: LockKeyIcon3,
+      title: "Security Passcode",
+      subtitle: hasPasscode ? "Change your 6-digit passcode" : "Create a 6-digit passcode",
+      onClick: () => setIsPasscodeModalOpen(true),
+      isToggle: false
     }
   ), /* @__PURE__ */ React25.createElement(
     MenuRow3,
@@ -2937,86 +2842,49 @@ var UniversalSecurityPage = ({
       toggleLoading: isPasskeyLoading,
       isLast: true
     }
-  ))), show2FASetupModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon5, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ React25.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ React25.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-200 p-2" }) : /* @__PURE__ */ React25.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ React25.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-8" }, /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Setup Key"), /* @__PURE__ */ React25.createElement("div", { className: "flex items-center gap-2 min-w-0 bg-neutral-50 px-3 py-2.5 rounded-xl " }, /* @__PURE__ */ React25.createElement("span", { className: "text-[13px] font-mono tracking-widest text-black truncate min-w-0 block flex-1" }, twoFaSecret), /* @__PURE__ */ React25.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => handleCopySecret(twoFaSecret),
-      className: "text-neutral-400 hover:text-black transition-colors outline-none shrink-0 ml-2"
-    },
-    /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: Copy01Icon3, size: 16 })
-  )))), /* @__PURE__ */ React25.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ React25.createElement("form", { className: "space-y-4", autoComplete: "off", onSubmit: (e) => {
-    e.preventDefault();
-    submitEnable2FA(otp.join(""));
-  } }, /* @__PURE__ */ React25.createElement("div", { className: "flex justify-between gap-2 pb-6", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React25.createElement(
-    "input",
+  ))), isPasscodeModalOpen && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePasscodeModal }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPasscode ? "Change Passcode" : "Create Security Passcode"), /* @__PURE__ */ React25.createElement("button", { onClick: closePasscodeModal, disabled: isPasscodeSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6" }, isPasscodeLoading ? /* @__PURE__ */ React25.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: Loading03Icon10, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ React25.createElement("form", { onSubmit: handlePasscodeSubmit, className: "flex flex-col gap-6" }, hasPasscode && /* @__PURE__ */ React25.createElement(
+    TextInput,
     {
-      key: index,
-      ref: (el) => {
-        inputRefs.current[index] = el;
-      },
-      type: "text",
-      inputMode: "numeric",
-      maxLength: 1,
-      value: digit,
-      onChange: (e) => handleOtpChange(index, e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Backspace" && !otp[index] && index > 0) {
-          inputRefs.current[index - 1]?.focus();
-        }
-      },
-      className: "w-8 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"
+      type: "password",
+      label: "Old 6-Digit Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: oldPasscode,
+      onChange: (val) => handlePasscodeInput(val, setOldPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
     }
-  ))), /* @__PURE__ */ React25.createElement(
-    ThreeDActionButton,
-    {
-      type: "submit",
-      disabled: otp.join("").length < 6,
-      isLoading: isSubmitting,
-      className: "w-full py-3.5"
-    },
-    "Verify & Enable"
   ), /* @__PURE__ */ React25.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => handleCopySecret(twoFaSecret),
-      className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 outline-none text-xs  tracking-wide transition-colors mt-2"
-    },
-    /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: Copy01Icon3, size: 16, className: "mr-2" }),
-    "Copy Secret Key"
-  ))))), show2FADisableModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FADisableModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Disable 2FA"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShow2FADisableModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon5, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6" }, /* @__PURE__ */ React25.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the code from your authenticator app to disable 2FA.")), /* @__PURE__ */ React25.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
-    e.preventDefault();
-    submitDisable2FA(otp.join(""));
-  } }, /* @__PURE__ */ React25.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React25.createElement(
-    "input",
+    TextInput,
     {
-      key: index,
-      ref: (el) => {
-        inputRefs.current[index] = el;
-      },
-      type: "text",
-      inputMode: "numeric",
-      maxLength: 1,
-      value: digit,
-      onChange: (e) => handleOtpChange(index, e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Backspace" && !otp[index] && index > 0) {
-          inputRefs.current[index - 1]?.focus();
-        }
-      },
-      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"
+      type: "password",
+      label: hasPasscode ? "New 6-Digit Passcode" : "Enter 6-Digit Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: newPasscode,
+      onChange: (val) => handlePasscodeInput(val, setNewPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
     }
-  ))), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React25.createElement(
+    TextInput,
+    {
+      type: "password",
+      label: "Retype New Passcode",
+      maxLength: 6,
+      disabled: isPasscodeSubmitting,
+      value: confirmPasscode,
+      onChange: (val) => handlePasscodeInput(val, setConfirmPasscode),
+      placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022"
+    }
+  ), /* @__PURE__ */ React25.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React25.createElement(
     ThreeDActionButton,
     {
       type: "submit",
-      disabled: otp.join("").length < 6,
-      isLoading: isSubmitting,
-      className: "w-full py-3.5"
+      disabled: isPasscodeSubmitting || newPasscode.length !== 6 || confirmPasscode.length !== 6 || hasPasscode && oldPasscode.length !== 6,
+      isLoading: isPasscodeSubmitting,
+      className: "w-full"
     },
-    "Verify & Disable"
-  ))))), showPasskeyModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon5, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ React25.createElement(
+    hasPasscode ? "Update Passcode" : "Set Passcode"
+  )))))), showPasskeyModal && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React25.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ React25.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: CancelCircleIcon6, size: 18 }))), /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ React25.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ React25.createElement("p", { className: "text-[13px] text-neutral-500 mb-8 leading-relaxed" }, "Use your device's biometrics (Face ID, Touch ID, or PIN) to securely sign into your account without needing a password."), /* @__PURE__ */ React25.createElement(
     ThreeDActionButton,
     {
       onClick: submitEnablePasskey,
@@ -3044,19 +2912,19 @@ var MenuRow3 = ({
     onClick: disabled ? void 0 : onClick,
     className: `flex items-center p-4 transition-colors ${!isLast ? "" : ""} ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-neutral-50"}`
   },
-  /* @__PURE__ */ React25.createElement("div", { className: "w-9 h-9 rounded-full  border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon, size: 16, className: iconColor })),
-  /* @__PURE__ */ React25.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React25.createElement("p", { className: `text-[14px]  truncate ${titleColor}` }, title), /* @__PURE__ */ React25.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, subtitle)),
+  /* @__PURE__ */ React25.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon, size: 16, className: iconColor })),
+  /* @__PURE__ */ React25.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React25.createElement("p", { className: `text-[14px] truncate ${titleColor}` }, title), /* @__PURE__ */ React25.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, subtitle)),
   isToggle ? /* @__PURE__ */ React25.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-100"} ${disabled ? "opacity-50" : ""}` }, /* @__PURE__ */ React25.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: Loading03Icon10, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ React25.createElement(HugeiconsIcon17, { icon: ArrowRight01Icon5, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
 );
 
 // src/components/FeatureScroll.tsx
-import React26, { useRef as useRef7, useState as useState18, useEffect as useEffect11 } from "react";
+import React26, { useRef as useRef6, 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,
     {
@@ -3094,9 +2962,9 @@ var FeatureCard = ({ feature, bgImage }) => {
   ))), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React26.createElement("h3", { className: "  text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React26.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));
 };
 var FeatureScroll = ({ tagline, headline, features }) => {
-  const scrollRef = useRef7(null);
-  const [canScrollLeft, setCanScrollLeft] = useState18(false);
-  const [canScrollRight, setCanScrollRight] = useState18(true);
+  const scrollRef = useRef6(null);
+  const [canScrollLeft, setCanScrollLeft] = useState19(false);
+  const [canScrollRight, setCanScrollRight] = useState19(true);
   const checkScroll = () => {
     if (scrollRef.current) {
       const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
@@ -3185,7 +3053,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 useRef7 } from "react";
 var ManagedDocument = ({
   tagline,
   title,
@@ -3193,8 +3061,8 @@ var ManagedDocument = ({
   contactText,
   contactEmail
 }) => {
-  const [isAnimating, setIsAnimating] = useState19(false);
-  const titleRef = useRef8(null);
+  const [isAnimating, setIsAnimating] = useState20(false);
+  const titleRef = useRef7(null);
   useEffect12(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -3235,10 +3103,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 +3168,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 useRef8 } 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,9 +3179,9 @@ var ManagedPricingBlock = ({
   plans = [],
   tabs
 }) => {
-  const [isAnimating, setIsAnimating] = useState21(false);
-  const [activeTabIndex, setActiveTabIndex] = useState21(0);
-  const titleRef = useRef9(null);
+  const [isAnimating, setIsAnimating] = useState22(false);
+  const [activeTabIndex, setActiveTabIndex] = useState22(0);
+  const titleRef = useRef8(null);
   useEffect14(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -3529,13 +3397,13 @@ var ManagedNewsletterSplitBlock = ({
 };
 
 // src/components/PortfolioHero.tsx
-import React34, { useEffect as useEffect15, useRef as useRef10 } from "react";
+import React34, { useEffect as useEffect15, useRef as useRef9 } from "react";
 import Link8 from "next/link";
 import Image8 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon22 } from "@hugeicons/react";
 import { ArrowRight01Icon as ArrowRight01Icon7 } from "@hugeicons/core-free-icons";
 var useScrollAnimation = () => {
-  const elementRef = useRef10(null);
+  const elementRef = useRef9(null);
   useEffect15(() => {
     const el = elementRef.current;
     if (!el) return;
@@ -3620,7 +3488,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 +3499,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 +3532,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 useRef10 } from "react";
 import Image10 from "next/image";
 var MedicalFeatureStatsBlock = ({
   bottomHeadline,
@@ -3673,8 +3541,8 @@ var MedicalFeatureStatsBlock = ({
   trustText,
   stats
 }) => {
-  const [isAnimating, setIsAnimating] = useState23(false);
-  const titleRef = useRef11(null);
+  const [isAnimating, setIsAnimating] = useState24(false);
+  const titleRef = useRef10(null);
   useEffect16(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -3714,12 +3582,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 +3607,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 +3677,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,9 +3850,9 @@ 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 toast9 from "react-hot-toast";
 import Confetti from "react-confetti";
 import { useWindowSize } from "react-use";
 import { HugeiconsIcon as HugeiconsIcon27 } from "@hugeicons/react";
@@ -3999,7 +3867,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 +3885,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 || [];
@@ -4039,7 +3907,7 @@ var UniversalRewardPage = ({
       const res = await axios.post(selectedReward.endpoint, selectedReward.config);
       if (res.data.success) {
         setShowConfetti(true);
-        toast8.success(res.data.message || "Reward claimed successfully!");
+        toast9.success(res.data.message || "Reward claimed successfully!");
         setSelectedReward(null);
         onRefresh();
         setTimeout(() => {
@@ -4047,7 +3915,7 @@ var UniversalRewardPage = ({
         }, 6e3);
       }
     } catch (error) {
-      toast8.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
+      toast9.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
     } finally {
       setIsClaiming(false);
     }
@@ -4096,8 +3964,8 @@ var UniversalRewardPage = ({
 };
 
 // src/components/UniversalReferralPage.tsx
-import React42, { useState as useState27 } from "react";
-import toast9 from "react-hot-toast";
+import React42, { useState as useState28 } from "react";
+import toast10 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon28 } from "@hugeicons/react";
 import {
   ArrowLeft01Icon as ArrowLeft01Icon10,
@@ -4116,6 +3984,8 @@ var formatDate = (dateInput) => {
 var UniversalReferralPage = ({
   referralCode,
   totalCount,
+  referralCoins = 0,
+  // Default to 0
   referrals,
   isLoading,
   currentPage,
@@ -4130,18 +4000,18 @@ var UniversalReferralPage = ({
     if (!referralCode) return;
     try {
       await navigator.clipboard.writeText(referralCode);
-      toast9.success("Referral code copied!");
+      toast10.success("Referral code copied!");
     } catch {
-      toast9.error("Failed to copy code.");
+      toast10.error("Failed to copy code.");
     }
   };
   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"}` }));
   };
-  return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-2" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between mt-2" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-lg  text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React42.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React42.createElement(ManagedToaster, null), /* @__PURE__ */ React42.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ React42.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: ArrowLeft01Icon10, size: 16 }), " Back")), /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-3xl bg-white w-full" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-4 mb-2" }, /* @__PURE__ */ React42.createElement("div", null, /* @__PURE__ */ React42.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ React42.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between mt-2" }, /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ React42.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React42.createElement("span", { className: "text-lg text-black tracking-widest" }, referralCode)), /* @__PURE__ */ React42.createElement(
     "button",
     {
       onClick: handleCopyCode,
@@ -4149,7 +4019,7 @@ var UniversalReferralPage = ({
       className: "w-10 h-10 rounded-full bg-white flex items-center justify-center text-neutral-500 hover:text-black transition-colors outline-none disabled:opacity-50"
     },
     /* @__PURE__ */ React42.createElement(HugeiconsIcon28, { icon: Copy01Icon4, size: 18 })
-  )), /* @__PURE__ */ React42.createElement("div", { className: "text-[13px]  text-black px-1 mt-2" }, "Total Invited: ", isLoading && !totalCount ? "-" : totalCount)), /* @__PURE__ */ React42.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React42.createElement(PageSpinner5, null) : /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React42.createElement("div", null, referrals.length === 0 ? /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col items-center justify-center py-12 opacity-50" }, /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500 text-center" }, "You haven't referred anyone yet.")) : referrals.map((ref, idx) => /* @__PURE__ */ React42.createElement(
+  )), /* @__PURE__ */ React42.createElement("div", { className: "flex items-center justify-between text-[13px] text-black px-1 mt-2" }, /* @__PURE__ */ React42.createElement("span", null, "Total Invited: ", isLoading && !totalCount ? "-" : totalCount), /* @__PURE__ */ React42.createElement("span", null, "Points: ", isLoading && !referralCoins && referralCoins !== 0 ? "-" : referralCoins))), /* @__PURE__ */ React42.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React42.createElement(PageSpinner5, null) : /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React42.createElement("div", null, referrals.length === 0 ? /* @__PURE__ */ React42.createElement("div", { className: "flex flex-col items-center justify-center py-12 opacity-50" }, /* @__PURE__ */ React42.createElement("p", { className: "text-xs text-neutral-500 text-center" }, "You haven't referred anyone yet.")) : referrals.map((ref, idx) => /* @__PURE__ */ React42.createElement(
     "div",
     {
       key: `${ref.profile.username}-${idx}`,
@@ -4162,8 +4032,8 @@ var UniversalReferralPage = ({
         alt: ref.profile.username,
         name: formatWeb3Name2(ref.profile.web3Name)
       }
-    ), /* @__PURE__ */ React42.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5 pr-4" }, /* @__PURE__ */ React42.createElement("p", { className: "text-[14px]  text-black truncate" }, formatWeb3Name2(ref.profile.web3Name)), /* @__PURE__ */ React42.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, "@", ref.profile.username))),
-    /* @__PURE__ */ React42.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] text-neutral-400" }, "Joined"), /* @__PURE__ */ React42.createElement("span", { className: "text-[12px]  text-black" }, formatDate(ref.joinedAt)))
+    ), /* @__PURE__ */ React42.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5 pr-4" }, /* @__PURE__ */ React42.createElement("p", { className: "text-[14px] text-black truncate" }, formatWeb3Name2(ref.profile.web3Name)), /* @__PURE__ */ React42.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, "@", ref.profile.username))),
+    /* @__PURE__ */ React42.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] text-neutral-400" }, "Joined"), /* @__PURE__ */ React42.createElement("span", { className: "text-[12px] text-black" }, formatDate(ref.joinedAt)))
   ))), /* @__PURE__ */ React42.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React42.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React42.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React42.createElement(
     "button",
     {
@@ -4184,13 +4054,13 @@ 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";
 import {
   ArrowLeft01Icon as ArrowLeft01Icon11,
-  CancelCircleIcon as CancelCircleIcon6,
+  CancelCircleIcon as CancelCircleIcon7,
   Loading03Icon as Loading03Icon18
 } from "@hugeicons/core-free-icons";
 var CheckIcon2 = ({ className = "" }) => /* @__PURE__ */ React43.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__ */ React43.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React43.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -4235,10 +4105,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);
@@ -4345,7 +4215,7 @@ var UniversalCardActionPage = ({
       onClick: () => setSelectedTier(null),
       className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
     },
-    /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: CancelCircleIcon6, size: 18 })
+    /* @__PURE__ */ React43.createElement(HugeiconsIcon29, { icon: CancelCircleIcon7, size: 18 })
   )), /* @__PURE__ */ React43.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 relative z-10" }, /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React43.createElement("p", { className: "text-2xl text-black mb-1" }, selectedTier.priceUSD === 0 ? "Free" : `$${selectedTier.priceUSD.toFixed(2)}`), /* @__PURE__ */ React43.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full bg-neutral-100 text-black mt-1` }, formatTierName(selectedTier.tierName), " ", formatTierName(cardType))), /* @__PURE__ */ React43.createElement("div", { className: "grid grid-cols-1 gap-y-6 mb-8 mt-4" }, /* @__PURE__ */ React43.createElement("div", null, /* @__PURE__ */ React43.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Action"), /* @__PURE__ */ React43.createElement("span", { className: "text-[13px] text-black " }, intendedAction === "upgrade" ? `Upgrade to ${formatTierName(selectedTier.tierName)}` : `Pre-order Card`)), intendedAction === "pre_order" && selectedTier.priceUSD > 0 && /* @__PURE__ */ React43.createElement("div", null, /* @__PURE__ */ React43.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Payment Notice"), /* @__PURE__ */ React43.createElement("span", { className: "text-[12px] text-neutral-600 leading-relaxed block" }, "By confirming, $", selectedTier.priceUSD.toFixed(2), " will be securely deducted from your USD asset balance to guarantee your order."))), /* @__PURE__ */ React43.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React43.createElement(
     ThreeDActionButton,
     {
@@ -4378,9 +4248,9 @@ 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";
+import { CancelCircleIcon as CancelCircleIcon8 } from "@hugeicons/core-free-icons";
 var PinDialerBottomSheet = ({
   isOpen,
   title = "Action Required",
@@ -4388,7 +4258,7 @@ var PinDialerBottomSheet = ({
   onClose,
   onComplete
 }) => {
-  const [pin, setPin] = useState29("");
+  const [pin, setPin] = useState30("");
   useEffect17(() => {
     setPin("");
   }, [isOpen]);
@@ -4415,7 +4285,7 @@ var PinDialerBottomSheet = ({
       disabled: isVerifying,
       className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50"
     },
-    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: CancelCircleIcon7, size: 20 })
+    /* @__PURE__ */ React44.createElement(HugeiconsIcon30, { icon: CancelCircleIcon8, size: 20 })
   )), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col px-6 pb-6 pt-2 relative" }, /* @__PURE__ */ React44.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6" }, /* @__PURE__ */ React44.createElement(
     TextInput,
     {