@splpi/estore-shared-components 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +3 -4
  2. package/dist/index.d.ts +3 -4
  3. package/dist/index.js +324 -315
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +195 -198
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -1
package/dist/index.js CHANGED
@@ -3482,6 +3482,7 @@ var BottomQuickActions_default = BottomQuickActions;
3482
3482
  // src/Generic/NotifyInstall.tsx
3483
3483
  var import_react32 = require("react");
3484
3484
  var import_react33 = require("@chakra-ui/react");
3485
+ var import_react34 = require("motion/react");
3485
3486
  var import_fi = require("react-icons/fi");
3486
3487
 
3487
3488
  // src/hooks/useNotifyInstall.ts
@@ -3524,167 +3525,175 @@ function useNotifyInstall() {
3524
3525
  // src/Generic/NotifyInstall.tsx
3525
3526
  var import_jsx_runtime19 = require("react/jsx-runtime");
3526
3527
  var STEPS = [
3527
- {
3528
- icon: import_fi.FiShare,
3529
- label: "Tap the browser menu or Share button"
3530
- },
3531
- {
3532
- icon: import_fi.FiPlusSquare,
3533
- label: 'Choose "Add to Home Screen"'
3534
- }
3528
+ { icon: import_fi.FiShare, label: "Tap the browser menu or Share button" },
3529
+ { icon: import_fi.FiPlusSquare, label: 'Choose "Add to Home Screen"' }
3535
3530
  ];
3536
- var INSTALL_DIALOG_DISMISSED_KEY = "estore-install-dialog-dismissed";
3531
+ var DISMISSED_KEY = "estore-install-dialog-dismissed";
3537
3532
  function NotifyInstall({
3538
3533
  children,
3539
3534
  appName
3540
3535
  }) {
3541
3536
  const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
3542
- const [isDismissed, setIsDismissed] = (0, import_react32.useState)(false);
3537
+ const [isDismissed, setIsDismissed] = (0, import_react32.useState)(true);
3543
3538
  (0, import_react32.useEffect)(() => {
3544
- const wasDismissed = localStorage.getItem(INSTALL_DIALOG_DISMISSED_KEY);
3545
- setIsDismissed(wasDismissed === "true");
3539
+ if (localStorage.getItem(DISMISSED_KEY) !== "true") {
3540
+ setIsDismissed(false);
3541
+ }
3546
3542
  }, []);
3547
- const handleClose = () => {
3548
- localStorage.setItem(INSTALL_DIALOG_DISMISSED_KEY, "true");
3543
+ const handleDismiss = () => {
3544
+ localStorage.setItem(DISMISSED_KEY, "true");
3549
3545
  setIsDismissed(true);
3550
3546
  };
3551
- const isOpen = !isInstalled && isMobile && !isDismissed;
3552
- if (!isOpen) {
3553
- return children;
3554
- }
3547
+ const showPrompt = isMobile && !isInstalled && !isDismissed;
3555
3548
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
3556
3549
  children,
3557
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3558
- import_react33.Dialog.Root,
3559
- {
3560
- open: isOpen,
3561
- onOpenChange: (details) => {
3562
- if (!details.open) {
3563
- handleClose();
3550
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react34.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
3551
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3552
+ import_react34.motion.div,
3553
+ {
3554
+ initial: { opacity: 0 },
3555
+ animate: { opacity: 1 },
3556
+ exit: { opacity: 0 },
3557
+ transition: { duration: 0.2 },
3558
+ onClick: handleDismiss,
3559
+ style: {
3560
+ position: "fixed",
3561
+ inset: 0,
3562
+ zIndex: 1300,
3563
+ background: "rgba(0,0,0,0.55)",
3564
+ backdropFilter: "blur(3px)",
3565
+ WebkitBackdropFilter: "blur(3px)"
3564
3566
  }
3565
3567
  },
3566
- placement: "center",
3567
- motionPreset: "slide-in-bottom",
3568
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.Portal, { children: [
3569
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.Backdrop, { bg: "blackAlpha.600", backdropFilter: "blur(2px)" }),
3570
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3571
- import_react33.Dialog.Positioner,
3572
- {
3573
- p: { base: 0, sm: 4 },
3574
- alignItems: { base: "flex-end", sm: "center" },
3575
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3576
- import_react33.Dialog.Content,
3568
+ "install-backdrop"
3569
+ ),
3570
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3571
+ import_react34.motion.div,
3572
+ {
3573
+ initial: { y: "100%" },
3574
+ animate: { y: 0 },
3575
+ exit: { y: "100%" },
3576
+ transition: { type: "spring", damping: 28, stiffness: 280 },
3577
+ style: {
3578
+ position: "fixed",
3579
+ bottom: 0,
3580
+ left: 0,
3581
+ right: 0,
3582
+ zIndex: 1400,
3583
+ background: "white",
3584
+ borderRadius: "24px 24px 0 0",
3585
+ boxShadow: "0 -8px 40px rgba(0,0,0,0.14)",
3586
+ paddingBottom: "env(safe-area-inset-bottom)"
3587
+ },
3588
+ children: [
3589
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3590
+ "button",
3591
+ {
3592
+ "aria-label": "Dismiss install prompt",
3593
+ onClick: handleDismiss,
3594
+ style: {
3595
+ position: "absolute",
3596
+ top: 12,
3597
+ right: 12,
3598
+ background: "none",
3599
+ border: "none",
3600
+ cursor: "pointer",
3601
+ padding: 8,
3602
+ borderRadius: "50%",
3603
+ display: "flex",
3604
+ alignItems: "center",
3605
+ justifyContent: "center",
3606
+ color: "#9ca3af"
3607
+ },
3608
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiX, { size: 18 })
3609
+ }
3610
+ ),
3611
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
3612
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3613
+ import_react33.Flex,
3614
+ {
3615
+ boxSize: 16,
3616
+ align: "center",
3617
+ justify: "center",
3618
+ rounded: "2xl",
3619
+ bg: "green.50",
3620
+ color: "green.600",
3621
+ shadow: "sm",
3622
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload, boxSize: 8 })
3623
+ }
3624
+ ),
3625
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
3626
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3627
+ import_react33.Text,
3628
+ {
3629
+ fontSize: "lg",
3630
+ fontWeight: "bold",
3631
+ color: "gray.900",
3632
+ lineHeight: "short",
3633
+ children: [
3634
+ "Install ",
3635
+ appName
3636
+ ]
3637
+ }
3638
+ ),
3639
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
3640
+ ] }),
3641
+ canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3642
+ import_react33.Button,
3577
3643
  {
3578
- w: "xl",
3579
- maxW: { base: "full", sm: "sm" },
3580
- borderRadius: { base: "2xl 2xl 0 0", sm: "2xl" },
3581
- overflow: "hidden",
3582
- boxShadow: "2xl",
3583
- m: 0,
3644
+ onClick: install,
3645
+ colorPalette: "green",
3646
+ size: "lg",
3647
+ w: "full",
3648
+ rounded: "xl",
3584
3649
  children: [
3585
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.Body, { px: { base: 6, sm: 8 }, py: { base: 8, sm: 10 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", children: [
3586
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3587
- import_react33.Flex,
3588
- {
3589
- boxSize: { base: 16, sm: 20 },
3590
- align: "center",
3591
- justify: "center",
3592
- rounded: "2xl",
3593
- bg: "green.50",
3594
- color: "green.600",
3595
- shadow: "sm",
3596
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload, boxSize: { base: 8, sm: 9 } })
3597
- }
3598
- ),
3599
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
3600
- /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3601
- import_react33.Heading,
3602
- {
3603
- fontSize: { base: "lg", sm: "xl" },
3604
- fontWeight: "bold",
3605
- color: "gray.900",
3606
- children: [
3607
- "Install ",
3608
- appName || "eStore"
3609
- ]
3610
- }
3611
- ),
3612
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3613
- import_react33.Text,
3614
- {
3615
- fontSize: { base: "sm", sm: "md" },
3616
- color: "gray.600",
3617
- lineHeight: "tall",
3618
- children: "Add the app to your home screen for a faster, app-like experience before continuing."
3619
- }
3620
- )
3621
- ] }),
3622
- canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3623
- import_react33.Button,
3624
- {
3625
- onClick: install,
3626
- colorPalette: "green",
3627
- size: "lg",
3628
- w: "full",
3629
- rounded: "xl",
3630
- children: [
3631
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload }),
3632
- "Add to Home Screen"
3633
- ]
3634
- }
3635
- ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3636
- import_react33.Box,
3637
- {
3638
- w: "full",
3639
- bg: "gray.50",
3640
- borderWidth: "1px",
3641
- borderColor: "gray.100",
3642
- rounded: "xl",
3643
- p: 4,
3644
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.VStack, { gap: 4, align: "stretch", children: STEPS.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
3645
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3646
- import_react33.Flex,
3647
- {
3648
- boxSize: 9,
3649
- flexShrink: 0,
3650
- align: "center",
3651
- justify: "center",
3652
- rounded: "lg",
3653
- bg: "white",
3654
- borderWidth: "1px",
3655
- borderColor: "gray.200",
3656
- color: "green.600",
3657
- children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: step.icon, boxSize: 4 })
3658
- }
3659
- ),
3660
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3661
- import_react33.Text,
3662
- {
3663
- fontSize: "sm",
3664
- color: "gray.700",
3665
- textAlign: "left",
3666
- children: step.label
3667
- }
3668
- )
3669
- ] }, index)) })
3670
- }
3671
- )
3672
- ] }) }),
3673
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Dialog.CloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.CloseButton, { size: "sm", onClick: handleClose }) })
3650
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload }),
3651
+ "Add to Home Screen"
3674
3652
  ]
3675
3653
  }
3654
+ ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3655
+ import_react33.VStack,
3656
+ {
3657
+ w: "full",
3658
+ bg: "gray.50",
3659
+ borderWidth: "1px",
3660
+ borderColor: "gray.100",
3661
+ rounded: "xl",
3662
+ p: 4,
3663
+ gap: 4,
3664
+ align: "stretch",
3665
+ children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
3666
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3667
+ import_react33.Flex,
3668
+ {
3669
+ boxSize: 9,
3670
+ flexShrink: 0,
3671
+ align: "center",
3672
+ justify: "center",
3673
+ rounded: "lg",
3674
+ bg: "white",
3675
+ borderWidth: "1px",
3676
+ borderColor: "gray.200",
3677
+ color: "green.600",
3678
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: step.icon, boxSize: 4 })
3679
+ }
3680
+ ),
3681
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
3682
+ ] }, i))
3683
+ }
3676
3684
  )
3677
- }
3678
- )
3679
- ] })
3680
- }
3681
- )
3685
+ ] })
3686
+ ]
3687
+ },
3688
+ "install-sheet"
3689
+ )
3690
+ ] }) })
3682
3691
  ] });
3683
3692
  }
3684
3693
 
3685
3694
  // src/UserProfile/UserProfile.tsx
3686
- var import_react34 = require("react");
3687
- var import_react35 = require("@chakra-ui/react");
3695
+ var import_react35 = require("react");
3696
+ var import_react36 = require("@chakra-ui/react");
3688
3697
  var import_ri = require("react-icons/ri");
3689
3698
  var import_lu7 = require("react-icons/lu");
3690
3699
  var import_hi2 = require("react-icons/hi2");
@@ -3991,28 +4000,28 @@ function ReusableProfile({
3991
4000
  onTwoFactorChange,
3992
4001
  onToast = noopToast
3993
4002
  }) {
3994
- const [profileView, setProfileView] = (0, import_react34.useState)("main");
3995
- const [fallbackColorMode, setFallbackColorMode] = (0, import_react34.useState)("light");
4003
+ const [profileView, setProfileView] = (0, import_react35.useState)("main");
4004
+ const [fallbackColorMode, setFallbackColorMode] = (0, import_react35.useState)("light");
3996
4005
  const colorMode = controlledColorMode ?? fallbackColorMode;
3997
- const [fontSize, setFontSizeLocal] = (0, import_react34.useState)("md");
3998
- const [quickNavHrefs, setQuickNavHrefs] = (0, import_react34.useState)(initialQuickNavHrefs);
3999
- const [replacingIdx, setReplacingIdx] = (0, import_react34.useState)(null);
4000
- const [editName, setEditName] = (0, import_react34.useState)(user.displayName);
4001
- const [editLoading, setEditLoading] = (0, import_react34.useState)(false);
4002
- const [currentPw, setCurrentPw] = (0, import_react34.useState)("");
4003
- const [newPw, setNewPw] = (0, import_react34.useState)("");
4004
- const [confirmPw, setConfirmPw] = (0, import_react34.useState)("");
4005
- const [showCurrentPw, setShowCurrentPw] = (0, import_react34.useState)(false);
4006
- const [showNewPw, setShowNewPw] = (0, import_react34.useState)(false);
4007
- const [showConfirmPw, setShowConfirmPw] = (0, import_react34.useState)(false);
4008
- const [pwLoading, setPwLoading] = (0, import_react34.useState)(false);
4009
- const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react34.useState)(
4006
+ const [fontSize, setFontSizeLocal] = (0, import_react35.useState)("md");
4007
+ const [quickNavHrefs, setQuickNavHrefs] = (0, import_react35.useState)(initialQuickNavHrefs);
4008
+ const [replacingIdx, setReplacingIdx] = (0, import_react35.useState)(null);
4009
+ const [editName, setEditName] = (0, import_react35.useState)(user.displayName);
4010
+ const [editLoading, setEditLoading] = (0, import_react35.useState)(false);
4011
+ const [currentPw, setCurrentPw] = (0, import_react35.useState)("");
4012
+ const [newPw, setNewPw] = (0, import_react35.useState)("");
4013
+ const [confirmPw, setConfirmPw] = (0, import_react35.useState)("");
4014
+ const [showCurrentPw, setShowCurrentPw] = (0, import_react35.useState)(false);
4015
+ const [showNewPw, setShowNewPw] = (0, import_react35.useState)(false);
4016
+ const [showConfirmPw, setShowConfirmPw] = (0, import_react35.useState)(false);
4017
+ const [pwLoading, setPwLoading] = (0, import_react35.useState)(false);
4018
+ const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react35.useState)(
4010
4019
  initialTwoFactorEnabled
4011
4020
  );
4012
- const [isMounted, setIsMounted] = (0, import_react34.useState)(false);
4013
- const isDesktopRaw = (0, import_react35.useBreakpointValue)({ base: false, md: true });
4021
+ const [isMounted, setIsMounted] = (0, import_react35.useState)(false);
4022
+ const isDesktopRaw = (0, import_react36.useBreakpointValue)({ base: false, md: true });
4014
4023
  const isDesktop = isMounted ? isDesktopRaw ?? false : false;
4015
- (0, import_react34.useEffect)(() => {
4024
+ (0, import_react35.useEffect)(() => {
4016
4025
  setIsMounted(true);
4017
4026
  if (!enableLocalStorage || typeof window === "undefined") return;
4018
4027
  setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4023,10 +4032,10 @@ function ReusableProfile({
4023
4032
  setQuickNavHrefs(initialQuickNavHrefs);
4024
4033
  }
4025
4034
  }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
4026
- (0, import_react34.useEffect)(() => {
4035
+ (0, import_react35.useEffect)(() => {
4027
4036
  setEditName(user.displayName);
4028
4037
  }, [user.displayName]);
4029
- const availableOptions = (0, import_react34.useMemo)(
4038
+ const availableOptions = (0, import_react35.useMemo)(
4030
4039
  () => availableNavOptions.filter(
4031
4040
  (option) => !user.role || option.roles.includes(user.role)
4032
4041
  ),
@@ -4156,7 +4165,7 @@ function ReusableProfile({
4156
4165
  const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
4157
4166
  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4158
4167
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4159
- import_react35.Box,
4168
+ import_react36.Box,
4160
4169
  {
4161
4170
  bg: "var(--chakra-colors-primary)",
4162
4171
  pt: 12,
@@ -4165,20 +4174,20 @@ function ReusableProfile({
4165
4174
  textAlign: "center",
4166
4175
  children: [
4167
4176
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4168
- import_react35.Avatar.Root,
4177
+ import_react36.Avatar.Root,
4169
4178
  {
4170
4179
  size: "2xl",
4171
4180
  mx: "auto",
4172
4181
  mb: 4,
4173
4182
  colorPalette: pickPalette(user.displayName || "U"),
4174
4183
  children: [
4175
- user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
4176
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: user.displayName })
4184
+ user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
4185
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: user.displayName })
4177
4186
  ]
4178
4187
  }
4179
4188
  ),
4180
4189
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4181
- import_react35.Text,
4190
+ import_react36.Text,
4182
4191
  {
4183
4192
  color: "white",
4184
4193
  fontWeight: "bold",
@@ -4188,9 +4197,9 @@ function ReusableProfile({
4188
4197
  children: user.displayName
4189
4198
  }
4190
4199
  ),
4191
- user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
4192
- roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4193
- import_react35.Badge,
4200
+ user.email && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
4201
+ roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4202
+ import_react36.Badge,
4194
4203
  {
4195
4204
  bg: "rgba(255,255,255,0.15)",
4196
4205
  color: "white",
@@ -4206,9 +4215,9 @@ function ReusableProfile({
4206
4215
  ]
4207
4216
  }
4208
4217
  ),
4209
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
4218
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 1, children: [
4210
4219
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4211
- import_react35.Text,
4220
+ import_react36.Text,
4212
4221
  {
4213
4222
  fontSize: "xs",
4214
4223
  fontWeight: "bold",
@@ -4220,7 +4229,7 @@ function ReusableProfile({
4220
4229
  }
4221
4230
  ),
4222
4231
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4223
- import_react35.Box,
4232
+ import_react36.Box,
4224
4233
  {
4225
4234
  as: "button",
4226
4235
  w: "full",
@@ -4229,7 +4238,7 @@ function ReusableProfile({
4229
4238
  transition: "opacity 0.15s",
4230
4239
  onClick: () => setProfileView("edit-account"),
4231
4240
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4232
- import_react35.Flex,
4241
+ import_react36.Flex,
4233
4242
  {
4234
4243
  justify: "space-between",
4235
4244
  align: "center",
@@ -4238,9 +4247,9 @@ function ReusableProfile({
4238
4247
  borderRadius: "lg",
4239
4248
  bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
4240
4249
  children: [
4241
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4250
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4242
4251
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4243
- import_react35.Box,
4252
+ import_react36.Box,
4244
4253
  {
4245
4254
  w: "38px",
4246
4255
  h: "38px",
@@ -4254,9 +4263,9 @@ function ReusableProfile({
4254
4263
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
4255
4264
  }
4256
4265
  ),
4257
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4258
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
4259
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
4266
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4267
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
4268
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
4260
4269
  ] })
4261
4270
  ] }),
4262
4271
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4265,9 +4274,9 @@ function ReusableProfile({
4265
4274
  )
4266
4275
  }
4267
4276
  ),
4268
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4277
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4269
4278
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4270
- import_react35.Box,
4279
+ import_react36.Box,
4271
4280
  {
4272
4281
  as: "button",
4273
4282
  w: "full",
@@ -4279,7 +4288,7 @@ function ReusableProfile({
4279
4288
  setProfileView("change-password");
4280
4289
  },
4281
4290
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4282
- import_react35.Flex,
4291
+ import_react36.Flex,
4283
4292
  {
4284
4293
  justify: "space-between",
4285
4294
  align: "center",
@@ -4288,9 +4297,9 @@ function ReusableProfile({
4288
4297
  borderRadius: "lg",
4289
4298
  bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
4290
4299
  children: [
4291
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4300
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4292
4301
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4293
- import_react35.Box,
4302
+ import_react36.Box,
4294
4303
  {
4295
4304
  w: "38px",
4296
4305
  h: "38px",
@@ -4304,9 +4313,9 @@ function ReusableProfile({
4304
4313
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
4305
4314
  }
4306
4315
  ),
4307
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4308
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
4309
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
4316
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4317
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
4318
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
4310
4319
  ] })
4311
4320
  ] }),
4312
4321
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4315,11 +4324,11 @@ function ReusableProfile({
4315
4324
  )
4316
4325
  }
4317
4326
  ),
4318
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4319
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
4320
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4327
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4328
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4329
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4321
4330
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4322
- import_react35.Box,
4331
+ import_react36.Box,
4323
4332
  {
4324
4333
  w: "38px",
4325
4334
  h: "38px",
@@ -4333,13 +4342,13 @@ function ReusableProfile({
4333
4342
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
4334
4343
  }
4335
4344
  ),
4336
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4337
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
4338
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
4345
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4346
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
4347
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
4339
4348
  ] })
4340
4349
  ] }),
4341
4350
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4342
- import_react35.Box,
4351
+ import_react36.Box,
4343
4352
  {
4344
4353
  role: "switch",
4345
4354
  "aria-checked": twoFactorEnabled,
@@ -4362,7 +4371,7 @@ function ReusableProfile({
4362
4371
  flexShrink: 0,
4363
4372
  outline: "none",
4364
4373
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4365
- import_react35.Box,
4374
+ import_react36.Box,
4366
4375
  {
4367
4376
  position: "absolute",
4368
4377
  top: "3px",
@@ -4379,9 +4388,9 @@ function ReusableProfile({
4379
4388
  )
4380
4389
  ] })
4381
4390
  ] }),
4382
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
4391
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 2, children: [
4383
4392
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4384
- import_react35.Text,
4393
+ import_react36.Text,
4385
4394
  {
4386
4395
  fontSize: "xs",
4387
4396
  fontWeight: "bold",
@@ -4392,10 +4401,10 @@ function ReusableProfile({
4392
4401
  children: "Preferences"
4393
4402
  }
4394
4403
  ),
4395
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
4396
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4404
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4405
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4397
4406
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4398
- import_react35.Box,
4407
+ import_react36.Box,
4399
4408
  {
4400
4409
  w: "38px",
4401
4410
  h: "38px",
@@ -4409,15 +4418,15 @@ function ReusableProfile({
4409
4418
  children: colorMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 16 })
4410
4419
  }
4411
4420
  ),
4412
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4413
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
4414
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
4421
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4422
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
4423
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
4415
4424
  ] })
4416
4425
  ] }),
4417
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
4426
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
4418
4427
  const isActive = colorMode === mode;
4419
4428
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4420
- import_react35.Button,
4429
+ import_react36.Button,
4421
4430
  {
4422
4431
  size: "sm",
4423
4432
  variant: "outline",
@@ -4434,7 +4443,7 @@ function ReusableProfile({
4434
4443
  children: [
4435
4444
  mode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuSun, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuMoon, { size: 13 }),
4436
4445
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4437
- import_react35.Text,
4446
+ import_react36.Text,
4438
4447
  {
4439
4448
  fontSize: "xs",
4440
4449
  textTransform: "capitalize",
@@ -4448,11 +4457,11 @@ function ReusableProfile({
4448
4457
  );
4449
4458
  }) })
4450
4459
  ] }),
4451
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4452
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
4453
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4460
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4461
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4462
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4454
4463
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4455
- import_react35.Box,
4464
+ import_react36.Box,
4456
4465
  {
4457
4466
  w: "38px",
4458
4467
  h: "38px",
@@ -4468,15 +4477,15 @@ function ReusableProfile({
4468
4477
  children: "A"
4469
4478
  }
4470
4479
  ),
4471
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4472
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
4473
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
4480
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4481
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
4482
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
4474
4483
  ] })
4475
4484
  ] }),
4476
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
4485
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
4477
4486
  const isActive = fontSize === option.value;
4478
4487
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4479
- import_react35.Button,
4488
+ import_react36.Button,
4480
4489
  {
4481
4490
  size: "sm",
4482
4491
  variant: "outline",
@@ -4492,7 +4501,7 @@ function ReusableProfile({
4492
4501
  onClick: () => handleFontSize(option.value),
4493
4502
  title: option.title,
4494
4503
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4495
- import_react35.Text,
4504
+ import_react36.Text,
4496
4505
  {
4497
4506
  fontWeight: isActive ? "bold" : "normal",
4498
4507
  style: { fontSize: `${option.scale * 13}px` },
@@ -4504,9 +4513,9 @@ function ReusableProfile({
4504
4513
  );
4505
4514
  }) })
4506
4515
  ] }),
4507
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4516
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4508
4517
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4509
- import_react35.Box,
4518
+ import_react36.Box,
4510
4519
  {
4511
4520
  as: "button",
4512
4521
  w: "full",
@@ -4514,10 +4523,10 @@ function ReusableProfile({
4514
4523
  _hover: { opacity: 0.7 },
4515
4524
  transition: "opacity 0.15s",
4516
4525
  onClick: () => setProfileView("navbar-customize"),
4517
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 3, children: [
4518
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4526
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4527
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4519
4528
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4520
- import_react35.Box,
4529
+ import_react36.Box,
4521
4530
  {
4522
4531
  w: "38px",
4523
4532
  h: "38px",
@@ -4531,9 +4540,9 @@ function ReusableProfile({
4531
4540
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
4532
4541
  }
4533
4542
  ),
4534
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4535
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
4536
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
4543
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4544
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
4545
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
4537
4546
  quickNavHrefs.length,
4538
4547
  " of ",
4539
4548
  maxQuickNavItems,
@@ -4546,8 +4555,8 @@ function ReusableProfile({
4546
4555
  }
4547
4556
  )
4548
4557
  ] }),
4549
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4550
- import_react35.Button,
4558
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 2.5, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4559
+ import_react36.Button,
4551
4560
  {
4552
4561
  w: "full",
4553
4562
  variant: "outline",
@@ -4560,9 +4569,9 @@ function ReusableProfile({
4560
4569
  ) }) })
4561
4570
  ] });
4562
4571
  const editAccountContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4563
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
4572
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
4564
4573
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4565
- import_react35.IconButton,
4574
+ import_react36.IconButton,
4566
4575
  {
4567
4576
  size: "sm",
4568
4577
  variant: "ghost",
@@ -4572,17 +4581,17 @@ function ReusableProfile({
4572
4581
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4573
4582
  }
4574
4583
  ),
4575
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
4584
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
4576
4585
  ] }) }),
4577
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
4578
- user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Image, { src: user.avatarSrc, alt: editName }),
4579
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Avatar.Fallback, { name: editName })
4586
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
4587
+ user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: editName }),
4588
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: editName })
4580
4589
  ] }) }),
4581
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
4582
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4583
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
4590
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
4591
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4592
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
4584
4593
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4585
- import_react35.Input,
4594
+ import_react36.Input,
4586
4595
  {
4587
4596
  value: editName,
4588
4597
  onChange: (event) => setEditName(event.target.value),
@@ -4591,10 +4600,10 @@ function ReusableProfile({
4591
4600
  }
4592
4601
  )
4593
4602
  ] }),
4594
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4595
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
4603
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4604
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
4596
4605
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4597
- import_react35.Input,
4606
+ import_react36.Input,
4598
4607
  {
4599
4608
  value: user.email ?? "",
4600
4609
  readOnly: true,
@@ -4604,10 +4613,10 @@ function ReusableProfile({
4604
4613
  }
4605
4614
  )
4606
4615
  ] }),
4607
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4608
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
4616
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4617
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
4609
4618
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4610
- import_react35.Input,
4619
+ import_react36.Input,
4611
4620
  {
4612
4621
  value: user.mobileNumber ?? "",
4613
4622
  readOnly: true,
@@ -4618,7 +4627,7 @@ function ReusableProfile({
4618
4627
  )
4619
4628
  ] }),
4620
4629
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4621
- import_react35.Button,
4630
+ import_react36.Button,
4622
4631
  {
4623
4632
  w: "full",
4624
4633
  mt: 2,
@@ -4633,9 +4642,9 @@ function ReusableProfile({
4633
4642
  ] })
4634
4643
  ] });
4635
4644
  const changePasswordContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4636
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
4645
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
4637
4646
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4638
- import_react35.IconButton,
4647
+ import_react36.IconButton,
4639
4648
  {
4640
4649
  size: "sm",
4641
4650
  variant: "ghost",
@@ -4645,16 +4654,16 @@ function ReusableProfile({
4645
4654
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4646
4655
  }
4647
4656
  ),
4648
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
4657
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
4649
4658
  ] }) }),
4650
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
4651
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4652
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
4659
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
4660
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4661
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
4653
4662
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4654
- import_react35.InputGroup,
4663
+ import_react36.InputGroup,
4655
4664
  {
4656
4665
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4657
- import_react35.IconButton,
4666
+ import_react36.IconButton,
4658
4667
  {
4659
4668
  size: "xs",
4660
4669
  variant: "ghost",
@@ -4665,7 +4674,7 @@ function ReusableProfile({
4665
4674
  }
4666
4675
  ),
4667
4676
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4668
- import_react35.Input,
4677
+ import_react36.Input,
4669
4678
  {
4670
4679
  type: showCurrentPw ? "text" : "password",
4671
4680
  value: currentPw,
@@ -4677,13 +4686,13 @@ function ReusableProfile({
4677
4686
  }
4678
4687
  )
4679
4688
  ] }),
4680
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4681
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
4689
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4690
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
4682
4691
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4683
- import_react35.InputGroup,
4692
+ import_react36.InputGroup,
4684
4693
  {
4685
4694
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4686
- import_react35.IconButton,
4695
+ import_react36.IconButton,
4687
4696
  {
4688
4697
  size: "xs",
4689
4698
  variant: "ghost",
@@ -4694,7 +4703,7 @@ function ReusableProfile({
4694
4703
  }
4695
4704
  ),
4696
4705
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4697
- import_react35.Input,
4706
+ import_react36.Input,
4698
4707
  {
4699
4708
  type: showNewPw ? "text" : "password",
4700
4709
  value: newPw,
@@ -4705,9 +4714,9 @@ function ReusableProfile({
4705
4714
  )
4706
4715
  }
4707
4716
  ),
4708
- newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { mt: 2, children: [
4709
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4710
- import_react35.Box,
4717
+ newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { mt: 2, children: [
4718
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Flex, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4719
+ import_react36.Box,
4711
4720
  {
4712
4721
  flex: 1,
4713
4722
  h: "3px",
@@ -4717,16 +4726,16 @@ function ReusableProfile({
4717
4726
  },
4718
4727
  i
4719
4728
  )) }),
4720
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
4729
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
4721
4730
  ] })
4722
4731
  ] }),
4723
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4724
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
4732
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4733
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
4725
4734
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4726
- import_react35.InputGroup,
4735
+ import_react36.InputGroup,
4727
4736
  {
4728
4737
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4729
- import_react35.IconButton,
4738
+ import_react36.IconButton,
4730
4739
  {
4731
4740
  size: "xs",
4732
4741
  variant: "ghost",
@@ -4737,7 +4746,7 @@ function ReusableProfile({
4737
4746
  }
4738
4747
  ),
4739
4748
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4740
- import_react35.Input,
4749
+ import_react36.Input,
4741
4750
  {
4742
4751
  type: showConfirmPw ? "text" : "password",
4743
4752
  value: confirmPw,
@@ -4748,10 +4757,10 @@ function ReusableProfile({
4748
4757
  )
4749
4758
  }
4750
4759
  ),
4751
- confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
4760
+ confirmPw && confirmPw !== newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
4752
4761
  ] }),
4753
4762
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4754
- import_react35.Button,
4763
+ import_react36.Button,
4755
4764
  {
4756
4765
  w: "full",
4757
4766
  mt: 1,
@@ -4768,7 +4777,7 @@ function ReusableProfile({
4768
4777
  ] });
4769
4778
  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4770
4779
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4771
- import_react35.Box,
4780
+ import_react36.Box,
4772
4781
  {
4773
4782
  px: 4,
4774
4783
  pt: 4,
@@ -4779,9 +4788,9 @@ function ReusableProfile({
4779
4788
  top: 0,
4780
4789
  bg: "bg",
4781
4790
  zIndex: 1,
4782
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
4791
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
4783
4792
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4784
- import_react35.IconButton,
4793
+ import_react36.IconButton,
4785
4794
  {
4786
4795
  size: "sm",
4787
4796
  variant: "ghost",
@@ -4794,9 +4803,9 @@ function ReusableProfile({
4794
4803
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4795
4804
  }
4796
4805
  ),
4797
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4798
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
4799
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", children: [
4806
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4807
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
4808
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
4800
4809
  "Choose up to ",
4801
4810
  maxQuickNavItems,
4802
4811
  " shortcuts for the bottom bar"
@@ -4805,10 +4814,10 @@ function ReusableProfile({
4805
4814
  ] })
4806
4815
  }
4807
4816
  ),
4808
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 2, children: [
4809
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
4817
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 2, children: [
4818
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
4810
4819
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4811
- import_react35.Text,
4820
+ import_react36.Text,
4812
4821
  {
4813
4822
  fontSize: "xs",
4814
4823
  fontWeight: "bold",
@@ -4819,7 +4828,7 @@ function ReusableProfile({
4819
4828
  }
4820
4829
  ),
4821
4830
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4822
- import_react35.Text,
4831
+ import_react36.Text,
4823
4832
  {
4824
4833
  fontSize: "xs",
4825
4834
  color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4833,7 +4842,7 @@ function ReusableProfile({
4833
4842
  )
4834
4843
  ] }),
4835
4844
  quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4836
- import_react35.Flex,
4845
+ import_react36.Flex,
4837
4846
  {
4838
4847
  align: "center",
4839
4848
  justify: "center",
@@ -4842,18 +4851,18 @@ function ReusableProfile({
4842
4851
  borderWidth: "1px",
4843
4852
  borderStyle: "dashed",
4844
4853
  borderColor: "gray.200",
4845
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
4854
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
4846
4855
  }
4847
- ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
4856
+ ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
4848
4857
  const option = availableOptions.find((item) => item.key === href);
4849
4858
  if (!option) return null;
4850
4859
  const ItemIcon = option.Icon;
4851
4860
  const isFirst = idx === 0;
4852
4861
  const isLast = idx === quickNavHrefs.length - 1;
4853
4862
  const isReplacing = replacingIdx === idx;
4854
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
4863
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4855
4864
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4856
- import_react35.Flex,
4865
+ import_react36.Flex,
4857
4866
  {
4858
4867
  justify: "space-between",
4859
4868
  align: "center",
@@ -4865,9 +4874,9 @@ function ReusableProfile({
4865
4874
  borderColor: isReplacing ? "orange.200" : void 0,
4866
4875
  transition: "all 0.15s",
4867
4876
  children: [
4868
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4877
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4869
4878
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4870
- import_react35.Box,
4879
+ import_react36.Box,
4871
4880
  {
4872
4881
  w: "36px",
4873
4882
  h: "36px",
@@ -4881,10 +4890,10 @@ function ReusableProfile({
4881
4890
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
4882
4891
  }
4883
4892
  ),
4884
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4885
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
4893
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4894
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
4886
4895
  isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4887
- import_react35.Text,
4896
+ import_react36.Text,
4888
4897
  {
4889
4898
  fontSize: "xs",
4890
4899
  color: "orange.500",
@@ -4894,9 +4903,9 @@ function ReusableProfile({
4894
4903
  )
4895
4904
  ] })
4896
4905
  ] }),
4897
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
4906
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.HStack, { gap: 0.5, children: [
4898
4907
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4899
- import_react35.IconButton,
4908
+ import_react36.IconButton,
4900
4909
  {
4901
4910
  size: "xs",
4902
4911
  variant: "ghost",
@@ -4908,7 +4917,7 @@ function ReusableProfile({
4908
4917
  }
4909
4918
  ),
4910
4919
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4911
- import_react35.IconButton,
4920
+ import_react36.IconButton,
4912
4921
  {
4913
4922
  size: "xs",
4914
4923
  variant: "ghost",
@@ -4920,7 +4929,7 @@ function ReusableProfile({
4920
4929
  }
4921
4930
  ),
4922
4931
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4923
- import_react35.IconButton,
4932
+ import_react36.IconButton,
4924
4933
  {
4925
4934
  size: "xs",
4926
4935
  variant: isReplacing ? "solid" : "ghost",
@@ -4933,7 +4942,7 @@ function ReusableProfile({
4933
4942
  }
4934
4943
  ),
4935
4944
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4936
- import_react35.IconButton,
4945
+ import_react36.IconButton,
4937
4946
  {
4938
4947
  size: "xs",
4939
4948
  variant: "ghost",
@@ -4949,16 +4958,16 @@ function ReusableProfile({
4949
4958
  ]
4950
4959
  }
4951
4960
  ),
4952
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
4961
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
4953
4962
  ] }, href);
4954
4963
  }) })
4955
4964
  ] }),
4956
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, { mx: 4, my: 1 }),
4957
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 10, children: [
4958
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", justify: "space-between", mb: 3, children: [
4959
- replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { children: [
4965
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, { mx: 4, my: 1 }),
4966
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: [
4967
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
4968
+ replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4960
4969
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4961
- import_react35.Text,
4970
+ import_react36.Text,
4962
4971
  {
4963
4972
  fontSize: "xs",
4964
4973
  fontWeight: "bold",
@@ -4968,7 +4977,7 @@ function ReusableProfile({
4968
4977
  children: "Select Replacement"
4969
4978
  }
4970
4979
  ),
4971
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
4980
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
4972
4981
  'for "',
4973
4982
  availableOptions.find(
4974
4983
  (item) => item.key === quickNavHrefs[replacingIdx]
@@ -4976,7 +4985,7 @@ function ReusableProfile({
4976
4985
  '"'
4977
4986
  ] })
4978
4987
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4979
- import_react35.Text,
4988
+ import_react36.Text,
4980
4989
  {
4981
4990
  fontSize: "xs",
4982
4991
  fontWeight: "bold",
@@ -4987,7 +4996,7 @@ function ReusableProfile({
4987
4996
  }
4988
4997
  ),
4989
4998
  replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4990
- import_react35.Button,
4999
+ import_react36.Button,
4991
5000
  {
4992
5001
  size: "xs",
4993
5002
  variant: "ghost",
@@ -4997,17 +5006,17 @@ function ReusableProfile({
4997
5006
  }
4998
5007
  )
4999
5008
  ] }),
5000
- unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
5009
+ unpinnedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: unpinnedOptions.map((option, idx) => {
5001
5010
  const ItemIcon = option.Icon;
5002
5011
  const isLast = idx === unpinnedOptions.length - 1;
5003
5012
  const isReplacingMode = replacingIdx !== null;
5004
5013
  const canAdd = quickNavHrefs.length < maxQuickNavItems;
5005
5014
  const actionEnabled = isReplacingMode || canAdd;
5006
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
5007
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
5008
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
5015
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
5016
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
5017
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
5009
5018
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5010
- import_react35.Box,
5019
+ import_react36.Box,
5011
5020
  {
5012
5021
  w: "36px",
5013
5022
  h: "36px",
@@ -5022,7 +5031,7 @@ function ReusableProfile({
5022
5031
  }
5023
5032
  ),
5024
5033
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5025
- import_react35.Text,
5034
+ import_react36.Text,
5026
5035
  {
5027
5036
  fontSize: "sm",
5028
5037
  fontWeight: "medium",
@@ -5032,7 +5041,7 @@ function ReusableProfile({
5032
5041
  )
5033
5042
  ] }),
5034
5043
  isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5035
- import_react35.IconButton,
5044
+ import_react36.IconButton,
5036
5045
  {
5037
5046
  size: "xs",
5038
5047
  variant: "outline",
@@ -5044,7 +5053,7 @@ function ReusableProfile({
5044
5053
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
5045
5054
  }
5046
5055
  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5047
- import_react35.IconButton,
5056
+ import_react36.IconButton,
5048
5057
  {
5049
5058
  size: "xs",
5050
5059
  variant: "outline",
@@ -5058,7 +5067,7 @@ function ReusableProfile({
5058
5067
  }
5059
5068
  )
5060
5069
  ] }),
5061
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
5070
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
5062
5071
  ] }, option.key);
5063
5072
  }) })
5064
5073
  ] })
@@ -5066,7 +5075,7 @@ function ReusableProfile({
5066
5075
  const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
5067
5076
  if (isDesktop) {
5068
5077
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
5069
- import_react35.Flex,
5078
+ import_react36.Flex,
5070
5079
  {
5071
5080
  maxW: "6xl",
5072
5081
  mx: "auto",
@@ -5077,7 +5086,7 @@ function ReusableProfile({
5077
5086
  align: "start",
5078
5087
  children: [
5079
5088
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5080
- import_react35.Box,
5089
+ import_react36.Box,
5081
5090
  {
5082
5091
  w: { md: "300px", lg: "340px" },
5083
5092
  flexShrink: 0,
@@ -5092,7 +5101,7 @@ function ReusableProfile({
5092
5101
  }
5093
5102
  ),
5094
5103
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5095
- import_react35.Box,
5104
+ import_react36.Box,
5096
5105
  {
5097
5106
  flex: "1",
5098
5107
  minW: 0,
@@ -5103,7 +5112,7 @@ function ReusableProfile({
5103
5112
  bg: "bg",
5104
5113
  minH: "540px",
5105
5114
  children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
5106
- import_react35.Flex,
5115
+ import_react36.Flex,
5107
5116
  {
5108
5117
  direction: "column",
5109
5118
  align: "center",
@@ -5114,7 +5123,7 @@ function ReusableProfile({
5114
5123
  color: "gray.400",
5115
5124
  children: [
5116
5125
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5117
- import_react35.Box,
5126
+ import_react36.Box,
5118
5127
  {
5119
5128
  w: "56px",
5120
5129
  h: "56px",
@@ -5127,7 +5136,7 @@ function ReusableProfile({
5127
5136
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
5128
5137
  }
5129
5138
  ),
5130
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
5139
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
5131
5140
  ]
5132
5141
  }
5133
5142
  )
@@ -5137,7 +5146,7 @@ function ReusableProfile({
5137
5146
  }
5138
5147
  );
5139
5148
  }
5140
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
5149
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
5141
5150
  }
5142
5151
  var UserProfile_default = ReusableProfile;
5143
5152
  // Annotate the CommonJS export names for ESM import in node: