@northslopetech/altitude-ui 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/index.js

@@ -71,6 +71,15 @@ __export(index_exports, {
   CogIcon: () => CogIcon,
   CredentialsIcon: () => CredentialsIcon,
   DatePicker: () => DatePicker,
+  Dialog: () => Dialog,
+  DialogBody: () => DialogBody,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogOverlay: () => DialogOverlay,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
   DocumentIcon: () => DocumentIcon,
   DollarIcon: () => DollarIcon,
   DownloadIcon: () => DownloadIcon,
@@ -115,6 +124,16 @@ __export(index_exports, {
   HomeIcon: () => HomeIcon,
   InformationIcon: () => InformationIcon,
   Input: () => Input,
+  Item: () => Item2,
+  ItemActions: () => ItemActions,
+  ItemContent: () => ItemContent,
+  ItemDescription: () => ItemDescription,
+  ItemFooter: () => ItemFooter,
+  ItemGroup: () => ItemGroup,
+  ItemHeader: () => ItemHeader,
+  ItemMedia: () => ItemMedia,
+  ItemSeparator: () => ItemSeparator,
+  ItemTitle: () => ItemTitle,
   Label: () => Label2,
   LineChart: () => LineChart,
   LocationIcon: () => LocationIcon,
@@ -194,6 +213,8 @@ __export(index_exports, {
   getPerformanceColor: () => getPerformanceColor,
   getSeriesColor: () => getSeriesColor,
   initializePdfWorker: () => initializePdfWorker,
+  itemMediaVariants: () => itemMediaVariants,
+  itemVariants: () => itemVariants,
   selectTriggerVariants: () => selectTriggerVariants,
   switchVariants: () => switchVariants,
   tabsVariants: () => tabsVariants,
@@ -224,68 +245,62 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
   {
     variants: {
       variant: {
-        default: "bg-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
-        outline: "bg-light text-dark border border-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
-        destructive: "bg-error text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
-        "destructive-subtle": "bg-light text-error border border-secondary shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
-        ghost: "bg-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
-        link: "bg-light text-dark underline underline-offset-4 hover:cursor-pointer active:text-info"
+        default: "interactive-default interactive-default-fg border border-default shadow-sm hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default focus-visible:border-strong",
+        primary: "interactive-accent interactive-accent-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default",
+        destructive: "interactive-destructive interactive-destructive-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-3 focus-visible:ring-focus-error",
+        ghost: "interactive-default interactive-default-fg hover:brightness-[90%] dark:hover:brightness-[130%] active:brightness-[80%] dark:active:brightness-[120%] focus-visible:ring-2 focus-visible:ring-focus-default",
+        link: "h-6 px-0 py-0 rounded-sm text-default underline underline-offset-2 focus-visible:ring-2 focus-visible:ring-focus-default"
       },
       size: {
-        sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
-        default: "h-10 rounded-lg px-3 py-2 min-w-[125px]",
-        lg: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
-        icon: "h-10 w-10 rounded-lg"
+        default: "h-9 rounded-md px-4 py-2 type-label-sm-medium",
+        lg: "h-10 rounded-md px-4 py-2.5 type-label-md-medium",
+        sm: "h-8 rounded-sm px-3 py-1.5 type-label-sm-medium",
+        mini: "h-6 rounded-sm px-2 py-1 type-label-xs-medium"
       }
     },
-    compoundVariants: [],
+    compoundVariants: [
+      {
+        variant: "link",
+        size: ["default", "sm"],
+        className: "type-body-sm-regular hover:type-body-sm-semibold active:type-body-sm-semibold"
+      },
+      {
+        variant: "link",
+        size: "lg",
+        className: "type-body-md-regular hover:type-body-md-semibold active:type-body-md-semibold"
+      },
+      {
+        variant: "link",
+        size: "mini",
+        className: "type-body-xs-regular hover:type-body-xs-semibold active:type-body-xs-semibold"
+      }
+    ],
     defaultVariants: {
       variant: "default",
       size: "default"
     }
   }
 );
-function getButtonTypographyStyles(size) {
-  switch (size) {
-    case "sm":
-      return { font: "var(--typography-label-sm-bold)" };
-    case "lg":
-      return { font: "var(--typography-label-lg-bold)" };
-    case "icon":
-    case "default":
-    default:
-      return { font: "var(--typography-label-md-bold)" };
-  }
-}
+var hasTextChildren = (children) => React.Children.toArray(children).some(
+  (child) => typeof child === "string" && child.trim().length > 0
+);
 var Button = React.forwardRef(
-  ({
-    className,
-    style,
-    variant,
-    size,
-    icon,
-    iconPosition = "left",
-    children,
-    ...props
-  }, ref) => {
-    const typographyStyles = getButtonTypographyStyles(size);
-    const tokenStyles = {
-      ...typographyStyles,
-      ...style
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  ({ className, style, variant, size, children, ...props }, ref) => {
+    const isIconOnly = !hasTextChildren(children);
+    const iconOnlyClasses = isIconOnly ? "aspect-square px-0 py-0" : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_button.Button,
       {
         "data-slot": "button",
-        className: cn(buttonVariants({ variant, size }), className),
-        style: tokenStyles,
+        className: cn(
+          buttonVariants({ variant, size }),
+          iconOnlyClasses,
+          className
+        ),
+        style,
         ref,
         ...props,
-        children: [
-          icon && iconPosition === "left" && icon,
-          children,
-          icon && iconPosition === "right" && icon
-        ]
+        children
       }
     );
   }
@@ -851,30 +866,29 @@ var import_react = require("react");
 var import_class_variance_authority6 = require("class-variance-authority");
 
 // src/components/ui/label.tsx
-var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var React7 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Label2({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    LabelPrimitive.Root,
-    {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
+var labelClasses = "type-label-sm-medium flex flex-row items-center gap-2 text-default select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50";
+var Label2 = React7.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "label",
+      {
+        ref,
+        "data-slot": "label",
+        className: cn(labelClasses, className),
+        ...props
+      }
+    );
+  }
+);
+Label2.displayName = "Label";
 
 // src/components/ui/separator.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_separator = require("@base-ui/react/separator");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Separator2 = React7.forwardRef(
+var Separator2 = React8.forwardRef(
   ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_separator.Separator,
     {
@@ -1102,13 +1116,136 @@ function FieldError({
   );
 }
 
+// src/components/ui/dialog.tsx
+var React9 = __toESM(require("react"));
+var import_dialog = require("@base-ui/react/dialog");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DialogChromeContext = React9.createContext(null);
+function useDialogChrome() {
+  return React9.useContext(DialogChromeContext) ?? { showCloseButton: false };
+}
+var DialogCloseControl = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  import_dialog.Dialog.Close,
+  {
+    ref,
+    type: "button",
+    className: cn(
+      "shrink-0 rounded-md p-1 text-secondary transition-colors",
+      "hover:bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, { size: 16, "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+DialogCloseControl.displayName = "DialogCloseControl";
+var DIALOG_DESKTOP_FRAME = "h-[480px] w-[640px] max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)]";
+var DIALOG_MOBILE_FRAME = "w-[320px] min-h-[240px] max-w-[calc(100vw-2rem)] max-h-[min(640px,calc(100dvh-2rem))] overflow-x-hidden [&_input]:!min-w-0";
+var Dialog = import_dialog.Dialog.Root;
+var DialogTrigger = import_dialog.Dialog.Trigger;
+var DialogOverlay = React9.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      ref,
+      className: cn(
+        "fixed inset-0 z-40 bg-dark/60 backdrop-blur-sm data-[hidden]:animate-out data-[hidden]:fade-out-0 data-[open]:animate-in data-[open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React9.forwardRef(
+  ({ className, children, showCloseButton = true, size = "desktop", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_dialog.Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_dialog.Dialog.Viewport, { className: "fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:items-center sm:p-6", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_dialog.Dialog.Popup,
+      {
+        ref,
+        "data-slot": "dialog",
+        className: cn(
+          "relative my-auto flex flex-col overflow-hidden rounded-[10px] border border-default surface-default shadow-lg outline-none focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
+          size === "desktop" && DIALOG_DESKTOP_FRAME,
+          size === "mobile" && DIALOG_MOBILE_FRAME,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogChromeContext.Provider, { value: { showCloseButton }, children })
+      }
+    ) })
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogBody = React9.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-body",
+      className: cn(
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain p-6",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React9.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "shrink-0 flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end sm:gap-2",
+        className
+      ),
+      ...props
+    }
+  )
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React9.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { showCloseButton } = useDialogChrome();
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "shrink-0 flex items-center justify-between p-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_dialog.Dialog.Title,
+        {
+          ref,
+          className: cn("type-h4-medium text-default", className),
+          ...props,
+          children
+        }
+      ),
+      showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogCloseControl, {}) : null
+    ] });
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  import_dialog.Dialog.Description,
+  {
+    ref,
+    className: cn("type-body-sm-regular text-secondary", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = import_dialog.Dialog.Close;
+
 // src/components/ui/breadcrumb.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_merge_props = require("@base-ui/react/merge-props");
 var import_use_render = require("@base-ui/react/use-render");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Breadcrumb = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Breadcrumb = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "nav",
     {
       "aria-label": "breadcrumb",
@@ -1120,8 +1257,8 @@ var Breadcrumb = React8.forwardRef(
   )
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var BreadcrumbList = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "ol",
     {
       "data-slot": "breadcrumb-list",
@@ -1135,8 +1272,8 @@ var BreadcrumbList = React8.forwardRef(
   )
 );
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var BreadcrumbItem = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "li",
     {
       "data-slot": "breadcrumb-item",
@@ -1147,7 +1284,7 @@ var BreadcrumbItem = React8.forwardRef(
   )
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React8.forwardRef(
+var BreadcrumbLink = React10.forwardRef(
   ({ className, render, ...props }, ref) => (0, import_use_render.useRender)({
     ref,
     defaultTagName: "a",
@@ -1164,8 +1301,8 @@ var BreadcrumbLink = React8.forwardRef(
   })
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var BreadcrumbPage = React10.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "span",
     {
       "data-slot": "breadcrumb-page",
@@ -1179,7 +1316,7 @@ var BreadcrumbPage = React8.forwardRef(
   )
 );
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = React8.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var BreadcrumbSeparator = React10.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   "li",
   {
     "data-slot": "breadcrumb-separator",
@@ -1188,11 +1325,11 @@ var BreadcrumbSeparator = React8.forwardRef(({ children, className, ...props },
     className: cn("[&>svg]:size-3.5", className),
     ref,
     ...props,
-    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CaretRightIcon, { className: "cn-rtl-flip" })
+    children: children ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CaretRightIcon, { className: "cn-rtl-flip" })
   }
 ));
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var BreadcrumbEllipsis = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
   "span",
   {
     "data-slot": "breadcrumb-ellipsis",
@@ -1205,22 +1342,22 @@ var BreadcrumbEllipsis = React8.forwardRef(({ className, ...props }, ref) => /*
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MoreMenuIcon, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "More" })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MoreMenuIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "More" })
     ]
   }
 ));
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/ui/tooltip.tsx
-var React9 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -1231,11 +1368,11 @@ function TooltipProvider({
 }
 TooltipProvider.displayName = "TooltipProvider";
 function Tooltip({ delayDuration, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
 }
 Tooltip.displayName = "Tooltip";
-var TooltipTrigger = React9.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var TooltipTrigger = React11.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     TooltipPrimitive.Trigger,
     {
       ref,
@@ -1245,8 +1382,8 @@ var TooltipTrigger = React9.forwardRef(({ ...props }, ref) => {
   );
 });
 TooltipTrigger.displayName = "TooltipTrigger";
-var TooltipContent = React9.forwardRef(({ className, sideOffset = 2, children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+var TooltipContent = React11.forwardRef(({ className, sideOffset = 2, children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -1258,7 +1395,7 @@ var TooltipContent = React9.forwardRef(({ className, sideOffset = 2, children, .
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Arrow, { className: "fill-dark", width: 10, height: 9 }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipPrimitive.Arrow, { className: "fill-dark", width: 10, height: 9 }),
         children
       ]
     }
@@ -1267,21 +1404,21 @@ var TooltipContent = React9.forwardRef(({ className, sideOffset = 2, children, .
 TooltipContent.displayName = "TooltipContent";
 
 // src/components/ui/sidebar.tsx
-var React10 = __toESM(require("react"));
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var React12 = __toESM(require("react"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SIDEBAR_CONSTANTS = {
   WIDTH: "144px",
   WIDTH_ICON: "48px"
 };
-var SidebarContext = React10.createContext(null);
+var SidebarContext = React12.createContext(null);
 function useSidebar() {
-  const context = React10.useContext(SidebarContext);
+  const context = React12.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React10.forwardRef(
+var SidebarProvider = React12.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -1291,9 +1428,9 @@ var SidebarProvider = React10.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [_open, _setOpen] = React10.useState(defaultOpen);
+    const [_open, _setOpen] = React12.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React10.useCallback(
+    const setOpen = React12.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -1304,11 +1441,11 @@ var SidebarProvider = React10.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React10.useCallback(() => {
+    const toggleSidebar = React12.useCallback(() => {
       return setOpen((open2) => !open2);
     }, [setOpen]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React10.useMemo(
+    const contextValue = React12.useMemo(
       () => ({
         state,
         open,
@@ -1317,7 +1454,7 @@ var SidebarProvider = React10.forwardRef(
       }),
       [state, open, setOpen, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         style: {
@@ -1337,10 +1474,10 @@ var SidebarProvider = React10.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React10.forwardRef(
+var Sidebar = React12.forwardRef(
   ({ collapsible = "icon", className, children, ...props }, ref) => {
     const { state } = useSidebar();
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "aside",
       {
         ref,
@@ -1351,7 +1488,7 @@ var Sidebar = React10.forwardRef(
         "aria-expanded": state === "expanded",
         role: "navigation",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               className: cn(
@@ -1360,7 +1497,7 @@ var Sidebar = React10.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               className: cn(
@@ -1369,7 +1506,7 @@ var Sidebar = React10.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -1385,9 +1522,9 @@ var Sidebar = React10.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarInset = React10.forwardRef(
+var SidebarInset = React12.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "main",
       {
         ref,
@@ -1401,9 +1538,9 @@ var SidebarInset = React10.forwardRef(
   }
 );
 SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React10.forwardRef(
+var SidebarHeader = React12.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -1419,9 +1556,9 @@ var SidebarHeader = React10.forwardRef(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React10.forwardRef(
+var SidebarFooter = React12.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -1433,9 +1570,9 @@ var SidebarFooter = React10.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarContent = React10.forwardRef(
+var SidebarContent = React12.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -1450,9 +1587,9 @@ var SidebarContent = React10.forwardRef(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React10.forwardRef(
+var SidebarGroup = React12.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -1464,7 +1601,7 @@ var SidebarGroup = React10.forwardRef(
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupContent = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var SidebarGroupContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "div",
   {
     ref,
@@ -1474,8 +1611,8 @@ var SidebarGroupContent = React10.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var SidebarMenu = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "ul",
     {
       ref,
@@ -1486,8 +1623,8 @@ var SidebarMenu = React10.forwardRef(
   )
 );
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var SidebarMenuItem = React12.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "li",
     {
       ref,
@@ -1498,9 +1635,9 @@ var SidebarMenuItem = React10.forwardRef(
   )
 );
 SidebarMenuItem.displayName = "SidebarMenuItem";
-var SidebarMenuButton = React10.forwardRef(({ isActive = false, tooltip, className, children, ...props }, ref) => {
+var SidebarMenuButton = React12.forwardRef(({ isActive = false, tooltip, className, children, ...props }, ref) => {
   const { state } = useSidebar();
-  const button = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       ref,
@@ -1519,22 +1656,22 @@ var SidebarMenuButton = React10.forwardRef(({ isActive = false, tooltip, classNa
     return button;
   }
   const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { delayDuration: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { side: "right", align: "center", ...tooltipProps })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { delayDuration: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { side: "right", align: "center", ...tooltipProps })
   ] });
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
 
 // src/components/ui/date-picker.tsx
-var React12 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
 
 // src/components/ui/input.tsx
-var React11 = __toESM(require("react"));
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var React13 = __toESM(require("react"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var inputBaseStyles = "flex h-10 py-2 w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors rounded-md px-3 min-w-80 placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent border-secondary focus-visible:border-2 focus-visible:border-strong disabled:border-secondary aria-invalid:border-error aria-invalid:focus-visible:border-error";
-var Input = React11.forwardRef(
+var Input = React13.forwardRef(
   ({
     className,
     style,
@@ -1545,7 +1682,7 @@ var Input = React11.forwardRef(
     readOnly,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React11.useState(value || "");
+    const [internalValue, setInternalValue] = React13.useState(value || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const showClear = showClearProp !== false && currentValue && currentValue.toString().length > 0 && !readOnly;
@@ -1575,8 +1712,8 @@ var Input = React11.forwardRef(
       }
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "input",
         {
           className: cn(
@@ -1592,23 +1729,23 @@ var Input = React11.forwardRef(
           ...props
         }
       ),
-      showClear && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      showClear && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
           onClick: handleClear,
           className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary hover:text-dark transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, {})
         }
       ),
-      showLock && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LockIcon, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-secondary" })
+      showLock && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LockIcon, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-secondary" })
     ] });
   }
 );
 Input.displayName = "Input";
 
 // src/components/ui/date-picker.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var getDayNames = () => {
   const days = [];
   for (let i = 0; i < 7; i++) {
@@ -1644,7 +1781,7 @@ var formatDateInput = (date) => {
     day: "2-digit"
   });
 };
-var DatePicker = React12.forwardRef(
+var DatePicker = React14.forwardRef(
   ({
     value,
     onValueChange,
@@ -1663,19 +1800,19 @@ var DatePicker = React12.forwardRef(
       if (isNaN(parsed.getTime())) return void 0;
       return parsed;
     };
-    const [selectedDate, setSelectedDate] = React12.useState(
+    const [selectedDate, setSelectedDate] = React14.useState(
       value || parseDate(defaultValue)
     );
-    const [currentMonth, setCurrentMonth] = React12.useState(() => {
+    const [currentMonth, setCurrentMonth] = React14.useState(() => {
       const date = value || parseDate(defaultValue) || /* @__PURE__ */ new Date();
       return new Date(date.getFullYear(), date.getMonth());
     });
-    const [open, setOpen] = React12.useState(false);
-    const [inputValue, setInputValue] = React12.useState(() => {
+    const [open, setOpen] = React14.useState(false);
+    const [inputValue, setInputValue] = React14.useState(() => {
       const initialDate = value || parseDate(defaultValue);
       return initialDate ? formatDateInput(initialDate) : "";
     });
-    React12.useEffect(() => {
+    React14.useEffect(() => {
       setSelectedDate(value);
       if (value) {
         setCurrentMonth(new Date(value.getFullYear(), value.getMonth()));
@@ -1686,7 +1823,7 @@ var DatePicker = React12.forwardRef(
         setInputValue("");
       }
     }, [value]);
-    React12.useEffect(() => {
+    React14.useEffect(() => {
       if (value) return;
       const parsedDefault = parseDate(defaultValue);
       if (!parsedDefault) return;
@@ -1809,14 +1946,14 @@ var DatePicker = React12.forwardRef(
     const months = getMonthNames();
     const dayNames = getDayNames();
     const years = generateYears();
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       PopoverPrimitive.Root,
       {
         open: disabled ? false : open,
         onOpenChange: disabled ? void 0 : setOpen,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Input,
               {
                 ref,
@@ -1829,7 +1966,7 @@ var DatePicker = React12.forwardRef(
                 ...props
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 hover:bg-gray rounded p-0.5 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               CalendarIcon,
               {
                 size: 20,
@@ -1840,7 +1977,7 @@ var DatePicker = React12.forwardRef(
               }
             ) }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             PopoverPrimitive.Content,
             {
               className: "z-50 w-80 rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -1849,51 +1986,51 @@ var DatePicker = React12.forwardRef(
               alignOffset: -12,
               side: "bottom",
               sticky: "always",
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "p-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between mb-4 gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       onClick: () => handleMonthChange("prev"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArrowLeftIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowLeftIcon, {})
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-1 flex-1 min-w-0", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-1 flex-1 min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                       Select,
                       {
                         value: currentMonth.getMonth().toString(),
                         onValueChange: handleMonthSelect,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectValue, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectItem, { value: index.toString(), children: month }, month)) })
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectValue, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectContent, { children: months.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItem, { value: index.toString(), children: month }, month)) })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                       Select,
                       {
                         value: currentMonth.getFullYear().toString(),
                         onValueChange: handleYearSelect,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectValue, {}) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectContent, { children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectItem, { value: year.toString(), children: year }, year)) })
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectTrigger, { className: "min-w-fit h-8 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectValue, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectContent, { children: years.map((year) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectItem, { value: year.toString(), children: year }, year)) })
                         ]
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       onClick: () => handleMonthChange("next"),
                       className: "p-1 hover:bg-gray rounded transition-colors flex-shrink-0",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ArrowRightIcon, {})
+                      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowRightIcon, {})
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Typography,
                     {
                       variant: "label-xs-bold",
@@ -1903,11 +2040,11 @@ var DatePicker = React12.forwardRef(
                     },
                     day
                   )) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "div",
                     {
                       className: "h-8 w-8 flex items-center justify-center",
-                      children: date && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      children: date && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         "button",
                         {
                           onClick: () => handleDateSelect(date),
@@ -1921,7 +2058,7 @@ var DatePicker = React12.forwardRef(
                             isToday(date) && !isDateSelected(date) && !isDateDisabled(date) && "text-blue-600 after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-blue-600 after:rounded-full",
                             isDateDisabled(date) && "text-secondary/40 cursor-not-allowed opacity-50"
                           ),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
                         }
                       )
                     },
@@ -1939,9 +2076,9 @@ var DatePicker = React12.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/components/ui/upload.tsx
-var React13 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 var uploadVariants = (0, import_class_variance_authority7.cva)(
   "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
@@ -1965,7 +2102,7 @@ var uploadVariants = (0, import_class_variance_authority7.cva)(
     }
   }
 );
-var Upload = React13.forwardRef(
+var Upload = React15.forwardRef(
   ({
     className,
     onFileSelect,
@@ -1978,8 +2115,8 @@ var Upload = React13.forwardRef(
     selectedFiles = [],
     ...props
   }, ref) => {
-    const fileInputRef = React13.useRef(null);
-    const [isDragOver, setIsDragOver] = React13.useState(false);
+    const fileInputRef = React15.useRef(null);
+    const [isDragOver, setIsDragOver] = React15.useState(false);
     const getFileTypeDisplay = () => {
       const typeMap = {
         "application/pdf": "PDF",
@@ -2043,17 +2180,17 @@ var Upload = React13.forwardRef(
     const renderContent = () => {
       switch (effectiveState) {
         case "error":
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "heading-lg", children: "Upload fail" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "heading-lg", children: "Upload fail" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   Button,
                   {
                     variant: "destructive",
@@ -2067,22 +2204,22 @@ var Upload = React13.forwardRef(
             }
           );
         case "uploading":
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "heading-lg", className: "text-dark", children: "Uploading files" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "heading-lg", className: "text-dark", children: "Uploading files" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
                       className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
                       style: { width: `${progress}%` }
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                     Typography,
                     {
                       variant: "body-sm",
@@ -2098,29 +2235,29 @@ var Upload = React13.forwardRef(
             }
           );
         case "success":
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "heading-lg", className: "text-success", children: "Upload successful!" }),
-                selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "heading-lg", className: "text-success", children: "Upload successful!" }),
+                selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
               ] })
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             "div",
             {
               className: "flex flex-col items-center text-center max-w-[289px]",
               style: { gap: "32px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "heading-lg", className: "text-dark", children: "Drag & drop files here" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "heading-lg", className: "text-dark", children: "Drag & drop files here" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   Button,
                   {
                     variant: "default",
@@ -2134,10 +2271,10 @@ var Upload = React13.forwardRef(
                     children: "Choose files"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
                   "Supported file: ",
                   getFileTypeDisplay(),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("br", {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("br", {}),
                   "Max: ",
                   Math.round(maxFileSize / 1024 / 1024),
                   " MB each"
@@ -2147,7 +2284,7 @@ var Upload = React13.forwardRef(
           );
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         ref,
@@ -2171,7 +2308,7 @@ var Upload = React13.forwardRef(
         "aria-disabled": disabled,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -2191,29 +2328,75 @@ var Upload = React13.forwardRef(
 Upload.displayName = "Upload";
 
 // src/components/ui/checkbox.tsx
-var React14 = __toESM(require("react"));
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var React16 = __toESM(require("react"));
+var import_checkbox = require("@base-ui/react/checkbox");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var checkboxVariants = (0, import_class_variance_authority8.cva)(
-  "peer size-4 shrink-0 rounded-[4px] border bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:shrink-0 border-strong focus-visible:border-interactive aria-invalid:border-error aria-invalid:focus-visible:border-error"
-);
-var Checkbox = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  CheckboxPrimitive.Root,
-  {
-    ref,
-    className: cn(checkboxVariants(), className),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { variant: "light", size: 14 }) })
-  }
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var checkboxVariants = (0, import_class_variance_authority8.cva)([
+  // Base layout & appearance
+  "peer group relative size-4 shrink-0",
+  "rounded-xs border border-default surface-default shadow-xs",
+  // Transitions & hover
+  "transition-colors hover:brightness-[90%]",
+  // Focus
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-default",
+  // Disabled
+  "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+  // Checked
+  "data-[checked]:border-0 data-[checked]:focus-visible:border-0",
+  "data-[checked]:interactive-accent data-[checked]:interactive-accent-fg",
+  // Indeterminate
+  "data-[indeterminate]:border-0 data-[indeterminate]:focus-visible:border-0",
+  "data-[indeterminate]:interactive-accent data-[indeterminate]:interactive-accent-fg",
+  // Error (aria-invalid) — only applies to unchecked/checked states.
+  // Indeterminate has no error state per design.
+  "aria-invalid:border-error",
+  "aria-invalid:data-[checked]:border-0 aria-invalid:data-[checked]:interactive-destructive aria-invalid:data-[checked]:interactive-destructive-fg",
+  "aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-focus-error",
+  // SVG children
+  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+]);
+var Checkbox = React16.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_checkbox.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      ref,
+      className: cn(checkboxVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        import_checkbox.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "absolute inset-0 flex items-center justify-center text-current",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              CheckmarkIcon,
+              {
+                size: 14,
+                className: "text-current hidden group-data-[checked]:block"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              MinusIcon,
+              {
+                size: 14,
+                className: "text-current hidden group-data-[indeterminate]:block"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+Checkbox.displayName = "Checkbox";
 
 // src/components/ui/switch.tsx
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_switch = require("@base-ui/react/switch");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var switchVariants = (0, import_class_variance_authority9.cva)(
   "peer inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 relative focus-visible:ring-3 focus-visible:ring-focus-default aria-invalid:border-error aria-invalid:ring-3 aria-invalid:ring-focus-error data-checked:interactive-accent data-unchecked:interactive-secondary data-unchecked:border-default data-disabled:cursor-not-allowed data-disabled:opacity-50",
   {
@@ -2242,16 +2425,16 @@ var switchThumbVariants = (0, import_class_variance_authority9.cva)(
     }
   }
 );
-var Switch = React15.forwardRef(
+var Switch = React17.forwardRef(
   ({ className, size, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_switch.Switch.Root,
       {
         ref,
         "data-slot": "switch",
         className: cn(switchVariants({ size }), className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_switch.Switch.Thumb,
           {
             "data-slot": "switch-thumb",
@@ -2265,22 +2448,18 @@ var Switch = React15.forwardRef(
 Switch.displayName = "Switch";
 
 // src/components/ui/textarea.tsx
-var React16 = __toESM(require("react"));
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Textarea = React16.forwardRef(
+var React18 = __toESM(require("react"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Textarea = React18.forwardRef(
   ({ className, style, ...props }, ref) => {
-    const tokenStyles = {
-      font: "var(--typography-label-md-regular)",
-      ...style
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "textarea",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border bg-light text-dark px-3 pt-3 pb-2 placeholder:text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors resize-y border-secondary focus-visible:border-2 focus-visible:border-strong disabled:border-secondary aria-invalid:border-error aria-invalid:focus-visible:border-error",
+          "type-body-sm-regular flex min-h-20 w-full rounded-md border surface-default text-default px-3 pt-3 pb-2 shadow-xs placeholder:text-secondary focus:outline-none disabled:cursor-not-allowed disabled:opacity-30 transition-colors resize-y border-secondary read-only:surface-muted read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:resize-none focus-visible:ring-2 focus-visible:ring-focus-default focus-visible:border-strong disabled:border-secondary aria-invalid:border-error aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-focus-error",
           className
         ),
-        style: tokenStyles,
+        style,
         ref,
         ...props
       }
@@ -2290,65 +2469,285 @@ var Textarea = React16.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/ui/badge.tsx
-var React17 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "px-2 py-1 inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-default",
   {
     variants: {
       variant: {
-        primary: "bg-primary text-light",
-        secondary: "bg-light text-dark border border-strong",
-        accent: "bg-blue-300 text-dark",
-        success: "bg-success-subtle text-success",
-        warning: "bg-warning-subtle text-warning",
-        error: "bg-error-subtle text-error",
-        neutral: "bg-neutral-300 text-dark"
+        primary: "interactive-accent interactive-accent-fg type-label-xs-medium",
+        secondary: "interactive-secondary interactive-secondary-fg type-label-xs-medium",
+        outline: "interactive-default interactive-default-fg border border-default type-label-xs-medium",
+        ghost: "interactive-default interactive-default-fg type-label-xs-medium",
+        destructive: "interactive-destructive interactive-destructive-fg type-label-xs-medium focus-visible:ring-3 focus-visible:ring-focus-error"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "rounded-md"
       }
     },
     defaultVariants: {
-      variant: "primary"
+      variant: "primary",
+      rounded: false
     }
   }
 );
-function getBadgeTypographyStyles() {
-  return { font: "var(--typography-label-sm-bold)" };
+function isSingleDisplayCharacter(node) {
+  if (node == null || typeof node === "boolean") return false;
+  if (typeof node === "string" || typeof node === "number") {
+    const trimmed = String(node).trim();
+    return trimmed.length === 1;
+  }
+  if (Array.isArray(node)) {
+    const parts = node.filter((x) => x != null && typeof x !== "boolean");
+    if (parts.length !== 1) return false;
+    return isSingleDisplayCharacter(parts[0]);
+  }
+  if (React19.isValidElement(node)) {
+    return isSingleDisplayCharacter(
+      node.props.children
+    );
+  }
+  return false;
 }
-var Badge = React17.forwardRef(
-  ({ className, variant, style, ...props }, ref) => {
+var Badge = React19.forwardRef(
+  ({ className, variant, rounded, style, children, ...props }, ref) => {
     if (!variant) {
       return null;
     }
-    const typographyStyles = getBadgeTypographyStyles();
-    const tokenStyles = {
-      ...typographyStyles,
-      ...style
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    const circle = isSingleDisplayCharacter(children);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "span",
       {
         className: cn(
-          badgeVariants({ variant }),
-          "rounded-full px-3 py-1",
+          badgeVariants({ variant, rounded }),
+          circle ? "size-5 shrink-0 p-0" : "",
           className
         ),
-        style: tokenStyles,
+        style,
         ref,
-        ...props
+        ...props,
+        children
       }
     );
   }
 );
 Badge.displayName = "Badge";
 
+// src/components/ui/item.tsx
+var React20 = __toESM(require("react"));
+var import_merge_props2 = require("@base-ui/react/merge-props");
+var import_use_render2 = require("@base-ui/react/use-render");
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ItemGroupContext = React20.createContext(false);
+var ItemGroup = React20.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemGroupContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref,
+        role: "list",
+        "data-slot": "item-group",
+        className: cn(
+          "gap-4 has-data-[size=sm]:gap-2.5 group/item-group flex w-full flex-col",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+var ItemSeparator = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Separator2,
+    {
+      ref,
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-2", className),
+      ...props
+    }
+  );
+});
+var itemVariants = (0, import_class_variance_authority11.cva)(
+  "surface-default rounded-md border group/item flex w-full flex-wrap transition-colors duration-100 outline-none [a]:relative [a]:isolate [a]:after:absolute [a]:after:inset-0 [a]:after:rounded-[inherit] [a]:after:-z-10 [a]:after:pointer-events-none [a]:after:transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent [a]:hover:after:bg-black/10",
+        outline: "border-default [a]:hover:after:bg-black/10",
+        muted: "surface-secondary border-transparent"
+      },
+      size: {
+        default: "items-start gap-4 p-4",
+        sm: "items-center gap-2 px-4 py-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Item2 = ({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}) => {
+  const insideGroup = React20.useContext(ItemGroupContext);
+  return (0, import_use_render2.useRender)({
+    defaultTagName: "div",
+    props: (0, import_merge_props2.mergeProps)(
+      {
+        role: insideGroup ? "listitem" : void 0,
+        className: cn(itemVariants({ variant, size, className }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size
+    }
+  });
+};
+var itemMediaVariants = (0, import_class_variance_authority11.cva)(
+  "gap-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-5",
+        iconBadge: "size-8 overflow-hidden rounded bg-surface-secondary p-2 [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-md group-data-[size=sm]/item:size-8 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var ItemMedia = React20.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref,
+        "data-slot": "item-media",
+        "data-variant": variant,
+        className: cn(itemMediaVariants({ variant, className })),
+        ...props
+      }
+    );
+  }
+);
+var ItemContent = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "item-content",
+      className: cn(
+        "gap-1 group-data-[size=sm]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ItemTitle = React20.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref,
+        "data-slot": "item-title",
+        className: cn(
+          "type-label-sm-medium gap-2 text-default underline-offset-4 line-clamp-1 flex w-full items-center",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+var ItemDescription = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "p",
+    {
+      ref,
+      "data-slot": "item-description",
+      className: cn(
+        "type-body-sm-regular text-secondary text-left line-clamp-2 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ItemActions = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "item-actions",
+      className: cn("gap-2 flex items-center", className),
+      ...props
+    }
+  );
+});
+var ItemHeader = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "item-header",
+      className: cn(
+        "gap-2 flex basis-full items-center justify-between",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ItemFooter = React20.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      ref,
+      "data-slot": "item-footer",
+      className: cn(
+        "gap-2 flex basis-full items-center justify-between",
+        className
+      ),
+      ...props
+    }
+  );
+});
+Item2.displayName = "Item";
+ItemMedia.displayName = "ItemMedia";
+ItemGroup.displayName = "ItemGroup";
+ItemSeparator.displayName = "ItemSeparator";
+ItemContent.displayName = "ItemContent";
+ItemTitle.displayName = "ItemTitle";
+ItemDescription.displayName = "ItemDescription";
+ItemActions.displayName = "ItemActions";
+ItemHeader.displayName = "ItemHeader";
+ItemFooter.displayName = "ItemFooter";
+
 // src/components/pdf-viewer/index.tsx
-var React27 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_TextLayer = require("react-pdf/dist/Page/TextLayer.css");
 
 // src/components/pdf-viewer/components/CustomScrollbar.tsx
-var React18 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var React21 = __toESM(require("react"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var scrollbarStyles = `
   .custom-scrollbar-content {
     overflow: auto;
@@ -2416,15 +2815,15 @@ function CustomScrollbar({
   backgroundColor = "#F5F5F5",
   className
 }) {
-  const internalContainerRef = React18.useRef(null);
+  const internalContainerRef = React21.useRef(null);
   const containerRef = externalContainerRef || internalContainerRef;
-  const wrapperRef = React18.useRef(null);
-  const thumbVerticalRef = React18.useRef(null);
-  const thumbHorizontalRef = React18.useRef(null);
-  const lastScrollPosRef = React18.useRef({ top: 0, left: 0 });
-  const scrollTimeoutsRef = React18.useRef({ vertical: null, horizontal: null });
+  const wrapperRef = React21.useRef(null);
+  const thumbVerticalRef = React21.useRef(null);
+  const thumbHorizontalRef = React21.useRef(null);
+  const lastScrollPosRef = React21.useRef({ top: 0, left: 0 });
+  const scrollTimeoutsRef = React21.useRef({ vertical: null, horizontal: null });
   const WHEEL_LINE_HEIGHT_PX = 16;
-  const showScrollbar = React18.useCallback(
+  const showScrollbar = React21.useCallback(
     (direction) => {
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
@@ -2438,7 +2837,7 @@ function CustomScrollbar({
     },
     [autoHideDelay]
   );
-  const updateScrollbarThumbPosition = React18.useCallback(() => {
+  const updateScrollbarThumbPosition = React21.useCallback(() => {
     const container = containerRef.current;
     const thumbVertical = thumbVerticalRef.current;
     const thumbHorizontal = thumbHorizontalRef.current;
@@ -2476,7 +2875,7 @@ function CustomScrollbar({
       }
     }
   }, [containerRef]);
-  React18.useEffect(() => {
+  React21.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     lastScrollPosRef.current = {
@@ -2509,7 +2908,7 @@ function CustomScrollbar({
       if (rafId) cancelAnimationFrame(rafId);
     };
   }, [containerRef, showScrollbar, updateScrollbarThumbPosition]);
-  React18.useEffect(() => {
+  React21.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const normalizeWheelDelta = (delta, deltaMode, axisSize) => {
@@ -2565,7 +2964,7 @@ function CustomScrollbar({
       container.removeEventListener("wheel", handleWheel);
     };
   }, [containerRef, showScrollbar]);
-  React18.useEffect(() => {
+  React21.useEffect(() => {
     const thumbVertical = thumbVerticalRef.current;
     const thumbHorizontal = thumbHorizontalRef.current;
     const container = containerRef.current;
@@ -2625,19 +3024,19 @@ function CustomScrollbar({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [containerRef, showScrollbar]);
-  React18.useEffect(() => {
+  React21.useEffect(() => {
     updateScrollbarThumbPosition();
   }, [children, updateScrollbarThumbPosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: scrollbarStyles }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: scrollbarStyles }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         ref: wrapperRef,
         className: `flex-1 min-w-0 custom-scrollbar-wrapper ${className || ""}`,
         style: { background: backgroundColor },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               ref: containerRef,
@@ -2646,8 +3045,8 @@ function CustomScrollbar({
               children
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrollbar-track-vertical", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref: thumbVerticalRef, className: "scrollbar-thumb-vertical" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "scrollbar-track-horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "scrollbar-track-vertical", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: thumbVerticalRef, className: "scrollbar-thumb-vertical" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "scrollbar-track-horizontal", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "div",
             {
               ref: thumbHorizontalRef,
@@ -2661,7 +3060,7 @@ function CustomScrollbar({
 }
 
 // src/components/pdf-viewer/components/PdfControls.tsx
-var React19 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 
 // src/components/pdf-viewer/utils/types.ts
 var DEFAULT_BOUNDING_BOX_STYLE = {
@@ -2677,7 +3076,7 @@ var PDF_ZOOM = {
 };
 
 // src/components/pdf-viewer/components/PdfControls.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var PdfControls = ({
   currentPage,
   totalPages,
@@ -2691,11 +3090,11 @@ var PdfControls = ({
   const canGoNext = currentPage < totalPages;
   const canZoomIn = zoom < PDF_ZOOM.MAX;
   const canZoomOut = zoom > PDF_ZOOM.MIN;
-  const [pageInputValue, setPageInputValue] = React19.useState(
+  const [pageInputValue, setPageInputValue] = React22.useState(
     String(currentPage)
   );
-  const isEscapeRef = React19.useRef(false);
-  React19.useEffect(() => {
+  const isEscapeRef = React22.useRef(false);
+  React22.useEffect(() => {
     setPageInputValue(String(currentPage));
   }, [currentPage]);
   const handlePageInputChange = (e) => {
@@ -2731,14 +3130,14 @@ var PdfControls = ({
     const newZoom = Math.max(zoom - PDF_ZOOM.STEP, PDF_ZOOM.MIN);
     onZoomChange(newZoom);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: "flex flex-col items-center justify-end py-2 px-1 gap-4",
       style: { background: "#DEDEDE" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "button",
             {
               onClick: onPreviousPage,
@@ -2746,10 +3145,10 @@ var PdfControls = ({
               className: "p-1.5 rounded transition-colors hover:bg-neutral-400 disabled:opacity-40 disabled:cursor-not-allowed",
               "aria-label": "Previous page",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CaretUpIcon, { size: 16, style: { color: "#666666" } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CaretUpIcon, { size: 16, style: { color: "#666666" } })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col items-center", children: totalPages > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col items-center", children: totalPages > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
             {
               type: "text",
@@ -2765,8 +3164,8 @@ var PdfControls = ({
               },
               "aria-label": "Current page"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm", style: { color: "#666666" }, children: "-" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm", style: { color: "#666666" }, children: "-" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "button",
             {
               onClick: onNextPage,
@@ -2774,12 +3173,12 @@ var PdfControls = ({
               className: "p-1.5 rounded transition-colors hover:bg-neutral-400 disabled:opacity-40 disabled:cursor-not-allowed",
               "aria-label": "Next page",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CaretDownIcon, { size: 16, style: { color: "#666666" } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CaretDownIcon, { size: 16, style: { color: "#666666" } })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "button",
             {
               onClick: handleZoomIn,
@@ -2787,10 +3186,10 @@ var PdfControls = ({
               className: "p-1.5 rounded transition-colors hover:bg-neutral-400 disabled:opacity-40 disabled:cursor-not-allowed",
               "aria-label": "Zoom in",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ZoomInIcon, { size: 16, style: { color: "#666666" } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ZoomInIcon, { size: 16, style: { color: "#666666" } })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "button",
             {
               onClick: handleZoomOut,
@@ -2798,7 +3197,7 @@ var PdfControls = ({
               className: "p-1.5 rounded transition-colors hover:bg-neutral-400 disabled:opacity-40 disabled:cursor-not-allowed",
               "aria-label": "Zoom out",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ZoomOutIcon, { size: 16, style: { color: "#666666" } })
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ZoomOutIcon, { size: 16, style: { color: "#666666" } })
             }
           )
         ] })
@@ -2809,7 +3208,7 @@ var PdfControls = ({
 PdfControls.displayName = "PdfControls";
 
 // src/components/pdf-viewer/components/PdfDocument.tsx
-var React21 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_react_pdf = require("react-pdf");
 
 // src/components/pdf-viewer/utils/constants.ts
@@ -2835,7 +3234,7 @@ var INTERSECTION_OBSERVER_CONFIG = {
 };
 
 // src/components/pdf-viewer/components/BoundingBoxOverlay.tsx
-var React20 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 
 // src/components/pdf-viewer/utils/boundingBoxUtils.ts
 function clamp01(value) {
@@ -2862,7 +3261,7 @@ function normalizeBoundingBox(box) {
 }
 
 // src/components/pdf-viewer/components/BoundingBoxOverlay.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var BoundingBoxOverlayInner = ({
   boxes,
   highlightedIds,
@@ -2872,11 +3271,11 @@ var BoundingBoxOverlayInner = ({
   onBoxMouseEnter,
   onBoxMouseLeave
 }) => {
-  const validBoxes = React20.useMemo(
+  const validBoxes = React23.useMemo(
     () => boxes.map(normalizeBoundingBox).filter((b) => b !== null),
     [boxes]
   );
-  const sortedBoxes = React20.useMemo(
+  const sortedBoxes = React23.useMemo(
     () => [...validBoxes].sort((a, b) => {
       const aHighlighted = highlightedIds.has(a.id);
       const bHighlighted = highlightedIds.has(b.id);
@@ -2887,7 +3286,7 @@ var BoundingBoxOverlayInner = ({
     [validBoxes, highlightedIds]
   );
   if (sortedBoxes.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "svg",
     {
       viewBox: "0 0 1 1",
@@ -2907,7 +3306,7 @@ var BoundingBoxOverlayInner = ({
         const baseStyle = isHighlighted ? { ...DEFAULT_BOUNDING_BOX_STYLE, ...highlightStyle } : { ...DEFAULT_BOUNDING_BOX_STYLE, ...defaultStyle };
         const style = { ...baseStyle, ...box.style };
         const isInteractive = !!(onBoxClick || onBoxMouseEnter);
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "rect",
           {
             x: box.x1,
@@ -2927,7 +3326,7 @@ var BoundingBoxOverlayInner = ({
             onMouseLeave: onBoxMouseLeave ? (e) => onBoxMouseLeave(box, e) : void 0,
             "aria-label": box.label,
             role: onBoxClick ? "button" : void 0,
-            children: box.label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("title", { children: box.label })
+            children: box.label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("title", { children: box.label })
           },
           box.id
         );
@@ -2935,11 +3334,11 @@ var BoundingBoxOverlayInner = ({
     }
   );
 };
-var BoundingBoxOverlay = React20.memo(BoundingBoxOverlayInner);
+var BoundingBoxOverlay = React23.memo(BoundingBoxOverlayInner);
 BoundingBoxOverlay.displayName = "BoundingBoxOverlay";
 
 // src/components/pdf-viewer/components/PdfDocument.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var PdfDocument = ({
   file,
   pageWidth,
@@ -2961,14 +3360,14 @@ var PdfDocument = ({
   onBoxMouseEnter,
   onBoxMouseLeave
 }) => {
-  const mountedRef = React21.useRef(true);
-  React21.useEffect(() => {
+  const mountedRef = React24.useRef(true);
+  React24.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const boxesByPage = React21.useMemo(() => {
+  const boxesByPage = React24.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     boundingBoxes?.forEach((box) => {
       const pageBoxes = map.get(box.page) || [];
@@ -2977,7 +3376,7 @@ var PdfDocument = ({
     });
     return map;
   }, [boundingBoxes]);
-  const highlightedIdsSet = React21.useMemo(
+  const highlightedIdsSet = React24.useMemo(
     () => new Set(highlightedBoxIds),
     [highlightedBoxIds]
   );
@@ -3016,14 +3415,14 @@ var PdfDocument = ({
   function renderCurrentPage() {
     const placeholderHeight = getPlaceholderHeight(currentPage);
     const boxesForPage = boxesByPage.get(currentPage) ?? [];
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         ref: (el) => registerPageRef(currentPage, el),
         "data-page-num": currentPage,
         className: "flex justify-center",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             import_react_pdf.Page,
             {
               pageNumber: currentPage,
@@ -3031,12 +3430,12 @@ var PdfDocument = ({
               className: "shadow-sm",
               renderTextLayer: enableTextLayer,
               renderAnnotationLayer: false,
-              loading: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              loading: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "div",
                 {
                   className: "flex items-center justify-center bg-white",
                   style: { width: pageWidth, height: placeholderHeight },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
                     "Loading page ",
                     currentPage,
                     "..."
@@ -3045,7 +3444,7 @@ var PdfDocument = ({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             BoundingBoxOverlay,
             {
               boxes: boxesForPage,
@@ -3068,7 +3467,7 @@ var PdfDocument = ({
       const shouldRender = visiblePages.has(pageNum);
       const placeholderHeight = getPlaceholderHeight(pageNum);
       const boxesForPage = boxesByPage.get(pageNum) ?? [];
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           ref: (el) => registerPageRef(pageNum, el),
@@ -3077,8 +3476,8 @@ var PdfDocument = ({
           style: {
             minHeight: shouldRender ? void 0 : placeholderHeight
           },
-          children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          children: shouldRender ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               import_react_pdf.Page,
               {
                 pageNumber: pageNum,
@@ -3086,12 +3485,12 @@ var PdfDocument = ({
                 className: "shadow-sm",
                 renderTextLayer: enableTextLayer,
                 renderAnnotationLayer: false,
-                loading: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                loading: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   "div",
                   {
                     className: "flex items-center justify-center bg-white",
                     style: { width: pageWidth, height: placeholderHeight },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
                       "Loading page ",
                       pageNum,
                       "..."
@@ -3100,7 +3499,7 @@ var PdfDocument = ({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               BoundingBoxOverlay,
               {
                 boxes: boxesForPage,
@@ -3112,7 +3511,7 @@ var PdfDocument = ({
                 onBoxMouseLeave
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: "flex items-center justify-center bg-white shadow-sm",
@@ -3120,7 +3519,7 @@ var PdfDocument = ({
                 width: pageWidth,
                 height: placeholderHeight
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
                 "Page ",
                 pageNum
               ] })
@@ -3132,16 +3531,16 @@ var PdfDocument = ({
     });
   }
   if (!file) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No PDF available" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No PDF available" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_pdf.Document,
     {
       file,
       onLoadSuccess: handleDocumentLoadSuccess,
       onLoadError,
-      loading: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "Rendering PDF..." }) }),
-      error: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Typography, { variant: "body-md", className: "text-error", children: "Failed to render PDF" }) }),
+      loading: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "Rendering PDF..." }) }),
+      error: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typography, { variant: "body-md", className: "text-error", children: "Failed to render PDF" }) }),
       className: "flex flex-col items-center p-4 min-w-fit",
       children: numPages > 0 && pageWidth > 0 && (viewMode === "single" ? renderCurrentPage() : renderPagesWithVirtualization())
     }
@@ -3150,19 +3549,19 @@ var PdfDocument = ({
 PdfDocument.displayName = "PdfDocument";
 
 // src/components/pdf-viewer/components/PdfHeader.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var PdfHeader = ({
   title,
   onDownload,
   onPrint
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: "flex items-center justify-between gap-4 px-4 py-1",
       style: { background: "#B5B5B5" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-shrink min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex-shrink min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Typography,
           {
             variant: "label-md-bold",
@@ -3171,25 +3570,25 @@ var PdfHeader = ({
             children: title || "Untitled Document"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "button",
             {
               onClick: onDownload,
               className: "p-1 hover:bg-neutral-500 rounded transition-colors",
               "aria-label": "Download PDF",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DownloadIcon, { variant: "dark", size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DownloadIcon, { variant: "dark", size: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "button",
             {
               onClick: onPrint,
               className: "p-1 hover:bg-neutral-500 rounded transition-colors",
               "aria-label": "Print PDF",
               type: "button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PrintIcon, { variant: "dark", size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PrintIcon, { variant: "dark", size: 16 })
             }
           )
         ] })
@@ -3200,12 +3599,12 @@ var PdfHeader = ({
 PdfHeader.displayName = "PdfHeader";
 
 // src/components/pdf-viewer/hooks/useContainerWidth.ts
-var React22 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 function useContainerWidth(padding = 32) {
-  const [containerWidth, setContainerWidth] = React22.useState(0);
-  const containerRef = React22.useRef(null);
-  const lastWidthRef = React22.useRef(0);
-  React22.useEffect(() => {
+  const [containerWidth, setContainerWidth] = React25.useState(0);
+  const containerRef = React25.useRef(null);
+  const lastWidthRef = React25.useRef(0);
+  React25.useEffect(() => {
     const element = containerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3229,9 +3628,9 @@ function useContainerWidth(padding = 32) {
 }
 
 // src/components/pdf-viewer/hooks/usePdfDownload.ts
-var React23 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 function usePdfDownload(file, title) {
-  const download = React23.useCallback(async () => {
+  const download = React26.useCallback(async () => {
     if (!file) return;
     try {
       let blob;
@@ -3263,11 +3662,11 @@ function usePdfDownload(file, title) {
 }
 
 // src/components/pdf-viewer/hooks/usePdfPrint.ts
-var React24 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 function usePdfPrint(file) {
-  const [printBlobUrl, setPrintBlobUrl] = React24.useState(null);
-  const printFrameRef = React24.useRef(null);
-  const preparePrint = React24.useCallback(async () => {
+  const [printBlobUrl, setPrintBlobUrl] = React27.useState(null);
+  const printFrameRef = React27.useRef(null);
+  const preparePrint = React27.useCallback(async () => {
     if (!file) return;
     try {
       let blob;
@@ -3283,14 +3682,14 @@ function usePdfPrint(file) {
       console.error("Failed to prepare PDF for printing:", error);
     }
   }, [file]);
-  React24.useEffect(() => {
+  React27.useEffect(() => {
     return () => {
       if (printBlobUrl) {
         URL.revokeObjectURL(printBlobUrl);
       }
     };
   }, [printBlobUrl]);
-  const print = React24.useCallback(() => {
+  const print = React27.useCallback(() => {
     if (printFrameRef.current?.contentWindow) {
       printFrameRef.current.contentWindow.print();
     }
@@ -3299,7 +3698,7 @@ function usePdfPrint(file) {
 }
 
 // src/components/pdf-viewer/hooks/usePdfScroll.ts
-var React25 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 function usePdfScroll({
   containerRef,
   numPages,
@@ -3310,30 +3709,30 @@ function usePdfScroll({
   effectiveWidth,
   viewportBuffer
 }) {
-  const [internalPage, setInternalPage] = React25.useState(1);
+  const [internalPage, setInternalPage] = React28.useState(1);
   const isControlled = scrollTo !== void 0;
   const currentPage = isControlled ? scrollTo.page : internalPage;
-  const scrollOperationRef = React25.useRef({
+  const scrollOperationRef = React28.useRef({
     isProgrammatic: false,
     targetPage: null,
     lastReportedPage: 1,
     notifyOnComplete: false
   });
-  const [visibleRange, setVisibleRange] = React25.useState({
+  const [visibleRange, setVisibleRange] = React28.useState({
     start: 1,
     end: Math.min(1 + viewportBuffer, numPages || 1 + viewportBuffer)
   });
-  const visiblePages = React25.useMemo(() => {
+  const visiblePages = React28.useMemo(() => {
     const pages = /* @__PURE__ */ new Set();
     for (let i = visibleRange.start; i <= visibleRange.end; i++) {
       pages.add(i);
     }
     return pages;
   }, [visibleRange.start, visibleRange.end]);
-  const observerRef = React25.useRef(null);
-  const intersectionRatiosRef = React25.useRef(/* @__PURE__ */ new Map());
-  const pageRefsMapRef = React25.useRef(/* @__PURE__ */ new Map());
-  const cumulativeOffsets = React25.useMemo(() => {
+  const observerRef = React28.useRef(null);
+  const intersectionRatiosRef = React28.useRef(/* @__PURE__ */ new Map());
+  const pageRefsMapRef = React28.useRef(/* @__PURE__ */ new Map());
+  const cumulativeOffsets = React28.useMemo(() => {
     if (!pageDimensions?.size) return null;
     const offsets = [CONTAINER_PADDING];
     let cumulative = CONTAINER_PADDING;
@@ -3345,7 +3744,7 @@ function usePdfScroll({
     }
     return offsets;
   }, [pageDimensions, effectiveWidth]);
-  const calculatePageOffset = React25.useCallback(
+  const calculatePageOffset = React28.useCallback(
     (pageNum) => {
       if (cumulativeOffsets && pageNum <= cumulativeOffsets.length) {
         return cumulativeOffsets[pageNum - 1];
@@ -3360,11 +3759,11 @@ function usePdfScroll({
     },
     [cumulativeOffsets, pageDimensions, effectiveWidth]
   );
-  const onPageChangeRef = React25.useRef(onPageChange);
-  React25.useEffect(() => {
+  const onPageChangeRef = React28.useRef(onPageChange);
+  React28.useEffect(() => {
     onPageChangeRef.current = onPageChange;
   }, [onPageChange]);
-  const updatePage = React25.useCallback(
+  const updatePage = React28.useCallback(
     (pageNum) => {
       scrollOperationRef.current.lastReportedPage = pageNum;
       if (isControlled) {
@@ -3376,7 +3775,7 @@ function usePdfScroll({
     [isControlled]
     // Removed onPageChange - now uses ref
   );
-  const onProgrammaticScrollComplete = React25.useCallback((pageNum) => {
+  const onProgrammaticScrollComplete = React28.useCallback((pageNum) => {
     const shouldNotify = scrollOperationRef.current.notifyOnComplete;
     scrollOperationRef.current.isProgrammatic = false;
     scrollOperationRef.current.targetPage = null;
@@ -3386,7 +3785,7 @@ function usePdfScroll({
       onPageChangeRef.current?.(pageNum);
     }
   }, []);
-  const scrollToPage = React25.useCallback(
+  const scrollToPage = React28.useCallback(
     (pageNum) => {
       const container = containerRef.current;
       if (!container || !pageDimensions?.size) return;
@@ -3417,7 +3816,7 @@ function usePdfScroll({
       onProgrammaticScrollComplete
     ]
   );
-  const scrollToPosition = React25.useCallback(
+  const scrollToPosition = React28.useCallback(
     (target) => {
       const container = containerRef.current;
       if (!container || !pageDimensions?.size) return;
@@ -3458,7 +3857,7 @@ function usePdfScroll({
       onProgrammaticScrollComplete
     ]
   );
-  const handlePageChange = React25.useCallback(
+  const handlePageChange = React28.useCallback(
     (pageNum) => {
       const clampedPage = Math.max(1, Math.min(pageNum, numPages));
       scrollOperationRef.current.lastReportedPage = clampedPage;
@@ -3472,12 +3871,12 @@ function usePdfScroll({
     },
     [numPages, scrollToPage, isControlled, onPageChange]
   );
-  const updatePageRef = React25.useRef(updatePage);
-  React25.useEffect(() => {
+  const updatePageRef = React28.useRef(updatePage);
+  React28.useEffect(() => {
     updatePageRef.current = updatePage;
   }, [updatePage]);
-  const lastBufferRef = React25.useRef({ start: 1, end: 1 + viewportBuffer });
-  React25.useEffect(() => {
+  const lastBufferRef = React28.useRef({ start: 1, end: 1 + viewportBuffer });
+  React28.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new IntersectionObserver(
@@ -3537,7 +3936,7 @@ function usePdfScroll({
       ratiosMap.clear();
     };
   }, [containerRef, numPages, viewportBuffer]);
-  const observePage = React25.useCallback(
+  const observePage = React28.useCallback(
     (pageNum, element) => {
       const prevElement = pageRefsMapRef.current.get(pageNum);
       if (element) {
@@ -3558,7 +3957,7 @@ function usePdfScroll({
     },
     []
   );
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleUserScroll = () => {
@@ -3616,9 +4015,9 @@ function usePdfScroll({
       }
     };
   }, [containerRef, onProgrammaticScrollComplete]);
-  const lastScrollTargetRef = React25.useRef(null);
-  const prevEffectiveWidthRef = React25.useRef(effectiveWidth);
-  React25.useEffect(() => {
+  const lastScrollTargetRef = React28.useRef(null);
+  const prevEffectiveWidthRef = React28.useRef(effectiveWidth);
+  React28.useEffect(() => {
     if (prevEffectiveWidthRef.current !== effectiveWidth) {
       prevEffectiveWidthRef.current = effectiveWidth;
       const lastScrollTarget = lastScrollTargetRef.current;
@@ -3627,7 +4026,7 @@ function usePdfScroll({
       }
     }
   }, [effectiveWidth]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     if (!isControlled || !scrollTo || numPages <= 0) return;
     if (!pageDimensions?.size) return;
     const lastScrollTarget = lastScrollTargetRef.current;
@@ -3660,7 +4059,7 @@ function usePdfScroll({
     pageDimensions,
     effectiveWidth
   ]);
-  React25.useEffect(() => {
+  React28.useEffect(() => {
     const pageRefs = pageRefsMapRef.current;
     const ratios = intersectionRatiosRef.current;
     for (const pageNum of pageRefs.keys()) {
@@ -3684,14 +4083,14 @@ function usePdfScroll({
 }
 
 // src/components/pdf-viewer/hooks/useZoomControl.ts
-var React26 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 function useZoomControl({
   containerRef,
   initialZoom = PDF_ZOOM.DEFAULT
 }) {
-  const [zoom, setZoom] = React26.useState(initialZoom);
-  const scrollRatioRef = React26.useRef({ x: 0.5, y: 0 });
-  const handleZoomChange = React26.useCallback(
+  const [zoom, setZoom] = React29.useState(initialZoom);
+  const scrollRatioRef = React29.useRef({ x: 0.5, y: 0 });
+  const handleZoomChange = React29.useCallback(
     (newZoom) => {
       const container = containerRef.current;
       if (container) {
@@ -3712,7 +4111,7 @@ function useZoomControl({
     },
     [containerRef]
   );
-  React26.useEffect(() => {
+  React29.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     requestAnimationFrame(() => {
@@ -3737,9 +4136,9 @@ function initializePdfWorker(workerUrl) {
 }
 
 // src/components/pdf-viewer/index.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var DEFAULT_VIEWPORT_BUFFER = 1;
-var PdfViewer = React27.forwardRef(
+var PdfViewer = React30.forwardRef(
   ({
     file,
     title,
@@ -3766,15 +4165,15 @@ var PdfViewer = React27.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [numPages, setNumPages] = React27.useState(0);
-    const [pageDimensions, setPageDimensions] = React27.useState(null);
+    const [numPages, setNumPages] = React30.useState(0);
+    const [pageDimensions, setPageDimensions] = React30.useState(null);
     const { containerWidth, containerRef } = useContainerWidth();
     const { zoom, handleZoomChange } = useZoomControl({ containerRef });
     const { printFrameRef, printBlobUrl, preparePrint, print } = usePdfPrint(file);
     const download = usePdfDownload(file, title);
     const baseWidth = Math.min(pageWidth || containerWidth, 800);
     const effectiveWidth = Math.round(baseWidth * (zoom / 100));
-    const handleDimensionsLoaded = React27.useCallback(
+    const handleDimensionsLoaded = React30.useCallback(
       (dimensions) => {
         setPageDimensions(dimensions);
         onDimensionsReady?.(dimensions);
@@ -3791,7 +4190,7 @@ var PdfViewer = React27.forwardRef(
       effectiveWidth,
       viewportBuffer
     });
-    const handleLoadSuccess = React27.useCallback(
+    const handleLoadSuccess = React30.useCallback(
       async (pages) => {
         setNumPages(pages);
         onLoadSuccess?.(pages);
@@ -3799,28 +4198,28 @@ var PdfViewer = React27.forwardRef(
       },
       [onLoadSuccess, preparePrint]
     );
-    const handleDownload = React27.useCallback(() => {
+    const handleDownload = React30.useCallback(() => {
       if (onDownload) {
         onDownload();
         return;
       }
       download();
     }, [onDownload, download]);
-    const handlePrint = React27.useCallback(() => {
+    const handlePrint = React30.useCallback(() => {
       if (onPrint) {
         onPrint();
         return;
       }
       print();
     }, [onPrint, print]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "div",
       {
         ref,
         className: cn("h-full flex flex-col", className),
         ...props,
         children: [
-          printBlobUrl && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          printBlobUrl && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "iframe",
             {
               ref: printFrameRef,
@@ -3829,7 +4228,7 @@ var PdfViewer = React27.forwardRef(
               title: "PDF for printing"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             PdfHeader,
             {
               title,
@@ -3837,8 +4236,8 @@ var PdfViewer = React27.forwardRef(
               onPrint: handlePrint
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CustomScrollbar, { containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CustomScrollbar, { containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               PdfDocument,
               {
                 file,
@@ -3862,7 +4261,7 @@ var PdfViewer = React27.forwardRef(
                 onBoxMouseLeave
               }
             ) }),
-            showControls && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            showControls && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               PdfControls,
               {
                 currentPage,
@@ -3883,10 +4282,10 @@ var PdfViewer = React27.forwardRef(
 PdfViewer.displayName = "PdfViewer";
 
 // src/components/ui/tabs.tsx
-var React28 = __toESM(require("react"));
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var tabsVariants = (0, import_class_variance_authority11.cva)(
+var React31 = __toESM(require("react"));
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var tabsVariants = (0, import_class_variance_authority12.cva)(
   "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10",
   {
     variants: {
@@ -3899,17 +4298,17 @@ var tabsVariants = (0, import_class_variance_authority11.cva)(
     }
   }
 );
-var TabsContext = React28.createContext(
+var TabsContext = React31.createContext(
   void 0
 );
 function useTabsContext() {
-  const context = React28.useContext(TabsContext);
+  const context = React31.useContext(TabsContext);
   if (!context) {
     throw new Error("Tabs components must be used within a Tabs provider");
   }
   return context;
 }
-var Tabs = React28.forwardRef((props, ref) => {
+var Tabs = React31.forwardRef((props, ref) => {
   const {
     className,
     value,
@@ -3918,7 +4317,7 @@ var Tabs = React28.forwardRef((props, ref) => {
     children,
     ...restProps
   } = props;
-  const contextValue = React28.useMemo(
+  const contextValue = React31.useMemo(
     () => ({
       activeTab: value,
       setActiveTab: onValueChange,
@@ -3926,13 +4325,13 @@ var Tabs = React28.forwardRef((props, ref) => {
     }),
     [value, onValueChange, variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
 });
 Tabs.displayName = "Tabs";
-var TabsList = React28.forwardRef(
+var TabsList = React31.forwardRef(
   (props, ref) => {
     const { className, children, ...restProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         ref,
@@ -3948,7 +4347,7 @@ TabsList.displayName = "TabsList";
 var getTabTypographyStyles = (isActive) => ({
   font: isActive ? "var(--typography-label-sm-bold)" : "var(--typography-label-sm-regular)"
 });
-var TabsTrigger = React28.forwardRef(
+var TabsTrigger = React31.forwardRef(
   (props, ref) => {
     const { className, value, disabled, style, children, ...restProps } = props;
     const { activeTab, setActiveTab, variant } = useTabsContext();
@@ -3956,22 +4355,22 @@ var TabsTrigger = React28.forwardRef(
       throw new Error("TabsTrigger must have a value prop");
     }
     const isActive = activeTab === value;
-    const tokenStyles = React28.useMemo(
+    const tokenStyles = React31.useMemo(
       () => ({
         ...getTabTypographyStyles(isActive),
         ...style
       }),
       [isActive, style]
     );
-    const triggerClassName = React28.useMemo(
+    const triggerClassName = React31.useMemo(
       () => cn(tabsVariants({ variant }), className),
       [variant, className]
     );
-    const handleClick = React28.useCallback(() => {
+    const handleClick = React31.useCallback(() => {
       if (disabled) return;
       setActiveTab(value);
     }, [disabled, setActiveTab, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         ref,
@@ -3985,13 +4384,13 @@ var TabsTrigger = React28.forwardRef(
         disabled,
         onClick: handleClick,
         ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pl-3 pr-6 py-2", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pl-3 pr-6 py-2", children })
       }
     );
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React28.forwardRef(
+var TabsContent = React31.forwardRef(
   (props, ref) => {
     const { className, value, children, ...restProps } = props;
     const { activeTab } = useTabsContext();
@@ -4002,7 +4401,7 @@ var TabsContent = React28.forwardRef(
     if (!isActive) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         ref,
@@ -4020,11 +4419,11 @@ var TabsContent = React28.forwardRef(
 TabsContent.displayName = "TabsContent";
 
 // src/components/ui/dropdown-menu.tsx
-var React29 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
-var DropdownMenuTrigger = React29.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var DropdownMenuTrigger = React32.forwardRef(({ className, icon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   DropdownMenuPrimitive.Trigger,
   {
     ref,
@@ -4034,7 +4433,7 @@ var DropdownMenuTrigger = React29.forwardRef(({ className, icon, children, ...pr
     ),
     ...props,
     children: [
-      icon || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MoreMenuIcon, {}),
+      icon || /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MoreMenuIcon, {}),
       children
     ]
   }
@@ -4044,7 +4443,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React29.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var DropdownMenuSubTrigger = React32.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -4057,12 +4456,12 @@ var DropdownMenuSubTrigger = React29.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowRightIcon, { className: "ml-auto" })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ArrowRightIcon, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var DropdownMenuSubContent = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -4074,7 +4473,7 @@ var DropdownMenuSubContent = React29.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React29.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var DropdownMenuContent = React32.forwardRef(({ className, sideOffset = 4, align = "end", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -4088,7 +4487,7 @@ var DropdownMenuContent = React29.forwardRef(({ className, sideOffset = 4, align
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React29.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var DropdownMenuItem = React32.forwardRef(({ className, inset, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -4105,7 +4504,7 @@ var DropdownMenuItem = React29.forwardRef(({ className, inset, style, ...props }
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React29.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var DropdownMenuCheckboxItem = React32.forwardRef(({ className, children, style, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -4120,7 +4519,7 @@ var DropdownMenuCheckboxItem = React29.forwardRef(({ className, children, style,
     },
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Checkbox,
         {
           checked: checked === true,
@@ -4128,12 +4527,12 @@ var DropdownMenuCheckboxItem = React29.forwardRef(({ className, children, style,
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex-1", children })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "flex-1", children })
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React29.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var DropdownMenuRadioItem = React32.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -4147,13 +4546,13 @@ var DropdownMenuRadioItem = React29.forwardRef(({ className, children, style, ..
     },
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React29.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var DropdownMenuLabel = React32.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -4166,7 +4565,7 @@ var DropdownMenuLabel = React29.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var DropdownMenuSeparator = React32.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -4179,7 +4578,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest opacity-60", className),
@@ -4190,21 +4589,21 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/components/ui/charts/chart-legend.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ChartLegend({
   items,
   x = 0,
   y = 550,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("foreignObject", { x, y, width: "100%", height: "40", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: `flex justify-center items-center gap-6 ${className}`,
       style: { height: "100%" },
-      children: items.map(({ key, color, label }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Typography, { variant: "body-xs", children: label || key })
+      children: items.map(({ key, color, label }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-3 h-3", style: { backgroundColor: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typography, { variant: "body-xs", children: label || key })
       ] }, key))
     }
   ) });
@@ -4322,12 +4721,12 @@ var formatLargeNumber = (value) => {
 };
 
 // src/components/ui/charts/chart-labels.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var createCustomXAxisLabel = (text, yOffset = 40) => {
   const CustomXAxisLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width } = viewBox;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("foreignObject", { x, y: y + yOffset, width, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomXAxisLabel.displayName = "CustomXAxisLabel";
   return CustomXAxisLabel;
@@ -4337,7 +4736,7 @@ var createCustomYAxisLabel = (text, leftMargin) => {
     if (!viewBox) return null;
     const { x, y, height } = viewBox;
     const offset = leftMargin ? leftMargin + 10 : 110;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("foreignObject", { x: x - offset, y, width: 100, height, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center h-full transform -rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisLabel.displayName = "CustomYAxisLabel";
   return CustomYAxisLabel;
@@ -4346,14 +4745,14 @@ var createCustomYAxisRightLabel = (text) => {
   const CustomYAxisRightLabel = ({ viewBox }) => {
     if (!viewBox) return null;
     const { x, y, width, height } = viewBox;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("foreignObject", { x: x + width - 70, y, width: 120, height, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center h-full transform rotate-90 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "label-xs-bold", className: "text-secondary", children: text }) }) }) });
   };
   CustomYAxisRightLabel.displayName = "CustomYAxisRightLabel";
   return CustomYAxisRightLabel;
 };
 var customXAxisTick = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "foreignObject",
     {
       x: -20,
@@ -4361,12 +4760,12 @@ var customXAxisTick = (props) => {
       width: 40,
       height: 20,
       style: { overflow: "visible" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: "flex items-start justify-center h-full",
           style: { overflow: "visible" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             Typography,
             {
               variant: "body-xs",
@@ -4381,7 +4780,7 @@ var customXAxisTick = (props) => {
 };
 var customXAxisTickRotated = (props) => {
   const { x, y, payload } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("g", { transform: `translate(${x},${y})`, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "text",
     {
       x: 0,
@@ -4400,25 +4799,25 @@ var customYAxisTick = (props) => {
   const { x, y, payload } = props;
   const text = String(payload.value);
   const estimatedWidth = Math.max(text.length * 8, 80);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "foreignObject",
     {
       x: x - estimatedWidth + 5,
       y: y - 6,
       width: estimatedWidth,
       height: 15,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "body-xs", className: "text-secondary", children: payload.value }) })
     }
   );
 };
 
 // src/components/ui/charts/chart-tooltip.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function TooltipContainer({
   children,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: `bg-light border border-subtle rounded p-2.5 text-dark ${className}`,
@@ -4432,10 +4831,10 @@ function TooltipItem({
   value,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Typography, { variant: "label-sm", className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("br", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Typography, { variant: "label-sm", className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "span",
         {
           className: "inline-block w-3 h-3 mr-1.5",
@@ -4453,9 +4852,9 @@ function GenericTooltip({
   items,
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(TooltipContainer, { className, children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Typography, { variant: "label-sm-bold", children: title }),
-    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(TooltipContainer, { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Typography, { variant: "label-sm-bold", children: title }),
+    items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       TooltipItem,
       {
         color: item.color,
@@ -4470,7 +4869,7 @@ function GenericTooltip({
 // src/components/ui/charts/bar-chart.tsx
 var import_react2 = require("react");
 var import_recharts = require("recharts");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var BarChart = (0, import_react2.forwardRef)(
   ({
     data,
@@ -4497,19 +4896,19 @@ var BarChart = (0, import_react2.forwardRef)(
     };
     const defaultLegendItems = showLegend && legendItems.length === 0 ? [{ key: yAxisKey, color: barColor, label: yAxisKey }] : legendItems;
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_recharts.ResponsiveContainer,
             {
               width: "100%",
               height: CHART_CONSTANTS.STANDARD_HEIGHT,
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                 import_recharts.BarChart,
                 {
                   data,
@@ -4521,7 +4920,7 @@ var BarChart = (0, import_react2.forwardRef)(
                   onClick: handleClick,
                   layout,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       import_recharts.XAxis,
                       {
                         dataKey: xAxisKey,
@@ -4535,7 +4934,7 @@ var BarChart = (0, import_react2.forwardRef)(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel, 80) : void 0
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       import_recharts.YAxis,
                       {
                         axisLine: false,
@@ -4546,7 +4945,7 @@ var BarChart = (0, import_react2.forwardRef)(
                         type: yAxisType
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       import_recharts.Tooltip,
                       {
                         content: ({
@@ -4555,7 +4954,7 @@ var BarChart = (0, import_react2.forwardRef)(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -4571,7 +4970,7 @@ var BarChart = (0, import_react2.forwardRef)(
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       import_recharts.Bar,
                       {
                         dataKey: barDataKey || yAxisKey,
@@ -4579,12 +4978,12 @@ var BarChart = (0, import_react2.forwardRef)(
                         name: barDataKey || yAxisKey
                       }
                     ),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4595,7 +4994,7 @@ BarChart.displayName = "BarChart";
 // src/components/ui/charts/line-chart.tsx
 var import_react3 = require("react");
 var import_recharts2 = require("recharts");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var LineChart = (0, import_react3.forwardRef)(
   ({
     data,
@@ -4624,19 +5023,19 @@ var LineChart = (0, import_react3.forwardRef)(
       )
     );
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_recharts2.ResponsiveContainer,
             {
               width: "100%",
               height: CHART_CONSTANTS.STANDARD_HEIGHT,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                 import_recharts2.LineChart,
                 {
                   data,
@@ -4647,7 +5046,7 @@ var LineChart = (0, import_react3.forwardRef)(
                   },
                   onClick: handleClick,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       import_recharts2.XAxis,
                       {
                         dataKey: xAxisKey,
@@ -4659,7 +5058,7 @@ var LineChart = (0, import_react3.forwardRef)(
                         label: xAxisLabel ? createCustomXAxisLabel(xAxisLabel) : void 0
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       import_recharts2.YAxis,
                       {
                         axisLine: false,
@@ -4668,7 +5067,7 @@ var LineChart = (0, import_react3.forwardRef)(
                         label: yAxisLabel ? createCustomYAxisLabel(yAxisLabel, 40) : void 0
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       import_recharts2.Tooltip,
                       {
                         content: ({
@@ -4677,7 +5076,7 @@ var LineChart = (0, import_react3.forwardRef)(
                           label
                         }) => {
                           if (active && payload && payload.length) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                               GenericTooltip,
                               {
                                 title: label?.toString(),
@@ -4693,7 +5092,7 @@ var LineChart = (0, import_react3.forwardRef)(
                         }
                       }
                     ),
-                    series.map((s, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    series.map((s, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                       import_recharts2.Line,
                       {
                         type: "monotone",
@@ -4705,12 +5104,12 @@ var LineChart = (0, import_react3.forwardRef)(
                       },
                       s.dataKey
                     )),
-                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { items: defaultLegendItems })
+                    showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartLegend, { items: defaultLegendItems })
                   ]
                 }
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4721,7 +5120,7 @@ LineChart.displayName = "LineChart";
 // src/components/ui/charts/pie-chart.tsx
 var import_react4 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var PieChart = (0, import_react4.forwardRef)(
   ({
     data,
@@ -4749,20 +5148,20 @@ var PieChart = (0, import_react4.forwardRef)(
       )
     );
     const hasData = data && data.length > 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
         ref,
         className: `bg-light border border-subtle mx-6 ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typography, { variant: "label-sm-bold", children: title }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pt-2 px-2", children: hasData ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             import_recharts3.PieChart,
             {
               width: 600,
               height: CHART_CONSTANTS.LARGE_HEIGHT,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   import_recharts3.Pie,
                   {
                     data,
@@ -4774,7 +5173,7 @@ var PieChart = (0, import_react4.forwardRef)(
                     label: showLabels,
                     labelLine: false,
                     onClick: handleClick,
-                    children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    children: data.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                       import_recharts3.Cell,
                       {
                         fill: entry.color || getSeriesColor(index)
@@ -4783,7 +5182,7 @@ var PieChart = (0, import_react4.forwardRef)(
                     ))
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   import_recharts3.Tooltip,
                   {
                     content: ({
@@ -4792,7 +5191,7 @@ var PieChart = (0, import_react4.forwardRef)(
                     }) => {
                       if (active && payload && payload.length && payload[0]) {
                         const data2 = payload[0].payload;
-                        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                           GenericTooltip,
                           {
                             title: data2.name,
@@ -4810,10 +5209,10 @@ var PieChart = (0, import_react4.forwardRef)(
                     }
                   }
                 ),
-                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: defaultLegendItems, y: 400 })
+                showLegend && defaultLegendItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartLegend, { items: defaultLegendItems, y: 400 })
               ]
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "No data is available" }) }) })
         ]
       }
     );
@@ -4824,7 +5223,7 @@ PieChart.displayName = "PieChart";
 // src/components/ui/table.tsx
 var import_react5 = require("react");
 var import_react_table = require("@tanstack/react-table");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Table({
   table,
   className,
@@ -4854,15 +5253,15 @@ function Table({
     },
     [table]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "min-w-full divide-y divide-border", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "min-w-full divide-y divide-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("thead", { className: "bg-dark text-light", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("th", { className: "px-6 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "div",
         {
           className: `flex items-center space-x-1 ${header.column.getCanSort() ? "cursor-pointer select-none" : ""}`,
           onClick: header.column.getToggleSortingHandler(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Typography,
               {
                 variant: "label-xs",
@@ -4873,19 +5272,19 @@ function Table({
                 )
               }
             ),
-            header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "ml-1", children: [
-              header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CaretUpIcon, { className: "text-light" }),
-              header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CaretDownIcon, { className: "text-light" })
+            header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ml-1", children: [
+              header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CaretUpIcon, { className: "text-light" }),
+              header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CaretDownIcon, { className: "text-light" })
             ] })
           ]
         }
       ) }, header.id)) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typography, { variant: "body-sm", children: (0, import_react_table.flexRender)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tbody", { className: "bg-light divide-y divide-border", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typography, { variant: "body-sm", children: (0, import_react_table.flexRender)(
         cell.column.columnDef.cell,
         cell.getContext()
       ) }) }, cell.id)) }, row.id)) })
     ] }) }),
-    showPagination && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    showPagination && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         className: cn(
@@ -4893,9 +5292,9 @@ function Table({
           paginationClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: showingText }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center space-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -4903,7 +5302,7 @@ function Table({
                 onClick: handlePreviousPage,
                 disabled: !table.getCanPreviousPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowLeftIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowLeftIcon, {})
               }
             ),
             Array.from(
@@ -4920,7 +5319,7 @@ function Table({
                   pageNumber = currentPage - 2 + i;
                 }
                 const isActive = pageNumber === currentPage;
-                return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Button,
                   {
                     variant: isActive ? "default" : "ghost",
@@ -4933,11 +5332,11 @@ function Table({
                 );
               }
             ),
-            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "px-1 text-secondary", children: "..." }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
+            table.getPageCount() > 5 && currentPage < totalPages - 3 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "px-1 text-secondary", children: "..." }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Typography, { variant: "body-sm", className: "text-secondary", children: totalPages })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Button,
               {
                 variant: "ghost",
@@ -4945,12 +5344,12 @@ function Table({
                 onClick: handleNextPage,
                 disabled: !table.getCanNextPage(),
                 className: "p-2",
-                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowRightIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowRightIcon, {})
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-3 w-48", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-3 w-48", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Typography,
               {
                 variant: "body-sm",
@@ -4958,14 +5357,14 @@ function Table({
                 children: "Rows per page:"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
               Select,
               {
                 value: table.getState().pagination.pageSize.toString(),
                 onValueChange: handlePageSizeChange,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectValue, {}) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectItem, { value: size.toString(), children: size }, size)) })
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectTrigger, { className: "min-w-0 h-8", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectValue, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectContent, { children: [10, 20, 50, 100].map((size) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SelectItem, { value: size.toString(), children: size }, size)) })
                 ]
               }
             )
@@ -5018,6 +5417,15 @@ function Table({
   CogIcon,
   CredentialsIcon,
   DatePicker,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger,
   DocumentIcon,
   DollarIcon,
   DownloadIcon,
@@ -5062,6 +5470,16 @@ function Table({
   HomeIcon,
   InformationIcon,
   Input,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
   Label,
   LineChart,
   LocationIcon,
@@ -5141,6 +5559,8 @@ function Table({
   getPerformanceColor,
   getSeriesColor,
   initializePdfWorker,
+  itemMediaVariants,
+  itemVariants,
   selectTriggerVariants,
   switchVariants,
   tabsVariants,