@splpi/estore-shared-components 7.0.3 → 7.0.5

package/dist/index.js

@@ -30,11 +30,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  APIError: () => APIError,
+  APPLICATION_DATA_CHANGE_EVENT: () => APPLICATION_DATA_CHANGE_EVENT,
   Beneficiary: () => beneficiary_default,
   BottomQuickActions: () => BottomQuickActions_default,
   DocumentUploadCard: () => DocumentUploadCard,
+  GeoApifyService: () => GeoApifyService,
   GetStarted: () => GetStarted_default,
   HealthDeclaration: () => HealthDeclaration_default,
+  LIFE_PLAN_APPLICATION_KEY: () => LIFE_PLAN_APPLICATION_KEY,
   LifePlanApplication1: () => LifePlanApplication1_default,
   LifePlanApplication2: () => LifePlanApplication2_default,
   LifePlanApplication3: () => LifePlanApplication3_default,
@@ -42,15 +46,25 @@ __export(index_exports, {
   LifePlanApplicationStepWrapper: () => LifePlanApplicationStepWrapper_default,
   NotifyInstall: () => NotifyInstall,
   OCR_STORAGE_KEY: () => OCR_STORAGE_KEY,
+  OcrService: () => OcrService,
+  PayMongoService: () => PayMongoService,
   SharedLifePlanApplication: () => SharedLifePlanApplication_default,
   UserProfile: () => UserProfile_default,
+  api: () => api,
+  apiClient: () => apiClient,
+  clearApplicationData: () => clearApplicationData,
   clearOcrResult: () => clearOcrResult,
+  configureApi: () => configureApi,
   createEmptyApplicationData: () => createEmptyApplicationData,
+  loadApplicationData: () => loadApplicationData,
   loadApplicationDataFromLocalStorage: () => loadApplicationDataFromLocalStorage,
   markOcrApplied: () => markOcrApplied,
   readOcrResult: () => readOcrResult,
+  saveApplicationData: () => saveApplicationData,
   saveApplicationDataToLocalStorage: () => saveApplicationDataToLocalStorage,
   saveOcrResult: () => saveOcrResult,
+  updateApplicationData: () => updateApplicationData,
+  useApplicationData: () => useApplicationData,
   useOcr: () => useOcr
 });
 module.exports = __toCommonJS(index_exports);
@@ -281,7 +295,7 @@ var STANDARD_ICON_BUTTON_STYLES = {
 var OCR_STORAGE_KEY = "ocrResult";
 var readStored = () => {
   try {
-    const raw = localStorage.getItem(OCR_STORAGE_KEY);
+    const raw = sessionStorage.getItem(OCR_STORAGE_KEY);
     return raw ? JSON.parse(raw) : null;
   } catch {
     return null;
@@ -298,7 +312,7 @@ var markOcrApplied = (section) => {
   const stored = readStored();
   if (!stored || stored.applied?.[section]) return false;
   try {
-    localStorage.setItem(
+    sessionStorage.setItem(
       OCR_STORAGE_KEY,
       JSON.stringify({ ...stored, applied: { ...stored.applied, [section]: true } })
     );
@@ -310,14 +324,14 @@ var markOcrApplied = (section) => {
 var saveOcrResult = (value) => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
+    sessionStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
   } catch {
   }
 };
 var clearOcrResult = () => {
   if (typeof window === "undefined") return;
   try {
-    localStorage.removeItem(OCR_STORAGE_KEY);
+    sessionStorage.removeItem(OCR_STORAGE_KEY);
   } catch {
   }
 };
@@ -433,22 +447,22 @@ var LifePlanApplication1 = ({
   onUpdate
 }) => {
   const [formData, setFormData] = (0, import_react4.useState)(() => applyOcr({
-    firstName: initialData?.firstName ?? "Juan",
-    middleName: initialData?.middleName ?? "Santos",
-    lastName: initialData?.lastName ?? "Dela Cruz",
+    firstName: initialData?.firstName ?? "",
+    middleName: initialData?.middleName ?? "",
+    lastName: initialData?.lastName ?? "",
     suffix: initialData?.suffix ?? "",
-    birthDate: initialData?.birthDate ?? "1990-05-15",
-    idType: initialData?.idType ?? "national_id",
-    idNumber: initialData?.idNumber ?? "1234-5678-9012",
-    height: initialData?.height ?? 5.7,
-    weight: initialData?.weight ?? 154,
-    gender: initialData?.gender ?? "male",
-    civilStatus: initialData?.civilStatus ?? "married",
-    nationality: initialData?.nationality ?? "Filipino",
-    mobileNumber: initialData?.mobileNumber ?? "0917-123-4567",
-    emailAddress: initialData?.emailAddress ?? "juan.delacruz@example.com",
-    mailingAddress: initialData?.mailingAddress ?? "123 Mabini Street, Barangay San Antonio, Makati City",
-    landLineNumber: initialData?.landLineNumber ?? "02-8123-4567"
+    birthDate: initialData?.birthDate ?? "",
+    idType: initialData?.idType ?? "",
+    idNumber: initialData?.idNumber ?? "",
+    height: initialData?.height ?? 0,
+    weight: initialData?.weight ?? 0,
+    gender: initialData?.gender ?? "",
+    civilStatus: initialData?.civilStatus ?? "",
+    nationality: initialData?.nationality ?? "",
+    mobileNumber: initialData?.mobileNumber ?? "",
+    emailAddress: initialData?.emailAddress ?? "",
+    mailingAddress: initialData?.mailingAddress ?? "",
+    landLineNumber: initialData?.landLineNumber ?? ""
   }, readOcrResult("personal")));
   const updateFormData = (nextData) => {
     setFormData(nextData);
@@ -919,15 +933,16 @@ var matchOption = (candidates, options) => {
   return "";
 };
 var LifePlanApplication2 = ({
+  initialData,
   onAddressUpdate,
   parseAddress
 }) => {
-  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)("");
+  const [lot, setLot] = (0, import_react6.useState)(initialData?.lot ?? "");
+  const [street, setStreet] = (0, import_react6.useState)(initialData?.street ?? "");
+  const [city, setCity] = (0, import_react6.useState)(initialData?.city ?? "");
+  const [province, setProvince] = (0, import_react6.useState)(initialData?.province ?? "");
+  const [district, setDistrict] = (0, import_react6.useState)(initialData?.district ?? "");
+  const [barangay, setBarangay] = (0, import_react6.useState)(initialData?.barangay ?? "");
   (0, import_react6.useEffect)(() => {
     if (!parseAddress) return;
     const ocr = readOcrResult("address");
@@ -1050,13 +1065,13 @@ var LifePlanApplication3 = ({
   onUpdate
 }) => {
   const [formData, setFormData] = import_react8.default.useState({
-    occupation: initialData?.occupation ?? "Software Engineer",
-    employerName: initialData?.employerName ?? "ABC Technologies Inc.",
-    employmentStatus: initialData?.employmentStatus ?? "Regular",
-    officeAddress: initialData?.officeAddress ?? "456 Ayala Avenue, Bel-Air, Makati City",
-    TIN: initialData?.TIN ?? "123-456-789-000",
-    SSS: initialData?.SSS ?? "34-1234567-8",
-    sourceOfIncome: initialData?.sourceOfIncome ?? "Salary"
+    occupation: initialData?.occupation ?? "",
+    employerName: initialData?.employerName ?? "",
+    employmentStatus: initialData?.employmentStatus ?? "",
+    officeAddress: initialData?.officeAddress ?? "",
+    TIN: initialData?.TIN ?? "",
+    SSS: initialData?.SSS ?? "",
+    sourceOfIncome: initialData?.sourceOfIncome ?? ""
   });
   const updateFormData = (nextData) => {
     setFormData(nextData);
@@ -1183,6 +1198,7 @@ var RowItem = ({
 
 // src/lib/applicationData.ts
 var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
+var APPLICATION_DATA_CHANGE_EVENT = "lifeplan-application:change";
 var createEmptyApplicationData = () => ({
   personalInfo: {
     firstName: "",
@@ -1227,19 +1243,57 @@ var createEmptyApplicationData = () => ({
     healthDeclaration4: false
   }
 });
-var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+var getStorage = () => {
   if (typeof window === "undefined") return null;
   try {
-    const stored = window.localStorage.getItem(storageKey);
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+};
+var notifyChange = (storageKey) => {
+  window.dispatchEvent(
+    new CustomEvent(APPLICATION_DATA_CHANGE_EVENT, { detail: { storageKey } })
+  );
+};
+var loadApplicationData = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return null;
+  try {
+    const stored = storage.getItem(storageKey);
     return stored ? JSON.parse(stored) : null;
   } catch {
     return null;
   }
 };
-var saveApplicationDataToLocalStorage = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
-  if (typeof window === "undefined") return;
-  window.localStorage.setItem(storageKey, JSON.stringify(data));
+var saveApplicationData = (data, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return;
+  try {
+    storage.setItem(storageKey, JSON.stringify(data));
+  } catch {
+    return;
+  }
+  notifyChange(storageKey);
+};
+var updateApplicationData = (patch, storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const current = loadApplicationData(storageKey) ?? createEmptyApplicationData();
+  const next = { ...current, ...patch };
+  saveApplicationData(next, storageKey);
+  return next;
+};
+var clearApplicationData = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  const storage = getStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(storageKey);
+  } catch {
+    return;
+  }
+  notifyChange(storageKey);
 };
+var loadApplicationDataFromLocalStorage = loadApplicationData;
+var saveApplicationDataToLocalStorage = saveApplicationData;
 
 // src/NewSaleForm/beneficiary.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1293,13 +1347,13 @@ var Beneficiary = ({ onUpdate }) => {
       contingent.length > 0 ? contingent[0] : void 0,
       allBeneficiaries
     );
-    const currentData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+    const currentData = loadApplicationData() ?? createEmptyApplicationData();
     const {
       principalBeneficiary: _oldPrincipal,
       contingentBeneficiary: _oldContingent,
       ...restData
     } = currentData;
-    saveApplicationDataToLocalStorage({
+    saveApplicationData({
       ...restData,
       beneficiaries: allBeneficiaries,
       ...principal[0] ? { principalBeneficiary: principal[0] } : {},
@@ -1308,7 +1362,7 @@ var Beneficiary = ({ onUpdate }) => {
   };
   (0, import_react11.useEffect)(() => {
     const timeoutId = window.setTimeout(() => {
-      const currentData = loadApplicationDataFromLocalStorage();
+      const currentData = loadApplicationData();
       if (!currentData) return;
       const storedBeneficiaries = currentData.beneficiaries ?? [];
       let principalFromStorage = storedBeneficiaries.filter(
@@ -1961,29 +2015,18 @@ var HealthDeclaration = () => {
     healthDeclaration3: false,
     healthDeclaration4: false
   });
+  const [hydrated, setHydrated] = (0, import_react12.useState)(false);
   (0, import_react12.useEffect)(() => {
-    let appData = loadApplicationDataFromLocalStorage();
-    if (!appData) {
-      appData = createEmptyApplicationData();
-      saveApplicationDataToLocalStorage(appData);
-    }
-    if (appData && appData.healthDeclaration) {
+    const appData = loadApplicationData();
+    if (appData?.healthDeclaration) {
       setHealthDeclarationValues(appData.healthDeclaration);
     }
+    setHydrated(true);
   }, []);
   (0, import_react12.useEffect)(() => {
-    return () => {
-      const appData = loadApplicationDataFromLocalStorage();
-      if (appData) {
-        appData.healthDeclaration = healthDeclarationValues;
-        saveApplicationDataToLocalStorage(appData);
-        console.log(
-          "Health Declaration saved to localStorage",
-          healthDeclarationValues
-        );
-      }
-    };
-  }, [healthDeclarationValues]);
+    if (!hydrated) return;
+    updateApplicationData({ healthDeclaration: healthDeclarationValues });
+  }, [healthDeclarationValues, hydrated]);
   const items = [
     {
       value: "first-item",
@@ -2299,7 +2342,7 @@ var LifePlanApplicationFormWrapper = ({
   const [openSections, setOpenSections] = (0, import_react18.useState)(["personal"]);
   (0, import_react18.useEffect)(() => {
     const timeoutId = window.setTimeout(() => {
-      const saved = loadApplicationDataFromLocalStorage();
+      const saved = loadApplicationData();
       if (saved) setApplicationData(saved);
       setHydrated(true);
     }, 0);
@@ -2307,7 +2350,11 @@ var LifePlanApplicationFormWrapper = ({
   }, []);
   (0, import_react18.useEffect)(() => {
     if (!hydrated) return;
-    saveApplicationDataToLocalStorage(applicationData);
+    updateApplicationData({
+      personalInfo: applicationData.personalInfo,
+      address: applicationData.address,
+      employment: applicationData.employment
+    });
   }, [applicationData, hydrated]);
   const isComplete = isPersonalComplete(applicationData.personalInfo) && isAddressComplete(applicationData.address);
   (0, import_react18.useEffect)(() => {
@@ -2368,6 +2415,7 @@ var LifePlanApplicationFormWrapper = ({
       page: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         LifePlanApplication2_default,
         {
+          initialData: applicationData.address,
           onAddressUpdate: handleAddressUpdate,
           ...parseAddress ? { parseAddress } : {}
         }
@@ -2395,6 +2443,7 @@ var LifePlanApplicationFormWrapper = ({
       (prev) => prev.includes(value) ? prev.filter((sectionValue) => sectionValue !== value) : [...prev, value]
     );
   };
+  if (!hydrated) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react17.Box, { w: "full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_react17.Flex,
@@ -2444,21 +2493,21 @@ var LifePlanApplicationFormWrapper = ({
 var LifePlanApplicationFormWrapper_default = LifePlanApplicationFormWrapper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
-var import_react26 = require("@chakra-ui/react");
-var import_react27 = require("react");
+var import_react27 = require("@chakra-ui/react");
+var import_react28 = require("react");
 
 // src/NewSaleForm/data/lifePlanSteps.tsx
 var import_fa4 = require("react-icons/fa");
 var import_io3 = require("react-icons/io");
 
 // src/NewSaleForm/confirmation.tsx
-var import_react22 = require("@chakra-ui/react");
+var import_react23 = require("@chakra-ui/react");
 var import_st_peter_ui6 = require("st-peter-ui");
 var import_fa6 = require("react-icons/fa6");
 var import_fa3 = require("react-icons/fa");
 var import_io2 = require("react-icons/io");
 var import_fi = require("react-icons/fi");
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/NewSaleForm/data/checkBoxList.tsx
 var import_react19 = require("@chakra-ui/react");
@@ -2561,9 +2610,22 @@ var checkboxList = [
   }
 ];
 
+// src/hooks/useApplicationData.ts
+var import_react20 = require("react");
+function useApplicationData(storageKey = LIFE_PLAN_APPLICATION_KEY) {
+  const [data, setData] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
+    const refresh = () => setData(loadApplicationData(storageKey));
+    refresh();
+    window.addEventListener(APPLICATION_DATA_CHANGE_EVENT, refresh);
+    return () => window.removeEventListener(APPLICATION_DATA_CHANGE_EVENT, refresh);
+  }, [storageKey]);
+  return data;
+}
+
 // src/NewSaleForm/ui/info-card-accordion.tsx
-var import_react20 = require("@chakra-ui/react");
-var import_react21 = require("react");
+var import_react21 = require("@chakra-ui/react");
+var import_react22 = require("react");
 var import_lu4 = require("react-icons/lu");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function InfoCardAccordion({
@@ -2577,7 +2639,7 @@ function InfoCardAccordion({
   onToggle,
   onEdit
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react22.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2595,7 +2657,7 @@ function InfoCardAccordion({
   };
   const activeIcon = isOpen && openedIcon ? openedIcon : icon;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react20.Box,
+    import_react21.Box,
     {
       w: "full",
       position: "relative",
@@ -2609,7 +2671,7 @@ function InfoCardAccordion({
       cursor: "pointer",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_react20.Flex,
+          import_react21.Flex,
           {
             align: "center",
             justify: "space-between",
@@ -2624,9 +2686,9 @@ function InfoCardAccordion({
             _hover: { bg: "gray.50" },
             transition: "background 0.15s ease",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Flex, { align: "center", gap: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_react20.Box,
+                  import_react21.Box,
                   {
                     p: 2,
                     borderRadius: "full",
@@ -2636,17 +2698,17 @@ function InfoCardAccordion({
                     children: activeIcon
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", children: title }),
-                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Flex, { align: "center", gap: 1, fontSize: "xs", color: "gray.500", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", children: title }),
+                  subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Flex, { align: "center", gap: 1, fontSize: "xs", color: "gray.500", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuHash, { size: 12 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Text, { children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Text, { children: subtitle })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Flex, { align: "center", gap: 1, flexShrink: 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Flex, { align: "center", gap: 1, flexShrink: 0, children: [
                 onEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_react20.Button,
+                  import_react21.Button,
                   {
                     variant: "ghost",
                     p: 0,
@@ -2658,15 +2720,15 @@ function InfoCardAccordion({
                       e.stopPropagation();
                       onEdit();
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Icon, { as: import_lu4.LuPencil, boxSize: 4 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Icon, { as: import_lu4.LuPencil, boxSize: 4 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Box, { color: "gray.400", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuChevronUp, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuChevronDown, { size: 16 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Box, { color: "gray.400", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuChevronUp, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lu4.LuChevronDown, { size: 16 }) })
               ] })
             ]
           }
         ),
-        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
+        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
       ]
     }
   );
@@ -2690,14 +2752,20 @@ var modeLabel = (mode) => {
       return mode || "-";
   }
 };
+var display = (value) => {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "number") return value > 0 ? String(value) : void 0;
+  return value.trim() !== "" ? value : void 0;
+};
+var classLabel = (beneficiaryClass) => beneficiaryClass === "contingent" ? "Contingent" : "Principal";
 var ApplicationAccordion = ({
   items,
   onEdit
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.VStack, { align: "stretch", gap: 3, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.VStack, { align: "stretch", gap: 3, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     InfoCardAccordion,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: item.icon, boxSize: "18px" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: item.icon, boxSize: "18px" }),
       title: item.label,
       ...item.subtitle !== void 0 ? { subtitle: item.subtitle } : {},
       defaultOpen: index === 0,
@@ -2709,13 +2777,13 @@ var ApplicationAccordion = ({
 };
 var ReviewRows2 = ({
   rows
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.VStack, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RowItem, { label: row.label, value: row.value }, row.label)) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.VStack, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RowItem, { label: row.label, value: row.value }, row.label)) });
 var FieldGrid = ({
   rows
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.SimpleGrid, { columns: { base: 1, sm: 2 }, columnGap: 6, rowGap: 5, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Box, { minW: 0, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Text, { fontSize: "xs", color: "gray.500", mb: 1, children: row.label }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.SimpleGrid, { columns: { base: 1, sm: 2 }, columnGap: 6, rowGap: 5, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Box, { minW: 0, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { fontSize: "xs", color: "gray.500", mb: 1, children: row.label }),
   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_react22.Text,
+    import_react23.Text,
     {
       fontSize: "sm",
       fontWeight: "600",
@@ -2730,7 +2798,7 @@ var SectionCard = ({
   onEdit,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-  import_react22.Box,
+  import_react23.Box,
   {
     css: { breakInside: "avoid" },
     mb: 6,
@@ -2741,10 +2809,10 @@ var SectionCard = ({
     boxShadow: "sm",
     p: 6,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Flex, { justify: "space-between", align: "center", mb: 5, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Heading, { as: "h3", fontSize: "lg", fontWeight: "bold", color: "gray.900", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Flex, { justify: "space-between", align: "center", mb: 5, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Heading, { as: "h3", fontSize: "lg", fontWeight: "bold", color: "gray.900", children: title }),
         onEdit ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_react22.IconButton,
+          import_react23.IconButton,
           {
             "aria-label": `Edit ${title}`,
             size: "sm",
@@ -2761,23 +2829,18 @@ var SectionCard = ({
   }
 );
 var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
-  const [cartItems, setCartItems] = (0, import_react23.useState)(null);
-  const [lifePlanApplication, setLifePlanApplication] = (0, import_react23.useState)(null);
-  const [openDialog, setOpenDialog] = (0, import_react23.useState)(false);
-  const [pendingCheck, setPendingCheck] = (0, import_react23.useState)(null);
-  const [acceptedAgreements, setAcceptedAgreements] = (0, import_react23.useState)(
+  const [cartItems, setCartItems] = (0, import_react24.useState)(null);
+  const lifePlanApplication = useApplicationData();
+  const [openDialog, setOpenDialog] = (0, import_react24.useState)(false);
+  const [pendingCheck, setPendingCheck] = (0, import_react24.useState)(null);
+  const [acceptedAgreements, setAcceptedAgreements] = (0, import_react24.useState)(
     () => checkboxList.map(() => false)
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const loadStoredData = () => {
       try {
         const checkoutStored = sessionStorage.getItem("CheckoutCart");
         const cartStored = sessionStorage.getItem("Cart");
-        const lifePlanApplicationStored = localStorage.getItem(
-          "LifePlanApplication"
-        );
-        const parsedApplicationData = lifePlanApplicationStored ? JSON.parse(lifePlanApplicationStored) : null;
-        setLifePlanApplication(parsedApplicationData);
         if (checkoutStored) {
           const parsedCheckout = JSON.parse(checkoutStored);
           setCartItems(
@@ -2803,23 +2866,18 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
   const acceptedCount = acceptedAgreements.filter(Boolean).length;
   const allAccepted = checkboxList.length > 0 && acceptedCount === checkboxList.length;
   const pendingAgreement = pendingCheck !== null ? checkboxList[pendingCheck] : null;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     onAllAcceptedChange?.(allAccepted);
   }, [allAccepted, onAllAcceptedChange]);
-  const beneficiaries = [
-    {
-      name: "John Doe",
-      relationship: "Relative",
-      dob: "1990-11-02",
-      address: "Sample Street, Sample Barangay, Sample City"
-    },
-    {
-      name: "Jane Smith",
-      relationship: "Relative",
-      dob: "1992-04-15",
-      address: "Sample Avenue, Sample District, Sample City"
-    }
-  ];
+  const beneficiaries = (lifePlanApplication?.beneficiaries ?? []).map(
+    (beneficiary) => ({
+      name: [beneficiary.firstName, beneficiary.middleInitial, beneficiary.lastName].map((part) => part?.trim()).filter(Boolean).join(" "),
+      beneficiaryClass: classLabel(beneficiary.beneficiaryClass),
+      relationship: beneficiary.relationship,
+      dob: beneficiary.birthDate,
+      address: beneficiary.address
+    })
+  );
   const confirmAgreement = () => {
     if (pendingCheck === null) return;
     setAcceptedAgreements((prev) => {
@@ -2838,83 +2896,62 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
     }
   ];
+  const personal = lifePlanApplication?.personalInfo;
+  const address = lifePlanApplication?.address;
+  const employment = lifePlanApplication?.employment;
   const personalRows = [
-    { label: "Uploaded ID", value: lifePlanApplication?.personalInfo.idType },
-    { label: "Last Name", value: lifePlanApplication?.personalInfo.lastName },
-    { label: "First Name", value: lifePlanApplication?.personalInfo.firstName },
-    {
-      label: "Middle Name",
-      value: lifePlanApplication?.personalInfo.middleName
-    },
-    { label: "Suffix", value: lifePlanApplication?.personalInfo.suffix },
-    {
-      label: "Date of Birth",
-      value: lifePlanApplication?.personalInfo.birthDate
-    },
-    { label: "Gender", value: lifePlanApplication?.personalInfo.gender },
-    {
-      label: "Contact Number",
-      value: lifePlanApplication?.personalInfo.mobileNumber
-    },
-    { label: "Email", value: lifePlanApplication?.personalInfo.emailAddress },
-    {
-      label: "Landline Number",
-      value: lifePlanApplication?.personalInfo.landLineNumber
-    },
-    {
-      label: "Mailing Address",
-      value: lifePlanApplication?.personalInfo.mailingAddress
-    },
-    {
-      label: "Civil Status",
-      value: lifePlanApplication?.personalInfo.civilStatus
-    }
+    { label: "Uploaded ID", value: display(personal?.idType) },
+    { label: "ID Number", value: display(personal?.idNumber) },
+    { label: "Last Name", value: display(personal?.lastName) },
+    { label: "First Name", value: display(personal?.firstName) },
+    { label: "Middle Name", value: display(personal?.middleName) },
+    { label: "Suffix", value: display(personal?.suffix) },
+    { label: "Date of Birth", value: display(personal?.birthDate) },
+    { label: "Gender", value: display(personal?.gender) },
+    { label: "Civil Status", value: display(personal?.civilStatus) },
+    { label: "Nationality", value: display(personal?.nationality) },
+    { label: "Height", value: display(personal?.height) },
+    { label: "Weight", value: display(personal?.weight) },
+    { label: "Contact Number", value: display(personal?.mobileNumber) },
+    { label: "Email", value: display(personal?.emailAddress) },
+    { label: "Landline Number", value: display(personal?.landLineNumber) },
+    { label: "Mailing Address", value: display(personal?.mailingAddress) }
   ];
   const addressRows = [
-    { label: "Lot #", value: lifePlanApplication?.address.lot },
-    { label: "Street", value: lifePlanApplication?.address.street },
-    { label: "Barangay", value: lifePlanApplication?.address.barangay },
-    { label: "City", value: lifePlanApplication?.address.city },
-    { label: "Province", value: lifePlanApplication?.address.province }
+    { label: "Lot #", value: display(address?.lot) },
+    { label: "Street", value: display(address?.street) },
+    { label: "Barangay", value: display(address?.barangay) },
+    { label: "District", value: display(address?.district) },
+    { label: "City", value: display(address?.city) },
+    { label: "Province", value: display(address?.province) }
   ];
   const employmentRows = [
-    { label: "Occupation", value: lifePlanApplication?.employment.occupation },
-    {
-      label: "Employer Name",
-      value: lifePlanApplication?.employment.employerName
-    },
-    {
-      label: "Employment Status",
-      value: lifePlanApplication?.employment.employmentStatus
-    },
-    {
-      label: "Office Address",
-      value: lifePlanApplication?.employment.officeAddress
-    },
-    { label: "TIN", value: lifePlanApplication?.employment.TIN },
-    { label: "SSS/GSIS", value: lifePlanApplication?.employment.SSS },
-    {
-      label: "Source of Income",
-      value: lifePlanApplication?.employment.sourceOfIncome
-    }
+    { label: "Occupation", value: display(employment?.occupation) },
+    { label: "Employer Name", value: display(employment?.employerName) },
+    { label: "Employment Status", value: display(employment?.employmentStatus) },
+    { label: "Office Address", value: display(employment?.officeAddress) },
+    { label: "TIN", value: display(employment?.TIN) },
+    { label: "SSS/GSIS", value: display(employment?.SSS) },
+    { label: "Source of Income", value: display(employment?.sourceOfIncome) }
   ];
-  const beneficiaryItems = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.VStack, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Text, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: beneficiary.name }),
+  const beneficiaryItems = beneficiaries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { fontSize: "sm", color: "gray.500", children: "No beneficiaries added." }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.VStack, { align: "stretch", gap: 4, children: beneficiaries.map((beneficiary, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { fontWeight: "semibold", fontSize: "sm", mb: 1, children: display(beneficiary.name) ?? "-" }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ReviewRows2,
       {
         rows: [
-          { label: "Relationship", value: beneficiary.relationship },
-          { label: "Date of Birth", value: beneficiary.dob },
-          { label: "Address", value: beneficiary.address }
+          { label: "Type", value: beneficiary.beneficiaryClass },
+          { label: "Relationship", value: display(beneficiary.relationship) },
+          { label: "Date of Birth", value: display(beneficiary.dob) },
+          { label: "Address", value: display(beneficiary.address) }
         ]
       }
     )
   ] }, `${beneficiary.name}-${index}`)) });
-  const agreementItems = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.VStack, { align: "stretch", gap: 3, children: checkboxList.map((item, index) => {
+  const agreementItems = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.VStack, { align: "stretch", gap: 3, children: checkboxList.map((item, index) => {
     const isAccepted = acceptedAgreements[index];
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react22.Box,
+      import_react23.Box,
       {
         role: "button",
         tabIndex: 0,
@@ -2935,16 +2972,16 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
             setOpenDialog(true);
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Flex, { justify: "space-between", align: "start", gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Box, { flex: "1", minW: 0, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Text, { fontWeight: "semibold", lineClamp: 2, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Flex, { justify: "space-between", align: "start", gap: 4, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Box, { flex: "1", minW: 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Text, { fontWeight: "semibold", lineClamp: 2, children: [
               item.checkBoxTitle,
               "."
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Text, { fontSize: "sm", color: "gray.600", mt: 1, lineClamp: 1, children: "Tap to review details." })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { fontSize: "sm", color: "gray.600", mt: 1, lineClamp: 1, children: "Tap to review details." })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react22.Badge,
+            import_react23.Badge,
             {
               variant: "subtle",
               colorPalette: isAccepted ? "green" : "gray",
@@ -2956,12 +2993,12 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       index
     );
   }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Box, { minH: "100vh", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Box, { px: { base: 0, md: 8 }, pb: { base: 4, md: 8 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Box, { display: { base: "block", lg: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.VStack, { align: "stretch", gap: 3, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Box, { minH: "100vh", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Box, { px: { base: 0, md: 8 }, pb: { base: 4, md: 8 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Box, { display: { base: "block", lg: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.VStack, { align: "stretch", gap: 3, children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         InfoCardAccordion,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
           title: "Order Summary",
           subtitle: modeLabel(selectedPlan?.mode),
           defaultOpen: true,
@@ -3001,7 +3038,7 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         InfoCardAccordion,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_fa3.FaRegUser, boxSize: "18px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: import_fa3.FaRegUser, boxSize: "18px" }),
           title: "Beneficiaries",
           subtitle: `${beneficiaries.length} listed`,
           children: beneficiaryItems
@@ -3010,7 +3047,7 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         InfoCardAccordion,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
           title: "Agreements",
           subtitle: `${acceptedCount}/${checkboxList.length} accepted`,
           children: agreementItems
@@ -3018,7 +3055,7 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       )
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      import_react22.Box,
+      import_react23.Box,
       {
         display: { base: "none", lg: "block" },
         css: { columnCount: 2, columnGap: "24px" },
@@ -3036,7 +3073,7 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionCard, { title: "Employment", onEdit: () => onEdit?.("employment"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldGrid, { rows: employmentRows }) }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionCard, { title: "Beneficiaries", children: beneficiaryItems }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SectionCard, { title: "Agreements", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Text, { fontSize: "xs", color: "gray.500", mb: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Text, { fontSize: "xs", color: "gray.500", mb: 4, children: [
               acceptedCount,
               "/",
               checkboxList.length,
@@ -3048,29 +3085,29 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react22.Dialog.Root,
+      import_react23.Dialog.Root,
       {
         open: openDialog,
         onOpenChange: (details) => setOpenDialog(details.open),
         size: { mdDown: "full", md: "xl" },
         scrollBehavior: "inside",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Dialog.Backdrop, { backdropFilter: "blur(6px)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            import_react22.Dialog.Content,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Dialog.Backdrop, { backdropFilter: "blur(6px)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            import_react23.Dialog.Content,
             {
               bg: "white",
               rounded: "xl",
               shadow: "lg",
               overflow: "hidden",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.CloseButton, { position: "absolute", top: 3, right: 3 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.Dialog.Header, { px: { base: 4, md: 6 }, pt: { base: 5, md: 6 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.CloseButton, { position: "absolute", top: 3, right: 3 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.Dialog.Header, { px: { base: 4, md: 6 }, pt: { base: 5, md: 6 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_st_peter_ui6.H3, { children: pendingCheck !== null ? pendingAgreement?.title || "Agreement" : "Agreement" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Text, { fontSize: "sm", color: "gray.600", mt: 2, children: "Please read carefully. Confirm to accept this agreement." })
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { fontSize: "sm", color: "gray.600", mt: 2, children: "Please read carefully. Confirm to accept this agreement." })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Dialog.Body, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Box, { p: 4, borderWidth: "0px", rounded: "lg", bg: "gray.50", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Text, { whiteSpace: "pre-wrap", fontSize: "sm", color: "gray.800", children: pendingCheck !== null ? pendingAgreement?.description || "Please review and confirm before proceeding." : "Please review and confirm before proceeding." }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Dialog.Footer, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react22.HStack, { justify: "flex-end", gap: 3, w: "full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Dialog.Body, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Box, { p: 4, borderWidth: "0px", rounded: "lg", bg: "gray.50", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Text, { whiteSpace: "pre-wrap", fontSize: "sm", color: "gray.800", children: pendingCheck !== null ? pendingAgreement?.description || "Please review and confirm before proceeding." : "Please review and confirm before proceeding." }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Dialog.Footer, { px: { base: 4, md: 6 }, pb: { base: 5, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.HStack, { justify: "flex-end", gap: 3, w: "full", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     import_st_peter_ui6.CancelButton,
                     {
@@ -3159,8 +3196,8 @@ var createLifePlanSteps = (confirmationProps) => [
 ];
 
 // src/NewSaleForm/ui/horizontal-stepper.tsx
-var import_react24 = require("react");
-var import_react25 = require("@chakra-ui/react");
+var import_react25 = require("react");
+var import_react26 = require("@chakra-ui/react");
 var import_st_peter_ui7 = require("st-peter-ui");
 var import_lu5 = require("react-icons/lu");
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -3178,9 +3215,9 @@ var HorizontalStepper = ({
   nextDisabled,
   submitButtonText = "Proceed To Payment"
 }) => {
-  const [localActiveStep, setLocalActiveStep] = (0, import_react24.useState)(0);
+  const [localActiveStep, setLocalActiveStep] = (0, import_react25.useState)(0);
   const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
-  const formTopRef = (0, import_react24.useRef)(null);
+  const formTopRef = (0, import_react25.useRef)(null);
   const isCompact = steps.length < 3;
   const isLastStep = activeStep === steps.length - 1;
   const nextStepTitle = steps[activeStep + 1]?.title;
@@ -3204,7 +3241,7 @@ var HorizontalStepper = ({
     handleStepChange(Math.min(activeStep + 1, steps.length - 1));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    import_react25.Flex,
+    import_react26.Flex,
     {
       direction: "column",
       align: "start",
@@ -3213,10 +3250,10 @@ var HorizontalStepper = ({
       overflow: "visible",
       pb: { base: "12px", md: "0px" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Box, { ref: formTopRef, h: "0", w: "full", scrollMarginTop: { base: 4, md: 6 } }),
-        (title || description) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react25.Box, { mb: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { ref: formTopRef, h: "0", w: "full", scrollMarginTop: { base: 4, md: 6 } }),
+        (title || description) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Box, { mb: 4, children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_react25.Box,
+            import_react26.Box,
             {
               as: "h1",
               m: "0",
@@ -3232,10 +3269,10 @@ var HorizontalStepper = ({
               children: title
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Text, { fontSize: "sm", color: "gray.500", mt: 1, children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Text, { fontSize: "sm", color: "gray.500", mt: 1, children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Box, { w: "full", rounded: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          import_react25.Steps.Root,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", rounded: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_react26.Steps.Root,
           {
             step: activeStep,
             onStepChange: (index) => handleStepChange(index.step),
@@ -3244,7 +3281,7 @@ var HorizontalStepper = ({
             colorPalette: "green",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                import_react25.Box,
+                import_react26.Box,
                 {
                   position: "sticky",
                   top: 0,
@@ -3259,7 +3296,7 @@ var HorizontalStepper = ({
                   boxShadow: "0 2px 8px -2px rgba(0,0,0,0.06)",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_react25.Steps.List,
+                      import_react26.Steps.List,
                       {
                         py: 0,
                         flexDirection: "row",
@@ -3270,7 +3307,7 @@ var HorizontalStepper = ({
                           const isCompleted = index < activeStep;
                           const isActive = index === activeStep;
                           return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                            import_react25.Steps.Item,
+                            import_react26.Steps.Item,
                             {
                               index,
                               title: step.title,
@@ -3278,7 +3315,7 @@ var HorizontalStepper = ({
                               flex: isCompact ? "0 0 auto" : "1",
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                                  import_react25.Steps.Trigger,
+                                  import_react26.Steps.Trigger,
                                   {
                                     flexDirection: isCompact ? "row" : "column",
                                     alignItems: "center",
@@ -3290,7 +3327,7 @@ var HorizontalStepper = ({
                                     _hover: { bg: "gray.50" },
                                     children: [
                                       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                                        import_react25.Steps.Indicator,
+                                        import_react26.Steps.Indicator,
                                         {
                                           borderWidth: "2px",
                                           transition: "all 0.25s",
@@ -3300,11 +3337,11 @@ var HorizontalStepper = ({
                                             color: isCompleted ? "white" : isActive ? PRIMARY : void 0,
                                             boxShadow: isActive ? `0 0 0 3px ${PRIMARY_DISABLED}` : "none"
                                           },
-                                          children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 }) : step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Box, { as: step.icon, w: 4, h: 4 }) : null
+                                          children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 }) : step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { as: step.icon, w: 4, h: 4 }) : null
                                         }
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                                        import_react25.Steps.Title,
+                                        import_react26.Steps.Title,
                                         {
                                           fontSize: { base: "xs", md: "sm" },
                                           textAlign: isCompact ? "left" : "center",
@@ -3320,7 +3357,7 @@ var HorizontalStepper = ({
                                   }
                                 ),
                                 !isCompact && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                                  import_react25.Steps.Separator,
+                                  import_react26.Steps.Separator,
                                   {
                                     display: { base: "none", md: "block" }
                                   }
@@ -3333,7 +3370,7 @@ var HorizontalStepper = ({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_react25.Box,
+                      import_react26.Box,
                       {
                         w: "full",
                         h: "3px",
@@ -3342,7 +3379,7 @@ var HorizontalStepper = ({
                         overflow: "hidden",
                         mt: 1,
                         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                          import_react25.Box,
+                          import_react26.Box,
                           {
                             h: "full",
                             bg: PRIMARY,
@@ -3355,9 +3392,9 @@ var HorizontalStepper = ({
                   ]
                 }
               ),
-              steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Steps.Content, { index, children: step.component ?? step.description }, index)),
+              steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Content, { index, children: step.component ?? step.description }, index)),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                import_react25.Flex,
+                import_react26.Flex,
                 {
                   w: "full",
                   justify: "space-between",
@@ -3366,8 +3403,8 @@ var HorizontalStepper = ({
                   gap: 2,
                   display: { base: "flex", md: "none" },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      import_react25.Box,
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      import_react26.Box,
                       {
                         as: "button",
                         display: "flex",
@@ -3393,7 +3430,7 @@ var HorizontalStepper = ({
                       }
                     ) }),
                     !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      import_react25.Box,
+                      import_react26.Box,
                       {
                         as: "button",
                         display: "flex",
@@ -3418,7 +3455,7 @@ var HorizontalStepper = ({
                         ]
                       }
                     ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      import_react25.Box,
+                      import_react26.Box,
                       {
                         as: "button",
                         display: "flex",
@@ -3447,18 +3484,18 @@ var HorizontalStepper = ({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                import_react25.ButtonGroup,
+                import_react26.ButtonGroup,
                 {
                   size: "sm",
                   variant: "outline",
                   display: { base: "none", md: "flex" },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react25.Flex, { mt: 5, w: "full", align: "center", justify: "space-between", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_st_peter_ui7.SecondaryMdButton, { children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 5, w: "full", align: "center", justify: "space-between", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_st_peter_ui7.SecondaryMdButton, { children: [
                       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {}),
                       "Previous"
                     ] }) }),
                     !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      import_react25.Box,
+                      import_react26.Box,
                       {
                         as: "button",
                         display: "flex",
@@ -3496,8 +3533,131 @@ var HorizontalStepper = ({
 };
 var horizontal_stepper_default = HorizontalStepper;
 
+// src/services/MainAPIClient.ts
+var import_axios = __toESM(require("axios"));
+var APIError = class extends Error {
+  status;
+  constructor(message, status) {
+    super(message);
+    this.name = "APIError";
+    this.status = status;
+  }
+};
+var readEnvBaseUrl = () => {
+  try {
+    return process.env.NEXT_PUBLIC_API_URL;
+  } catch {
+    return void 0;
+  }
+};
+var apiClient = import_axios.default.create({
+  baseURL: readEnvBaseUrl() ?? "",
+  timeout: 15e3,
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+var configureApi = (options) => {
+  apiClient.defaults.baseURL = options.baseUrl;
+};
+apiClient.interceptors.request.use((config) => {
+  if (!config.baseURL) {
+    throw new APIError(
+      "API URL is not set. Add NEXT_PUBLIC_API_URL to .env.local or call configureApi({ baseUrl })."
+    );
+  }
+  return config;
+});
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error instanceof APIError) return Promise.reject(error);
+    const status = error.response?.status;
+    const message = error.response?.data?.message || error.message || "Something went wrong";
+    console.error(`[API] ${error.config?.method?.toUpperCase()} ${error.config?.url} failed (${status ?? "no response"}):`, message);
+    return Promise.reject(new APIError(message, status));
+  }
+);
+var api = {
+  get: (url, params, config) => apiClient.get(url, { ...config, params }).then((res) => res.data),
+  post: (url, payload, config) => apiClient.post(url, payload, config).then((res) => res.data),
+  put: (url, payload, config) => apiClient.put(url, payload, config).then((res) => res.data),
+  delete: (url, config) => apiClient.delete(url, config).then((res) => res.data)
+};
+
+// src/services/GeoApifyService.ts
+var ENDPOINTS = {
+  parse: "/Address/Parse"
+};
+var GeoApifyService = {
+  async parseAddress(text) {
+    return api.get(ENDPOINTS.parse, {
+      text: text.replace(/\s+/g, " ").trim()
+    });
+  }
+};
+
+// src/services/PayMongoService.ts
+var ENDPOINTS2 = {
+  checkout: "/PayMongoAPI/CreateCheckout",
+  newSalesCheckout: "/PayMongoAPI/CreateNewSalesCheckout"
+};
+var toWholeNumber = (value) => {
+  const n = Number(value);
+  return value !== void 0 && value !== "" && Number.isFinite(n) ? Math.trunc(n) : void 0;
+};
+var toApiItem = (item) => ({
+  planDesc: item.planDesc,
+  ipInstAmt: Number(item.ipInstAmt),
+  quantity: toWholeNumber(item.quantity) ?? 1,
+  planTerm: toWholeNumber(item.planTerm),
+  productCode: item.productCode,
+  contractPrice: item.contractPrice
+});
+var PayMongoService = {
+  async createCheckout(items) {
+    const body = { items: items.map(toApiItem) };
+    console.log("PayMongoService: body =", body);
+    console.log("PayMongoService: ENDPOINTS.checkout =", ENDPOINTS2.checkout);
+    const res = await api.post(ENDPOINTS2.checkout, body);
+    return { checkoutUrl: res?.checkoutUrl };
+  },
+  async createNewSalesCheckout(request) {
+    const body = {
+      items: request.items.map((item) => ({
+        planDesc: item.planDesc,
+        mode: item.mode,
+        ipInstAmt: Number(item.ipInstAmt),
+        quantity: toWholeNumber(item.quantity) ?? 1,
+        planTerm: toWholeNumber(item.planTerm)
+      })),
+      application: request.application,
+      accountNo: request.accountNo ?? "",
+      empCode: request.empCode ?? ""
+    };
+    const res = await api.post(
+      ENDPOINTS2.newSalesCheckout,
+      body,
+      { timeout: 6e4 }
+    );
+    return { checkoutUrl: res?.checkoutUrl, requestId: res?.requestId };
+  }
+};
+
 // src/NewSaleForm/SharedLifePlanApplication.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var TEST_ACCOUNT_NO = "SPLPI-22-000021";
+var defaultCheckout = async ({
+  items,
+  application
+}) => {
+  const { checkoutUrl } = await PayMongoService.createNewSalesCheckout({
+    items,
+    application,
+    accountNo: TEST_ACCOUNT_NO
+  });
+  return checkoutUrl;
+};
 var safeParse = (value) => {
   if (!value) return null;
   try {
@@ -3510,21 +3670,21 @@ var SharedLifePlanApplication = ({
   title = "Life Plan Application",
   description = "Please fill out the form below to apply for a life plan.",
   onPaymentError,
-  onCheckout,
-  parseAddress
+  onCheckout = defaultCheckout,
+  parseAddress = GeoApifyService.parseAddress
 }) => {
-  const [currentStep, setCurrentStep] = (0, import_react27.useState)(0);
-  const [loading, setLoading] = (0, import_react27.useState)(false);
-  const [allAgreementsAccepted, setAllAgreementsAccepted] = (0, import_react27.useState)(false);
-  const [applicationSection, setApplicationSection] = (0, import_react27.useState)();
-  const [applicationSectionKey, setApplicationSectionKey] = (0, import_react27.useState)(0);
-  const [applicationValid, setApplicationValid] = (0, import_react27.useState)(false);
+  const [currentStep, setCurrentStep] = (0, import_react28.useState)(0);
+  const [loading, setLoading] = (0, import_react28.useState)(false);
+  const [allAgreementsAccepted, setAllAgreementsAccepted] = (0, import_react28.useState)(false);
+  const [applicationSection, setApplicationSection] = (0, import_react28.useState)();
+  const [applicationSectionKey, setApplicationSectionKey] = (0, import_react28.useState)(0);
+  const [applicationValid, setApplicationValid] = (0, import_react28.useState)(false);
   const steps = createLifePlanSteps({
     onAllAcceptedChange: setAllAgreementsAccepted,
     ...applicationSection ? { applicationSection } : {},
     applicationSectionKey,
     onApplicationValidChange: setApplicationValid,
-    ...parseAddress ? { parseAddress } : {},
+    parseAddress,
     onEdit: (section) => {
       setApplicationSection(section ?? "personal");
       setApplicationSectionKey((key) => key + 1);
@@ -3536,9 +3696,6 @@ var SharedLifePlanApplication = ({
     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);
@@ -3546,7 +3703,7 @@ var SharedLifePlanApplication = ({
       if (items.length === 0) {
         throw new Error("No items to checkout");
       }
-      const applicationData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+      const applicationData = loadApplicationData() ?? createEmptyApplicationData();
       const checkoutPayload = items.map((item) => ({
         planDesc: item.planDesc,
         mode: item.mode,
@@ -3568,7 +3725,7 @@ var SharedLifePlanApplication = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     horizontal_stepper_default,
     {
       steps,
@@ -3590,12 +3747,12 @@ var LifePlanApplicationStepWrapper = (props) => {
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
 // src/hooks/useOcr.ts
-var import_react28 = require("react");
+var import_react29 = 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)(
+  const [data, setData] = (0, import_react29.useState)(null);
+  const [loading, setLoading] = (0, import_react29.useState)(false);
+  const [error, setError] = (0, import_react29.useState)(null);
+  const scanId = (0, import_react29.useCallback)(
     async (file) => {
       setLoading(true);
       setError(null);
@@ -3619,17 +3776,17 @@ function useOcr(scanIdFn) {
 
 // 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_react34 = require("@chakra-ui/react");
+var import_react35 = 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_react30 = require("react");
+var import_react31 = 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,
+    import_react31.Box,
     {
       px: { base: 8, md: 8 },
       mt: { base: 16, md: 32 },
@@ -3643,8 +3800,8 @@ var Container = ({ children }) => {
 var Container_default = Container;
 
 // src/GetStarted/DocumentUploadCard.tsx
-var import_react31 = require("react");
-var import_react32 = require("@chakra-ui/react");
+var import_react32 = require("react");
+var import_react33 = 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)";
@@ -3671,9 +3828,9 @@ var validate = (file, config) => {
   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 [slot, setSlot] = (0, import_react32.useState)({ status: "idle" });
+  const timers = (0, import_react32.useRef)([]);
+  const runId = (0, import_react32.useRef)(0);
   const clearTimers = () => {
     timers.current.forEach(clearTimeout);
     timers.current = [];
@@ -3756,7 +3913,7 @@ var Card = ({
   headerAction,
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-  import_react32.Box,
+  import_react33.Box,
   {
     w: "full",
     borderRadius: "2xl",
@@ -3766,10 +3923,10 @@ var Card = ({
     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.jsxs)(import_react33.Flex, { align: "center", justify: "space-between", px: 4, py: 3, gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Flex, { align: "center", gap: 2, minW: 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+            import_react33.Box,
             {
               p: 2,
               borderRadius: "full",
@@ -3779,14 +3936,14 @@ var Card = ({
               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 })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Box, { minW: 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", truncate: true, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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 })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Box, { px: 4, pb: 4, pt: 1, borderTopWidth: "1px", borderColor: "gray.100", children })
     ]
   }
 );
@@ -3801,7 +3958,7 @@ var StatusPill = ({ status }) => {
   const meta = map[status];
   if (!meta) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react32.Flex,
+    import_react33.Flex,
     {
       align: "center",
       gap: 1.5,
@@ -3813,14 +3970,14 @@ var StatusPill = ({ status }) => {
       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 }),
+        status === "processing" || status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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,
+var ProgressBar = ({ value, color }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Box, { w: "full", h: "6px", bg: "gray.100", borderRadius: "full", overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  import_react33.Box,
   {
     h: "full",
     borderRadius: "full",
@@ -3837,7 +3994,7 @@ var Thumb = ({
   fileName,
   transparent
 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-  import_react32.Flex,
+  import_react33.Flex,
   {
     align: "center",
     justify: "center",
@@ -3853,9 +4010,9 @@ var Thumb = ({
       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: [
+    children: isPdf || !url ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.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" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "9px", fontWeight: 600, children: isPdf ? "PDF" : "FILE" })
     ] }) : (
       // eslint-disable-next-line @next/next/no-img-element
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -3882,7 +4039,7 @@ var GhostBtn = ({
   };
   const t = tones[tone];
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react32.Flex,
+    import_react33.Flex,
     {
       as: "button",
       align: "center",
@@ -3916,12 +4073,12 @@ function DocumentUploadCard({
   const notifyError = onError ?? defaultNotifyError;
   const { slot, uploadDocument, retryDocument, removeDocument } = useDocumentSlot(config, onProcess, notifyError);
   const status = slot?.status ?? "idle";
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.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 browseRef = (0, import_react32.useRef)(null);
+  const cameraRef = (0, import_react32.useRef)(null);
+  const [dragging, setDragging] = (0, import_react32.useState)(false);
   const Icon6 = config.icon;
   const isPdf = slot?.fileType === "application/pdf";
   const handleFiles = (files) => {
@@ -3940,7 +4097,7 @@ function DocumentUploadCard({
     handleFiles(e.dataTransfer.files);
   };
   const renderDropzone = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    import_react32.Flex,
+    import_react33.Flex,
     {
       direction: "column",
       align: "center",
@@ -3971,7 +4128,7 @@ function DocumentUploadCard({
       _hover: { borderColor: PRIMARY2, bg: PRIMARY_SOFT },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Flex,
+          import_react33.Flex,
           {
             align: "center",
             justify: "center",
@@ -3984,11 +4141,11 @@ function DocumentUploadCard({
             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_react33.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", children: "Drag & drop or tap to upload" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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.jsxs)(import_react33.Flex, { gap: 2, mt: 1, onClick: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             GhostBtn,
             {
@@ -4010,13 +4167,13 @@ function DocumentUploadCard({
       ]
     }
   );
-  const renderBusy = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 3, align: "center", children: [
+  const renderBusy = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.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 }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Box, { flex: "1", minW: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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,
+          import_react33.Flex,
           {
             justify: "space-between",
             fontSize: "xs",
@@ -4024,8 +4181,8 @@ function DocumentUploadCard({
             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: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { children: "Uploading\u2026" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Text, { fontWeight: 600, children: [
                 slot?.progress ?? 0,
                 "%"
               ] })
@@ -4033,9 +4190,9 @@ function DocumentUploadCard({
           }
         ),
         /* @__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_react33.Flex, { align: "center", gap: 2, mt: 1.5, children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-          import_react32.Flex,
+          import_react33.Flex,
           {
             align: "center",
             gap: 1.5,
@@ -4052,23 +4209,23 @@ function DocumentUploadCard({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Spinner, { size: "xs", color: "#7C3AED", borderWidth: "2px" })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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." })
+      status === "processing" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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: [
+  const renderFailed = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.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_react33.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName ?? config.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Flex, { align: "flex-start", gap: 1.5, mt: 1, color: "#B91C1C", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Box, { mt: "1px", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu6.LuTriangleAlert, { size: 13 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Flex, { gap: 2, mt: 3, wrap: "wrap", children: [
       slot?.file ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         GhostBtn,
         {
@@ -4109,8 +4266,8 @@ function DocumentUploadCard({
     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: [
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Flex, { gap: 3, align: "center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Thumb,
           {
@@ -4120,11 +4277,11 @@ function DocumentUploadCard({
             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_react33.Box, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "xs", color: "gray.500", children: formatBytes(slot?.fileSize) }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react32.Flex,
+            import_react33.Flex,
             {
               align: "center",
               gap: 1.5,
@@ -4140,7 +4297,7 @@ function DocumentUploadCard({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { gap: 2, mt: 3, wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Flex, { gap: 2, mt: 3, wrap: "wrap", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           GhostBtn,
           {
@@ -4162,7 +4319,7 @@ function DocumentUploadCard({
     ] });
   };
   const requiredTag = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react32.Text,
+    import_react33.Text,
     {
       fontSize: "10px",
       fontWeight: 700,
@@ -4175,20 +4332,20 @@ function DocumentUploadCard({
       children: config.required ? "REQUIRED" : "OPTIONAL"
     }
   );
-  const isMobile = (0, import_react32.useBreakpointValue)({ base: true, lg: false });
+  const isMobile = (0, import_react33.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: [
+      headerAction: !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.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,
+          import_react33.Flex,
           {
             align: "center",
             justifySelf: "flex-end",
@@ -4237,6 +4394,96 @@ function DocumentUploadCard({
   );
 }
 
+// src/services/OcrService.ts
+var ENDPOINTS3 = {
+  scan: "/Ocr/Scan"
+};
+var isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var readField = (source, keys) => {
+  if (!source) return "";
+  for (const key of keys) {
+    const match = Object.keys(source).find(
+      (k) => k.toLowerCase() === key.toLowerCase()
+    );
+    const value = match ? source[match] : void 0;
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (typeof value === "number") return String(value);
+  }
+  return "";
+};
+var pad = (value) => String(value).padStart(2, "0");
+var toIsoDate = (value) => {
+  if (!value) return "";
+  if (/^\d{4}-\d{2}-\d{2}/.test(value)) return value.slice(0, 10);
+  const parts = value.split(/[/-]/).map((part) => part.trim());
+  if (parts.length === 3 && parts.every(Boolean)) {
+    const [first = "", second = "", third = ""] = parts;
+    if (first.length === 4) return `${first}-${pad(second)}-${pad(third)}`;
+    if (third.length === 4) return `${third}-${pad(first)}-${pad(second)}`;
+  }
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())}`;
+};
+var toIdType = (value) => {
+  const text = value.toLowerCase();
+  if (!text) return "";
+  if (text.includes("passport")) return "passport";
+  if (text.includes("driver")) return "driver_license";
+  if (text.includes("national") || text.includes("id")) return "national_id";
+  return "";
+};
+var toOcrValue = (body) => {
+  const root = isObject(body) ? body : void 0;
+  const nested = root ? Object.entries(root).find(
+    ([key, value]) => key.toLowerCase() === "response" && isObject(value)
+  )?.[1] : void 0;
+  const source = isObject(nested) ? nested : root;
+  return {
+    firstName: readField(source, ["firstName"]),
+    middleName: readField(source, ["middleName"]),
+    lastName: readField(source, ["lastName"]),
+    birthDate: toIsoDate(readField(source, ["birthDate", "dateOfBirth"])),
+    idType: toIdType(readField(source, ["idType"])),
+    idNumber: readField(source, ["idNumber", "idNo"]),
+    addressLine: readField(source, ["addressLine", "address", "completeAddress"])
+  };
+};
+var toFormData = (docType, source) => {
+  const formData = new FormData();
+  formData.append("DocType", docType);
+  if (typeof source === "string") {
+    formData.append("OCRType", "URL");
+    formData.append("ImageUrl", source.trim());
+  } else {
+    formData.append("OCRType", "File");
+    formData.append("File", source);
+  }
+  return formData;
+};
+var OcrService = {
+  async scan(docType, source) {
+    return api.post(ENDPOINTS3.scan, toFormData(docType, source), {
+      headers: { "Content-Type": "multipart/form-data" },
+      timeout: 9e4
+    });
+  },
+  async scanId(source) {
+    const body = await OcrService.scan("ID", source);
+    const result = toOcrValue(body);
+    if (!result.firstName && !result.lastName && !result.idNumber) {
+      const description = isObject(body) ? readField(body, ["description", "message"]) : "";
+      throw new APIError(
+        description || "We couldn't read your ID. Please upload a clearer photo."
+      );
+    }
+    return result;
+  },
+  async scanLpa(source) {
+    return OcrService.scan("LPA", source);
+  }
+};
+
 // src/GetStarted/GetStarted.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultNotify = (type, message) => {
@@ -4266,16 +4513,16 @@ var SIGNATURE_CONFIG = {
   icon: import_lu7.LuSignature
 };
 var GetStarted = ({
-  scanId: scanIdFn,
+  scanId: scanIdFn = OcrService.scanId,
   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 [uploadDialogOpen, setUploadDialogOpen] = (0, import_react35.useState)(false);
+  const [referralDialogOpen, setReferralDialogOpen] = (0, import_react35.useState)(false);
+  const [governmentIdStatus, setGovernmentIdStatus] = (0, import_react35.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,
+    import_react34.Box,
     {
       p: { base: 0, md: 8 },
       rounded: "lg",
@@ -4287,10 +4534,10 @@ var GetStarted = ({
       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.jsxs)(import_react34.VStack, { gap: 4, align: "stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.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_react34.Box, { bg: "gray.50", p: 8, rounded: "md", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.VStack, { align: "start", gap: 2, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.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" }),
@@ -4304,16 +4551,16 @@ var GetStarted = ({
             /* @__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_react34.Box, { textAlign: "end", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react33.Dialog.Root,
+            import_react34.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,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  import_react34.Button,
                   {
                     w: { base: "sm", md: "2xl" },
                     mt: { base: 4, md: 8 },
@@ -4321,11 +4568,11 @@ var GetStarted = ({
                     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.jsxs)(import_react34.Portal, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Backdrop, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.Dialog.Content, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Title, { children: "Upload Requirements" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.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,
@@ -4344,8 +4591,8 @@ var GetStarted = ({
                         }
                       )
                     ] }) }),
-                    /* @__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.jsxs)(import_react34.Dialog.Footer, { display: "flex", justifyContent: "space-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.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,
                         {
@@ -4364,30 +4611,30 @@ var GetStarted = ({
                         }
                       )
                     ] }),
-                    /* @__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_react34.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.CloseButton, { size: "sm" }) })
                   ] }) })
                 ] })
               ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react33.Dialog.Root,
+            import_react34.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: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.Portal, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Backdrop, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.Dialog.Content, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Title, { children: "Referral Agent" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react34.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.jsx)(import_react34.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.jsxs)(import_react34.Dialog.Footer, { display: "flex", justifyContent: "space-between", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react33.Button,
+                      import_react34.Button,
                       {
                         variant: "outline",
                         onClick: () => {
@@ -4408,7 +4655,7 @@ var GetStarted = ({
                       }
                     )
                   ] }),
-                  /* @__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_react34.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react34.CloseButton, { size: "sm" }) })
                 ] }) })
               ] })
             }
@@ -4421,8 +4668,8 @@ var GetStarted = ({
 var GetStarted_default = GetStarted;
 
 // src/Generic/BottomQuickActions.tsx
-var import_react35 = __toESM(require("react"));
-var import_react36 = require("@chakra-ui/react");
+var import_react36 = __toESM(require("react"));
+var import_react37 = require("@chakra-ui/react");
 var import_lu8 = require("react-icons/lu");
 var import_link = __toESM(require("next/link"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -4442,7 +4689,7 @@ 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_react35.default.memo(
+var QuickActionsHeaderCard = import_react36.default.memo(
   ({
     initials,
     avatarBg = AVATAR_DEFAULT_BG,
@@ -4450,7 +4697,7 @@ var QuickActionsHeaderCard = import_react35.default.memo(
     meta,
     trailing
   }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_react36.HStack,
+    import_react37.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -4461,7 +4708,7 @@ var QuickActionsHeaderCard = import_react35.default.memo(
       borderColor: HEADER_CARD_BORDER,
       children: [
         initials && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react36.Flex,
+          import_react37.Flex,
           {
             w: "40px",
             h: "40px",
@@ -4471,7 +4718,7 @@ var QuickActionsHeaderCard = import_react35.default.memo(
             justify: "center",
             flexShrink: 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react36.Text,
+              import_react37.Text,
               {
                 fontSize: "14px",
                 fontWeight: "700",
@@ -4482,9 +4729,9 @@ var QuickActionsHeaderCard = import_react35.default.memo(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react37.Box, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react36.Text,
+            import_react37.Text,
             {
               fontSize: "15px",
               fontWeight: "700",
@@ -4497,7 +4744,7 @@ var QuickActionsHeaderCard = import_react35.default.memo(
             }
           ),
           meta && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react36.Text,
+            import_react37.Text,
             {
               fontSize: "12px",
               color: SUBTITLE_COLOR,
@@ -4518,11 +4765,11 @@ var QuickActionsHeaderCard = import_react35.default.memo(
 var ITEM_TRANSITION = {
   transition: "background 0.15s ease, transform 0.1s ease"
 };
-var ActionItem = import_react35.default.memo(({ action }) => {
+var ActionItem = import_react36.default.memo(({ action }) => {
   const iconBg = action.iconBg ?? DEFAULT_ICON_BG;
   const iconColor = action.iconColor ?? DEFAULT_ICON_COLOR;
   const inner = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-    import_react36.HStack,
+    import_react37.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -4545,7 +4792,7 @@ var ActionItem = import_react35.default.memo(({ action }) => {
       style: ITEM_TRANSITION,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react36.Flex,
+          import_react37.Flex,
           {
             w: "40px",
             h: "40px",
@@ -4554,12 +4801,12 @@ var ActionItem = import_react35.default.memo(({ action }) => {
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react36.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react36.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react37.Box, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react36.Text,
+            import_react37.Text,
             {
               fontSize: "15px",
               fontWeight: "600",
@@ -4569,7 +4816,7 @@ var ActionItem = import_react35.default.memo(({ action }) => {
             }
           ),
           action.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react36.Text,
+            import_react37.Text,
             {
               fontSize: "12px",
               color: DESC_COLOR,
@@ -4583,7 +4830,7 @@ var ActionItem = import_react35.default.memo(({ action }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_react36.Icon,
+          import_react37.Icon,
           {
             as: import_lu8.LuChevronRight,
             boxSize: "18px",
@@ -4615,15 +4862,15 @@ var BottomQuickActions = ({
   actions
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react36.Drawer.Root,
+    import_react37.Drawer.Root,
     {
       open,
       onOpenChange: (e) => onOpenChange(e.open),
       placement: "bottom",
-      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,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react37.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Drawer.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Drawer.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          import_react37.Drawer.Content,
           {
             borderTopRadius: "l3",
             borderBottomRadius: "0",
@@ -4633,8 +4880,8 @@ var BottomQuickActions = ({
             pb: `calc(${STANDARD_SPACING.sm} + env(safe-area-inset-bottom))`,
             boxShadow: STANDARD_SHADOWS.level4,
             children: [
-              /* @__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,
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Flex, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_react37.Box,
                 {
                   w: "36px",
                   h: "4px",
@@ -4643,16 +4890,16 @@ var BottomQuickActions = ({
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                import_react36.Drawer.Header,
+                import_react37.Drawer.Header,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: "12px",
                   pb: "0",
                   borderBottomWidth: "0",
-                  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: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react37.Flex, { align: "flex-start", justify: "space-between", gap: "12px", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react37.Box, { flex: "1", minW: 0, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        import_react36.Drawer.Title,
+                        import_react37.Drawer.Title,
                         {
                           fontSize: "18px",
                           fontWeight: "700",
@@ -4663,7 +4910,7 @@ var BottomQuickActions = ({
                         }
                       ),
                       subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                        import_react36.Text,
+                        import_react37.Text,
                         {
                           fontSize: "13px",
                           color: SUBTITLE_COLOR,
@@ -4674,8 +4921,8 @@ var BottomQuickActions = ({
                         }
                       )
                     ] }),
-                    /* @__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,
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      import_react37.CloseButton,
                       {
                         size: "sm",
                         color: BRAND_COLORS.neutralText,
@@ -4687,14 +4934,14 @@ var BottomQuickActions = ({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                import_react36.Drawer.Body,
+                import_react37.Drawer.Body,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: STANDARD_SPACING.sm,
                   pb: "4px",
                   children: [
-                    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)) })
+                    headerSlot && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.Box, { mb: STANDARD_SPACING.xs, children: headerSlot }),
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react37.VStack, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActionItem, { action }, i)) })
                   ]
                 }
               )
@@ -4708,18 +4955,18 @@ var BottomQuickActions = ({
 var BottomQuickActions_default = BottomQuickActions;
 
 // src/Generic/NotifyInstall.tsx
-var import_react38 = require("react");
-var import_react39 = require("@chakra-ui/react");
-var import_react40 = require("motion/react");
+var import_react39 = require("react");
+var import_react40 = require("@chakra-ui/react");
+var import_react41 = require("motion/react");
 var import_fi2 = require("react-icons/fi");
 
 // src/hooks/useNotifyInstall.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 function useNotifyInstall() {
-  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 [isInstalled, setIsInstalled] = (0, import_react38.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react38.useState)(false);
+  const [installPrompt, setInstallPrompt] = (0, import_react38.useState)(null);
+  (0, import_react38.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;
@@ -4762,8 +5009,8 @@ function NotifyInstall({
   appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = (0, import_react38.useState)(true);
-  (0, import_react38.useEffect)(() => {
+  const [isDismissed, setIsDismissed] = (0, import_react39.useState)(true);
+  (0, import_react39.useEffect)(() => {
     if (localStorage.getItem(DISMISSED_KEY) !== "true") {
       setIsDismissed(false);
     }
@@ -4775,9 +5022,9 @@ function NotifyInstall({
   const showPrompt = isMobile && !isInstalled && !isDismissed;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
     children,
-    /* @__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_react41.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        import_react40.motion.div,
+        import_react41.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -4796,7 +5043,7 @@ function NotifyInstall({
         "install-backdrop"
       ),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-        import_react40.motion.div,
+        import_react41.motion.div,
         {
           initial: { y: "100%" },
           animate: { y: 0 },
@@ -4836,9 +5083,9 @@ function NotifyInstall({
                 children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_fi2.FiX, { size: 18 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react40.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_react39.Flex,
+                import_react40.Flex,
                 {
                   boxSize: 16,
                   align: "center",
@@ -4847,12 +5094,12 @@ function NotifyInstall({
                   bg: "green.50",
                   color: "green.600",
                   shadow: "sm",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: import_fi2.FiDownload, boxSize: 8 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.Icon, { as: import_fi2.FiDownload, boxSize: 8 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.VStack, { gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react40.VStack, { gap: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-                  import_react39.Text,
+                  import_react40.Text,
                   {
                     fontSize: "lg",
                     fontWeight: "bold",
@@ -4864,10 +5111,10 @@ function NotifyInstall({
                     ]
                   }
                 ),
-                /* @__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." })
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.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_runtime22.jsxs)(
-                import_react39.Button,
+                import_react40.Button,
                 {
                   onClick: install,
                   colorPalette: "green",
@@ -4875,12 +5122,12 @@ function NotifyInstall({
                   w: "full",
                   rounded: "xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: import_fi2.FiDownload }),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.Icon, { as: import_fi2.FiDownload }),
                     "Add to Home Screen"
                   ]
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                import_react39.VStack,
+                import_react40.VStack,
                 {
                   w: "full",
                   bg: "gray.50",
@@ -4890,9 +5137,9 @@ function NotifyInstall({
                   p: 4,
                   gap: 4,
                   align: "stretch",
-                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react39.HStack, { gap: 3, align: "center", children: [
+                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react40.HStack, { gap: 3, align: "center", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                      import_react39.Flex,
+                      import_react40.Flex,
                       {
                         boxSize: 9,
                         flexShrink: 0,
@@ -4903,10 +5150,10 @@ function NotifyInstall({
                         borderWidth: "1px",
                         borderColor: "gray.200",
                         color: "green.600",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Icon, { as: step.icon, boxSize: 4 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.Icon, { as: step.icon, boxSize: 4 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react39.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react40.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
                   ] }, i))
                 }
               )
@@ -4920,8 +5167,8 @@ function NotifyInstall({
 }
 
 // src/UserProfile/UserProfile.tsx
-var import_react41 = require("react");
-var import_react42 = require("@chakra-ui/react");
+var import_react42 = require("react");
+var import_react43 = require("@chakra-ui/react");
 var import_ri = require("react-icons/ri");
 var import_lu9 = require("react-icons/lu");
 var import_hi2 = require("react-icons/hi2");
@@ -5228,28 +5475,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = (0, import_react41.useState)("main");
-  const [fallbackColorMode, setFallbackColorMode] = (0, import_react41.useState)("light");
+  const [profileView, setProfileView] = (0, import_react42.useState)("main");
+  const [fallbackColorMode, setFallbackColorMode] = (0, import_react42.useState)("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  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)(
+  const [fontSize, setFontSizeLocal] = (0, import_react42.useState)("md");
+  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react42.useState)(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = (0, import_react42.useState)(null);
+  const [editName, setEditName] = (0, import_react42.useState)(user.displayName);
+  const [editLoading, setEditLoading] = (0, import_react42.useState)(false);
+  const [currentPw, setCurrentPw] = (0, import_react42.useState)("");
+  const [newPw, setNewPw] = (0, import_react42.useState)("");
+  const [confirmPw, setConfirmPw] = (0, import_react42.useState)("");
+  const [showCurrentPw, setShowCurrentPw] = (0, import_react42.useState)(false);
+  const [showNewPw, setShowNewPw] = (0, import_react42.useState)(false);
+  const [showConfirmPw, setShowConfirmPw] = (0, import_react42.useState)(false);
+  const [pwLoading, setPwLoading] = (0, import_react42.useState)(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react42.useState)(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = (0, import_react41.useState)(false);
-  const isDesktopRaw = (0, import_react42.useBreakpointValue)({ base: false, md: true });
+  const [isMounted, setIsMounted] = (0, import_react42.useState)(false);
+  const isDesktopRaw = (0, import_react43.useBreakpointValue)({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -5260,10 +5507,10 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
-  const availableOptions = (0, import_react41.useMemo)(
+  const availableOptions = (0, import_react42.useMemo)(
     () => availableNavOptions.filter(
       (option) => !user.role || option.roles.includes(user.role)
     ),
@@ -5393,7 +5640,7 @@ function ReusableProfile({
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
   const mainContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      import_react42.Box,
+      import_react43.Box,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -5402,20 +5649,20 @@ function ReusableProfile({
         textAlign: "center",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-            import_react42.Avatar.Root,
+            import_react43.Avatar.Root,
             {
               size: "2xl",
               mx: "auto",
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                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 })
+                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Text,
+            import_react43.Text,
             {
               color: "white",
               fontWeight: "bold",
@@ -5425,9 +5672,9 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          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,
+          user.email && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react43.Badge,
             {
               bg: "rgba(255,255,255,0.15)",
               color: "white",
@@ -5443,9 +5690,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 5, pb: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { px: 4, pt: 5, pb: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Text,
+        import_react43.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -5457,7 +5704,7 @@ function ReusableProfile({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Box,
+        import_react43.Box,
         {
           as: "button",
           w: "full",
@@ -5466,7 +5713,7 @@ function ReusableProfile({
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-            import_react42.Flex,
+            import_react43.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -5475,9 +5722,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.Box,
+                    import_react43.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -5491,9 +5738,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuUser, { size: 16 })
                     }
                   ),
-                  /* @__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_runtime23.jsxs)(import_react43.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -5502,9 +5749,9 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Box,
+        import_react43.Box,
         {
           as: "button",
           w: "full",
@@ -5516,7 +5763,7 @@ function ReusableProfile({
             setProfileView("change-password");
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-            import_react42.Flex,
+            import_react43.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -5525,9 +5772,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.Box,
+                    import_react43.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -5541,9 +5788,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuLock, { size: 16 })
                     }
                   ),
-                  /* @__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_runtime23.jsxs)(import_react43.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -5552,11 +5799,11 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__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_react43.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Box,
+            import_react43.Box,
             {
               w: "38px",
               h: "38px",
@@ -5570,13 +5817,13 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuShield, { size: 16 })
             }
           ),
-          /* @__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_runtime23.jsxs)(import_react43.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Box,
+          import_react43.Box,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -5599,7 +5846,7 @@ function ReusableProfile({
             flexShrink: 0,
             outline: "none",
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.Box,
+              import_react43.Box,
               {
                 position: "absolute",
                 top: "3px",
@@ -5616,9 +5863,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Box, { px: 4, pt: 4, pb: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { px: 4, pt: 4, pb: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Text,
+        import_react43.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -5629,10 +5876,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__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.jsxs)(import_react43.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Box,
+            import_react43.Box,
             {
               w: "38px",
               h: "38px",
@@ -5646,15 +5893,15 @@ function ReusableProfile({
               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_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_runtime23.jsxs)(import_react43.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
           return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-            import_react42.Button,
+            import_react43.Button,
             {
               size: "sm",
               variant: "outline",
@@ -5671,7 +5918,7 @@ function ReusableProfile({
               children: [
                 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,
+                  import_react43.Text,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -5685,11 +5932,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__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_react43.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Box,
+            import_react43.Box,
             {
               w: "38px",
               h: "38px",
@@ -5705,15 +5952,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__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_runtime23.jsxs)(import_react43.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
           return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Button,
+            import_react43.Button,
             {
               size: "sm",
               variant: "outline",
@@ -5729,7 +5976,7 @@ function ReusableProfile({
               onClick: () => handleFontSize(option.value),
               title: option.title,
               children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react42.Text,
+                import_react43.Text,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -5741,9 +5988,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Box,
+        import_react43.Box,
         {
           as: "button",
           w: "full",
@@ -5751,10 +5998,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          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: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react42.Box,
+                import_react43.Box,
                 {
                   w: "38px",
                   h: "38px",
@@ -5768,9 +6015,9 @@ function ReusableProfile({
                   children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__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: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -5783,8 +6030,8 @@ function ReusableProfile({
         }
       )
     ] }),
-    /* @__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,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react43.Button,
       {
         w: "full",
         variant: "outline",
@@ -5797,9 +6044,9 @@ function ReusableProfile({
     ) }) })
   ] });
   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_react43.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.IconButton,
+        import_react43.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -5809,17 +6056,17 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__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_runtime23.jsx)(import_react43.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__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.jsxs)(import_react43.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Input,
+          import_react43.Input,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -5828,10 +6075,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__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.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Input,
+          import_react43.Input,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -5841,10 +6088,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__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.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Input,
+          import_react43.Input,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -5855,7 +6102,7 @@ function ReusableProfile({
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Button,
+        import_react43.Button,
         {
           w: "full",
           mt: 2,
@@ -5870,9 +6117,9 @@ function ReusableProfile({
     ] })
   ] });
   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_react43.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.IconButton,
+        import_react43.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -5882,16 +6129,16 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__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.jsxs)(import_react43.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.InputGroup,
+          import_react43.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.IconButton,
+              import_react43.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -5902,7 +6149,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.Input,
+              import_react43.Input,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -5914,13 +6161,13 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__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.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.InputGroup,
+          import_react43.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.IconButton,
+              import_react43.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -5931,7 +6178,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.Input,
+              import_react43.Input,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -5942,9 +6189,9 @@ function ReusableProfile({
             )
           }
         ),
-        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,
+        newPw && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { mt: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react43.Box,
             {
               flex: 1,
               h: "3px",
@@ -5954,16 +6201,16 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__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.jsxs)(import_react43.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.InputGroup,
+          import_react43.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.IconButton,
+              import_react43.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -5974,7 +6221,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.Input,
+              import_react43.Input,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -5985,10 +6232,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Button,
+        import_react43.Button,
         {
           w: "full",
           mt: 1,
@@ -6005,7 +6252,7 @@ function ReusableProfile({
   ] });
   const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_react42.Box,
+      import_react43.Box,
       {
         px: 4,
         pt: 4,
@@ -6016,9 +6263,9 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 2, pr: 10, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 2, pr: 10, children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.IconButton,
+            import_react43.IconButton,
             {
               size: "sm",
               variant: "ghost",
@@ -6031,9 +6278,9 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuChevronLeft, {})
             }
           ),
-          /* @__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: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Text, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -6042,10 +6289,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__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.jsxs)(import_react43.Box, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", justify: "space-between", mb: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Text,
+          import_react43.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -6056,7 +6303,7 @@ function ReusableProfile({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-          import_react42.Text,
+          import_react43.Text,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -6070,7 +6317,7 @@ function ReusableProfile({
         )
       ] }),
       quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        import_react42.Flex,
+        import_react43.Flex,
         {
           align: "center",
           justify: "center",
@@ -6079,18 +6326,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.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_runtime23.jsxs)(import_react42.Box, { w: "full", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-            import_react42.Flex,
+            import_react43.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -6102,9 +6349,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.Box,
+                    import_react43.Box,
                     {
                       w: "36px",
                       h: "36px",
@@ -6118,10 +6365,10 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__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 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
                     isReplacing && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                      import_react42.Text,
+                      import_react43.Text,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -6131,9 +6378,9 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.HStack, { gap: 0.5, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.HStack, { gap: 0.5, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.IconButton,
+                    import_react43.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -6145,7 +6392,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.IconButton,
+                    import_react43.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -6157,7 +6404,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.IconButton,
+                    import_react43.IconButton,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -6170,7 +6417,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    import_react42.IconButton,
+                    import_react43.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -6186,16 +6433,16 @@ function ReusableProfile({
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Separator, {})
         ] }, href);
       }) })
     ] }),
-    /* @__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_react43.Separator, { mx: 4, my: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Text,
+            import_react43.Text,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -6205,7 +6452,7 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react42.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
@@ -6213,7 +6460,7 @@ function ReusableProfile({
             '"'
           ] })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Text,
+          import_react43.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -6224,7 +6471,7 @@ function ReusableProfile({
           }
         ),
         replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_react42.Button,
+          import_react43.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -6234,17 +6481,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      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) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.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_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: [
+        return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react43.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react42.Box,
+                import_react43.Box,
                 {
                   w: "36px",
                   h: "36px",
@@ -6259,7 +6506,7 @@ function ReusableProfile({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                import_react42.Text,
+                import_react43.Text,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -6269,7 +6516,7 @@ function ReusableProfile({
               )
             ] }),
             isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.IconButton,
+              import_react43.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -6281,7 +6528,7 @@ function ReusableProfile({
                 children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuArrowLeftRight, { size: 13 })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-              import_react42.IconButton,
+              import_react43.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -6295,7 +6542,7 @@ function ReusableProfile({
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react42.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Separator, {})
         ] }, option.key);
       }) })
     ] })
@@ -6303,7 +6550,7 @@ function ReusableProfile({
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      import_react42.Flex,
+      import_react43.Flex,
       {
         maxW: "6xl",
         mx: "auto",
@@ -6314,7 +6561,7 @@ function ReusableProfile({
         align: "start",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Box,
+            import_react43.Box,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -6329,7 +6576,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-            import_react42.Box,
+            import_react43.Box,
             {
               flex: "1",
               minW: 0,
@@ -6340,7 +6587,7 @@ function ReusableProfile({
               bg: "bg",
               minH: "540px",
               children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-                import_react42.Flex,
+                import_react43.Flex,
                 {
                   direction: "column",
                   align: "center",
@@ -6351,7 +6598,7 @@ function ReusableProfile({
                   color: "gray.400",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                      import_react42.Box,
+                      import_react43.Box,
                       {
                         w: "56px",
                         h: "56px",
@@ -6364,7 +6611,7 @@ function ReusableProfile({
                         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lu9.LuUser, { size: 24 })
                       }
                     ),
-                    /* @__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." })
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -6374,16 +6621,20 @@ function ReusableProfile({
       }
     );
   }
-  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 });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react43.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 = {
+  APIError,
+  APPLICATION_DATA_CHANGE_EVENT,
   Beneficiary,
   BottomQuickActions,
   DocumentUploadCard,
+  GeoApifyService,
   GetStarted,
   HealthDeclaration,
+  LIFE_PLAN_APPLICATION_KEY,
   LifePlanApplication1,
   LifePlanApplication2,
   LifePlanApplication3,
@@ -6391,15 +6642,25 @@ var UserProfile_default = ReusableProfile;
   LifePlanApplicationStepWrapper,
   NotifyInstall,
   OCR_STORAGE_KEY,
+  OcrService,
+  PayMongoService,
   SharedLifePlanApplication,
   UserProfile,
+  api,
+  apiClient,
+  clearApplicationData,
   clearOcrResult,
+  configureApi,
   createEmptyApplicationData,
+  loadApplicationData,
   loadApplicationDataFromLocalStorage,
   markOcrApplied,
   readOcrResult,
+  saveApplicationData,
   saveApplicationDataToLocalStorage,
   saveOcrResult,
+  updateApplicationData,
+  useApplicationData,
   useOcr
 });
 //# sourceMappingURL=index.js.map