@epilot/spark-ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/dist/index.js

@@ -1,14 +1,107 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import * as React2 from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React4 from 'react';
+import { useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Drawer as Drawer$1 } from 'vaul';
+import { curveLinear, curveStepBefore, curveStepAfter, curveStep, curveMonotoneX } from '@visx/curve';
+import { localPoint } from '@visx/event';
+import { Group } from '@visx/group';
+import { scaleTime, scaleLinear } from '@visx/scale';
+import { LinePath } from '@visx/shape';
+import { useTooltip, Tooltip } from '@visx/tooltip';
+import { bisector, extent } from '@visx/vendor/d3-array';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var ChevronDown = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "16",
+    viewBox: "0 0 16 16",
+    width: "16",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8 7.19992L4.93333 10.2666L4 9.33325L8 5.33325L12 9.33325L11.0667 10.2666L8 7.19992Z",
+        fill: "currentColor",
+        fillOpacity: "0.934"
+      }
+    )
+  }
+);
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    className: cn("border-b border-gray", className),
+    ref,
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    className: cn(
+      "flex flex-1 items-center justify-between rounded-md py-4 font-medium underline-offset-4 transition-all hover:underline focus-visible:ring [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: "h-4 w-4 shrink-0 transition-transform duration-200",
+          role: "presentation"
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn(className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var Badge = React4.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded-md bg-base-gray-soft px-1.5 text-center text-xs font-normal tabular-nums text-gray",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+Badge.displayName = "Badge";
 var buttonVariants = cva(
   `inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer text-base font-medium transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0`,
   {
@@ -36,94 +129,225 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
   }
 );
 Button.displayName = "Button";
-var Card = React2.forwardRef(
+var InfoIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var PendingIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20ZM12.5 7V12.25L16.5 14.65L15.75 15.85L11 13V7H12.5Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var WarningIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M1 21L12 2L23 21H1ZM4.45 19H19.55L12 6L4.45 19ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM11 15H13V10H11V15Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var getIcon = (type) => {
+  switch (type) {
+    case "pending":
+      return /* @__PURE__ */ jsx(PendingIcon, { className: "shrink-0 text-info-light", role: "presentation" });
+    case "success":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: "shrink-0 text-info-light", role: "presentation" });
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, { className: "shrink-0 text-orange-11", role: "presentation" });
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { className: "shrink-0 text-info-light", role: "presentation" });
+    default:
+      return null;
+  }
+};
+var getContainerClasses = (type) => {
+  const baseClasses = "flex items-center gap-3 rounded-2xl p-4 text-sm transition-colors duration-500";
+  switch (type) {
+    case "error":
+      return `${baseClasses} bg-base-error-soft text-error`;
+    case "pending":
+    case "success":
+      return `${baseClasses} bg-base-info-soft text-info`;
+    case "warning":
+      return `${baseClasses} bg-orange-a3 text-orange-12`;
+    case "info":
+    default:
+      return `${baseClasses} bg-base-info-soft text-info`;
+  }
+};
+var Callout = ({ text, type = "info", title, role, className }) => {
+  const icon = getIcon(type);
+  return /* @__PURE__ */ jsxs("div", { className: cn(getContainerClasses(type), className), role, children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      title && /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: title }),
+      text
+    ] })
+  ] });
+};
+Callout.displayName = "Callout";
+var Card = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("relative flex w-full flex-col gap-1 rounded-2xl bg-slate-a3 p-4", className),
+      className: cn(
+        "relative flex w-full flex-col gap-1 rounded-2xl bg-base-gray-soft p-4",
+        className
+      ),
       ref,
       ...props
     }
   )
 );
 Card.displayName = "Card";
-var CardHeader = React2.forwardRef(
+var CardHeader = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4", className), ref, ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardIcon = React2.forwardRef(
+var CardIcon = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex shrink-0 items-center justify-center text-slate-11", className),
+      className: cn("flex shrink-0 items-center justify-center text-accent-active", className),
       ref,
       ...props
     }
   )
 );
 CardIcon.displayName = "CardIcon";
-var CardTitle = React2.forwardRef(
+var CardTitle = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h3",
     {
-      className: cn("text-base font-medium leading-5 text-slate-12", className),
+      className: cn("text-base font-medium leading-5 text-gray", className),
       ref,
       ...props
     }
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-5 text-slate-11", className), ref, ...props }));
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-5 text-gray-light", className), ref, ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React2.forwardRef(
+var CardContent = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("", className), ref, ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React2.forwardRef(
+var CardFooter = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex items-center justify-end gap-2 pt-2", className),
+      className: cn("flex items-center text-gray justify-end gap-2 pt-2", className),
       ref,
       ...props
     }
   )
 );
 CardFooter.displayName = "CardFooter";
-var CardSkeleton = React2.forwardRef(
+var CardSkeleton = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "relative flex w-full items-center gap-4 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        "relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80",
         className
       ),
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-slate-a5" }),
+        /* @__PURE__ */ jsx("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft" }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-slate-a5" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-slate-a5" })
+          /* @__PURE__ */ jsx("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft" })
         ] })
       ]
     }
   )
 );
 CardSkeleton.displayName = "CardSkeleton";
-var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = DialogPrimitive.Portal;
-var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
+var CheckIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4.77498 7.575L9.01248 3.3375C9.11248 3.2375 9.22915 3.1875 9.36248 3.1875C9.49582 3.1875 9.61248 3.2375 9.71248 3.3375C9.81248 3.4375 9.86248 3.55625 9.86248 3.69375C9.86248 3.83125 9.81248 3.95 9.71248 4.05L5.12498 8.65C5.02498 8.75 4.90832 8.8 4.77498 8.8C4.64165 8.8 4.52498 8.75 4.42498 8.65L2.27498 6.5C2.17498 6.4 2.12706 6.28125 2.13123 6.14375C2.1354 6.00625 2.18748 5.8875 2.28748 5.7875C2.38748 5.6875 2.50623 5.6375 2.64373 5.6375C2.78123 5.6375 2.89998 5.6875 2.99998 5.7875L4.77498 7.575Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var Checkbox = React4.forwardRef(({ className, size = "default", bordered = false, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    className: cn(
+      "peer inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-base-accent-solid data-[state=unchecked]:bg-base-accent-soft",
+      size === "default" && "h-4 w-4",
+      size === "large" && "h-6 w-6",
+      bordered ? "border-2 border-accent-ui" : "border-2 border-transparent",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "inline-flex items-center justify-center text-accent-contrast transition-none", children: /* @__PURE__ */ jsx(CheckIcon, { className: cn(size === "large" ? "size-4" : "size-3.5") }) })
+  }
+));
+Checkbox.displayName = "Checkbox";
+var Dialog = SheetPrimitive.Root;
+var DialogTrigger = SheetPrimitive.Trigger;
+var DialogPortal = SheetPrimitive.Portal;
+var DialogClose = SheetPrimitive.Close;
+var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
   {
     className: cn(
       "fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-black-a8",
@@ -134,16 +358,16 @@ var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PU
     ...props
   }
 ));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+DialogOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var onInteractOutsideHandler = (event) => {
   const target = event.target;
   const isOverlay = target.dataset.overlay === "true";
   if (!isOverlay) event.preventDefault();
 };
-var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
+    SheetPrimitive.Content,
     {
       className: cn(
         "fixed left-[50%] top-[50%] z-50 grid w-[90%] min-w-80 max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-slate-2 p-6 text-gray shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-top-48% dark:bg-gray-2 sm:w-1/2",
@@ -156,7 +380,7 @@ var DialogContent = React2.forwardRef(({ className, children, ...props }, ref) =
     }
   )
 ] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogContent.displayName = SheetPrimitive.Content.displayName;
 var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("", className), ...props });
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
@@ -167,30 +391,30 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
+var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
   {
     className: cn("text-lg font-bold text-gray", className),
     ref,
     ...props
   }
 ));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
+DialogTitle.displayName = SheetPrimitive.Title.displayName;
+var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
   {
     className: cn("text-md text-gray", className),
     ref,
     ...props
   }
 ));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var DisplayField = React2.forwardRef(
+DialogDescription.displayName = SheetPrimitive.Description.displayName;
+var DisplayField = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "relative flex min-h-12 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4",
+        "relative flex min-h-12 w-full justify-between gap-2 rounded-2xl bg-base-gray-soft p-4",
         className
       ),
       ref,
@@ -199,26 +423,23 @@ var DisplayField = React2.forwardRef(
   )
 );
 DisplayField.displayName = "DisplayField";
-var DisplayFieldLabel = React2.forwardRef(
+var DisplayFieldLabel = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn(
-        "text-sm font-medium leading-5 text-slate-11 [overflow-wrap:break-word]",
-        className
-      ),
+      className: cn("text-sm font-medium leading-5 text-gray-light wrap-break-word", className),
       ref,
       ...props
     }
   )
 );
 DisplayFieldLabel.displayName = "DisplayFieldLabel";
-var DisplayFieldValue = React2.forwardRef(
+var DisplayFieldValue = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
-        "min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-slate-12",
+        "min-h-5 w-full whitespace-pre-wrap text-base tabular-nums leading-5 text-gray",
         className
       ),
       ref,
@@ -227,29 +448,1071 @@ var DisplayFieldValue = React2.forwardRef(
   )
 );
 DisplayFieldValue.displayName = "DisplayFieldValue";
-var DisplayFieldContent = React2.forwardRef(
+var DisplayFieldContent = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("", className), ref, ...props })
 );
 DisplayFieldContent.displayName = "DisplayFieldContent";
-var DisplayFieldSkeleton = React2.forwardRef(
+var DisplayFieldSkeleton = React4.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-slate-a3 p-4 opacity-80",
+        "relative flex h-20 w-full flex-col gap-y-2 rounded-2xl bg-base-gray-soft p-4 opacity-80",
         className
       ),
       ref,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-slate-a5" }),
-        /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-slate-a5" })
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-1/2 max-w-52 animate-pulse rounded-md bg-base-gray-soft" }),
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 max-w-72 animate-pulse rounded-md bg-base-gray-soft" })
       ]
     }
   )
 );
 DisplayFieldSkeleton.displayName = "DisplayFieldSkeleton";
+var Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsx(Drawer$1.Root, { shouldScaleBackground, ...props });
+Drawer.displayName = "Drawer";
+var DrawerTrigger = Drawer$1.Trigger;
+var DrawerPortal = Drawer$1.Portal;
+var DrawerClose = Drawer$1.Close;
+var DrawerOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Overlay,
+  {
+    className: cn("fixed inset-0 z-50 bg-black-a6 dark:bg-black-a8", className),
+    "data-overlay": "true",
+    ref,
+    ...props
+  }
+));
+DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
+var DrawerPill = ({ className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "mx-auto mt-2.5 h-1.5 w-16 shrink-0 rounded-[24px] bg-base-gray-soft",
+      className
+    )
+  }
+);
+var DrawerContent = React4.forwardRef(({ className, pillClassName, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer$1.Content,
+    {
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col gap-4 rounded-t-2xl bg-slate-2 text-gray dark:bg-gray-2",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(DrawerPill, { className: pillClassName }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 px-6 py-3", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2 text-gray", className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Title,
+  {
+    className: cn("text-lg font-bold text-gray", className),
+    ref,
+    ...props
+  }
+));
+DrawerTitle.displayName = Drawer$1.Title.displayName;
+var DrawerDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Description,
+  {
+    className: cn("text-sm text-gray", className),
+    ref,
+    ...props
+  }
+));
+DrawerDescription.displayName = Drawer$1.Description.displayName;
+var POSITIONS = {
+  solar: { x: 120, y: 70 },
+  grid: { x: 360, y: 70 },
+  home: { x: 240, y: 190 },
+  battery: { x: 100, y: 330 },
+  "heat-pump": { x: 240, y: 355 },
+  ev: { x: 380, y: 330 }
+};
+var NODE_RADIUS = 32;
+var HOME_RADIUS = 38;
+var STYLES = {
+  solar: { label: "Solar", bg: "var(--orange-3)", icon: "var(--orange-11)", flow: "var(--orange-9)" },
+  battery: { label: "Battery", bg: "var(--green-3)", icon: "var(--green-11)", flow: "var(--green-9)" },
+  grid: { label: "Grid", bg: "var(--mauve-3)", icon: "var(--mauve-11)", flow: "var(--mauve-9)" },
+  home: { label: "Home", bg: "var(--slate-3)", icon: "var(--slate-11)", flow: "var(--slate-9)" },
+  ev: { label: "EV Charger", bg: "var(--blue-3)", icon: "var(--blue-11)", flow: "var(--blue-9)" },
+  "heat-pump": { label: "Heat Pump", bg: "var(--red-3)", icon: "var(--red-11)", flow: "var(--red-9)" }
+};
+var defaultFormatPower = (power) => {
+  const abs = Math.abs(power);
+  if (abs >= 1) return `${abs.toFixed(1)} kW`;
+  return `${(abs * 1e3).toFixed(0)} W`;
+};
+function getFlowPath(from, to) {
+  const mx = (from.x + to.x) / 2;
+  return `M ${from.x} ${from.y} C ${mx} ${from.y}, ${mx} ${to.y}, ${to.x} ${to.y}`;
+}
+function getAnimDuration(power) {
+  const clamped = Math.max(0.1, Math.min(10, Math.abs(power)));
+  return Math.max(1, 4 - clamped * 0.3);
+}
+function SolarIcon({ color }) {
+  return /* @__PURE__ */ jsxs("g", { style: { color }, children: [
+    /* @__PURE__ */ jsx("rect", { fill: "none", height: "18", rx: "1.5", stroke: "currentColor", strokeWidth: "1.8", width: "18", x: "-9", y: "-9" }),
+    /* @__PURE__ */ jsx("line", { stroke: "currentColor", strokeWidth: "1", x1: "-9", x2: "9", y1: "-3", y2: "-3" }),
+    /* @__PURE__ */ jsx("line", { stroke: "currentColor", strokeWidth: "1", x1: "-9", x2: "9", y1: "3", y2: "3" }),
+    /* @__PURE__ */ jsx("line", { stroke: "currentColor", strokeWidth: "1", x1: "-3", x2: "-3", y1: "-9", y2: "9" }),
+    /* @__PURE__ */ jsx("line", { stroke: "currentColor", strokeWidth: "1", x1: "3", x2: "3", y1: "-9", y2: "9" })
+  ] });
+}
+function BatteryIcon({ color, level = 50 }) {
+  const h = Math.max(1, Math.min(100, level) / 100 * 16);
+  return /* @__PURE__ */ jsxs("g", { style: { color }, children: [
+    /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "3", rx: "1", width: "6", x: "-3", y: "-13" }),
+    /* @__PURE__ */ jsx("rect", { fill: "none", height: "20", rx: "2.5", stroke: "currentColor", strokeWidth: "1.8", width: "14", x: "-7", y: "-10" }),
+    /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: h, opacity: 0.5, rx: "1", width: "9", x: "-4.5", y: 10 - h })
+  ] });
+}
+function GridIcon({ color }) {
+  return /* @__PURE__ */ jsx("g", { style: { color }, children: /* @__PURE__ */ jsx("path", { d: "M0 -12 L0 12 M-9 -5 L9 -5 M-7 1 L7 1 M-5 7 L5 7", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "2" }) });
+}
+function HomeIcon({ color }) {
+  return /* @__PURE__ */ jsxs("g", { style: { color }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M-12 2 L0 -11 L12 2", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.2" }),
+    /* @__PURE__ */ jsx("rect", { fill: "none", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.8", width: "18", x: "-9", y: "2" }),
+    /* @__PURE__ */ jsx("rect", { fill: "currentColor", height: "7", opacity: 0.35, rx: "1", width: "6", x: "-3", y: "7" })
+  ] });
+}
+function EvIcon({ color }) {
+  return /* @__PURE__ */ jsxs("g", { style: { color }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M-11 3 L-9 -3 L-3 -8 L7 -8 L11 -1 L11 3 Z", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "-5", cy: "5", fill: "none", r: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "5", fill: "none", r: "3", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M1 -5 L-1 0 L2 0 L0 4", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.2" })
+  ] });
+}
+function HeatPumpIcon({ color }) {
+  return /* @__PURE__ */ jsxs("g", { style: { color }, children: [
+    /* @__PURE__ */ jsx("rect", { fill: "none", height: "16", rx: "3", stroke: "currentColor", strokeWidth: "1.8", width: "22", x: "-11", y: "-8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", fill: "none", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M0 -4 C2 -2 2 2 0 4 C-2 2 -2 -2 0 -4", fill: "currentColor", opacity: 0.3 }),
+    /* @__PURE__ */ jsx("path", { d: "M-4 0 C-2 -2 2 -2 4 0 C2 2 -2 2 -4 0", fill: "currentColor", opacity: 0.3 })
+  ] });
+}
+var NODE_ICONS = {
+  solar: SolarIcon,
+  battery: BatteryIcon,
+  grid: GridIcon,
+  home: HomeIcon,
+  ev: EvIcon,
+  "heat-pump": HeatPumpIcon
+};
+function FlowConnection({
+  from,
+  to,
+  color,
+  power
+}) {
+  const d = getFlowPath(from, to);
+  const dur = getAnimDuration(power);
+  const dots = 3;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("path", { d, fill: "none", opacity: 0.15, stroke: color, strokeWidth: 2 }),
+    Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx("circle", { fill: color, opacity: 0.85, r: 3.5, children: /* @__PURE__ */ jsx("animateMotion", { begin: `${i * dur / dots}s`, dur: `${dur}s`, path: d, repeatCount: "indefinite" }) }, i))
+  ] });
+}
+function FlowNode({
+  node,
+  formatPower
+}) {
+  const pos = POSITIONS[node.type];
+  const style = STYLES[node.type];
+  const radius = node.type === "home" ? HOME_RADIUS : NODE_RADIUS;
+  const Icon2 = NODE_ICONS[node.type];
+  const label = node.label ?? style.label;
+  const inactive = node.power === 0;
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        fill: style.bg,
+        opacity: inactive ? 0.5 : 1,
+        r: radius,
+        stroke: style.flow,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { transform: "translate(0, -2)", children: /* @__PURE__ */ jsx(Icon2, { color: style.icon, level: node.batteryLevel }) }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        fill: style.icon,
+        fontSize: "11",
+        fontWeight: "600",
+        textAnchor: "middle",
+        y: radius + 16,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        fill: style.icon,
+        fontSize: "12",
+        fontWeight: "500",
+        opacity: 0.75,
+        textAnchor: "middle",
+        y: radius + 30,
+        children: formatPower(node.power)
+      }
+    ),
+    node.type === "battery" && node.batteryLevel != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: style.flow,
+          height: "16",
+          rx: "8",
+          width: "24",
+          x: radius - 24,
+          y: -radius + 2
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "text",
+        {
+          fill: "white",
+          fontSize: "9",
+          fontWeight: "700",
+          textAnchor: "middle",
+          x: radius - 12,
+          y: -radius + 13,
+          children: [
+            Math.round(node.batteryLevel),
+            "%"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function EnergyFlowChart({
+  nodes,
+  flows = [],
+  className,
+  formatPower = defaultFormatPower
+}) {
+  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.type, n])), [nodes]);
+  const validFlows = useMemo(
+    () => flows.filter((f) => nodeMap.has(f.from) && nodeMap.has(f.to) && f.power > 0),
+    [flows, nodeMap]
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": "Energy flow diagram",
+      className: "block h-auto w-full",
+      role: "img",
+      viewBox: "0 0 480 420",
+      children: [
+        validFlows.map((f, i) => /* @__PURE__ */ jsx(
+          FlowConnection,
+          {
+            color: STYLES[f.from].flow,
+            from: POSITIONS[f.from],
+            power: f.power,
+            to: POSITIONS[f.to]
+          },
+          `${f.from}-${f.to}-${i}`
+        )),
+        nodes.map((node) => /* @__PURE__ */ jsx(FlowNode, { formatPower, node }, node.type))
+      ]
+    }
+  ) });
+}
+EnergyFlowChart.displayName = "EnergyFlowChart";
+var hintIdCounter = 0;
+var Input = React4.forwardRef(
+  ({ containerClassName, label, value, className, onChange, readOnly, hint, icon, ...props }, ref) => {
+    const hintId = useMemo(() => {
+      if (!hint) return void 0;
+      return `input-hint-${++hintIdCounter}`;
+    }, [hint]);
+    const customClassName = {
+      "border-transparent": !label?.length,
+      "border-input-active": props["aria-invalid"] !== true && (typeof value === "string" ? value.length > 0 : typeof value === "number" ? true : false),
+      "text-error! !focus-visible:border-input-invalid border-input-invalid!": props["aria-invalid"] === true
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex w-full flex-col gap-y-1 rounded-2xl bg-input-base px-4 py-3",
+          containerClassName
+        ),
+        children: [
+          label && /* @__PURE__ */ jsx("label", { className: "text-sm font-normal leading-5 text-gray-light", htmlFor: label, children: label }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-describedby": hintId,
+                className: cn(
+                  "flex h-10 w-full rounded-none border-b-2 border-input bg-transparent py-2 text-base leading-5 text-gray outline-hidden transition-colors duration-100 placeholder:text-gray-disabled focus:border-input-active read-only:focus:border-transparent focus-visible:border-input-active read-only:focus-visible:border-transparent disabled:cursor-not-allowed disabled:border-input-disabled disabled:text-gray-disabled [&:user-invalid]:border-input-invalid [&:user-invalid]:text-error [&:user-invalid]:focus-visible:border-input-invalid [&:user-valid]:border-input-active",
+                  customClassName,
+                  className
+                ),
+                id: label,
+                onChange,
+                readOnly,
+                ref,
+                value,
+                ...props
+              }
+            ),
+            icon ? icon : null
+          ] }),
+          hint ? /* @__PURE__ */ jsx("div", { id: hintId, children: hint }) : null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Label = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "label",
+    {
+      className: cn("text-base font-normal leading-5 text-gray-light", className),
+      ref,
+      ...props
+    }
+  )
+);
+Label.displayName = "Label";
+var DEFAULT_MARGIN = { top: 16, right: 16, bottom: 40, left: 48 };
+var CURVE_MAP = {
+  monotone: curveMonotoneX,
+  step: curveStep,
+  "step-after": curveStepAfter,
+  "step-before": curveStepBefore,
+  linear: curveLinear
+};
+var resolveCurve = (type) => CURVE_MAP[type];
+var bisectDate = bisector((d) => d.date).left;
+var defaultFormatDate = (date) => date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+var defaultFormatValue = (value) => value.toLocaleString();
+var LINE_COLORS = [
+  "stroke-spark-9",
+  "stroke-green-9",
+  "stroke-blue-9",
+  "stroke-orange-9",
+  "stroke-red-9"
+];
+var DOT_COLORS = ["fill-spark-9", "fill-green-9", "fill-blue-9", "fill-orange-9", "fill-red-9"];
+var TEXT_COLORS = [
+  "text-spark-a11",
+  "text-success-light",
+  "text-info-light",
+  "text-warning-light",
+  "text-error-light"
+];
+function LineChart({
+  series,
+  width,
+  height,
+  margin = DEFAULT_MARGIN,
+  curve: defaultCurve = "monotone",
+  showGrid = true,
+  showTooltip: enableTooltip = true,
+  className,
+  xTickCount = 5,
+  yTickCount = 4,
+  formatDate = defaultFormatDate,
+  formatValue = defaultFormatValue
+}) {
+  const { showTooltip, hideTooltip, tooltipData, tooltipLeft, tooltipTop, tooltipOpen } = useTooltip();
+  const innerWidth = Math.max(0, width - margin.left - margin.right);
+  const innerHeight = Math.max(0, height - margin.top - margin.bottom);
+  const allData = useMemo(() => series.flatMap((s) => s.data), [series]);
+  const xScale = useMemo(
+    () => scaleTime({
+      range: [0, innerWidth],
+      domain: extent(allData, (d) => d.date)
+    }),
+    [allData, innerWidth]
+  );
+  const yScale = useMemo(
+    () => scaleLinear({
+      range: [innerHeight, 0],
+      domain: [0, Math.max(...allData.map((d) => d.value)) * 1.1],
+      nice: true
+    }),
+    [allData, innerHeight]
+  );
+  const xTicks = xScale.ticks(xTickCount);
+  const yTicks = yScale.ticks(yTickCount);
+  const handleTooltip = useCallback(
+    (event) => {
+      if (!enableTooltip) return;
+      const point = localPoint(event);
+      if (!point) return;
+      const x0 = xScale.invert(point.x - margin.left);
+      for (let i = 0; i < series.length; i++) {
+        const s = series[i];
+        if (!s) continue;
+        const index = bisectDate(s.data, x0, 1);
+        const d0 = s.data[index - 1];
+        const d1 = s.data[index];
+        if (!d0) continue;
+        const d = d1 && x0.valueOf() - d0.date.valueOf() > d1.date.valueOf() - x0.valueOf() ? d1 : d0;
+        showTooltip({
+          tooltipData: { datum: d, seriesIndex: i },
+          tooltipLeft: xScale(d.date) + margin.left,
+          tooltipTop: yScale(d.value) + margin.top
+        });
+        break;
+      }
+    },
+    [enableTooltip, margin, series, showTooltip, xScale, yScale]
+  );
+  if (width < 10 || height < 10) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx("svg", { className: "block", height, width, children: /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+      showGrid && yTicks.map((tick) => /* @__PURE__ */ jsx(
+        "line",
+        {
+          className: "stroke-slate-a4",
+          strokeDasharray: "4,4",
+          x1: 0,
+          x2: innerWidth,
+          y1: yScale(tick),
+          y2: yScale(tick)
+        },
+        `grid-y-${tick}`
+      )),
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          className: "stroke-slate-a6",
+          x1: 0,
+          x2: innerWidth,
+          y1: innerHeight,
+          y2: innerHeight
+        }
+      ),
+      xTicks.map((tick) => /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "fill-slate-a11 text-xs",
+          dy: "1em",
+          textAnchor: "middle",
+          x: xScale(tick),
+          y: innerHeight + 8,
+          children: formatDate(tick)
+        },
+        `x-${tick.valueOf()}`
+      )),
+      yTicks.map((tick) => /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "fill-slate-a11 text-xs",
+          dx: "-0.5em",
+          dy: "0.32em",
+          textAnchor: "end",
+          x: -4,
+          y: yScale(tick),
+          children: formatValue(tick)
+        },
+        `y-${tick}`
+      )),
+      series.map((s, i) => /* @__PURE__ */ jsx(
+        LinePath,
+        {
+          className: cn(LINE_COLORS[i % LINE_COLORS.length], s.className),
+          curve: resolveCurve(s.curve ?? defaultCurve),
+          data: s.data,
+          fill: "none",
+          strokeDasharray: s.dashed ? s.dashPattern ?? "6,4" : void 0,
+          strokeWidth: 2,
+          x: (d) => xScale(d.date),
+          y: (d) => yScale(d.value)
+        },
+        s.id
+      )),
+      enableTooltip && /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: "transparent",
+          height: innerHeight,
+          onMouseLeave: hideTooltip,
+          onMouseMove: handleTooltip,
+          onTouchEnd: hideTooltip,
+          onTouchMove: handleTooltip,
+          width: innerWidth,
+          x: 0,
+          y: 0
+        }
+      ),
+      tooltipOpen && tooltipData && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            className: "stroke-slate-a6",
+            pointerEvents: "none",
+            strokeDasharray: "4,4",
+            x1: xScale(tooltipData.datum.date),
+            x2: xScale(tooltipData.datum.date),
+            y1: 0,
+            y2: innerHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: cn(DOT_COLORS[tooltipData.seriesIndex % DOT_COLORS.length]),
+            cx: xScale(tooltipData.datum.date),
+            cy: yScale(tooltipData.datum.value),
+            pointerEvents: "none",
+            r: 4,
+            stroke: "white",
+            strokeWidth: 2
+          }
+        )
+      ] })
+    ] }) }),
+    tooltipOpen && !!tooltipData && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        left: tooltipLeft,
+        style: {
+          position: "absolute",
+          pointerEvents: "none",
+          background: "transparent",
+          border: "none",
+          boxShadow: "none",
+          padding: 0
+        },
+        top: tooltipTop,
+        children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-slate-2 px-3 py-2 text-sm shadow-md dark:bg-gray-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-light", children: formatDate(tooltipData.datum.date) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "font-medium",
+                TEXT_COLORS[tooltipData.seriesIndex % TEXT_COLORS.length]
+              ),
+              children: formatValue(tooltipData.datum.value)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+LineChart.displayName = "LineChart";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React4.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    align,
+    className: cn(
+      "z-50 w-72 rounded-xl border bg-slate-2 p-4 shadow-xs outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-popover-content-transform-origin)",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var sizeClasses = {
+  sm: "h-1",
+  default: "h-2",
+  lg: "h-3"
+};
+var Progress = React4.forwardRef(
+  ({ className, value, max = 100, size = "default", ...props }, ref) => {
+    const percentage = Math.min(100, Math.max(0, value / max * 100));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-valuemax": max,
+        "aria-valuemin": 0,
+        "aria-valuenow": value,
+        className: cn(
+          "w-full overflow-hidden rounded-full bg-slate-a4",
+          sizeClasses[size],
+          className
+        ),
+        ref,
+        role: "progressbar",
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-spark-9 transition-all duration-300",
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var ScrollArea = React4.forwardRef(({ className, children, direction = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    className: cn("relative overflow-hidden", className),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children }),
+      direction !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+      direction !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px empty:hidden",
+      className
+    ),
+    orientation,
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-[24px] bg-gray-8" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+var ChevronDownIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 14.975C11.8667 14.975 11.7417 14.9542 11.625 14.9125C11.5083 14.8708 11.4 14.8 11.3 14.7L6.7 10.1C6.51667 9.91667 6.425 9.68334 6.425 9.4C6.425 9.11667 6.51667 8.88334 6.7 8.7C6.88334 8.51667 7.11667 8.425 7.4 8.425C7.68334 8.425 7.91667 8.51667 8.1 8.7L12 12.6L15.9 8.7C16.0833 8.51667 16.3167 8.425 16.6 8.425C16.8833 8.425 17.1167 8.51667 17.3 8.7C17.4833 8.88334 17.575 9.11667 17.575 9.4C17.575 9.68334 17.4833 9.91667 17.3 10.1L12.7 14.7C12.6 14.8 12.4917 14.8708 12.375 14.9125C12.2583 14.9542 12.1333 14.975 12 14.975Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Trigger,
+  {
+    className: cn(
+      "flex w-full items-center justify-between focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ref,
+    ...props,
+    children
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectTriggerIcon = () => /* @__PURE__ */ jsx(
+  SelectPrimitive.Icon,
+  {
+    asChild: true,
+    className: "not-sr-only in-data-[state=open]:rotate-180",
+    role: "presentation",
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-6 shrink-0 text-spark-a11" })
+  }
+);
+SelectTriggerIcon.displayName = "SelectTriggerIcon";
+var SelectScrollUpButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    className: cn(
+      "absolute left-0 right-0 top-0 z-1 flex w-full cursor-default items-center justify-center py-1 transition-all max-sm:pointer-events-none",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-6 shrink-0 rotate-180" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    className: cn(
+      "absolute bottom-0 left-0 right-0 z-1 flex w-full cursor-default items-center justify-center py-1 transition-all max-sm:pointer-events-none",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-6 shrink-0" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
+    ref,
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Item,
+  {
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    className: cn("-mx-1 my-1 h-px", className),
+    ref,
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    className: cn(
+      "duration-250 relative z-50 max-h-96 w-[var(--radix-select-trigger-width)] min-w-[8rem] overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
+      position === "popper" && "data-[side=bottom]:translate-y-0 data-[side=left]:-translate-x-0 data-[side=right]:translate-x-0 data-[side=top]:-translate-y-0",
+      className
+    ),
+    position,
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-0",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var Separator2 = React4.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "shrink-0 bg-gray",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      "data-orientation": orientation,
+      ref,
+      role: decorative ? "none" : "separator",
+      ...props
+    }
+  )
+);
+Separator2.displayName = "Separator";
+var XIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "size-6",
+    fill: "none",
+    height: "24",
+    viewBox: "0 0 24 24",
+    width: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 13.4L7.1 18.3C6.91667 18.4833 6.68333 18.575 6.4 18.575C6.11667 18.575 5.88333 18.4833 5.7 18.3C5.51667 18.1167 5.425 17.8833 5.425 17.6C5.425 17.3167 5.51667 17.0833 5.7 16.9L10.6 12L5.7 7.09999C5.51667 6.91665 5.425 6.68332 5.425 6.39999C5.425 6.11665 5.51667 5.88332 5.7 5.69999C5.88333 5.51665 6.11667 5.42499 6.4 5.42499C6.68333 5.42499 6.91667 5.51665 7.1 5.69999L12 10.6L16.9 5.69999C17.0833 5.51665 17.3167 5.42499 17.6 5.42499C17.8833 5.42499 18.1167 5.51665 18.3 5.69999C18.4833 5.88332 18.575 6.11665 18.575 6.39999C18.575 6.68332 18.4833 6.91665 18.3 7.09999L13.4 12L18.3 16.9C18.4833 17.0833 18.575 17.3167 18.575 17.6C18.575 17.8833 18.4833 18.1167 18.3 18.3C18.1167 18.4833 17.8833 18.575 17.6 18.575C17.3167 18.575 17.0833 18.4833 16.9 18.3L12 13.4Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetClose = SheetPrimitive.Close;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black-a6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva(
+  "fixed z-50 gap-4 bg-slate-2 shadow-lg transition ease-in-out p-safe-offset-6 data-[state=closed]:duration-300 data-[state=open]:duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React4.forwardRef(({ side = "right", className, children, closeLabel, closeClassName, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+  /* @__PURE__ */ jsx(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    SheetPrimitive.Content,
+    {
+      className: cn("text-gray", sheetVariants({ side }), className),
+      ref,
+      ...props,
+      children: [
+        closeLabel ? /* @__PURE__ */ jsxs(
+          SheetPrimitive.Close,
+          {
+            className: cn(
+              "inline-flex w-fit items-center gap-1 rounded-sm p-1 text-sm font-bold text-spark-a11 transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-0 disabled:pointer-events-none hover:text-spark-a12",
+              closeClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(XIcon, {}),
+              /* @__PURE__ */ jsx("span", { children: closeLabel })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity focus:outline-hidden focus:ring focus-visible:ring disabled:pointer-events-none data-[state=open]:bg-base-gray-soft hover:opacity-100", children: /* @__PURE__ */ jsx(XIcon, {}) }),
+        children
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Title,
+  {
+    className: cn("text-lg font-semibold text-gray", className),
+    ref,
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SheetPrimitive.Description,
+  {
+    className: cn("text-sm text-gray-light", className),
+    ref,
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+var Slider = React4.forwardRef(
+  ({ className, hint, min = 0, max = 100, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex gap-0.75 pr-2 text-sm text-gray-light", children: [
+      min,
+      hint ? /* @__PURE__ */ jsx("span", { children: hint }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        className: cn("relative flex h-5 touch-none select-none items-center", className),
+        max,
+        min,
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-[5px] w-full grow rounded-md bg-slate-a7", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full rounded-md bg-base-accent-solid outline-hidden focus:outline-hidden" }) }),
+          /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: "block size-4 rounded-circle bg-base-accent-solid outline-hidden ring-4 ring-spark-a8 ring-offset-2 ring-offset-spark-3 focus:outline-hidden dark:ring-offset-white-contrast" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex gap-0.75 pl-2 text-sm text-gray-light", children: [
+      max,
+      hint ? /* @__PURE__ */ jsx("span", { children: hint }) : null
+    ] })
+  ] })
+);
+Slider.displayName = "Slider";
+var CloseIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("g", { opacity: "0.6", children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M6.00003 6.6999L3.55002 9.1499C3.45836 9.24157 3.34169 9.2874 3.20002 9.2874C3.05836 9.2874 2.94169 9.24157 2.85002 9.1499C2.75836 9.05824 2.71252 8.94157 2.71252 8.7999C2.71252 8.65824 2.75836 8.54157 2.85002 8.4499L5.30002 5.9999L2.85002 3.5499C2.75836 3.45824 2.71252 3.34157 2.71252 3.1999C2.71252 3.05824 2.75836 2.94157 2.85002 2.8499C2.94169 2.75824 3.05836 2.7124 3.20002 2.7124C3.34169 2.7124 3.45836 2.75824 3.55002 2.8499L6.00003 5.2999L8.45003 2.8499C8.54169 2.75824 8.65836 2.7124 8.80003 2.7124C8.94169 2.7124 9.05836 2.75824 9.15003 2.8499C9.24169 2.94157 9.28753 3.05824 9.28753 3.1999C9.28753 3.34157 9.24169 3.45824 9.15003 3.5499L6.70002 5.9999L9.15003 8.4499C9.24169 8.54157 9.28753 8.65824 9.28753 8.7999C9.28753 8.94157 9.24169 9.05824 9.15003 9.1499C9.05836 9.24157 8.94169 9.2874 8.80003 9.2874C8.65836 9.2874 8.54169 9.24157 8.45003 9.1499L6.00003 6.6999Z",
+        fill: "currentColor"
+      }
+    ) })
+  }
+);
+var CheckIcon2 = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    fill: "none",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M4.77498 7.575L9.01248 3.3375C9.11248 3.2375 9.22915 3.1875 9.36248 3.1875C9.49582 3.1875 9.61248 3.2375 9.71248 3.3375C9.81248 3.4375 9.86248 3.55625 9.86248 3.69375C9.86248 3.83125 9.81248 3.95 9.71248 4.05L5.12498 8.65C5.02498 8.75 4.90832 8.8 4.77498 8.8C4.64165 8.8 4.52498 8.75 4.42498 8.65L2.27498 6.5C2.17498 6.4 2.12706 6.28125 2.13123 6.14375C2.1354 6.00625 2.18748 5.8875 2.28748 5.7875C2.38748 5.6875 2.50623 5.6375 2.64373 5.6375C2.78123 5.6375 2.89998 5.6875 2.99998 5.7875L4.77498 7.575Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-circle border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-base-accent-solid data-[state=unchecked]:bg-base-accent-soft",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none inline-flex h-5 w-5 items-center justify-center rounded-circle bg-white-contrast shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        ),
+        children: props.checked ? /* @__PURE__ */ jsx(CheckIcon2, { className: "text-accent-active dark:text-spark-8", role: "presentation" }) : /* @__PURE__ */ jsx(CloseIcon, { className: "text-gray-light dark:text-slate-8", role: "presentation" })
+      }
+    )
+  }
+));
+Switch.displayName = "Switch";
+var Tabs = TabsPrimitive.Root;
+var tabsListVariants = {
+  default: "inline-flex h-10 items-center justify-center gap-1",
+  underline: "inline-flex h-10 items-center gap-4 border-b border-gray",
+  pill: "inline-flex h-10 items-center gap-0 rounded-lg bg-slate-a3 p-1"
+};
+var TabsList = React4.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    className: cn(tabsListVariants[variant], className),
+    "data-variant": variant,
+    ref,
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var tabsTriggerBase = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50";
+var tabsTriggerVariants = {
+  default: "rounded-sm px-3 py-1.5 text-gray-light data-[state=active]:text-accent-active",
+  underline: "relative px-1 pb-2.5 text-gray-light data-[state=active]:text-accent-active after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:scale-x-0 after:bg-base-accent-solid after:transition-transform data-[state=active]:after:scale-x-100",
+  pill: "rounded-md px-4 py-1.5 text-gray-light data-[state=active]:bg-slate-1 data-[state=active]:text-accent-active data-[state=active]:shadow-sm"
+};
+var TabsTrigger = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    className: cn(
+      tabsTriggerBase,
+      // Auto-detect variant from parent via CSS — fallback to default styling.
+      // The variant-specific classes are applied via group selectors.
+      "group-data-[variant=underline]:relative group-data-[variant=underline]:px-1 group-data-[variant=underline]:pb-2.5",
+      tabsTriggerVariants.default,
+      className
+    ),
+    ref,
+    ...props,
+    children: props.children
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsTriggerUnderline = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    className: cn(tabsTriggerBase, tabsTriggerVariants.underline, className),
+    ref,
+    ...props
+  }
+));
+TabsTriggerUnderline.displayName = "TabsTriggerUnderline";
+var TabsTriggerPill = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    className: cn(tabsTriggerBase, tabsTriggerVariants.pill, className),
+    ref,
+    ...props
+  }
+));
+TabsTriggerPill.displayName = "TabsTriggerPill";
+var TabsContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    className: cn(
+      "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayField, DisplayFieldContent, DisplayFieldLabel, DisplayFieldSkeleton, DisplayFieldValue, buttonVariants, cn };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Badge, Button, Callout, Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayField, DisplayFieldContent, DisplayFieldLabel, DisplayFieldSkeleton, DisplayFieldValue, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, EnergyFlowChart, Input, Label, LineChart, Popover, PopoverContent, PopoverTrigger, Progress, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectTriggerIcon, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerPill, TabsTriggerUnderline, buttonVariants, cn, sheetVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map