@splpi/estore-shared-components 0.0.4 → 0.0.6

package/dist/index.mjs

@@ -2983,39 +2983,51 @@ var createLifePlanSteps = (confirmationProps) => [
 ];
 
 // src/NewSaleForm/ui/horizontal-stepper.tsx
-import { useState as useState10 } from "react";
-import {
-  Box as Box13,
-  ButtonGroup,
-  Flex as Flex7,
-  IconButton as IconButton2,
-  Separator as Separator3,
-  Steps
-} from "@chakra-ui/react";
-import { NextButton, PrimaryMdButton as PrimaryMdButton2, SecondaryMdButton as SecondaryMdButton2 } from "st-peter-ui";
-import { LuChevronLeft, LuChevronRight } from "react-icons/lu";
+import { useRef, useState as useState10 } from "react";
+import { Box as Box13, ButtonGroup, Flex as Flex7, Steps, Text as Text8 } from "@chakra-ui/react";
+import { PrimaryMdButton as PrimaryMdButton2, SecondaryMdButton as SecondaryMdButton2 } from "st-peter-ui";
+import { LuChevronLeft, LuChevronRight, LuCheck as LuCheck2 } from "react-icons/lu";
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var PRIMARY = "var(--chakra-colors-primary)";
+var PRIMARY_HOVER = "var(--chakra-colors-primary-hover)";
+var PRIMARY_DISABLED = "var(--chakra-colors-primary-disabled)";
 var HorizontalStepper = ({
   steps,
+  title,
+  description,
   onStepChange,
   onSubmit,
   submitDisabled,
   activeStep: controlledActiveStep,
-  nextDisabled
+  nextDisabled,
+  submitButtonText = "Proceed To Payment"
 }) => {
   const [localActiveStep, setLocalActiveStep] = useState10(0);
   const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
+  const formTopRef = useRef(null);
+  const isCompact = steps.length < 3;
+  const isLastStep = activeStep === steps.length - 1;
+  const nextStepTitle = steps[activeStep + 1]?.title;
+  const scrollToTop = () => {
+    requestAnimationFrame(() => {
+      formTopRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+    });
+  };
   const handleStepChange = (index) => {
     if (controlledActiveStep === void 0) {
       setLocalActiveStep(index);
     }
     onStepChange?.(index);
+    scrollToTop();
   };
   const handleNext = () => {
     if (nextDisabled) return;
     handleStepChange(Math.min(activeStep + 1, steps.length - 1));
   };
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs14(
     Flex7,
     {
       direction: "column",
@@ -3024,108 +3036,284 @@ var HorizontalStepper = ({
       w: "full",
       overflow: "visible",
       pb: { base: "12px", md: "0px" },
-      children: /* @__PURE__ */ jsx15(Box13, { w: "full", colorPalette: "green", rounded: "2xl", p: 1, children: /* @__PURE__ */ jsxs14(
-        Steps.Root,
-        {
-          step: activeStep,
-          onStepChange: (index) => {
-            handleStepChange(index.step);
-          },
-          defaultStep: 0,
-          count: steps.length,
-          colorPalette: "green",
-          children: [
-            /* @__PURE__ */ jsx15(
-              Steps.List,
-              {
-                flexDirection: "row",
-                w: "full",
-                py: 2,
-                alignItems: "flex-start",
-                children: steps.map((step, index) => /* @__PURE__ */ jsxs14(
-                  Steps.Item,
-                  {
-                    index,
-                    title: step.title,
-                    minW: { base: "0px", md: "auto" },
-                    children: [
-                      /* @__PURE__ */ jsxs14(
-                        Steps.Trigger,
-                        {
-                          flexDirection: "column",
-                          alignItems: "center",
-                          gap: 1,
-                          children: [
-                            /* @__PURE__ */ jsx15(Steps.Indicator, { children: step.icon ? /* @__PURE__ */ jsx15(Box13, { as: step.icon, w: 4, h: 4 }) : null }),
-                            /* @__PURE__ */ jsx15(
-                              Steps.Title,
-                              {
-                                fontSize: { base: "xs", md: "sm" },
-                                textAlign: "center",
-                                whiteSpace: "normal",
-                                wordBreak: "break-word",
-                                children: step.title
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx15(Steps.Separator, { display: { base: "none", md: "block" } })
-                    ]
-                  },
-                  index
-                ))
-              }
-            ),
-            /* @__PURE__ */ jsx15(Separator3, { variant: "solid", mb: 3 }),
-            steps.map((step, index) => /* @__PURE__ */ jsx15(Steps.Content, { index, children: step.component ?? step.description }, index)),
-            /* @__PURE__ */ jsxs14(
-              Flex7,
-              {
-                w: "full",
-                justify: "space-between",
-                align: "center",
-                mb: 1,
-                display: { base: "flex", md: "none" },
-                children: [
-                  /* @__PURE__ */ jsx15(Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
-                    IconButton2,
-                    {
-                      "aria-label": "Previous step",
-                      size: "sm",
-                      variant: "outline",
-                      children: /* @__PURE__ */ jsx15(LuChevronLeft, {})
-                    }
-                  ) }),
-                  activeStep < steps.length - 1 ? /* @__PURE__ */ jsx15(
-                    IconButton2,
-                    {
-                      "aria-label": "Next step",
-                      size: "sm",
-                      variant: "outline",
-                      disabled: !!nextDisabled,
-                      onClick: handleNext,
-                      children: /* @__PURE__ */ jsx15(LuChevronRight, {})
-                    }
-                  ) : /* @__PURE__ */ jsx15(PrimaryMdButton2, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx15(
-              ButtonGroup,
-              {
-                size: "sm",
-                variant: "outline",
-                display: { base: "none", md: "flex" },
-                children: /* @__PURE__ */ jsxs14(Flex7, { mt: 4, w: "full", align: "center", justify: "space-between", children: [
-                  /* @__PURE__ */ jsx15(Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(SecondaryMdButton2, { children: "Previous" }) }),
-                  activeStep < steps.length - 1 ? /* @__PURE__ */ jsx15(NextButton, { disabled: !!nextDisabled, onClick: handleNext }) : /* @__PURE__ */ jsx15(PrimaryMdButton2, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
-                ] })
-              }
-            )
-          ]
-        }
-      ) })
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs14(Box13, { mb: 4, ref: formTopRef, children: [
+          title && /* @__PURE__ */ jsx15(
+            Box13,
+            {
+              as: "h1",
+              m: "0",
+              fontFamily: "var(--font-dm-sans), system-ui, sans-serif",
+              fontWeight: description ? 600 : 500,
+              color: "gray.900",
+              lineHeight: "1.1",
+              letterSpacing: description ? "-0.025em" : "-0.015em",
+              fontSize: {
+                base: description ? "22px" : "24px",
+                lg: description ? "28px" : "32px"
+              },
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx15(Text8, { fontSize: "sm", color: "gray.500", mt: 1, children: description })
+        ] }),
+        /* @__PURE__ */ jsx15(Box13, { w: "full", rounded: "2xl", children: /* @__PURE__ */ jsxs14(
+          Steps.Root,
+          {
+            step: activeStep,
+            onStepChange: (index) => handleStepChange(index.step),
+            defaultStep: 0,
+            count: steps.length,
+            colorPalette: "green",
+            children: [
+              /* @__PURE__ */ jsxs14(
+                Box13,
+                {
+                  position: "sticky",
+                  top: 0,
+                  zIndex: 10,
+                  bg: "white",
+                  pt: 2,
+                  pb: 3,
+                  mx: -1,
+                  px: 1,
+                  borderBottomWidth: "1px",
+                  borderColor: "gray.100",
+                  boxShadow: "0 2px 8px -2px rgba(0,0,0,0.06)",
+                  children: [
+                    /* @__PURE__ */ jsx15(
+                      Steps.List,
+                      {
+                        py: 0,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        w: "full",
+                        justifyContent: "space-evenly",
+                        children: steps.map((step, index) => {
+                          const isCompleted = index < activeStep;
+                          const isActive = index === activeStep;
+                          return /* @__PURE__ */ jsxs14(
+                            Steps.Item,
+                            {
+                              index,
+                              title: step.title,
+                              minW: { base: "0px", md: "auto" },
+                              flex: isCompact ? "0 0 auto" : "1",
+                              children: [
+                                /* @__PURE__ */ jsxs14(
+                                  Steps.Trigger,
+                                  {
+                                    flexDirection: isCompact ? "row" : "column",
+                                    alignItems: "center",
+                                    gap: isCompact ? 2 : 1,
+                                    px: isCompact ? 3 : 2,
+                                    py: isCompact ? 2 : 1,
+                                    borderRadius: "lg",
+                                    transition: "background 0.2s",
+                                    _hover: { bg: "gray.50" },
+                                    children: [
+                                      /* @__PURE__ */ jsx15(
+                                        Steps.Indicator,
+                                        {
+                                          borderWidth: "2px",
+                                          transition: "all 0.25s",
+                                          style: {
+                                            borderColor: isCompleted || isActive ? PRIMARY : void 0,
+                                            background: isCompleted ? PRIMARY : void 0,
+                                            color: isCompleted ? "white" : isActive ? PRIMARY : void 0,
+                                            boxShadow: isActive ? `0 0 0 3px ${PRIMARY_DISABLED}` : "none"
+                                          },
+                                          children: isCompleted ? /* @__PURE__ */ jsx15(LuCheck2, { size: 14 }) : step.icon ? /* @__PURE__ */ jsx15(Box13, { as: step.icon, w: 4, h: 4 }) : null
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx15(
+                                        Steps.Title,
+                                        {
+                                          fontSize: { base: "xs", md: "sm" },
+                                          textAlign: isCompact ? "left" : "center",
+                                          whiteSpace: "normal",
+                                          wordBreak: "break-word",
+                                          fontWeight: isActive ? 600 : 400,
+                                          color: isActive ? "gray.900" : isCompleted ? "gray.600" : "gray.400",
+                                          transition: "color 0.2s",
+                                          children: step.title
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                !isCompact && /* @__PURE__ */ jsx15(
+                                  Steps.Separator,
+                                  {
+                                    display: { base: "none", md: "block" }
+                                  }
+                                )
+                              ]
+                            },
+                            index
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx15(
+                      Box13,
+                      {
+                        w: "full",
+                        h: "3px",
+                        bg: "gray.100",
+                        borderRadius: "full",
+                        overflow: "hidden",
+                        mt: 1,
+                        children: /* @__PURE__ */ jsx15(
+                          Box13,
+                          {
+                            h: "full",
+                            bg: PRIMARY,
+                            transition: "width 0.4s ease",
+                            w: `${(activeStep + 1) / steps.length * 100}%`
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              steps.map((step, index) => /* @__PURE__ */ jsx15(Steps.Content, { index, children: step.component ?? step.description }, index)),
+              /* @__PURE__ */ jsxs14(
+                Flex7,
+                {
+                  w: "full",
+                  justify: "space-between",
+                  align: "center",
+                  mt: 4,
+                  gap: 2,
+                  display: { base: "flex", md: "none" },
+                  children: [
+                    /* @__PURE__ */ jsx15(Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+                      Box13,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        border: "1.5px solid",
+                        borderColor: "gray.200",
+                        bg: "white",
+                        color: "gray.700",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: "pointer",
+                        _hover: { bg: "gray.50" },
+                        _disabled: { opacity: 0.4, cursor: "not-allowed" },
+                        transition: "all 0.15s",
+                        children: [
+                          /* @__PURE__ */ jsx15(LuChevronLeft, { size: 14 }),
+                          "Back"
+                        ]
+                      }
+                    ) }),
+                    !isLastStep ? /* @__PURE__ */ jsxs14(
+                      Box13,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: nextDisabled ? "not-allowed" : "pointer",
+                        opacity: nextDisabled ? 0.5 : 1,
+                        pointerEvents: nextDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: handleNext,
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
+                          /* @__PURE__ */ jsx15(LuChevronRight, { size: 14 })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs14(
+                      Box13,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                        px: 3,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 500,
+                        cursor: submitDisabled ? "not-allowed" : "pointer",
+                        opacity: submitDisabled ? 0.5 : 1,
+                        pointerEvents: submitDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: onSubmit,
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          submitButtonText,
+                          /* @__PURE__ */ jsx15(LuCheck2, { size: 14 })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                ButtonGroup,
+                {
+                  size: "sm",
+                  variant: "outline",
+                  display: { base: "none", md: "flex" },
+                  children: /* @__PURE__ */ jsxs14(Flex7, { mt: 5, w: "full", align: "center", justify: "space-between", children: [
+                    /* @__PURE__ */ jsx15(Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsxs14(SecondaryMdButton2, { children: [
+                      /* @__PURE__ */ jsx15(LuChevronLeft, {}),
+                      "Previous"
+                    ] }) }),
+                    !isLastStep ? /* @__PURE__ */ jsxs14(
+                      Box13,
+                      {
+                        as: "button",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1.5,
+                        px: 4,
+                        py: 2,
+                        borderRadius: "lg",
+                        color: "white",
+                        fontSize: "sm",
+                        fontWeight: 600,
+                        cursor: nextDisabled ? "not-allowed" : "pointer",
+                        opacity: nextDisabled ? 0.5 : 1,
+                        pointerEvents: nextDisabled ? "none" : "auto",
+                        transition: "all 0.15s",
+                        onClick: handleNext,
+                        boxShadow: "0 1px 3px 0 rgba(0,0,0,0.12)",
+                        bg: PRIMARY,
+                        _hover: { bg: PRIMARY_HOVER },
+                        children: [
+                          nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
+                          /* @__PURE__ */ jsx15(LuChevronRight, { size: 15 })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsx15(PrimaryMdButton2, { disabled: !!submitDisabled, onClick: onSubmit, children: submitButtonText })
+                  ] })
+                }
+              )
+            ]
+          }
+        ) })
+      ]
     }
   );
 };
@@ -3192,7 +3380,7 @@ import {
   Flex as Flex8,
   Icon as Icon4,
   CloseButton as CloseButton3,
-  Text as Text8
+  Text as Text9
 } from "@chakra-ui/react";
 import { LuChevronRight as LuChevronRight2 } from "react-icons/lu";
 import Link from "next/link";
@@ -3272,7 +3460,7 @@ var QuickActionsHeaderCard = React5.memo(
             justify: "center",
             flexShrink: 0,
             children: /* @__PURE__ */ jsx18(
-              Text8,
+              Text9,
               {
                 fontSize: "14px",
                 fontWeight: "700",
@@ -3285,7 +3473,7 @@ var QuickActionsHeaderCard = React5.memo(
         ),
         /* @__PURE__ */ jsxs15(Box15, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ jsx18(
-            Text8,
+            Text9,
             {
               fontSize: "15px",
               fontWeight: "700",
@@ -3298,7 +3486,7 @@ var QuickActionsHeaderCard = React5.memo(
             }
           ),
           meta && /* @__PURE__ */ jsx18(
-            Text8,
+            Text9,
             {
               fontSize: "12px",
               color: SUBTITLE_COLOR,
@@ -3360,7 +3548,7 @@ var ActionItem = React5.memo(({ action }) => {
         ),
         /* @__PURE__ */ jsxs15(Box15, { flex: "1", minW: 0, children: [
           /* @__PURE__ */ jsx18(
-            Text8,
+            Text9,
             {
               fontSize: "15px",
               fontWeight: "600",
@@ -3370,7 +3558,7 @@ var ActionItem = React5.memo(({ action }) => {
             }
           ),
           action.description && /* @__PURE__ */ jsx18(
-            Text8,
+            Text9,
             {
               fontSize: "12px",
               color: DESC_COLOR,
@@ -3464,7 +3652,7 @@ var BottomQuickActions = ({
                         }
                       ),
                       subtitle && /* @__PURE__ */ jsx18(
-                        Text8,
+                        Text9,
                         {
                           fontSize: "13px",
                           color: SUBTITLE_COLOR,
@@ -3510,20 +3698,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 Text10, 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,161 +3742,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,
   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,
+                {
+                  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(
+                  Text10,
+                  {
+                    fontSize: "lg",
+                    fontWeight: "bold",
+                    color: "gray.900",
+                    lineHeight: "short",
+                    children: [
+                      "Install ",
+                      appName
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx19(Text10, { 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,
                 {
-                  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__ */ 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__ */ jsxs16(
-                          Heading,
-                          {
-                            fontSize: { base: "lg", sm: "xl" },
-                            fontWeight: "bold",
-                            color: "gray.900",
-                            children: [
-                              "Install ",
-                              appName || "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(Text10, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
+                  ] }, i))
+                }
               )
-            }
-          )
-        ] })
-      }
-    )
+            ] })
+          ]
+        },
+        "install-sheet"
+      )
+    ] }) })
   ] });
 }
 
@@ -3728,15 +3913,15 @@ 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,
-  IconButton as IconButton3,
+  IconButton as IconButton2,
   Input as Input4,
   InputGroup,
-  Separator as Separator4,
-  Text as Text10,
+  Separator as Separator3,
+  Text as Text11,
   useBreakpointValue as useBreakpointValue2,
   VStack as VStack9
 } from "@chakra-ui/react";
@@ -4245,7 +4430,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,
@@ -4267,7 +4452,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ jsx20(
-            Text10,
+            Text11,
             {
               color: "white",
               fontWeight: "bold",
@@ -4277,8 +4462,8 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          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(
+          user.email && /* @__PURE__ */ jsx20(Text11, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ jsx20(Box16, { display: "inline-flex", children: /* @__PURE__ */ jsx20(
             Badge2,
             {
               bg: "rgba(255,255,255,0.15)",
@@ -4295,9 +4480,9 @@ 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,
+        Text11,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4309,7 +4494,7 @@ function ReusableProfile({
         }
       ),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4329,7 +4514,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "38px",
                       h: "38px",
@@ -4343,9 +4528,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ jsxs17(Box16, { children: [
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4354,9 +4539,9 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(Separator3, {}),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4379,7 +4564,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "38px",
                       h: "38px",
@@ -4393,9 +4578,9 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ jsxs17(Box16, { children: [
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4404,11 +4589,11 @@ function ReusableProfile({
           )
         }
       ),
-      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(Separator3, {}),
       /* @__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",
@@ -4422,13 +4607,13 @@ function ReusableProfile({
               children: /* @__PURE__ */ jsx20(LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ jsxs17(Box16, { children: [
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
         /* @__PURE__ */ jsx20(
-          Box17,
+          Box16,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4451,7 +4636,7 @@ function ReusableProfile({
             flexShrink: 0,
             outline: "none",
             children: /* @__PURE__ */ jsx20(
-              Box17,
+              Box16,
               {
                 position: "absolute",
                 top: "3px",
@@ -4468,9 +4653,9 @@ 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,
+        Text11,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4484,7 +4669,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",
@@ -4498,9 +4683,9 @@ function ReusableProfile({
               children: colorMode === "dark" ? /* @__PURE__ */ jsx20(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx20(LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ jsxs17(Box16, { children: [
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
         /* @__PURE__ */ jsx20(HStack6, { gap: 1.5, children: ["light", "dark"].map((mode) => {
@@ -4523,7 +4708,7 @@ function ReusableProfile({
               children: [
                 mode === "light" ? /* @__PURE__ */ jsx20(LuSun, { size: 13 }) : /* @__PURE__ */ jsx20(LuMoon, { size: 13 }),
                 /* @__PURE__ */ jsx20(
-                  Text10,
+                  Text11,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4537,11 +4722,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(Separator3, {}),
       /* @__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",
@@ -4557,9 +4742,9 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ jsxs17(Box16, { children: [
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
         /* @__PURE__ */ jsx20(HStack6, { gap: 1, children: FONT_SIZES.map((option) => {
@@ -4581,7 +4766,7 @@ function ReusableProfile({
               onClick: () => handleFontSize(option.value),
               title: option.title,
               children: /* @__PURE__ */ jsx20(
-                Text10,
+                Text11,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4593,9 +4778,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx20(Separator4, {}),
+      /* @__PURE__ */ jsx20(Separator3, {}),
       /* @__PURE__ */ jsx20(
-        Box17,
+        Box16,
         {
           as: "button",
           w: "full",
@@ -4606,7 +4791,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",
@@ -4620,9 +4805,9 @@ function ReusableProfile({
                   children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsxs17(Box17, { children: [
-                /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ jsxs17(Box16, { children: [
+                /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4635,7 +4820,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",
@@ -4649,9 +4834,9 @@ 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,
+        IconButton2,
         {
           size: "sm",
           variant: "ghost",
@@ -4661,15 +4846,15 @@ function ReusableProfile({
           children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ jsx20(Text11, { 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__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
         /* @__PURE__ */ jsx20(
           Input4,
           {
@@ -4680,8 +4865,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
         /* @__PURE__ */ jsx20(
           Input4,
           {
@@ -4693,8 +4878,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
         /* @__PURE__ */ jsx20(
           Input4,
           {
@@ -4722,9 +4907,9 @@ 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,
+        IconButton2,
         {
           size: "sm",
           variant: "ghost",
@@ -4734,16 +4919,16 @@ function ReusableProfile({
           children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ jsx20(Text11, { 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__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton3,
+              IconButton2,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4766,13 +4951,13 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton3,
+              IconButton2,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4794,9 +4979,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",
@@ -4806,16 +4991,16 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17(Box17, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
+        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
         /* @__PURE__ */ jsx20(
           InputGroup,
           {
             endElement: /* @__PURE__ */ jsx20(
-              IconButton3,
+              IconButton2,
               {
                 size: "xs",
                 variant: "ghost",
@@ -4837,7 +5022,7 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx20(Text10, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
       /* @__PURE__ */ jsx20(
         Button4,
@@ -4857,7 +5042,7 @@ function ReusableProfile({
   ] });
   const navbarCustomizeContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
     /* @__PURE__ */ jsx20(
-      Box17,
+      Box16,
       {
         px: 4,
         pt: 4,
@@ -4870,7 +5055,7 @@ function ReusableProfile({
         zIndex: 1,
         children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
           /* @__PURE__ */ jsx20(
-            IconButton3,
+            IconButton2,
             {
               size: "sm",
               variant: "ghost",
@@ -4883,9 +5068,9 @@ function ReusableProfile({
               children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
             }
           ),
-          /* @__PURE__ */ jsxs17(Box17, { children: [
-            /* @__PURE__ */ jsx20(Text10, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ jsxs17(Box16, { children: [
+            /* @__PURE__ */ jsx20(Text11, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -4894,10 +5079,10 @@ 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,
+          Text11,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -4908,7 +5093,7 @@ function ReusableProfile({
           }
         ),
         /* @__PURE__ */ jsxs17(
-          Text10,
+          Text11,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4931,7 +5116,7 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
       ) : /* @__PURE__ */ jsx20(VStack9, { gap: 0, children: quickNavHrefs.map((href, idx) => {
         const option = availableOptions.find((item) => item.key === href);
@@ -4940,7 +5125,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,
             {
@@ -4956,7 +5141,7 @@ function ReusableProfile({
               children: [
                 /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
                   /* @__PURE__ */ jsx20(
-                    Box17,
+                    Box16,
                     {
                       w: "36px",
                       h: "36px",
@@ -4970,10 +5155,10 @@ function ReusableProfile({
                       children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box17, { children: [
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                  /* @__PURE__ */ jsxs17(Box16, { children: [
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "medium", children: option.title }),
                     isReplacing && /* @__PURE__ */ jsx20(
-                      Text10,
+                      Text11,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -4985,7 +5170,7 @@ function ReusableProfile({
                 ] }),
                 /* @__PURE__ */ jsxs17(HStack6, { gap: 0.5, children: [
                   /* @__PURE__ */ jsx20(
-                    IconButton3,
+                    IconButton2,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -4997,7 +5182,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton3,
+                    IconButton2,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5009,7 +5194,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton3,
+                    IconButton2,
                     {
                       size: "xs",
                       variant: isReplacing ? "solid" : "ghost",
@@ -5022,7 +5207,7 @@ function ReusableProfile({
                     }
                   ),
                   /* @__PURE__ */ jsx20(
-                    IconButton3,
+                    IconButton2,
                     {
                       size: "xs",
                       variant: "ghost",
@@ -5038,16 +5223,16 @@ function ReusableProfile({
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ jsx20(Separator4, {})
+          !isLast && /* @__PURE__ */ jsx20(Separator3, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ jsx20(Separator4, { mx: 4, my: 1 }),
-    /* @__PURE__ */ jsxs17(Box17, { px: 4, pt: 4, pb: 10, children: [
+    /* @__PURE__ */ jsx20(Separator3, { mx: 4, my: 1 }),
+    /* @__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,
+            Text11,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -5057,7 +5242,7 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ jsxs17(Text10, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
@@ -5065,7 +5250,7 @@ function ReusableProfile({
             '"'
           ] })
         ] }) : /* @__PURE__ */ jsx20(
-          Text10,
+          Text11,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -5086,17 +5271,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx20(VStack9, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx20(VStack9, { gap: 0, children: unpinnedOptions.map((option, idx) => {
         const ItemIcon = option.Icon;
         const isLast = idx === unpinnedOptions.length - 1;
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ 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",
@@ -5111,7 +5296,7 @@ function ReusableProfile({
                 }
               ),
               /* @__PURE__ */ jsx20(
-                Text10,
+                Text11,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -5121,7 +5306,7 @@ function ReusableProfile({
               )
             ] }),
             isReplacingMode ? /* @__PURE__ */ jsx20(
-              IconButton3,
+              IconButton2,
               {
                 size: "xs",
                 variant: "outline",
@@ -5133,7 +5318,7 @@ function ReusableProfile({
                 children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
               }
             ) : /* @__PURE__ */ jsx20(
-              IconButton3,
+              IconButton2,
               {
                 size: "xs",
                 variant: "outline",
@@ -5147,7 +5332,7 @@ function ReusableProfile({
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ jsx20(Separator4, {})
+          !isLast && /* @__PURE__ */ jsx20(Separator3, {})
         ] }, option.key);
       }) })
     ] })
@@ -5166,7 +5351,7 @@ function ReusableProfile({
         align: "start",
         children: [
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5181,7 +5366,7 @@ function ReusableProfile({
             }
           ),
           /* @__PURE__ */ jsx20(
-            Box17,
+            Box16,
             {
               flex: "1",
               minW: 0,
@@ -5203,7 +5388,7 @@ function ReusableProfile({
                   color: "gray.400",
                   children: [
                     /* @__PURE__ */ jsx20(
-                      Box17,
+                      Box16,
                       {
                         w: "56px",
                         h: "56px",
@@ -5216,7 +5401,7 @@ function ReusableProfile({
                         children: /* @__PURE__ */ jsx20(LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ jsx20(Text10, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
+                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -5226,7 +5411,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 {