@splpi/estore-shared-components 7.0.2 → 7.0.3

package/dist/index.mjs

@@ -256,6 +256,20 @@ var markOcrApplied = (section) => {
   }
   return true;
 };
+var saveOcrResult = (value) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(OCR_STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+};
+var clearOcrResult = () => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.removeItem(OCR_STORAGE_KEY);
+  } catch {
+  }
+};
 
 // src/NewSaleForm/LifePlanApplication1.tsx
 import { useEffect, useState as useState2 } from "react";
@@ -2140,6 +2154,7 @@ var InfoCard = ({
     }
   );
 };
+var info_card_default = InfoCard;
 
 // src/NewSaleForm/ui/input-card-accordion.tsx
 import { Box as Box8, Flex as Flex3, Text as Text5 } from "@chakra-ui/react";
@@ -3581,22 +3596,879 @@ var LifePlanApplicationStepWrapper = (props) => {
 };
 var LifePlanApplicationStepWrapper_default = LifePlanApplicationStepWrapper;
 
+// src/hooks/useOcr.ts
+import { useCallback as useCallback2, useState as useState12 } from "react";
+function useOcr(scanIdFn) {
+  const [data, setData] = useState12(null);
+  const [loading, setLoading] = useState12(false);
+  const [error, setError] = useState12(null);
+  const scanId = useCallback2(
+    async (file) => {
+      setLoading(true);
+      setError(null);
+      try {
+        clearOcrResult();
+        const result = await scanIdFn(file);
+        saveOcrResult(result);
+        setData(result);
+        return result;
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "OCR failed");
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [scanIdFn]
+  );
+  return { data, loading, error, scanId };
+}
+
+// src/GetStarted/GetStarted.tsx
+import {
+  BaseText,
+  Body as Body5,
+  CancelButton as CancelButton2,
+  H3 as H32,
+  NextButton,
+  PrimaryMdButton as PrimaryMdButton3
+} from "st-peter-ui";
+import {
+  Box as Box17,
+  VStack as VStack7,
+  Dialog as Dialog3,
+  Button as Button3,
+  Portal as Portal4,
+  CloseButton as CloseButton3,
+  Input as Input4
+} from "@chakra-ui/react";
+import { useState as useState14 } from "react";
+import { LuIdCard, LuSignature } from "react-icons/lu";
+
+// src/GetStarted/Container.tsx
+import "react";
+import { Box as Box15 } from "@chakra-ui/react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Container = ({ children }) => {
+  return /* @__PURE__ */ jsx18(
+    Box15,
+    {
+      px: { base: 8, md: 8 },
+      mt: { base: 16, md: 32 },
+      mb: { base: 32, md: 16 },
+      maxW: "7xl",
+      mx: "auto",
+      children
+    }
+  );
+};
+var Container_default = Container;
+
+// src/GetStarted/DocumentUploadCard.tsx
+import { useEffect as useEffect7, useRef as useRef2, useState as useState13 } from "react";
+import { Box as Box16, Flex as Flex8, Spinner, Text as Text9, useBreakpointValue as useBreakpointValue2 } from "@chakra-ui/react";
+import {
+  LuUpload,
+  LuCamera,
+  LuFolderOpen,
+  LuFileText,
+  LuCheck as LuCheck3,
+  LuTriangleAlert,
+  LuRefreshCw,
+  LuTrash2,
+  LuReplace,
+  LuSparkles
+} from "react-icons/lu";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var PRIMARY2 = "var(--chakra-colors-primary)";
+var PRIMARY_SOFT = "var(--chakra-colors-primary-disabled)";
+var defaultNotifyError = (message) => {
+  console.error(message);
+};
+var formatBytes = (bytes) => {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+};
+var validate = (file, config) => {
+  const accepted = config.accept.split(",").map((s) => s.trim());
+  const okType = accepted.includes(file.type) || accepted.some(
+    (a) => a.endsWith("/*") && file.type.startsWith(a.slice(0, -1))
+  ) || accepted.some(
+    (a) => a.startsWith(".") && file.name.toLowerCase().endsWith(a)
+  );
+  if (!okType) return "Unsupported file type. Please upload a JPG, PNG or PDF.";
+  if (file.size > config.maxSizeMB * 1024 * 1024)
+    return `File is too large. Maximum size is ${config.maxSizeMB}MB.`;
+  return null;
+};
+var useDocumentSlot = (config, onProcess, notifyError = defaultNotifyError) => {
+  const [slot, setSlot] = useState13({ status: "idle" });
+  const timers = useRef2([]);
+  const runId = useRef2(0);
+  const clearTimers = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  };
+  const processFile = (file, currentRun, isSignature) => {
+    if (!onProcess) return false;
+    onProcess(file).then((result) => {
+      if (runId.current !== currentRun) return;
+      setSlot((prev) => ({
+        ...prev,
+        status: "completed",
+        cleanedImageUrl: isSignature ? prev.previewUrl : void 0,
+        extraction: !isSignature && result && typeof result === "object" ? result : void 0
+      }));
+    }).catch((err) => {
+      if (runId.current !== currentRun) return;
+      const message = err instanceof Error && err.message ? err.message : "We couldn't process this document. Please try again.";
+      setSlot((prev) => ({ ...prev, status: "failed", error: message }));
+      notifyError(message);
+    });
+    return true;
+  };
+  const runLifecycle = (file) => {
+    clearTimers();
+    const currentRun = ++runId.current;
+    const previewUrl = URL.createObjectURL(file);
+    const isSignature = config.processor === "signature";
+    setSlot({
+      status: "uploading",
+      file,
+      fileName: file.name,
+      fileType: file.type,
+      fileSize: file.size,
+      previewUrl,
+      progress: 0
+    });
+    let progress = 0;
+    const tick = () => {
+      progress = Math.min(100, progress + 20);
+      setSlot((prev) => ({ ...prev, progress }));
+      if (progress < 100) {
+        timers.current.push(setTimeout(tick, 180));
+      } else {
+        timers.current.push(
+          setTimeout(() => {
+            setSlot((prev) => ({ ...prev, status: "processing" }));
+            if (processFile(file, currentRun, isSignature)) return;
+            timers.current.push(
+              setTimeout(() => {
+                setSlot((prev) => ({
+                  ...prev,
+                  status: "completed",
+                  cleanedImageUrl: isSignature ? prev.previewUrl : void 0,
+                  extraction: isSignature ? void 0 : { name: "Sample", date: "2026-07-16", id: "0001" }
+                }));
+              }, 1600)
+            );
+          }, 200)
+        );
+      }
+    };
+    timers.current.push(setTimeout(tick, 180));
+  };
+  const uploadDocument = (file) => runLifecycle(file);
+  const retryDocument = () => {
+    if (slot.file) runLifecycle(slot.file);
+  };
+  const removeDocument = () => {
+    clearTimers();
+    runId.current++;
+    if (slot.previewUrl) URL.revokeObjectURL(slot.previewUrl);
+    setSlot({ status: "idle" });
+  };
+  return { slot, uploadDocument, retryDocument, removeDocument };
+};
+var Card = ({
+  activeIcon,
+  title,
+  subtitle,
+  headerAction,
+  children
+}) => /* @__PURE__ */ jsxs15(
+  Box16,
+  {
+    w: "full",
+    borderRadius: "2xl",
+    bg: "white",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    shadow: "sm",
+    overflow: "hidden",
+    children: [
+      /* @__PURE__ */ jsxs15(Flex8, { align: "center", justify: "space-between", px: 4, py: 3, gap: 2, children: [
+        /* @__PURE__ */ jsxs15(Flex8, { align: "center", gap: 2, minW: 0, children: [
+          /* @__PURE__ */ jsx19(
+            Box16,
+            {
+              p: 2,
+              borderRadius: "full",
+              bg: "gray.100",
+              color: PRIMARY2,
+              flexShrink: 0,
+              children: activeIcon
+            }
+          ),
+          /* @__PURE__ */ jsxs15(Box16, { minW: 0, children: [
+            /* @__PURE__ */ jsx19(Text9, { fontWeight: "bold", fontSize: "md", lineHeight: "1.2", truncate: true, children: title }),
+            subtitle && /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", truncate: true, children: subtitle })
+          ] })
+        ] }),
+        headerAction
+      ] }),
+      /* @__PURE__ */ jsx19(Box16, { px: 4, pb: 4, pt: 1, borderTopWidth: "1px", borderColor: "gray.100", children })
+    ]
+  }
+);
+var StatusPill = ({ status }) => {
+  const map = {
+    idle: null,
+    uploading: { label: "Uploading", fg: "#1D4ED8", bg: "#EFF6FF" },
+    processing: { label: "Analyzing", fg: "#7C3AED", bg: "#F5F3FF" },
+    completed: { label: "Completed", fg: "#15803D", bg: "#F0FDF4" },
+    failed: { label: "Failed", fg: "#B91C1C", bg: "#FEF2F2" }
+  };
+  const meta = map[status];
+  if (!meta) return null;
+  return /* @__PURE__ */ jsxs15(
+    Flex8,
+    {
+      align: "center",
+      gap: 1.5,
+      px: 2.5,
+      py: 1,
+      borderRadius: "full",
+      fontSize: "xs",
+      fontWeight: 600,
+      style: { color: meta.fg, background: meta.bg },
+      flexShrink: 0,
+      children: [
+        status === "processing" || status === "uploading" ? /* @__PURE__ */ jsx19(Spinner, { size: "xs", borderWidth: "2px" }) : status === "completed" ? /* @__PURE__ */ jsx19(LuCheck3, { size: 12 }) : /* @__PURE__ */ jsx19(LuTriangleAlert, { size: 12 }),
+        meta.label
+      ]
+    }
+  );
+};
+var ProgressBar = ({ value, color }) => /* @__PURE__ */ jsx19(Box16, { w: "full", h: "6px", bg: "gray.100", borderRadius: "full", overflow: "hidden", children: /* @__PURE__ */ jsx19(
+  Box16,
+  {
+    h: "full",
+    borderRadius: "full",
+    style: {
+      width: `${value}%`,
+      background: color,
+      transition: "width 0.2s ease"
+    }
+  }
+) });
+var Thumb = ({
+  url,
+  isPdf,
+  fileName,
+  transparent
+}) => /* @__PURE__ */ jsx19(
+  Flex8,
+  {
+    align: "center",
+    justify: "center",
+    boxSize: { base: "56px", md: "64px" },
+    borderRadius: "lg",
+    borderWidth: "1px",
+    borderColor: "gray.200",
+    overflow: "hidden",
+    flexShrink: 0,
+    bg: transparent ? "transparent" : "gray.50",
+    style: transparent ? {
+      backgroundImage: "linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%)",
+      backgroundSize: "10px 10px",
+      backgroundPosition: "0 0,0 5px,5px -5px,-5px 0"
+    } : void 0,
+    children: isPdf || !url ? /* @__PURE__ */ jsxs15(Flex8, { direction: "column", align: "center", color: "gray.400", gap: 0.5, children: [
+      /* @__PURE__ */ jsx19(LuFileText, { size: 22 }),
+      /* @__PURE__ */ jsx19(Text9, { fontSize: "9px", fontWeight: 600, children: isPdf ? "PDF" : "FILE" })
+    ] }) : (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsx19(
+        "img",
+        {
+          src: url,
+          alt: fileName ?? "preview",
+          style: { width: "100%", height: "100%", objectFit: "contain" }
+        }
+      )
+    )
+  }
+);
+var GhostBtn = ({
+  icon,
+  label,
+  onClick,
+  tone = "gray"
+}) => {
+  const tones = {
+    gray: { c: "gray.600", h: "gray.50", b: "gray.200" },
+    danger: { c: "#B91C1C", h: "#FEF2F2", b: "#FECACA" },
+    primary: { c: PRIMARY2, h: PRIMARY_SOFT, b: PRIMARY2 }
+  };
+  const t = tones[tone];
+  return /* @__PURE__ */ jsxs15(
+    Flex8,
+    {
+      as: "button",
+      align: "center",
+      gap: 1.5,
+      px: 2.5,
+      py: 1.5,
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderColor: t.b,
+      color: t.c,
+      bg: "white",
+      fontSize: "xs",
+      fontWeight: 600,
+      cursor: "pointer",
+      _hover: { bg: t.h },
+      transition: "all 0.15s",
+      onClick,
+      children: [
+        icon,
+        label
+      ]
+    }
+  );
+};
+function DocumentUploadCard({
+  config,
+  onStatusChange,
+  onProcess,
+  onError
+}) {
+  const notifyError = onError ?? defaultNotifyError;
+  const { slot, uploadDocument, retryDocument, removeDocument } = useDocumentSlot(config, onProcess, notifyError);
+  const status = slot?.status ?? "idle";
+  useEffect7(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+  const browseRef = useRef2(null);
+  const cameraRef = useRef2(null);
+  const [dragging, setDragging] = useState13(false);
+  const Icon6 = config.icon;
+  const isPdf = slot?.fileType === "application/pdf";
+  const handleFiles = (files) => {
+    const file = files?.[0];
+    if (!file) return;
+    const error = validate(file, config);
+    if (error) {
+      notifyError(error);
+      return;
+    }
+    void uploadDocument(file);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const renderDropzone = () => /* @__PURE__ */ jsxs15(
+    Flex8,
+    {
+      direction: "column",
+      align: "center",
+      justify: "center",
+      gap: 2,
+      py: { base: 6, md: 7 },
+      px: 4,
+      borderWidth: "2px",
+      borderStyle: "dashed",
+      borderColor: dragging ? PRIMARY2 : "gray.200",
+      borderRadius: "xl",
+      bg: dragging ? PRIMARY_SOFT : "gray.50",
+      transition: "all 0.15s",
+      textAlign: "center",
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop,
+      role: "button",
+      tabIndex: 0,
+      onClick: () => browseRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") browseRef.current?.click();
+      },
+      cursor: "pointer",
+      _hover: { borderColor: PRIMARY2, bg: PRIMARY_SOFT },
+      children: [
+        /* @__PURE__ */ jsx19(
+          Flex8,
+          {
+            align: "center",
+            justify: "center",
+            boxSize: 11,
+            borderRadius: "full",
+            bg: "white",
+            borderWidth: "1px",
+            borderColor: "gray.200",
+            color: PRIMARY2,
+            children: /* @__PURE__ */ jsx19(LuUpload, { size: 18 })
+          }
+        ),
+        /* @__PURE__ */ jsxs15(Box16, { children: [
+          /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: 600, color: "gray.800", children: "Drag & drop or tap to upload" }),
+          /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", mt: 0.5, children: config.hint ?? "JPG, PNG or PDF" })
+        ] }),
+        /* @__PURE__ */ jsxs15(Flex8, { gap: 2, mt: 1, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx19(
+            GhostBtn,
+            {
+              icon: /* @__PURE__ */ jsx19(LuFolderOpen, { size: 13 }),
+              label: "Browse",
+              tone: "primary",
+              onClick: () => browseRef.current?.click()
+            }
+          ),
+          /* @__PURE__ */ jsx19(
+            GhostBtn,
+            {
+              icon: /* @__PURE__ */ jsx19(LuCamera, { size: 13 }),
+              label: "Take photo",
+              onClick: () => cameraRef.current?.click()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  const renderBusy = () => /* @__PURE__ */ jsxs15(Flex8, { gap: 3, align: "center", children: [
+    /* @__PURE__ */ jsx19(Thumb, { url: slot?.previewUrl, isPdf, fileName: slot?.fileName }),
+    /* @__PURE__ */ jsxs15(Box16, { flex: "1", minW: 0, children: [
+      /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName }),
+      status === "uploading" ? /* @__PURE__ */ jsxs15(Fragment3, { children: [
+        /* @__PURE__ */ jsxs15(
+          Flex8,
+          {
+            justify: "space-between",
+            fontSize: "xs",
+            color: "gray.500",
+            mt: 1,
+            mb: 1,
+            children: [
+              /* @__PURE__ */ jsx19(Text9, { children: "Uploading\u2026" }),
+              /* @__PURE__ */ jsxs15(Text9, { fontWeight: 600, children: [
+                slot?.progress ?? 0,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(ProgressBar, { value: slot?.progress ?? 0, color: "#2563EB" })
+      ] }) : /* @__PURE__ */ jsxs15(Flex8, { align: "center", gap: 2, mt: 1.5, children: [
+        /* @__PURE__ */ jsxs15(
+          Flex8,
+          {
+            align: "center",
+            gap: 1.5,
+            px: 2,
+            py: 1,
+            borderRadius: "md",
+            bg: "#F5F3FF",
+            color: "#7C3AED",
+            fontSize: "xs",
+            fontWeight: 600,
+            children: [
+              /* @__PURE__ */ jsx19(LuSparkles, { size: 12 }),
+              config.processor === "signature" ? "Cleaning signature\u2026" : "Reading with AI\u2026"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(Spinner, { size: "xs", color: "#7C3AED", borderWidth: "2px" })
+      ] }),
+      status === "processing" && /* @__PURE__ */ jsx19(Text9, { fontSize: "11px", color: "gray.400", mt: 1.5, children: "This can take a few seconds. Your upload is already saved." })
+    ] })
+  ] });
+  const renderFailed = () => /* @__PURE__ */ jsxs15(Box16, { children: [
+    /* @__PURE__ */ jsxs15(Flex8, { gap: 3, align: "flex-start", children: [
+      /* @__PURE__ */ jsx19(Thumb, { url: slot?.previewUrl, isPdf, fileName: slot?.fileName }),
+      /* @__PURE__ */ jsxs15(Box16, { flex: "1", minW: 0, children: [
+        /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName ?? config.label }),
+        /* @__PURE__ */ jsxs15(Flex8, { align: "flex-start", gap: 1.5, mt: 1, color: "#B91C1C", children: [
+          /* @__PURE__ */ jsx19(Box16, { mt: "1px", children: /* @__PURE__ */ jsx19(LuTriangleAlert, { size: 13 }) }),
+          /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", lineHeight: "1.4", children: slot?.error ?? "We couldn't process this document." })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs15(Flex8, { gap: 2, mt: 3, wrap: "wrap", children: [
+      slot?.file ? /* @__PURE__ */ jsx19(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ jsx19(LuRefreshCw, { size: 13 }),
+          label: "Retry",
+          tone: "primary",
+          onClick: () => void retryDocument()
+        }
+      ) : /* @__PURE__ */ jsx19(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ jsx19(LuUpload, { size: 13 }),
+          label: "Re-upload",
+          tone: "primary",
+          onClick: () => browseRef.current?.click()
+        }
+      ),
+      /* @__PURE__ */ jsx19(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ jsx19(LuReplace, { size: 13 }),
+          label: "Choose another",
+          onClick: () => browseRef.current?.click()
+        }
+      ),
+      /* @__PURE__ */ jsx19(
+        GhostBtn,
+        {
+          icon: /* @__PURE__ */ jsx19(LuTrash2, { size: 13 }),
+          label: "Remove",
+          tone: "danger",
+          onClick: () => removeDocument()
+        }
+      )
+    ] })
+  ] });
+  const renderCompleted = () => {
+    const isSignature = config.processor === "signature";
+    const fieldCount = slot?.extraction ? Object.values(slot.extraction).filter(Boolean).length : 0;
+    const displayUrl = isSignature ? slot?.cleanedImageUrl ?? slot?.previewUrl : slot?.previewUrl;
+    return /* @__PURE__ */ jsxs15(Box16, { children: [
+      /* @__PURE__ */ jsxs15(Flex8, { gap: 3, align: "center", children: [
+        /* @__PURE__ */ jsx19(
+          Thumb,
+          {
+            url: displayUrl,
+            isPdf: isPdf && !isSignature,
+            fileName: slot?.fileName,
+            transparent: isSignature && !!slot?.cleanedImageUrl
+          }
+        ),
+        /* @__PURE__ */ jsxs15(Box16, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ jsx19(Text9, { fontSize: "sm", fontWeight: 600, color: "gray.800", truncate: true, children: slot?.fileName }),
+          /* @__PURE__ */ jsx19(Text9, { fontSize: "xs", color: "gray.500", children: formatBytes(slot?.fileSize) }),
+          /* @__PURE__ */ jsxs15(
+            Flex8,
+            {
+              align: "center",
+              gap: 1.5,
+              mt: 1.5,
+              color: PRIMARY2,
+              fontSize: "xs",
+              fontWeight: 600,
+              children: [
+                /* @__PURE__ */ jsx19(LuSparkles, { size: 12 }),
+                isSignature ? "Signature detected & cleaned" : `${fieldCount} field${fieldCount === 1 ? "" : "s"} extracted`
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs15(Flex8, { gap: 2, mt: 3, wrap: "wrap", children: [
+        /* @__PURE__ */ jsx19(
+          GhostBtn,
+          {
+            icon: /* @__PURE__ */ jsx19(LuReplace, { size: 13 }),
+            label: "Replace",
+            onClick: () => browseRef.current?.click()
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          GhostBtn,
+          {
+            icon: /* @__PURE__ */ jsx19(LuTrash2, { size: 13 }),
+            label: "Remove",
+            tone: "danger",
+            onClick: () => removeDocument()
+          }
+        )
+      ] })
+    ] });
+  };
+  const requiredTag = /* @__PURE__ */ jsx19(
+    Text9,
+    {
+      fontSize: "10px",
+      fontWeight: 700,
+      px: 1.5,
+      py: 0.5,
+      borderRadius: "full",
+      color: config.required ? "#B45309" : "gray.500",
+      bg: config.required ? "#FEF3C7" : "gray.100",
+      flexShrink: 0,
+      children: config.required ? "REQUIRED" : "OPTIONAL"
+    }
+  );
+  const isMobile = useBreakpointValue2({ base: true, lg: false });
+  return /* @__PURE__ */ jsxs15(
+    Card,
+    {
+      activeIcon: /* @__PURE__ */ jsx19(Icon6, { size: 18 }),
+      title: config.label,
+      subtitle: config.description,
+      headerAction: !isMobile ? /* @__PURE__ */ jsxs15(Flex8, { align: "center", gap: 2, flexShrink: 0, children: [
+        requiredTag,
+        /* @__PURE__ */ jsx19(StatusPill, { status })
+      ] }) : /* @__PURE__ */ jsx19(Fragment3, {}),
+      children: [
+        isMobile ? /* @__PURE__ */ jsxs15(
+          Flex8,
+          {
+            align: "center",
+            justifySelf: "flex-end",
+            gap: 2,
+            mb: 1,
+            flexShrink: 0,
+            children: [
+              requiredTag,
+              /* @__PURE__ */ jsx19(StatusPill, { status })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx19(Fragment3, {}),
+        status === "idle" && renderDropzone(),
+        (status === "uploading" || status === "processing") && renderBusy(),
+        status === "failed" && renderFailed(),
+        status === "completed" && renderCompleted(),
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ref: browseRef,
+            type: "file",
+            accept: config.accept,
+            hidden: true,
+            onChange: (e) => {
+              handleFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ref: cameraRef,
+            type: "file",
+            accept: "image/*",
+            capture: "environment",
+            hidden: true,
+            onChange: (e) => {
+              handleFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/GetStarted/GetStarted.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var defaultNotify = (type, message) => {
+  if (type === "error") console.error(message);
+  else console.info(message);
+};
+var GOVERNMENT_ID_CONFIG = {
+  id: "government-id",
+  label: "Government-issued ID",
+  description: "Current and valid ID",
+  accept: "image/*",
+  maxSizeMB: 5,
+  required: true,
+  hint: "Any image \xB7 up to 5MB",
+  processor: "extraction",
+  icon: LuIdCard
+};
+var SIGNATURE_CONFIG = {
+  id: "specimen-signature",
+  label: "Specimen Signature",
+  description: "Signature on plain white paper",
+  accept: "image/png,image/jpeg,application/pdf",
+  maxSizeMB: 5,
+  required: true,
+  hint: "JPG, PNG or PDF \xB7 up to 5MB",
+  processor: "signature",
+  icon: LuSignature
+};
+var GetStarted = ({
+  scanId: scanIdFn,
+  onContinue,
+  notify = defaultNotify
+}) => {
+  const [uploadDialogOpen, setUploadDialogOpen] = useState14(false);
+  const [referralDialogOpen, setReferralDialogOpen] = useState14(false);
+  const [governmentIdStatus, setGovernmentIdStatus] = useState14("idle");
+  const { scanId } = useOcr(scanIdFn);
+  return /* @__PURE__ */ jsx20(Container_default, { children: /* @__PURE__ */ jsxs16(
+    Box17,
+    {
+      p: { base: 0, md: 8 },
+      rounded: "lg",
+      shadow: { base: "none", md: "md" },
+      bg: "white",
+      maxW: "3xl",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      mx: "auto",
+      children: [
+        /* @__PURE__ */ jsxs16(VStack7, { gap: 4, align: "stretch", children: [
+          /* @__PURE__ */ jsx20(Box17, { textAlign: "center", children: /* @__PURE__ */ jsx20(H32, { children: "Let's Get Started" }) }),
+          /* @__PURE__ */ jsx20(BaseText, { textAlign: { base: "center", md: "start" }, children: "We'll be needing some documents and information to proceed with the purchase, please prepare the following in advance to smooth out the next steps" }),
+          /* @__PURE__ */ jsx20(Box17, { bg: "gray.50", p: 8, rounded: "md", children: /* @__PURE__ */ jsx20(VStack7, { align: "start", gap: 2, children: /* @__PURE__ */ jsxs16(Box17, { mb: 4, display: "flex", flexDirection: "column", gap: 2, children: [
+            /* @__PURE__ */ jsx20(BaseText, { fontWeight: "bold", children: "Required Information" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "1. Full Name" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "2. Nationality" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "3. Mobile Number" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "4. Email Address" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "5. Date of Birth" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "6. Complete Address" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "7. Beneficiary/ies" }),
+            /* @__PURE__ */ jsx20(BaseText, { fontWeight: "bold", children: "Required Documents" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "1. Current and Valid Government-issued ID" }),
+            /* @__PURE__ */ jsx20(BaseText, { children: "2. Specimen Signature" })
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs16(Box17, { textAlign: "end", children: [
+          /* @__PURE__ */ jsxs16(
+            Dialog3.Root,
+            {
+              size: { mdDown: "full", md: "md" },
+              open: uploadDialogOpen,
+              onOpenChange: (details) => setUploadDialogOpen(details.open),
+              children: [
+                /* @__PURE__ */ jsx20(Dialog3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx20(
+                  Button3,
+                  {
+                    w: { base: "sm", md: "2xl" },
+                    mt: { base: 4, md: 8 },
+                    onClick: () => setUploadDialogOpen(true),
+                    children: "CONTINUE"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs16(Portal4, { children: [
+                  /* @__PURE__ */ jsx20(Dialog3.Backdrop, {}),
+                  /* @__PURE__ */ jsx20(Dialog3.Positioner, { children: /* @__PURE__ */ jsxs16(Dialog3.Content, { children: [
+                    /* @__PURE__ */ jsx20(Dialog3.Header, { children: /* @__PURE__ */ jsx20(Dialog3.Title, { children: "Upload Requirements" }) }),
+                    /* @__PURE__ */ jsx20(Dialog3.Body, { children: /* @__PURE__ */ jsxs16(VStack7, { gap: 6, align: "stretch", children: [
+                      /* @__PURE__ */ jsx20(info_card_default, { children: "To continue, please upload a valid ID. The system will use it to populate your information automatically." }),
+                      /* @__PURE__ */ jsx20(
+                        DocumentUploadCard,
+                        {
+                          config: GOVERNMENT_ID_CONFIG,
+                          onStatusChange: setGovernmentIdStatus,
+                          onProcess: scanId,
+                          onError: (message) => notify("error", message)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx20(
+                        DocumentUploadCard,
+                        {
+                          config: SIGNATURE_CONFIG,
+                          onError: (message) => notify("error", message)
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsxs16(Dialog3.Footer, { display: "flex", justifyContent: "space-between", children: [
+                      /* @__PURE__ */ jsx20(Dialog3.ActionTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(CancelButton2, {}) }),
+                      /* @__PURE__ */ jsx20(
+                        NextButton,
+                        {
+                          onClick: () => {
+                            if (governmentIdStatus === "uploading" || governmentIdStatus === "processing") {
+                              notify("info", "Please wait while we read your ID.");
+                              return;
+                            }
+                            if (governmentIdStatus !== "completed") {
+                              notify("error", "Please upload a government-issued ID.");
+                              return;
+                            }
+                            setUploadDialogOpen(false);
+                            setReferralDialogOpen(true);
+                          }
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx20(Dialog3.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(CloseButton3, { size: "sm" }) })
+                  ] }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            Dialog3.Root,
+            {
+              placement: "center",
+              open: referralDialogOpen,
+              onOpenChange: (details) => setReferralDialogOpen(details.open),
+              size: { mdDown: "full", md: "md" },
+              children: /* @__PURE__ */ jsxs16(Portal4, { children: [
+                /* @__PURE__ */ jsx20(Dialog3.Backdrop, {}),
+                /* @__PURE__ */ jsx20(Dialog3.Positioner, { children: /* @__PURE__ */ jsxs16(Dialog3.Content, { children: [
+                  /* @__PURE__ */ jsx20(Dialog3.Header, { children: /* @__PURE__ */ jsx20(Dialog3.Title, { children: "Referral Agent" }) }),
+                  /* @__PURE__ */ jsx20(Dialog3.Body, { children: /* @__PURE__ */ jsxs16(VStack7, { align: "stretch", gap: 4, children: [
+                    /* @__PURE__ */ jsx20(Body5, { children: "Do you have an referral agent? (optional)" }),
+                    /* @__PURE__ */ jsx20(Input4, { placeholder: "Enter agent name" })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs16(Dialog3.Footer, { display: "flex", justifyContent: "space-between", children: [
+                    /* @__PURE__ */ jsx20(
+                      Button3,
+                      {
+                        variant: "outline",
+                        onClick: () => {
+                          setReferralDialogOpen(false);
+                          onContinue?.();
+                        },
+                        children: "Skip"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx20(
+                      PrimaryMdButton3,
+                      {
+                        onClick: () => {
+                          setReferralDialogOpen(false);
+                          onContinue?.();
+                        },
+                        children: "Continue"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx20(Dialog3.CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(CloseButton3, { size: "sm" }) })
+                ] }) })
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+var GetStarted_default = GetStarted;
+
 // src/Generic/BottomQuickActions.tsx
-import React5 from "react";
+import React7 from "react";
 import {
-  Box as Box15,
+  Box as Box18,
   Drawer,
-  Portal as Portal4,
+  Portal as Portal5,
   HStack as HStack4,
-  VStack as VStack7,
-  Flex as Flex8,
+  VStack as VStack8,
+  Flex as Flex9,
   Icon as Icon4,
-  CloseButton as CloseButton3,
-  Text as Text9
+  CloseButton as CloseButton4,
+  Text as Text10
 } from "@chakra-ui/react";
 import { LuChevronRight as LuChevronRight2 } from "react-icons/lu";
 import Link from "next/link";
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var SHEET_BG = BRAND_COLORS.white;
 var DRAG_COLOR = BRAND_COLORS.neutralBorder;
 var ITEM_BG = BRAND_COLORS.white;
@@ -3613,14 +4485,14 @@ var SUBTITLE_COLOR = BRAND_COLORS.grey;
 var LABEL_COLOR = BRAND_COLORS.neutralText;
 var DESC_COLOR = BRAND_COLORS.grey;
 var CHEVRON_COLOR = BRAND_COLORS.ashWhite;
-var QuickActionsHeaderCard = React5.memo(
+var QuickActionsHeaderCard = React7.memo(
   ({
     initials,
     avatarBg = AVATAR_DEFAULT_BG,
     label,
     meta,
     trailing
-  }) => /* @__PURE__ */ jsxs15(
+  }) => /* @__PURE__ */ jsxs17(
     HStack4,
     {
       gap: STANDARD_SPACING.sm,
@@ -3631,8 +4503,8 @@ var QuickActionsHeaderCard = React5.memo(
       borderWidth: "1px",
       borderColor: HEADER_CARD_BORDER,
       children: [
-        initials && /* @__PURE__ */ jsx18(
-          Flex8,
+        initials && /* @__PURE__ */ jsx21(
+          Flex9,
           {
             w: "40px",
             h: "40px",
@@ -3641,8 +4513,8 @@ var QuickActionsHeaderCard = React5.memo(
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ jsx18(
-              Text9,
+            children: /* @__PURE__ */ jsx21(
+              Text10,
               {
                 fontSize: "14px",
                 fontWeight: "700",
@@ -3653,9 +4525,9 @@ var QuickActionsHeaderCard = React5.memo(
             )
           }
         ),
-        /* @__PURE__ */ jsxs15(Box15, { flex: "1", minW: 0, children: [
-          /* @__PURE__ */ jsx18(
-            Text9,
+        /* @__PURE__ */ jsxs17(Box18, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ jsx21(
+            Text10,
             {
               fontSize: "15px",
               fontWeight: "700",
@@ -3667,8 +4539,8 @@ var QuickActionsHeaderCard = React5.memo(
               children: label
             }
           ),
-          meta && /* @__PURE__ */ jsx18(
-            Text9,
+          meta && /* @__PURE__ */ jsx21(
+            Text10,
             {
               fontSize: "12px",
               color: SUBTITLE_COLOR,
@@ -3689,10 +4561,10 @@ var QuickActionsHeaderCard = React5.memo(
 var ITEM_TRANSITION = {
   transition: "background 0.15s ease, transform 0.1s ease"
 };
-var ActionItem = React5.memo(({ action }) => {
+var ActionItem = React7.memo(({ action }) => {
   const iconBg = action.iconBg ?? DEFAULT_ICON_BG;
   const iconColor = action.iconColor ?? DEFAULT_ICON_COLOR;
-  const inner = /* @__PURE__ */ jsxs15(
+  const inner = /* @__PURE__ */ jsxs17(
     HStack4,
     {
       gap: STANDARD_SPACING.sm,
@@ -3715,8 +4587,8 @@ var ActionItem = React5.memo(({ action }) => {
       _active: { bg: ITEM_ACTIVE_BG, transform: "scale(0.99)" },
       style: ITEM_TRANSITION,
       children: [
-        /* @__PURE__ */ jsx18(
-          Flex8,
+        /* @__PURE__ */ jsx21(
+          Flex9,
           {
             w: "40px",
             h: "40px",
@@ -3725,12 +4597,12 @@ var ActionItem = React5.memo(({ action }) => {
             align: "center",
             justify: "center",
             flexShrink: 0,
-            children: /* @__PURE__ */ jsx18(Icon4, { as: action.icon, boxSize: "20px", color: iconColor })
+            children: /* @__PURE__ */ jsx21(Icon4, { as: action.icon, boxSize: "20px", color: iconColor })
           }
         ),
-        /* @__PURE__ */ jsxs15(Box15, { flex: "1", minW: 0, children: [
-          /* @__PURE__ */ jsx18(
-            Text9,
+        /* @__PURE__ */ jsxs17(Box18, { flex: "1", minW: 0, children: [
+          /* @__PURE__ */ jsx21(
+            Text10,
             {
               fontSize: "15px",
               fontWeight: "600",
@@ -3739,8 +4611,8 @@ var ActionItem = React5.memo(({ action }) => {
               children: action.label
             }
           ),
-          action.description && /* @__PURE__ */ jsx18(
-            Text9,
+          action.description && /* @__PURE__ */ jsx21(
+            Text10,
             {
               fontSize: "12px",
               color: DESC_COLOR,
@@ -3753,7 +4625,7 @@ var ActionItem = React5.memo(({ action }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx21(
           Icon4,
           {
             as: LuChevronRight2,
@@ -3766,7 +4638,7 @@ var ActionItem = React5.memo(({ action }) => {
     }
   );
   if (action.href) {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx21(
       Link,
       {
         href: action.href,
@@ -3785,15 +4657,15 @@ var BottomQuickActions = ({
   headerSlot,
   actions
 }) => {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     Drawer.Root,
     {
       open,
       onOpenChange: (e) => onOpenChange(e.open),
       placement: "bottom",
-      children: /* @__PURE__ */ jsxs15(Portal4, { children: [
-        /* @__PURE__ */ jsx18(Drawer.Backdrop, {}),
-        /* @__PURE__ */ jsx18(Drawer.Positioner, { children: /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs17(Portal5, { children: [
+        /* @__PURE__ */ jsx21(Drawer.Backdrop, {}),
+        /* @__PURE__ */ jsx21(Drawer.Positioner, { children: /* @__PURE__ */ jsxs17(
           Drawer.Content,
           {
             borderTopRadius: "l3",
@@ -3804,8 +4676,8 @@ var BottomQuickActions = ({
             pb: `calc(${STANDARD_SPACING.sm} + env(safe-area-inset-bottom))`,
             boxShadow: STANDARD_SHADOWS.level4,
             children: [
-              /* @__PURE__ */ jsx18(Flex8, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ jsx18(
-                Box15,
+              /* @__PURE__ */ jsx21(Flex9, { justify: "center", pt: "10px", pb: "4px", children: /* @__PURE__ */ jsx21(
+                Box18,
                 {
                   w: "36px",
                   h: "4px",
@@ -3813,16 +4685,16 @@ var BottomQuickActions = ({
                   bg: DRAG_COLOR
                 }
               ) }),
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx21(
                 Drawer.Header,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: "12px",
                   pb: "0",
                   borderBottomWidth: "0",
-                  children: /* @__PURE__ */ jsxs15(Flex8, { align: "flex-start", justify: "space-between", gap: "12px", children: [
-                    /* @__PURE__ */ jsxs15(Box15, { flex: "1", minW: 0, children: [
-                      /* @__PURE__ */ jsx18(
+                  children: /* @__PURE__ */ jsxs17(Flex9, { align: "flex-start", justify: "space-between", gap: "12px", children: [
+                    /* @__PURE__ */ jsxs17(Box18, { flex: "1", minW: 0, children: [
+                      /* @__PURE__ */ jsx21(
                         Drawer.Title,
                         {
                           fontSize: "18px",
@@ -3833,8 +4705,8 @@ var BottomQuickActions = ({
                           children: title
                         }
                       ),
-                      subtitle && /* @__PURE__ */ jsx18(
-                        Text9,
+                      subtitle && /* @__PURE__ */ jsx21(
+                        Text10,
                         {
                           fontSize: "13px",
                           color: SUBTITLE_COLOR,
@@ -3845,8 +4717,8 @@ var BottomQuickActions = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx18(Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ jsx18(
-                      CloseButton3,
+                    /* @__PURE__ */ jsx21(Drawer.CloseTrigger, { asChild: true, mt: "2px", flexShrink: 0, children: /* @__PURE__ */ jsx21(
+                      CloseButton4,
                       {
                         size: "sm",
                         color: BRAND_COLORS.neutralText,
@@ -3857,15 +4729,15 @@ var BottomQuickActions = ({
                   ] })
                 }
               ),
-              /* @__PURE__ */ jsxs15(
+              /* @__PURE__ */ jsxs17(
                 Drawer.Body,
                 {
                   px: STANDARD_SPACING.sm,
                   pt: STANDARD_SPACING.sm,
                   pb: "4px",
                   children: [
-                    headerSlot && /* @__PURE__ */ jsx18(Box15, { mb: STANDARD_SPACING.xs, children: headerSlot }),
-                    /* @__PURE__ */ jsx18(VStack7, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ jsx18(ActionItem, { action }, i)) })
+                    headerSlot && /* @__PURE__ */ jsx21(Box18, { mb: STANDARD_SPACING.xs, children: headerSlot }),
+                    /* @__PURE__ */ jsx21(VStack8, { gap: STANDARD_SPACING.xs, align: "stretch", children: actions.map((action, i) => /* @__PURE__ */ jsx21(ActionItem, { action }, i)) })
                   ]
                 }
               )
@@ -3879,18 +4751,18 @@ var BottomQuickActions = ({
 var BottomQuickActions_default = BottomQuickActions;
 
 // src/Generic/NotifyInstall.tsx
-import { useEffect as useEffect8, useState as useState13 } from "react";
-import { Button as Button3, Flex as Flex9, HStack as HStack5, Icon as Icon5, Text as Text10, VStack as VStack8 } from "@chakra-ui/react";
+import { useEffect as useEffect9, useState as useState16 } from "react";
+import { Button as Button4, Flex as Flex10, HStack as HStack5, Icon as Icon5, Text as Text11, VStack as VStack9 } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "motion/react";
 import { FiDownload, FiPlusSquare, FiShare, FiX } from "react-icons/fi";
 
 // src/hooks/useNotifyInstall.ts
-import { useEffect as useEffect7, useState as useState12 } from "react";
+import { useEffect as useEffect8, useState as useState15 } from "react";
 function useNotifyInstall() {
-  const [isInstalled, setIsInstalled] = useState12(false);
-  const [isMobile, setIsMobile] = useState12(false);
-  const [installPrompt, setInstallPrompt] = useState12(null);
-  useEffect7(() => {
+  const [isInstalled, setIsInstalled] = useState15(false);
+  const [isMobile, setIsMobile] = useState15(false);
+  const [installPrompt, setInstallPrompt] = useState15(null);
+  useEffect8(() => {
     const mobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
     setIsMobile(mobile);
     const installed = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
@@ -3922,7 +4794,7 @@ function useNotifyInstall() {
 }
 
 // src/Generic/NotifyInstall.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 var STEPS = [
   { icon: FiShare, label: "Tap the browser menu or Share button" },
   { icon: FiPlusSquare, label: 'Choose "Add to Home Screen"' }
@@ -3933,8 +4805,8 @@ function NotifyInstall({
   appName
 }) {
   const { isInstalled, isMobile, canInstall, install } = useNotifyInstall();
-  const [isDismissed, setIsDismissed] = useState13(true);
-  useEffect8(() => {
+  const [isDismissed, setIsDismissed] = useState16(true);
+  useEffect9(() => {
     if (localStorage.getItem(DISMISSED_KEY) !== "true") {
       setIsDismissed(false);
     }
@@ -3944,10 +4816,10 @@ function NotifyInstall({
     setIsDismissed(true);
   };
   const showPrompt = isMobile && !isInstalled && !isDismissed;
-  return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
     children,
-    /* @__PURE__ */ jsx19(AnimatePresence, { children: showPrompt && /* @__PURE__ */ jsxs16(Fragment3, { children: [
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx22(AnimatePresence, { children: showPrompt && /* @__PURE__ */ jsxs18(Fragment4, { children: [
+      /* @__PURE__ */ jsx22(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -3966,7 +4838,7 @@ function NotifyInstall({
         },
         "install-backdrop"
       ),
-      /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs18(
         motion.div,
         {
           initial: { y: "100%" },
@@ -3985,7 +4857,7 @@ function NotifyInstall({
             paddingBottom: "env(safe-area-inset-bottom)"
           },
           children: [
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx22(
               "button",
               {
                 "aria-label": "Dismiss install prompt",
@@ -4004,12 +4876,12 @@ function NotifyInstall({
                   justifyContent: "center",
                   color: "#9ca3af"
                 },
-                children: /* @__PURE__ */ jsx19(FiX, { size: 18 })
+                children: /* @__PURE__ */ jsx22(FiX, { size: 18 })
               }
             ),
-            /* @__PURE__ */ jsxs16(VStack8, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
-              /* @__PURE__ */ jsx19(
-                Flex9,
+            /* @__PURE__ */ jsxs18(VStack9, { gap: 6, textAlign: "center", px: 6, py: 8, children: [
+              /* @__PURE__ */ jsx22(
+                Flex10,
                 {
                   boxSize: 16,
                   align: "center",
@@ -4018,12 +4890,12 @@ function NotifyInstall({
                   bg: "green.50",
                   color: "green.600",
                   shadow: "sm",
-                  children: /* @__PURE__ */ jsx19(Icon5, { as: FiDownload, boxSize: 8 })
+                  children: /* @__PURE__ */ jsx22(Icon5, { as: FiDownload, boxSize: 8 })
                 }
               ),
-              /* @__PURE__ */ jsxs16(VStack8, { gap: 2, children: [
-                /* @__PURE__ */ jsxs16(
-                  Text10,
+              /* @__PURE__ */ jsxs18(VStack9, { gap: 2, children: [
+                /* @__PURE__ */ jsxs18(
+                  Text11,
                   {
                     fontSize: "lg",
                     fontWeight: "bold",
@@ -4035,10 +4907,10 @@ function NotifyInstall({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx19(Text10, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
+                /* @__PURE__ */ jsx22(Text11, { fontSize: "sm", color: "gray.500", lineHeight: "tall", children: "Add the app to your home screen for a faster, app-like experience before continuing." })
               ] }),
-              canInstall ? /* @__PURE__ */ jsxs16(
-                Button3,
+              canInstall ? /* @__PURE__ */ jsxs18(
+                Button4,
                 {
                   onClick: install,
                   colorPalette: "green",
@@ -4046,12 +4918,12 @@ function NotifyInstall({
                   w: "full",
                   rounded: "xl",
                   children: [
-                    /* @__PURE__ */ jsx19(Icon5, { as: FiDownload }),
+                    /* @__PURE__ */ jsx22(Icon5, { as: FiDownload }),
                     "Add to Home Screen"
                   ]
                 }
-              ) : /* @__PURE__ */ jsx19(
-                VStack8,
+              ) : /* @__PURE__ */ jsx22(
+                VStack9,
                 {
                   w: "full",
                   bg: "gray.50",
@@ -4061,9 +4933,9 @@ function NotifyInstall({
                   p: 4,
                   gap: 4,
                   align: "stretch",
-                  children: STEPS.map((step, i) => /* @__PURE__ */ jsxs16(HStack5, { gap: 3, align: "center", children: [
-                    /* @__PURE__ */ jsx19(
-                      Flex9,
+                  children: STEPS.map((step, i) => /* @__PURE__ */ jsxs18(HStack5, { gap: 3, align: "center", children: [
+                    /* @__PURE__ */ jsx22(
+                      Flex10,
                       {
                         boxSize: 9,
                         flexShrink: 0,
@@ -4074,10 +4946,10 @@ function NotifyInstall({
                         borderWidth: "1px",
                         borderColor: "gray.200",
                         color: "green.600",
-                        children: /* @__PURE__ */ jsx19(Icon5, { as: step.icon, boxSize: 4 })
+                        children: /* @__PURE__ */ jsx22(Icon5, { as: step.icon, boxSize: 4 })
                       }
                     ),
-                    /* @__PURE__ */ jsx19(Text10, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
+                    /* @__PURE__ */ jsx22(Text11, { fontSize: "sm", color: "gray.700", textAlign: "left", children: step.label })
                   ] }, i))
                 }
               )
@@ -4091,21 +4963,21 @@ function NotifyInstall({
 }
 
 // src/UserProfile/UserProfile.tsx
-import { useEffect as useEffect9, useMemo, useState as useState14 } from "react";
+import { useEffect as useEffect10, useMemo, useState as useState17 } from "react";
 import {
   Avatar,
   Badge as Badge2,
-  Box as Box16,
-  Button as Button4,
-  Flex as Flex10,
+  Box as Box19,
+  Button as Button5,
+  Flex as Flex11,
   HStack as HStack6,
   IconButton as IconButton3,
-  Input as Input4,
+  Input as Input5,
   InputGroup,
   Separator as Separator3,
-  Text as Text11,
-  useBreakpointValue as useBreakpointValue2,
-  VStack as VStack9
+  Text as Text12,
+  useBreakpointValue as useBreakpointValue3,
+  VStack as VStack10
 } from "@chakra-ui/react";
 import {
   RiDashboardFill,
@@ -4128,7 +5000,7 @@ import {
   LuCreditCard,
   LuEye,
   LuEyeOff,
-  LuFileText,
+  LuFileText as LuFileText2,
   LuHouse,
   LuLock,
   LuMoon,
@@ -4149,7 +5021,7 @@ import { LiaHandHoldingUsdSolid } from "react-icons/lia";
 import { FaHandHoldingUsd } from "react-icons/fa";
 import { MdManageAccounts, MdOutlineManageAccounts } from "react-icons/md";
 import { IoLeaf, IoLeafOutline } from "react-icons/io5";
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var NAVBAR_STORAGE_KEY = "profile-navbar-quick-items";
 var FONT_SIZE_STORAGE_KEY = "profile-font-size-pref";
 var DEFAULT_NAV_HREFS = ["/", "/plans", "/pay-my-plan", "/claims"];
@@ -4192,8 +5064,8 @@ var ALL_NAV_OPTIONS = [
     key: "/claims",
     title: "Claim",
     href: "/claims",
-    Icon: LuFileText,
-    activeIcon: LuFileText,
+    Icon: LuFileText2,
+    activeIcon: LuFileText2,
     match: (p) => p.startsWith("/claims"),
     roles: ["branch", "bmstl", "sales-agent"]
   },
@@ -4447,28 +5319,28 @@ function ReusableProfile({
   onTwoFactorChange,
   onToast = noopToast
 }) {
-  const [profileView, setProfileView] = useState14("main");
-  const [fallbackColorMode, setFallbackColorMode] = useState14("light");
+  const [profileView, setProfileView] = useState17("main");
+  const [fallbackColorMode, setFallbackColorMode] = useState17("light");
   const colorMode = controlledColorMode ?? fallbackColorMode;
-  const [fontSize, setFontSizeLocal] = useState14("md");
-  const [quickNavHrefs, setQuickNavHrefs] = useState14(initialQuickNavHrefs);
-  const [replacingIdx, setReplacingIdx] = useState14(null);
-  const [editName, setEditName] = useState14(user.displayName);
-  const [editLoading, setEditLoading] = useState14(false);
-  const [currentPw, setCurrentPw] = useState14("");
-  const [newPw, setNewPw] = useState14("");
-  const [confirmPw, setConfirmPw] = useState14("");
-  const [showCurrentPw, setShowCurrentPw] = useState14(false);
-  const [showNewPw, setShowNewPw] = useState14(false);
-  const [showConfirmPw, setShowConfirmPw] = useState14(false);
-  const [pwLoading, setPwLoading] = useState14(false);
-  const [twoFactorEnabled, setTwoFactorEnabled] = useState14(
+  const [fontSize, setFontSizeLocal] = useState17("md");
+  const [quickNavHrefs, setQuickNavHrefs] = useState17(initialQuickNavHrefs);
+  const [replacingIdx, setReplacingIdx] = useState17(null);
+  const [editName, setEditName] = useState17(user.displayName);
+  const [editLoading, setEditLoading] = useState17(false);
+  const [currentPw, setCurrentPw] = useState17("");
+  const [newPw, setNewPw] = useState17("");
+  const [confirmPw, setConfirmPw] = useState17("");
+  const [showCurrentPw, setShowCurrentPw] = useState17(false);
+  const [showNewPw, setShowNewPw] = useState17(false);
+  const [showConfirmPw, setShowConfirmPw] = useState17(false);
+  const [pwLoading, setPwLoading] = useState17(false);
+  const [twoFactorEnabled, setTwoFactorEnabled] = useState17(
     initialTwoFactorEnabled
   );
-  const [isMounted, setIsMounted] = useState14(false);
-  const isDesktopRaw = useBreakpointValue2({ base: false, md: true });
+  const [isMounted, setIsMounted] = useState17(false);
+  const isDesktopRaw = useBreakpointValue3({ base: false, md: true });
   const isDesktop = isMounted ? isDesktopRaw ?? false : false;
-  useEffect9(() => {
+  useEffect10(() => {
     setIsMounted(true);
     if (!enableLocalStorage || typeof window === "undefined") return;
     setFontSizeLocal(localStorage.getItem(FONT_SIZE_STORAGE_KEY) ?? "md");
@@ -4479,7 +5351,7 @@ function ReusableProfile({
       setQuickNavHrefs(initialQuickNavHrefs);
     }
   }, [enableLocalStorage, initialQuickNavHrefs, storageKey]);
-  useEffect9(() => {
+  useEffect10(() => {
     setEditName(user.displayName);
   }, [user.displayName]);
   const availableOptions = useMemo(
@@ -4610,9 +5482,9 @@ function ReusableProfile({
     }
   };
   const roleLabel = user.role ? ROLE_LABELS[user.role] ?? user.role : "";
-  const mainContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsxs17(
-      Box16,
+  const mainContent = /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsxs19(
+      Box19,
       {
         bg: "var(--chakra-colors-primary)",
         pt: 12,
@@ -4620,7 +5492,7 @@ function ReusableProfile({
         px: 4,
         textAlign: "center",
         children: [
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs19(
             Avatar.Root,
             {
               size: "2xl",
@@ -4628,13 +5500,13 @@ function ReusableProfile({
               mb: 4,
               colorPalette: pickPalette(user.displayName || "U"),
               children: [
-                user.avatarSrc && /* @__PURE__ */ jsx20(Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
-                /* @__PURE__ */ jsx20(Avatar.Fallback, { name: user.displayName })
+                user.avatarSrc && /* @__PURE__ */ jsx23(Avatar.Image, { src: user.avatarSrc, alt: user.displayName }),
+                /* @__PURE__ */ jsx23(Avatar.Fallback, { name: user.displayName })
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(
-            Text11,
+          /* @__PURE__ */ jsx23(
+            Text12,
             {
               color: "white",
               fontWeight: "bold",
@@ -4644,8 +5516,8 @@ function ReusableProfile({
               children: user.displayName
             }
           ),
-          user.email && /* @__PURE__ */ jsx20(Text11, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
-          roleLabel && /* @__PURE__ */ jsx20(Box16, { display: "inline-flex", children: /* @__PURE__ */ jsx20(
+          user.email && /* @__PURE__ */ jsx23(Text12, { color: "rgba(255,255,255,0.75)", fontSize: "sm", mb: 2, children: user.email }),
+          roleLabel && /* @__PURE__ */ jsx23(Box19, { display: "inline-flex", children: /* @__PURE__ */ jsx23(
             Badge2,
             {
               bg: "rgba(255,255,255,0.15)",
@@ -4662,9 +5534,9 @@ function ReusableProfile({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 5, pb: 1, children: [
-      /* @__PURE__ */ jsx20(
-        Text11,
+    /* @__PURE__ */ jsxs19(Box19, { px: 4, pt: 5, pb: 1, children: [
+      /* @__PURE__ */ jsx23(
+        Text12,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4675,8 +5547,8 @@ function ReusableProfile({
           children: "Account"
         }
       ),
-      /* @__PURE__ */ jsx20(
-        Box16,
+      /* @__PURE__ */ jsx23(
+        Box19,
         {
           as: "button",
           w: "full",
@@ -4684,8 +5556,8 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("edit-account"),
-          children: /* @__PURE__ */ jsxs17(
-            Flex10,
+          children: /* @__PURE__ */ jsxs19(
+            Flex11,
             {
               justify: "space-between",
               align: "center",
@@ -4694,9 +5566,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "edit-account" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx20(
-                    Box16,
+                /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx23(
+                    Box19,
                     {
                       w: "38px",
                       h: "38px",
@@ -4707,23 +5579,23 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx20(LuUser, { size: 16 })
+                      children: /* @__PURE__ */ jsx23(LuUser, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box16, { children: [
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
+                  /* @__PURE__ */ jsxs19(Box19, { children: [
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Edit Account" }),
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "gray.500", children: "Update your display name and contact details" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ jsx23(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx20(Separator3, {}),
-      /* @__PURE__ */ jsx20(
-        Box16,
+      /* @__PURE__ */ jsx23(Separator3, {}),
+      /* @__PURE__ */ jsx23(
+        Box19,
         {
           as: "button",
           w: "full",
@@ -4734,8 +5606,8 @@ function ReusableProfile({
             resetPasswordForm();
             setProfileView("change-password");
           },
-          children: /* @__PURE__ */ jsxs17(
-            Flex10,
+          children: /* @__PURE__ */ jsxs19(
+            Flex11,
             {
               justify: "space-between",
               align: "center",
@@ -4744,9 +5616,9 @@ function ReusableProfile({
               borderRadius: "lg",
               bg: isDesktop && profileView === "change-password" ? "gray.100" : void 0,
               children: [
-                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx20(
-                    Box16,
+                /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx23(
+                    Box19,
                     {
                       w: "38px",
                       h: "38px",
@@ -4757,25 +5629,25 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "gray.600",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx20(LuLock, { size: 16 })
+                      children: /* @__PURE__ */ jsx23(LuLock, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box16, { children: [
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
+                  /* @__PURE__ */ jsxs19(Box19, { children: [
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Change Password" }),
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "gray.500", children: "Test locally through the callback prop" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+                /* @__PURE__ */ jsx23(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx20(Separator3, {}),
-      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx20(
-            Box16,
+      /* @__PURE__ */ jsx23(Separator3, {}),
+      /* @__PURE__ */ jsxs19(Flex11, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx23(
+            Box19,
             {
               w: "38px",
               h: "38px",
@@ -4786,16 +5658,16 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: /* @__PURE__ */ jsx20(LuShield, { size: 16 })
+              children: /* @__PURE__ */ jsx23(LuShield, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box16, { children: [
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
+          /* @__PURE__ */ jsxs19(Box19, { children: [
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Two Factor Authentication" }),
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "gray.500", children: twoFactorEnabled ? "Enabled" : "Disabled" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx20(
-          Box16,
+        /* @__PURE__ */ jsx23(
+          Box19,
           {
             role: "switch",
             "aria-checked": twoFactorEnabled,
@@ -4817,8 +5689,8 @@ function ReusableProfile({
             cursor: "pointer",
             flexShrink: 0,
             outline: "none",
-            children: /* @__PURE__ */ jsx20(
-              Box16,
+            children: /* @__PURE__ */ jsx23(
+              Box19,
               {
                 position: "absolute",
                 top: "3px",
@@ -4835,9 +5707,9 @@ function ReusableProfile({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 4, pb: 2, children: [
-      /* @__PURE__ */ jsx20(
-        Text11,
+    /* @__PURE__ */ jsxs19(Box19, { px: 4, pt: 4, pb: 2, children: [
+      /* @__PURE__ */ jsx23(
+        Text12,
         {
           fontSize: "xs",
           fontWeight: "bold",
@@ -4848,10 +5720,10 @@ function ReusableProfile({
           children: "Preferences"
         }
       ),
-      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx20(
-            Box16,
+      /* @__PURE__ */ jsxs19(Flex11, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx23(
+            Box19,
             {
               w: "38px",
               h: "38px",
@@ -4862,18 +5734,18 @@ function ReusableProfile({
               justifyContent: "center",
               color: "gray.600",
               flexShrink: 0,
-              children: colorMode === "dark" ? /* @__PURE__ */ jsx20(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx20(LuSun, { size: 16 })
+              children: colorMode === "dark" ? /* @__PURE__ */ jsx23(LuMoon, { size: 16 }) : /* @__PURE__ */ jsx23(LuSun, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs17(Box16, { children: [
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
+          /* @__PURE__ */ jsxs19(Box19, { children: [
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Appearance" }),
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "gray.500", children: colorMode === "light" ? "Light mode" : "Dark mode" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx20(HStack6, { gap: 1.5, children: ["light", "dark"].map((mode) => {
+        /* @__PURE__ */ jsx23(HStack6, { gap: 1.5, children: ["light", "dark"].map((mode) => {
           const isActive = colorMode === mode;
-          return /* @__PURE__ */ jsxs17(
-            Button4,
+          return /* @__PURE__ */ jsxs19(
+            Button5,
             {
               size: "sm",
               variant: "outline",
@@ -4888,9 +5760,9 @@ function ReusableProfile({
               },
               onClick: () => handleColorMode(mode),
               children: [
-                mode === "light" ? /* @__PURE__ */ jsx20(LuSun, { size: 13 }) : /* @__PURE__ */ jsx20(LuMoon, { size: 13 }),
-                /* @__PURE__ */ jsx20(
-                  Text11,
+                mode === "light" ? /* @__PURE__ */ jsx23(LuSun, { size: 13 }) : /* @__PURE__ */ jsx23(LuMoon, { size: 13 }),
+                /* @__PURE__ */ jsx23(
+                  Text12,
                   {
                     fontSize: "xs",
                     textTransform: "capitalize",
@@ -4904,11 +5776,11 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx20(Separator3, {}),
-      /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
-        /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-          /* @__PURE__ */ jsx20(
-            Box16,
+      /* @__PURE__ */ jsx23(Separator3, {}),
+      /* @__PURE__ */ jsxs19(Flex11, { justify: "space-between", align: "center", py: 3, children: [
+        /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx23(
+            Box19,
             {
               w: "38px",
               h: "38px",
@@ -4924,15 +5796,15 @@ function ReusableProfile({
               children: "A"
             }
           ),
-          /* @__PURE__ */ jsxs17(Box16, { children: [
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
-            /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
+          /* @__PURE__ */ jsxs19(Box19, { children: [
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Text Size" }),
+            /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "gray.500", children: fontSizeLabel })
           ] })
         ] }),
-        /* @__PURE__ */ jsx20(HStack6, { gap: 1, children: FONT_SIZES.map((option) => {
+        /* @__PURE__ */ jsx23(HStack6, { gap: 1, children: FONT_SIZES.map((option) => {
           const isActive = fontSize === option.value;
-          return /* @__PURE__ */ jsx20(
-            Button4,
+          return /* @__PURE__ */ jsx23(
+            Button5,
             {
               size: "sm",
               variant: "outline",
@@ -4947,8 +5819,8 @@ function ReusableProfile({
               },
               onClick: () => handleFontSize(option.value),
               title: option.title,
-              children: /* @__PURE__ */ jsx20(
-                Text11,
+              children: /* @__PURE__ */ jsx23(
+                Text12,
                 {
                   fontWeight: isActive ? "bold" : "normal",
                   style: { fontSize: `${option.scale * 13}px` },
@@ -4960,9 +5832,9 @@ function ReusableProfile({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx20(Separator3, {}),
-      /* @__PURE__ */ jsx20(
-        Box16,
+      /* @__PURE__ */ jsx23(Separator3, {}),
+      /* @__PURE__ */ jsx23(
+        Box19,
         {
           as: "button",
           w: "full",
@@ -4970,10 +5842,10 @@ function ReusableProfile({
           _hover: { opacity: 0.7 },
           transition: "opacity 0.15s",
           onClick: () => setProfileView("navbar-customize"),
-          children: /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 3, children: [
-            /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ jsx20(
-                Box16,
+          children: /* @__PURE__ */ jsxs19(Flex11, { justify: "space-between", align: "center", py: 3, children: [
+            /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ jsx23(
+                Box19,
                 {
                   w: "38px",
                   h: "38px",
@@ -4984,12 +5856,12 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: "gray.600",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 16 })
+                  children: /* @__PURE__ */ jsx23(LuArrowLeftRight, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsxs17(Box16, { children: [
-                /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
-                /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", children: [
+              /* @__PURE__ */ jsxs19(Box19, { children: [
+                /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "semibold", children: "Quick Navigation" }),
+                /* @__PURE__ */ jsxs19(Text12, { fontSize: "xs", color: "gray.500", children: [
                   quickNavHrefs.length,
                   " of ",
                   maxQuickNavItems,
@@ -4997,13 +5869,13 @@ function ReusableProfile({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsx20(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
+            /* @__PURE__ */ jsx23(LuChevronRight3, { size: 16, color: "var(--chakra-colors-gray-400)" })
           ] })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx20(VStack9, { gap: 2.5, children: /* @__PURE__ */ jsx20(
-      Button4,
+    /* @__PURE__ */ jsx23(Box19, { px: 4, pt: 4, pb: 10, children: /* @__PURE__ */ jsx23(VStack10, { gap: 2.5, children: /* @__PURE__ */ jsx23(
+      Button5,
       {
         w: "full",
         variant: "outline",
@@ -5015,9 +5887,9 @@ function ReusableProfile({
       }
     ) }) })
   ] });
-  const editAccountContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ jsx20(
+  const editAccountContent = /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx23(Box19, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ jsx23(
         IconButton3,
         {
           size: "sm",
@@ -5025,20 +5897,20 @@ function ReusableProfile({
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
+          children: /* @__PURE__ */ jsx23(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx20(Text11, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
+      /* @__PURE__ */ jsx23(Text12, { fontWeight: "bold", fontSize: "md", children: "Edit Account" })
     ] }) }),
-    /* @__PURE__ */ jsx20(Box16, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ jsxs17(Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
-      user.avatarSrc && /* @__PURE__ */ jsx20(Avatar.Image, { src: user.avatarSrc, alt: editName }),
-      /* @__PURE__ */ jsx20(Avatar.Fallback, { name: editName })
+    /* @__PURE__ */ jsx23(Box19, { textAlign: "center", pt: 5, pb: 4, children: /* @__PURE__ */ jsxs19(Avatar.Root, { size: "xl", mx: "auto", mb: 1, children: [
+      user.avatarSrc && /* @__PURE__ */ jsx23(Avatar.Image, { src: user.avatarSrc, alt: editName }),
+      /* @__PURE__ */ jsx23(Avatar.Fallback, { name: editName })
     ] }) }),
-    /* @__PURE__ */ jsxs17(VStack9, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
-        /* @__PURE__ */ jsx20(
-          Input4,
+    /* @__PURE__ */ jsxs19(VStack10, { gap: 4, px: 4, pb: 10, align: "stretch", children: [
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Display Name" }),
+        /* @__PURE__ */ jsx23(
+          Input5,
           {
             value: editName,
             onChange: (event) => setEditName(event.target.value),
@@ -5047,10 +5919,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
-        /* @__PURE__ */ jsx20(
-          Input4,
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Email" }),
+        /* @__PURE__ */ jsx23(
+          Input5,
           {
             value: user.email ?? "",
             readOnly: true,
@@ -5060,10 +5932,10 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
-        /* @__PURE__ */ jsx20(
-          Input4,
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Mobile Number" }),
+        /* @__PURE__ */ jsx23(
+          Input5,
           {
             value: user.mobileNumber ?? "",
             readOnly: true,
@@ -5073,8 +5945,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx20(
-        Button4,
+      /* @__PURE__ */ jsx23(
+        Button5,
         {
           w: "full",
           mt: 2,
@@ -5088,9 +5960,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const changePasswordContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx20(Box16, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
-      /* @__PURE__ */ jsx20(
+  const changePasswordContent = /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx23(Box19, { px: 4, pt: 4, pb: 3, borderBottomWidth: "1px", borderColor: "gray.200", children: /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 2, pr: 10, children: [
+      /* @__PURE__ */ jsx23(
         IconButton3,
         {
           size: "sm",
@@ -5098,18 +5970,18 @@ function ReusableProfile({
           "aria-label": "Back",
           color: "gray.600",
           onClick: () => setProfileView("main"),
-          children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
+          children: /* @__PURE__ */ jsx23(LuChevronLeft2, {})
         }
       ),
-      /* @__PURE__ */ jsx20(Text11, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
+      /* @__PURE__ */ jsx23(Text12, { fontWeight: "bold", fontSize: "md", children: "Change Password" })
     ] }) }),
-    /* @__PURE__ */ jsxs17(VStack9, { gap: 5, px: 4, pt: 6, pb: 10, children: [
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
-        /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsxs19(VStack10, { gap: 5, px: 4, pt: 6, pb: 10, children: [
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Current Password" }),
+        /* @__PURE__ */ jsx23(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx20(
+            endElement: /* @__PURE__ */ jsx23(
               IconButton3,
               {
                 size: "xs",
@@ -5117,11 +5989,11 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle current password visibility",
                 onClick: () => setShowCurrentPw(!showCurrentPw),
-                children: showCurrentPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
+                children: showCurrentPw ? /* @__PURE__ */ jsx23(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx23(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx20(
-              Input4,
+            children: /* @__PURE__ */ jsx23(
+              Input5,
               {
                 type: showCurrentPw ? "text" : "password",
                 value: currentPw,
@@ -5133,12 +6005,12 @@ function ReusableProfile({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
-        /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "New Password" }),
+        /* @__PURE__ */ jsx23(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx20(
+            endElement: /* @__PURE__ */ jsx23(
               IconButton3,
               {
                 size: "xs",
@@ -5146,11 +6018,11 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle new password visibility",
                 onClick: () => setShowNewPw(!showNewPw),
-                children: showNewPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
+                children: showNewPw ? /* @__PURE__ */ jsx23(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx23(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx20(
-              Input4,
+            children: /* @__PURE__ */ jsx23(
+              Input5,
               {
                 type: showNewPw ? "text" : "password",
                 value: newPw,
@@ -5161,9 +6033,9 @@ function ReusableProfile({
             )
           }
         ),
-        newPw && /* @__PURE__ */ jsxs17(Box16, { mt: 2, children: [
-          /* @__PURE__ */ jsx20(Flex10, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx20(
-            Box16,
+        newPw && /* @__PURE__ */ jsxs19(Box19, { mt: 2, children: [
+          /* @__PURE__ */ jsx23(Flex11, { gap: 1, mb: 1, children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx23(
+            Box19,
             {
               flex: 1,
               h: "3px",
@@ -5173,15 +6045,15 @@ function ReusableProfile({
             },
             i
           )) }),
-          /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
+          /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: pwMeta.color, fontWeight: "medium", children: pwMeta.label })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-        /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
-        /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+        /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", fontWeight: "semibold", color: "gray.500", mb: 1.5, children: "Confirm New Password" }),
+        /* @__PURE__ */ jsx23(
           InputGroup,
           {
-            endElement: /* @__PURE__ */ jsx20(
+            endElement: /* @__PURE__ */ jsx23(
               IconButton3,
               {
                 size: "xs",
@@ -5189,11 +6061,11 @@ function ReusableProfile({
                 color: "gray.500",
                 "aria-label": "Toggle confirm password visibility",
                 onClick: () => setShowConfirmPw(!showConfirmPw),
-                children: showConfirmPw ? /* @__PURE__ */ jsx20(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx20(LuEye, { size: 15 })
+                children: showConfirmPw ? /* @__PURE__ */ jsx23(LuEyeOff, { size: 15 }) : /* @__PURE__ */ jsx23(LuEye, { size: 15 })
               }
             ),
-            children: /* @__PURE__ */ jsx20(
-              Input4,
+            children: /* @__PURE__ */ jsx23(
+              Input5,
               {
                 type: showConfirmPw ? "text" : "password",
                 value: confirmPw,
@@ -5204,10 +6076,10 @@ function ReusableProfile({
             )
           }
         ),
-        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx20(Text11, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
+        confirmPw && confirmPw !== newPw && /* @__PURE__ */ jsx23(Text12, { fontSize: "xs", color: "red.500", mt: 1, children: "Passwords do not match" })
       ] }),
-      /* @__PURE__ */ jsx20(
-        Button4,
+      /* @__PURE__ */ jsx23(
+        Button5,
         {
           w: "full",
           mt: 1,
@@ -5222,9 +6094,9 @@ function ReusableProfile({
       )
     ] })
   ] });
-  const navbarCustomizeContent = /* @__PURE__ */ jsxs17(Fragment4, { children: [
-    /* @__PURE__ */ jsx20(
-      Box16,
+  const navbarCustomizeContent = /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    /* @__PURE__ */ jsx23(
+      Box19,
       {
         px: 4,
         pt: 4,
@@ -5235,8 +6107,8 @@ function ReusableProfile({
         top: 0,
         bg: "bg",
         zIndex: 1,
-        children: /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 2, pr: 10, children: [
-          /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 2, pr: 10, children: [
+          /* @__PURE__ */ jsx23(
             IconButton3,
             {
               size: "sm",
@@ -5247,12 +6119,12 @@ function ReusableProfile({
                 setReplacingIdx(null);
                 setProfileView("main");
               },
-              children: /* @__PURE__ */ jsx20(LuChevronLeft2, {})
+              children: /* @__PURE__ */ jsx23(LuChevronLeft2, {})
             }
           ),
-          /* @__PURE__ */ jsxs17(Box16, { children: [
-            /* @__PURE__ */ jsx20(Text11, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
-            /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", children: [
+          /* @__PURE__ */ jsxs19(Box19, { children: [
+            /* @__PURE__ */ jsx23(Text12, { fontWeight: "bold", fontSize: "md", children: "Quick Navigation" }),
+            /* @__PURE__ */ jsxs19(Text12, { fontSize: "xs", color: "gray.500", children: [
               "Choose up to ",
               maxQuickNavItems,
               " shortcuts for the bottom bar"
@@ -5261,10 +6133,10 @@ function ReusableProfile({
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 5, pb: 2, children: [
-      /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
-        /* @__PURE__ */ jsx20(
-          Text11,
+    /* @__PURE__ */ jsxs19(Box19, { px: 4, pt: 5, pb: 2, children: [
+      /* @__PURE__ */ jsxs19(Flex11, { align: "center", justify: "space-between", mb: 3, children: [
+        /* @__PURE__ */ jsx23(
+          Text12,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -5274,8 +6146,8 @@ function ReusableProfile({
             children: "Pinned"
           }
         ),
-        /* @__PURE__ */ jsxs17(
-          Text11,
+        /* @__PURE__ */ jsxs19(
+          Text12,
           {
             fontSize: "xs",
             color: quickNavHrefs.length >= maxQuickNavItems ? "orange.500" : "gray.400",
@@ -5288,8 +6160,8 @@ function ReusableProfile({
           }
         )
       ] }),
-      quickNavHrefs.length === 0 ? /* @__PURE__ */ jsx20(
-        Flex10,
+      quickNavHrefs.length === 0 ? /* @__PURE__ */ jsx23(
+        Flex11,
         {
           align: "center",
           justify: "center",
@@ -5298,18 +6170,18 @@ function ReusableProfile({
           borderWidth: "1px",
           borderStyle: "dashed",
           borderColor: "gray.200",
-          children: /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
+          children: /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", color: "gray.400", children: "No items pinned \u2014 add from below" })
         }
-      ) : /* @__PURE__ */ jsx20(VStack9, { gap: 0, children: quickNavHrefs.map((href, idx) => {
+      ) : /* @__PURE__ */ jsx23(VStack10, { gap: 0, children: quickNavHrefs.map((href, idx) => {
         const option = availableOptions.find((item) => item.key === href);
         if (!option) return null;
         const ItemIcon = option.Icon;
         const isFirst = idx === 0;
         const isLast = idx === quickNavHrefs.length - 1;
         const isReplacing = replacingIdx === idx;
-        return /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-          /* @__PURE__ */ jsxs17(
-            Flex10,
+        return /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+          /* @__PURE__ */ jsxs19(
+            Flex11,
             {
               justify: "space-between",
               align: "center",
@@ -5321,9 +6193,9 @@ function ReusableProfile({
               borderColor: isReplacing ? "orange.200" : void 0,
               transition: "all 0.15s",
               children: [
-                /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-                  /* @__PURE__ */ jsx20(
-                    Box16,
+                /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+                  /* @__PURE__ */ jsx23(
+                    Box19,
                     {
                       w: "36px",
                       h: "36px",
@@ -5334,13 +6206,13 @@ function ReusableProfile({
                       justifyContent: "center",
                       color: "white",
                       flexShrink: 0,
-                      children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
+                      children: /* @__PURE__ */ jsx23(ItemIcon, { size: 15 })
                     }
                   ),
-                  /* @__PURE__ */ jsxs17(Box16, { children: [
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", fontWeight: "medium", children: option.title }),
-                    isReplacing && /* @__PURE__ */ jsx20(
-                      Text11,
+                  /* @__PURE__ */ jsxs19(Box19, { children: [
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", fontWeight: "medium", children: option.title }),
+                    isReplacing && /* @__PURE__ */ jsx23(
+                      Text12,
                       {
                         fontSize: "xs",
                         color: "orange.500",
@@ -5350,8 +6222,8 @@ function ReusableProfile({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs17(HStack6, { gap: 0.5, children: [
-                  /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsxs19(HStack6, { gap: 0.5, children: [
+                  /* @__PURE__ */ jsx23(
                     IconButton3,
                     {
                       size: "xs",
@@ -5360,10 +6232,10 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isFirst || isReplacing,
                       onClick: () => moveNavItem(idx, -1),
-                      children: /* @__PURE__ */ jsx20(LuChevronUp3, { size: 14 })
+                      children: /* @__PURE__ */ jsx23(LuChevronUp3, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx23(
                     IconButton3,
                     {
                       size: "xs",
@@ -5372,10 +6244,10 @@ function ReusableProfile({
                       color: "gray.500",
                       disabled: isLast || isReplacing,
                       onClick: () => moveNavItem(idx, 1),
-                      children: /* @__PURE__ */ jsx20(LuChevronDown3, { size: 14 })
+                      children: /* @__PURE__ */ jsx23(LuChevronDown3, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx23(
                     IconButton3,
                     {
                       size: "xs",
@@ -5385,10 +6257,10 @@ function ReusableProfile({
                       color: isReplacing ? "white" : "gray.500",
                       _hover: { bg: isReplacing ? "orange.500" : "gray.100" },
                       onClick: () => setReplacingIdx(isReplacing ? null : idx),
-                      children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
+                      children: /* @__PURE__ */ jsx23(LuArrowLeftRight, { size: 13 })
                     }
                   ),
-                  /* @__PURE__ */ jsx20(
+                  /* @__PURE__ */ jsx23(
                     IconButton3,
                     {
                       size: "xs",
@@ -5398,23 +6270,23 @@ function ReusableProfile({
                       _hover: { bg: "red.50" },
                       disabled: isReplacing,
                       onClick: () => removeNavItem(href),
-                      children: /* @__PURE__ */ jsx20(LuX, { size: 14 })
+                      children: /* @__PURE__ */ jsx23(LuX, { size: 14 })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !isLast && /* @__PURE__ */ jsx20(Separator3, {})
+          !isLast && /* @__PURE__ */ jsx23(Separator3, {})
         ] }, href);
       }) })
     ] }),
-    /* @__PURE__ */ jsx20(Separator3, { mx: 4, my: 1 }),
-    /* @__PURE__ */ jsxs17(Box16, { px: 4, pt: 4, pb: 10, children: [
-      /* @__PURE__ */ jsxs17(Flex10, { align: "center", justify: "space-between", mb: 3, children: [
-        replacingIdx !== null ? /* @__PURE__ */ jsxs17(Box16, { children: [
-          /* @__PURE__ */ jsx20(
-            Text11,
+    /* @__PURE__ */ jsx23(Separator3, { mx: 4, my: 1 }),
+    /* @__PURE__ */ jsxs19(Box19, { px: 4, pt: 4, pb: 10, children: [
+      /* @__PURE__ */ jsxs19(Flex11, { align: "center", justify: "space-between", mb: 3, children: [
+        replacingIdx !== null ? /* @__PURE__ */ jsxs19(Box19, { children: [
+          /* @__PURE__ */ jsx23(
+            Text12,
             {
               fontSize: "xs",
               fontWeight: "bold",
@@ -5424,15 +6296,15 @@ function ReusableProfile({
               children: "Select Replacement"
             }
           ),
-          /* @__PURE__ */ jsxs17(Text11, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
+          /* @__PURE__ */ jsxs19(Text12, { fontSize: "xs", color: "gray.500", mt: 0.5, children: [
             'for "',
             availableOptions.find(
               (item) => item.key === quickNavHrefs[replacingIdx]
             )?.title,
             '"'
           ] })
-        ] }) : /* @__PURE__ */ jsx20(
-          Text11,
+        ] }) : /* @__PURE__ */ jsx23(
+          Text12,
           {
             fontSize: "xs",
             fontWeight: "bold",
@@ -5442,8 +6314,8 @@ function ReusableProfile({
             children: "Available"
           }
         ),
-        replacingIdx !== null && /* @__PURE__ */ jsx20(
-          Button4,
+        replacingIdx !== null && /* @__PURE__ */ jsx23(
+          Button5,
           {
             size: "xs",
             variant: "ghost",
@@ -5453,17 +6325,17 @@ function ReusableProfile({
           }
         )
       ] }),
-      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx20(VStack9, { gap: 0, children: unpinnedOptions.map((option, idx) => {
+      unpinnedOptions.length === 0 ? /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", color: "gray.400", py: 3, textAlign: "center", children: "All available items are pinned" }) : /* @__PURE__ */ jsx23(VStack10, { gap: 0, children: unpinnedOptions.map((option, idx) => {
         const ItemIcon = option.Icon;
         const isLast = idx === unpinnedOptions.length - 1;
         const isReplacingMode = replacingIdx !== null;
         const canAdd = quickNavHrefs.length < maxQuickNavItems;
         const actionEnabled = isReplacingMode || canAdd;
-        return /* @__PURE__ */ jsxs17(Box16, { w: "full", children: [
-          /* @__PURE__ */ jsxs17(Flex10, { justify: "space-between", align: "center", py: 2.5, children: [
-            /* @__PURE__ */ jsxs17(Flex10, { align: "center", gap: 3, children: [
-              /* @__PURE__ */ jsx20(
-                Box16,
+        return /* @__PURE__ */ jsxs19(Box19, { w: "full", children: [
+          /* @__PURE__ */ jsxs19(Flex11, { justify: "space-between", align: "center", py: 2.5, children: [
+            /* @__PURE__ */ jsxs19(Flex11, { align: "center", gap: 3, children: [
+              /* @__PURE__ */ jsx23(
+                Box19,
                 {
                   w: "36px",
                   h: "36px",
@@ -5474,11 +6346,11 @@ function ReusableProfile({
                   justifyContent: "center",
                   color: isReplacingMode ? "orange.500" : "gray.500",
                   flexShrink: 0,
-                  children: /* @__PURE__ */ jsx20(ItemIcon, { size: 15 })
+                  children: /* @__PURE__ */ jsx23(ItemIcon, { size: 15 })
                 }
               ),
-              /* @__PURE__ */ jsx20(
-                Text11,
+              /* @__PURE__ */ jsx23(
+                Text12,
                 {
                   fontSize: "sm",
                   fontWeight: "medium",
@@ -5487,7 +6359,7 @@ function ReusableProfile({
                 }
               )
             ] }),
-            isReplacingMode ? /* @__PURE__ */ jsx20(
+            isReplacingMode ? /* @__PURE__ */ jsx23(
               IconButton3,
               {
                 size: "xs",
@@ -5497,9 +6369,9 @@ function ReusableProfile({
                 color: "orange.500",
                 _hover: { bg: "orange.50" },
                 onClick: () => replaceNavItem(replacingIdx, option.key),
-                children: /* @__PURE__ */ jsx20(LuArrowLeftRight, { size: 13 })
+                children: /* @__PURE__ */ jsx23(LuArrowLeftRight, { size: 13 })
               }
-            ) : /* @__PURE__ */ jsx20(
+            ) : /* @__PURE__ */ jsx23(
               IconButton3,
               {
                 size: "xs",
@@ -5510,19 +6382,19 @@ function ReusableProfile({
                 color: canAdd ? "var(--chakra-colors-primary)" : "gray.300",
                 _hover: { bg: canAdd ? "blue.50" : "transparent" },
                 onClick: () => addNavItem(option.key),
-                children: /* @__PURE__ */ jsx20(LuPlus, { size: 13 })
+                children: /* @__PURE__ */ jsx23(LuPlus, { size: 13 })
               }
             )
           ] }),
-          !isLast && /* @__PURE__ */ jsx20(Separator3, {})
+          !isLast && /* @__PURE__ */ jsx23(Separator3, {})
         ] }, option.key);
       }) })
     ] })
   ] });
   const subViewContent = profileView === "edit-account" ? editAccountContent : profileView === "change-password" ? changePasswordContent : profileView === "navbar-customize" ? navbarCustomizeContent : null;
   if (isDesktop) {
-    return /* @__PURE__ */ jsxs17(
-      Flex10,
+    return /* @__PURE__ */ jsxs19(
+      Flex11,
       {
         maxW: "6xl",
         mx: "auto",
@@ -5532,8 +6404,8 @@ function ReusableProfile({
         p: { md: 6, lg: 8 },
         align: "start",
         children: [
-          /* @__PURE__ */ jsx20(
-            Box16,
+          /* @__PURE__ */ jsx23(
+            Box19,
             {
               w: { md: "300px", lg: "340px" },
               flexShrink: 0,
@@ -5547,8 +6419,8 @@ function ReusableProfile({
               children: mainContent
             }
           ),
-          /* @__PURE__ */ jsx20(
-            Box16,
+          /* @__PURE__ */ jsx23(
+            Box19,
             {
               flex: "1",
               minW: 0,
@@ -5558,8 +6430,8 @@ function ReusableProfile({
               overflow: "hidden",
               bg: "bg",
               minH: "540px",
-              children: subViewContent ?? /* @__PURE__ */ jsxs17(
-                Flex10,
+              children: subViewContent ?? /* @__PURE__ */ jsxs19(
+                Flex11,
                 {
                   direction: "column",
                   align: "center",
@@ -5569,8 +6441,8 @@ function ReusableProfile({
                   textAlign: "center",
                   color: "gray.400",
                   children: [
-                    /* @__PURE__ */ jsx20(
-                      Box16,
+                    /* @__PURE__ */ jsx23(
+                      Box19,
                       {
                         w: "56px",
                         h: "56px",
@@ -5580,10 +6452,10 @@ function ReusableProfile({
                         alignItems: "center",
                         justifyContent: "center",
                         mb: 4,
-                        children: /* @__PURE__ */ jsx20(LuUser, { size: 24 })
+                        children: /* @__PURE__ */ jsx23(LuUser, { size: 24 })
                       }
                     ),
-                    /* @__PURE__ */ jsx20(Text11, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
+                    /* @__PURE__ */ jsx23(Text12, { fontSize: "sm", mt: 1, maxW: "280px", children: "Choose Edit Account, Change Password, or Quick Navigation from the menu to update your details here." })
                   ]
                 }
               )
@@ -5593,12 +6465,14 @@ function ReusableProfile({
       }
     );
   }
-  return /* @__PURE__ */ jsx20(Box16, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
+  return /* @__PURE__ */ jsx23(Box19, { maxW: "480px", mx: "auto", w: "full", minH: "100%", bg: "bg", children: profileView === "main" ? mainContent : subViewContent });
 }
 var UserProfile_default = ReusableProfile;
 export {
   beneficiary_default as Beneficiary,
   BottomQuickActions_default as BottomQuickActions,
+  DocumentUploadCard,
+  GetStarted_default as GetStarted,
   HealthDeclaration_default as HealthDeclaration,
   LifePlanApplication1_default as LifePlanApplication1,
   LifePlanApplication2_default as LifePlanApplication2,
@@ -5609,10 +6483,13 @@ export {
   OCR_STORAGE_KEY,
   SharedLifePlanApplication_default as SharedLifePlanApplication,
   UserProfile_default as UserProfile,
+  clearOcrResult,
   createEmptyApplicationData,
   loadApplicationDataFromLocalStorage,
   markOcrApplied,
   readOcrResult,
-  saveApplicationDataToLocalStorage
+  saveApplicationDataToLocalStorage,
+  saveOcrResult,
+  useOcr
 };
 //# sourceMappingURL=index.mjs.map