@splpi/estore-shared-components 0.0.3 → 0.0.5

package/dist/index.js

@@ -3482,6 +3482,7 @@ var BottomQuickActions_default = BottomQuickActions;
 // src/Generic/NotifyInstall.tsx
 var import_react32 = require("react");
 var import_react33 = require("@chakra-ui/react");
+var import_react34 = require("motion/react");
 var import_fi = require("react-icons/fi");
 
 // src/hooks/useNotifyInstall.ts
@@ -3524,163 +3525,175 @@ function useNotifyInstall() {
 // src/Generic/NotifyInstall.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var STEPS = [
-  {
-    icon: import_fi.FiShare,
-    label: "Tap the browser menu or Share button"
-  },
-  {
-    icon: import_fi.FiPlusSquare,
-    label: 'Choose "Add to Home Screen"'
-  }
+  { icon: import_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";
+var DISMISSED_KEY = "estore-install-dialog-dismissed";
 function NotifyInstall({
-  children
+  children,
+  appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = (0, import_react32.useState)(false);
+  const [isDismissed, setIsDismissed] = (0, import_react32.useState)(true);
   (0, import_react32.useEffect)(() => {
-    const wasDismissed = localStorage.getItem(INSTALL_DIALOG_DISMISSED_KEY);
-    setIsDismissed(wasDismissed === "true");
+    if (localStorage.getItem(DISMISSED_KEY) !== "true") {
+      setIsDismissed(false);
+    }
   }, []);
-  const handleClose = () => {
-    localStorage.setItem(INSTALL_DIALOG_DISMISSED_KEY, "true");
+  const handleDismiss = () => {
+    localStorage.setItem(DISMISSED_KEY, "true");
     setIsDismissed(true);
   };
-  const isOpen = !isInstalled && isMobile && !isDismissed;
-  if (!isOpen) {
-    return children;
-  }
+  const showPrompt = isMobile && !isInstalled && !isDismissed;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react33.Dialog.Root,
-      {
-        open: isOpen,
-        onOpenChange: (details) => {
-          if (!details.open) {
-            handleClose();
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react34.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react34.motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.2 },
+          onClick: handleDismiss,
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 1300,
+            background: "rgba(0,0,0,0.55)",
+            backdropFilter: "blur(3px)",
+            WebkitBackdropFilter: "blur(3px)"
           }
         },
-        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,
+        "install-backdrop"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        import_react34.motion.div,
+        {
+          initial: { y: "100%" },
+          animate: { y: 0 },
+          exit: { y: "100%" },
+          transition: { type: "spring", damping: 28, stiffness: 280 },
+          style: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1400,
+            background: "white",
+            borderRadius: "24px 24px 0 0",
+            boxShadow: "0 -8px 40px rgba(0,0,0,0.14)",
+            paddingBottom: "env(safe-area-inset-bottom)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              "button",
+              {
+                "aria-label": "Dismiss install prompt",
+                onClick: handleDismiss,
+                style: {
+                  position: "absolute",
+                  top: 12,
+                  right: 12,
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  padding: 8,
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#9ca3af"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiX, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_react33.Flex,
+                {
+                  boxSize: 16,
+                  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: 8 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                  import_react33.Text,
+                  {
+                    fontSize: "lg",
+                    fontWeight: "bold",
+                    color: "gray.900",
+                    lineHeight: "short",
+                    children: [
+                      "Install ",
+                      appName
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
+              ] }),
+              canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                import_react33.Button,
                 {
-                  w: "xl",
-                  maxW: { base: "full", sm: "sm" },
-                  borderRadius: { base: "2xl 2xl 0 0", sm: "2xl" },
-                  overflow: "hidden",
-                  boxShadow: "2xl",
-                  m: 0,
+                  onClick: install,
+                  colorPalette: "green",
+                  size: "lg",
+                  w: "full",
+                  rounded: "xl",
                   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 }) })
+                    /* @__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.VStack,
+                {
+                  w: "full",
+                  bg: "gray.50",
+                  borderWidth: "1px",
+                  borderColor: "gray.100",
+                  rounded: "xl",
+                  p: 4,
+                  gap: 4,
+                  align: "stretch",
+                  children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
+                    /* @__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 })
+                  ] }, i))
+                }
               )
-            }
-          )
-        ] })
-      }
-    )
+            ] })
+          ]
+        },
+        "install-sheet"
+      )
+    ] }) })
   ] });
 }
 
 // src/UserProfile/UserProfile.tsx
-var import_react34 = require("react");
-var import_react35 = require("@chakra-ui/react");
+var import_react35 = require("react");
+var import_react36 = 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");
@@ -3987,28 +4000,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = (0, import_react34.useState)("main");
-  const [fallbackColorMode, setFallbackColorMode] = (0, import_react34.useState)("light");
+  const [profileView, setProfileView] = (0, import_react35.useState)("main");
+  const [fallbackColorMode, setFallbackColorMode] = (0, import_react35.useState)("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = (0, import_react34.useState)("md");
-  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react34.useState)(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = (0, import_react34.useState)(null);
-  const [editName, setEditName] = (0, import_react34.useState)(user.displayName);
-  const [editLoading, setEditLoading] = (0, import_react34.useState)(false);
-  const [currentPw, setCurrentPw] = (0, import_react34.useState)("");
-  const [newPw, setNewPw] = (0, import_react34.useState)("");
-  const [confirmPw, setConfirmPw] = (0, import_react34.useState)("");
-  const [showCurrentPw, setShowCurrentPw] = (0, import_react34.useState)(false);
-  const [showNewPw, setShowNewPw] = (0, import_react34.useState)(false);
-  const [showConfirmPw, setShowConfirmPw] = (0, import_react34.useState)(false);
-  const [pwLoading, setPwLoading] = (0, import_react34.useState)(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react34.useState)(
+  const [fontSize, setFontSizeLocal] = (0, import_react35.useState)("md");
+  const [quickNavHrefs, setQuickNavHrefs] = (0, import_react35.useState)(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = (0, import_react35.useState)(null);
+  const [editName, setEditName] = (0, import_react35.useState)(user.displayName);
+  const [editLoading, setEditLoading] = (0, import_react35.useState)(false);
+  const [currentPw, setCurrentPw] = (0, import_react35.useState)("");
+  const [newPw, setNewPw] = (0, import_react35.useState)("");
+  const [confirmPw, setConfirmPw] = (0, import_react35.useState)("");
+  const [showCurrentPw, setShowCurrentPw] = (0, import_react35.useState)(false);
+  const [showNewPw, setShowNewPw] = (0, import_react35.useState)(false);
+  const [showConfirmPw, setShowConfirmPw] = (0, import_react35.useState)(false);
+  const [pwLoading, setPwLoading] = (0, import_react35.useState)(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react35.useState)(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = (0, import_react34.useState)(false);
-  const isDesktopRaw = (0, import_react35.useBreakpointValue)({ base: false, md: true });
+  const [isMounted, setIsMounted] = (0, import_react35.useState)(false);
+  const isDesktopRaw = (0, import_react36.useBreakpointValue)({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4019,10 +4032,10 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
-  const availableOptions = (0, import_react34.useMemo)(
+  const availableOptions = (0, import_react35.useMemo)(
     () => availableNavOptions.filter(
       (option) => !user.role || option.roles.includes(user.role)
     ),
@@ -4152,7 +4165,7 @@ function ReusableProfile({
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
   const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_react35.Box,
+      import_react36.Box,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4161,20 +4174,20 @@ function ReusableProfile({
         textAlign: "center",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Avatar.Root,
+            import_react36.Avatar.Root,
             {
               size: "2xl",
               mx: "auto",
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: user.displayName })
+                user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Text,
+            import_react36.Text,
             {
               color: "white",
               fontWeight: "bold",
@@ -4184,9 +4197,9 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Badge,
+          user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react36.Badge,
             {
               bg: "rgba(255,255,255,0.15)",
               color: "white",
@@ -4202,9 +4215,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 1, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Text,
+        import_react36.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4216,7 +4229,7 @@ function ReusableProfile({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+        import_react36.Box,
         {
           as: "button",
           w: "full",
@@ -4225,7 +4238,7 @@ function ReusableProfile({
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+            import_react36.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4234,9 +4247,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                    import_react36.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4250,9 +4263,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4261,9 +4274,9 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+        import_react36.Box,
         {
           as: "button",
           w: "full",
@@ -4275,7 +4288,7 @@ function ReusableProfile({
             setProfileView("change-password");
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+            import_react36.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4284,9 +4297,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                    import_react36.Box,
                     {
                       w: "38px",
                       h: "38px",
@@ -4300,9 +4313,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4311,11 +4324,11 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+            import_react36.Box,
             {
               w: "38px",
               h: "38px",
@@ -4329,13 +4342,13 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Box,
+          import_react36.Box,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4358,7 +4371,7 @@ function ReusableProfile({
             flexShrink: 0,
             outline: "none",
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Box,
+              import_react36.Box,
               {
                 position: "absolute",
                 top: "3px",
@@ -4375,9 +4388,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 2, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Text,
+        import_react36.Text,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4388,10 +4401,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+            import_react36.Box,
             {
               w: "38px",
               h: "38px",
@@ -4405,15 +4418,15 @@ function ReusableProfile({
               children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
           return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Button,
+            import_react36.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4430,7 +4443,7 @@ function ReusableProfile({
               children: [
                 mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 13 }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  import_react35.Text,
+                  import_react36.Text,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4444,11 +4457,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+            import_react36.Box,
             {
               w: "38px",
               h: "38px",
@@ -4464,15 +4477,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
           return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Button,
+            import_react36.Button,
             {
               size: "sm",
               variant: "outline",
@@ -4488,7 +4501,7 @@ function ReusableProfile({
               onClick: () => handleFontSize(option.value),
               title: option.title,
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Text,
+                import_react36.Text,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4500,9 +4513,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Box,
+        import_react36.Box,
         {
           as: "button",
           w: "full",
@@ -4510,10 +4523,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Box,
+                import_react36.Box,
                 {
                   w: "38px",
                   h: "38px",
@@ -4527,9 +4540,9 @@ function ReusableProfile({
                   children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4542,8 +4555,8 @@ function ReusableProfile({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react35.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react36.Button,
       {
         w: "full",
         variant: "outline",
@@ -4556,9 +4569,9 @@ function ReusableProfile({
     ) }) })
   ] });
   const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.IconButton,
+        import_react36.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -4568,17 +4581,17 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: editName })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.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.jsxs)(import_react36.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+          import_react36.Input,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -4587,10 +4600,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+          import_react36.Input,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -4600,10 +4613,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Input,
+          import_react36.Input,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -4614,7 +4627,7 @@ function ReusableProfile({
         )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Button,
+        import_react36.Button,
         {
           w: "full",
           mt: 2,
@@ -4629,9 +4642,9 @@ function ReusableProfile({
     ] })
   ] });
   const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.IconButton,
+        import_react36.IconButton,
         {
           size: "sm",
           variant: "ghost",
@@ -4641,16 +4654,16 @@ function ReusableProfile({
           children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+          import_react36.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+              import_react36.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4661,7 +4674,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+              import_react36.Input,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -4673,13 +4686,13 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+          import_react36.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+              import_react36.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4690,7 +4703,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+              import_react36.Input,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -4701,9 +4714,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { mt: 2, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+        newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { mt: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react36.Box,
             {
               flex: 1,
               h: "3px",
@@ -4713,16 +4726,16 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.InputGroup,
+          import_react36.InputGroup,
           {
             endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+              import_react36.IconButton,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4733,7 +4746,7 @@ function ReusableProfile({
               }
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.Input,
+              import_react36.Input,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -4744,10 +4757,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Button,
+        import_react36.Button,
         {
           w: "full",
           mt: 1,
@@ -4764,7 +4777,7 @@ function ReusableProfile({
   ] });
   const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_react35.Box,
+      import_react36.Box,
       {
         px: 4,
         pt: 4,
@@ -4775,9 +4788,9 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.IconButton,
+            import_react36.IconButton,
             {
               size: "sm",
               variant: "ghost",
@@ -4790,9 +4803,9 @@ function ReusableProfile({
               children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -4801,10 +4814,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Text,
+          import_react36.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4815,7 +4828,7 @@ function ReusableProfile({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-          import_react35.Text,
+          import_react36.Text,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4829,7 +4842,7 @@ function ReusableProfile({
         )
       ] }),
       quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        import_react35.Flex,
+        import_react36.Flex,
         {
           align: "center",
           justify: "center",
@@ -4838,18 +4851,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
         const option = availableOptions.find((item) => item.key === href);
         if (!option) return null;
         const ItemIcon = option.Icon;
         const isFirst = idx === 0;
         const isLast = idx === quickNavHrefs.length - 1;
         const isReplacing = replacingIdx === idx;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-            import_react35.Flex,
+            import_react36.Flex,
             {
               justify: "space-between",
               align: "center",
@@ -4861,9 +4874,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.Box,
+                    import_react36.Box,
                     {
                       w: "36px",
                       h: "36px",
@@ -4877,10 +4890,10 @@ function ReusableProfile({
                       children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
                     isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react35.Text,
+                      import_react36.Text,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -4890,9 +4903,9 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.HStack, { gap: 0.5, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                    import_react36.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4904,7 +4917,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                    import_react36.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4916,7 +4929,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                    import_react36.IconButton,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -4929,7 +4942,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                    import_react35.IconButton,
+                    import_react36.IconButton,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4945,16 +4958,16 @@ function ReusableProfile({
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, { mx: 4, my: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, { mx: 4, my: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Text,
+            import_react36.Text,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -4964,7 +4977,7 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
@@ -4972,7 +4985,7 @@ function ReusableProfile({
             '"'
           ] })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Text,
+          import_react36.Text,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4983,7 +4996,7 @@ function ReusableProfile({
           }
         ),
         replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_react35.Button,
+          import_react36.Button,
           {
             size: "xs",
             variant: "ghost",
@@ -4993,17 +5006,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
         const ItemIcon = option.Icon;
         const isLast = idx === unpinnedOptions.length - 1;
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Box,
+                import_react36.Box,
                 {
                   w: "36px",
                   h: "36px",
@@ -5018,7 +5031,7 @@ function ReusableProfile({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                import_react35.Text,
+                import_react36.Text,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -5028,7 +5041,7 @@ function ReusableProfile({
               )
             ] }),
             isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+              import_react36.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5040,7 +5053,7 @@ function ReusableProfile({
                 children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_react35.IconButton,
+              import_react36.IconButton,
               {
                 size: "xs",
                 variant: "outline",
@@ -5054,7 +5067,7 @@ function ReusableProfile({
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
         ] }, option.key);
       }) })
     ] })
@@ -5062,7 +5075,7 @@ function ReusableProfile({
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      import_react35.Flex,
+      import_react36.Flex,
       {
         maxW: "6xl",
         mx: "auto",
@@ -5073,7 +5086,7 @@ function ReusableProfile({
         align: "start",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+            import_react36.Box,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5088,7 +5101,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react35.Box,
+            import_react36.Box,
             {
               flex: "1",
               minW: 0,
@@ -5099,7 +5112,7 @@ function ReusableProfile({
               bg: "bg",
               minH: "540px",
               children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                import_react35.Flex,
+                import_react36.Flex,
                 {
                   direction: "column",
                   align: "center",
@@ -5110,7 +5123,7 @@ function ReusableProfile({
                   color: "gray.400",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                      import_react35.Box,
+                      import_react36.Box,
                       {
                         w: "56px",
                         h: "56px",
@@ -5123,7 +5136,7 @@ function ReusableProfile({
                         children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -5133,7 +5146,7 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.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: