@splpi/estore-shared-components 0.0.5 → 7.0.1

package/dist/index.js

@@ -49,7 +49,6 @@ module.exports = __toCommonJS(index_exports);
 
 // src/NewSaleForm/LifePlanApplication1.tsx
 var import_react3 = require("@chakra-ui/react");
-var import_react4 = require("react");
 
 // src/lib/theme/layout-tokens.ts
 var RESPONSIVE_LAYOUT_TOKENS = {
@@ -270,6 +269,9 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
+// src/NewSaleForm/LifePlanApplication1.tsx
+var import_react4 = require("react");
+
 // src/NewSaleForm/ui/FloatingLabelInput.tsx
 var import_react = require("@chakra-ui/react");
 var import_react2 = require("react");
@@ -395,8 +397,13 @@ var LifePlanApplication1 = ({
     if (OCRValue != null) {
       try {
         const ocrData = JSON.parse(OCRValue);
-        const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
-        const formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+        let formattedBirthDate = "";
+        if (typeof ocrData?.birthDate === "string") {
+          const [month, day, year] = ocrData.birthDate.split("/").map((part) => part.trim());
+          if (month && day && year) {
+            formattedBirthDate = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+          }
+        }
         let mappedIdType = "";
         if (ocrData?.idType) {
           const normalizedIdType = ocrData.idType.toLowerCase().replace(/\s+/g, "_").replace(/'/g, "");
@@ -648,6 +655,36 @@ var LifePlanApplication1_default = LifePlanApplication1;
 // src/NewSaleForm/LifePlanApplication2.tsx
 var import_react5 = require("@chakra-ui/react");
 var import_react6 = require("react");
+
+// src/lib/theme/brand-colors.ts
+var BRAND_COLORS = {
+  primaryGreen: "#109448",
+  darkGreen: "#006838",
+  softGreen: "#92DDBF",
+  pastelPeaGreen: "#ACD6A6",
+  seafoamGreen: "#92DDBF",
+  lightCyan: "#D3EDEE",
+  successBg: "#F0FDF4",
+  warningBg: "#FFF7ED",
+  warningText: "#F1592B",
+  warningBorder: "#F4845F",
+  errorBg: "#FEF2F2",
+  destructiveRed: "#BF1F2F",
+  errorRed: "#EF4444",
+  neutralText: "#22223B",
+  neutralBorder: "#E5E7EB",
+  mutedBg: "#F3F4F6",
+  subtleBg: "#F9FAFB",
+  white: "#FFFFFF",
+  black: "#000000",
+  grey: "#808080",
+  ashWhite: "#ECECEC",
+  gold: "#CBA135",
+  brightGold: "#FFD026",
+  paleGold: "#FFF48E"
+};
+
+// src/NewSaleForm/LifePlanApplication2.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var provinceOptions = [
   "Abra",
@@ -857,6 +894,16 @@ var LifePlanApplication2 = ({
   const [province, setProvince] = (0, import_react6.useState)("Metro Manila");
   const [district, setDistrict] = (0, import_react6.useState)("Taguig");
   const [barangay, setBarangay] = (0, import_react6.useState)("San Juan");
+  (0, import_react6.useEffect)(() => {
+    onAddressUpdate?.({
+      lot,
+      street,
+      barangay,
+      district,
+      city,
+      province
+    });
+  }, [lot, street, barangay, city, province, district]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_react5.Box,
     {
@@ -1105,7 +1152,66 @@ var RowItem = ({
   ),
   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.Text, { fontWeight: "medium", textAlign: "right", whiteSpace: "nowrap", children: value ?? "-" })
 ] });
-var row_item_default = RowItem;
+
+// src/lib/applicationData.ts
+var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
+var createEmptyApplicationData = () => ({
+  personalInfo: {
+    firstName: "",
+    middleName: "",
+    lastName: "",
+    suffix: "",
+    birthDate: "",
+    idType: "",
+    idNumber: "",
+    height: 0,
+    weight: 0,
+    gender: "",
+    civilStatus: "",
+    nationality: "",
+    mobileNumber: "",
+    emailAddress: "",
+    mailingAddress: "",
+    landLineNumber: ""
+  },
+  address: {
+    lot: "",
+    street: "",
+    barangay: "",
+    district: "",
+    city: "",
+    province: ""
+  },
+  employment: {
+    occupation: "",
+    employerName: "",
+    employmentStatus: "",
+    officeAddress: "",
+    TIN: "",
+    SSS: "",
+    sourceOfIncome: ""
+  },
+  beneficiaries: [],
+  healthDeclaration: {
+    healthDeclaration1: false,
+    healthDeclaration2: false,
+    healthDeclaration3: false,
+    healthDeclaration4: false
+  }
+});
+var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = window.localStorage.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));
+};
 
 // src/NewSaleForm/beneficiary.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1126,7 +1232,7 @@ var relationshipTypes = (0, import_react10.createListCollection)({
 });
 var ReviewRows = ({
   rows
-}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.VStack, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(row_item_default, { label: row.label, value: row.value }, row.label)) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.VStack, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RowItem, { label: row.label, value: row.value }, row.label)) });
 var Beneficiary = ({ onUpdate }) => {
   const isMobile = (0, import_react10.useBreakpointValue)({ base: true, md: false });
   const [principalBeneficiaries, setPrincipalBeneficiaries] = (0, import_react11.useState)([]);
@@ -1152,6 +1258,65 @@ var Beneficiary = ({ onUpdate }) => {
     relationship: "",
     beneficiaryClass: "principal"
   });
+  const syncBeneficiaries = (principal, contingent) => {
+    const allBeneficiaries = [...principal, ...contingent];
+    onUpdate?.(
+      principal.length > 0 ? principal[0] : void 0,
+      contingent.length > 0 ? contingent[0] : void 0,
+      allBeneficiaries
+    );
+    const currentData = loadApplicationDataFromLocalStorage() ?? createEmptyApplicationData();
+    const {
+      principalBeneficiary: _oldPrincipal,
+      contingentBeneficiary: _oldContingent,
+      ...restData
+    } = currentData;
+    saveApplicationDataToLocalStorage({
+      ...restData,
+      beneficiaries: allBeneficiaries,
+      ...principal[0] ? { principalBeneficiary: principal[0] } : {},
+      ...contingent[0] ? { contingentBeneficiary: contingent[0] } : {}
+    });
+  };
+  (0, import_react11.useEffect)(() => {
+    const timeoutId = window.setTimeout(() => {
+      const currentData = loadApplicationDataFromLocalStorage();
+      if (!currentData) return;
+      const storedBeneficiaries = currentData.beneficiaries ?? [];
+      let principalFromStorage = storedBeneficiaries.filter(
+        (beneficiary) => beneficiary.beneficiaryClass === "principal"
+      );
+      let contingentFromStorage = storedBeneficiaries.filter(
+        (beneficiary) => beneficiary.beneficiaryClass === "contingent"
+      );
+      if (storedBeneficiaries.length === 0) {
+        if (currentData.principalBeneficiary) {
+          principalFromStorage = [
+            {
+              ...currentData.principalBeneficiary,
+              beneficiaryClass: currentData.principalBeneficiary.beneficiaryClass || "principal"
+            }
+          ];
+        }
+        if (currentData.contingentBeneficiary) {
+          contingentFromStorage = [
+            {
+              ...currentData.contingentBeneficiary,
+              beneficiaryClass: currentData.contingentBeneficiary.beneficiaryClass || "contingent"
+            }
+          ];
+        }
+      }
+      setPrincipalBeneficiaries(principalFromStorage);
+      setContingentBeneficiaries(contingentFromStorage);
+      onUpdate?.(
+        principalFromStorage.length > 0 ? principalFromStorage[0] : void 0,
+        contingentFromStorage.length > 0 ? contingentFromStorage[0] : void 0,
+        [...principalFromStorage, ...contingentFromStorage]
+      );
+    }, 0);
+    return () => window.clearTimeout(timeoutId);
+  }, [onUpdate]);
   const handleSaveAddBeneficiary = () => {
     if (!addFormBeneficiary.firstName || !addFormBeneficiary.lastName || !addFormBeneficiary.birthDate || !addFormBeneficiary.relationship || !addFormBeneficiary.address) {
       alert("Please fill in all required fields");
@@ -1177,6 +1342,7 @@ var Beneficiary = ({ onUpdate }) => {
     });
     setAddDialogOpen(false);
     console.log("Beneficiary added:", addFormBeneficiary);
+    syncBeneficiaries(newPrincipal, newContingent);
   };
   const formatFullName = (beneficiary) => {
     return [
@@ -1200,9 +1366,6 @@ var Beneficiary = ({ onUpdate }) => {
     setFormBeneficiary({ ...beneficiary });
     setEditDialogOpen(true);
   };
-  function handleDeleteBeneficiary(arg0, idx) {
-    throw new Error("Function not implemented.");
-  }
   const handleSaveEdit = () => {
     if (!selectedBeneficiary) return;
     let updatedPrincipal = principalBeneficiaries;
@@ -1218,9 +1381,26 @@ var Beneficiary = ({ onUpdate }) => {
       );
       setContingentBeneficiaries(updatedContingent);
     }
+    syncBeneficiaries(updatedPrincipal, updatedContingent);
     setEditDialogOpen(false);
     setSelectedBeneficiary(null);
   };
+  const handleDeleteBeneficiary = (type, index) => {
+    let updatedPrincipal = principalBeneficiaries;
+    let updatedContingent = contingentBeneficiaries;
+    if (type === "principal") {
+      updatedPrincipal = principalBeneficiaries.filter(
+        (_, beneficiaryIndex) => beneficiaryIndex !== index
+      );
+      setPrincipalBeneficiaries(updatedPrincipal);
+    } else {
+      updatedContingent = contingentBeneficiaries.filter(
+        (_, beneficiaryIndex) => beneficiaryIndex !== index
+      );
+      setContingentBeneficiaries(updatedContingent);
+    }
+    syncBeneficiaries(updatedPrincipal, updatedContingent);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       import_react10.Flex,
@@ -1240,14 +1420,14 @@ var Beneficiary = ({ onUpdate }) => {
             {
               placement: "center",
               motionPreset: "slide-in-bottom",
-              size: { mdDown: "full", md: "lg" },
+              size: { mdDown: "full", md: "xl" },
               open: addDialogOpen,
               onOpenChange: (details) => setAddDialogOpen(details.open),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Button, { w: { base: "full", md: "auto" }, children: "Add Beneficiary" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Portal, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Backdrop, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Dialog.Content, { mx: { base: 3, md: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Dialog.Content, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Title, { children: "Add Beneficiary" }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react10.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.VStack, { gap: 5, w: "full", align: "stretch", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1753,6 +1933,29 @@ var HealthDeclaration = () => {
     healthDeclaration3: false,
     healthDeclaration4: false
   });
+  (0, import_react12.useEffect)(() => {
+    let appData = loadApplicationDataFromLocalStorage();
+    if (!appData) {
+      appData = createEmptyApplicationData();
+      saveApplicationDataToLocalStorage(appData);
+    }
+    if (appData && appData.healthDeclaration) {
+      setHealthDeclarationValues(appData.healthDeclaration);
+    }
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    return () => {
+      const appData = loadApplicationDataFromLocalStorage();
+      if (appData) {
+        appData.healthDeclaration = healthDeclarationValues;
+        saveApplicationDataToLocalStorage(appData);
+        console.log(
+          "Health Declaration saved to localStorage",
+          healthDeclarationValues
+        );
+      }
+    };
+  }, [healthDeclarationValues]);
   const items = [
     {
       value: "first-item",
@@ -1889,76 +2092,15 @@ var HealthDeclaration = () => {
 var HealthDeclaration_default = HealthDeclaration;
 
 // src/NewSaleForm/LifePlanApplicationFormWrapper.tsx
-var import_react18 = require("@chakra-ui/react");
+var import_react17 = require("@chakra-ui/react");
 var import_fa2 = require("react-icons/fa");
 var import_io = require("react-icons/io");
 var import_lu3 = require("react-icons/lu");
-var import_react19 = require("react");
-var import_st_peter_ui3 = require("st-peter-ui");
-
-// src/lib/applicationData.ts
-var LIFE_PLAN_APPLICATION_KEY = "LifePlanApplication";
-var createEmptyApplicationData = () => ({
-  personalInfo: {
-    firstName: "",
-    middleName: "",
-    lastName: "",
-    suffix: "",
-    birthDate: "",
-    idType: "",
-    idNumber: "",
-    height: 0,
-    weight: 0,
-    gender: "",
-    civilStatus: "",
-    nationality: "",
-    mobileNumber: "",
-    emailAddress: "",
-    mailingAddress: "",
-    landLineNumber: ""
-  },
-  address: {
-    lot: "",
-    street: "",
-    barangay: "",
-    district: "",
-    city: "",
-    province: ""
-  },
-  employment: {
-    occupation: "",
-    employerName: "",
-    employmentStatus: "",
-    officeAddress: "",
-    TIN: "",
-    SSS: "",
-    sourceOfIncome: ""
-  },
-  beneficiaries: [],
-  healthDeclaration: {
-    healthDeclaration1: false,
-    healthDeclaration2: false,
-    healthDeclaration3: false,
-    healthDeclaration4: false
-  }
-});
-var loadApplicationDataFromLocalStorage = (storageKey = LIFE_PLAN_APPLICATION_KEY) => {
-  if (typeof window === "undefined") return null;
-  try {
-    const stored = window.localStorage.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 import_react18 = require("react");
 
 // src/NewSaleForm/ui/info-card.tsx
-var import_react14 = require("react");
-var import_react15 = require("@chakra-ui/react");
+var import_react14 = require("@chakra-ui/react");
+var import_st_peter_ui3 = require("st-peter-ui");
 var import_hi = require("react-icons/hi");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var InfoCard = ({
@@ -1966,28 +2108,35 @@ var InfoCard = ({
   icon = import_hi.HiInformationCircle
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_react15.HStack,
+    import_react14.HStack,
     {
-      gap: 3,
+      gap: STANDARD_SPACING.sm,
       align: "center",
       p: "8px",
-      borderRadius: "md",
+      borderRadius: STANDARD_RADIUS.md,
       bg: "#ebf4fb",
       borderWidth: "1px",
       borderColor: "#1976d2",
-      color: "#0b3d2e",
+      color: BRAND_COLORS.darkGreen,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Box, { as: icon, boxSize: "20px", color: "#1976d2", flexShrink: 0 }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react15.Text, { color: "#1976d2", fontSize: "xs", children })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react14.Box,
+          {
+            as: icon,
+            boxSize: STANDARD_SIZES.iconButton.sm,
+            color: "#1976d2",
+            flexShrink: 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react14.Text, { color: "#1976d2", fontSize: "xs", children })
       ]
     }
   );
 };
-var info_card_default = InfoCard;
 
 // src/NewSaleForm/ui/input-card-accordion.tsx
-var import_react16 = require("@chakra-ui/react");
-var import_react17 = require("react");
+var import_react15 = require("@chakra-ui/react");
+var import_react16 = require("react");
 var import_lu2 = require("react-icons/lu");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function InputCardAccordion({
@@ -2001,7 +2150,7 @@ function InputCardAccordion({
   onToggle,
   isComplete
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react17.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react16.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2019,7 +2168,7 @@ function InputCardAccordion({
   };
   const activeIcon = isOpen && openedIcon ? openedIcon : icon;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    import_react16.Box,
+    import_react15.Box,
     {
       w: "full",
       position: "relative",
@@ -2033,7 +2182,7 @@ function InputCardAccordion({
       cursor: "pointer",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          import_react16.Flex,
+          import_react15.Flex,
           {
             align: "center",
             justify: "space-between",
@@ -2048,9 +2197,9 @@ function InputCardAccordion({
             _hover: { bg: "gray.50" },
             transition: "background 0.15s ease",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react15.Flex, { align: "center", gap: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  import_react16.Box,
+                  import_react15.Box,
                   {
                     p: 2,
                     borderRadius: "full",
@@ -2060,28 +2209,29 @@ function InputCardAccordion({
                     children: activeIcon
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Box, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", children: title }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Flex, { align: "center", gap: 1, fontSize: "xs", color: "gray.500", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react15.Box, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.Text, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react15.Flex, { align: "center", gap: 1, fontSize: "xs", color: "gray.500", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuHash, { size: 12 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Text, { children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.Text, { children: subtitle })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react16.Flex, { align: "center", gap: 1.5, flexShrink: 0, children: [
-                isComplete && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Box, { color: "green.500", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuCheck, { size: 16 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Box, { color: "gray.400", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuChevronUp, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuChevronDown, { size: 16 }) })
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react15.Flex, { align: "center", gap: 1.5, flexShrink: 0, children: [
+                isComplete && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.Box, { color: "green.500", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuCheck, { size: 16 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.Box, { color: "gray.400", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuChevronUp, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lu2.LuChevronDown, { size: 16 }) })
               ] })
             ]
           }
         ),
-        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react16.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
+        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
       ]
     }
   );
 }
 
 // src/NewSaleForm/LifePlanApplicationFormWrapper.tsx
+var import_st_peter_ui4 = require("st-peter-ui");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var hasText = (value) => String(value ?? "").trim() !== "";
 var isPersonalComplete = (p) => !!p && [
@@ -2112,12 +2262,12 @@ var LifePlanApplicationFormWrapper = ({
   openSectionKey,
   onValidChange
 }) => {
-  const [applicationData, setApplicationData] = (0, import_react19.useState)(
+  const [applicationData, setApplicationData] = (0, import_react18.useState)(
     createEmptyApplicationData
   );
-  const [hydrated, setHydrated] = (0, import_react19.useState)(false);
-  const [openSections, setOpenSections] = (0, import_react19.useState)(["personal"]);
-  (0, import_react19.useEffect)(() => {
+  const [hydrated, setHydrated] = (0, import_react18.useState)(false);
+  const [openSections, setOpenSections] = (0, import_react18.useState)(["personal"]);
+  (0, import_react18.useEffect)(() => {
     const timeoutId = window.setTimeout(() => {
       const saved = loadApplicationDataFromLocalStorage();
       if (saved) setApplicationData(saved);
@@ -2125,15 +2275,15 @@ var LifePlanApplicationFormWrapper = ({
     }, 0);
     return () => window.clearTimeout(timeoutId);
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!hydrated) return;
     saveApplicationDataToLocalStorage(applicationData);
   }, [applicationData, hydrated]);
   const isComplete = isPersonalComplete(applicationData.personalInfo) && isAddressComplete(applicationData.address);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     onValidChange?.(isComplete);
   }, [isComplete, onValidChange]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!openSection) return;
     const timer = window.setTimeout(() => {
       setOpenSections(
@@ -2143,7 +2293,7 @@ var LifePlanApplicationFormWrapper = ({
     }, 80);
     return () => window.clearTimeout(timer);
   }, [openSection, openSectionKey]);
-  const handlePersonalInfoUpdate = (0, import_react19.useCallback)(
+  const handlePersonalInfoUpdate = (0, import_react18.useCallback)(
     (personalInfo) => {
       setApplicationData((prev) => ({
         ...prev,
@@ -2152,13 +2302,13 @@ var LifePlanApplicationFormWrapper = ({
     },
     []
   );
-  const handleAddressUpdate = (0, import_react19.useCallback)((address) => {
+  const handleAddressUpdate = (0, import_react18.useCallback)((address) => {
     setApplicationData((prev) => ({
       ...prev,
       address
     }));
   }, []);
-  const handleEmploymentUpdate = (0, import_react19.useCallback)((employment) => {
+  const handleEmploymentUpdate = (0, import_react18.useCallback)((employment) => {
     setApplicationData((prev) => ({
       ...prev,
       employment
@@ -2209,23 +2359,23 @@ var LifePlanApplicationFormWrapper = ({
       (prev) => prev.includes(value) ? prev.filter((sectionValue) => sectionValue !== value) : [...prev, value]
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react18.Box, { w: "full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react17.Box, { w: "full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react18.Flex,
+      import_react17.Flex,
       {
         direction: { base: "column", sm: "row" },
         align: { base: "stretch", sm: "center" },
         justify: "space-between",
         gap: STANDARD_SPACING.sm,
         mb: STANDARD_SPACING.sm,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react18.Flex, { direction: "column", gap: STANDARD_SPACING.xs, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(info_card_default, { children: "Sections below are expandable and collapsible. Use them to focus only on relevant details." }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react18.Flex, { gap: STANDARD_SPACING.xs, justify: "flex-end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_st_peter_ui3.TertiarySmButton, { onClick: expandAll, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react17.Flex, { direction: "column", gap: STANDARD_SPACING.xs, w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoCard, { children: "Sections below are expandable and collapsible. Use them to focus only on relevant details." }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react17.Flex, { gap: STANDARD_SPACING.xs, justify: "flex-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_st_peter_ui4.TertiarySmButton, { onClick: expandAll, children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuChevronsDown, { size: 14 }),
               "Expand All"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_st_peter_ui3.TertiarySmButton, { onClick: collapseAll, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_st_peter_ui4.TertiarySmButton, { onClick: collapseAll, children: [
               /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuChevronsUp, { size: 14 }),
               "Collapse All"
             ] })
@@ -2233,15 +2383,15 @@ var LifePlanApplicationFormWrapper = ({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react18.VStack, { align: "stretch", gap: 2, children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react18.Box,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react17.VStack, { align: "stretch", gap: 2, children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react17.Box,
       {
         id: `app-section-${section.value}`,
         scrollMarginTop: "80px",
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           InputCardAccordion,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react18.Icon, { as: section.icon, boxSize: "18px" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react17.Icon, { as: section.icon, boxSize: "18px" }),
             title: section.label,
             subtitle: section.description,
             isOpen: openSections.includes(section.value),
@@ -2258,107 +2408,126 @@ var LifePlanApplicationFormWrapper = ({
 var LifePlanApplicationFormWrapper_default = LifePlanApplicationFormWrapper;
 
 // src/NewSaleForm/SharedLifePlanApplication.tsx
-var import_react27 = require("@chakra-ui/react");
-var import_react28 = require("react");
+var import_react26 = require("@chakra-ui/react");
+var import_react27 = 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_react23 = require("@chakra-ui/react");
-var import_st_peter_ui5 = require("st-peter-ui");
+var import_react22 = 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_react24 = require("react");
+var import_fi = require("react-icons/fi");
+var import_react23 = require("react");
 
 // src/NewSaleForm/data/checkBoxList.tsx
-var import_react20 = require("@chakra-ui/react");
-var import_st_peter_ui4 = require("st-peter-ui");
+var import_react19 = require("@chakra-ui/react");
+var import_st_peter_ui5 = require("st-peter-ui");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var checkboxList = [
   {
     title: "TERMS OF USE",
     checkBoxTitle: "I hereby confirm that the information that I provided is correct and that I accept the TERMS AND CONDITIONS AND DATA PRIVACY AGREEMENT.",
-    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react20.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Please read these Terms and Conditions of Use carefully before using this website. Using this website means you have read, understood, agreed to and accepted these Terms and Conditions of Use. If you do not accept these Terms and Conditions of Use, do not use this website." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "CHANGES TO THIS TERMS AND USE" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "St. Peter Group reserves the right to change these Terms and Conditions of Use from time to time, in whole or in part, without prior notice. Your continued use of this Website after changes to the Terms and Conditions of Use have been published constitutes your binding agreement and acceptance of the updated Terms and Conditions of Use." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "TRADEMARKS" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "The trademarks, logos, and service marks displayed on this Website are the properties of the St. Peter Group. You are not permitted to use these items without prior written consent." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "INTELLECTUAL PROPERTY RIGHTS" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "The St. Peter Group owns the intellectual property rights in the content made available on this Website, or has obtained permission from the proper owners to make such content available." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "LINKS TO OTHER SITES" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "This website contains links to other websites for convenience only. St. Peter Group is not responsible for the content or availability of linked websites." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "RULES OF CONDUCT" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Your use of this Website is subject to all applicable laws. Do not post threatening, abusive, defamatory, obscene, hateful, or illegal content. Do not upload harmful software or attempt to disrupt the Website." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "DISCLAIMER" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "The Website is provided as is. St. Peter Group makes no warranties and is not liable for any damages, including loss of data, viruses, errors, or reliance on content." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "PRIVACY POLICY" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Please read our Privacy Policy." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react20.Separator, { my: 8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "HOW TO CONTACT US" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "If you have any concern regarding these Terms of Use, contact us:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { mt: 2, fontWeight: "semibold", children: "For website concerns: ronagl@stpeter.com.ph" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { mt: 2, fontWeight: "semibold", children: "For data privacy concerns: joycemb@stpeter.com.ph" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Small, { textAlign: "center", mt: 8, children: "This Terms of Use was amended on August 30, 2018" })
+    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react19.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Please read these Terms and Conditions of Use carefully before using this website. Using this website means you have read, understood, agreed to and accepted these Terms and Conditions of Use. If you do not accept these Terms and Conditions of Use, do not use this website." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "CHANGES TO THIS TERMS AND USE" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "St. Peter Group reserves the right to change these Terms and Conditions of Use from time to time, in whole or in part, without prior notice. Your continued use of this Website after changes to the Terms and Conditions of Use have been published constitutes your binding agreement and acceptance of the updated Terms and Conditions of Use. If at any time the Terms and Conditions of Use are not acceptable to you, you should immediately cease use of this website." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "TRADEMARKS" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "The trademarks, logos, and service marks displayed on this Website are the properties of the St. Peter Group or the St. Peter Group. You are not permitted to use these items without the prior written consent of St. Peter Group or the St. Peter Group." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "INTELLECTUAL PROPERTY RIGHTS" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "The St. Peter Group owns the intellectual property rights in the content that is made available on this Website, or has obtained the permission of the proper owner/s to make such content available. The St. Peter Group strictly prohibits the redistribution or copying of this Website, in whole or in part, without written permission." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "LINKS TO OTHER SITES" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "This website contains links to other websites and are provided for convenience only. St. Peter Group has not reviewed the linked websites and is not responsible for the content or availability of any linked websites. Inclusion of any link does not imply endorsement." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "SUBMISSION OF UNOFFICIAL IDEAS" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "St. Peter Group does not accept unsolicited unofficial ideas. Do not send original creative artwork, samples, demos, or other works. Any submissions will not be treated as confidential or proprietary." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "RULES OF CONDUCT" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Your use of this Website is subject to all applicable laws. Do not post threatening, abusive, defamatory, obscene, hateful, or illegal content. Do not upload harmful software or attempt to disrupt the Website." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { mt: 2, children: "You may not post advertisements, political materials, chain letters, spam, or use robots or scraping tools. You may not harvest data without consent." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "GLOBAL AVAILABILITY" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "St. Peter Group manages this site from the Philippines. You are responsible for complying with local laws if used from other locations. Some products may not be available worldwide." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "ACCURACY, COMPLETENESS AND TIMELINESS OF INFORMATION" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "St. Peter Group is not responsible if information on this Website is inaccurate or incomplete for very specific needs. You are responsible for monitoring changes." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "DISCLAIMER" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "The Website is provided \u201Cas is\u201D. St. Peter Group makes no warranties and is not liable for any damages, including loss of data, viruses, errors, or reliance on content." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "LIMITATION OF LIABILITY" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "St. Peter Group is not liable for any direct, indirect, punitive, special, incidental, or consequential damages, including loss of business or data." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { mt: 2, children: "Some jurisdictions may not allow the exclusion of certain damages." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "JURISDICTION" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "These Terms are governed by Philippine law. If any provision is held invalid, the remainder stays effective." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "PRIVACY POLICY" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Please read our Privacy Policy." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react19.Separator, { my: 8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "HOW TO CONTACT US" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "If you have any concern regarding these Terms of Use, contact us:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { mt: 2, fontWeight: "semibold", children: "For website concerns: ronagl@stpeter.com.ph" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { mt: 2, fontWeight: "semibold", children: "For data privacy concerns: joycemb@stpeter.com.ph" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Small, { textAlign: "center", mt: 8, children: "This Terms of Use was amended on August 30, 2018" })
     ] })
   },
   {
     title: "TERMS OF LIFE PLAN CONTRACT",
     checkBoxTitle: "I hereby confirm that the information that I provided is correct and that I accept the TERMS OF LIFE PLAN CONTRACT.",
-    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react20.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "ARTICLE I. DEFINITION OF TERMS" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "ST. PETER" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "ST. PETER LIFE PLAN, INC." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "PLANHOLDER" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the person who purchases and owns the plan for whom or for whose beneficiaries benefits are to be delivered, as stipulated and guaranteed by ST. PETER." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Contract" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the Life Plan Contract between ST. PETER and the PLANHOLDER providing the terms and conditions thereof." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Contract Price" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the stipulated price of the Life Plan which may be paid either in lump sum or in installments, net of handling fees and other charges, if any." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Gross Contract Price" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the stipulated price of the Life Plan which includes handling fees and other charges." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Plan Installment" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the monthly, quarterly, semi-annual or annual installment amounts paid by the PLANHOLDER." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Paying Period" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the period of time within which the PLANHOLDER has to pay for the Gross Contract Price of the plan in monthly, quarterly, semi-annual, annual installments or lump sum." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Due Date" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the date when the PLANHOLDER installment should be paid." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Beneficiary" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the person designated by the PLANHOLDER, in accordance with law, to receive the plan insurance proceeds and/or pre-need benefits in case of unrendered service." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Grace Period" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the sixty-day period given to the PLANHOLDER within which to pay accrued installments due, counted from the due date of the first unpaid installment in default." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Lapsed Plan" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to a delinquent plan which has remained unpaid beyond the grace period. A Lapsed Plan has no force and effect." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Reinstatement" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to the process of reactivating a lapsed plan." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Certificate of Full Payment" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "Refers to ST. PETER duly signed certification stating that a plan has been fully paid." })
+    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react19.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "ARTICLE I. DEFINITION OF TERMS" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "ST. PETER" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "ST. PETER LIFE PLAN, INC." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "PLANHOLDER" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the person who purchases and owns the plan for whom or for whose beneficiaries benefits are to be delivered, as stipulated and guaranteed by ST. PETER. The term includes the assignee, transferee, and any successor-in-interest of the PLANHOLDER." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Contract" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the Life Plan Contract between ST. PETER and the PLANHOLDER providing the terms and conditions thereof." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Contract Price" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the stipulated price of the Life Plan which may be paid either in lump sum or in installments, net of handling fees and other charges, if any." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Gross Contract Price" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the stipulated price of the Life Plan which includes handling fees and other charges." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Plan Installment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the monthly, quarterly, semi-annual or annual installment amounts paid by the PLANHOLDER." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Paying Period" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the period of time within which the PLANHOLDER has to pay for the Gross Contract Price of the plan in monthly, quarterly, semi-annual, annual installments or lump sum." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Due Date" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the date when the PLANHOLDER\u2019s installment should be paid." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Beneficiary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the person designated by the PLANHOLDER, in accordance with law, to receive the plan\u2019s insurance proceeds and/or pre-need benefits in case of unrendered service. The PLANHOLDER has the right to change the beneficiary/ies designated in the application subject to the submission of the standard form and approval." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Grace Period" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the sixty-day period given to the PLANHOLDER within which to pay accrued installments due, counted from the due date of the first unpaid installment in default, as stipulated in this Life Plan Contract." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Lapsed Plan" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to a delinquent plan which has remained unpaid beyond the grace period. A Lapsed Plan has no force and effect." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Reinstatement" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the process of reactivating a lapsed plan." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Certificate of Full Payment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to ST. PETER\u2019s duly signed certification stating that a plan has been fully paid." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "In Force Plan or Active Plan" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to a pre-need plan for which ST. PETER has an outstanding obligation, either for (1) delivery of benefits or services or (2) payment of termination value." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Mortuary Tie-Up" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the memorial servicing tie-up or mortuary accredited with ST. PETER which renders the memorial services stipulated hereunder." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Effective Date" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "Refers to the date when the payment of at least one (1) modal installment has been accepted and the purchase has been approved by ST. PETER with the issuance of this Contract and as indicated herein." })
     ] })
   },
   {
     title: "OUR CUSTOMER SERVICE CHARTER",
     checkBoxTitle: "I have read and understood the CUSTOMER SERVICE CHARTER.",
-    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react20.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { children: "We at ST. PETER LIFE PLAN, INC. hold ourselves as DeathCare Experts who aspire to be the most trusted and reliable provider in your Pre-Need Life Plan needs. We also aim to deliver world-class DeathCare services to our planholders." }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { fontWeight: "semibold", mt: 4, children: "Our customer service charter reflects our commitment to:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react20.Box, { as: "ul", listStyleType: "circle", listStylePosition: "inside", children: [
+    description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react19.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { children: "We at ST. PETER LIFE PLAN, INC. hold ourselves as DeathCare Experts who aspire to be the most trusted and reliable provider in your Pre-Need Life Plan needs. We also aim to deliver world-class DeathCare services to our planholders. At the core of our corporate values is customer satisfaction. We believe that every filipino family should have a St. Peter Life Plan. These are the pillars of our company\u2019s customer service commitment especially in our online facility and in social media." }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { fontWeight: "semibold", mt: 4, children: "Our customer service charter reflects our commitment to:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react19.Box, { as: "ul", listStyleType: "circle", listStylePosition: "inside", children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Safe and Secure Operations" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Maintenance of Customer Privacy" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Quality Services" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Transparent Product Information" }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Prompt Response to Inquiries and Complaints" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui4.Body, { mt: 4, fontWeight: "semibold", children: "OUR CUSTOMER SERVICE STANDARDS AND COMMITMENTS" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_st_peter_ui5.Body, { mt: 4, fontWeight: "semibold", children: "OUR CUSTOMER SERVICE STANDARDS AND COMMITMENTS" })
     ] })
   }
 ];
 
 // src/NewSaleForm/ui/info-card-accordion.tsx
-var import_react21 = require("@chakra-ui/react");
-var import_react22 = require("react");
+var import_react20 = require("@chakra-ui/react");
+var import_react21 = require("react");
 var import_lu4 = require("react-icons/lu");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function InfoCardAccordion({
@@ -2372,7 +2541,7 @@ function InfoCardAccordion({
   onToggle,
   onEdit
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react22.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const toggle = () => {
@@ -2390,7 +2559,7 @@ function InfoCardAccordion({
   };
   const activeIcon = isOpen && openedIcon ? openedIcon : icon;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react21.Box,
+    import_react20.Box,
     {
       w: "full",
       position: "relative",
@@ -2404,7 +2573,7 @@ function InfoCardAccordion({
       cursor: "pointer",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_react21.Flex,
+          import_react20.Flex,
           {
             align: "center",
             justify: "space-between",
@@ -2419,9 +2588,9 @@ function InfoCardAccordion({
             _hover: { bg: "gray.50" },
             transition: "background 0.15s ease",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Flex, { align: "center", gap: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_react21.Box,
+                  import_react20.Box,
                   {
                     p: 2,
                     borderRadius: "full",
@@ -2431,17 +2600,17 @@ function InfoCardAccordion({
                     children: activeIcon
                   }
                 ),
-                /* @__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.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.jsx)(import_lu4.LuHash, { size: 12 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Text, { children: subtitle })
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Text, { children: subtitle })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react21.Flex, { align: "center", gap: 1, flexShrink: 0, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react20.Flex, { align: "center", gap: 1, flexShrink: 0, children: [
                 onEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_react21.Button,
+                  import_react20.Button,
                   {
                     variant: "ghost",
                     p: 0,
@@ -2453,15 +2622,15 @@ function InfoCardAccordion({
                       e.stopPropagation();
                       onEdit();
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Icon, { as: import_lu4.LuPencil, boxSize: 4 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Icon, { as: import_lu4.LuPencil, boxSize: 4 })
                   }
                 ),
-                /* @__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 }) })
+                /* @__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 }) })
               ] })
             ]
           }
         ),
-        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react21.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
+        isOpen && children && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react20.Box, { p: 4, borderTopWidth: 1, borderColor: "gray.100", children })
       ]
     }
   );
@@ -2489,10 +2658,10 @@ var ApplicationAccordion = ({
   items,
   onEdit
 }) => {
-  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)(
+  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)(
     InfoCardAccordion,
     {
-      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: item.icon, boxSize: "18px" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: item.icon, boxSize: "18px" }),
       title: item.label,
       ...item.subtitle !== void 0 ? { subtitle: item.subtitle } : {},
       defaultOpen: index === 0,
@@ -2504,16 +2673,66 @@ var ApplicationAccordion = ({
 };
 var ReviewRows2 = ({
   rows
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.VStack, { align: "stretch", gap: 1, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(row_item_default, { label: row.label, value: row.value }, row.label)) });
+}) => /* @__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)) });
+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_react22.Text,
+    {
+      fontSize: "sm",
+      fontWeight: "600",
+      color: "gray.900",
+      wordBreak: "break-word",
+      children: row.value ?? "-"
+    }
+  )
+] }, row.label)) });
+var SectionCard = ({
+  title,
+  onEdit,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  import_react22.Box,
+  {
+    css: { breakInside: "avoid" },
+    mb: 6,
+    bg: "white",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    borderRadius: "xl",
+    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 }),
+        onEdit ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react22.IconButton,
+          {
+            "aria-label": `Edit ${title}`,
+            size: "sm",
+            variant: "ghost",
+            color: "gray.400",
+            _hover: { color: "green.600", bg: "green.50" },
+            onClick: onEdit,
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fi.FiEdit2, {})
+          }
+        ) : null
+      ] }),
+      children
+    ]
+  }
+);
 var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
-  const [cartItems, setCartItems] = (0, import_react24.useState)(null);
-  const [lifePlanApplication, setLifePlanApplication] = (0, import_react24.useState)(null);
-  const [openDialog, setOpenDialog] = (0, import_react24.useState)(false);
-  const [pendingCheck, setPendingCheck] = (0, import_react24.useState)(null);
-  const [acceptedAgreements, setAcceptedAgreements] = (0, import_react24.useState)(
+  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)(
     () => checkboxList.map(() => false)
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const loadStoredData = () => {
       try {
         const checkoutStored = sessionStorage.getItem("CheckoutCart");
@@ -2548,7 +2767,7 @@ 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_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     onAllAcceptedChange?.(allAccepted);
   }, [allAccepted, onAllAcceptedChange]);
   const beneficiaries = [
@@ -2575,335 +2794,265 @@ var Confirmation = ({ onAllAcceptedChange, onEdit }) => {
     setOpenDialog(false);
     setPendingCheck(null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Box, { minH: "100vh", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Box, { px: { base: 0, md: 8 }, pb: { base: 4, md: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react23.VStack, { align: "stretch", gap: 3, children: [
+  const orderRows = [
+    { label: "Selected Plan", value: selectedPlan?.planDesc },
+    { label: "Quantity", value: selectedPlan?.quantity },
+    {
+      label: "Total Amount Payable",
+      value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
+    }
+  ];
+  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
+    }
+  ];
+  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 }
+  ];
+  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
+    }
+  ];
+  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 }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      InfoCardAccordion,
+      ReviewRows2,
       {
-        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,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          ReviewRows2,
-          {
-            rows: [
-              {
-                label: "Selected Plan",
-                value: selectedPlan?.planDesc
-              },
-              {
-                label: "Quantity",
-                value: selectedPlan?.quantity
-              },
-              {
-                label: "Total Amount Payable",
-                value: selectedPlan ? `\u20B1 ${selectedPlan.total}` : void 0
-              }
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      ApplicationAccordion,
-      {
-        onEdit: onEdit ?? (() => {
-        }),
-        items: [
-          {
-            icon: import_fa3.FaRegUser,
-            label: "Personal Info",
-            subtitle: "Identification and full name",
-            value: "personal",
-            page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    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
-                  }
-                ]
-              }
-            )
-          },
-          {
-            icon: import_fa6.FaRegAddressCard,
-            label: "Address",
-            subtitle: "Where you currently live",
-            value: "address",
-            page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    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
-                  }
-                ]
-              }
-            )
-          },
-          {
-            icon: import_io2.IoIosInformationCircleOutline,
-            label: "Employment",
-            subtitle: "Work and income details",
-            value: "employment",
-            page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              ReviewRows2,
-              {
-                rows: [
-                  {
-                    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
-                  }
-                ]
-              }
-            )
-          }
+        rows: [
+          { label: "Relationship", value: beneficiary.relationship },
+          { label: "Date of Birth", value: beneficiary.dob },
+          { label: "Address", value: beneficiary.address }
         ]
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      InfoCardAccordion,
+    )
+  ] }, `${beneficiary.name}-${index}`)) });
+  const agreementItems = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.VStack, { align: "stretch", gap: 3, children: checkboxList.map((item, index) => {
+    const isAccepted = acceptedAgreements[index];
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react22.Box,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: import_fa3.FaRegUser, boxSize: "18px" }),
-        title: "Beneficiaries",
-        subtitle: `${beneficiaries.length} listed`,
-        children: /* @__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: beneficiary.name }),
+        role: "button",
+        tabIndex: 0,
+        p: 4,
+        borderWidth: "1px",
+        rounded: "xl",
+        bg: isAccepted ? "green.50" : "gray.50",
+        transition: "all 0.15s ease",
+        _hover: { bg: isAccepted ? "green.100" : "gray.100" },
+        onClick: () => {
+          setPendingCheck(index);
+          setOpenDialog(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setPendingCheck(index);
+            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: [
+              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)(
-            ReviewRows2,
+            import_react22.Badge,
             {
-              rows: [
-                {
-                  label: "Relationship",
-                  value: beneficiary.relationship
-                },
-                {
-                  label: "Date of Birth",
-                  value: beneficiary.dob
-                },
-                {
-                  label: "Address",
-                  value: beneficiary.address
-                }
-              ]
+              variant: "subtle",
+              colorPalette: isAccepted ? "green" : "gray",
+              children: isAccepted ? "Accepted" : "Review"
             }
           )
-        ] }, `${beneficiary.name}-${index}`)) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      InfoCardAccordion,
-      {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react23.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
-        title: "Agreements",
-        subtitle: `${acceptedCount}/${checkboxList.length} accepted`,
-        children: /* @__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_react23.Box,
+        ] })
+      },
+      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: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
+          title: "Order Summary",
+          subtitle: modeLabel(selectedPlan?.mode),
+          defaultOpen: true,
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReviewRows2, { rows: orderRows })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        ApplicationAccordion,
+        {
+          onEdit: onEdit ?? (() => {
+          }),
+          items: [
             {
-              role: "button",
-              tabIndex: 0,
-              p: 4,
-              borderWidth: "1px",
-              rounded: "xl",
-              bg: isAccepted ? "green.50" : "gray.50",
-              transition: "all 0.15s ease",
-              _hover: { bg: isAccepted ? "green.100" : "gray.100" },
-              onClick: () => {
-                setPendingCheck(index);
-                setOpenDialog(true);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setPendingCheck(index);
-                  setOpenDialog(true);
-                }
-              },
-              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_react23.Text,
-                    {
-                      fontSize: "sm",
-                      color: "gray.600",
-                      mt: 1,
-                      lineClamp: 1,
-                      children: "Tap to review details."
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  import_react23.Badge,
-                  {
-                    variant: "subtle",
-                    colorPalette: isAccepted ? "green" : "gray",
-                    children: isAccepted ? "Accepted" : "Review"
-                  }
-                )
-              ] })
+              icon: import_fa3.FaRegUser,
+              label: "Personal Info",
+              subtitle: "Identification and full name",
+              value: "personal",
+              page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReviewRows2, { rows: personalRows })
             },
-            index
-          );
-        }) })
+            {
+              icon: import_fa6.FaRegAddressCard,
+              label: "Address",
+              subtitle: "Where you currently live",
+              value: "address",
+              page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReviewRows2, { rows: addressRows })
+            },
+            {
+              icon: import_io2.IoIosInformationCircleOutline,
+              label: "Employment",
+              subtitle: "Work and income details",
+              value: "employment",
+              page: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReviewRows2, { rows: employmentRows })
+            }
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_fa3.FaRegUser, boxSize: "18px" }),
+          title: "Beneficiaries",
+          subtitle: `${beneficiaries.length} listed`,
+          children: beneficiaryItems
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        InfoCardAccordion,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react22.Icon, { as: import_io2.IoIosInformationCircleOutline, boxSize: "18px" }),
+          title: "Agreements",
+          subtitle: `${acceptedCount}/${checkboxList.length} accepted`,
+          children: agreementItems
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_react22.Box,
+      {
+        display: { base: "none", lg: "block" },
+        css: { columnCount: 2, columnGap: "24px" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            SectionCard,
+            {
+              title: "Personal Information",
+              onEdit: () => onEdit?.("personal"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldGrid, { rows: personalRows })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionCard, { title: "Order Summary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldGrid, { rows: orderRows }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SectionCard, { title: "Address", onEdit: () => onEdit?.("address"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldGrid, { rows: addressRows }) }),
+          /* @__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: [
+              acceptedCount,
+              "/",
+              checkboxList.length,
+              " accepted"
+            ] }),
+            agreementItems
+          ] })
+        ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_react23.Dialog.Root,
+      import_react22.Dialog.Root,
       {
         open: openDialog,
         onOpenChange: (details) => setOpenDialog(details.open),
         size: { mdDown: "full", md: "xl" },
         scrollBehavior: "inside",
-        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,
+        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,
             {
               bg: "white",
               rounded: "xl",
               shadow: "lg",
               overflow: "hidden",
               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_ui5.H3, { children: pendingCheck !== null ? pendingAgreement?.title || "Agreement" : "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_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_ui5.CancelButton,
-                        {
-                          onClick: () => {
-                            setOpenDialog(false);
-                            setPendingCheck(null);
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_st_peter_ui5.ConfirmButton, { onClick: confirmAgreement })
-                    ] })
-                  }
-                )
+                /* @__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_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_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_st_peter_ui6.CancelButton,
+                    {
+                      onClick: () => {
+                        setOpenDialog(false);
+                        setPendingCheck(null);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_st_peter_ui6.ConfirmButton, { onClick: confirmAgreement })
+                ] }) })
               ]
             }
           ) })
         ] })
       }
     )
-  ] }) }) });
+  ] }) });
 };
 var confirmation_default = Confirmation;
 
@@ -2971,33 +3120,52 @@ var createLifePlanSteps = (confirmationProps) => [
 ];
 
 // src/NewSaleForm/ui/horizontal-stepper.tsx
-var import_react25 = require("react");
-var import_react26 = require("@chakra-ui/react");
-var import_st_peter_ui6 = require("st-peter-ui");
+var import_react24 = require("react");
+var import_react25 = 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");
+var PRIMARY = "var(--chakra-colors-primary)";
+var PRIMARY_HOVER = "var(--chakra-colors-primary-hover)";
+var PRIMARY_DISABLED = "var(--chakra-colors-primary-disabled)";
 var HorizontalStepper = ({
   steps,
+  title,
+  description,
   onStepChange,
   onSubmit,
   submitDisabled,
   activeStep: controlledActiveStep,
-  nextDisabled
+  nextDisabled,
+  submitButtonText = "Proceed To Payment"
 }) => {
-  const [localActiveStep, setLocalActiveStep] = (0, import_react25.useState)(0);
+  const [localActiveStep, setLocalActiveStep] = (0, import_react24.useState)(0);
   const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
+  const formTopRef = (0, import_react24.useRef)(null);
+  const isCompact = steps.length < 3;
+  const isLastStep = activeStep === steps.length - 1;
+  const nextStepTitle = steps[activeStep + 1]?.title;
+  const scrollToTop = () => {
+    requestAnimationFrame(() => {
+      formTopRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    });
+  };
   const handleStepChange = (index) => {
     if (controlledActiveStep === void 0) {
       setLocalActiveStep(index);
     }
     onStepChange?.(index);
+    scrollToTop();
   };
   const handleNext = () => {
     if (nextDisabled) return;
     handleStepChange(Math.min(activeStep + 1, steps.length - 1));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react26.Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_react25.Flex,
     {
       direction: "column",
       align: "start",
@@ -3005,108 +3173,285 @@ var HorizontalStepper = ({
       w: "full",
       overflow: "visible",
       pb: { base: "12px", md: "0px" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", colorPalette: "green", rounded: "2xl", p: 1, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-        import_react26.Steps.Root,
-        {
-          step: activeStep,
-          onStepChange: (index) => {
-            handleStepChange(index.step);
-          },
-          defaultStep: 0,
-          count: steps.length,
-          colorPalette: "green",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react26.Steps.List,
-              {
-                flexDirection: "row",
-                w: "full",
-                py: 2,
-                alignItems: "flex-start",
-                children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                  import_react26.Steps.Item,
-                  {
-                    index,
-                    title: step.title,
-                    minW: { base: "0px", md: "auto" },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                        import_react26.Steps.Trigger,
-                        {
-                          flexDirection: "column",
-                          alignItems: "center",
-                          gap: 1,
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Indicator, { children: 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_react26.Steps.Title,
-                              {
-                                fontSize: { base: "xs", md: "sm" },
-                                textAlign: "center",
-                                whiteSpace: "normal",
-                                wordBreak: "break-word",
-                                children: step.title
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Separator, { display: { base: "none", md: "block" } })
-                    ]
-                  },
-                  index
-                ))
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Separator, { variant: "solid", mb: 3 }),
-            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_react26.Flex,
-              {
-                w: "full",
-                justify: "space-between",
-                align: "center",
-                mb: 1,
-                display: { base: "flex", md: "none" },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    import_react26.IconButton,
-                    {
-                      "aria-label": "Previous step",
-                      size: "sm",
-                      variant: "outline",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {})
-                    }
-                  ) }),
-                  activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                    import_react26.IconButton,
-                    {
-                      "aria-label": "Next step",
-                      size: "sm",
-                      variant: "outline",
-                      disabled: !!nextDisabled,
-                      onClick: handleNext,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, {})
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react26.ButtonGroup,
-              {
-                size: "sm",
-                variant: "outline",
-                display: { base: "none", md: "flex" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 4, 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.jsx)(import_st_peter_ui6.SecondaryMdButton, { children: "Previous" }) }),
-                  activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.NextButton, { disabled: !!nextDisabled, onClick: handleNext }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
-                ] })
-              }
-            )
-          ]
-        }
-      ) })
+      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: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_react25.Box,
+            {
+              as: "h1",
+              m: "0",
+              fontFamily: "var(--font-dm-sans), system-ui, sans-serif",
+              fontWeight: description ? 600 : 500,
+              color: "gray.900",
+              lineHeight: "1.1",
+              letterSpacing: description ? "-0.025em" : "-0.015em",
+              fontSize: {
+                base: description ? "22px" : "24px",
+                lg: description ? "28px" : "32px"
+              },
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.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,
+          {
+            step: activeStep,
+            onStepChange: (index) => handleStepChange(index.step),
+            defaultStep: 0,
+            count: steps.length,
+            colorPalette: "green",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                import_react25.Box,
+                {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 10,
+                  bg: "white",
+                  pt: 2,
+                  pb: 3,
+                  mx: -1,
+                  px: 1,
+                  borderBottomWidth: "1px",
+                  borderColor: "gray.100",
+                  boxShadow: "0 2px 8px -2px rgba(0,0,0,0.06)",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      import_react25.Steps.List,
+                      {
+                        py: 0,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        w: "full",
+                        justifyContent: "space-evenly",
+                        children: steps.map((step, index) => {
+                          const isCompleted = index < activeStep;
+                          const isActive = index === activeStep;
+                          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                            import_react25.Steps.Item,
+                            {
+                              index,
+                              title: step.title,
+                              minW: { base: "0px", md: "auto" },
+                              flex: isCompact ? "0 0 auto" : "1",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                                  import_react25.Steps.Trigger,
+                                  {
+                                    flexDirection: isCompact ? "row" : "column",
+                                    alignItems: "center",
+                                    gap: isCompact ? 2 : 1,
+                                    px: isCompact ? 3 : 2,
+                                    py: isCompact ? 2 : 1,
+                                    borderRadius: "lg",
+                                    transition: "background 0.2s",
+                                    _hover: { bg: "gray.50" },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                        import_react25.Steps.Indicator,
+                                        {
+                                          borderWidth: "2px",
+                                          transition: "all 0.25s",
+                                          style: {
+                                            borderColor: isCompleted || isActive ? PRIMARY : void 0,
+                                            background: isCompleted ? PRIMARY : void 0,
+                                            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
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                        import_react25.Steps.Title,
+                                        {
+                                          fontSize: { base: "xs", md: "sm" },
+                                          textAlign: isCompact ? "left" : "center",
+                                          whiteSpace: "normal",
+                                          wordBreak: "break-word",
+                                          fontWeight: isActive ? 600 : 400,
+                                          color: isActive ? "gray.900" : isCompleted ? "gray.600" : "gray.400",
+                                          transition: "color 0.2s",
+                                          children: step.title
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                !isCompact && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                                  import_react25.Steps.Separator,
+                                  {
+                                    display: { base: "none", md: "block" }
+                                  }
+                                )
+                              ]
+                            },
+                            index
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      import_react25.Box,
+                      {
+                        w: "full",
+                        h: "3px",
+                        bg: "gray.100",
+                        borderRadius: "full",
+                        overflow: "hidden",
+                        mt: 1,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          import_react25.Box,
+                          {
+                            h: "full",
+                            bg: PRIMARY,
+                            transition: "width 0.4s ease",
+                            w: `${(activeStep + 1) / steps.length * 100}%`
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react25.Steps.Content, { index, children: step.component ?? step.description }, index)),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                import_react25.Flex,
+                {
+                  w: "full",
+                  justify: "space-between",
+                  align: "center",
+                  mt: 4,
+                  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,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        border: "1.5px solid",
+                        borderColor: "gray.200",
+                        bg: "white",
+                        color: "gray.700",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        _hover: { bg: "gray.50" },
+                        _disabled: { opacity: 0.4, cursor: "not-allowed" },
+                        transition: "all 0.15s",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, { size: 14 }),
+                          "Back"
+                        ]
+                      }
+                    ) }),
+                    !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      import_react25.Box,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: nextDisabled ? "not-allowed" : "pointer",
+                        opacity: nextDisabled ? 0.5 : 1,
+                        pointerEvents: nextDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: handleNext,
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 14 })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      import_react25.Box,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: submitDisabled ? "not-allowed" : "pointer",
+                        opacity: submitDisabled ? 0.5 : 1,
+                        pointerEvents: submitDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: onSubmit,
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          submitButtonText,
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_react25.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: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {}),
+                      "Previous"
+                    ] }) }),
+                    !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      import_react25.Box,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1.5,
+                        px: 4,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 600,
+                        cursor: nextDisabled ? "not-allowed" : "pointer",
+                        opacity: nextDisabled ? 0.5 : 1,
+                        pointerEvents: nextDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: handleNext,
+                        boxShadow: "0 1px 3px 0 rgba(0,0,0,0.12)",
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 15 })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui7.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: submitButtonText })
+                  ] })
+                }
+              )
+            ]
+          }
+        ) })
+      ]
     }
   );
 };
@@ -3119,12 +3464,12 @@ var SharedLifePlanApplication = ({
   description = "Please fill out the form below to apply for a life plan.",
   onPaymentError
 }) => {
-  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 [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 steps = createLifePlanSteps({
     onAllAcceptedChange: setAllAgreementsAccepted,
     ...applicationSection ? { applicationSection } : {},
@@ -3141,7 +3486,7 @@ var SharedLifePlanApplication = ({
     if (!allAgreementsAccepted) return;
     setLoading(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react27.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react26.Box, { w: "full", overflowX: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     horizontal_stepper_default,
     {
       steps,
@@ -3163,40 +3508,10 @@ var LifePlanApplicationStepWrapper = () => {
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
 // src/Generic/BottomQuickActions.tsx
-var import_react29 = __toESM(require("react"));
-var import_react30 = require("@chakra-ui/react");
+var import_react28 = __toESM(require("react"));
+var import_react29 = require("@chakra-ui/react");
 var import_lu6 = require("react-icons/lu");
 var import_link = __toESM(require("next/link"));
-
-// src/lib/theme/brand-colors.ts
-var BRAND_COLORS = {
-  primaryGreen: "#109448",
-  darkGreen: "#006838",
-  softGreen: "#92DDBF",
-  pastelPeaGreen: "#ACD6A6",
-  seafoamGreen: "#92DDBF",
-  lightCyan: "#D3EDEE",
-  successBg: "#F0FDF4",
-  warningBg: "#FFF7ED",
-  warningText: "#F1592B",
-  warningBorder: "#F4845F",
-  errorBg: "#FEF2F2",
-  destructiveRed: "#BF1F2F",
-  errorRed: "#EF4444",
-  neutralText: "#22223B",
-  neutralBorder: "#E5E7EB",
-  mutedBg: "#F3F4F6",
-  subtleBg: "#F9FAFB",
-  white: "#FFFFFF",
-  black: "#000000",
-  grey: "#808080",
-  ashWhite: "#ECECEC",
-  gold: "#CBA135",
-  brightGold: "#FFD026",
-  paleGold: "#FFF48E"
-};
-
-// src/Generic/BottomQuickActions.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
@@ -3214,7 +3529,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_react29.default.memo(
+var QuickActionsHeaderCard = import_react28.default.memo(
   ({
     initials,
     avatarBg = AVATAR_DEFAULT_BG,
@@ -3222,7 +3537,7 @@ var QuickActionsHeaderCard = import_react29.default.memo(
     meta,
     trailing
   }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react30.HStack,
+    import_react29.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -3233,7 +3548,7 @@ var QuickActionsHeaderCard = import_react29.default.memo(
       borderColor: HEADER_CARD_BORDER,
       children: [
         initials && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react30.Flex,
+          import_react29.Flex,
           {
             w: "40px",
             h: "40px",
@@ -3243,7 +3558,7 @@ var QuickActionsHeaderCard = import_react29.default.memo(
             justify: "center",
             flexShrink: 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-              import_react30.Text,
+              import_react29.Text,
               {
                 fontSize: "14px",
                 fontWeight: "700",
@@ -3254,9 +3569,9 @@ var QuickActionsHeaderCard = import_react29.default.memo(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react30.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react30.Text,
+            import_react29.Text,
             {
               fontSize: "15px",
               fontWeight: "700",
@@ -3269,7 +3584,7 @@ var QuickActionsHeaderCard = import_react29.default.memo(
             }
           ),
           meta && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react30.Text,
+            import_react29.Text,
             {
               fontSize: "12px",
               color: SUBTITLE_COLOR,
@@ -3290,11 +3605,11 @@ var QuickActionsHeaderCard = import_react29.default.memo(
 var ITEM_TRANSITION = {
   transition: "background 0.15s ease, transform 0.1s ease"
 };
-var ActionItem = import_react29.default.memo(({ action }) => {
+var ActionItem = import_react28.default.memo(({ action }) => {
   const iconBg = action.iconBg ?? DEFAULT_ICON_BG;
   const iconColor = action.iconColor ?? DEFAULT_ICON_COLOR;
   const inner = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_react30.HStack,
+    import_react29.HStack,
     {
       gap: STANDARD_SPACING.sm,
       px: STANDARD_SPACING.sm,
@@ -3317,7 +3632,7 @@ var ActionItem = import_react29.default.memo(({ action }) => {
       style: ITEM_TRANSITION,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react30.Flex,
+          import_react29.Flex,
           {
             w: "40px",
             h: "40px",
@@ -3326,12 +3641,12 @@ var ActionItem = import_react29.default.memo(({ action }) => {
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Icon, { as: action.icon, boxSize: "20px", color: iconColor })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react30.Box, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react30.Text,
+            import_react29.Text,
             {
               fontSize: "15px",
               fontWeight: "600",
@@ -3341,7 +3656,7 @@ var ActionItem = import_react29.default.memo(({ action }) => {
             }
           ),
           action.description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            import_react30.Text,
+            import_react29.Text,
             {
               fontSize: "12px",
               color: DESC_COLOR,
@@ -3355,7 +3670,7 @@ var ActionItem = import_react29.default.memo(({ action }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react30.Icon,
+          import_react29.Icon,
           {
             as: import_lu6.LuChevronRight,
             boxSize: "18px",
@@ -3387,15 +3702,15 @@ var BottomQuickActions = ({
   actions
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_react30.Drawer.Root,
+    import_react29.Drawer.Root,
     {
       open,
       onOpenChange: (e) => onOpenChange(e.open),
       placement: "bottom",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react30.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Drawer.Backdrop, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Drawer.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react30.Drawer.Content,
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.Backdrop, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          import_react29.Drawer.Content,
           {
             borderTopRadius: "l3",
             borderBottomRadius: "0",
@@ -3405,8 +3720,8 @@ var BottomQuickActions = ({
             pb: `calc(${STANDARD_SPACING.sm} + env(safe-area-inset-bottom))`,
             boxShadow: STANDARD_SHADOWS.level4,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Flex, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_react30.Box,
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Flex, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                import_react29.Box,
                 {
                   w: "36px",
                   h: "4px",
@@ -3415,16 +3730,16 @@ var BottomQuickActions = ({
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_react30.Drawer.Header,
+                import_react29.Drawer.Header,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: "12px",
                   pb: "0",
                   borderBottomWidth: "0",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react30.Flex, { align: "flex-start", justify: "space-between", gap: "12px", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react30.Box, { flex: "1", minW: 0, children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Flex, { align: "flex-start", justify: "space-between", gap: "12px", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react29.Box, { flex: "1", minW: 0, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react30.Drawer.Title,
+                        import_react29.Drawer.Title,
                         {
                           fontSize: "18px",
                           fontWeight: "700",
@@ -3435,7 +3750,7 @@ var BottomQuickActions = ({
                         }
                       ),
                       subtitle && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react30.Text,
+                        import_react29.Text,
                         {
                           fontSize: "13px",
                           color: SUBTITLE_COLOR,
@@ -3446,8 +3761,8 @@ var BottomQuickActions = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                      import_react30.CloseButton,
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      import_react29.CloseButton,
                       {
                         size: "sm",
                         color: BRAND_COLORS.neutralText,
@@ -3459,14 +3774,14 @@ var BottomQuickActions = ({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-                import_react30.Drawer.Body,
+                import_react29.Drawer.Body,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: STANDARD_SPACING.sm,
                   pb: "4px",
                   children: [
-                    headerSlot && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.Box, { mb: STANDARD_SPACING.xs, children: headerSlot }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react30.VStack, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionItem, { action }, i)) })
+                    headerSlot && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.Box, { mb: STANDARD_SPACING.xs, children: headerSlot }),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react29.VStack, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionItem, { action }, i)) })
                   ]
                 }
               )
@@ -3480,18 +3795,18 @@ var BottomQuickActions = ({
 var BottomQuickActions_default = BottomQuickActions;
 
 // src/Generic/NotifyInstall.tsx
-var import_react32 = require("react");
-var import_react33 = require("@chakra-ui/react");
-var import_react34 = require("motion/react");
-var import_fi = require("react-icons/fi");
+var import_react31 = require("react");
+var import_react32 = require("@chakra-ui/react");
+var import_react33 = require("motion/react");
+var import_fi2 = require("react-icons/fi");
 
 // src/hooks/useNotifyInstall.ts
-var import_react31 = require("react");
+var import_react30 = require("react");
 function useNotifyInstall() {
-  const [isInstalled, setIsInstalled] = (0, import_react31.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react31.useState)(false);
-  const [installPrompt, setInstallPrompt] = (0, import_react31.useState)(null);
-  (0, import_react31.useEffect)(() => {
+  const [isInstalled, setIsInstalled] = (0, import_react30.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react30.useState)(false);
+  const [installPrompt, setInstallPrompt] = (0, import_react30.useState)(null);
+  (0, import_react30.useEffect)(() => {
     const mobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
     setIsMobile(mobile);
     const installed = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
@@ -3525,8 +3840,8 @@ function useNotifyInstall() {
 // src/Generic/NotifyInstall.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var STEPS = [
-  { icon: import_fi.FiShare, label: "Tap the browser menu or Share button" },
-  { icon: import_fi.FiPlusSquare, label: 'Choose "Add to Home Screen"' }
+  { icon: import_fi2.FiShare, label: "Tap the browser menu or Share button" },
+  { icon: import_fi2.FiPlusSquare, label: 'Choose "Add to Home Screen"' }
 ];
 var DISMISSED_KEY = "estore-install-dialog-dismissed";
 function NotifyInstall({
@@ -3534,8 +3849,8 @@ function NotifyInstall({
   appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = (0, import_react32.useState)(true);
-  (0, import_react32.useEffect)(() => {
+  const [isDismissed, setIsDismissed] = (0, import_react31.useState)(true);
+  (0, import_react31.useEffect)(() => {
     if (localStorage.getItem(DISMISSED_KEY) !== "true") {
       setIsDismissed(false);
     }
@@ -3547,9 +3862,9 @@ function NotifyInstall({
   const showPrompt = isMobile && !isInstalled && !isDismissed;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react34.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react34.motion.div,
+        import_react33.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -3568,7 +3883,7 @@ function NotifyInstall({
         "install-backdrop"
       ),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-        import_react34.motion.div,
+        import_react33.motion.div,
         {
           initial: { y: "100%" },
           animate: { y: 0 },
@@ -3605,12 +3920,12 @@ function NotifyInstall({
                   justifyContent: "center",
                   color: "#9ca3af"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiX, { size: 18 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi2.FiX, { size: 18 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
               /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react33.Flex,
+                import_react32.Flex,
                 {
                   boxSize: 16,
                   align: "center",
@@ -3619,12 +3934,12 @@ function NotifyInstall({
                   bg: "green.50",
                   color: "green.600",
                   shadow: "sm",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload, boxSize: 8 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: import_fi2.FiDownload, boxSize: 8 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.VStack, { gap: 2, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                  import_react33.Text,
+                  import_react32.Text,
                   {
                     fontSize: "lg",
                     fontWeight: "bold",
@@ -3636,10 +3951,10 @@ function NotifyInstall({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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_runtime19.jsx)(import_react32.Text, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
               ] }),
               canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                import_react33.Button,
+                import_react32.Button,
                 {
                   onClick: install,
                   colorPalette: "green",
@@ -3647,12 +3962,12 @@ function NotifyInstall({
                   w: "full",
                   rounded: "xl",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: import_fi2.FiDownload }),
                     "Add to Home Screen"
                   ]
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react33.VStack,
+                import_react32.VStack,
                 {
                   w: "full",
                   bg: "gray.50",
@@ -3662,9 +3977,9 @@ function NotifyInstall({
                   p: 4,
                   gap: 4,
                   align: "stretch",
-                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
+                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.HStack, { gap: 3, align: "center", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_react33.Flex,
+                      import_react32.Flex,
                       {
                         boxSize: 9,
                         flexShrink: 0,
@@ -3675,10 +3990,10 @@ function NotifyInstall({
                         borderWidth: "1px",
                         borderColor: "gray.200",
                         color: "green.600",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: step.icon, boxSize: 4 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Icon, { as: step.icon, boxSize: 4 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
                   ] }, i))
                 }
               )
@@ -3692,8 +4007,8 @@ function NotifyInstall({
 }
 
 // src/UserProfile/UserProfile.tsx
-var import_react35 = require("react");
-var import_react36 = require("@chakra-ui/react");
+var import_react34 = require("react");
+var import_react35 = require("@chakra-ui/react");
 var import_ri = require("react-icons/ri");
 var import_lu7 = require("react-icons/lu");
 var import_hi2 = require("react-icons/hi2");
@@ -4000,28 +4315,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = (0, import_react35.useState)("main");
-  const [fallbackColorMode, setFallbackColorMode] = (0, import_react35.useState)("light");
+  const [profileView, setProfileView] = (0, import_react34.useState)("main");
+  const [fallbackColorMode, setFallbackColorMode] = (0, import_react34.useState)("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = (0, import_react35.useState)("md");
-  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react35.useState)(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = (0, import_react35.useState)(null);
-  const [editName, setEditName] = (0, import_react35.useState)(user.displayName);
-  const [editLoading, setEditLoading] = (0, import_react35.useState)(false);
-  const [currentPw, setCurrentPw] = (0, import_react35.useState)("");
-  const [newPw, setNewPw] = (0, import_react35.useState)("");
-  const [confirmPw, setConfirmPw] = (0, import_react35.useState)("");
-  const [showCurrentPw, setShowCurrentPw] = (0, import_react35.useState)(false);
-  const [showNewPw, setShowNewPw] = (0, import_react35.useState)(false);
-  const [showConfirmPw, setShowConfirmPw] = (0, import_react35.useState)(false);
-  const [pwLoading, setPwLoading] = (0, import_react35.useState)(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react35.useState)(
+  const [fontSize, setFontSizeLocal] = (0, import_react34.useState)("md");
+  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react34.useState)(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = (0, import_react34.useState)(null);
+  const [editName, setEditName] = (0, import_react34.useState)(user.displayName);
+  const [editLoading, setEditLoading] = (0, import_react34.useState)(false);
+  const [currentPw, setCurrentPw] = (0, import_react34.useState)("");
+  const [newPw, setNewPw] = (0, import_react34.useState)("");
+  const [confirmPw, setConfirmPw] = (0, import_react34.useState)("");
+  const [showCurrentPw, setShowCurrentPw] = (0, import_react34.useState)(false);
+  const [showNewPw, setShowNewPw] = (0, import_react34.useState)(false);
+  const [showConfirmPw, setShowConfirmPw] = (0, import_react34.useState)(false);
+  const [pwLoading, setPwLoading] = (0, import_react34.useState)(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react34.useState)(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = (0, import_react35.useState)(false);
-  const isDesktopRaw = (0, import_react36.useBreakpointValue)({ base: false, md: true });
+  const [isMounted, setIsMounted] = (0, import_react34.useState)(false);
+  const isDesktopRaw = (0, import_react35.useBreakpointValue)({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4032,10 +4347,10 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
-  const availableOptions = (0, import_react35.useMemo)(
+  const availableOptions = (0, import_react34.useMemo)(
     () => availableNavOptions.filter(
       (option) => !user.role || option.roles.includes(user.role)
     ),
@@ -4165,7 +4480,7 @@ function ReusableProfile({
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
   const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_react36.Box,
+      import_react35.Box,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4174,20 +4489,20 @@ function ReusableProfile({
         textAlign: "center",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react36.Avatar.Root,
+            import_react35.Avatar.Root,
             {
               size: "2xl",
               mx: "auto",
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: user.displayName })
+                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Text,
+            import_react35.Text,
             {
               color: "white",
               fontWeight: "bold",
@@ -4197,9 +4512,9 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Badge,
+          user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Badge,
             {
               bg: "rgba(255,255,255,0.15)",
               color: "white",
@@ -4215,9 +4530,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Text,
+        import_react35.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4229,7 +4544,7 @@ function ReusableProfile({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Box,
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4238,7 +4553,7 @@ function ReusableProfile({
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react36.Flex,
+            import_react35.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4247,9 +4562,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.Box,
+                    import_react35.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4263,9 +4578,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4274,9 +4589,9 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Box,
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4288,7 +4603,7 @@ function ReusableProfile({
             setProfileView("change-password");
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react36.Flex,
+            import_react35.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4297,9 +4612,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.Box,
+                    import_react35.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4313,9 +4628,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4324,11 +4639,11 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4342,13 +4657,13 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Box,
+          import_react35.Box,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4371,7 +4686,7 @@ function ReusableProfile({
             flexShrink: 0,
             outline: "none",
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.Box,
+              import_react35.Box,
               {
                 position: "absolute",
                 top: "3px",
@@ -4388,9 +4703,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Text,
+        import_react35.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4401,10 +4716,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4418,15 +4733,15 @@ function ReusableProfile({
               children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
           return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react36.Button,
+            import_react35.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4443,7 +4758,7 @@ function ReusableProfile({
               children: [
                 mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 13 }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  import_react36.Text,
+                  import_react35.Text,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4457,11 +4772,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4477,15 +4792,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
           return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Button,
+            import_react35.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4501,7 +4816,7 @@ function ReusableProfile({
               onClick: () => handleFontSize(option.value),
               title: option.title,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react36.Text,
+                import_react35.Text,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4513,9 +4828,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Box,
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4523,10 +4838,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react36.Box,
+                import_react35.Box,
                 {
                   w: "38px",
                   h: "38px",
@@ -4540,9 +4855,9 @@ function ReusableProfile({
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4555,8 +4870,8 @@ function ReusableProfile({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react36.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react35.Button,
       {
         w: "full",
         variant: "outline",
@@ -4569,9 +4884,9 @@ function ReusableProfile({
     ) }) })
   ] });
   const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.IconButton,
+        import_react35.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -4581,17 +4896,17 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: editName })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Input,
+          import_react35.Input,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -4600,10 +4915,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Input,
+          import_react35.Input,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -4613,10 +4928,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Input,
+          import_react35.Input,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -4627,7 +4942,7 @@ function ReusableProfile({
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Button,
+        import_react35.Button,
         {
           w: "full",
           mt: 2,
@@ -4642,9 +4957,9 @@ function ReusableProfile({
     ] })
   ] });
   const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.IconButton,
+        import_react35.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -4654,16 +4969,16 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.InputGroup,
+          import_react35.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.IconButton,
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4674,7 +4989,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.Input,
+              import_react35.Input,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -4686,13 +5001,13 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.InputGroup,
+          import_react35.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.IconButton,
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4703,7 +5018,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.Input,
+              import_react35.Input,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -4714,9 +5029,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { mt: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+        newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { mt: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               flex: 1,
               h: "3px",
@@ -4726,16 +5041,16 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.InputGroup,
+          import_react35.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.IconButton,
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4746,7 +5061,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.Input,
+              import_react35.Input,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -4757,10 +5072,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Button,
+        import_react35.Button,
         {
           w: "full",
           mt: 1,
@@ -4777,7 +5092,7 @@ function ReusableProfile({
   ] });
   const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react36.Box,
+      import_react35.Box,
       {
         px: 4,
         pt: 4,
@@ -4788,9 +5103,9 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.IconButton,
+            import_react35.IconButton,
             {
               size: "sm",
               variant: "ghost",
@@ -4803,9 +5118,9 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -4814,10 +5129,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Text,
+          import_react35.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4828,7 +5143,7 @@ function ReusableProfile({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react36.Text,
+          import_react35.Text,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4842,7 +5157,7 @@ function ReusableProfile({
         )
       ] }),
       quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react36.Flex,
+        import_react35.Flex,
         {
           align: "center",
           justify: "center",
@@ -4851,18 +5166,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
         const option = availableOptions.find((item) => item.key === href);
         if (!option) return null;
         const ItemIcon = option.Icon;
         const isFirst = idx === 0;
         const isLast = idx === quickNavHrefs.length - 1;
         const isReplacing = replacingIdx === idx;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react36.Flex,
+            import_react35.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4874,9 +5189,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.Box,
+                    import_react35.Box,
                     {
                       w: "36px",
                       h: "36px",
@@ -4890,10 +5205,10 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
                     isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react36.Text,
+                      import_react35.Text,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -4903,9 +5218,9 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.HStack, { gap: 0.5, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.IconButton,
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4917,7 +5232,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.IconButton,
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4929,7 +5244,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.IconButton,
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -4942,7 +5257,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react36.IconButton,
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4958,16 +5273,16 @@ function ReusableProfile({
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, { mx: 4, my: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, { mx: 4, my: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Text,
+            import_react35.Text,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -4977,7 +5292,7 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
@@ -4985,7 +5300,7 @@ function ReusableProfile({
             '"'
           ] })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Text,
+          import_react35.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4996,7 +5311,7 @@ function ReusableProfile({
           }
         ),
         replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react36.Button,
+          import_react35.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -5006,17 +5321,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
         const ItemIcon = option.Icon;
         const isLast = idx === unpinnedOptions.length - 1;
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react36.Box,
+                import_react35.Box,
                 {
                   w: "36px",
                   h: "36px",
@@ -5031,7 +5346,7 @@ function ReusableProfile({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react36.Text,
+                import_react35.Text,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -5041,7 +5356,7 @@ function ReusableProfile({
               )
             ] }),
             isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.IconButton,
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5053,7 +5368,7 @@ function ReusableProfile({
                 children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react36.IconButton,
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5067,7 +5382,7 @@ function ReusableProfile({
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
         ] }, option.key);
       }) })
     ] })
@@ -5075,7 +5390,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_runtime20.jsxs)(
-      import_react36.Flex,
+      import_react35.Flex,
       {
         maxW: "6xl",
         mx: "auto",
@@ -5086,7 +5401,7 @@ function ReusableProfile({
         align: "start",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+            import_react35.Box,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5101,7 +5416,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react36.Box,
+            import_react35.Box,
             {
               flex: "1",
               minW: 0,
@@ -5112,7 +5427,7 @@ function ReusableProfile({
               bg: "bg",
               minH: "540px",
               children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                import_react36.Flex,
+                import_react35.Flex,
                 {
                   direction: "column",
                   align: "center",
@@ -5123,7 +5438,7 @@ function ReusableProfile({
                   color: "gray.400",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react36.Box,
+                      import_react35.Box,
                       {
                         w: "56px",
                         h: "56px",
@@ -5136,7 +5451,7 @@ function ReusableProfile({
                         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.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_runtime20.jsx)(import_react35.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -5146,7 +5461,7 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
 }
 var UserProfile_default = ReusableProfile;
 // Annotate the CommonJS export names for ESM import in node: