@splpi/estore-shared-components 0.0.3 → 0.0.5

package/dist/index.mjs

@@ -3510,20 +3510,9 @@ 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";
+import { Button as Button3, Flex as Flex9, HStack as HStack5, Icon as Icon5, Text as Text9, VStack as VStack8 } from "@chakra-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { FiDownload, FiPlusSquare, FiShare, FiX } from "react-icons/fi";
 
 // src/hooks/useNotifyInstall.ts
 import { useEffect as useEffect7, useState as useState12 } from "react";
@@ -3565,157 +3554,169 @@ function useNotifyInstall() {
 // 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"'
-  }
+  { 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";
+var DISMISSED_KEY = "estore-install-dialog-dismissed";
 function NotifyInstall({
-  children
+  children,
+  appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = useState13(false);
+  const [isDismissed, setIsDismissed] = useState13(true);
   useEffect8(() => {
-    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__ */ jsxs16(Fragment3, { children: [
     children,
-    /* @__PURE__ */ jsx19(
-      Dialog3.Root,
-      {
-        open: isOpen,
-        onOpenChange: (details) => {
-          if (!details.open) {
-            handleClose();
+    /* @__PURE__ */ jsx19(AnimatePresence, { children: showPrompt && /* @__PURE__ */ jsxs16(Fragment3, { children: [
+      /* @__PURE__ */ jsx19(
+        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__ */ 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,
+        "install-backdrop"
+      ),
+      /* @__PURE__ */ jsxs16(
+        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__ */ jsx19(
+              "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__ */ jsx19(FiX, { size: 18 })
+              }
+            ),
+            /* @__PURE__ */ jsxs16(VStack8, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+              /* @__PURE__ */ jsx19(
+                Flex9,
                 {
-                  w: "xl",
-                  maxW: { base: "full", sm: "sm" },
-                  borderRadius: { base: "2xl 2xl 0 0", sm: "2xl" },
-                  overflow: "hidden",
-                  boxShadow: "2xl",
-                  m: 0,
+                  boxSize: 16,
+                  align: "center",
+                  justify: "center",
+                  rounded: "2xl",
+                  bg: "green.50",
+                  color: "green.600",
+                  shadow: "sm",
+                  children: /* @__PURE__ */ jsx19(Icon5, { as: FiDownload, boxSize: 8 })
+                }
+              ),
+              /* @__PURE__ */ jsxs16(VStack8, { gap: 2, children: [
+                /* @__PURE__ */ jsxs16(
+                  Text9,
+                  {
+                    fontSize: "lg",
+                    fontWeight: "bold",
+                    color: "gray.900",
+                    lineHeight: "short",
+                    children: [
+                      "Install ",
+                      appName
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx19(Text9, { 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__ */ jsxs16(
+                Button3,
+                {
+                  onClick: install,
+                  colorPalette: "green",
+                  size: "lg",
+                  w: "full",
+                  rounded: "xl",
                   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 }) })
+                    /* @__PURE__ */ jsx19(Icon5, { as: FiDownload }),
+                    "Add to Home Screen"
                   ]
                 }
+              ) : /* @__PURE__ */ jsx19(
+                VStack8,
+                {
+                  w: "full",
+                  bg: "gray.50",
+                  borderWidth: "1px",
+                  borderColor: "gray.100",
+                  rounded: "xl",
+                  p: 4,
+                  gap: 4,
+                  align: "stretch",
+                  children: STEPS.map((step, i) => /* @__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 })
+                  ] }, i))
+                }
               )
-            }
-          )
-        ] })
-      }
-    )
+            ] })
+          ]
+        },
+        "install-sheet"
+      )
+    ] }) })
   ] });
 }
 
@@ -3724,7 +3725,7 @@ import { useEffect as useEffect9, useMemo, useState as useState14 } from "react"
 import {
   Avatar,
   Badge as Badge2,
-  Box as Box17,
+  Box as Box16,
   Button as Button4,
   Flex as Flex10,
   HStack as HStack6,
@@ -4241,7 +4242,7 @@ function ReusableProfile({
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
   const mainContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
     /* @__PURE__ */ jsxs17(
-      Box17,
+      Box16,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4274,7 +4275,7 @@ function ReusableProfile({
             }
           ),
           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(
+          roleLabel && /* @__PURE__ */ jsx20(Box16, { display: "inline-flex", children: /* @__PURE__ */ jsx20(
             Badge2,
             {
               bg: "rgba(255,255,255,0.15)",
@@ -4291,7 +4292,7 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 5, pb: 1, children: [
+    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 5, pb: 1, children: [
       /* @__PURE__ */ jsx20(
         Text10,
         {
@@ -4305,7 +4306,7 @@ function ReusableProfile({
         }
       ),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4325,7 +4326,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "38px",
                       h: "38px",
@@ -4339,7 +4340,7 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                  /* @__PURE__ */ jsxs17(Box16, { 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" })
                   ] })
@@ -4352,7 +4353,7 @@ function ReusableProfile({
       ),
       /* @__PURE__ */ jsx20(Separator4, {}),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4375,7 +4376,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "38px",
                       h: "38px",
@@ -4389,7 +4390,7 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                  /* @__PURE__ */ jsxs17(Box16, { 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" })
                   ] })
@@ -4404,7 +4405,7 @@ function ReusableProfile({
       /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
         /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               w: "38px",
               h: "38px",
@@ -4418,13 +4419,13 @@ function ReusableProfile({
               children: /* @__PURE__ */ jsx20(LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
+          /* @__PURE__ */ jsxs17(Box16, { 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__ */ jsx20(
-          Box17,
+          Box16,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4447,7 +4448,7 @@ function ReusableProfile({
             flexShrink: 0,
             outline: "none",
             children: /* @__PURE__ */ jsx20(
-              Box17,
+              Box16,
               {
                 position: "absolute",
                 top: "3px",
@@ -4464,7 +4465,7 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 4, pb: 2, children: [
+    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 4, pb: 2, children: [
       /* @__PURE__ */ jsx20(
         Text10,
         {
@@ -4480,7 +4481,7 @@ function ReusableProfile({
       /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
         /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               w: "38px",
               h: "38px",
@@ -4494,7 +4495,7 @@ function ReusableProfile({
               children: colorMode === "dark" ? /* @__PURE__ */ jsx20(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx20(LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
+          /* @__PURE__ */ jsxs17(Box16, { 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" })
           ] })
@@ -4537,7 +4538,7 @@ function ReusableProfile({
       /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
         /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               w: "38px",
               h: "38px",
@@ -4553,7 +4554,7 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
+          /* @__PURE__ */ jsxs17(Box16, { children: [
             /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
             /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
@@ -4591,7 +4592,7 @@ function ReusableProfile({
       ] }),
       /* @__PURE__ */ jsx20(Separator4, {}),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4602,7 +4603,7 @@ function ReusableProfile({
           children: /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
             /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
               /* @__PURE__ */ jsx20(
-                Box17,
+                Box16,
                 {
                   w: "38px",
                   h: "38px",
@@ -4616,7 +4617,7 @@ function ReusableProfile({
                   children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsxs17(Box17, { children: [
+              /* @__PURE__ */ jsxs17(Box16, { children: [
                 /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
                 /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
@@ -4631,7 +4632,7 @@ function ReusableProfile({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx20(Box17, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx20(VStack9, { gap: 2.5, children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx20(VStack9, { gap: 2.5, children: /* @__PURE__ */ jsx20(
       Button4,
       {
         w: "full",
@@ -4645,7 +4646,7 @@ function ReusableProfile({
     ) }) })
   ] });
   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(Box16, { 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,
         {
@@ -4659,12 +4660,12 @@ function ReusableProfile({
       ),
       /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ jsx20(Box17, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ jsxs17(Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+    /* @__PURE__ */ jsx20(Box16, { 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__ */ jsxs17(VStack9, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
         /* @__PURE__ */ jsx20(
           Input4,
@@ -4676,7 +4677,7 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
         /* @__PURE__ */ jsx20(
           Input4,
@@ -4689,7 +4690,7 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
         /* @__PURE__ */ jsx20(
           Input4,
@@ -4718,7 +4719,7 @@ function ReusableProfile({
     ] })
   ] });
   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(Box16, { 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,
         {
@@ -4733,7 +4734,7 @@ function ReusableProfile({
       /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
     /* @__PURE__ */ jsxs17(VStack9, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
@@ -4762,7 +4763,7 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
@@ -4790,9 +4791,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ jsxs17(Box17, { mt: 2, children: [
+        newPw && /* @__PURE__ */ jsxs17(Box16, { mt: 2, children: [
           /* @__PURE__ */ jsx20(Flex10, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               flex: 1,
               h: "3px",
@@ -4805,7 +4806,7 @@ function ReusableProfile({
           /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
         /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
@@ -4853,7 +4854,7 @@ function ReusableProfile({
   ] });
   const navbarCustomizeContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
     /* @__PURE__ */ jsx20(
-      Box17,
+      Box16,
       {
         px: 4,
         pt: 4,
@@ -4879,7 +4880,7 @@ function ReusableProfile({
               children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
+          /* @__PURE__ */ jsxs17(Box16, { children: [
             /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
             /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
@@ -4890,7 +4891,7 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 5, pb: 2, children: [
+    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 5, pb: 2, children: [
       /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
         /* @__PURE__ */ jsx20(
           Text10,
@@ -4936,7 +4937,7 @@ function ReusableProfile({
         const isFirst = idx === 0;
         const isLast = idx === quickNavHrefs.length - 1;
         const isReplacing = replacingIdx === idx;
-        return /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        return /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
           /* @__PURE__ */ jsxs17(
             Flex10,
             {
@@ -4952,7 +4953,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "36px",
                       h: "36px",
@@ -4966,7 +4967,7 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
+                  /* @__PURE__ */ jsxs17(Box16, { children: [
                     /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "medium", children: option.title }),
                     isReplacing && /* @__PURE__ */ jsx20(
                       Text10,
@@ -5039,9 +5040,9 @@ function ReusableProfile({
       }) })
     ] }),
     /* @__PURE__ */ jsx20(Separator4, { mx: 4, my: 1 }),
-    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 4, pb: 10, children: [
+    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 4, pb: 10, children: [
       /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ jsxs17(Box17, { children: [
+        replacingIdx !== null ? /* @__PURE__ */ jsxs17(Box16, { children: [
           /* @__PURE__ */ jsx20(
             Text10,
             {
@@ -5088,11 +5089,11 @@ function ReusableProfile({
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
+        return /* @__PURE__ */ jsxs17(Box16, { 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,
+                Box16,
                 {
                   w: "36px",
                   h: "36px",
@@ -5162,7 +5163,7 @@ function ReusableProfile({
         align: "start",
         children: [
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5177,7 +5178,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               flex: "1",
               minW: 0,
@@ -5199,7 +5200,7 @@ function ReusableProfile({
                   color: "gray.400",
                   children: [
                     /* @__PURE__ */ jsx20(
-                      Box17,
+                      Box16,
                       {
                         w: "56px",
                         h: "56px",
@@ -5222,7 +5223,7 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ jsx20(Box17, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ jsx20(Box16, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
 }
 var UserProfile_default = ReusableProfile;
 export {