@splpi/estore-shared-components 7.0.1 → 7.0.3

package/dist/index.js

@@ -32,6 +32,8 @@ var index_exports = {};
 __export(index_exports, {
   Beneficiary: () => beneficiary_default,
   BottomQuickActions: () => BottomQuickActions_default,
+  DocumentUploadCard: () => DocumentUploadCard,
+  GetStarted: () => GetStarted_default,
   HealthDeclaration: () => HealthDeclaration_default,
   LifePlanApplication1: () => LifePlanApplication1_default,
   LifePlanApplication2: () => LifePlanApplication2_default,
@@ -39,11 +41,17 @@ __export(index_exports, {
   LifePlanApplicationFormWrapper: () => LifePlanApplicationFormWrapper_default,
   LifePlanApplicationStepWrapper: () => LifePlanApplicationStepWrapper_default,
   NotifyInstall: () => NotifyInstall,
+  OCR_STORAGE_KEY: () => OCR_STORAGE_KEY,
   SharedLifePlanApplication: () => SharedLifePlanApplication_default,
   UserProfile: () => UserProfile_default,
+  clearOcrResult: () => clearOcrResult,
   createEmptyApplicationData: () => createEmptyApplicationData,
   loadApplicationDataFromLocalStorage: () => loadApplicationDataFromLocalStorage,
-  saveApplicationDataToLocalStorage: () => saveApplicationDataToLocalStorage
+  markOcrApplied: () => markOcrApplied,
+  readOcrResult: () => readOcrResult,
+  saveApplicationDataToLocalStorage: () => saveApplicationDataToLocalStorage,
+  saveOcrResult: () => saveOcrResult,
+  useOcr: () => useOcr
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -269,6 +277,51 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
+// src/hooks/ocrStorage.ts
+var OCR_STORAGE_KEY = "ocrResult";
+var readStored = () => {
+  try {
+    const raw = localStorage.getItem(OCR_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+var readOcrResult = (section) => {
+  if (typeof window === "undefined") return null;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return null;
+  return stored;
+};
+var markOcrApplied = (section) => {
+  if (typeof window === "undefined") return false;
+  const stored = readStored();
+  if (!stored || stored.applied?.[section]) return false;
+  try {
+    localStorage.setItem(
+      OCR_STORAGE_KEY,
+      JSON.stringify({ ...stored, applied: { ...stored.applied, [section]: true } })
+    );
+  } catch {
+    return false;
+  }
+  return true;
+};
+var saveOcrResult = (value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+};
+var clearOcrResult = () => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(OCR_STORAGE_KEY);
+  } catch {
+  }
+};
+
 // src/NewSaleForm/LifePlanApplication1.tsx
 var import_react4 = require("react");
 
@@ -366,11 +419,20 @@ var civilStatusCollection = (0, import_react3.createListCollection)({
     { label: "Annulled", value: "annulled" }
   ]
 });
+var applyOcr = (data, ocr) => ocr ? {
+  ...data,
+  firstName: ocr.firstName || data.firstName || "",
+  middleName: ocr.middleName || data.middleName || "",
+  lastName: ocr.lastName || data.lastName || "",
+  birthDate: ocr.birthDate || data.birthDate || "",
+  idType: ocr.idType || data.idType || "",
+  idNumber: ocr.idNumber || data.idNumber || ""
+} : data;
 var LifePlanApplication1 = ({
   initialData,
   onUpdate
 }) => {
-  const [formData, setFormData] = (0, import_react4.useState)({
+  const [formData, setFormData] = (0, import_react4.useState)(() => applyOcr({
     firstName: initialData?.firstName ?? "Juan",
     middleName: initialData?.middleName ?? "Santos",
     lastName: initialData?.lastName ?? "Dela Cruz",
@@ -387,49 +449,14 @@ var LifePlanApplication1 = ({
     emailAddress: initialData?.emailAddress ?? "juan.delacruz@example.com",
     mailingAddress: initialData?.mailingAddress ?? "123 Mabini Street, Barangay San Antonio, Makati City",
     landLineNumber: initialData?.landLineNumber ?? "02-8123-4567"
-  });
+  }, readOcrResult("personal")));
   const updateFormData = (nextData) => {
     setFormData(nextData);
     onUpdate?.(nextData);
   };
   (0, import_react4.useEffect)(() => {
-    const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-    if (OCRValue != null) {
-      try {
-        const ocrData = JSON.parse(OCRValue);
-        let formattedBirthDate = "";
-        if (typeof ocrData?.birthDate === "string") {
-          const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
-          if (month && day && year) {
-            formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
-          }
-        }
-        let mappedIdType = "";
-        if (ocrData?.idType) {
-          const normalizedIdType = ocrData.idType.toLowerCase().replace(/\s+/g, "_").replace(/'/g, "");
-          if (normalizedIdType.includes("passport")) {
-            mappedIdType = "passport";
-          } else if (normalizedIdType.includes("driver")) {
-            mappedIdType = "driver_license";
-          } else if (normalizedIdType.includes("national") || normalizedIdType.includes("id")) {
-            mappedIdType = "national_id";
-          }
-        }
-        const updatedData = {
-          ...formData,
-          firstName: ocrData?.firstName || "",
-          lastName: ocrData?.lastName || "",
-          middleName: ocrData?.middleName || "",
-          birthDate: formattedBirthDate || "",
-          idType: mappedIdType || ""
-        };
-        updateFormData(updatedData);
-      } catch (e) {
-        console.error("Failed to parse OCR value:", e);
-        localStorage.removeItem("ocrResult");
-      }
-    }
-  }, []);
+    if (markOcrApplied("personal")) onUpdate?.(formData);
+  }, [formData, onUpdate]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     import_react3.Grid,
     {
@@ -878,22 +905,45 @@ var cityOptions = [
   "Bongao",
   "Ipil"
 ].map((city) => ({ label: city, value: city }));
-var districtOptions = cityOptions;
-var barangayOptions = cityOptions;
 var provinceCollection = (0, import_react5.createListCollection)({ items: provinceOptions });
 var cityCollection = (0, import_react5.createListCollection)({ items: cityOptions });
-var districtCollection = (0, import_react5.createListCollection)({ items: districtOptions });
-var barangayCollection = (0, import_react5.createListCollection)({ items: barangayOptions });
+var normalizePlace = (value) => value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/^city of\s+/, "").replace(/\s+city$/, "").replace(/[^a-z0-9]/g, "");
+var matchOption = (candidates, options) => {
+  for (const candidate of candidates ?? []) {
+    const key = normalizePlace(candidate);
+    const match = options.find(
+      (option) => normalizePlace(option.value) === key
+    );
+    if (match) return match.value;
+  }
+  return "";
+};
 var LifePlanApplication2 = ({
-  onAddressUpdate
+  onAddressUpdate,
+  parseAddress
 }) => {
-  const OCRValue = typeof window === "undefined" ? null : localStorage.getItem("ocrResult");
-  const [lot, setLot] = (0, import_react6.useState)("123");
-  const [street, setStreet] = (0, import_react6.useState)("Mabini Street");
-  const [city, setCity] = (0, import_react6.useState)("Makati");
-  const [province, setProvince] = (0, import_react6.useState)("Metro Manila");
-  const [district, setDistrict] = (0, import_react6.useState)("Taguig");
-  const [barangay, setBarangay] = (0, import_react6.useState)("San Juan");
+  const [lot, setLot] = (0, import_react6.useState)("");
+  const [street, setStreet] = (0, import_react6.useState)("");
+  const [city, setCity] = (0, import_react6.useState)("");
+  const [province, setProvince] = (0, import_react6.useState)("");
+  const [district, setDistrict] = (0, import_react6.useState)("");
+  const [barangay, setBarangay] = (0, import_react6.useState)("");
+  (0, import_react6.useEffect)(() => {
+    if (!parseAddress) return;
+    const ocr = readOcrResult("address");
+    if (!ocr?.addressLine) return;
+    markOcrApplied("address");
+    parseAddress(ocr.addressLine).then((result) => {
+      setLot(result.lot ?? "");
+      setStreet(result.street ?? "");
+      setProvince(matchOption(result.provinceCandidates, provinceOptions));
+      setCity(matchOption(result.cityCandidates, cityOptions));
+      setDistrict(result.district ?? "");
+      setBarangay(result.barangay ?? "");
+    }).catch((error) => {
+      console.error("Error parsing address:", error);
+    });
+  }, [parseAddress]);
   (0, import_react6.useEffect)(() => {
     onAddressUpdate?.({
       lot,
@@ -949,44 +999,22 @@ var LifePlanApplication2 = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_react5.Select.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          FloatingLabelInput,
           {
-            value: [district],
-            onValueChange: (e) => setDistrict(e.value[0] ?? ""),
-            collection: districtCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.HiddenSelect, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Control, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ValueText, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Content, { children: districtOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "district",
+            label: "District",
+            value: district,
+            onChange: (e) => setDistrict(e.target.value)
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-          import_react5.Select.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          FloatingLabelInput,
           {
-            value: [barangay],
-            onValueChange: (e) => setBarangay(e.value[0] ?? ""),
-            collection: barangayCollection,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.HiddenSelect, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Control, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ValueText, { placeholder: "Select Barangay" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.IndicatorGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Indicator, {}) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.Content, { children: barangayOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react5.Select.Item, { item, children: [
-                item.label,
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Select.ItemIndicator, {})
-              ] }, item.value)) }) }) })
-            ]
+            id: "barangay",
+            label: "Barangay",
+            value: barangay,
+            onChange: (e) => setBarangay(e.target.value)
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2133,6 +2161,7 @@ var InfoCard = ({
     }
   );
 };
+var info_card_default = InfoCard;
 
 // src/NewSaleForm/ui/input-card-accordion.tsx
 var import_react15 = require("@chakra-ui/react");
@@ -2260,7 +2289,8 @@ var isEmploymentComplete = (e) => !!e && [
 var LifePlanApplicationFormWrapper = ({
   openSection,
   openSectionKey,
-  onValidChange
+  onValidChange,
+  parseAddress
 }) => {
   const [applicationData, setApplicationData] = (0, import_react18.useState)(
     createEmptyApplicationData
@@ -2335,7 +2365,13 @@ var LifePlanApplicationFormWrapper = ({
       description: "Where you currently live",
       value: "address",
       complete: isAddressComplete(applicationData.address),
-      page: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LifePlanApplication2_default, { onAddressUpdate: handleAddressUpdate })
+      page: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        LifePlanApplication2_default,
+        {
+          onAddressUpdate: handleAddressUpdate,
+          ...parseAddress ? { parseAddress } : {}
+        }
+      )
     },
     {
       icon: import_io.IoIosInformationCircleOutline,
@@ -3076,6 +3112,9 @@ var createLifePlanSteps = (confirmationProps) => [
       if (confirmationProps?.onApplicationValidChange !== void 0) {
         applicationFormWrapperProps.onValidChange = confirmationProps.onApplicationValidChange;
       }
+      if (confirmationProps?.parseAddress !== void 0) {
+        applicationFormWrapperProps.parseAddress = confirmationProps.parseAddress;
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LifePlanApplicationFormWrapper_default, { ...applicationFormWrapperProps });
     })()
   },
@@ -3459,10 +3498,20 @@ var horizontal_stepper_default = HorizontalStepper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var safeParse = (value) => {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+};
 var SharedLifePlanApplication = ({
   title = "Life Plan Application",
   description = "Please fill out the form below to apply for a life plan.",
-  onPaymentError
+  onPaymentError,
+  onCheckout,
+  parseAddress
 }) => {
   const [currentStep, setCurrentStep] = (0, import_react27.useState)(0);
   const [loading, setLoading] = (0, import_react27.useState)(false);
@@ -3475,6 +3524,7 @@ var SharedLifePlanApplication = ({
     ...applicationSection ? { applicationSection } : {},
     applicationSectionKey,
     onApplicationValidChange: setApplicationValid,
+    ...parseAddress ? { parseAddress } : {},
     onEdit: (section) => {
       setApplicationSection(section ?? "personal");
       setApplicationSectionKey((key) => key + 1);
@@ -3485,6 +3535,38 @@ var SharedLifePlanApplication = ({
   const handleCheckout = async () => {
     if (!allAgreementsAccepted) return;
     setLoading(true);
+    try {
+      if (!onCheckout) {
+        throw new Error("onCheckout prop is not provided");
+      }
+      const checkoutRaw = sessionStorage.getItem("CheckoutCart");
+      const cartRaw = sessionStorage.getItem("Cart");
+      const parsed = safeParse(checkoutRaw) ?? safeParse(cartRaw);
+      const items = Array.isArray(parsed) ? parsed : parsed ? [parsed] : [];
+      if (items.length === 0) {
+        throw new Error("No items to checkout");
+      }
+      const applicationData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+      const checkoutPayload = items.map((item) => ({
+        planDesc: item.planDesc,
+        mode: item.mode,
+        ipInstAmt: Number(item.price),
+        planTerm: item.planTerm,
+        quantity: item.quantity ?? 1
+      }));
+      const checkoutUrl = await onCheckout({
+        items: checkoutPayload,
+        application: applicationData
+      });
+      if (!checkoutUrl) throw new Error("Checkout URL not found");
+      window.location.href = checkoutUrl;
+    } catch (error) {
+      console.error(error);
+      onPaymentError?.(error);
+      alert("Failed to proceed to payment");
+    } finally {
+      setLoading(false);
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     horizontal_stepper_default,
@@ -3502,17 +3584,848 @@ var SharedLifePlanApplication_default = SharedLifePlanApplication;
 
 // src/NewSaleForm/LifePlanApplicationStepWrapper.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var LifePlanApplicationStepWrapper = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SharedLifePlanApplication_default, {});
+var LifePlanApplicationStepWrapper = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SharedLifePlanApplication_default, { ...props });
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
-// src/Generic/BottomQuickActions.tsx
-var import_react28 = __toESM(require("react"));
-var import_react29 = require("@chakra-ui/react");
+// src/hooks/useOcr.ts
+var import_react28 = require("react");
+function useOcr(scanIdFn) {
+  const [data, setData] = (0, import_react28.useState)(null);
+  const [loading, setLoading] = (0, import_react28.useState)(false);
+  const [error, setError] = (0, import_react28.useState)(null);
+  const scanId = (0, import_react28.useCallback)(
+    async (file) => {
+      setLoading(true);
+      setError(null);
+      try {
+        clearOcrResult();
+        const result = await scanIdFn(file);
+        saveOcrResult(result);
+        setData(result);
+        return result;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "OCR failed");
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [scanIdFn]
+  );
+  return { data, loading, error, scanId };
+}
+
+// src/GetStarted/GetStarted.tsx
+var import_st_peter_ui8 = require("st-peter-ui");
+var import_react33 = require("@chakra-ui/react");
+var import_react34 = require("react");
+var import_lu7 = require("react-icons/lu");
+
+// src/GetStarted/Container.tsx
+var import_react29 = require("react");
+var import_react30 = require("@chakra-ui/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Container = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react30.Box,
+    {
+      px: { base: 8, md: 8 },
+      mt: { base: 16, md: 32 },
+      mb: { base: 32, md: 16 },
+      maxW: "7xl",
+      mx: "auto",
+      children
+    }
+  );
+};
+var Container_default = Container;
+
+// src/GetStarted/DocumentUploadCard.tsx
+var import_react31 = require("react");
+var import_react32 = require("@chakra-ui/react");
 var import_lu6 = require("react-icons/lu");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var PRIMARY2 = "var(--chakra-colors-primary)";
+var PRIMARY_SOFT = "var(--chakra-colors-primary-disabled)";
+var defaultNotifyError = (message) => {
+  console.error(message);
+};
+var formatBytes = (bytes) => {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+var validate = (file, config) => {
+  const accepted = config.accept.split(",").map((s) => s.trim());
+  const okType = accepted.includes(file.type) || accepted.some(
+    (a) => a.endsWith("/*") && file.type.startsWith(a.slice(0, -1))
+  ) || accepted.some(
+    (a) => a.startsWith(".") && file.name.toLowerCase().endsWith(a)
+  );
+  if (!okType) return "Unsupported file type. Please upload a JPG, PNG or PDF.";
+  if (file.size > config.maxSizeMB * 1024 * 1024)
+    return `File is too large. Maximum size is ${config.maxSizeMB}MB.`;
+  return null;
+};
+var useDocumentSlot = (config, onProcess, notifyError = defaultNotifyError) => {
+  const [slot, setSlot] = (0, import_react31.useState)({ status: "idle" });
+  const timers = (0, import_react31.useRef)([]);
+  const runId = (0, import_react31.useRef)(0);
+  const clearTimers = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  };
+  const processFile = (file, currentRun, isSignature) => {
+    if (!onProcess) return false;
+    onProcess(file).then((result) => {
+      if (runId.current !== currentRun) return;
+      setSlot((prev) => ({
+        ...prev,
+        status: "completed",
+        cleanedImageUrl: isSignature ? prev.previewUrl : void 0,
+        extraction: !isSignature && result && typeof result === "object" ? result : void 0
+      }));
+    }).catch((err) => {
+      if (runId.current !== currentRun) return;
+      const message = err instanceof Error && err.message ? err.message : "We couldn't process this document. Please try again.";
+      setSlot((prev) => ({ ...prev, status: "failed", error: message }));
+      notifyError(message);
+    });
+    return true;
+  };
+  const runLifecycle = (file) => {
+    clearTimers();
+    const currentRun = ++runId.current;
+    const previewUrl = URL.createObjectURL(file);
+    const isSignature = config.processor === "signature";
+    setSlot({
+      status: "uploading",
+      file,
+      fileName: file.name,
+      fileType: file.type,
+      fileSize: file.size,
+      previewUrl,
+      progress: 0
+    });
+    let progress = 0;
+    const tick = () => {
+      progress = Math.min(100, progress + 20);
+      setSlot((prev) => ({ ...prev, progress }));
+      if (progress < 100) {
+        timers.current.push(setTimeout(tick, 180));
+      } else {
+        timers.current.push(
+          setTimeout(() => {
+            setSlot((prev) => ({ ...prev, status: "processing" }));
+            if (processFile(file, currentRun, isSignature)) return;
+            timers.current.push(
+              setTimeout(() => {
+                setSlot((prev) => ({
+                  ...prev,
+                  status: "completed",
+                  cleanedImageUrl: isSignature ? prev.previewUrl : void 0,
+                  extraction: isSignature ? void 0 : { name: "Sample", date: "2026-07-16", id: "0001" }
+                }));
+              }, 1600)
+            );
+          }, 200)
+        );
+      }
+    };
+    timers.current.push(setTimeout(tick, 180));
+  };
+  const uploadDocument = (file) => runLifecycle(file);
+  const retryDocument = () => {
+    if (slot.file) runLifecycle(slot.file);
+  };
+  const removeDocument = () => {
+    clearTimers();
+    runId.current++;
+    if (slot.previewUrl) URL.revokeObjectURL(slot.previewUrl);
+    setSlot({ status: "idle" });
+  };
+  return { slot, uploadDocument, retryDocument, removeDocument };
+};
+var Card = ({
+  activeIcon,
+  title,
+  subtitle,
+  headerAction,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  import_react32.Box,
+  {
+    w: "full",
+    borderRadius: "2xl",
+    bg: "white",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    shadow: "sm",
+    overflow: "hidden",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", justify: "space-between", px: 4, py: 3, gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, minW: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_react32.Box,
+            {
+              p: 2,
+              borderRadius: "full",
+              bg: "gray.100",
+              color: PRIMARY2,
+              flexShrink: 0,
+              children: activeIcon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { minW: 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", truncate: true, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", color: "gray.500", truncate: true, children: subtitle })
+          ] })
+        ] }),
+        headerAction
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { px: 4, pb: 4, pt: 1, borderTopWidth: "1px", borderColor: "gray.100", children })
+    ]
+  }
+);
+var StatusPill = ({ status }) => {
+  const map = {
+    idle: null,
+    uploading: { label: "Uploading", fg: "#1D4ED8", bg: "#EFF6FF" },
+    processing: { label: "Analyzing", fg: "#7C3AED", bg: "#F5F3FF" },
+    completed: { label: "Completed", fg: "#15803D", bg: "#F0FDF4" },
+    failed: { label: "Failed", fg: "#B91C1C", bg: "#FEF2F2" }
+  };
+  const meta = map[status];
+  if (!meta) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react32.Flex,
+    {
+      align: "center",
+      gap: 1.5,
+      px: 2.5,
+      py: 1,
+      borderRadius: "full",
+      fontSize: "xs",
+      fontWeight: 600,
+      style: { color: meta.fg, background: meta.bg },
+      flexShrink: 0,
+      children: [
+        status === "processing" || status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Spinner, { size: "xs", borderWidth: "2px" }) : status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuCheck, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuTriangleAlert, { size: 12 }),
+        meta.label
+      ]
+    }
+  );
+};
+var ProgressBar = ({ value, color }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { w: "full", h: "6px", bg: "gray.100", borderRadius: "full", overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_react32.Box,
+  {
+    h: "full",
+    borderRadius: "full",
+    style: {
+      width: `${value}%`,
+      background: color,
+      transition: "width 0.2s ease"
+    }
+  }
+) });
+var Thumb = ({
+  url,
+  isPdf,
+  fileName,
+  transparent
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_react32.Flex,
+  {
+    align: "center",
+    justify: "center",
+    boxSize: { base: "56px", md: "64px" },
+    borderRadius: "lg",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    overflow: "hidden",
+    flexShrink: 0,
+    bg: transparent ? "transparent" : "gray.50",
+    style: transparent ? {
+      backgroundImage: "linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%)",
+      backgroundSize: "10px 10px",
+      backgroundPosition: "0 0,0 5px,5px -5px,-5px 0"
+    } : void 0,
+    children: isPdf || !url ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { direction: "column", align: "center", color: "gray.400", gap: 0.5, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuFileText, { size: 22 }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "9px", fontWeight: 600, children: isPdf ? "PDF" : "FILE" })
+    ] }) : (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "img",
+        {
+          src: url,
+          alt: fileName ?? "preview",
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      )
+    )
+  }
+);
+var GhostBtn = ({
+  icon,
+  label,
+  onClick,
+  tone = "gray"
+}) => {
+  const tones = {
+    gray: { c: "gray.600", h: "gray.50", b: "gray.200" },
+    danger: { c: "#B91C1C", h: "#FEF2F2", b: "#FECACA" },
+    primary: { c: PRIMARY2, h: PRIMARY_SOFT, b: PRIMARY2 }
+  };
+  const t = tones[tone];
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react32.Flex,
+    {
+      as: "button",
+      align: "center",
+      gap: 1.5,
+      px: 2.5,
+      py: 1.5,
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderColor: t.b,
+      color: t.c,
+      bg: "white",
+      fontSize: "xs",
+      fontWeight: 600,
+      cursor: "pointer",
+      _hover: { bg: t.h },
+      transition: "all 0.15s",
+      onClick,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
+function DocumentUploadCard({
+  config,
+  onStatusChange,
+  onProcess,
+  onError
+}) {
+  const notifyError = onError ?? defaultNotifyError;
+  const { slot, uploadDocument, retryDocument, removeDocument } = useDocumentSlot(config, onProcess, notifyError);
+  const status = slot?.status ?? "idle";
+  (0, import_react31.useEffect)(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+  const browseRef = (0, import_react31.useRef)(null);
+  const cameraRef = (0, import_react31.useRef)(null);
+  const [dragging, setDragging] = (0, import_react31.useState)(false);
+  const Icon6 = config.icon;
+  const isPdf = slot?.fileType === "application/pdf";
+  const handleFiles = (files) => {
+    const file = files?.[0];
+    if (!file) return;
+    const error = validate(file, config);
+    if (error) {
+      notifyError(error);
+      return;
+    }
+    void uploadDocument(file);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const renderDropzone = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react32.Flex,
+    {
+      direction: "column",
+      align: "center",
+      justify: "center",
+      gap: 2,
+      py: { base: 6, md: 7 },
+      px: 4,
+      borderWidth: "2px",
+      borderStyle: "dashed",
+      borderColor: dragging ? PRIMARY2 : "gray.200",
+      borderRadius: "xl",
+      bg: dragging ? PRIMARY_SOFT : "gray.50",
+      transition: "all 0.15s",
+      textAlign: "center",
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop,
+      role: "button",
+      tabIndex: 0,
+      onClick: () => browseRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") browseRef.current?.click();
+      },
+      cursor: "pointer",
+      _hover: { borderColor: PRIMARY2, bg: PRIMARY_SOFT },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_react32.Flex,
+          {
+            align: "center",
+            justify: "center",
+            boxSize: 11,
+            borderRadius: "full",
+            bg: "white",
+            borderWidth: "1px",
+            borderColor: "gray.200",
+            color: PRIMARY2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuUpload, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", children: "Drag & drop or tap to upload" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: config.hint ?? "JPG, PNG or PDF" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 2, mt: 1, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            GhostBtn,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuFolderOpen, { size: 13 }),
+              label: "Browse",
+              tone: "primary",
+              onClick: () => browseRef.current?.click()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            GhostBtn,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuCamera, { size: 13 }),
+              label: "Take photo",
+              onClick: () => cameraRef.current?.click()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  const renderBusy = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 3, align: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Thumb, { url: slot?.previewUrl, isPdf, fileName: slot?.fileName }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { flex: "1", minW: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName }),
+      status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_react32.Flex,
+          {
+            justify: "space-between",
+            fontSize: "xs",
+            color: "gray.500",
+            mt: 1,
+            mb: 1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { children: "Uploading\u2026" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Text, { fontWeight: 600, children: [
+                slot?.progress ?? 0,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ProgressBar, { value: slot?.progress ?? 0, color: "#2563EB" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, mt: 1.5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_react32.Flex,
+          {
+            align: "center",
+            gap: 1.5,
+            px: 2,
+            py: 1,
+            borderRadius: "md",
+            bg: "#F5F3FF",
+            color: "#7C3AED",
+            fontSize: "xs",
+            fontWeight: 600,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuSparkles, { size: 12 }),
+              config.processor === "signature" ? "Cleaning signature\u2026" : "Reading with AI\u2026"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Spinner, { size: "xs", color: "#7C3AED", borderWidth: "2px" })
+      ] }),
+      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "11px", color: "gray.400", mt: 1.5, children: "This can take a few seconds. Your upload is already saved." })
+    ] })
+  ] });
+  const renderFailed = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 3, align: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Thumb, { url: slot?.previewUrl, isPdf, fileName: slot?.fileName }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName ?? config.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "flex-start", gap: 1.5, mt: 1, color: "#B91C1C", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { mt: "1px", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuTriangleAlert, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", lineHeight: "1.4", children: slot?.error ?? "We couldn't process this document." })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 2, mt: 3, wrap: "wrap", children: [
+      slot?.file ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuRefreshCw, { size: 13 }),
+          label: "Retry",
+          tone: "primary",
+          onClick: () => void retryDocument()
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuUpload, { size: 13 }),
+          label: "Re-upload",
+          tone: "primary",
+          onClick: () => browseRef.current?.click()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuReplace, { size: 13 }),
+          label: "Choose another",
+          onClick: () => browseRef.current?.click()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuTrash2, { size: 13 }),
+          label: "Remove",
+          tone: "danger",
+          onClick: () => removeDocument()
+        }
+      )
+    ] })
+  ] });
+  const renderCompleted = () => {
+    const isSignature = config.processor === "signature";
+    const fieldCount = slot?.extraction ? Object.values(slot.extraction).filter(Boolean).length : 0;
+    const displayUrl = isSignature ? slot?.cleanedImageUrl ?? slot?.previewUrl : slot?.previewUrl;
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 3, align: "center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          Thumb,
+          {
+            url: displayUrl,
+            isPdf: isPdf && !isSignature,
+            fileName: slot?.fileName,
+            transparent: isSignature && !!slot?.cleanedImageUrl
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", color: "gray.500", children: formatBytes(slot?.fileSize) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            import_react32.Flex,
+            {
+              align: "center",
+              gap: 1.5,
+              mt: 1.5,
+              color: PRIMARY2,
+              fontSize: "xs",
+              fontWeight: 600,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuSparkles, { size: 12 }),
+                isSignature ? "Signature detected & cleaned" : `${fieldCount} field${fieldCount === 1 ? "" : "s"} extracted`
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 2, mt: 3, wrap: "wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          GhostBtn,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuReplace, { size: 13 }),
+            label: "Replace",
+            onClick: () => browseRef.current?.click()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          GhostBtn,
+          {
+            icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuTrash2, { size: 13 }),
+            label: "Remove",
+            tone: "danger",
+            onClick: () => removeDocument()
+          }
+        )
+      ] })
+    ] });
+  };
+  const requiredTag = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react32.Text,
+    {
+      fontSize: "10px",
+      fontWeight: 700,
+      px: 1.5,
+      py: 0.5,
+      borderRadius: "full",
+      color: config.required ? "#B45309" : "gray.500",
+      bg: config.required ? "#FEF3C7" : "gray.100",
+      flexShrink: 0,
+      children: config.required ? "REQUIRED" : "OPTIONAL"
+    }
+  );
+  const isMobile = (0, import_react32.useBreakpointValue)({ base: true, lg: false });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    Card,
+    {
+      activeIcon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon6, { size: 18 }),
+      title: config.label,
+      subtitle: config.description,
+      headerAction: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, flexShrink: 0, children: [
+        requiredTag,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusPill, { status })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {}),
+      children: [
+        isMobile ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          import_react32.Flex,
+          {
+            align: "center",
+            justifySelf: "flex-end",
+            gap: 2,
+            mb: 1,
+            flexShrink: 0,
+            children: [
+              requiredTag,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StatusPill, { status })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {}),
+        status === "idle" && renderDropzone(),
+        (status === "uploading" || status === "processing") && renderBusy(),
+        status === "failed" && renderFailed(),
+        status === "completed" && renderCompleted(),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref: browseRef,
+            type: "file",
+            accept: config.accept,
+            hidden: true,
+            onChange: (e) => {
+              handleFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref: cameraRef,
+            type: "file",
+            accept: "image/*",
+            capture: "environment",
+            hidden: true,
+            onChange: (e) => {
+              handleFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/GetStarted/GetStarted.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var defaultNotify = (type, message) => {
+  if (type === "error") console.error(message);
+  else console.info(message);
+};
+var GOVERNMENT_ID_CONFIG = {
+  id: "government-id",
+  label: "Government-issued ID",
+  description: "Current and valid ID",
+  accept: "image/*",
+  maxSizeMB: 5,
+  required: true,
+  hint: "Any image \xB7 up to 5MB",
+  processor: "extraction",
+  icon: import_lu7.LuIdCard
+};
+var SIGNATURE_CONFIG = {
+  id: "specimen-signature",
+  label: "Specimen Signature",
+  description: "Signature on plain white paper",
+  accept: "image/png,image/jpeg,application/pdf",
+  maxSizeMB: 5,
+  required: true,
+  hint: "JPG, PNG or PDF \xB7 up to 5MB",
+  processor: "signature",
+  icon: import_lu7.LuSignature
+};
+var GetStarted = ({
+  scanId: scanIdFn,
+  onContinue,
+  notify = defaultNotify
+}) => {
+  const [uploadDialogOpen, setUploadDialogOpen] = (0, import_react34.useState)(false);
+  const [referralDialogOpen, setReferralDialogOpen] = (0, import_react34.useState)(false);
+  const [governmentIdStatus, setGovernmentIdStatus] = (0, import_react34.useState)("idle");
+  const { scanId } = useOcr(scanIdFn);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Container_default, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    import_react33.Box,
+    {
+      p: { base: 0, md: 8 },
+      rounded: "lg",
+      shadow: { base: "none", md: "md" },
+      bg: "white",
+      maxW: "3xl",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      mx: "auto",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.VStack, { gap: 4, align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Box, { textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.H3, { children: "Let's Get Started" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { textAlign: { base: "center", md: "start" }, children: "We'll be needing some documents and information to proceed with the purchase, please prepare the following in advance to smooth out the next steps" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Box, { bg: "gray.50", p: 8, rounded: "md", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.VStack, { align: "start", gap: 2, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Box, { mb: 4, display: "flex", flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { fontWeight: "bold", children: "Required Information" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "1. Full Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "2. Nationality" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "3. Mobile Number" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "4. Email Address" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "5. Date of Birth" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "6. Complete Address" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "7. Beneficiary/ies" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { fontWeight: "bold", children: "Required Documents" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "1. Current and Valid Government-issued ID" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.BaseText, { children: "2. Specimen Signature" })
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Box, { textAlign: "end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react33.Dialog.Root,
+            {
+              size: { mdDown: "full", md: "md" },
+              open: uploadDialogOpen,
+              onOpenChange: (details) => setUploadDialogOpen(details.open),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  import_react33.Button,
+                  {
+                    w: { base: "sm", md: "2xl" },
+                    mt: { base: 4, md: 8 },
+                    onClick: () => setUploadDialogOpen(true),
+                    children: "CONTINUE"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Portal, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Backdrop, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Dialog.Content, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Title, { children: "Upload Requirements" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.VStack, { gap: 6, align: "stretch", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(info_card_default, { children: "To continue, please upload a valid ID. The system will use it to populate your information automatically." }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        DocumentUploadCard,
+                        {
+                          config: GOVERNMENT_ID_CONFIG,
+                          onStatusChange: setGovernmentIdStatus,
+                          onProcess: scanId,
+                          onError: (message) => notify("error", message)
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        DocumentUploadCard,
+                        {
+                          config: SIGNATURE_CONFIG,
+                          onError: (message) => notify("error", message)
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Dialog.Footer, { display: "flex", justifyContent: "space-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.ActionTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.CancelButton, {}) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        import_st_peter_ui8.NextButton,
+                        {
+                          onClick: () => {
+                            if (governmentIdStatus === "uploading" || governmentIdStatus === "processing") {
+                              notify("info", "Please wait while we read your ID.");
+                              return;
+                            }
+                            if (governmentIdStatus !== "completed") {
+                              notify("error", "Please upload a government-issued ID.");
+                              return;
+                            }
+                            setUploadDialogOpen(false);
+                            setReferralDialogOpen(true);
+                          }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.CloseButton, { size: "sm" }) })
+                  ] }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react33.Dialog.Root,
+            {
+              placement: "center",
+              open: referralDialogOpen,
+              onOpenChange: (details) => setReferralDialogOpen(details.open),
+              size: { mdDown: "full", md: "md" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Portal, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Backdrop, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Dialog.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Title, { children: "Referral Agent" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.VStack, { align: "stretch", gap: 4, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_st_peter_ui8.Body, { children: "Do you have an referral agent? (optional)" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Input, { placeholder: "Enter agent name" })
+                  ] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react33.Dialog.Footer, { display: "flex", justifyContent: "space-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_react33.Button,
+                      {
+                        variant: "outline",
+                        onClick: () => {
+                          setReferralDialogOpen(false);
+                          onContinue?.();
+                        },
+                        children: "Skip"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_st_peter_ui8.PrimaryMdButton,
+                      {
+                        onClick: () => {
+                          setReferralDialogOpen(false);
+                          onContinue?.();
+                        },
+                        children: "Continue"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react33.CloseButton, { size: "sm" }) })
+                ] }) })
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+var GetStarted_default = GetStarted;
+
+// src/Generic/BottomQuickActions.tsx
+var import_react35 = __toESM(require("react"));
+var import_react36 = require("@chakra-ui/react");
+var import_lu8 = require("react-icons/lu");
 var import_link = __toESM(require("next/link"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
 var ITEM_BG = BRAND_COLORS.white;
@@ -3529,15 +4442,15 @@ var SUBTITLE_COLOR = BRAND_COLORS.grey;
 var LABEL_COLOR = BRAND_COLORS.neutralText;
 var DESC_COLOR = BRAND_COLORS.grey;
 var CHEVRON_COLOR = BRAND_COLORS.ashWhite;
-var QuickActionsHeaderCard = import_react28.default.memo(
+var QuickActionsHeaderCard = import_react35.default.memo(
   ({
     initials,
     avatarBg = AVATAR_DEFAULT_BG,
     label,
     meta,
     trailing
-  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react29.HStack,
+  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react36.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -3547,8 +4460,8 @@ var QuickActionsHeaderCard = import_react28.default.memo(
       borderWidth: "1px",
       borderColor: HEADER_CARD_BORDER,
       children: [
-        initials && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react29.Flex,
+        initials && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react36.Flex,
           {
             w: "40px",
             h: "40px",
@@ -3557,8 +4470,8 @@ var QuickActionsHeaderCard = import_react28.default.memo(
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              import_react29.Text,
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              import_react36.Text,
               {
                 fontSize: "14px",
                 fontWeight: "700",
@@ -3569,9 +4482,9 @@ var QuickActionsHeaderCard = import_react28.default.memo(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react29.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Box, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react36.Text,
             {
               fontSize: "15px",
               fontWeight: "700",
@@ -3583,8 +4496,8 @@ var QuickActionsHeaderCard = import_react28.default.memo(
               children: label
             }
           ),
-          meta && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react29.Text,
+          meta && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react36.Text,
             {
               fontSize: "12px",
               color: SUBTITLE_COLOR,
@@ -3605,11 +4518,11 @@ var QuickActionsHeaderCard = import_react28.default.memo(
 var ITEM_TRANSITION = {
   transition: "background 0.15s ease, transform 0.1s ease"
 };
-var ActionItem = import_react28.default.memo(({ action }) => {
+var ActionItem = import_react35.default.memo(({ action }) => {
   const iconBg = action.iconBg ?? DEFAULT_ICON_BG;
   const iconColor = action.iconColor ?? DEFAULT_ICON_COLOR;
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react29.HStack,
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react36.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -3631,8 +4544,8 @@ var ActionItem = import_react28.default.memo(({ action }) => {
       _active: { bg: ITEM_ACTIVE_BG, transform: "scale(0.99)" },
       style: ITEM_TRANSITION,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react29.Flex,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react36.Flex,
           {
             w: "40px",
             h: "40px",
@@ -3641,12 +4554,12 @@ var ActionItem = import_react28.default.memo(({ action }) => {
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react29.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Box, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react36.Text,
             {
               fontSize: "15px",
               fontWeight: "600",
@@ -3655,8 +4568,8 @@ var ActionItem = import_react28.default.memo(({ action }) => {
               children: action.label
             }
           ),
-          action.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react29.Text,
+          action.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            import_react36.Text,
             {
               fontSize: "12px",
               color: DESC_COLOR,
@@ -3669,10 +4582,10 @@ var ActionItem = import_react28.default.memo(({ action }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react29.Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react36.Icon,
           {
-            as: import_lu6.LuChevronRight,
+            as: import_lu8.LuChevronRight,
             boxSize: "18px",
             color: CHEVRON_COLOR,
             flexShrink: 0
@@ -3682,7 +4595,7 @@ var ActionItem = import_react28.default.memo(({ action }) => {
     }
   );
   if (action.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_link.default,
       {
         href: action.href,
@@ -3701,16 +4614,16 @@ var BottomQuickActions = ({
   headerSlot,
   actions
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_react29.Drawer.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react36.Drawer.Root,
     {
       open,
       onOpenChange: (e) => onOpenChange(e.open),
       placement: "bottom",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react29.Drawer.Content,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Drawer.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Drawer.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          import_react36.Drawer.Content,
           {
             borderTopRadius: "l3",
             borderBottomRadius: "0",
@@ -3720,8 +4633,8 @@ var BottomQuickActions = ({
             pb: `calc(${STANDARD_SPACING.sm} + env(safe-area-inset-bottom))`,
             boxShadow: STANDARD_SHADOWS.level4,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Flex, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_react29.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Flex, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_react36.Box,
                 {
                   w: "36px",
                   h: "4px",
@@ -3729,17 +4642,17 @@ var BottomQuickActions = ({
                   bg: DRAG_COLOR
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_react29.Drawer.Header,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_react36.Drawer.Header,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: "12px",
                   pb: "0",
                   borderBottomWidth: "0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Flex, { align: "flex-start", justify: "space-between", gap: "12px", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react29.Drawer.Title,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Flex, { align: "flex-start", justify: "space-between", gap: "12px", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Box, { flex: "1", minW: 0, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react36.Drawer.Title,
                         {
                           fontSize: "18px",
                           fontWeight: "700",
@@ -3749,8 +4662,8 @@ var BottomQuickActions = ({
                           children: title
                         }
                       ),
-                      subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react29.Text,
+                      subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react36.Text,
                         {
                           fontSize: "13px",
                           color: SUBTITLE_COLOR,
@@ -3761,8 +4674,8 @@ var BottomQuickActions = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      import_react29.CloseButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_react36.CloseButton,
                       {
                         size: "sm",
                         color: BRAND_COLORS.neutralText,
@@ -3773,15 +4686,15 @@ var BottomQuickActions = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                import_react29.Drawer.Body,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                import_react36.Drawer.Body,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: STANDARD_SPACING.sm,
                   pb: "4px",
                   children: [
-                    headerSlot && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Box, { mb: STANDARD_SPACING.xs, children: headerSlot }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.VStack, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionItem, { action }, i)) })
+                    headerSlot && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Box, { mb: STANDARD_SPACING.xs, children: headerSlot }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.VStack, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionItem, { action }, i)) })
                   ]
                 }
               )
@@ -3795,18 +4708,18 @@ var BottomQuickActions = ({
 var BottomQuickActions_default = BottomQuickActions;
 
 // src/Generic/NotifyInstall.tsx
-var import_react31 = require("react");
-var import_react32 = require("@chakra-ui/react");
-var import_react33 = require("motion/react");
+var import_react38 = require("react");
+var import_react39 = require("@chakra-ui/react");
+var import_react40 = require("motion/react");
 var import_fi2 = require("react-icons/fi");
 
 // src/hooks/useNotifyInstall.ts
-var import_react30 = require("react");
+var import_react37 = require("react");
 function useNotifyInstall() {
-  const [isInstalled, setIsInstalled] = (0, import_react30.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react30.useState)(false);
-  const [installPrompt, setInstallPrompt] = (0, import_react30.useState)(null);
-  (0, import_react30.useEffect)(() => {
+  const [isInstalled, setIsInstalled] = (0, import_react37.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react37.useState)(false);
+  const [installPrompt, setInstallPrompt] = (0, import_react37.useState)(null);
+  (0, import_react37.useEffect)(() => {
     const mobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
     setIsMobile(mobile);
     const installed = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
@@ -3838,7 +4751,7 @@ function useNotifyInstall() {
 }
 
 // src/Generic/NotifyInstall.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var STEPS = [
   { icon: import_fi2.FiShare, label: "Tap the browser menu or Share button" },
   { icon: import_fi2.FiPlusSquare, label: 'Choose "Add to Home Screen"' }
@@ -3849,8 +4762,8 @@ function NotifyInstall({
   appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = (0, import_react31.useState)(true);
-  (0, import_react31.useEffect)(() => {
+  const [isDismissed, setIsDismissed] = (0, import_react38.useState)(true);
+  (0, import_react38.useEffect)(() => {
     if (localStorage.getItem(DISMISSED_KEY) !== "true") {
       setIsDismissed(false);
     }
@@ -3860,11 +4773,11 @@ function NotifyInstall({
     setIsDismissed(true);
   };
   const showPrompt = isMobile && !isInstalled && !isDismissed;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react33.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_react40.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -3882,8 +4795,8 @@ function NotifyInstall({
         },
         "install-backdrop"
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-        import_react33.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        import_react40.motion.div,
         {
           initial: { y: "100%" },
           animate: { y: 0 },
@@ -3901,7 +4814,7 @@ function NotifyInstall({
             paddingBottom: "env(safe-area-inset-bottom)"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "button",
               {
                 "aria-label": "Dismiss install prompt",
@@ -3920,12 +4833,12 @@ function NotifyInstall({
                   justifyContent: "center",
                   color: "#9ca3af"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi2.FiX, { size: 18 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fi2.FiX, { size: 18 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.Flex,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_react39.Flex,
                 {
                   boxSize: 16,
                   align: "center",
@@ -3934,12 +4847,12 @@ function NotifyInstall({
                   bg: "green.50",
                   color: "green.600",
                   shadow: "sm",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: import_fi2.FiDownload, boxSize: 8 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: import_fi2.FiDownload, boxSize: 8 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.VStack, { gap: 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                  import_react32.Text,
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.VStack, { gap: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                  import_react39.Text,
                   {
                     fontSize: "lg",
                     fontWeight: "bold",
@@ -3951,10 +4864,10 @@ function NotifyInstall({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Text, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
               ] }),
-              canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                import_react32.Button,
+              canInstall ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                import_react39.Button,
                 {
                   onClick: install,
                   colorPalette: "green",
@@ -3962,12 +4875,12 @@ function NotifyInstall({
                   w: "full",
                   rounded: "xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: import_fi2.FiDownload }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: import_fi2.FiDownload }),
                     "Add to Home Screen"
                   ]
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.VStack,
+              ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                import_react39.VStack,
                 {
                   w: "full",
                   bg: "gray.50",
@@ -3977,9 +4890,9 @@ function NotifyInstall({
                   p: 4,
                   gap: 4,
                   align: "stretch",
-                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.HStack, { gap: 3, align: "center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_react32.Flex,
+                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.HStack, { gap: 3, align: "center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      import_react39.Flex,
                       {
                         boxSize: 9,
                         flexShrink: 0,
@@ -3990,10 +4903,10 @@ function NotifyInstall({
                         borderWidth: "1px",
                         borderColor: "gray.200",
                         color: "green.600",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: step.icon, boxSize: 4 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: step.icon, boxSize: 4 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
                   ] }, i))
                 }
               )
@@ -4007,17 +4920,17 @@ function NotifyInstall({
 }
 
 // src/UserProfile/UserProfile.tsx
-var import_react34 = require("react");
-var import_react35 = require("@chakra-ui/react");
+var import_react41 = require("react");
+var import_react42 = require("@chakra-ui/react");
 var import_ri = require("react-icons/ri");
-var import_lu7 = require("react-icons/lu");
+var import_lu9 = require("react-icons/lu");
 var import_hi2 = require("react-icons/hi2");
 var import_bs = require("react-icons/bs");
 var import_lia = require("react-icons/lia");
 var import_fa5 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 var import_io5 = require("react-icons/io5");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var NAVBAR_STORAGE_KEY = "profile-navbar-quick-items";
 var FONT_SIZE_STORAGE_KEY = "profile-font-size-pref";
 var DEFAULT_NAV_HREFS = ["/", "/plans", "/pay-my-plan", "/claims"];
@@ -4033,8 +4946,8 @@ var ALL_NAV_OPTIONS = [
     key: "/",
     title: "Home",
     href: "/",
-    Icon: import_lu7.LuHouse,
-    activeIcon: import_lu7.LuHouse,
+    Icon: import_lu9.LuHouse,
+    activeIcon: import_lu9.LuHouse,
     match: (p) => p === "/",
     roles: ["branch", "bmstl", "sales-agent"]
   },
@@ -4051,8 +4964,8 @@ var ALL_NAV_OPTIONS = [
     key: "/pay-my-plan",
     title: "Pay",
     href: "/pay-my-plan",
-    Icon: import_lu7.LuCreditCard,
-    activeIcon: import_lu7.LuCreditCard,
+    Icon: import_lu9.LuCreditCard,
+    activeIcon: import_lu9.LuCreditCard,
     match: (p) => p.startsWith("/pay-my-plan") || p.startsWith("/account/pay-my-plan") || p.startsWith("/order-summary"),
     roles: ["branch", "bmstl", "sales-agent"]
   },
@@ -4060,8 +4973,8 @@ var ALL_NAV_OPTIONS = [
     key: "/claims",
     title: "Claim",
     href: "/claims",
-    Icon: import_lu7.LuFileText,
-    activeIcon: import_lu7.LuFileText,
+    Icon: import_lu9.LuFileText,
+    activeIcon: import_lu9.LuFileText,
     match: (p) => p.startsWith("/claims"),
     roles: ["branch", "bmstl", "sales-agent"]
   },
@@ -4315,28 +5228,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = (0, import_react34.useState)("main");
-  const [fallbackColorMode, setFallbackColorMode] = (0, import_react34.useState)("light");
+  const [profileView, setProfileView] = (0, import_react41.useState)("main");
+  const [fallbackColorMode, setFallbackColorMode] = (0, import_react41.useState)("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = (0, import_react34.useState)("md");
-  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react34.useState)(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = (0, import_react34.useState)(null);
-  const [editName, setEditName] = (0, import_react34.useState)(user.displayName);
-  const [editLoading, setEditLoading] = (0, import_react34.useState)(false);
-  const [currentPw, setCurrentPw] = (0, import_react34.useState)("");
-  const [newPw, setNewPw] = (0, import_react34.useState)("");
-  const [confirmPw, setConfirmPw] = (0, import_react34.useState)("");
-  const [showCurrentPw, setShowCurrentPw] = (0, import_react34.useState)(false);
-  const [showNewPw, setShowNewPw] = (0, import_react34.useState)(false);
-  const [showConfirmPw, setShowConfirmPw] = (0, import_react34.useState)(false);
-  const [pwLoading, setPwLoading] = (0, import_react34.useState)(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react34.useState)(
+  const [fontSize, setFontSizeLocal] = (0, import_react41.useState)("md");
+  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react41.useState)(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = (0, import_react41.useState)(null);
+  const [editName, setEditName] = (0, import_react41.useState)(user.displayName);
+  const [editLoading, setEditLoading] = (0, import_react41.useState)(false);
+  const [currentPw, setCurrentPw] = (0, import_react41.useState)("");
+  const [newPw, setNewPw] = (0, import_react41.useState)("");
+  const [confirmPw, setConfirmPw] = (0, import_react41.useState)("");
+  const [showCurrentPw, setShowCurrentPw] = (0, import_react41.useState)(false);
+  const [showNewPw, setShowNewPw] = (0, import_react41.useState)(false);
+  const [showConfirmPw, setShowConfirmPw] = (0, import_react41.useState)(false);
+  const [pwLoading, setPwLoading] = (0, import_react41.useState)(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react41.useState)(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = (0, import_react34.useState)(false);
-  const isDesktopRaw = (0, import_react35.useBreakpointValue)({ base: false, md: true });
+  const [isMounted, setIsMounted] = (0, import_react41.useState)(false);
+  const isDesktopRaw = (0, import_react42.useBreakpointValue)({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4347,10 +5260,10 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
-  const availableOptions = (0, import_react34.useMemo)(
+  const availableOptions = (0, import_react41.useMemo)(
     () => availableNavOptions.filter(
       (option) => !user.role || option.roles.includes(user.role)
     ),
@@ -4478,9 +5391,9 @@ function ReusableProfile({
     }
   };
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
-  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_react35.Box,
+  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      import_react42.Box,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4488,21 +5401,21 @@ function ReusableProfile({
         px: 4,
         textAlign: "center",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Avatar.Root,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react42.Avatar.Root,
             {
               size: "2xl",
               mx: "auto",
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: user.displayName })
+                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Text,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Text,
             {
               color: "white",
               fontWeight: "bold",
@@ -4512,9 +5425,9 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Badge,
+          user.email && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Badge,
             {
               bg: "rgba(255,255,255,0.15)",
               color: "white",
@@ -4530,9 +5443,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 5, pb: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4543,8 +5456,8 @@ function ReusableProfile({
           children: "Account"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Box,
         {
           as: "button",
           w: "full",
@@ -4552,8 +5465,8 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react42.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4562,9 +5475,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4575,23 +5488,23 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Box,
         {
           as: "button",
           w: "full",
@@ -4602,8 +5515,8 @@ function ReusableProfile({
             resetPasswordForm();
             setProfileView("change-password");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react42.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4612,9 +5525,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4625,25 +5538,25 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               w: "38px",
               h: "38px",
@@ -4654,16 +5567,16 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Box,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4685,8 +5598,8 @@ function ReusableProfile({
             cursor: "pointer",
             flexShrink: 0,
             outline: "none",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Box,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.Box,
               {
                 position: "absolute",
                 top: "3px",
@@ -4703,9 +5616,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 4, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4716,10 +5629,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               w: "38px",
               h: "38px",
@@ -4730,18 +5643,18 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 16 })
+              children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Button,
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react42.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4756,9 +5669,9 @@ function ReusableProfile({
               },
               onClick: () => handleColorMode(mode),
               children: [
-                mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 13 }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  import_react35.Text,
+                mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuMoon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  import_react42.Text,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4772,11 +5685,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               w: "38px",
               h: "38px",
@@ -4792,15 +5705,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Button,
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4815,8 +5728,8 @@ function ReusableProfile({
               },
               onClick: () => handleFontSize(option.value),
               title: option.title,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Text,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react42.Text,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4828,9 +5741,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Box,
         {
           as: "button",
           w: "full",
@@ -4838,10 +5751,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Box,
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react42.Box,
                 {
                   w: "38px",
                   h: "38px",
@@ -4852,12 +5765,12 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: "gray.600",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4865,13 +5778,13 @@ function ReusableProfile({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react35.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react42.Button,
       {
         w: "full",
         variant: "outline",
@@ -4883,30 +5796,30 @@ function ReusableProfile({
       }
     ) }) })
   ] });
-  const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.IconButton,
+  const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.IconButton,
         {
           size: "sm",
           variant: "ghost",
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: editName })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Input,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -4915,10 +5828,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Input,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -4928,10 +5841,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Input,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -4941,8 +5854,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Button,
         {
           w: "full",
           mt: 2,
@@ -4956,40 +5869,40 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.IconButton,
+  const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.IconButton,
         {
           size: "sm",
           variant: "ghost",
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle current password visibility",
                 onClick: () => setShowCurrentPw(!showCurrentPw),
-                children: showCurrentPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showCurrentPw ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.Input,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -5001,24 +5914,24 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle new password visibility",
                 onClick: () => setShowNewPw(!showNewPw),
-                children: showNewPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showNewPw ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.Input,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -5029,9 +5942,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { mt: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+        newPw && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { mt: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               flex: 1,
               h: "3px",
@@ -5041,27 +5954,27 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle confirm password visibility",
                 onClick: () => setShowConfirmPw(!showConfirmPw),
-                children: showConfirmPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showConfirmPw ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.Input,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -5072,10 +5985,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Button,
         {
           w: "full",
           mt: 1,
@@ -5090,9 +6003,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react35.Box,
+  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react42.Box,
       {
         px: 4,
         pt: 4,
@@ -5103,9 +6016,9 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.IconButton,
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 2, pr: 10, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.IconButton,
             {
               size: "sm",
               variant: "ghost",
@@ -5115,12 +6028,12 @@ function ReusableProfile({
                 setReplacingIdx(null);
                 setProfileView("main");
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Text, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -5129,10 +6042,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -5142,8 +6055,8 @@ function ReusableProfile({
             children: "Pinned"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react35.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          import_react42.Text,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -5156,8 +6069,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Flex,
+      quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react42.Flex,
         {
           align: "center",
           justify: "center",
@@ -5166,18 +6079,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
         const option = availableOptions.find((item) => item.key === href);
         if (!option) return null;
         const ItemIcon = option.Icon;
         const isFirst = idx === 0;
         const isLast = idx === quickNavHrefs.length - 1;
         const isReplacing = replacingIdx === idx;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react42.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -5189,9 +6102,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.Box,
                     {
                       w: "36px",
                       h: "36px",
@@ -5202,13 +6115,13 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "white",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
-                    isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react35.Text,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                    isReplacing && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_react42.Text,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -5218,9 +6131,9 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.HStack, { gap: 0.5, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5228,11 +6141,11 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isFirst || isReplacing,
                       onClick: () => moveNavItem(idx, -1),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronUp, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronUp, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5240,11 +6153,11 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isLast || isReplacing,
                       onClick: () => moveNavItem(idx, 1),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronDown, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronDown, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.IconButton,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -5253,11 +6166,11 @@ function ReusableProfile({
                       color: isReplacing ? "white" : "gray.500",
                       _hover: { bg: isReplacing ? "orange.500" : "gray.100" },
                       onClick: () => setReplacingIdx(isReplacing ? null : idx),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuArrowLeftRight, { size: 13 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    import_react42.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5266,23 +6179,23 @@ function ReusableProfile({
                       _hover: { bg: "red.50" },
                       disabled: isReplacing,
                       onClick: () => removeNavItem(href),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuX, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuX, { size: 14 })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, { mx: 4, my: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, { mx: 4, my: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Text,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -5292,15 +6205,15 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
             )?.title,
             '"'
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Text,
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -5310,8 +6223,8 @@ function ReusableProfile({
             children: "Available"
           }
         ),
-        replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Button,
+        replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_react42.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -5321,17 +6234,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
         const ItemIcon = option.Icon;
         const isLast = idx === unpinnedOptions.length - 1;
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Box,
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react42.Box,
                 {
                   w: "36px",
                   h: "36px",
@@ -5342,11 +6255,11 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: isReplacingMode ? "orange.500" : "gray.500",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemIcon, { size: 15 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Text,
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react42.Text,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -5355,8 +6268,8 @@ function ReusableProfile({
                 }
               )
             ] }),
-            isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+            isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5365,10 +6278,10 @@ function ReusableProfile({
                 color: "orange.500",
                 _hover: { bg: "orange.50" },
                 onClick: () => replaceNavItem(replacingIdx, option.key),
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuArrowLeftRight, { size: 13 })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              import_react42.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5378,19 +6291,19 @@ function ReusableProfile({
                 color: canAdd ? "var(--chakra-colors-primary)" : "gray.300",
                 _hover: { bg: canAdd ? "blue.50" : "transparent" },
                 onClick: () => addNavItem(option.key),
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuPlus, { size: 13 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuPlus, { size: 13 })
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {})
         ] }, option.key);
       }) })
     ] })
   ] });
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_react35.Flex,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      import_react42.Flex,
       {
         maxW: "6xl",
         mx: "auto",
@@ -5400,8 +6313,8 @@ function ReusableProfile({
         p: { md: 6, lg: 8 },
         align: "start",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5415,8 +6328,8 @@ function ReusableProfile({
               children: mainContent
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react42.Box,
             {
               flex: "1",
               minW: 0,
@@ -5426,8 +6339,8 @@ function ReusableProfile({
               overflow: "hidden",
               bg: "bg",
               minH: "540px",
-              children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                import_react35.Flex,
+              children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                import_react42.Flex,
                 {
                   direction: "column",
                   align: "center",
@@ -5437,8 +6350,8 @@ function ReusableProfile({
                   textAlign: "center",
                   color: "gray.400",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react35.Box,
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                      import_react42.Box,
                       {
                         w: "56px",
                         h: "56px",
@@ -5448,10 +6361,10 @@ function ReusableProfile({
                         alignItems: "center",
                         justifyContent: "center",
                         mb: 4,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -5461,13 +6374,15 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
 }
 var UserProfile_default = ReusableProfile;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Beneficiary,
   BottomQuickActions,
+  DocumentUploadCard,
+  GetStarted,
   HealthDeclaration,
   LifePlanApplication1,
   LifePlanApplication2,
@@ -5475,10 +6390,16 @@ var UserProfile_default = ReusableProfile;
   LifePlanApplicationFormWrapper,
   LifePlanApplicationStepWrapper,
   NotifyInstall,
+  OCR_STORAGE_KEY,
   SharedLifePlanApplication,
   UserProfile,
+  clearOcrResult,
   createEmptyApplicationData,
   loadApplicationDataFromLocalStorage,
-  saveApplicationDataToLocalStorage
+  markOcrApplied,
+  readOcrResult,
+  saveApplicationDataToLocalStorage,
+  saveOcrResult,
+  useOcr
 });
 //# sourceMappingURL=index.js.map