@splpi/estore-shared-components 0.0.1 → 0.0.3

package/dist/index.js

@@ -32,13 +32,13 @@ var index_exports = {};
 __export(index_exports, {
   Beneficiary: () => beneficiary_default,
   BottomQuickActions: () => BottomQuickActions_default,
-  FloatingLabelInput: () => floating_label_input_default,
   HealthDeclaration: () => HealthDeclaration_default,
   LifePlanApplication1: () => LifePlanApplication1_default,
   LifePlanApplication2: () => LifePlanApplication2_default,
   LifePlanApplication3: () => LifePlanApplication3_default,
   LifePlanApplicationFormWrapper: () => LifePlanApplicationFormWrapper_default,
   LifePlanApplicationStepWrapper: () => LifePlanApplicationStepWrapper_default,
+  NotifyInstall: () => NotifyInstall,
   SharedLifePlanApplication: () => SharedLifePlanApplication_default,
   UserProfile: () => UserProfile_default,
   createEmptyApplicationData: () => createEmptyApplicationData,
@@ -270,24 +270,32 @@ var STANDARD_ICON_BUTTON_STYLES = {
   }
 };
 
-// src/NewSaleForm/ui/floating-label-input.tsx
-var import_react = require("react");
-var import_react2 = require("@chakra-ui/react");
+// src/NewSaleForm/ui/FloatingLabelInput.tsx
+var import_react = require("@chakra-ui/react");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var FloatingLabelInput = (props) => {
   const { label, onValueChange, value, defaultValue = "", ...rest } = props;
-  const [inputState, setInputState] = (0, import_react2.useControllableState)({
+  const [inputState, setInputState] = (0, import_react.useControllableState)({
     defaultValue,
     onChange: onValueChange,
     value
   });
-  const [focused, setFocused] = (0, import_react.useState)(false);
+  const [focused, setFocused] = (0, import_react2.useState)(false);
   const shouldFloat = inputState.length > 0 || focused;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Box, { pos: "relative", w: "full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Box, { pos: "relative", w: "full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.Input,
+      import_react.Input,
       {
         ...rest,
+        h: "12",
+        pt: shouldFloat ? "5" : "2",
+        pb: "1",
+        fontSize: "sm",
+        fontWeight: "semibold",
+        borderWidth: "1.5px",
+        borderRadius: "lg",
+        _placeholder: { color: "transparent" },
         onFocus: (e) => {
           props.onFocus?.(e);
           setFocused(true);
@@ -304,26 +312,32 @@ var FloatingLabelInput = (props) => {
         "data-float": shouldFloat || void 0
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Field.Label, { css: floatingStyles, "data-float": shouldFloat || void 0, children: label })
   ] });
 };
-var floatingStyles = (0, import_react2.defineStyle)({
+var floatingStyles = (0, import_react.defineStyle)({
+  /* placeholder state — vertically centred inside the input */
   pos: "absolute",
-  bg: "bg",
-  px: "0.5",
-  top: "2.5",
+  top: "50%",
+  transform: "translateY(-50%)",
   insetStart: "3",
+  fontSize: "sm",
   fontWeight: "normal",
+  color: "gray.400",
+  bg: "bg",
+  px: "0.5",
   pointerEvents: "none",
-  transition: "position",
-  color: "fg.muted",
+  transition: "top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease",
+  /* floated state — sits above the border, clearly a label */
   "&[data-float]": {
-    top: "-3",
-    insetStart: "2",
-    color: "fg"
+    top: "-2",
+    transform: "translateY(0)",
+    fontSize: "xs",
+    fontWeight: "medium",
+    color: "gray.400",
+    insetStart: "2.5"
   }
 });
-var floating_label_input_default = FloatingLabelInput;
 
 // src/NewSaleForm/LifePlanApplication1.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -436,7 +450,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "idNumber",
             type: "text",
@@ -446,7 +460,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "lastName",
             type: "text",
@@ -456,7 +470,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "firstName",
             type: "text",
@@ -466,7 +480,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "middleName",
             type: "text",
@@ -476,7 +490,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "suffix",
             type: "text",
@@ -502,7 +516,7 @@ var LifePlanApplication1 = ({
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Input, { id: "dateOfNeutralization", type: "date" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "height",
             label: "Height (ft)",
@@ -514,7 +528,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "weight",
             label: "Weight (lbs)",
@@ -563,7 +577,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "nationality",
             type: "text",
@@ -573,7 +587,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "mobileNumber",
             type: "text",
@@ -583,7 +597,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "landlineNumber",
             type: "text",
@@ -596,7 +610,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "email",
             type: "email",
@@ -606,7 +620,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "mailingAddress",
             type: "text",
@@ -616,7 +630,7 @@ var LifePlanApplication1 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "insurability",
             type: "text",
@@ -929,7 +943,7 @@ var LifePlanApplication2 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "street",
             label: "Street",
@@ -938,7 +952,7 @@ var LifePlanApplication2 = ({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Field.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          floating_label_input_default,
+          FloatingLabelInput,
           {
             id: "lotNumber",
             label: "Lot #",
@@ -1315,7 +1329,7 @@ var Beneficiary = ({ onUpdate }) => {
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
                               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "firstName",
                                   type: "text",
@@ -1331,7 +1345,7 @@ var Beneficiary = ({ onUpdate }) => {
                             ] }),
                             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
                               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "lastName",
                                   type: "text",
@@ -1347,7 +1361,7 @@ var Beneficiary = ({ onUpdate }) => {
                             ] }),
                             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
                               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                                floating_label_input_default,
+                                FloatingLabelInput,
                                 {
                                   id: "middleInitial",
                                   type: "text",
@@ -1366,7 +1380,7 @@ var Beneficiary = ({ onUpdate }) => {
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react10.Field.Root, { children: [
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                          floating_label_input_default,
+                          FloatingLabelInput,
                           {
                             id: "address",
                             type: "text",
@@ -3148,7 +3162,7 @@ var LifePlanApplicationStepWrapper = () => {
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
-// src/BottomQuickActions/BottomQuickActions.tsx
+// src/Generic/BottomQuickActions.tsx
 var import_react29 = __toESM(require("react"));
 var import_react30 = require("@chakra-ui/react");
 var import_lu6 = require("react-icons/lu");
@@ -3182,7 +3196,7 @@ var BRAND_COLORS = {
   paleGold: "#FFF48E"
 };
 
-// src/BottomQuickActions/BottomQuickActions.tsx
+// src/Generic/BottomQuickActions.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
@@ -3465,9 +3479,208 @@ var BottomQuickActions = ({
 };
 var BottomQuickActions_default = BottomQuickActions;
 
-// src/UserProfile/UserProfile.tsx
+// src/Generic/NotifyInstall.tsx
+var import_react32 = require("react");
+var import_react33 = require("@chakra-ui/react");
+var import_fi = require("react-icons/fi");
+
+// src/hooks/useNotifyInstall.ts
 var import_react31 = require("react");
-var import_react32 = require("@chakra-ui/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 mobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+    setIsMobile(mobile);
+    const installed = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
+    setIsInstalled(installed);
+    const handler = (event) => {
+      event.preventDefault();
+      setInstallPrompt(event);
+    };
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => {
+      window.removeEventListener("beforeinstallprompt", handler);
+    };
+  }, []);
+  const install = async () => {
+    if (!installPrompt) return;
+    installPrompt.prompt();
+    const result = await installPrompt.userChoice;
+    if (result.outcome === "accepted") {
+      setIsInstalled(true);
+    }
+    setInstallPrompt(null);
+  };
+  return {
+    isInstalled,
+    isMobile,
+    canInstall: !!installPrompt,
+    install
+  };
+}
+
+// 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"'
+  }
+];
+var INSTALL_DIALOG_DISMISSED_KEY = "estore-install-dialog-dismissed";
+function NotifyInstall({
+  children
+}) {
+  const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
+  const [isDismissed, setIsDismissed] = (0, import_react32.useState)(false);
+  (0, import_react32.useEffect)(() => {
+    const wasDismissed = localStorage.getItem(INSTALL_DIALOG_DISMISSED_KEY);
+    setIsDismissed(wasDismissed === "true");
+  }, []);
+  const handleClose = () => {
+    localStorage.setItem(INSTALL_DIALOG_DISMISSED_KEY, "true");
+    setIsDismissed(true);
+  };
+  const isOpen = !isInstalled && isMobile && !isDismissed;
+  if (!isOpen) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      import_react33.Dialog.Root,
+      {
+        open: isOpen,
+        onOpenChange: (details) => {
+          if (!details.open) {
+            handleClose();
+          }
+        },
+        placement: "center",
+        motionPreset: "slide-in-bottom",
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.Backdrop, { bg: "blackAlpha.600", backdropFilter: "blur(2px)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            import_react33.Dialog.Positioner,
+            {
+              p: { base: 0, sm: 4 },
+              alignItems: { base: "flex-end", sm: "center" },
+              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                import_react33.Dialog.Content,
+                {
+                  w: "xl",
+                  maxW: { base: "full", sm: "sm" },
+                  borderRadius: { base: "2xl 2xl 0 0", sm: "2xl" },
+                  overflow: "hidden",
+                  boxShadow: "2xl",
+                  m: 0,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.Body, { px: { base: 6, sm: 8 }, py: { base: 8, sm: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        import_react33.Flex,
+                        {
+                          boxSize: { base: 16, sm: 20 },
+                          align: "center",
+                          justify: "center",
+                          rounded: "2xl",
+                          bg: "green.50",
+                          color: "green.600",
+                          shadow: "sm",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload, boxSize: { base: 8, sm: 9 } })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          import_react33.Heading,
+                          {
+                            fontSize: { base: "lg", sm: "xl" },
+                            fontWeight: "bold",
+                            color: "gray.900",
+                            children: "Install St. Peter eStore"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          import_react33.Text,
+                          {
+                            fontSize: { base: "sm", sm: "md" },
+                            color: "gray.600",
+                            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,
+                        {
+                          onClick: install,
+                          colorPalette: "green",
+                          size: "lg",
+                          w: "full",
+                          rounded: "xl",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload }),
+                            "Add to Home Screen"
+                          ]
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        import_react33.Box,
+                        {
+                          w: "full",
+                          bg: "gray.50",
+                          borderWidth: "1px",
+                          borderColor: "gray.100",
+                          rounded: "xl",
+                          p: 4,
+                          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.VStack, { gap: 4, align: "stretch", children: STEPS.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                              import_react33.Flex,
+                              {
+                                boxSize: 9,
+                                flexShrink: 0,
+                                align: "center",
+                                justify: "center",
+                                rounded: "lg",
+                                bg: "white",
+                                borderWidth: "1px",
+                                borderColor: "gray.200",
+                                color: "green.600",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.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
+                              }
+                            )
+                          ] }, index)) })
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.CloseButton, { size: "sm", onClick: handleClose }) })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/UserProfile/UserProfile.tsx
+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");
@@ -3476,7 +3689,7 @@ var import_lia = require("react-icons/lia");
 var import_fa5 = require("react-icons/fa");
 var import_md = require("react-icons/md");
 var import_io5 = require("react-icons/io5");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var NAVBAR_STORAGE_KEY = "profile-navbar-quick-items";
 var FONT_SIZE_STORAGE_KEY = "profile-font-size-pref";
 var DEFAULT_NAV_HREFS = ["/", "/plans", "/pay-my-plan", "/claims"];
@@ -3774,28 +3987,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = (0, import_react31.useState)("main");
-  const [fallbackColorMode, setFallbackColorMode] = (0, import_react31.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_react31.useState)("md");
-  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react31.useState)(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = (0, import_react31.useState)(null);
-  const [editName, setEditName] = (0, import_react31.useState)(user.displayName);
-  const [editLoading, setEditLoading] = (0, import_react31.useState)(false);
-  const [currentPw, setCurrentPw] = (0, import_react31.useState)("");
-  const [newPw, setNewPw] = (0, import_react31.useState)("");
-  const [confirmPw, setConfirmPw] = (0, import_react31.useState)("");
-  const [showCurrentPw, setShowCurrentPw] = (0, import_react31.useState)(false);
-  const [showNewPw, setShowNewPw] = (0, import_react31.useState)(false);
-  const [showConfirmPw, setShowConfirmPw] = (0, import_react31.useState)(false);
-  const [pwLoading, setPwLoading] = (0, import_react31.useState)(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react31.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_react31.useState)(false);
-  const isDesktopRaw = (0, import_react32.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_react31.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -3806,10 +4019,10 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
-  const availableOptions = (0, import_react31.useMemo)(
+  const availableOptions = (0, import_react34.useMemo)(
     () => availableNavOptions.filter(
       (option) => !user.role || option.roles.includes(user.role)
     ),
@@ -3937,9 +4150,9 @@ function ReusableProfile({
     }
   };
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
-  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      import_react32.Box,
+  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react35.Box,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -3947,21 +4160,21 @@ function ReusableProfile({
         px: 4,
         textAlign: "center",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react32.Avatar.Root,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react35.Avatar.Root,
             {
               size: "2xl",
               mx: "auto",
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(
-            import_react32.Text,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Text,
             {
               color: "white",
               fontWeight: "bold",
@@ -3971,9 +4184,9 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.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",
@@ -3989,9 +4202,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { px: 4, pt: 5, pb: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4002,8 +4215,8 @@ function ReusableProfile({
           children: "Account"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4011,8 +4224,8 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react32.Flex,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react35.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4021,9 +4234,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4034,23 +4247,23 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuUser, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4061,8 +4274,8 @@ function ReusableProfile({
             resetPasswordForm();
             setProfileView("change-password");
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react32.Flex,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react35.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4071,9 +4284,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4084,25 +4297,25 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuLock, { size: 16 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4113,16 +4326,16 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuShield, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(
-          import_react32.Box,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Box,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4144,8 +4357,8 @@ function ReusableProfile({
             cursor: "pointer",
             flexShrink: 0,
             outline: "none",
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.Box,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.Box,
               {
                 position: "absolute",
                 top: "3px",
@@ -4162,9 +4375,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { px: 4, pt: 4, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4175,10 +4388,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4189,18 +4402,18 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuSun, { size: 16 })
+              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_runtime19.jsxs)(import_react32.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_react32.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_runtime19.jsxs)(
-            import_react32.Button,
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            import_react35.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4215,9 +4428,9 @@ function ReusableProfile({
               },
               onClick: () => handleColorMode(mode),
               children: [
-                mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuMoon, { size: 13 }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                  import_react32.Text,
+                mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  import_react35.Text,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4231,11 +4444,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               w: "38px",
               h: "38px",
@@ -4251,15 +4464,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_react32.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_runtime19.jsx)(
-            import_react32.Button,
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4274,8 +4487,8 @@ function ReusableProfile({
               },
               onClick: () => handleFontSize(option.value),
               title: option.title,
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.Text,
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react35.Text,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4287,9 +4500,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Box,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Box,
         {
           as: "button",
           w: "full",
@@ -4297,10 +4510,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.Box,
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react35.Box,
                 {
                   w: "38px",
                   h: "38px",
@@ -4311,12 +4524,12 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: "gray.600",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.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,
@@ -4324,13 +4537,13 @@ function ReusableProfile({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react32.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",
@@ -4342,30 +4555,30 @@ function ReusableProfile({
       }
     ) }) })
   ] });
-  const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.IconButton,
+  const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.IconButton,
         {
           size: "sm",
           variant: "ghost",
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronLeft, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_react32.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsxs)(import_react32.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Input,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -4374,10 +4587,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Input,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -4387,10 +4600,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Input,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -4400,8 +4613,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Button,
         {
           w: "full",
           mt: 2,
@@ -4415,40 +4628,40 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.IconButton,
+  const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.IconButton,
         {
           size: "sm",
           variant: "ghost",
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronLeft, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsxs)(import_react32.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.InputGroup,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle current password visibility",
                 onClick: () => setShowCurrentPw(!showCurrentPw),
-                children: showCurrentPw ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showCurrentPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.Input,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -4460,24 +4673,24 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.InputGroup,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle new password visibility",
                 onClick: () => setShowNewPw(!showNewPw),
-                children: showNewPw ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showNewPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.Input,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -4488,9 +4701,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { mt: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.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",
@@ -4500,27 +4713,27 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.InputGroup,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.InputGroup,
           {
-            endElement: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.IconButton,
+            endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
                 color: "gray.500",
                 "aria-label": "Toggle confirm password visibility",
                 onClick: () => setShowConfirmPw(!showConfirmPw),
-                children: showConfirmPw ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuEye, { size: 15 })
+                children: showConfirmPw ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEyeOff, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.Input,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.Input,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -4531,10 +4744,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(
-        import_react32.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Button,
         {
           w: "full",
           mt: 1,
@@ -4549,9 +4762,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react32.Box,
+  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react35.Box,
       {
         px: 4,
         pt: 4,
@@ -4562,9 +4775,9 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 2, pr: 10, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.IconButton,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.IconButton,
             {
               size: "sm",
               variant: "ghost",
@@ -4574,12 +4787,12 @@ function ReusableProfile({
                 setReplacingIdx(null);
                 setProfileView("main");
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronLeft, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.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"
@@ -4588,10 +4801,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4601,8 +4814,8 @@ function ReusableProfile({
             children: "Pinned"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-          import_react32.Text,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          import_react35.Text,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4615,8 +4828,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_react32.Flex,
+      quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        import_react35.Flex,
         {
           align: "center",
           justify: "center",
@@ -4625,18 +4838,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsx)(import_react32.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_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-            import_react32.Flex,
+        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",
@@ -4648,9 +4861,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.Box,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.Box,
                     {
                       w: "36px",
                       h: "36px",
@@ -4661,13 +4874,13 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "white",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ItemIcon, { size: 15 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
-                    isReplacing && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_react32.Text,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                    isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_react35.Text,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -4677,9 +4890,9 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.HStack, { gap: 0.5, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.IconButton,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4687,11 +4900,11 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isFirst || isReplacing,
                       onClick: () => moveNavItem(idx, -1),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronUp, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronUp, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4699,11 +4912,11 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isLast || isReplacing,
                       onClick: () => moveNavItem(idx, 1),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuChevronDown, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronDown, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -4712,11 +4925,11 @@ function ReusableProfile({
                       color: isReplacing ? "white" : "gray.500",
                       _hover: { bg: isReplacing ? "orange.500" : "gray.100" },
                       onClick: () => setReplacingIdx(isReplacing ? null : idx),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                    import_react32.IconButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react35.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4725,23 +4938,23 @@ function ReusableProfile({
                       _hover: { bg: "red.50" },
                       disabled: isReplacing,
                       onClick: () => removeNavItem(href),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuX, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuX, { size: 14 })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, { mx: 4, my: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Box, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Text,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, { mx: 4, my: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Text,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -4751,15 +4964,15 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.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]
             )?.title,
             '"'
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Text,
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4769,8 +4982,8 @@ function ReusableProfile({
             children: "Available"
           }
         ),
-        replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          import_react32.Button,
+        replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react35.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -4780,17 +4993,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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_runtime19.jsxs)(import_react32.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react32.Flex, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.Box,
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react35.Box,
                 {
                   w: "36px",
                   h: "36px",
@@ -4801,11 +5014,11 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: isReplacingMode ? "orange.500" : "gray.500",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ItemIcon, { size: 15 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                import_react32.Text,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                import_react35.Text,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -4814,8 +5027,8 @@ function ReusableProfile({
                 }
               )
             ] }),
-            isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.IconButton,
+            isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -4824,10 +5037,10 @@ function ReusableProfile({
                 color: "orange.500",
                 _hover: { bg: "orange.50" },
                 onClick: () => replaceNavItem(replacingIdx, option.key),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-              import_react32.IconButton,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react35.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -4837,19 +5050,19 @@ function ReusableProfile({
                 color: canAdd ? "var(--chakra-colors-primary)" : "gray.300",
                 _hover: { bg: canAdd ? "blue.50" : "transparent" },
                 onClick: () => addNavItem(option.key),
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuPlus, { size: 13 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuPlus, { size: 13 })
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
         ] }, option.key);
       }) })
     ] })
   ] });
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      import_react32.Flex,
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react35.Flex,
       {
         maxW: "6xl",
         mx: "auto",
@@ -4859,8 +5072,8 @@ function ReusableProfile({
         p: { md: 6, lg: 8 },
         align: "start",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -4874,8 +5087,8 @@ function ReusableProfile({
               children: mainContent
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            import_react32.Box,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react35.Box,
             {
               flex: "1",
               minW: 0,
@@ -4885,8 +5098,8 @@ function ReusableProfile({
               overflow: "hidden",
               bg: "bg",
               minH: "540px",
-              children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-                import_react32.Flex,
+              children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                import_react35.Flex,
                 {
                   direction: "column",
                   align: "center",
@@ -4896,8 +5109,8 @@ function ReusableProfile({
                   textAlign: "center",
                   color: "gray.400",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                      import_react32.Box,
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      import_react35.Box,
                       {
                         w: "56px",
                         h: "56px",
@@ -4907,10 +5120,10 @@ function ReusableProfile({
                         alignItems: "center",
                         justifyContent: "center",
                         mb: 4,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu7.LuUser, { size: 24 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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." })
                   ]
                 }
               )
@@ -4920,20 +5133,20 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react32.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:
 0 && (module.exports = {
   Beneficiary,
   BottomQuickActions,
-  FloatingLabelInput,
   HealthDeclaration,
   LifePlanApplication1,
   LifePlanApplication2,
   LifePlanApplication3,
   LifePlanApplicationFormWrapper,
   LifePlanApplicationStepWrapper,
+  NotifyInstall,
   SharedLifePlanApplication,
   UserProfile,
   createEmptyApplicationData,