@retinalabsllc/zairusjs 15.0.85 → 15.0.95

package/dist/index.js

@@ -370,12 +370,143 @@ var Header = ({
 };
 
 // src/components/PipleAuth.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
 var import_react_hot_toast = __toESM(require("react-hot-toast"));
 var import_react_google_recaptcha_v3 = require("react-google-recaptcha-v3");
 var import_browser = require("@simplewebauthn/browser");
-var InputSpinner = () => /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react6.default.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
+var import_react6 = __toESM(require("react"));
+var InputSpinner = () => /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react6.default.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] = (0, import_react6.useState)(false);
+  return /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-2 flex-1 w-full", onClick }, label && /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-2 flex-1 w-full" }, label && /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-1.5 flex-1 w-full" }, label && /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, label), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick: onCountryClick,
+    className: "flex items-center gap-1.5 outline-none hover:opacity-80 transition-opacity"
+  },
+  /* @__PURE__ */ import_react6.default.createElement(FlagImage, { countryCode: selectedCountry.code }),
+  /* @__PURE__ */ import_react6.default.createElement("span", { className: "text-sm text-black font-medium pl-1" }, selectedCountry.dialCode),
+  /* @__PURE__ */ import_react6.default.createElement("svg", { className: "w-3 h-3 text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react6.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
+), /* @__PURE__ */ import_react6.default.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__ */ import_react7.default.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__ */ import_react7.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute inset-0", onClick: onClose }), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(
+    "button",
+    {
+      onClick: onClose,
+      className: "absolute top-4 right-4 p-2 text-neutral-700 hover:text-neutral-400 transition-colors outline-none"
+    },
+    /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("path", { d: "M18 6 6 18" }), /* @__PURE__ */ import_react7.default.createElement("path", { d: "m6 6 12 12" }))
+  ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-6 sm:p-8" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-6 mt-2" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-xl text-black tracking-tight mb-2" }, "Select Country"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[13px] text-neutral-500 leading-relaxed" }, "Choose your region to continue.")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-2" }, SUPPORTED_COUNTRIES.map((c) => /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(FlagImage, { countryCode: c.code }),
+    /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm text-black flex-1 font-medium" }, c.name),
+    /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-sm text-neutral-500 font-mono" }, c.dialCode)
+  ))))));
+};
 function AuthFormInner({
   companyName,
   workspaceLabel = "Workspace",
@@ -391,29 +522,27 @@ function AuthFormInner({
   const searchParams = (0, import_navigation2.useSearchParams)();
   const redirectUrl = searchParams.get("redirect") || defaultRedirectPath;
   const captchaContext = useRecaptcha ? (0, import_react_google_recaptcha_v3.useGoogleReCaptcha)() : null;
-  const [mode, setMode] = (0, import_react6.useState)("LOGIN");
-  const [step, setStep] = (0, import_react6.useState)("INPUT");
-  const getInitialSignupStep = () => {
-    return "INVITATION";
-  };
-  const [signupStep, setSignupStep] = (0, import_react6.useState)(getInitialSignupStep());
-  const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
-  const [countdown, setCountdown] = (0, import_react6.useState)(0);
-  const [invitationCode, setInvitationCode] = (0, import_react6.useState)("");
-  const [emailId, setEmailId] = (0, import_react6.useState)("");
-  const [firstName, setFirstName] = (0, import_react6.useState)("");
-  const [lastName, setLastName] = (0, import_react6.useState)("");
-  const [orgName, setOrgName] = (0, import_react6.useState)("");
-  const [agreedToTerms, setAgreedToTerms] = (0, import_react6.useState)(false);
-  const [userHas2FA, setUserHas2FA] = (0, import_react6.useState)(false);
-  const [userHasPasskey, setUserHasPasskey] = (0, import_react6.useState)(false);
-  const [authOptions, setAuthOptions] = (0, import_react6.useState)(null);
-  const [otp, setOtp] = (0, import_react6.useState)(["", "", "", "", "", ""]);
-  const inputRefs = (0, import_react6.useRef)([]);
+  const [mode, setMode] = (0, import_react7.useState)("LOGIN");
+  const [step, setStep] = (0, import_react7.useState)("INPUT");
+  const getInitialSignupStep = () => "INVITATION";
+  const [signupStep, setSignupStep] = (0, import_react7.useState)(getInitialSignupStep());
+  const [isSubmitting, setIsSubmitting] = (0, import_react7.useState)(false);
+  const [countdown, setCountdown] = (0, import_react7.useState)(0);
+  const [invitationCode, setInvitationCode] = (0, import_react7.useState)("");
+  const [phoneNumber, setPhoneNumber] = (0, import_react7.useState)("");
+  const [selectedCountry, setSelectedCountry] = (0, import_react7.useState)(SUPPORTED_COUNTRIES[0]);
+  const [isCountryDialogOpen, setIsCountryDialogOpen] = (0, import_react7.useState)(false);
+  const [firstName, setFirstName] = (0, import_react7.useState)("");
+  const [lastName, setLastName] = (0, import_react7.useState)("");
+  const [orgName, setOrgName] = (0, import_react7.useState)("");
+  const [agreedToTerms, setAgreedToTerms] = (0, import_react7.useState)(false);
+  const [userHasPasskey, setUserHasPasskey] = (0, import_react7.useState)(false);
+  const [authOptions, setAuthOptions] = (0, import_react7.useState)(null);
+  const [otp, setOtp] = (0, import_react7.useState)(["", "", "", "", "", ""]);
+  const inputRefs = (0, import_react7.useRef)([]);
   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, "");
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (countdown > 0) {
       const timer = setTimeout(() => setCountdown(countdown - 1), 1e3);
       return () => clearTimeout(timer);
@@ -442,6 +571,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) {
@@ -456,7 +589,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,
@@ -465,10 +599,9 @@ function AuthFormInner({
         recaptchaToken
       });
       if (res.success) {
-        setUserHas2FA(!!res.has2FA);
         setUserHasPasskey(!!res.hasPasskey);
         if (res.passkeyOptions) setAuthOptions(res.passkeyOptions);
-        import_react_hot_toast.default.success(res.has2FA ? "Security check required" : "Verification code sent");
+        import_react_hot_toast.default.success(res.needsPukSetup ? "Verification code sent" : "Security check required");
         setStep("OTP");
         setCountdown(60);
       } else {
@@ -484,7 +617,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 {
@@ -503,7 +639,11 @@ function AuthFormInner({
     setIsSubmitting(true);
     try {
       const credentialResponse = await (0, import_browser.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 {
@@ -519,35 +659,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__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, "Don't have an account? ", /* @__PURE__ */ import_react6.default.createElement("button", { type: "button", onClick: () => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+    CountrySelectorDialog,
+    {
+      isOpen: isCountryDialogOpen,
+      onClose: () => setIsCountryDialogOpen(false),
+      onSelect: setSelectedCountry
+    }
+  ), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-[13px] text-neutral-500" }, mode === "LOGIN" ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Don't have an account? ", /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", onClick: () => {
     setMode("SIGNUP");
     setSignupStep(getInitialSignupStep());
-  }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, "Already have an account? ", /* @__PURE__ */ import_react6.default.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
+  }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, "Already have an account? ", /* @__PURE__ */ import_react7.default.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ import_react7.default.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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ import_react6.default.createElement(
+  } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       type: "text",
@@ -557,10 +704,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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react6.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react6.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react7.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "space-y-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement(
+    PhoneInput,
+    {
+      label: "Phone Number",
+      value: phoneNumber,
+      onChange: setPhoneNumber,
+      selectedCountry,
+      onCountryClick: () => setIsCountryDialogOpen(true),
+      disabled: isSubmitting
+    }
+  ), mode === "SIGNUP" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react7.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react7.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react7.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react7.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter your 6-digit security passcode or OTP.")), /* @__PURE__ */ import_react7.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
-  } }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react6.default.createElement(
+  } }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react7.default.createElement(
     "input",
     {
       key: index,
@@ -577,27 +734,27 @@ 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__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: otp.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Verify Code")), userHasPasskey && /* @__PURE__ */ import_react6.default.createElement("div", { className: "pt-6 " }, /* @__PURE__ */ import_react6.default.createElement(
+  ))), /* @__PURE__ */ import_react7.default.createElement(ThreeDActionButton, { type: "submit", disabled: otp.join("").length < 6, isLoading: isSubmitting, className: "w-full" }, "Verify Code")), userHasPasskey && /* @__PURE__ */ import_react7.default.createElement("div", { className: "pt-6" }, /* @__PURE__ */ import_react7.default.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__ */ import_react6.default.createElement(import_react_google_recaptcha_v3.GoogleReCaptchaProvider, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ import_react6.default.createElement(import_react6.Suspense, { fallback: /* @__PURE__ */ import_react6.default.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)) }, /* @__PURE__ */ import_react6.default.createElement(AuthFormInner, { ...props })));
+    return /* @__PURE__ */ import_react7.default.createElement(import_react_google_recaptcha_v3.GoogleReCaptchaProvider, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, { fallback: /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ import_react7.default.createElement(InputSpinner2, null)) }, /* @__PURE__ */ import_react7.default.createElement(AuthFormInner, { ...props })));
   }
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.Suspense, { fallback: /* @__PURE__ */ import_react6.default.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ import_react6.default.createElement(InputSpinner, null)) }, /* @__PURE__ */ import_react6.default.createElement(AuthFormInner, { ...props }));
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, { fallback: /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ import_react7.default.createElement(InputSpinner2, null)) }, /* @__PURE__ */ import_react7.default.createElement(AuthFormInner, { ...props }));
 };
 
 // src/components/Footer.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_link3 = __toESM(require("next/link"));
-var import_react8 = require("@hugeicons/react");
+var import_react9 = require("@hugeicons/react");
 var Footer = ({
   description,
   columns,
@@ -605,20 +762,20 @@ var Footer = ({
   copyrightText,
   topSection
 }) => {
-  const [openCol, setOpenCol] = (0, import_react7.useState)(null);
+  const [openCol, setOpenCol] = (0, import_react8.useState)(null);
   const toggleColumn = (idx) => {
     setOpenCol(openCol === idx ? null : idx);
   };
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ import_react7.default.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ import_react7.default.createElement("img", { src: "https://retinalabs.company/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ import_react7.default.createElement("img", { src: "https://retinalabs.company/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[11px]  text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ import_react7.default.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ import_react7.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react7.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react7.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ import_react7.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ import_react8.default.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ import_react8.default.createElement("img", { src: "https://retinalabs.company/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ import_react8.default.createElement("img", { src: "https://retinalabs.company/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px]  text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ import_react8.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ import_react8.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react8.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ import_react8.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ import_react8.default.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__ */ import_react7.default.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ import_react7.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ import_react8.default.createElement(
       "button",
       {
         onClick: () => toggleColumn(idx),
         className: "w-full flex items-center justify-between py-5 text-left outline-none"
       },
-      /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
-      /* @__PURE__ */ import_react7.default.createElement(
+      /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
+      /* @__PURE__ */ import_react8.default.createElement(
         "svg",
         {
           className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
@@ -626,10 +783,10 @@ var Footer = ({
           viewBox: "0 0 24 24",
           stroke: "currentColor"
         },
-        /* @__PURE__ */ import_react7.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
+        /* @__PURE__ */ import_react8.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
       )
-    ), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react7.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react7.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ import_react7.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
-  })))), /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react8.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ import_react8.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
+  })))), /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ import_react8.default.createElement(
     "a",
     {
       key: idx,
@@ -638,38 +795,38 @@ var Footer = ({
       rel: "noopener noreferrer",
       className: "text-neutral-400 hover:text-black transition-colors"
     },
-    /* @__PURE__ */ import_react7.default.createElement(import_react8.HugeiconsIcon, { icon: social.icon, size: 20 })
+    /* @__PURE__ */ import_react8.default.createElement(import_react9.HugeiconsIcon, { icon: social.icon, size: 20 })
   ))))))));
 };
 
 // src/components/MobileNav.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_link4 = __toESM(require("next/link"));
 var import_navigation3 = require("next/navigation");
-var import_react10 = require("@hugeicons/react");
+var import_react11 = require("@hugeicons/react");
 var MobileNav = ({ items }) => {
   const pathname = (0, import_navigation3.usePathname)();
   if (!items || items.length === 0) return null;
   const pathMatches = items.some((item) => {
     return item.href === "/" || item.href === "/app" ? pathname === "/" || pathname === "/app" : pathname === item.href || pathname?.startsWith(`${item.href}/`);
   });
-  return /* @__PURE__ */ import_react9.default.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__ */ import_react9.default.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__ */ import_react10.default.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__ */ import_react10.default.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__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(
       import_link4.default,
       {
         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__ */ import_react9.default.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ import_react9.default.createElement(
-        import_react10.HugeiconsIcon,
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: `transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400 hover:text-neutral-600"}` }, /* @__PURE__ */ import_react10.default.createElement(
+        import_react11.HugeiconsIcon,
         {
           icon: item.icon,
           size: 20
         }
       )),
-      /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement(
         "span",
         {
           className: `text-[9px] tracking-wide transition-colors duration-300  ${isActive ? "text-black" : "text-neutral-400"}`
@@ -685,10 +842,10 @@ var import_react15 = __toESM(require("react"));
 var import_react_hot_toast3 = __toESM(require("react-hot-toast"));
 
 // src/components/ManagedToaster.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_react_hot_toast2 = require("react-hot-toast");
 var ManagedToaster = () => {
-  return /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     import_react_hot_toast2.Toaster,
     {
       position: "top-right",
@@ -719,56 +876,6 @@ var ManagedToaster = () => {
   );
 };
 
-// src/components/TextInput.tsx
-var import_react12 = __toESM(require("react"));
-var TextInput = ({
-  label,
-  value,
-  onChange,
-  placeholder,
-  maxLength,
-  disabled,
-  readOnly,
-  type = "text",
-  onClick
-}) => /* @__PURE__ */ import_react12.default.createElement("div", { className: "space-y-2 flex-1 w-full", onClick }, label && /* @__PURE__ */ import_react12.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement("div", { className: "space-y-2 flex-1 w-full" }, label && /* @__PURE__ */ import_react12.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ import_react12.default.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
 var import_react13 = __toESM(require("react"));
 var import_react14 = require("@hugeicons/react");
@@ -828,7 +935,7 @@ var Banner = ({
 // src/components/UniversalOrganizationPage.tsx
 var import_react16 = require("@hugeicons/react");
 var import_core_free_icons3 = require("@hugeicons/core-free-icons");
-var InputSpinner2 = () => /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.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__ */ import_react15.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react15.default.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,
@@ -960,7 +1067,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__ */ import_react15.default.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-8 shrink-0 whitespace-nowrap" }, slugPrefixUrl), /* @__PURE__ */ import_react15.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react15.default.createElement(InputSpinner2, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react15.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react15.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react15.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react15.default.createElement(
+  ), /* @__PURE__ */ import_react15.default.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-8 shrink-0 whitespace-nowrap" }, slugPrefixUrl), /* @__PURE__ */ import_react15.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react15.default.createElement(InputSpinner3, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react15.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react15.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react15.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react15.default.createElement(
     ThreeDActionButton,
     {
       type: "submit",
@@ -992,14 +1099,14 @@ var import_core_free_icons4 = require("@hugeicons/core-free-icons");
 var UniversalProfileSettings = ({
   initialFirstName,
   initialLastName,
-  email,
+  phoneNumber,
   accountStatus = "GOOD",
   memberSince,
   isReadOnly = false,
   bannerProps,
-  hasPin = false,
-  isPinLoading = false,
-  onSavePin,
+  hasPasscode = false,
+  isPasscodeLoading = false,
+  onSavePasscode,
   onSaveProfile,
   onBack
 }) => {
@@ -1009,11 +1116,11 @@ var UniversalProfileSettings = ({
   const [firstName, setFirstName] = (0, import_react17.useState)(initialFirstName);
   const [lastName, setLastName] = (0, import_react17.useState)(initialLastName);
   const [isSubmitting, setIsSubmitting] = (0, import_react17.useState)(false);
-  const [isPinModalOpen, setIsPinModalOpen] = (0, import_react17.useState)(false);
-  const [oldPin, setOldPin] = (0, import_react17.useState)("");
-  const [newPin, setNewPin] = (0, import_react17.useState)("");
-  const [confirmPin, setConfirmPin] = (0, import_react17.useState)("");
-  const [isPinSubmitting, setIsPinSubmitting] = (0, import_react17.useState)(false);
+  const [isPasscodeModalOpen, setIsPasscodeModalOpen] = (0, import_react17.useState)(false);
+  const [oldPasscode, setOldPasscode] = (0, import_react17.useState)("");
+  const [newPasscode, setNewPasscode] = (0, import_react17.useState)("");
+  const [confirmPasscode, setConfirmPasscode] = (0, import_react17.useState)("");
+  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = (0, import_react17.useState)(false);
   (0, import_react17.useEffect)(() => {
     setFirstName(initialFirstName || "");
     setLastName(initialLastName || "");
@@ -1042,40 +1149,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 import_react_hot_toast4.default.error("Old PIN must be exactly 4-digits.");
-    if (newPin.length !== 4) return import_react_hot_toast4.default.error("New PIN must be exactly 4-digits.");
-    if (newPin !== confirmPin) return import_react_hot_toast4.default.error("New PINs do not match.");
-    setIsPinSubmitting(true);
+    if (!onSavePasscode) return;
+    if (hasPasscode && oldPasscode.length !== 6) return import_react_hot_toast4.default.error("Old Passcode must be exactly 6-digits.");
+    if (newPasscode.length !== 6) return import_react_hot_toast4.default.error("New Passcode must be exactly 6-digits.");
+    if (newPasscode !== confirmPasscode) return import_react_hot_toast4.default.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) {
-        import_react_hot_toast4.default.success(res.message || "PIN updated successfully.");
-        closePinModal();
+        import_react_hot_toast4.default.success(res.message || "Passcode updated successfully.");
+        closePasscodeModal();
       } else {
-        import_react_hot_toast4.default.error(res.error || "Failed to update PIN.");
+        import_react_hot_toast4.default.error(res.error || "Failed to update Passcode.");
       }
     } catch (error) {
       import_react_hot_toast4.default.error("Uh oh! Something went wrong.");
     } finally {
-      setIsPinSubmitting(false);
+      setIsPasscodeSubmitting(false);
     }
   };
   const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
@@ -1088,7 +1195,7 @@ var UniversalProfileSettings = ({
     },
     /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.ArrowLeft01Icon, size: 16 }),
     " Back"
-  )), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("h1", { className: "text-black text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ import_react17.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.CircleLock02Icon, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ import_react17.default.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ import_react17.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react17.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react17.default.createElement(
+  )), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("h1", { className: "text-black text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ import_react17.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.CircleLock02Icon, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ import_react17.default.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ import_react17.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react17.default.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react17.default.createElement(
     TextInput,
     {
       label: "First Name",
@@ -1109,17 +1216,17 @@ var UniversalProfileSettings = ({
   ))), /* @__PURE__ */ import_react17.default.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ import_react17.default.createElement(
     TextInput,
     {
-      label: "Email ID",
-      value: email,
+      label: "Registered Phone Number",
+      value: phoneNumber,
       onChange: () => {
       },
       disabled: true
     }
-  ), /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ import_react17.default.createElement(
+  ), /* @__PURE__ */ import_react17.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your primary number, please contact support.")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ import_react17.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.LockKeyIcon, size: 17, className: "text-black" })
@@ -1143,48 +1250,48 @@ var UniversalProfileSettings = ({
       className: "min-w-32 w-full sm:w-auto"
     },
     "Save Changes"
-  ))))), isPinModalOpen && /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePinModal }), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react17.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ import_react17.default.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react17.default.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.Loading03Icon, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ import_react17.default.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-6" }, hasPin && /* @__PURE__ */ import_react17.default.createElement(
+  ))))), isPasscodeModalOpen && /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePasscodeModal }), /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react17.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPasscode ? "Change Passcode" : "Create Security Passcode"), /* @__PURE__ */ import_react17.default.createElement("button", { onClick: closePasscodeModal, disabled: isPasscodeSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react17.default.createElement("div", { className: "p-6" }, isPasscodeLoading ? /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ import_react17.default.createElement(import_react18.HugeiconsIcon, { icon: import_core_free_icons4.Loading03Icon, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ import_react17.default.createElement("form", { onSubmit: handlePasscodeSubmit, className: "flex flex-col gap-6" }, hasPasscode && /* @__PURE__ */ import_react17.default.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__ */ import_react17.default.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__ */ import_react17.default.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__ */ import_react17.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react17.default.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"
   ))))))));
 };
 
@@ -1503,48 +1610,15 @@ var UniversalTransactionPage = ({
 var import_react25 = __toESM(require("react"));
 var import_react26 = require("@hugeicons/react");
 var import_core_free_icons8 = require("@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__ */ import_react25.default.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] text-neutral-800 mr-0.5 " }, currencySymbol), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl text-neutral-800 tracking-tight " }, displayStr), /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("span", { className: "flex items-baseline mt-1" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] text-white mr-0.5 " }, currencySymbol), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-xl text-white tracking-tight " }, displayStr), /* @__PURE__ */ import_react25.default.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,
@@ -1608,7 +1682,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__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.Notification01Icon, size: 20, className: "text-black" }),
     hasUnreadNotifs && /* @__PURE__ */ import_react25.default.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
@@ -1619,35 +1693,44 @@ var UniversalHomeView = ({
       className: "text-neutral-400 hover:text-white transition-colors outline-none"
     },
     /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: isBalanceHidden ? import_core_free_icons8.ViewIcon : import_core_free_icons8.ViewOffSlashIcon, size: 16 })
-  )), /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-3 w-full" }, primaryAction && /* @__PURE__ */ import_react25.default.createElement(
+  )), /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center w-full" }, calculatorAction && /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement(
-    "button",
+    calculatorAction.label || "Rate Calculator"
+  )))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white mb-1" }, "Cashback"), renderKMT2(cashbackValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-45 sm:h-50" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black mb-1" }, "Rewards"), renderKMT(rewardsValue, balanceCurrency)), /* @__PURE__ */ import_react25.default.createElement(
-    "img",
+    /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white font-medium" }, "Buy Crypto"), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 border border-white/10 flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowUpRight01Icon, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black font-medium" }, "Referral"), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 border border-black/5 flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowRight01Icon, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ import_react25.default.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__ */ import_react25.default.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react25.default.createElement(
     UniversalTransactionPage,
     {
       ...transactionsProps,
@@ -1965,6 +2048,7 @@ var UniversalWalletPage = ({
 // src/components/UniversalCardPage.tsx
 var import_react31 = __toESM(require("react"));
 var import_navigation4 = require("next/navigation");
+var import_react_hot_toast7 = __toESM(require("react-hot-toast"));
 var import_react32 = require("@hugeicons/react");
 var import_core_free_icons11 = require("@hugeicons/core-free-icons");
 var UniversalCardPage = ({
@@ -1972,10 +2056,8 @@ var UniversalCardPage = ({
   actionPath = "/app/cards/action/",
   onReveal,
   onFreeze,
-  onSetLimits,
   onDelete,
-  onFundCard,
-  onCreateCard
+  onFundCard
 }) => {
   const router = (0, import_navigation4.useRouter)();
   const sortedCards = import_react31.default.useMemo(() => {
@@ -1989,7 +2071,6 @@ var UniversalCardPage = ({
   const activeCard = sortedCards[activeTabIndex];
   const [isBgLoaded, setIsBgLoaded] = (0, import_react31.useState)(false);
   const [isFreezing, setIsFreezing] = (0, import_react31.useState)(false);
-  const [isOverlayActionLoading, setIsOverlayActionLoading] = (0, import_react31.useState)(false);
   const [showDeleteDialog, setShowDeleteDialog] = (0, import_react31.useState)(false);
   const [isDeleting, setIsDeleting] = (0, import_react31.useState)(false);
   (0, import_react31.useEffect)(() => {
@@ -1997,134 +2078,67 @@ var UniversalCardPage = ({
     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__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.PlusSignIcon, size: 18 })
-    ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "p-6 w-full max-w-md mx-auto text-center" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "mb-8 flex justify-center" }, /* @__PURE__ */ import_react31.default.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        className: "w-12 h-12 fill-neutral-100"
-      },
-      /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement("h1", { className: "text-xl text-black tracking-tight mb-4" }, "No cards available"), /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "p-6 w-full max-w-md mx-auto text-center" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "mb-8 flex justify-center" }, /* @__PURE__ */ import_react31.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "w-12 h-12 fill-neutral-100" }, /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement("h1", { className: "text-xl text-black tracking-tight mb-4" }, "No cards available"), /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), onCreateCard && /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), sortedCards.length > 1 && /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.PlusSignIcon, size: 18 })
-  ), sortedCards.length > 1 && /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "w-full pt-2 pb-2 flex justify-center" }, /* @__PURE__ */ import_react31.default.createElement(
-    "div",
+    formatTabLabel(tab.type)
+  )))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full pt-2 pb-6 flex justify-center" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative w-full max-w-85", style: { height: 179 } }, !isBgLoaded && /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 28, className: "animate-spin text-black" })), showActionOverlay && /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement(
+    "button",
     {
-      className: "relative w-full max-w-85",
-      style: { height: 179 }
-    },
-    !isBgLoaded && /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 28, className: "animate-spin text-black" })),
-    showActionOverlay && /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 16, className: `animate-spin ${activeCard.contentDark ? "text-black" : "text-white"}` }) : "Card Frozen"
-    )),
-    /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement(
-      "div",
-      {
-        className: "absolute inset-0 bg-cover bg-center",
-        style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
-      }
-    ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.prepaid && /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, "Card Tier"), /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[11px] tracking-widest font-medium  ${activeCard.contentDark ? "text-black" : "text-white"}` }, activeCard.tier))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[9px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/60"}` }, activeCard.prepaid ? "Card Balance" : "Card Tier"), /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.createElement(
-      "img",
-      {
-        src: activeCard.networkLogoSrc,
-        alt: "Network Logo",
-        className: "h-7 w-auto max-w-20 object-contain opacity-90"
-      }
-    ))))
-  )), activeCard.bannerProps ? /* @__PURE__ */ import_react31.default.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ import_react31.default.createElement(Banner, { ...activeCard.bannerProps })) : isPreordered ? /* @__PURE__ */ import_react31.default.createElement("div", { className: "mb-6 w-full mt-2" }, /* @__PURE__ */ import_react31.default.createElement(
-    Banner,
+      className: `px-6 py-2 text-[11px] rounded-full transition-all outline-none ${buttonClasses}`
+    },
+    "Activate Card"
+  ), isFrozen && /* @__PURE__ */ import_react31.default.createElement("div", { className: `px-6 py-2.5 text-[12px] rounded-full flex items-center gap-2 ${buttonClasses}` }, "Card Frozen")), /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, activeCard.prepaid && /* @__PURE__ */ import_react31.default.createElement(
+  ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.networkLogoSrc && /* @__PURE__ */ import_react31.default.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-7 w-auto max-w-20 object-contain opacity-90" })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[16px] tracking-widest font-medium ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance))))))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react31.default.createElement(
     MenuRow,
     {
       icon: import_core_free_icons11.PlusSignIcon,
       title: "Fund Card",
-      subtitle: "Add money to card",
+      subtitle: "Add money to card balance",
       onClick: () => {
         if (!actionsDisabled && onFundCard) onFundCard(activeCard.id);
       },
@@ -2137,9 +2151,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__ */ import_react31.default.createElement(
     MenuRow,
@@ -2151,19 +2165,7 @@ var UniversalCardPage = ({
       isToggle: true,
       toggleState: isFrozen,
       toggleLoading: isFreezing,
-      disabled: freezeDisabled,
-      isLast: activeCard.prepaid
-    }
-  ), !activeCard.prepaid && /* @__PURE__ */ import_react31.default.createElement(
-    MenuRow,
-    {
-      icon: import_core_free_icons11.SlidersHorizontalIcon,
-      title: "Set Limits",
-      subtitle: "Set card limits",
-      onClick: () => {
-        if (!actionsDisabled && onSetLimits) onSetLimits(activeCard.id);
-      },
-      disabled: actionsDisabled,
+      disabled: isUnactivated || isDead,
       isLast: true
     }
   )), /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react31.default.createElement(
@@ -2183,7 +2185,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,
@@ -2192,28 +2194,7 @@ 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__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon, size: 16, className: iconColor })),
-  /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react31.default.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
-  isToggle ? /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.ArrowRight01Icon, 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__ */ import_react31.default.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__ */ import_react31.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon, size: 16, className: "text-black" })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[13px] truncate text-black" }, title), /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)), isToggle ? /* @__PURE__ */ import_react31.default.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__ */ import_react31.default.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__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.ArrowRight01Icon, size: 18, className: "text-neutral-400 shrink-0 ml-2" }));
 
 // src/components/UniversalProfilePage.tsx
 var import_react33 = __toESM(require("react"));
@@ -2464,7 +2445,7 @@ var import_image2 = __toESM(require("next/image"));
 
 // src/components/WaitlistDialog.tsx
 var import_react37 = __toESM(require("react"));
-var import_react_hot_toast7 = require("react-hot-toast");
+var import_react_hot_toast8 = require("react-hot-toast");
 var WaitlistDialog = ({ isOpen, onClose }) => {
   const [email, setEmail] = (0, import_react37.useState)("");
   const [isLoading, setIsLoading] = (0, import_react37.useState)(false);
@@ -2472,7 +2453,7 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      import_react_hot_toast7.toast.error("Please enter a valid email address.");
+      import_react_hot_toast8.toast.error("Please enter a valid email address.");
       return;
     }
     setIsLoading(true);
@@ -2486,14 +2467,14 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
       });
       const data = await response.json();
       if (response.ok && data.success) {
-        import_react_hot_toast7.toast.success(data.message || "You've been added to the waitlist!");
+        import_react_hot_toast8.toast.success(data.message || "You've been added to the waitlist!");
         setEmail("");
         onClose();
       } else {
-        import_react_hot_toast7.toast.error(data.error || "Something went wrong. Please try again.");
+        import_react_hot_toast8.toast.error(data.error || "Something went wrong. Please try again.");
       }
     } catch (error) {
-      import_react_hot_toast7.toast.error("Network error. Please check your connection.");
+      import_react_hot_toast8.toast.error("Network error. Please check your connection.");
     } finally {
       setIsLoading(false);
     }
@@ -2742,105 +2723,28 @@ var AppBento2 = ({ tagline, headline, features }) => {
 
 // src/components/UniversalSecurityPage.tsx
 var import_react41 = __toESM(require("react"));
-var import_react_hot_toast8 = __toESM(require("react-hot-toast"));
+var import_react_hot_toast9 = __toESM(require("react-hot-toast"));
 var import_react42 = require("@hugeicons/react");
 var import_core_free_icons14 = require("@hugeicons/core-free-icons");
 var import_browser2 = require("@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] = (0, import_react41.useState)(false);
-  const [show2FADisableModal, setShow2FADisableModal] = (0, import_react41.useState)(false);
   const [showPasskeyModal, setShowPasskeyModal] = (0, import_react41.useState)(false);
-  const [twoFaSecret, setTwoFaSecret] = (0, import_react41.useState)("");
-  const [twoFaQr, setTwoFaQr] = (0, import_react41.useState)("");
-  const [isFetchingSetup, setIsFetchingSetup] = (0, import_react41.useState)(false);
-  const [otp, setOtp] = (0, import_react41.useState)(Array(6).fill(""));
   const [isSubmitting, setIsSubmitting] = (0, import_react41.useState)(false);
-  const inputRefs = (0, import_react41.useRef)([]);
-  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);
-        import_react_hot_toast8.default.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();
-        import_react_hot_toast8.default.success("Secret copied to clipboard");
-      } catch (err) {
-        import_react_hot_toast8.default.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) {
-        import_react_hot_toast8.default.error("Failed to initialize 2FA setup");
-      } finally {
-        setIsFetchingSetup(false);
-      }
-    }
-  };
+  const [isPasscodeModalOpen, setIsPasscodeModalOpen] = (0, import_react41.useState)(false);
+  const [oldPasscode, setOldPasscode] = (0, import_react41.useState)("");
+  const [newPasscode, setNewPasscode] = (0, import_react41.useState)("");
+  const [confirmPasscode, setConfirmPasscode] = (0, import_react41.useState)("");
+  const [isPasscodeSubmitting, setIsPasscodeSubmitting] = (0, import_react41.useState)(false);
   const handleTogglePasskey = () => {
     if (isPasskeyLoading) return;
     if (hasPasskey) {
@@ -2849,38 +2753,40 @@ var UniversalSecurityPage = ({
       setShowPasskeyModal(true);
     }
   };
-  const submitEnable2FA = async (code) => {
-    if (!onVerifyAndEnable2FA) return;
-    setIsSubmitting(true);
-    try {
-      const res = await onVerifyAndEnable2FA(code);
-      if (res.success) {
-        import_react_hot_toast8.default.success("2FA Enabled Successfully");
-        setShow2FASetupModal(false);
-      } else {
-        import_react_hot_toast8.default.error("Invalid verification code");
-      }
-    } catch (error) {
-      import_react_hot_toast8.default.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 import_react_hot_toast9.default.error("Old Passcode must be exactly 6-digits.");
+    if (newPasscode.length !== 6) return import_react_hot_toast9.default.error("New Passcode must be exactly 6-digits.");
+    if (newPasscode !== confirmPasscode) return import_react_hot_toast9.default.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) {
-        import_react_hot_toast8.default.success("2FA Disabled");
-        setShow2FADisableModal(false);
+        import_react_hot_toast9.default.success(res.message || "Passcode updated successfully.");
+        closePasscodeModal();
       } else {
-        import_react_hot_toast8.default.error("Invalid verification code");
+        import_react_hot_toast9.default.error(res.error || "Failed to update Passcode.");
       }
     } catch (error) {
-      import_react_hot_toast8.default.error("Verification failed");
+      import_react_hot_toast9.default.error("Uh oh! Something went wrong.");
     } finally {
-      setIsSubmitting(false);
+      setIsPasscodeSubmitting(false);
     }
   };
   const submitEnablePasskey = async () => {
@@ -2899,13 +2805,13 @@ var UniversalSecurityPage = ({
       }
       const res = await onVerifyAndEnablePasskey(credentialResponse);
       if (res.success) {
-        import_react_hot_toast8.default.success("Passkey Created Successfully");
+        import_react_hot_toast9.default.success("Passkey Created Successfully");
         setShowPasskeyModal(false);
       } else {
-        import_react_hot_toast8.default.error("Failed to verify device passkey.");
+        import_react_hot_toast9.default.error("Failed to verify device passkey.");
       }
     } catch (error) {
-      import_react_hot_toast8.default.error(error.message || "Passkey setup interrupted.");
+      import_react_hot_toast9.default.error(error.message || "Passkey setup interrupted.");
     } finally {
       setIsSubmitting(false);
     }
@@ -2914,20 +2820,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__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.ArrowLeft01Icon, size: 16 }),
     " Back"
   )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react41.default.createElement(
     MenuRow3,
     {
-      icon: import_core_free_icons14.CircleLockCheck02Icon,
-      title: "Authenticator App",
-      subtitle: "Secure your account with 2FA",
-      onClick: handleToggle2FA,
-      isToggle: true,
-      toggleState: has2FA,
-      toggleLoading: is2FALoading || isFetchingSetup
+      icon: import_core_free_icons14.LockKeyIcon,
+      title: "Security Passcode",
+      subtitle: hasPasscode ? "Change your 6-digit passcode" : "Create a 6-digit passcode",
+      onClick: () => setIsPasscodeModalOpen(true),
+      isToggle: false
     }
   ), /* @__PURE__ */ import_react41.default.createElement(
     MenuRow3,
@@ -2941,86 +2845,49 @@ var UniversalSecurityPage = ({
       toggleLoading: isPasskeyLoading,
       isLast: true
     }
-  ))), show2FASetupModal && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FASetupModal(false) }), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable 2FA"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShow2FASetupModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, twoFaQr ? /* @__PURE__ */ import_react41.default.createElement("img", { src: twoFaQr, alt: "2FA QR Code", className: "w-40 h-40 object-contain rounded-xl border border-neutral-200 p-2" }) : /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-40 h-40 bg-neutral-100 rounded-xl flex items-center justify-center animate-pulse" })), /* @__PURE__ */ import_react41.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-8" }, /* @__PURE__ */ import_react41.default.createElement("div", null, /* @__PURE__ */ import_react41.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Setup Key"), /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-center gap-2 min-w-0 bg-neutral-50 px-3 py-2.5 rounded-xl " }, /* @__PURE__ */ import_react41.default.createElement("span", { className: "text-[13px] font-mono tracking-widest text-black truncate min-w-0 block flex-1" }, twoFaSecret), /* @__PURE__ */ import_react41.default.createElement(
-    "button",
-    {
-      type: "button",
-      onClick: () => handleCopySecret(twoFaSecret),
-      className: "text-neutral-400 hover:text-black transition-colors outline-none shrink-0 ml-2"
-    },
-    /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.Copy01Icon, size: 16 })
-  )))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ import_react41.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the 6-digit code from your app")), /* @__PURE__ */ import_react41.default.createElement("form", { className: "space-y-4", autoComplete: "off", onSubmit: (e) => {
-    e.preventDefault();
-    submitEnable2FA(otp.join(""));
-  } }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex justify-between gap-2 pb-6", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react41.default.createElement(
-    "input",
+  ))), isPasscodeModalOpen && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: closePasscodeModal }), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, hasPasscode ? "Change Passcode" : "Create Security Passcode"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: closePasscodeModal, disabled: isPasscodeSubmitting, className: "text-neutral-400 hover:text-black transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6" }, isPasscodeLoading ? /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.Loading03Icon, size: 28, className: "animate-spin text-neutral-400 mb-4" })) : /* @__PURE__ */ import_react41.default.createElement("form", { onSubmit: handlePasscodeSubmit, className: "flex flex-col gap-6" }, hasPasscode && /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement(
-    ThreeDActionButton,
-    {
-      type: "submit",
-      disabled: otp.join("").length < 6,
-      isLoading: isSubmitting,
-      className: "w-full py-3.5"
-    },
-    "Verify & Enable"
   ), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.Copy01Icon, size: 16, className: "mr-2" }),
-    "Copy Secret Key"
-  ))))), show2FADisableModal && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShow2FADisableModal(false) }), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Disable 2FA"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShow2FADisableModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "text-center mb-8 mt-2" }, /* @__PURE__ */ import_react41.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "Enter the code from your authenticator app to disable 2FA.")), /* @__PURE__ */ import_react41.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
-    e.preventDefault();
-    submitDisable2FA(otp.join(""));
-  } }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement(
+  ), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ import_react41.default.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement(
+    hasPasscode ? "Update Passcode" : "Set Passcode"
+  )))))), showPasskeyModal && /* @__PURE__ */ import_react41.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => !isSubmitting && setShowPasskeyModal(false) }), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react41.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Enable Passkey"), /* @__PURE__ */ import_react41.default.createElement("button", { onClick: () => !isSubmitting && setShowPasskeyModal(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react41.default.createElement("div", { className: "p-6 text-center" }, /* @__PURE__ */ import_react41.default.createElement("h2", { className: "text-lg text-black mb-2 tracking-tight" }, "Simplify your Sign In"), /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.createElement(
     ThreeDActionButton,
     {
       onClick: submitEnablePasskey,
@@ -3048,8 +2915,8 @@ 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__ */ import_react41.default.createElement("div", { className: "w-9 h-9 rounded-full  border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon, size: 16, className: iconColor })),
-  /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react41.default.createElement("p", { className: `text-[14px]  truncate ${titleColor}` }, title), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, subtitle)),
+  /* @__PURE__ */ import_react41.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon, size: 16, className: iconColor })),
+  /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react41.default.createElement("p", { className: `text-[14px] truncate ${titleColor}` }, title), /* @__PURE__ */ import_react41.default.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, subtitle)),
   isToggle ? /* @__PURE__ */ import_react41.default.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__ */ import_react41.default.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__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.Loading03Icon, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ import_react41.default.createElement(import_react42.HugeiconsIcon, { icon: import_core_free_icons14.ArrowRight01Icon, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
 );
 
@@ -3979,7 +3846,7 @@ var UniversalVerificationPage = ({
 // src/components/UniversalRewardPage.tsx
 var import_react67 = __toESM(require("react"));
 var import_axios = __toESM(require("axios"));
-var import_react_hot_toast9 = __toESM(require("react-hot-toast"));
+var import_react_hot_toast10 = __toESM(require("react-hot-toast"));
 var import_react_confetti = __toESM(require("react-confetti"));
 var import_react_use = require("react-use");
 var import_react68 = require("@hugeicons/react");
@@ -4030,7 +3897,7 @@ var UniversalRewardPage = ({
       const res = await import_axios.default.post(selectedReward.endpoint, selectedReward.config);
       if (res.data.success) {
         setShowConfetti(true);
-        import_react_hot_toast9.default.success(res.data.message || "Reward claimed successfully!");
+        import_react_hot_toast10.default.success(res.data.message || "Reward claimed successfully!");
         setSelectedReward(null);
         onRefresh();
         setTimeout(() => {
@@ -4038,7 +3905,7 @@ var UniversalRewardPage = ({
         }, 6e3);
       }
     } catch (error) {
-      import_react_hot_toast9.default.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
+      import_react_hot_toast10.default.error(error.response?.data?.error || "Failed to claim reward. Please try again.");
     } finally {
       setIsClaiming(false);
     }
@@ -4088,7 +3955,7 @@ var UniversalRewardPage = ({
 
 // src/components/UniversalReferralPage.tsx
 var import_react69 = __toESM(require("react"));
-var import_react_hot_toast10 = __toESM(require("react-hot-toast"));
+var import_react_hot_toast11 = __toESM(require("react-hot-toast"));
 var import_react70 = require("@hugeicons/react");
 var import_core_free_icons23 = require("@hugeicons/core-free-icons");
 var PageSpinner5 = () => /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
@@ -4102,6 +3969,8 @@ var formatDate = (dateInput) => {
 var UniversalReferralPage = ({
   referralCode,
   totalCount,
+  referralCoins = 0,
+  // Default to 0
   referrals,
   isLoading,
   currentPage,
@@ -4116,9 +3985,9 @@ var UniversalReferralPage = ({
     if (!referralCode) return;
     try {
       await navigator.clipboard.writeText(referralCode);
-      import_react_hot_toast10.default.success("Referral code copied!");
+      import_react_hot_toast11.default.success("Referral code copied!");
     } catch {
-      import_react_hot_toast10.default.error("Failed to copy code.");
+      import_react_hot_toast11.default.error("Failed to copy code.");
     }
   };
   const AvatarLogo2 = ({ src, alt, name, sizeClass = "w-10 h-10" }) => {
@@ -4127,7 +3996,7 @@ var UniversalReferralPage = ({
     const finalSrc = src || fallbackUrl;
     return /* @__PURE__ */ import_react69.default.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__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Loading03Icon, size: 16, className: "animate-spin text-neutral-400 absolute" }), /* @__PURE__ */ import_react69.default.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__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-2" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between mt-2" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-lg  text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
+  return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react69.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react69.default.createElement("div", { className: "mb-6 flex w-full items-center px-1" }, /* @__PURE__ */ import_react69.default.createElement("button", { onClick: onBackHandler, className: "flex items-center gap-2 text-neutral-500 hover:text-black transition-colors text-[13px] outline-none" }, /* @__PURE__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.ArrowLeft01Icon, size: 16 }), " Back")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-3xl bg-white w-full" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-4 mb-2" }, /* @__PURE__ */ import_react69.default.createElement("div", null, /* @__PURE__ */ import_react69.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, "Your Referrals"), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500" }, "Invite friends and earn rewards when they verify and activate cards.")), /* @__PURE__ */ import_react69.default.createElement("div", { className: "border border-neutral-200 rounded-xl p-4 flex items-center justify-between mt-2" }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 " }, "Invitation Code"), isLoading && !referralCode ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "h-6 w-24 bg-neutral-50 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-lg text-black tracking-widest" }, referralCode)), /* @__PURE__ */ import_react69.default.createElement(
     "button",
     {
       onClick: handleCopyCode,
@@ -4135,7 +4004,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__ */ import_react69.default.createElement(import_react70.HugeiconsIcon, { icon: import_core_free_icons23.Copy01Icon, size: 18 })
-  )), /* @__PURE__ */ import_react69.default.createElement("div", { className: "text-[13px]  text-black px-1 mt-2" }, "Total Invited: ", isLoading && !totalCount ? "-" : totalCount)), /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ import_react69.default.createElement(PageSpinner5, null) : /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react69.default.createElement("div", null, referrals.length === 0 ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col items-center justify-center py-12 opacity-50" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500 text-center" }, "You haven't referred anyone yet.")) : referrals.map((ref, idx) => /* @__PURE__ */ import_react69.default.createElement(
+  )), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex items-center justify-between text-[13px] text-black px-1 mt-2" }, /* @__PURE__ */ import_react69.default.createElement("span", null, "Total Invited: ", isLoading && !totalCount ? "-" : totalCount), /* @__PURE__ */ import_react69.default.createElement("span", null, "Points: ", isLoading && !referralCoins && referralCoins !== 0 ? "-" : referralCoins))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ import_react69.default.createElement(PageSpinner5, null) : /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react69.default.createElement("div", null, referrals.length === 0 ? /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col items-center justify-center py-12 opacity-50" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-xs text-neutral-500 text-center" }, "You haven't referred anyone yet.")) : referrals.map((ref, idx) => /* @__PURE__ */ import_react69.default.createElement(
     "div",
     {
       key: `${ref.profile.username}-${idx}`,
@@ -4148,8 +4017,8 @@ var UniversalReferralPage = ({
         alt: ref.profile.username,
         name: formatWeb3Name2(ref.profile.web3Name)
       }
-    ), /* @__PURE__ */ import_react69.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5 pr-4" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[14px]  text-black truncate" }, formatWeb3Name2(ref.profile.web3Name)), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, "@", ref.profile.username))),
-    /* @__PURE__ */ import_react69.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] text-neutral-400" }, "Joined"), /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[12px]  text-black" }, formatDate(ref.joinedAt)))
+    ), /* @__PURE__ */ import_react69.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5 pr-4" }, /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[14px] text-black truncate" }, formatWeb3Name2(ref.profile.web3Name)), /* @__PURE__ */ import_react69.default.createElement("p", { className: "text-[12px] text-neutral-500 truncate" }, "@", ref.profile.username))),
+    /* @__PURE__ */ import_react69.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] text-neutral-400" }, "Joined"), /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[12px] text-black" }, formatDate(ref.joinedAt)))
   ))), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react69.default.createElement(
     "button",
     {