@splpi/estore-shared-components 0.0.4 → 0.0.6

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 +623 -419
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +568 -383
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -1
package/dist/index.js CHANGED
@@ -2976,27 +2976,46 @@ var import_react26 = require("@chakra-ui/react");
2976
2976
  var import_st_peter_ui6 = require("st-peter-ui");
2977
2977
  var import_lu5 = require("react-icons/lu");
2978
2978
  var import_jsx_runtime15 = require("react/jsx-runtime");
2979
+ var PRIMARY = "var(--chakra-colors-primary)";
2980
+ var PRIMARY_HOVER = "var(--chakra-colors-primary-hover)";
2981
+ var PRIMARY_DISABLED = "var(--chakra-colors-primary-disabled)";
2979
2982
  var HorizontalStepper = ({
2980
2983
  steps,
2984
+ title,
2985
+ description,
2981
2986
  onStepChange,
2982
2987
  onSubmit,
2983
2988
  submitDisabled,
2984
2989
  activeStep: controlledActiveStep,
2985
- nextDisabled
2990
+ nextDisabled,
2991
+ submitButtonText = "Proceed To Payment"
2986
2992
  }) => {
2987
2993
  const [localActiveStep, setLocalActiveStep] = (0, import_react25.useState)(0);
2988
2994
  const activeStep = controlledActiveStep !== void 0 ? controlledActiveStep : localActiveStep;
2995
+ const formTopRef = (0, import_react25.useRef)(null);
2996
+ const isCompact = steps.length < 3;
2997
+ const isLastStep = activeStep === steps.length - 1;
2998
+ const nextStepTitle = steps[activeStep + 1]?.title;
2999
+ const scrollToTop = () => {
3000
+ requestAnimationFrame(() => {
3001
+ formTopRef.current?.scrollIntoView({
3002
+ behavior: "smooth",
3003
+ block: "start"
3004
+ });
3005
+ });
3006
+ };
2989
3007
  const handleStepChange = (index) => {
2990
3008
  if (controlledActiveStep === void 0) {
2991
3009
  setLocalActiveStep(index);
2992
3010
  }
2993
3011
  onStepChange?.(index);
3012
+ scrollToTop();
2994
3013
  };
2995
3014
  const handleNext = () => {
2996
3015
  if (nextDisabled) return;
2997
3016
  handleStepChange(Math.min(activeStep + 1, steps.length - 1));
2998
3017
  };
2999
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3018
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3000
3019
  import_react26.Flex,
3001
3020
  {
3002
3021
  direction: "column",
@@ -3005,108 +3024,284 @@ var HorizontalStepper = ({
3005
3024
  w: "full",
3006
3025
  overflow: "visible",
3007
3026
  pb: { base: "12px", md: "0px" },
3008
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", colorPalette: "green", rounded: "2xl", p: 1, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3009
- import_react26.Steps.Root,
3010
- {
3011
- step: activeStep,
3012
- onStepChange: (index) => {
3013
- handleStepChange(index.step);
3014
- },
3015
- defaultStep: 0,
3016
- count: steps.length,
3017
- colorPalette: "green",
3018
- children: [
3019
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3020
- import_react26.Steps.List,
3021
- {
3022
- flexDirection: "row",
3023
- w: "full",
3024
- py: 2,
3025
- alignItems: "flex-start",
3026
- children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3027
- import_react26.Steps.Item,
3028
- {
3029
- index,
3030
- title: step.title,
3031
- minW: { base: "0px", md: "auto" },
3032
- children: [
3033
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3034
- import_react26.Steps.Trigger,
3035
- {
3036
- flexDirection: "column",
3037
- alignItems: "center",
3038
- gap: 1,
3039
- children: [
3040
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Indicator, { children: step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { as: step.icon, w: 4, h: 4 }) : null }),
3041
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3042
- import_react26.Steps.Title,
3043
- {
3044
- fontSize: { base: "xs", md: "sm" },
3045
- textAlign: "center",
3046
- whiteSpace: "normal",
3047
- wordBreak: "break-word",
3048
- children: step.title
3049
- }
3050
- )
3051
- ]
3052
- }
3053
- ),
3054
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Separator, { display: { base: "none", md: "block" } })
3055
- ]
3056
- },
3057
- index
3058
- ))
3059
- }
3060
- ),
3061
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Separator, { variant: "solid", mb: 3 }),
3062
- steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Content, { index, children: step.component ?? step.description }, index)),
3063
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3064
- import_react26.Flex,
3065
- {
3066
- w: "full",
3067
- justify: "space-between",
3068
- align: "center",
3069
- mb: 1,
3070
- display: { base: "flex", md: "none" },
3071
- children: [
3072
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3073
- import_react26.IconButton,
3074
- {
3075
- "aria-label": "Previous step",
3076
- size: "sm",
3077
- variant: "outline",
3078
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {})
3079
- }
3080
- ) }),
3081
- activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3082
- import_react26.IconButton,
3083
- {
3084
- "aria-label": "Next step",
3085
- size: "sm",
3086
- variant: "outline",
3087
- disabled: !!nextDisabled,
3088
- onClick: handleNext,
3089
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, {})
3090
- }
3091
- ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
3092
- ]
3093
- }
3094
- ),
3095
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3096
- import_react26.ButtonGroup,
3097
- {
3098
- size: "sm",
3099
- variant: "outline",
3100
- display: { base: "none", md: "flex" },
3101
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 4, w: "full", align: "center", justify: "space-between", children: [
3102
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.SecondaryMdButton, { children: "Previous" }) }),
3103
- activeStep < steps.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.NextButton, { disabled: !!nextDisabled, onClick: handleNext }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: "Proceed To Payment" })
3104
- ] })
3105
- }
3106
- )
3107
- ]
3108
- }
3109
- ) })
3027
+ children: [
3028
+ (title || description) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Box, { mb: 4, ref: formTopRef, children: [
3029
+ title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3030
+ import_react26.Box,
3031
+ {
3032
+ as: "h1",
3033
+ m: "0",
3034
+ fontFamily: "var(--font-dm-sans), system-ui, sans-serif",
3035
+ fontWeight: description ? 600 : 500,
3036
+ color: "gray.900",
3037
+ lineHeight: "1.1",
3038
+ letterSpacing: description ? "-0.025em" : "-0.015em",
3039
+ fontSize: {
3040
+ base: description ? "22px" : "24px",
3041
+ lg: description ? "28px" : "32px"
3042
+ },
3043
+ children: title
3044
+ }
3045
+ ),
3046
+ description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Text, { fontSize: "sm", color: "gray.500", mt: 1, children: description })
3047
+ ] }),
3048
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { w: "full", rounded: "2xl", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3049
+ import_react26.Steps.Root,
3050
+ {
3051
+ step: activeStep,
3052
+ onStepChange: (index) => handleStepChange(index.step),
3053
+ defaultStep: 0,
3054
+ count: steps.length,
3055
+ colorPalette: "green",
3056
+ children: [
3057
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3058
+ import_react26.Box,
3059
+ {
3060
+ position: "sticky",
3061
+ top: 0,
3062
+ zIndex: 10,
3063
+ bg: "white",
3064
+ pt: 2,
3065
+ pb: 3,
3066
+ mx: -1,
3067
+ px: 1,
3068
+ borderBottomWidth: "1px",
3069
+ borderColor: "gray.100",
3070
+ boxShadow: "0 2px 8px -2px rgba(0,0,0,0.06)",
3071
+ children: [
3072
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3073
+ import_react26.Steps.List,
3074
+ {
3075
+ py: 0,
3076
+ flexDirection: "row",
3077
+ alignItems: "center",
3078
+ w: "full",
3079
+ justifyContent: "space-evenly",
3080
+ children: steps.map((step, index) => {
3081
+ const isCompleted = index < activeStep;
3082
+ const isActive = index === activeStep;
3083
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3084
+ import_react26.Steps.Item,
3085
+ {
3086
+ index,
3087
+ title: step.title,
3088
+ minW: { base: "0px", md: "auto" },
3089
+ flex: isCompact ? "0 0 auto" : "1",
3090
+ children: [
3091
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3092
+ import_react26.Steps.Trigger,
3093
+ {
3094
+ flexDirection: isCompact ? "row" : "column",
3095
+ alignItems: "center",
3096
+ gap: isCompact ? 2 : 1,
3097
+ px: isCompact ? 3 : 2,
3098
+ py: isCompact ? 2 : 1,
3099
+ borderRadius: "lg",
3100
+ transition: "background 0.2s",
3101
+ _hover: { bg: "gray.50" },
3102
+ children: [
3103
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3104
+ import_react26.Steps.Indicator,
3105
+ {
3106
+ borderWidth: "2px",
3107
+ transition: "all 0.25s",
3108
+ style: {
3109
+ borderColor: isCompleted || isActive ? PRIMARY : void 0,
3110
+ background: isCompleted ? PRIMARY : void 0,
3111
+ color: isCompleted ? "white" : isActive ? PRIMARY : void 0,
3112
+ boxShadow: isActive ? `0 0 0 3px ${PRIMARY_DISABLED}` : "none"
3113
+ },
3114
+ children: isCompleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 }) : step.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Box, { as: step.icon, w: 4, h: 4 }) : null
3115
+ }
3116
+ ),
3117
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3118
+ import_react26.Steps.Title,
3119
+ {
3120
+ fontSize: { base: "xs", md: "sm" },
3121
+ textAlign: isCompact ? "left" : "center",
3122
+ whiteSpace: "normal",
3123
+ wordBreak: "break-word",
3124
+ fontWeight: isActive ? 600 : 400,
3125
+ color: isActive ? "gray.900" : isCompleted ? "gray.600" : "gray.400",
3126
+ transition: "color 0.2s",
3127
+ children: step.title
3128
+ }
3129
+ )
3130
+ ]
3131
+ }
3132
+ ),
3133
+ !isCompact && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3134
+ import_react26.Steps.Separator,
3135
+ {
3136
+ display: { base: "none", md: "block" }
3137
+ }
3138
+ )
3139
+ ]
3140
+ },
3141
+ index
3142
+ );
3143
+ })
3144
+ }
3145
+ ),
3146
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3147
+ import_react26.Box,
3148
+ {
3149
+ w: "full",
3150
+ h: "3px",
3151
+ bg: "gray.100",
3152
+ borderRadius: "full",
3153
+ overflow: "hidden",
3154
+ mt: 1,
3155
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3156
+ import_react26.Box,
3157
+ {
3158
+ h: "full",
3159
+ bg: PRIMARY,
3160
+ transition: "width 0.4s ease",
3161
+ w: `${(activeStep + 1) / steps.length * 100}%`
3162
+ }
3163
+ )
3164
+ }
3165
+ )
3166
+ ]
3167
+ }
3168
+ ),
3169
+ steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.Content, { index, children: step.component ?? step.description }, index)),
3170
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3171
+ import_react26.Flex,
3172
+ {
3173
+ w: "full",
3174
+ justify: "space-between",
3175
+ align: "center",
3176
+ mt: 4,
3177
+ gap: 2,
3178
+ display: { base: "flex", md: "none" },
3179
+ children: [
3180
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3181
+ import_react26.Box,
3182
+ {
3183
+ as: "button",
3184
+ display: "flex",
3185
+ alignItems: "center",
3186
+ gap: 1,
3187
+ px: 3,
3188
+ py: 2,
3189
+ borderRadius: "lg",
3190
+ border: "1.5px solid",
3191
+ borderColor: "gray.200",
3192
+ bg: "white",
3193
+ color: "gray.700",
3194
+ fontSize: "sm",
3195
+ fontWeight: 500,
3196
+ cursor: "pointer",
3197
+ _hover: { bg: "gray.50" },
3198
+ _disabled: { opacity: 0.4, cursor: "not-allowed" },
3199
+ transition: "all 0.15s",
3200
+ children: [
3201
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, { size: 14 }),
3202
+ "Back"
3203
+ ]
3204
+ }
3205
+ ) }),
3206
+ !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3207
+ import_react26.Box,
3208
+ {
3209
+ as: "button",
3210
+ display: "flex",
3211
+ alignItems: "center",
3212
+ gap: 1,
3213
+ px: 3,
3214
+ py: 2,
3215
+ borderRadius: "lg",
3216
+ color: "white",
3217
+ fontSize: "sm",
3218
+ fontWeight: 500,
3219
+ cursor: nextDisabled ? "not-allowed" : "pointer",
3220
+ opacity: nextDisabled ? 0.5 : 1,
3221
+ pointerEvents: nextDisabled ? "none" : "auto",
3222
+ transition: "all 0.15s",
3223
+ onClick: handleNext,
3224
+ bg: PRIMARY,
3225
+ _hover: { bg: PRIMARY_HOVER },
3226
+ children: [
3227
+ nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
3228
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 14 })
3229
+ ]
3230
+ }
3231
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3232
+ import_react26.Box,
3233
+ {
3234
+ as: "button",
3235
+ display: "flex",
3236
+ alignItems: "center",
3237
+ gap: 1,
3238
+ px: 3,
3239
+ py: 2,
3240
+ borderRadius: "lg",
3241
+ color: "white",
3242
+ fontSize: "sm",
3243
+ fontWeight: 500,
3244
+ cursor: submitDisabled ? "not-allowed" : "pointer",
3245
+ opacity: submitDisabled ? 0.5 : 1,
3246
+ pointerEvents: submitDisabled ? "none" : "auto",
3247
+ transition: "all 0.15s",
3248
+ onClick: onSubmit,
3249
+ bg: PRIMARY,
3250
+ _hover: { bg: PRIMARY_HOVER },
3251
+ children: [
3252
+ submitButtonText,
3253
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuCheck, { size: 14 })
3254
+ ]
3255
+ }
3256
+ )
3257
+ ]
3258
+ }
3259
+ ),
3260
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3261
+ import_react26.ButtonGroup,
3262
+ {
3263
+ size: "sm",
3264
+ variant: "outline",
3265
+ display: { base: "none", md: "flex" },
3266
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react26.Flex, { mt: 5, w: "full", align: "center", justify: "space-between", children: [
3267
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react26.Steps.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_st_peter_ui6.SecondaryMdButton, { children: [
3268
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronLeft, {}),
3269
+ "Previous"
3270
+ ] }) }),
3271
+ !isLastStep ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
3272
+ import_react26.Box,
3273
+ {
3274
+ as: "button",
3275
+ display: "flex",
3276
+ alignItems: "center",
3277
+ gap: 1.5,
3278
+ px: 4,
3279
+ py: 2,
3280
+ borderRadius: "lg",
3281
+ color: "white",
3282
+ fontSize: "sm",
3283
+ fontWeight: 600,
3284
+ cursor: nextDisabled ? "not-allowed" : "pointer",
3285
+ opacity: nextDisabled ? 0.5 : 1,
3286
+ pointerEvents: nextDisabled ? "none" : "auto",
3287
+ transition: "all 0.15s",
3288
+ onClick: handleNext,
3289
+ boxShadow: "0 1px 3px 0 rgba(0,0,0,0.12)",
3290
+ bg: PRIMARY,
3291
+ _hover: { bg: PRIMARY_HOVER },
3292
+ children: [
3293
+ nextStepTitle ? `Next: ${nextStepTitle}` : "Next",
3294
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu5.LuChevronRight, { size: 15 })
3295
+ ]
3296
+ }
3297
+ ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_st_peter_ui6.PrimaryMdButton, { disabled: !!submitDisabled, onClick: onSubmit, children: submitButtonText })
3298
+ ] })
3299
+ }
3300
+ )
3301
+ ]
3302
+ }
3303
+ ) })
3304
+ ]
3110
3305
  }
3111
3306
  );
3112
3307
  };
@@ -3482,6 +3677,7 @@ var BottomQuickActions_default = BottomQuickActions;
3482
3677
  // src/Generic/NotifyInstall.tsx
3483
3678
  var import_react32 = require("react");
3484
3679
  var import_react33 = require("@chakra-ui/react");
3680
+ var import_react34 = require("motion/react");
3485
3681
  var import_fi = require("react-icons/fi");
3486
3682
 
3487
3683
  // src/hooks/useNotifyInstall.ts
@@ -3524,167 +3720,175 @@ function useNotifyInstall() {
3524
3720
  // src/Generic/NotifyInstall.tsx
3525
3721
  var import_jsx_runtime19 = require("react/jsx-runtime");
3526
3722
  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
- }
3723
+ { icon: import_fi.FiShare, label: "Tap the browser menu or Share button" },
3724
+ { icon: import_fi.FiPlusSquare, label: 'Choose "Add to Home Screen"' }
3535
3725
  ];
3536
- var INSTALL_DIALOG_DISMISSED_KEY = "estore-install-dialog-dismissed";
3726
+ var DISMISSED_KEY = "estore-install-dialog-dismissed";
3537
3727
  function NotifyInstall({
3538
3728
  children,
3539
3729
  appName
3540
3730
  }) {
3541
3731
  const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
3542
- const [isDismissed, setIsDismissed] = (0, import_react32.useState)(false);
3732
+ const [isDismissed, setIsDismissed] = (0, import_react32.useState)(true);
3543
3733
  (0, import_react32.useEffect)(() => {
3544
- const wasDismissed = localStorage.getItem(INSTALL_DIALOG_DISMISSED_KEY);
3545
- setIsDismissed(wasDismissed === "true");
3734
+ if (localStorage.getItem(DISMISSED_KEY) !== "true") {
3735
+ setIsDismissed(false);
3736
+ }
3546
3737
  }, []);
3547
- const handleClose = () => {
3548
- localStorage.setItem(INSTALL_DIALOG_DISMISSED_KEY, "true");
3738
+ const handleDismiss = () => {
3739
+ localStorage.setItem(DISMISSED_KEY, "true");
3549
3740
  setIsDismissed(true);
3550
3741
  };
3551
- const isOpen = !isInstalled && isMobile && !isDismissed;
3552
- if (!isOpen) {
3553
- return children;
3554
- }
3742
+ const showPrompt = isMobile && !isInstalled && !isDismissed;
3555
3743
  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
3556
3744
  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();
3745
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react34.AnimatePresence, { children: showPrompt && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
3746
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3747
+ import_react34.motion.div,
3748
+ {
3749
+ initial: { opacity: 0 },
3750
+ animate: { opacity: 1 },
3751
+ exit: { opacity: 0 },
3752
+ transition: { duration: 0.2 },
3753
+ onClick: handleDismiss,
3754
+ style: {
3755
+ position: "fixed",
3756
+ inset: 0,
3757
+ zIndex: 1300,
3758
+ background: "rgba(0,0,0,0.55)",
3759
+ backdropFilter: "blur(3px)",
3760
+ WebkitBackdropFilter: "blur(3px)"
3564
3761
  }
3565
3762
  },
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,
3763
+ "install-backdrop"
3764
+ ),
3765
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3766
+ import_react34.motion.div,
3767
+ {
3768
+ initial: { y: "100%" },
3769
+ animate: { y: 0 },
3770
+ exit: { y: "100%" },
3771
+ transition: { type: "spring", damping: 28, stiffness: 280 },
3772
+ style: {
3773
+ position: "fixed",
3774
+ bottom: 0,
3775
+ left: 0,
3776
+ right: 0,
3777
+ zIndex: 1400,
3778
+ background: "white",
3779
+ borderRadius: "24px 24px 0 0",
3780
+ boxShadow: "0 -8px 40px rgba(0,0,0,0.14)",
3781
+ paddingBottom: "env(safe-area-inset-bottom)"
3782
+ },
3783
+ children: [
3784
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3785
+ "button",
3786
+ {
3787
+ "aria-label": "Dismiss install prompt",
3788
+ onClick: handleDismiss,
3789
+ style: {
3790
+ position: "absolute",
3791
+ top: 12,
3792
+ right: 12,
3793
+ background: "none",
3794
+ border: "none",
3795
+ cursor: "pointer",
3796
+ padding: 8,
3797
+ borderRadius: "50%",
3798
+ display: "flex",
3799
+ alignItems: "center",
3800
+ justifyContent: "center",
3801
+ color: "#9ca3af"
3802
+ },
3803
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_fi.FiX, { size: 18 })
3804
+ }
3805
+ ),
3806
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
3807
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3808
+ import_react33.Flex,
3577
3809
  {
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,
3810
+ boxSize: 16,
3811
+ align: "center",
3812
+ justify: "center",
3813
+ rounded: "2xl",
3814
+ bg: "green.50",
3815
+ color: "green.600",
3816
+ shadow: "sm",
3817
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload, boxSize: 8 })
3818
+ }
3819
+ ),
3820
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.VStack, { gap: 2, children: [
3821
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3822
+ import_react33.Text,
3823
+ {
3824
+ fontSize: "lg",
3825
+ fontWeight: "bold",
3826
+ color: "gray.900",
3827
+ lineHeight: "short",
3828
+ children: [
3829
+ "Install ",
3830
+ appName
3831
+ ]
3832
+ }
3833
+ ),
3834
+ /* @__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." })
3835
+ ] }),
3836
+ canInstall ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
3837
+ import_react33.Button,
3838
+ {
3839
+ onClick: install,
3840
+ colorPalette: "green",
3841
+ size: "lg",
3842
+ w: "full",
3843
+ rounded: "xl",
3584
3844
  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 }) })
3845
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: import_fi.FiDownload }),
3846
+ "Add to Home Screen"
3674
3847
  ]
3675
3848
  }
3849
+ ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3850
+ import_react33.VStack,
3851
+ {
3852
+ w: "full",
3853
+ bg: "gray.50",
3854
+ borderWidth: "1px",
3855
+ borderColor: "gray.100",
3856
+ rounded: "xl",
3857
+ p: 4,
3858
+ gap: 4,
3859
+ align: "stretch",
3860
+ children: STEPS.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react33.HStack, { gap: 3, align: "center", children: [
3861
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
3862
+ import_react33.Flex,
3863
+ {
3864
+ boxSize: 9,
3865
+ flexShrink: 0,
3866
+ align: "center",
3867
+ justify: "center",
3868
+ rounded: "lg",
3869
+ bg: "white",
3870
+ borderWidth: "1px",
3871
+ borderColor: "gray.200",
3872
+ color: "green.600",
3873
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Icon, { as: step.icon, boxSize: 4 })
3874
+ }
3875
+ ),
3876
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react33.Text, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
3877
+ ] }, i))
3878
+ }
3676
3879
  )
3677
- }
3678
- )
3679
- ] })
3680
- }
3681
- )
3880
+ ] })
3881
+ ]
3882
+ },
3883
+ "install-sheet"
3884
+ )
3885
+ ] }) })
3682
3886
  ] });
3683
3887
  }
3684
3888
 
3685
3889
  // src/UserProfile/UserProfile.tsx
3686
- var import_react34 = require("react");
3687
- var import_react35 = require("@chakra-ui/react");
3890
+ var import_react35 = require("react");
3891
+ var import_react36 = require("@chakra-ui/react");
3688
3892
  var import_ri = require("react-icons/ri");
3689
3893
  var import_lu7 = require("react-icons/lu");
3690
3894
  var import_hi2 = require("react-icons/hi2");
@@ -3991,28 +4195,28 @@ function ReusableProfile({
3991
4195
  onTwoFactorChange,
3992
4196
  onToast = noopToast
3993
4197
  }) {
3994
- const [profileView, setProfileView] = (0, import_react34.useState)("main");
3995
- const [fallbackColorMode, setFallbackColorMode] = (0, import_react34.useState)("light");
4198
+ const [profileView, setProfileView] = (0, import_react35.useState)("main");
4199
+ const [fallbackColorMode, setFallbackColorMode] = (0, import_react35.useState)("light");
3996
4200
  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)(
4201
+ const [fontSize, setFontSizeLocal] = (0, import_react35.useState)("md");
4202
+ const [quickNavHrefs, setQuickNavHrefs] = (0, import_react35.useState)(initialQuickNavHrefs);
4203
+ const [replacingIdx, setReplacingIdx] = (0, import_react35.useState)(null);
4204
+ const [editName, setEditName] = (0, import_react35.useState)(user.displayName);
4205
+ const [editLoading, setEditLoading] = (0, import_react35.useState)(false);
4206
+ const [currentPw, setCurrentPw] = (0, import_react35.useState)("");
4207
+ const [newPw, setNewPw] = (0, import_react35.useState)("");
4208
+ const [confirmPw, setConfirmPw] = (0, import_react35.useState)("");
4209
+ const [showCurrentPw, setShowCurrentPw] = (0, import_react35.useState)(false);
4210
+ const [showNewPw, setShowNewPw] = (0, import_react35.useState)(false);
4211
+ const [showConfirmPw, setShowConfirmPw] = (0, import_react35.useState)(false);
4212
+ const [pwLoading, setPwLoading] = (0, import_react35.useState)(false);
4213
+ const [twoFactorEnabled, setTwoFactorEnabled] = (0, import_react35.useState)(
4010
4214
  initialTwoFactorEnabled
4011
4215
  );
4012
- const [isMounted, setIsMounted] = (0, import_react34.useState)(false);
4013
- const isDesktopRaw = (0, import_react35.useBreakpointValue)({ base: false, md: true });
4216
+ const [isMounted, setIsMounted] = (0, import_react35.useState)(false);
4217
+ const isDesktopRaw = (0, import_react36.useBreakpointValue)({ base: false, md: true });
4014
4218
  const isDesktop = isMounted ? isDesktopRaw ?? false : false;
4015
- (0, import_react34.useEffect)(() => {
4219
+ (0, import_react35.useEffect)(() => {
4016
4220
  setIsMounted(true);
4017
4221
  if (!enableLocalStorage || typeof window === "undefined") return;
4018
4222
  setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4023,10 +4227,10 @@ function ReusableProfile({
4023
4227
  setQuickNavHrefs(initialQuickNavHrefs);
4024
4228
  }
4025
4229
  }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
4026
- (0, import_react34.useEffect)(() => {
4230
+ (0, import_react35.useEffect)(() => {
4027
4231
  setEditName(user.displayName);
4028
4232
  }, [user.displayName]);
4029
- const availableOptions = (0, import_react34.useMemo)(
4233
+ const availableOptions = (0, import_react35.useMemo)(
4030
4234
  () => availableNavOptions.filter(
4031
4235
  (option) => !user.role || option.roles.includes(user.role)
4032
4236
  ),
@@ -4156,7 +4360,7 @@ function ReusableProfile({
4156
4360
  const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
4157
4361
  const mainContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4158
4362
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4159
- import_react35.Box,
4363
+ import_react36.Box,
4160
4364
  {
4161
4365
  bg: "var(--chakra-colors-primary)",
4162
4366
  pt: 12,
@@ -4165,20 +4369,20 @@ function ReusableProfile({
4165
4369
  textAlign: "center",
4166
4370
  children: [
4167
4371
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4168
- import_react35.Avatar.Root,
4372
+ import_react36.Avatar.Root,
4169
4373
  {
4170
4374
  size: "2xl",
4171
4375
  mx: "auto",
4172
4376
  mb: 4,
4173
4377
  colorPalette: pickPalette(user.displayName || "U"),
4174
4378
  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 })
4379
+ user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
4380
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: user.displayName })
4177
4381
  ]
4178
4382
  }
4179
4383
  ),
4180
4384
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4181
- import_react35.Text,
4385
+ import_react36.Text,
4182
4386
  {
4183
4387
  color: "white",
4184
4388
  fontWeight: "bold",
@@ -4188,9 +4392,9 @@ function ReusableProfile({
4188
4392
  children: user.displayName
4189
4393
  }
4190
4394
  ),
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,
4395
+ 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 }),
4396
+ roleLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Box, { display: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4397
+ import_react36.Badge,
4194
4398
  {
4195
4399
  bg: "rgba(255,255,255,0.15)",
4196
4400
  color: "white",
@@ -4206,9 +4410,9 @@ function ReusableProfile({
4206
4410
  ]
4207
4411
  }
4208
4412
  ),
4209
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 5, pb: 1, children: [
4413
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 1, children: [
4210
4414
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4211
- import_react35.Text,
4415
+ import_react36.Text,
4212
4416
  {
4213
4417
  fontSize: "xs",
4214
4418
  fontWeight: "bold",
@@ -4220,7 +4424,7 @@ function ReusableProfile({
4220
4424
  }
4221
4425
  ),
4222
4426
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4223
- import_react35.Box,
4427
+ import_react36.Box,
4224
4428
  {
4225
4429
  as: "button",
4226
4430
  w: "full",
@@ -4229,7 +4433,7 @@ function ReusableProfile({
4229
4433
  transition: "opacity 0.15s",
4230
4434
  onClick: () => setProfileView("edit-account"),
4231
4435
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4232
- import_react35.Flex,
4436
+ import_react36.Flex,
4233
4437
  {
4234
4438
  justify: "space-between",
4235
4439
  align: "center",
@@ -4238,9 +4442,9 @@ function ReusableProfile({
4238
4442
  borderRadius: "lg",
4239
4443
  bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
4240
4444
  children: [
4241
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4445
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4242
4446
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4243
- import_react35.Box,
4447
+ import_react36.Box,
4244
4448
  {
4245
4449
  w: "38px",
4246
4450
  h: "38px",
@@ -4254,9 +4458,9 @@ function ReusableProfile({
4254
4458
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 16 })
4255
4459
  }
4256
4460
  ),
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" })
4461
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4462
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
4463
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
4260
4464
  ] })
4261
4465
  ] }),
4262
4466
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4265,9 +4469,9 @@ function ReusableProfile({
4265
4469
  )
4266
4470
  }
4267
4471
  ),
4268
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4472
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4269
4473
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4270
- import_react35.Box,
4474
+ import_react36.Box,
4271
4475
  {
4272
4476
  as: "button",
4273
4477
  w: "full",
@@ -4279,7 +4483,7 @@ function ReusableProfile({
4279
4483
  setProfileView("change-password");
4280
4484
  },
4281
4485
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4282
- import_react35.Flex,
4486
+ import_react36.Flex,
4283
4487
  {
4284
4488
  justify: "space-between",
4285
4489
  align: "center",
@@ -4288,9 +4492,9 @@ function ReusableProfile({
4288
4492
  borderRadius: "lg",
4289
4493
  bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
4290
4494
  children: [
4291
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
4495
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4292
4496
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4293
- import_react35.Box,
4497
+ import_react36.Box,
4294
4498
  {
4295
4499
  w: "38px",
4296
4500
  h: "38px",
@@ -4304,9 +4508,9 @@ function ReusableProfile({
4304
4508
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuLock, { size: 16 })
4305
4509
  }
4306
4510
  ),
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" })
4511
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4512
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
4513
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
4310
4514
  ] })
4311
4515
  ] }),
4312
4516
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronRight, { size: 16, color: "var(--chakra-colors-gray-400)" })
@@ -4315,11 +4519,11 @@ function ReusableProfile({
4315
4519
  )
4316
4520
  }
4317
4521
  ),
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: [
4522
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4523
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4524
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4321
4525
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4322
- import_react35.Box,
4526
+ import_react36.Box,
4323
4527
  {
4324
4528
  w: "38px",
4325
4529
  h: "38px",
@@ -4333,13 +4537,13 @@ function ReusableProfile({
4333
4537
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuShield, { size: 16 })
4334
4538
  }
4335
4539
  ),
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" })
4540
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4541
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
4542
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
4339
4543
  ] })
4340
4544
  ] }),
4341
4545
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4342
- import_react35.Box,
4546
+ import_react36.Box,
4343
4547
  {
4344
4548
  role: "switch",
4345
4549
  "aria-checked": twoFactorEnabled,
@@ -4362,7 +4566,7 @@ function ReusableProfile({
4362
4566
  flexShrink: 0,
4363
4567
  outline: "none",
4364
4568
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4365
- import_react35.Box,
4569
+ import_react36.Box,
4366
4570
  {
4367
4571
  position: "absolute",
4368
4572
  top: "3px",
@@ -4379,9 +4583,9 @@ function ReusableProfile({
4379
4583
  )
4380
4584
  ] })
4381
4585
  ] }),
4382
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { px: 4, pt: 4, pb: 2, children: [
4586
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 2, children: [
4383
4587
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4384
- import_react35.Text,
4588
+ import_react36.Text,
4385
4589
  {
4386
4590
  fontSize: "xs",
4387
4591
  fontWeight: "bold",
@@ -4392,10 +4596,10 @@ function ReusableProfile({
4392
4596
  children: "Preferences"
4393
4597
  }
4394
4598
  ),
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: [
4599
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4600
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4397
4601
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4398
- import_react35.Box,
4602
+ import_react36.Box,
4399
4603
  {
4400
4604
  w: "38px",
4401
4605
  h: "38px",
@@ -4409,15 +4613,15 @@ function ReusableProfile({
4409
4613
  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
4614
  }
4411
4615
  ),
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" })
4616
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4617
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
4618
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
4415
4619
  ] })
4416
4620
  ] }),
4417
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
4621
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1.5, children: ["light", "dark"].map((mode) => {
4418
4622
  const isActive = colorMode === mode;
4419
4623
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4420
- import_react35.Button,
4624
+ import_react36.Button,
4421
4625
  {
4422
4626
  size: "sm",
4423
4627
  variant: "outline",
@@ -4434,7 +4638,7 @@ function ReusableProfile({
4434
4638
  children: [
4435
4639
  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
4640
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4437
- import_react35.Text,
4641
+ import_react36.Text,
4438
4642
  {
4439
4643
  fontSize: "xs",
4440
4644
  textTransform: "capitalize",
@@ -4448,11 +4652,11 @@ function ReusableProfile({
4448
4652
  );
4449
4653
  }) })
4450
4654
  ] }),
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: [
4655
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4656
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4657
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4454
4658
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4455
- import_react35.Box,
4659
+ import_react36.Box,
4456
4660
  {
4457
4661
  w: "38px",
4458
4662
  h: "38px",
@@ -4468,15 +4672,15 @@ function ReusableProfile({
4468
4672
  children: "A"
4469
4673
  }
4470
4674
  ),
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 })
4675
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4676
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
4677
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
4474
4678
  ] })
4475
4679
  ] }),
4476
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
4680
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.HStack, { gap: 1, children: FONT_SIZES.map((option) => {
4477
4681
  const isActive = fontSize === option.value;
4478
4682
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4479
- import_react35.Button,
4683
+ import_react36.Button,
4480
4684
  {
4481
4685
  size: "sm",
4482
4686
  variant: "outline",
@@ -4492,7 +4696,7 @@ function ReusableProfile({
4492
4696
  onClick: () => handleFontSize(option.value),
4493
4697
  title: option.title,
4494
4698
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4495
- import_react35.Text,
4699
+ import_react36.Text,
4496
4700
  {
4497
4701
  fontWeight: isActive ? "bold" : "normal",
4498
4702
  style: { fontSize: `${option.scale * 13}px` },
@@ -4504,9 +4708,9 @@ function ReusableProfile({
4504
4708
  );
4505
4709
  }) })
4506
4710
  ] }),
4507
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {}),
4711
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {}),
4508
4712
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4509
- import_react35.Box,
4713
+ import_react36.Box,
4510
4714
  {
4511
4715
  as: "button",
4512
4716
  w: "full",
@@ -4514,10 +4718,10 @@ function ReusableProfile({
4514
4718
  _hover: { opacity: 0.7 },
4515
4719
  transition: "opacity 0.15s",
4516
4720
  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: [
4721
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 3, children: [
4722
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4519
4723
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4520
- import_react35.Box,
4724
+ import_react36.Box,
4521
4725
  {
4522
4726
  w: "38px",
4523
4727
  h: "38px",
@@ -4531,9 +4735,9 @@ function ReusableProfile({
4531
4735
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 16 })
4532
4736
  }
4533
4737
  ),
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: [
4738
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4739
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
4740
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
4537
4741
  quickNavHrefs.length,
4538
4742
  " of ",
4539
4743
  maxQuickNavItems,
@@ -4546,8 +4750,8 @@ function ReusableProfile({
4546
4750
  }
4547
4751
  )
4548
4752
  ] }),
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,
4753
+ /* @__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)(
4754
+ import_react36.Button,
4551
4755
  {
4552
4756
  w: "full",
4553
4757
  variant: "outline",
@@ -4560,9 +4764,9 @@ function ReusableProfile({
4560
4764
  ) }) })
4561
4765
  ] });
4562
4766
  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: [
4767
+ /* @__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
4768
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4565
- import_react35.IconButton,
4769
+ import_react36.IconButton,
4566
4770
  {
4567
4771
  size: "sm",
4568
4772
  variant: "ghost",
@@ -4572,17 +4776,17 @@ function ReusableProfile({
4572
4776
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4573
4777
  }
4574
4778
  ),
4575
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
4779
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
4576
4780
  ] }) }),
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 })
4781
+ /* @__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: [
4782
+ user.avatarSrc && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Image, { src: user.avatarSrc, alt: editName }),
4783
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Avatar.Fallback, { name: editName })
4580
4784
  ] }) }),
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" }),
4785
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
4786
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4787
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
4584
4788
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4585
- import_react35.Input,
4789
+ import_react36.Input,
4586
4790
  {
4587
4791
  value: editName,
4588
4792
  onChange: (event) => setEditName(event.target.value),
@@ -4591,10 +4795,10 @@ function ReusableProfile({
4591
4795
  }
4592
4796
  )
4593
4797
  ] }),
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" }),
4798
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4799
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
4596
4800
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4597
- import_react35.Input,
4801
+ import_react36.Input,
4598
4802
  {
4599
4803
  value: user.email ?? "",
4600
4804
  readOnly: true,
@@ -4604,10 +4808,10 @@ function ReusableProfile({
4604
4808
  }
4605
4809
  )
4606
4810
  ] }),
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" }),
4811
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4812
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
4609
4813
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4610
- import_react35.Input,
4814
+ import_react36.Input,
4611
4815
  {
4612
4816
  value: user.mobileNumber ?? "",
4613
4817
  readOnly: true,
@@ -4618,7 +4822,7 @@ function ReusableProfile({
4618
4822
  )
4619
4823
  ] }),
4620
4824
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4621
- import_react35.Button,
4825
+ import_react36.Button,
4622
4826
  {
4623
4827
  w: "full",
4624
4828
  mt: 2,
@@ -4633,9 +4837,9 @@ function ReusableProfile({
4633
4837
  ] })
4634
4838
  ] });
4635
4839
  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: [
4840
+ /* @__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
4841
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4638
- import_react35.IconButton,
4842
+ import_react36.IconButton,
4639
4843
  {
4640
4844
  size: "sm",
4641
4845
  variant: "ghost",
@@ -4645,16 +4849,16 @@ function ReusableProfile({
4645
4849
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4646
4850
  }
4647
4851
  ),
4648
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
4852
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
4649
4853
  ] }) }),
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" }),
4854
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.VStack, { gap: 5, px: 4, pt: 6, pb: 10, children: [
4855
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4856
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
4653
4857
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4654
- import_react35.InputGroup,
4858
+ import_react36.InputGroup,
4655
4859
  {
4656
4860
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4657
- import_react35.IconButton,
4861
+ import_react36.IconButton,
4658
4862
  {
4659
4863
  size: "xs",
4660
4864
  variant: "ghost",
@@ -4665,7 +4869,7 @@ function ReusableProfile({
4665
4869
  }
4666
4870
  ),
4667
4871
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4668
- import_react35.Input,
4872
+ import_react36.Input,
4669
4873
  {
4670
4874
  type: showCurrentPw ? "text" : "password",
4671
4875
  value: currentPw,
@@ -4677,13 +4881,13 @@ function ReusableProfile({
4677
4881
  }
4678
4882
  )
4679
4883
  ] }),
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" }),
4884
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4885
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
4682
4886
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4683
- import_react35.InputGroup,
4887
+ import_react36.InputGroup,
4684
4888
  {
4685
4889
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4686
- import_react35.IconButton,
4890
+ import_react36.IconButton,
4687
4891
  {
4688
4892
  size: "xs",
4689
4893
  variant: "ghost",
@@ -4694,7 +4898,7 @@ function ReusableProfile({
4694
4898
  }
4695
4899
  ),
4696
4900
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4697
- import_react35.Input,
4901
+ import_react36.Input,
4698
4902
  {
4699
4903
  type: showNewPw ? "text" : "password",
4700
4904
  value: newPw,
@@ -4705,9 +4909,9 @@ function ReusableProfile({
4705
4909
  )
4706
4910
  }
4707
4911
  ),
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,
4912
+ newPw && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { mt: 2, children: [
4913
+ /* @__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)(
4914
+ import_react36.Box,
4711
4915
  {
4712
4916
  flex: 1,
4713
4917
  h: "3px",
@@ -4717,16 +4921,16 @@ function ReusableProfile({
4717
4921
  },
4718
4922
  i
4719
4923
  )) }),
4720
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
4924
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
4721
4925
  ] })
4722
4926
  ] }),
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" }),
4927
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4928
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
4725
4929
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4726
- import_react35.InputGroup,
4930
+ import_react36.InputGroup,
4727
4931
  {
4728
4932
  endElement: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4729
- import_react35.IconButton,
4933
+ import_react36.IconButton,
4730
4934
  {
4731
4935
  size: "xs",
4732
4936
  variant: "ghost",
@@ -4737,7 +4941,7 @@ function ReusableProfile({
4737
4941
  }
4738
4942
  ),
4739
4943
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4740
- import_react35.Input,
4944
+ import_react36.Input,
4741
4945
  {
4742
4946
  type: showConfirmPw ? "text" : "password",
4743
4947
  value: confirmPw,
@@ -4748,10 +4952,10 @@ function ReusableProfile({
4748
4952
  )
4749
4953
  }
4750
4954
  ),
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" })
4955
+ 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
4956
  ] }),
4753
4957
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4754
- import_react35.Button,
4958
+ import_react36.Button,
4755
4959
  {
4756
4960
  w: "full",
4757
4961
  mt: 1,
@@ -4768,7 +4972,7 @@ function ReusableProfile({
4768
4972
  ] });
4769
4973
  const navbarCustomizeContent = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
4770
4974
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4771
- import_react35.Box,
4975
+ import_react36.Box,
4772
4976
  {
4773
4977
  px: 4,
4774
4978
  pt: 4,
@@ -4779,9 +4983,9 @@ function ReusableProfile({
4779
4983
  top: 0,
4780
4984
  bg: "bg",
4781
4985
  zIndex: 1,
4782
- children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 2, pr: 10, children: [
4986
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 2, pr: 10, children: [
4783
4987
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4784
- import_react35.IconButton,
4988
+ import_react36.IconButton,
4785
4989
  {
4786
4990
  size: "sm",
4787
4991
  variant: "ghost",
@@ -4794,9 +4998,9 @@ function ReusableProfile({
4794
4998
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuChevronLeft, {})
4795
4999
  }
4796
5000
  ),
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: [
5001
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
5002
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
5003
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", children: [
4800
5004
  "Choose up to ",
4801
5005
  maxQuickNavItems,
4802
5006
  " shortcuts for the bottom bar"
@@ -4805,10 +5009,10 @@ function ReusableProfile({
4805
5009
  ] })
4806
5010
  }
4807
5011
  ),
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: [
5012
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 5, pb: 2, children: [
5013
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
4810
5014
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4811
- import_react35.Text,
5015
+ import_react36.Text,
4812
5016
  {
4813
5017
  fontSize: "xs",
4814
5018
  fontWeight: "bold",
@@ -4819,7 +5023,7 @@ function ReusableProfile({
4819
5023
  }
4820
5024
  ),
4821
5025
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4822
- import_react35.Text,
5026
+ import_react36.Text,
4823
5027
  {
4824
5028
  fontSize: "xs",
4825
5029
  color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -4833,7 +5037,7 @@ function ReusableProfile({
4833
5037
  )
4834
5038
  ] }),
4835
5039
  quickNavHrefs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4836
- import_react35.Flex,
5040
+ import_react36.Flex,
4837
5041
  {
4838
5042
  align: "center",
4839
5043
  justify: "center",
@@ -4842,18 +5046,18 @@ function ReusableProfile({
4842
5046
  borderWidth: "1px",
4843
5047
  borderStyle: "dashed",
4844
5048
  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" })
5049
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
4846
5050
  }
4847
- ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
5051
+ ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.VStack, { gap: 0, children: quickNavHrefs.map((href, idx) => {
4848
5052
  const option = availableOptions.find((item) => item.key === href);
4849
5053
  if (!option) return null;
4850
5054
  const ItemIcon = option.Icon;
4851
5055
  const isFirst = idx === 0;
4852
5056
  const isLast = idx === quickNavHrefs.length - 1;
4853
5057
  const isReplacing = replacingIdx === idx;
4854
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Box, { w: "full", children: [
5058
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
4855
5059
  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
4856
- import_react35.Flex,
5060
+ import_react36.Flex,
4857
5061
  {
4858
5062
  justify: "space-between",
4859
5063
  align: "center",
@@ -4865,9 +5069,9 @@ function ReusableProfile({
4865
5069
  borderColor: isReplacing ? "orange.200" : void 0,
4866
5070
  transition: "all 0.15s",
4867
5071
  children: [
4868
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Flex, { align: "center", gap: 3, children: [
5072
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
4869
5073
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4870
- import_react35.Box,
5074
+ import_react36.Box,
4871
5075
  {
4872
5076
  w: "36px",
4873
5077
  h: "36px",
@@ -4881,10 +5085,10 @@ function ReusableProfile({
4881
5085
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ItemIcon, { size: 15 })
4882
5086
  }
4883
5087
  ),
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 }),
5088
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
5089
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Text, { fontSize: "sm", fontWeight: "medium", children: option.title }),
4886
5090
  isReplacing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4887
- import_react35.Text,
5091
+ import_react36.Text,
4888
5092
  {
4889
5093
  fontSize: "xs",
4890
5094
  color: "orange.500",
@@ -4894,9 +5098,9 @@ function ReusableProfile({
4894
5098
  )
4895
5099
  ] })
4896
5100
  ] }),
4897
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.HStack, { gap: 0.5, children: [
5101
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.HStack, { gap: 0.5, children: [
4898
5102
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4899
- import_react35.IconButton,
5103
+ import_react36.IconButton,
4900
5104
  {
4901
5105
  size: "xs",
4902
5106
  variant: "ghost",
@@ -4908,7 +5112,7 @@ function ReusableProfile({
4908
5112
  }
4909
5113
  ),
4910
5114
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4911
- import_react35.IconButton,
5115
+ import_react36.IconButton,
4912
5116
  {
4913
5117
  size: "xs",
4914
5118
  variant: "ghost",
@@ -4920,7 +5124,7 @@ function ReusableProfile({
4920
5124
  }
4921
5125
  ),
4922
5126
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4923
- import_react35.IconButton,
5127
+ import_react36.IconButton,
4924
5128
  {
4925
5129
  size: "xs",
4926
5130
  variant: isReplacing ? "solid" : "ghost",
@@ -4933,7 +5137,7 @@ function ReusableProfile({
4933
5137
  }
4934
5138
  ),
4935
5139
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4936
- import_react35.IconButton,
5140
+ import_react36.IconButton,
4937
5141
  {
4938
5142
  size: "xs",
4939
5143
  variant: "ghost",
@@ -4949,16 +5153,16 @@ function ReusableProfile({
4949
5153
  ]
4950
5154
  }
4951
5155
  ),
4952
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
5156
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
4953
5157
  ] }, href);
4954
5158
  }) })
4955
5159
  ] }),
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: [
5160
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, { mx: 4, my: 1 }),
5161
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { px: 4, pt: 4, pb: 10, children: [
5162
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", justify: "space-between", mb: 3, children: [
5163
+ replacingIdx !== null ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { children: [
4960
5164
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4961
- import_react35.Text,
5165
+ import_react36.Text,
4962
5166
  {
4963
5167
  fontSize: "xs",
4964
5168
  fontWeight: "bold",
@@ -4968,7 +5172,7 @@ function ReusableProfile({
4968
5172
  children: "Select Replacement"
4969
5173
  }
4970
5174
  ),
4971
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react35.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
5175
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Text, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
4972
5176
  'for "',
4973
5177
  availableOptions.find(
4974
5178
  (item) => item.key === quickNavHrefs[replacingIdx]
@@ -4976,7 +5180,7 @@ function ReusableProfile({
4976
5180
  '"'
4977
5181
  ] })
4978
5182
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4979
- import_react35.Text,
5183
+ import_react36.Text,
4980
5184
  {
4981
5185
  fontSize: "xs",
4982
5186
  fontWeight: "bold",
@@ -4987,7 +5191,7 @@ function ReusableProfile({
4987
5191
  }
4988
5192
  ),
4989
5193
  replacingIdx !== null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4990
- import_react35.Button,
5194
+ import_react36.Button,
4991
5195
  {
4992
5196
  size: "xs",
4993
5197
  variant: "ghost",
@@ -4997,17 +5201,17 @@ function ReusableProfile({
4997
5201
  }
4998
5202
  )
4999
5203
  ] }),
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) => {
5204
+ 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
5205
  const ItemIcon = option.Icon;
5002
5206
  const isLast = idx === unpinnedOptions.length - 1;
5003
5207
  const isReplacingMode = replacingIdx !== null;
5004
5208
  const canAdd = quickNavHrefs.length < maxQuickNavItems;
5005
5209
  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: [
5210
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Box, { w: "full", children: [
5211
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { justify: "space-between", align: "center", py: 2.5, children: [
5212
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react36.Flex, { align: "center", gap: 3, children: [
5009
5213
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5010
- import_react35.Box,
5214
+ import_react36.Box,
5011
5215
  {
5012
5216
  w: "36px",
5013
5217
  h: "36px",
@@ -5022,7 +5226,7 @@ function ReusableProfile({
5022
5226
  }
5023
5227
  ),
5024
5228
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5025
- import_react35.Text,
5229
+ import_react36.Text,
5026
5230
  {
5027
5231
  fontSize: "sm",
5028
5232
  fontWeight: "medium",
@@ -5032,7 +5236,7 @@ function ReusableProfile({
5032
5236
  )
5033
5237
  ] }),
5034
5238
  isReplacingMode ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5035
- import_react35.IconButton,
5239
+ import_react36.IconButton,
5036
5240
  {
5037
5241
  size: "xs",
5038
5242
  variant: "outline",
@@ -5044,7 +5248,7 @@ function ReusableProfile({
5044
5248
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuArrowLeftRight, { size: 13 })
5045
5249
  }
5046
5250
  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5047
- import_react35.IconButton,
5251
+ import_react36.IconButton,
5048
5252
  {
5049
5253
  size: "xs",
5050
5254
  variant: "outline",
@@ -5058,7 +5262,7 @@ function ReusableProfile({
5058
5262
  }
5059
5263
  )
5060
5264
  ] }),
5061
- !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react35.Separator, {})
5265
+ !isLast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Separator, {})
5062
5266
  ] }, option.key);
5063
5267
  }) })
5064
5268
  ] })
@@ -5066,7 +5270,7 @@ function ReusableProfile({
5066
5270
  const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
5067
5271
  if (isDesktop) {
5068
5272
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
5069
- import_react35.Flex,
5273
+ import_react36.Flex,
5070
5274
  {
5071
5275
  maxW: "6xl",
5072
5276
  mx: "auto",
@@ -5077,7 +5281,7 @@ function ReusableProfile({
5077
5281
  align: "start",
5078
5282
  children: [
5079
5283
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5080
- import_react35.Box,
5284
+ import_react36.Box,
5081
5285
  {
5082
5286
  w: { md: "300px", lg: "340px" },
5083
5287
  flexShrink: 0,
@@ -5092,7 +5296,7 @@ function ReusableProfile({
5092
5296
  }
5093
5297
  ),
5094
5298
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5095
- import_react35.Box,
5299
+ import_react36.Box,
5096
5300
  {
5097
5301
  flex: "1",
5098
5302
  minW: 0,
@@ -5103,7 +5307,7 @@ function ReusableProfile({
5103
5307
  bg: "bg",
5104
5308
  minH: "540px",
5105
5309
  children: subViewContent ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
5106
- import_react35.Flex,
5310
+ import_react36.Flex,
5107
5311
  {
5108
5312
  direction: "column",
5109
5313
  align: "center",
@@ -5114,7 +5318,7 @@ function ReusableProfile({
5114
5318
  color: "gray.400",
5115
5319
  children: [
5116
5320
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
5117
- import_react35.Box,
5321
+ import_react36.Box,
5118
5322
  {
5119
5323
  w: "56px",
5120
5324
  h: "56px",
@@ -5127,7 +5331,7 @@ function ReusableProfile({
5127
5331
  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu7.LuUser, { size: 24 })
5128
5332
  }
5129
5333
  ),
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." })
5334
+ /* @__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
5335
  ]
5132
5336
  }
5133
5337
  )
@@ -5137,7 +5341,7 @@ function ReusableProfile({
5137
5341
  }
5138
5342
  );
5139
5343
  }
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 });
5344
+ 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
5345
  }
5142
5346
  var UserProfile_default = ReusableProfile;
5143
5347
  // Annotate the CommonJS export names for ESM import in node: