@northslopetech/altitude-ui 3.1.0 → 3.2.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/components/ui/alert.tsx
-import * as React from "react";
-import { cva as cva2 } from "class-variance-authority";
+import * as React2 from "react";
+import { cva as cva3 } from "class-variance-authority";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -70,124 +70,6 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/components/ui/alert.tsx
-import { jsx } from "react/jsx-runtime";
-var alertVariants = cva2(
-  "relative flex flex-wrap w-full items-center data-[multiline]:items-start gap-4 rounded-md border px-4 py-3 [&>[data-slot=alert-body]>svg]:size-4 [&>[data-slot=alert-body]>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "surface-default border-default [&>[data-slot=alert-body]>svg]:text-default",
-        info: "surface-info border-info [&>[data-slot=alert-body]>svg]:text-info",
-        success: "surface-success border-success [&>[data-slot=alert-body]>svg]:text-success",
-        warning: "surface-warning border-warning [&>[data-slot=alert-body]>svg]:text-warning",
-        error: "surface-error border-error [&>[data-slot=alert-body]>svg]:text-error"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Alert({ className, variant, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "alert",
-      role: variant === "warning" || variant === "error" ? "alert" : "status",
-      className: cn(alertVariants({ variant }), className),
-      ...props
-    }
-  );
-}
-function AlertBody({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-body",
-      className: cn(
-        "grid flex-1 min-w-0 grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 items-start [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertTitle({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref,
-      "data-slot": "alert-title",
-      className: cn(
-        "col-start-2 row-start-1 type-body-sm-medium text-default",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertDescription({
-  className,
-  ref: externalRef,
-  ...props
-}) {
-  const localRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    const el = localRef.current;
-    if (!el) return;
-    const alert = el.closest("[data-slot=alert]");
-    if (!alert) return;
-    const update = () => {
-      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
-      alert.toggleAttribute(
-        "data-multiline",
-        el.clientHeight > lineHeight * 1.5
-      );
-    };
-    update();
-    const resizeObserver = new ResizeObserver(update);
-    resizeObserver.observe(el);
-    return () => {
-      resizeObserver.disconnect();
-      alert.removeAttribute("data-multiline");
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      ref: (node) => {
-        localRef.current = node;
-        if (typeof externalRef === "function") externalRef(node);
-        else if (externalRef)
-          externalRef.current = node;
-      },
-      "data-slot": "alert-description",
-      className: cn(
-        "col-start-2 type-body-sm-regular text-secondary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AlertActions({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "alert-actions",
-      className: cn("shrink-0 flex items-center gap-2", className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/accordion.tsx
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-
 // src/components/ui/icons.tsx
 import { LockIcon as PhosphorLock } from "@phosphor-icons/react/Lock";
 import { CheckIcon as PhosphorCheck } from "@phosphor-icons/react/Check";
@@ -248,7 +130,7 @@ import { SquaresFourIcon as PhosphorSquaresFour } from "@phosphor-icons/react/Sq
 import { MagnifyingGlassPlusIcon as PhosphorMagnifyingGlassPlus } from "@phosphor-icons/react/MagnifyingGlassPlus";
 import { MagnifyingGlassMinusIcon as PhosphorMagnifyingGlassMinus } from "@phosphor-icons/react/MagnifyingGlassMinus";
 import { SidebarSimpleIcon as PhosphorSidebarSimple } from "@phosphor-icons/react/SidebarSimple";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function createIcon(PhosphorIcon) {
   function Wrapped({
     className,
@@ -257,7 +139,7 @@ function createIcon(PhosphorIcon) {
     ref,
     ...props
   }) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx(
       PhosphorIcon,
       {
         ref,
@@ -331,81 +213,12 @@ var PanelIcon = createIcon(PhosphorSidebarSimple);
 var ZoomInIcon = createIcon(PhosphorMagnifyingGlassPlus);
 var ZoomOutIcon = createIcon(PhosphorMagnifyingGlassMinus);
 
-// src/components/ui/accordion.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function Accordion({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx3(
-    AccordionPrimitive.Root,
-    {
-      ref,
-      "data-slot": "accordion",
-      className: cn("flex w-full flex-col", className),
-      ...props
-    }
-  );
-}
-function AccordionItem({ className, ref, ...props }) {
-  return /* @__PURE__ */ jsx3(
-    AccordionPrimitive.Item,
-    {
-      ref,
-      "data-slot": "accordion-item",
-      className: cn("border-b border-muted", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  ref,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-    AccordionPrimitive.Trigger,
-    {
-      ref,
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "group/accordion-trigger flex flex-1 items-center justify-between py-4 type-body-sm-medium text-default outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-focus-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx3(CaretDownIcon, { className: "shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:hidden" }),
-        /* @__PURE__ */ jsx3(CaretUpIcon, { className: "hidden shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:block" })
-      ]
-    }
-  ) });
-}
-function AccordionContent({
-  className,
-  children,
-  ref,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(
-    AccordionPrimitive.Panel,
-    {
-      ref,
-      "data-slot": "accordion-content",
-      className: cn(
-        "h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx3("div", { className: "pb-4 type-body-sm-regular text-default", children })
-    }
-  );
-}
-
 // src/components/ui/button.tsx
-import * as React2 from "react";
+import * as React from "react";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var buttonVariants = cva3(
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
   [
     // Base layout
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
@@ -451,7 +264,7 @@ var buttonVariants = cva3(
         ],
         "destructive-subtle": [
           // Base
-          "interactive-default text-error shadow-xs",
+          "interactive-destructive-subtle interactive-destructive-subtle-fg shadow-xs",
           "border border-default",
           // Hover & active
           "hover:interactive-hover",
@@ -515,7 +328,7 @@ var buttonVariants = cva3(
     }
   }
 );
-var hasTextChildren = (children) => React2.Children.toArray(children).some(
+var hasTextChildren = (children) => React.Children.toArray(children).some(
   (child) => typeof child === "string" && child.trim().length > 0
 );
 function Button({
@@ -529,7 +342,7 @@ function Button({
 }) {
   const isIconOnly = !hasTextChildren(children);
   const iconOnlyClasses = isIconOnly ? "aspect-square px-0 py-0" : void 0;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx2(
     ButtonPrimitive,
     {
       "data-slot": "button",
@@ -546,6 +359,206 @@ function Button({
   );
 }
 
+// src/components/ui/alert.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var alertVariants = cva3(
+  "relative flex flex-wrap w-full items-center data-[multiline]:items-start gap-4 rounded-md px-4 py-3 [&>[data-slot=alert-body]>svg]:size-4 [&>[data-slot=alert-body]>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "surface-secondary [&>[data-slot=alert-body]>svg]:text-default",
+        info: "surface-info border-info [&>[data-slot=alert-body]>svg]:text-info",
+        success: "surface-success border-success [&>[data-slot=alert-body]>svg]:text-success",
+        warning: "surface-warning border-warning [&>[data-slot=alert-body]>svg]:text-warning",
+        error: "surface-error border-error [&>[data-slot=alert-body]>svg]:text-error"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({ className, variant, onDismiss, ref, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "alert",
+      role: variant === "warning" || variant === "error" ? "alert" : "status",
+      className: cn(alertVariants({ variant }), className),
+      ...props,
+      children: [
+        props.children,
+        onDismiss && /* @__PURE__ */ jsx3(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "mini",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: "shrink-0 self-start",
+            children: /* @__PURE__ */ jsx3(CloseIcon, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function AlertBody({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-body",
+      className: cn(
+        "grid flex-1 min-w-0 grid-cols-1 gap-y-0.5 items-start [&:has(>svg)]:grid-cols-[auto_1fr] [&:has(>svg)]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "p",
+    {
+      ref,
+      "data-slot": "alert-title",
+      className: cn(
+        "row-start-1 type-body-sm-medium text-default [div:has(>svg)>&]:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ref: externalRef,
+  ...props
+}) {
+  const localRef = React2.useRef(null);
+  React2.useLayoutEffect(() => {
+    const el = localRef.current;
+    if (!el) return;
+    const alert = el.closest("[data-slot=alert]");
+    if (!alert) return;
+    const update = () => {
+      const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
+      alert.toggleAttribute(
+        "data-multiline",
+        el.clientHeight > lineHeight * 1.5
+      );
+    };
+    update();
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(el);
+    return () => {
+      resizeObserver.disconnect();
+      alert.removeAttribute("data-multiline");
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3(
+    "p",
+    {
+      ref: (node) => {
+        localRef.current = node;
+        if (typeof externalRef === "function") externalRef(node);
+        else if (externalRef)
+          externalRef.current = node;
+      },
+      "data-slot": "alert-description",
+      className: cn(
+        "type-body-sm-regular text-secondary [div:has(>svg)>&]:col-start-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertActions({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-actions",
+      className: cn("shrink-0 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/accordion.tsx
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Accordion({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    AccordionPrimitive.Root,
+    {
+      ref,
+      "data-slot": "accordion",
+      className: cn("flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cn("border-b border-muted", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs2(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger flex flex-1 items-center justify-between py-4 type-body-sm-medium text-default outline-none focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-focus-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx4(CaretDownIcon, { className: "shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsx4(CaretUpIcon, { className: "hidden shrink-0 text-secondary group-data-[panel-open]/accordion-trigger:block" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    AccordionPrimitive.Panel,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: cn(
+        "h-(--accordion-panel-height) overflow-hidden transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx4("div", { className: "pb-4 type-body-sm-regular text-default", children })
+    }
+  );
+}
+
 // src/components/ui/button-group.tsx
 import * as React3 from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -958,7 +971,7 @@ function CardFooter({ className, ref, ...props }) {
 // src/components/ui/select.tsx
 import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { cva as cva7 } from "class-variance-authority";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var selectTriggerVariants = cva7(
   [
     // Layout
@@ -1003,7 +1016,7 @@ function SelectTrigger({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -1043,7 +1056,7 @@ function SelectContent({
         positionerClassName
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         SelectPrimitive.Popup,
         {
           ref,
@@ -1167,7 +1180,7 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 // src/components/ui/badge.tsx
 import * as React4 from "react";
 import { cva as cva8 } from "class-variance-authority";
-import { jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsxs as jsxs4 } from "react/jsx-runtime";
 var badgeVariants = cva8(
   [
     // Layout
@@ -1239,7 +1252,7 @@ function Badge({
     return null;
   }
   const circle = isSingleDisplayCharacter(children) && !iconLeft && !iconRight;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "span",
     {
       ...props,
@@ -1269,7 +1282,7 @@ function Badge({
 }
 
 // src/components/ui/combobox.tsx
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var comboboxInputVariants = cva(
   [
     // Layout
@@ -1344,7 +1357,7 @@ function ComboboxInput({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref,
@@ -1434,7 +1447,7 @@ function ComboboxItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ComboboxPrimitive.Item,
     {
       "data-slot": "combobox-item",
@@ -1571,7 +1584,7 @@ function ComboboxChips({
   disabled = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ComboboxPrimitive.Chips,
     {
       "data-slot": "combobox-chips",
@@ -1592,7 +1605,7 @@ function ComboboxChip({
   removeLabel = "Remove",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ComboboxPrimitive.Chip,
     {
       "data-slot": "combobox-chip",
@@ -1659,7 +1672,7 @@ function Label({ className, ref, ...props }) {
 }
 
 // src/components/ui/field.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
   return /* @__PURE__ */ jsx13(
     "fieldset",
@@ -1810,7 +1823,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       "data-slot": "field-separator",
@@ -1872,7 +1885,7 @@ function FieldError({
 // src/components/ui/dialog.tsx
 import * as React6 from "react";
 import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var DialogChromeContext = React6.createContext(null);
 function useDialogChrome() {
   return React6.useContext(DialogChromeContext) ?? { showCloseButton: false };
@@ -1882,7 +1895,7 @@ function DialogCloseControl({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     DialogPrimitive.Close,
     {
       ref,
@@ -1925,7 +1938,7 @@ function DialogContent({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(DialogPrimitive.Portal, { children: [
+  return /* @__PURE__ */ jsxs7(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx14(DialogOverlay, {}),
     /* @__PURE__ */ jsx14(DialogPrimitive.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__ */ jsx14(
       DialogPrimitive.Popup,
@@ -1978,7 +1991,7 @@ function DialogHeader({
   ...props
 }) {
   const { showCloseButton } = useDialogChrome();
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref,
@@ -2023,7 +2036,7 @@ var DialogClose = DialogPrimitive.Close;
 // src/components/ui/drawer.tsx
 import * as React7 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var DrawerContext = React7.createContext({
   direction: "bottom"
 });
@@ -2046,9 +2059,9 @@ DrawerOverlay.displayName = "DrawerOverlay";
 var DrawerContent = React7.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { direction } = React7.useContext(DrawerContext);
-    return /* @__PURE__ */ jsxs7(DrawerPortal, { children: [
+    return /* @__PURE__ */ jsxs8(DrawerPortal, { children: [
       /* @__PURE__ */ jsx15(DrawerOverlay, {}),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         DrawerPrimitive.Content,
         {
           ref,
@@ -2135,7 +2148,7 @@ DrawerFooter.displayName = "DrawerFooter";
 // src/components/ui/breadcrumb.tsx
 import { mergeProps as mergeProps2 } from "@base-ui/react/merge-props";
 import { useRender as useRender2 } from "@base-ui/react/use-render";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function Breadcrumb({ className, ref, ...props }) {
   return /* @__PURE__ */ jsx16(
     "nav",
@@ -2232,7 +2245,7 @@ function BreadcrumbEllipsis({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "span",
     {
       "data-slot": "breadcrumb-ellipsis",
@@ -2254,7 +2267,7 @@ function BreadcrumbEllipsis({
 
 // src/components/ui/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function TooltipProvider({
   delay = 0,
   ...props
@@ -2284,7 +2297,7 @@ function TooltipContent({
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         TooltipPrimitive.Popup,
         {
           "data-slot": "tooltip-content",
@@ -2335,7 +2348,7 @@ function TooltipContent({
 
 // src/components/ui/toast.tsx
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var toastManager = ToastPrimitive.createToastManager();
 function emit(manager, type, title, options = {}) {
   const { description, duration, priority, action, id } = options;
@@ -2382,14 +2395,13 @@ var TYPE_ICON_COLOR = {
   warning: "text-warning"
 };
 var TYPE_SURFACE = {
-  default: "surface-default border-default",
-  success: "surface-success border-success",
-  error: "surface-error border-error",
-  info: "surface-info border-info",
-  warning: "surface-warning border-warning"
+  default: "surface-default border border-default",
+  success: "surface-success",
+  error: "surface-error",
+  info: "surface-info",
+  warning: "surface-warning"
 };
 var VIEWPORT_POSITION = {
-  "top-left": "top-4 left-4 sm:top-8 sm:left-8",
   "top-center": "top-4 left-1/2 -translate-x-1/2 sm:top-8",
   "top-right": "top-4 right-4 sm:top-8 sm:right-8",
   "bottom-left": "bottom-4 left-4 sm:bottom-8 sm:left-8",
@@ -2421,7 +2433,7 @@ function ToastList({ side }) {
           side === "top" ? "top-0 origin-top" : "bottom-0 origin-bottom",
           // Surface — variant-tinted to match the Alert component (default = neutral)
           TYPE_SURFACE[type],
-          "rounded-lg border bg-clip-padding shadow-lg select-none",
+          "rounded-lg bg-clip-padding shadow-lg select-none",
           // Collapsed transform: peek + shrink each toast behind the front one
           "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--y-dir)*((var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))))_scale(var(--scale))]",
           // Expanded (hover/focus) transform: fan out by real heights + gap
@@ -2441,12 +2453,13 @@ function ToastList({ side }) {
           // Motion
           "[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.4s,height_0.15s]"
         ),
-        children: /* @__PURE__ */ jsxs10(
+        children: /* @__PURE__ */ jsxs11(
           ToastPrimitive.Content,
           {
             "data-slot": "toast-content",
             className: cn(
-              "flex h-full items-start gap-3 p-4 overflow-hidden",
+              "flex h-full gap-3 px-4 py-3 overflow-hidden",
+              item.description ? "items-start" : "items-center",
               "transition-opacity duration-[250ms] ease-[cubic-bezier(0.22,1,0.36,1)]",
               "data-behind:opacity-0 data-expanded:opacity-100"
             ),
@@ -2457,15 +2470,15 @@ function ToastList({ side }) {
                   className: cn("mt-0.5 size-4 shrink-0", TYPE_ICON_COLOR[type])
                 }
               ) : null,
-              /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+              /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
                 /* @__PURE__ */ jsx18(
                   ToastPrimitive.Title,
                   {
                     "data-slot": "toast-title",
-                    className: "type-body-sm-medium text-default"
+                    className: item.description ? "type-body-sm-medium text-default" : "type-label-sm-medium text-default"
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                item.description && /* @__PURE__ */ jsx18(
                   ToastPrimitive.Description,
                   {
                     "data-slot": "toast-description",
@@ -2477,12 +2490,8 @@ function ToastList({ side }) {
                 ToastPrimitive.Action,
                 {
                   "data-slot": "toast-action",
-                  className: cn(
-                    "shrink-0 rounded-md border border-default px-2.5 py-1",
-                    "type-label-xs-medium text-default surface-default",
-                    "transition-colors hover:surface-secondary",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-default"
-                  )
+                  render: /* @__PURE__ */ jsx18(Button, { variant: "default", size: "mini" }),
+                  ...item.actionProps
                 }
               ) : null,
               /* @__PURE__ */ jsx18(
@@ -2525,7 +2534,7 @@ function Toaster({
         {
           "data-slot": "toaster",
           className: cn(
-            "fixed z-50 mx-auto flex w-[calc(100vw-2rem)] sm:w-[22.5rem]",
+            "fixed z-50 mx-auto flex w-[calc(100vw-2rem)] sm:w-[400px]",
             VIEWPORT_POSITION[position],
             className
           ),
@@ -2683,7 +2692,7 @@ function PopoverDescription({
 
 // src/components/ui/sidebar.tsx
 import * as React8 from "react";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var SIDEBAR_CONSTANTS = {
   WIDTH: "144px",
   WIDTH_ICON: "48px"
@@ -2758,7 +2767,7 @@ function Sidebar({
   ...props
 }) {
   const { state } = useSidebar();
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "aside",
     {
       ref,
@@ -2782,7 +2791,7 @@ function Sidebar({
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear flex left-0",
+              "fixed inset-y-0 z-10 h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear flex left-0 border-r border-[var(--color-sidebar-border)]",
               "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
             ),
             children: /* @__PURE__ */ jsx21(
@@ -2932,11 +2941,29 @@ function SidebarMenuButton({
     return button;
   }
   const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
-  return /* @__PURE__ */ jsx21(TooltipProvider, { delay: 0, children: /* @__PURE__ */ jsxs11(Tooltip, { children: [
+  return /* @__PURE__ */ jsx21(TooltipProvider, { delay: 0, children: /* @__PURE__ */ jsxs12(Tooltip, { children: [
     /* @__PURE__ */ jsx21(TooltipTrigger, { render: button }),
     /* @__PURE__ */ jsx21(TooltipContent, { side: "right", align: "center", ...tooltipProps })
   ] }) });
 }
+function SidebarSeparator({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      ref,
+      "data-sidebar": "separator",
+      className: cn(
+        "border-t border-[var(--color-sidebar-border)] w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
 // src/components/ui/calendar.tsx
 import * as React9 from "react";
@@ -3155,7 +3182,7 @@ CalendarDayButton.displayName = "CalendarDayButton";
 
 // src/components/ui/date-picker.tsx
 import * as React10 from "react";
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function DatePickerTrigger({
   label,
   placeholder = "Pick a date",
@@ -3164,7 +3191,7 @@ function DatePickerTrigger({
   ref,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     PopoverTrigger,
     {
       disabled,
@@ -3230,7 +3257,7 @@ function DatePicker(props) {
     month: "long",
     day: "numeric"
   }) : null;
-  return /* @__PURE__ */ jsxs12(Popover, { children: [
+  return /* @__PURE__ */ jsxs13(Popover, { children: [
     /* @__PURE__ */ jsx23(
       DatePickerTrigger,
       {
@@ -3262,7 +3289,7 @@ function DatePicker(props) {
 // src/components/ui/upload.tsx
 import * as React11 from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
 var uploadVariants = cva10(
   "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden w-full p-16 min-h-[200px]",
@@ -3364,13 +3391,13 @@ function Upload({
   const renderContent = () => {
     switch (effectiveState) {
       case "error":
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "flex flex-col items-center text-center max-w-[289px]",
             style: { gap: "32px" },
             children: [
-              /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsx24(Text, { variant: "h5", children: "Upload fail" }),
                 /* @__PURE__ */ jsx24(Text, { variant: "body-md", className: "text-error", children: errorMessage })
               ] }),
@@ -3388,14 +3415,14 @@ function Upload({
           }
         );
       case "uploading":
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "flex flex-col items-center text-center max-w-[289px]",
             style: { gap: "32px" },
             children: [
               /* @__PURE__ */ jsx24(Text, { variant: "h5", className: "text-default", children: "Uploading files" }),
-              /* @__PURE__ */ jsxs13("div", { className: "w-full max-w-[720px] space-y-2", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "w-full max-w-[720px] space-y-2", children: [
                 /* @__PURE__ */ jsx24("div", { className: "w-full surface-secondary rounded-full h-2", children: /* @__PURE__ */ jsx24(
                   "div",
                   {
@@ -3403,7 +3430,7 @@ function Upload({
                     style: { width: `${progress}%` }
                   }
                 ) }),
-                /* @__PURE__ */ jsxs13(Text, { variant: "body-sm", className: "text-secondary text-center", children: [
+                /* @__PURE__ */ jsxs14(Text, { variant: "body-sm", className: "text-secondary text-center", children: [
                   Math.round(progress),
                   "% complete"
                 ] })
@@ -3417,20 +3444,20 @@ function Upload({
           {
             className: "flex flex-col items-center text-center max-w-[289px]",
             style: { gap: "32px" },
-            children: /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+            children: /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsx24(Text, { variant: "h5", className: "text-success", children: "Upload successful!" }),
               selectedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx24(Text, { variant: "body-sm", children: file.name }, index)) })
             ] })
           }
         );
       default:
-        return /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "flex flex-col items-center text-center max-w-[289px]",
             style: { gap: "32px" },
             children: [
-              /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsx24(Text, { variant: "h5", className: "text-default", children: "Drag & drop files here" }),
                 /* @__PURE__ */ jsx24(Text, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
               ] }),
@@ -3448,7 +3475,7 @@ function Upload({
                   children: "Choose files"
                 }
               ),
-              /* @__PURE__ */ jsxs13(Text, { variant: "body-sm", className: "text-secondary", children: [
+              /* @__PURE__ */ jsxs14(Text, { variant: "body-sm", className: "text-secondary", children: [
                 "Supported file: ",
                 getFileTypeDisplay(),
                 /* @__PURE__ */ jsx24("br", {}),
@@ -3461,7 +3488,7 @@ function Upload({
         );
     }
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref,
@@ -3629,7 +3656,7 @@ function AvatarGroupCount({
 // src/components/ui/checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var checkboxVariants = cva12([
   // Base layout & appearance
   "peer group relative size-4 shrink-0",
@@ -3662,7 +3689,7 @@ function Checkbox({ className, ref, ...props }) {
       ref,
       className: cn(checkboxVariants(), className),
       ...props,
-      children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
@@ -3694,7 +3721,7 @@ import * as React12 from "react";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { cva as cva13 } from "class-variance-authority";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var radioGroupVariants = cva13("flex", {
   variants: {
     orientation: {
@@ -3782,7 +3809,7 @@ function RadioGroupCard({
 }) {
   const generatedId = React12.useId();
   const itemId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "label",
     {
       ref,
@@ -3804,7 +3831,7 @@ function RadioGroupCard({
             ...props
           }
         ),
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1.5 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1.5 min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx27("span", { className: "type-body-sm-medium text-default", children: label }),
           description && /* @__PURE__ */ jsx27("span", { className: "type-body-xs-regular text-secondary", children: description })
         ] }),
@@ -3875,7 +3902,7 @@ function Switch({ className, size, ref, ...props }) {
 // src/components/ui/slider.tsx
 import { Slider as SliderPrimitive } from "@base-ui/react/slider";
 import { cva as cva15 } from "class-variance-authority";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var sliderControlVariants = cva15([
   // Base layout
   "relative flex w-full touch-none select-none items-center",
@@ -3941,7 +3968,7 @@ function Slider({
       max,
       thumbAlignment: "edge",
       ...props,
-      children: /* @__PURE__ */ jsxs16(
+      children: /* @__PURE__ */ jsxs17(
         SliderPrimitive.Control,
         {
           "data-slot": "slider-control",
@@ -4250,13 +4277,13 @@ var tagVariants = cva18(
   {
     variants: {
       color: {
-        violet: "bg-violet-100 text-violet-800",
-        cyan: "bg-cyan-100 text-cyan-900",
-        indigo: "bg-indigo-100 text-indigo-800",
-        orange: "bg-orange-100 text-orange-900",
-        pink: "bg-pink-100 text-pink-900",
-        verdant: "bg-verdant-100 text-verdant-800",
-        stone: "bg-stone-200 text-stone-800"
+        violet: "bg-violet-200 text-black",
+        cyan: "bg-cyan-200 text-black",
+        indigo: "bg-indigo-100 text-black",
+        orange: "bg-orange-200 text-black",
+        pink: "bg-pink-200 text-black",
+        verdant: "bg-verdant-200 text-black",
+        stone: "bg-stone-200 text-black"
       }
     },
     defaultVariants: {
@@ -4277,7 +4304,7 @@ function Tag({ className, color, ref, ...props }) {
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
-import { jsx as jsx34, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function AlertDialog({ ...props }) {
   return /* @__PURE__ */ jsx34(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
@@ -4321,7 +4348,7 @@ function AlertDialogContent({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs17(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", children: [
+  return /* @__PURE__ */ jsxs18(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", children: [
     /* @__PURE__ */ jsx34(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx34(
       AlertDialogPrimitive.Popup,
@@ -4809,7 +4836,7 @@ function TabsContent({ className, ...props }) {
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Separator as SeparatorPrimitive2 } from "@base-ui/react/separator";
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var DropdownMenu = MenuPrimitive.Root;
 var DropdownMenuGroup = MenuPrimitive.Group;
 var DropdownMenuSub = MenuPrimitive.SubmenuRoot;
@@ -4873,7 +4900,7 @@ function DropdownMenuSubTrigger({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     MenuPrimitive.SubmenuTrigger,
     {
       "data-slot": "dropdown-sub-trigger",
@@ -4971,7 +4998,7 @@ function DropdownMenuCheckboxItem({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     MenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-checkbox-item",
@@ -5002,7 +5029,7 @@ function DropdownMenuRadioItem({
   ref,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     MenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-radio-item",
@@ -5082,7 +5109,7 @@ function DropdownMenuShortcut({
 // src/components/ui/chart.tsx
 import * as React14 from "react";
 import * as RechartsPrimitive from "recharts";
-import { Fragment, jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
 var INITIAL_DIMENSION = { width: 320, height: 200 };
 var ChartContext = React14.createContext(null);
@@ -5103,7 +5130,7 @@ function ChartContainer({
 }) {
   const uniqueId = React14.useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx38(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx38(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs20(
     "div",
     {
       "data-slot": "chart",
@@ -5216,7 +5243,7 @@ function ChartTooltipContent({
     return null;
   }
   const nestLabel = payload.length === 1 && indicator !== "dot";
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: cn(
@@ -5236,7 +5263,7 @@ function ChartTooltipContent({
                 "flex w-full flex-wrap items-stretch gap-1.5 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-secondary",
                 indicator === "dot" && "items-center"
               ),
-              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs19(Fragment, { children: [
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs20(Fragment, { children: [
                 itemConfig?.icon ? /* @__PURE__ */ jsx38(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx38(
                   "div",
                   {
@@ -5255,7 +5282,7 @@ function ChartTooltipContent({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs19(
+                /* @__PURE__ */ jsxs20(
                   "div",
                   {
                     className: cn(
@@ -5263,7 +5290,7 @@ function ChartTooltipContent({
                       nestLabel ? "items-end" : "items-center"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs19("div", { className: "grid gap-1.5", children: [
+                      /* @__PURE__ */ jsxs20("div", { className: "grid gap-1.5", children: [
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ jsx38("span", { className: "text-secondary", children: itemConfig?.label ?? item.name })
                       ] }),
@@ -5304,7 +5331,7 @@ function ChartLegendContent({
         const key = `${nameKey ?? item.dataKey ?? "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         const indicatorColor = item.color ?? (itemConfig && "color" in itemConfig ? itemConfig.color : void 0);
-        return /* @__PURE__ */ jsxs19(
+        return /* @__PURE__ */ jsxs20(
           "div",
           {
             className: cn(
@@ -5710,7 +5737,7 @@ import {
 import {
   flexRender
 } from "@tanstack/react-table";
-import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
 function DataTableView({
   table,
   emptyState = "No results.",
@@ -5724,7 +5751,7 @@ function DataTableView({
     {
       className: cn("relative", loading && "opacity-50 pointer-events-none"),
       "aria-busy": loading || void 0,
-      children: /* @__PURE__ */ jsxs20(Table, { className, ...props, children: [
+      children: /* @__PURE__ */ jsxs21(Table, { className, ...props, children: [
         /* @__PURE__ */ jsx41(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx41(TableRow, { children: headerGroup.headers.map((header) => {
           const sorted = header.column.getIsSorted();
           return /* @__PURE__ */ jsx41(
@@ -5768,7 +5795,7 @@ function DataTableView({
 }
 
 // src/components/ui/data-table/data-table-pagination.tsx
-import { jsx as jsx42, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
 function DataTablePagination({
   table,
   pageSizeOptions = [10, 20, 50, 100],
@@ -5780,7 +5807,7 @@ function DataTablePagination({
   const from = totalRows > 0 ? pageIndex * pageSize + 1 : 0;
   const to = Math.min((pageIndex + 1) * pageSize, totalRows);
   const resolvedPageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -5798,7 +5825,7 @@ function DataTablePagination({
             children: totalRows > 0 ? `Showing ${from}\u2013${to} of ${totalRows}` : "No results"
           }
         ),
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx42(
             Button,
             {
@@ -5845,7 +5872,7 @@ function DataTablePagination({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx42(
             Text,
             {
@@ -5855,7 +5882,7 @@ function DataTablePagination({
               children: "Rows per page"
             }
           ),
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs22(
             Select,
             {
               value: pageSize.toString(),
@@ -5873,7 +5900,7 @@ function DataTablePagination({
 }
 
 // src/components/ui/data-table/data-table-column-header.tsx
-import { jsx as jsx43, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 function DataTableColumnHeader({
   column,
   title,
@@ -5893,7 +5920,7 @@ function DataTableColumnHeader({
     );
   }
   const sorted = column.getIsSorted();
-  return /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: cn("flex items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx43(Text, { as: "span", variant: "body-sm-medium", children: title }),
     /* @__PURE__ */ jsx43(
       Button,
@@ -5914,7 +5941,7 @@ function DataTableColumnHeader({
 }
 
 // src/components/ui/data-table/data-table.tsx
-import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 function createSelectColumn() {
   return {
     id: "select",
@@ -5995,7 +6022,7 @@ function DataTable({
       initialState: { pagination: { pageSize: initialPageSize } }
     }
   });
-  return /* @__PURE__ */ jsxs23("div", { children: [
+  return /* @__PURE__ */ jsxs24("div", { children: [
     /* @__PURE__ */ jsx44(
       DataTableView,
       {
@@ -6010,12 +6037,12 @@ function DataTable({
 }
 
 // src/components/ui/data-table/data-table-view-options.tsx
-import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 function DataTableViewOptions({
   table,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs24(DropdownMenu, { children: [
+  return /* @__PURE__ */ jsxs25(DropdownMenu, { children: [
     /* @__PURE__ */ jsx45(
       DropdownMenuTrigger,
       {
@@ -6031,7 +6058,7 @@ function DataTableViewOptions({
         )
       }
     ),
-    /* @__PURE__ */ jsxs24(DropdownMenuContent, { align: "end", children: [
+    /* @__PURE__ */ jsxs25(DropdownMenuContent, { align: "end", children: [
       /* @__PURE__ */ jsx45(DropdownMenuLabel, { children: "Toggle columns" }),
       /* @__PURE__ */ jsx45(DropdownMenuSeparator, {}),
       table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsx45(
@@ -6272,6 +6299,7 @@ export {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
+  SidebarSeparator,
   Slider,
   StarIcon,
   StatementIcon,