npm - @splpi/estore-shared-components - Versions diffs - 0.0.1 → 0.0.2 - Mend

@splpi/estore-shared-components 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.mjs CHANGED Viewed

@@ -3167,7 +3167,7 @@ var LifePlanApplicationStepWrapper = () => {
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
-// src/BottomQuickActions/BottomQuickActions.tsx
+// src/Generic/BottomQuickActions.tsx
 import React6 from "react";
 import {
   Box as Box15,
@@ -3211,7 +3211,7 @@ var BRAND_COLORS = {
   paleGold: "#FFF48E"
 };
-// src/BottomQuickActions/BottomQuickActions.tsx
+// src/Generic/BottomQuickActions.tsx
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
@@ -3494,22 +3494,233 @@ var BottomQuickActions = ({
 };
 var BottomQuickActions_default = BottomQuickActions;
+// src/Generic/NotifyInstall.tsx
+import { useEffect as useEffect8, useState as useState13 } from "react";
+import {
+  Dialog as Dialog3,
+  Button as Button3,
+  Text as Text9,
+  VStack as VStack8,
+  HStack as HStack5,
+  Box as Box16,
+  Flex as Flex9,
+  Heading,
+  Icon as Icon5,
+  Portal as Portal5,
+  CloseButton as CloseButton4
+} from "@chakra-ui/react";
+import { FiDownload, FiPlusSquare, FiShare } from "react-icons/fi";
+// src/hooks/useNotifyInstall.ts
+import { useEffect as useEffect7, useState as useState12 } from "react";
+function useNotifyInstall() {
+  const [isInstalled, setIsInstalled] = useState12(false);
+  const [isMobile, setIsMobile] = useState12(false);
+  const [installPrompt, setInstallPrompt] = useState12(null);
+  useEffect7(() => {
+    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
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+var STEPS = [
+  {
+    icon: FiShare,
+    label: "Tap the browser menu or Share button"
+  },
+  {
+    icon: 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] = useState13(false);
+  useEffect8(() => {
+    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__ */ jsxs16(Fragment3, { children: [
+    children,
+    /* @__PURE__ */ jsx19(
+      Dialog3.Root,
+      {
+        open: isOpen,
+        onOpenChange: (details) => {
+          if (!details.open) {
+            handleClose();
+          }
+        },
+        placement: "center",
+        motionPreset: "slide-in-bottom",
+        children: /* @__PURE__ */ jsxs16(Portal5, { children: [
+          /* @__PURE__ */ jsx19(Dialog3.Backdrop, { bg: "blackAlpha.600", backdropFilter: "blur(2px)" }),
+          /* @__PURE__ */ jsx19(
+            Dialog3.Positioner,
+            {
+              p: { base: 0, sm: 4 },
+              alignItems: { base: "flex-end", sm: "center" },
+              children: /* @__PURE__ */ jsxs16(
+                Dialog3.Content,
+                {
+                  w: "xl",
+                  maxW: { base: "full", sm: "sm" },
+                  borderRadius: { base: "2xl 2xl 0 0", sm: "2xl" },
+                  overflow: "hidden",
+                  boxShadow: "2xl",
+                  m: 0,
+                  children: [
+                    /* @__PURE__ */ jsx19(Dialog3.Body, { px: { base: 6, sm: 8 }, py: { base: 8, sm: 10 }, children: /* @__PURE__ */ jsxs16(VStack8, { gap: 6, textAlign: "center", children: [
+                      /* @__PURE__ */ jsx19(
+                        Flex9,
+                        {
+                          boxSize: { base: 16, sm: 20 },
+                          align: "center",
+                          justify: "center",
+                          rounded: "2xl",
+                          bg: "green.50",
+                          color: "green.600",
+                          shadow: "sm",
+                          children: /* @__PURE__ */ jsx19(Icon5, { as: FiDownload, boxSize: { base: 8, sm: 9 } })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs16(VStack8, { gap: 2, children: [
+                        /* @__PURE__ */ jsx19(
+                          Heading,
+                          {
+                            fontSize: { base: "lg", sm: "xl" },
+                            fontWeight: "bold",
+                            color: "gray.900",
+                            children: "Install St. Peter eStore"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx19(
+                          Text9,
+                          {
+                            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__ */ jsxs16(
+                        Button3,
+                        {
+                          onClick: install,
+                          colorPalette: "green",
+                          size: "lg",
+                          w: "full",
+                          rounded: "xl",
+                          children: [
+                            /* @__PURE__ */ jsx19(Icon5, { as: FiDownload }),
+                            "Add to Home Screen"
+                          ]
+                        }
+                      ) : /* @__PURE__ */ jsx19(
+                        Box16,
+                        {
+                          w: "full",
+                          bg: "gray.50",
+                          borderWidth: "1px",
+                          borderColor: "gray.100",
+                          rounded: "xl",
+                          p: 4,
+                          children: /* @__PURE__ */ jsx19(VStack8, { gap: 4, align: "stretch", children: STEPS.map((step, index) => /* @__PURE__ */ jsxs16(HStack5, { gap: 3, align: "center", children: [
+                            /* @__PURE__ */ jsx19(
+                              Flex9,
+                              {
+                                boxSize: 9,
+                                flexShrink: 0,
+                                align: "center",
+                                justify: "center",
+                                rounded: "lg",
+                                bg: "white",
+                                borderWidth: "1px",
+                                borderColor: "gray.200",
+                                color: "green.600",
+                                children: /* @__PURE__ */ jsx19(Icon5, { as: step.icon, boxSize: 4 })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx19(
+                              Text9,
+                              {
+                                fontSize: "sm",
+                                color: "gray.700",
+                                textAlign: "left",
+                                children: step.label
+                              }
+                            )
+                          ] }, index)) })
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsx19(Dialog3.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(CloseButton4, { size: "sm", onClick: handleClose }) })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
 // src/UserProfile/UserProfile.tsx
-import { useEffect as useEffect7, useMemo, useState as useState12 } from "react";
+import { useEffect as useEffect9, useMemo, useState as useState14 } from "react";
 import {
   Avatar,
   Badge as Badge2,
-  Box as Box16,
-  Button as Button3,
-  Flex as Flex9,
-  HStack as HStack5,
+  Box as Box17,
+  Button as Button4,
+  Flex as Flex10,
+  HStack as HStack6,
   IconButton as IconButton3,
   Input as Input4,
   InputGroup,
   Separator as Separator4,
-  Text as Text9,
+  Text as Text10,
   useBreakpointValue as useBreakpointValue2,
-  VStack as VStack8
+  VStack as VStack9
 } from "@chakra-ui/react";
 import {
   RiDashboardFill,
@@ -3553,7 +3764,7 @@ import { LiaHandHoldingUsdSolid } from "react-icons/lia";
 import { FaHandHoldingUsd } from "react-icons/fa";
 import { MdManageAccounts, MdOutlineManageAccounts } from "react-icons/md";
 import { IoLeaf, IoLeafOutline } from "react-icons/io5";
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs17 } from "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"];
@@ -3851,28 +4062,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = useState12("main");
-  const [fallbackColorMode, setFallbackColorMode] = useState12("light");
+  const [profileView, setProfileView] = useState14("main");
+  const [fallbackColorMode, setFallbackColorMode] = useState14("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = useState12("md");
-  const [quickNavHrefs, setQuickNavHrefs] = useState12(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = useState12(null);
-  const [editName, setEditName] = useState12(user.displayName);
-  const [editLoading, setEditLoading] = useState12(false);
-  const [currentPw, setCurrentPw] = useState12("");
-  const [newPw, setNewPw] = useState12("");
-  const [confirmPw, setConfirmPw] = useState12("");
-  const [showCurrentPw, setShowCurrentPw] = useState12(false);
-  const [showNewPw, setShowNewPw] = useState12(false);
-  const [showConfirmPw, setShowConfirmPw] = useState12(false);
-  const [pwLoading, setPwLoading] = useState12(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState12(
+  const [fontSize, setFontSizeLocal] = useState14("md");
+  const [quickNavHrefs, setQuickNavHrefs] = useState14(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = useState14(null);
+  const [editName, setEditName] = useState14(user.displayName);
+  const [editLoading, setEditLoading] = useState14(false);
+  const [currentPw, setCurrentPw] = useState14("");
+  const [newPw, setNewPw] = useState14("");
+  const [confirmPw, setConfirmPw] = useState14("");
+  const [showCurrentPw, setShowCurrentPw] = useState14(false);
+  const [showNewPw, setShowNewPw] = useState14(false);
+  const [showConfirmPw, setShowConfirmPw] = useState14(false);
+  const [pwLoading, setPwLoading] = useState14(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState14(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = useState12(false);
+  const [isMounted, setIsMounted] = useState14(false);
   const isDesktopRaw = useBreakpointValue2({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  useEffect7(() => {
+  useEffect9(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -3883,7 +4094,7 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  useEffect7(() => {
+  useEffect9(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
   const availableOptions = useMemo(
@@ -4014,9 +4225,9 @@ function ReusableProfile({
     }
   };
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
-  const mainContent = /* @__PURE__ */ jsxs16(Fragment3, { children: [
-    /* @__PURE__ */ jsxs16(
-      Box16,
+  const mainContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsxs17(
+      Box17,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4024,7 +4235,7 @@ function ReusableProfile({
         px: 4,
         textAlign: "center",
         children: [
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             Avatar.Root,
             {
               size: "2xl",
@@ -4032,13 +4243,13 @@ function ReusableProfile({
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ jsx19(Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ jsx19(Avatar.Fallback, { name: user.displayName })
+                user.avatarSrc && /* @__PURE__ */ jsx20(Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ jsx20(Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
-          /* @__PURE__ */ jsx19(
-            Text9,
+          /* @__PURE__ */ jsx20(
+            Text10,
             {
               color: "white",
               fontWeight: "bold",
@@ -4048,8 +4259,8 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ jsx19(Text9, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ jsx19(Box16, { display: "inline-flex", children: /* @__PURE__ */ jsx19(
+          user.email && /* @__PURE__ */ jsx20(Text10, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ jsx20(Box17, { display: "inline-flex", children: /* @__PURE__ */ jsx20(
             Badge2,
             {
               bg: "rgba(255,255,255,0.15)",
@@ -4066,9 +4277,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs16(Box16, { px: 4, pt: 5, pb: 1, children: [
-      /* @__PURE__ */ jsx19(
-        Text9,
+    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 5, pb: 1, children: [
+      /* @__PURE__ */ jsx20(
+        Text10,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4079,8 +4290,8 @@ function ReusableProfile({
           children: "Account"
         }
       ),
-      /* @__PURE__ */ jsx19(
-        Box16,
+      /* @__PURE__ */ jsx20(
+        Box17,
         {
           as: "button",
           w: "full",
@@ -4088,8 +4299,8 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
-          children: /* @__PURE__ */ jsxs16(
-            Flex9,
+          children: /* @__PURE__ */ jsxs17(
+            Flex10,
             {
               justify: "space-between",
               align: "center",
@@ -4098,9 +4309,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx19(
-                    Box16,
+                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx20(
+                    Box17,
                     {
                       w: "38px",
                       h: "38px",
@@ -4111,23 +4322,23 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx19(LuUser, { size: 16 })
+                      children: /* @__PURE__ */ jsx20(LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs16(Box16, { children: [
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx19(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx19(Separator4, {}),
-      /* @__PURE__ */ jsx19(
-        Box16,
+      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(
+        Box17,
         {
           as: "button",
           w: "full",
@@ -4138,8 +4349,8 @@ function ReusableProfile({
             resetPasswordForm();
             setProfileView("change-password");
           },
-          children: /* @__PURE__ */ jsxs16(
-            Flex9,
+          children: /* @__PURE__ */ jsxs17(
+            Flex10,
             {
               justify: "space-between",
               align: "center",
@@ -4148,9 +4359,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx19(
-                    Box16,
+                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx20(
+                    Box17,
                     {
                       w: "38px",
                       h: "38px",
@@ -4161,25 +4372,25 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx19(LuLock, { size: 16 })
+                      children: /* @__PURE__ */ jsx20(LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs16(Box16, { children: [
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx19(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx19(Separator4, {}),
-      /* @__PURE__ */ jsxs16(Flex9, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx19(
-            Box16,
+      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx20(
+            Box17,
             {
               w: "38px",
               h: "38px",
@@ -4190,16 +4401,16 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: /* @__PURE__ */ jsx19(LuShield, { size: 16 })
+              children: /* @__PURE__ */ jsx20(LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs16(Box16, { children: [
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ jsxs17(Box17, { children: [
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx19(
-          Box16,
+        /* @__PURE__ */ jsx20(
+          Box17,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4221,8 +4432,8 @@ function ReusableProfile({
             cursor: "pointer",
             flexShrink: 0,
             outline: "none",
-            children: /* @__PURE__ */ jsx19(
-              Box16,
+            children: /* @__PURE__ */ jsx20(
+              Box17,
               {
                 position: "absolute",
                 top: "3px",
@@ -4239,9 +4450,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs16(Box16, { px: 4, pt: 4, pb: 2, children: [
-      /* @__PURE__ */ jsx19(
-        Text9,
+    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 4, pb: 2, children: [
+      /* @__PURE__ */ jsx20(
+        Text10,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4252,10 +4463,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ jsxs16(Flex9, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx19(
-            Box16,
+      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx20(
+            Box17,
             {
               w: "38px",
               h: "38px",
@@ -4266,18 +4477,18 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: colorMode === "dark" ? /* @__PURE__ */ jsx19(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx19(LuSun, { size: 16 })
+              children: colorMode === "dark" ? /* @__PURE__ */ jsx20(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx20(LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs16(Box16, { children: [
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ jsxs17(Box17, { children: [
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx19(HStack5, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ jsx20(HStack6, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
-          return /* @__PURE__ */ jsxs16(
-            Button3,
+          return /* @__PURE__ */ jsxs17(
+            Button4,
             {
               size: "sm",
               variant: "outline",
@@ -4292,9 +4503,9 @@ function ReusableProfile({
               },
               onClick: () => handleColorMode(mode),
               children: [
-                mode === "light" ? /* @__PURE__ */ jsx19(LuSun, { size: 13 }) : /* @__PURE__ */ jsx19(LuMoon, { size: 13 }),
-                /* @__PURE__ */ jsx19(
-                  Text9,
+                mode === "light" ? /* @__PURE__ */ jsx20(LuSun, { size: 13 }) : /* @__PURE__ */ jsx20(LuMoon, { size: 13 }),
+                /* @__PURE__ */ jsx20(
+                  Text10,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4308,11 +4519,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx19(Separator4, {}),
-      /* @__PURE__ */ jsxs16(Flex9, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx19(
-            Box16,
+      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx20(
+            Box17,
             {
               w: "38px",
               h: "38px",
@@ -4328,15 +4539,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ jsxs16(Box16, { children: [
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ jsxs17(Box17, { children: [
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsx19(HStack5, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ jsx20(HStack6, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
-          return /* @__PURE__ */ jsx19(
-            Button3,
+          return /* @__PURE__ */ jsx20(
+            Button4,
             {
               size: "sm",
               variant: "outline",
@@ -4351,8 +4562,8 @@ function ReusableProfile({
               },
               onClick: () => handleFontSize(option.value),
               title: option.title,
-              children: /* @__PURE__ */ jsx19(
-                Text9,
+              children: /* @__PURE__ */ jsx20(
+                Text10,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4364,9 +4575,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx19(Separator4, {}),
-      /* @__PURE__ */ jsx19(
-        Box16,
+      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(
+        Box17,
         {
           as: "button",
           w: "full",
@@ -4374,10 +4585,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ jsxs16(Flex9, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ jsx19(
-                Box16,
+          children: /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ jsx20(
+                Box17,
                 {
                   w: "38px",
                   h: "38px",
@@ -4388,12 +4599,12 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: "gray.600",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ jsx19(LuArrowLeftRight, { size: 16 })
+                  children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsxs16(Box16, { children: [
-                /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ jsxs16(Text9, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ jsxs17(Box17, { children: [
+                /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4401,13 +4612,13 @@ function ReusableProfile({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsx19(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+            /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx19(Box16, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx19(VStack8, { gap: 2.5, children: /* @__PURE__ */ jsx19(
-      Button3,
+    /* @__PURE__ */ jsx20(Box17, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx20(VStack9, { gap: 2.5, children: /* @__PURE__ */ jsx20(
+      Button4,
       {
         w: "full",
         variant: "outline",
@@ -4419,9 +4630,9 @@ function ReusableProfile({
       }
     ) }) })
   ] });
-  const editAccountContent = /* @__PURE__ */ jsxs16(Fragment3, { children: [
-    /* @__PURE__ */ jsx19(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ jsx19(
+  const editAccountContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx20(Box17, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ jsx20(
         IconButton3,
         {
           size: "sm",
@@ -4429,19 +4640,19 @@ function ReusableProfile({
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ jsx19(LuChevronLeft2, {})
+          children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx19(Text9, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ jsx19(Box16, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ jsxs16(Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ jsx19(Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ jsx19(Avatar.Fallback, { name: editName })
+    /* @__PURE__ */ jsx20(Box17, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ jsxs17(Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ jsx20(Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ jsx20(Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__PURE__ */ jsxs16(VStack8, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
-        /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs17(VStack9, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+        /* @__PURE__ */ jsx20(
           Input4,
           {
             value: editName,
@@ -4451,9 +4662,9 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+        /* @__PURE__ */ jsx20(
           Input4,
           {
             value: user.email ?? "",
@@ -4464,9 +4675,9 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+        /* @__PURE__ */ jsx20(
           Input4,
           {
             value: user.mobileNumber ?? "",
@@ -4477,8 +4688,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx19(
-        Button3,
+      /* @__PURE__ */ jsx20(
+        Button4,
         {
           w: "full",
           mt: 2,
@@ -4492,9 +4703,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const changePasswordContent = /* @__PURE__ */ jsxs16(Fragment3, { children: [
-    /* @__PURE__ */ jsx19(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ jsx19(
+  const changePasswordContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx20(Box17, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ jsx20(
         IconButton3,
         {
           size: "sm",
@@ -4502,18 +4713,18 @@ function ReusableProfile({
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ jsx19(LuChevronLeft2, {})
+          children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx19(Text9, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__PURE__ */ jsxs16(VStack8, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
-        /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs17(VStack9, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+        /* @__PURE__ */ jsx20(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx19(
+            endElement: /* @__PURE__ */ jsx20(
               IconButton3,
               {
                 size: "xs",
@@ -4521,10 +4732,10 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle current password visibility",
                 onClick: () => setShowCurrentPw(!showCurrentPw),
-                children: showCurrentPw ? /* @__PURE__ */ jsx19(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx19(LuEye, { size: 15 })
+                children: showCurrentPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               Input4,
               {
                 type: showCurrentPw ? "text" : "password",
@@ -4537,12 +4748,12 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+        /* @__PURE__ */ jsx20(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx19(
+            endElement: /* @__PURE__ */ jsx20(
               IconButton3,
               {
                 size: "xs",
@@ -4550,10 +4761,10 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle new password visibility",
                 onClick: () => setShowNewPw(!showNewPw),
-                children: showNewPw ? /* @__PURE__ */ jsx19(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx19(LuEye, { size: 15 })
+                children: showNewPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               Input4,
               {
                 type: showNewPw ? "text" : "password",
@@ -4565,9 +4776,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ jsxs16(Box16, { mt: 2, children: [
-          /* @__PURE__ */ jsx19(Flex9, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx19(
-            Box16,
+        newPw && /* @__PURE__ */ jsxs17(Box17, { mt: 2, children: [
+          /* @__PURE__ */ jsx20(Flex10, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx20(
+            Box17,
             {
               flex: 1,
               h: "3px",
@@ -4577,15 +4788,15 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs16(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
-        /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+        /* @__PURE__ */ jsx20(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx19(
+            endElement: /* @__PURE__ */ jsx20(
               IconButton3,
               {
                 size: "xs",
@@ -4593,10 +4804,10 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle confirm password visibility",
                 onClick: () => setShowConfirmPw(!showConfirmPw),
-                children: showConfirmPw ? /* @__PURE__ */ jsx19(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx19(LuEye, { size: 15 })
+                children: showConfirmPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               Input4,
               {
                 type: showConfirmPw ? "text" : "password",
@@ -4608,10 +4819,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
-      /* @__PURE__ */ jsx19(
-        Button3,
+      /* @__PURE__ */ jsx20(
+        Button4,
         {
           w: "full",
           mt: 1,
@@ -4626,9 +4837,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const navbarCustomizeContent = /* @__PURE__ */ jsxs16(Fragment3, { children: [
-    /* @__PURE__ */ jsx19(
-      Box16,
+  const navbarCustomizeContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx20(
+      Box17,
       {
         px: 4,
         pt: 4,
@@ -4639,8 +4850,8 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 2, pr: 10, children: [
-          /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
+          /* @__PURE__ */ jsx20(
             IconButton3,
             {
               size: "sm",
@@ -4651,12 +4862,12 @@ function ReusableProfile({
                 setReplacingIdx(null);
                 setProfileView("main");
               },
-              children: /* @__PURE__ */ jsx19(LuChevronLeft2, {})
+              children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
             }
           ),
-          /* @__PURE__ */ jsxs16(Box16, { children: [
-            /* @__PURE__ */ jsx19(Text9, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ jsxs16(Text9, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ jsxs17(Box17, { children: [
+            /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -4665,10 +4876,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs16(Box16, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ jsxs16(Flex9, { align: "center", justify: "space-between", mb: 3, children: [
-        /* @__PURE__ */ jsx19(
-          Text9,
+    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
+        /* @__PURE__ */ jsx20(
+          Text10,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4678,8 +4889,8 @@ function ReusableProfile({
             children: "Pinned"
           }
         ),
-        /* @__PURE__ */ jsxs16(
-          Text9,
+        /* @__PURE__ */ jsxs17(
+          Text10,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4692,8 +4903,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      quickNavHrefs.length === 0 ? /* @__PURE__ */ jsx19(
-        Flex9,
+      quickNavHrefs.length === 0 ? /* @__PURE__ */ jsx20(
+        Flex10,
         {
           align: "center",
           justify: "center",
@@ -4702,18 +4913,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ jsx19(VStack8, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ jsx20(VStack9, { 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__ */ jsxs16(Box16, { w: "full", children: [
-          /* @__PURE__ */ jsxs16(
-            Flex9,
+        return /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+          /* @__PURE__ */ jsxs17(
+            Flex10,
             {
               justify: "space-between",
               align: "center",
@@ -4725,9 +4936,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx19(
-                    Box16,
+                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx20(
+                    Box17,
                     {
                       w: "36px",
                       h: "36px",
@@ -4738,13 +4949,13 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "white",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx19(ItemIcon, { size: 15 })
+                      children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs16(Box16, { children: [
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: "medium", children: option.title }),
-                    isReplacing && /* @__PURE__ */ jsx19(
-                      Text9,
+                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                    isReplacing && /* @__PURE__ */ jsx20(
+                      Text10,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -4754,8 +4965,8 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs16(HStack5, { gap: 0.5, children: [
-                  /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsxs17(HStack6, { gap: 0.5, children: [
+                  /* @__PURE__ */ jsx20(
                     IconButton3,
                     {
                       size: "xs",
@@ -4764,10 +4975,10 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isFirst || isReplacing,
                       onClick: () => moveNavItem(idx, -1),
-                      children: /* @__PURE__ */ jsx19(LuChevronUp3, { size: 14 })
+                      children: /* @__PURE__ */ jsx20(LuChevronUp3, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     IconButton3,
                     {
                       size: "xs",
@@ -4776,10 +4987,10 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isLast || isReplacing,
                       onClick: () => moveNavItem(idx, 1),
-                      children: /* @__PURE__ */ jsx19(LuChevronDown3, { size: 14 })
+                      children: /* @__PURE__ */ jsx20(LuChevronDown3, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     IconButton3,
                     {
                       size: "xs",
@@ -4789,10 +5000,10 @@ function ReusableProfile({
                       color: isReplacing ? "white" : "gray.500",
                       _hover: { bg: isReplacing ? "orange.500" : "gray.100" },
                       onClick: () => setReplacingIdx(isReplacing ? null : idx),
-                      children: /* @__PURE__ */ jsx19(LuArrowLeftRight, { size: 13 })
+                      children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
                     }
                   ),
-                  /* @__PURE__ */ jsx19(
+                  /* @__PURE__ */ jsx20(
                     IconButton3,
                     {
                       size: "xs",
@@ -4802,23 +5013,23 @@ function ReusableProfile({
                       _hover: { bg: "red.50" },
                       disabled: isReplacing,
                       onClick: () => removeNavItem(href),
-                      children: /* @__PURE__ */ jsx19(LuX, { size: 14 })
+                      children: /* @__PURE__ */ jsx20(LuX, { size: 14 })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ jsx19(Separator4, {})
+          !isLast && /* @__PURE__ */ jsx20(Separator4, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ jsx19(Separator4, { mx: 4, my: 1 }),
-    /* @__PURE__ */ jsxs16(Box16, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ jsxs16(Flex9, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ jsxs16(Box16, { children: [
-          /* @__PURE__ */ jsx19(
-            Text9,
+    /* @__PURE__ */ jsx20(Separator4, { mx: 4, my: 1 }),
+    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ jsxs17(Box17, { children: [
+          /* @__PURE__ */ jsx20(
+            Text10,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -4828,15 +5039,15 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ jsxs16(Text9, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
             )?.title,
             '"'
           ] })
-        ] }) : /* @__PURE__ */ jsx19(
-          Text9,
+        ] }) : /* @__PURE__ */ jsx20(
+          Text10,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4846,8 +5057,8 @@ function ReusableProfile({
             children: "Available"
           }
         ),
-        replacingIdx !== null && /* @__PURE__ */ jsx19(
-          Button3,
+        replacingIdx !== null && /* @__PURE__ */ jsx20(
+          Button4,
           {
             size: "xs",
             variant: "ghost",
@@ -4857,17 +5068,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx19(VStack8, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx20(VStack9, { 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__ */ jsxs16(Box16, { w: "full", children: [
-          /* @__PURE__ */ jsxs16(Flex9, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ jsxs16(Flex9, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ jsx19(
-                Box16,
+        return /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+          /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ jsx20(
+                Box17,
                 {
                   w: "36px",
                   h: "36px",
@@ -4878,11 +5089,11 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: isReplacingMode ? "orange.500" : "gray.500",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ jsx19(ItemIcon, { size: 15 })
+                  children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
                 }
               ),
-              /* @__PURE__ */ jsx19(
-                Text9,
+              /* @__PURE__ */ jsx20(
+                Text10,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -4891,7 +5102,7 @@ function ReusableProfile({
                 }
               )
             ] }),
-            isReplacingMode ? /* @__PURE__ */ jsx19(
+            isReplacingMode ? /* @__PURE__ */ jsx20(
               IconButton3,
               {
                 size: "xs",
@@ -4901,9 +5112,9 @@ function ReusableProfile({
                 color: "orange.500",
                 _hover: { bg: "orange.50" },
                 onClick: () => replaceNavItem(replacingIdx, option.key),
-                children: /* @__PURE__ */ jsx19(LuArrowLeftRight, { size: 13 })
+                children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
               }
-            ) : /* @__PURE__ */ jsx19(
+            ) : /* @__PURE__ */ jsx20(
               IconButton3,
               {
                 size: "xs",
@@ -4914,19 +5125,19 @@ function ReusableProfile({
                 color: canAdd ? "var(--chakra-colors-primary)" : "gray.300",
                 _hover: { bg: canAdd ? "blue.50" : "transparent" },
                 onClick: () => addNavItem(option.key),
-                children: /* @__PURE__ */ jsx19(LuPlus, { size: 13 })
+                children: /* @__PURE__ */ jsx20(LuPlus, { size: 13 })
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ jsx19(Separator4, {})
+          !isLast && /* @__PURE__ */ jsx20(Separator4, {})
         ] }, option.key);
       }) })
     ] })
   ] });
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
-    return /* @__PURE__ */ jsxs16(
-      Flex9,
+    return /* @__PURE__ */ jsxs17(
+      Flex10,
       {
         maxW: "6xl",
         mx: "auto",
@@ -4936,8 +5147,8 @@ function ReusableProfile({
         p: { md: 6, lg: 8 },
         align: "start",
         children: [
-          /* @__PURE__ */ jsx19(
-            Box16,
+          /* @__PURE__ */ jsx20(
+            Box17,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -4951,8 +5162,8 @@ function ReusableProfile({
               children: mainContent
             }
           ),
-          /* @__PURE__ */ jsx19(
-            Box16,
+          /* @__PURE__ */ jsx20(
+            Box17,
             {
               flex: "1",
               minW: 0,
@@ -4962,8 +5173,8 @@ function ReusableProfile({
               overflow: "hidden",
               bg: "bg",
               minH: "540px",
-              children: subViewContent ?? /* @__PURE__ */ jsxs16(
-                Flex9,
+              children: subViewContent ?? /* @__PURE__ */ jsxs17(
+                Flex10,
                 {
                   direction: "column",
                   align: "center",
@@ -4973,8 +5184,8 @@ function ReusableProfile({
                   textAlign: "center",
                   color: "gray.400",
                   children: [
-                    /* @__PURE__ */ jsx19(
-                      Box16,
+                    /* @__PURE__ */ jsx20(
+                      Box17,
                       {
                         w: "56px",
                         h: "56px",
@@ -4984,10 +5195,10 @@ function ReusableProfile({
                         alignItems: "center",
                         justifyContent: "center",
                         mb: 4,
-                        children: /* @__PURE__ */ jsx19(LuUser, { size: 24 })
+                        children: /* @__PURE__ */ jsx20(LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
+                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -4997,7 +5208,7 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ jsx19(Box16, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ jsx20(Box17, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
 }
 var UserProfile_default = ReusableProfile;
 export {
@@ -5010,6 +5221,7 @@ export {
   LifePlanApplication3_default as LifePlanApplication3,
   LifePlanApplicationFormWrapper_default as LifePlanApplicationFormWrapper,
   LifePlanApplicationStepWrapper_default as LifePlanApplicationStepWrapper,
+  NotifyInstall,
   SharedLifePlanApplication_default as SharedLifePlanApplication,
   UserProfile_default as UserProfile,
   createEmptyApplicationData,