@pollinations/ui 0.0.1 → 0.0.2

package/dist/index.js

@@ -167,15 +167,46 @@ function cn2(...inputs) {
   return twMerge2(clsx2(...inputs));
 }
 
+// src/primitives/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var intentClasses = {
+  info: "polli:border-theme-border polli:bg-theme-bg-pale polli:text-theme-text-strong",
+  success: "polli:border-intent-success-border polli:bg-intent-success-bg-light polli:text-intent-success-text",
+  warning: "polli:border-intent-warning-border polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  danger: "polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
+};
+var Alert = ({
+  intent = "info",
+  title,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ...rest,
+    role: intent === "danger" ? "alert" : "status",
+    className: cn2(
+      "polli:rounded-xl polli:border polli:px-3 polli:py-2 polli:text-sm",
+      intentClasses[intent],
+      className
+    ),
+    children: [
+      title && /* @__PURE__ */ jsx("div", { className: "polli:mb-1 polli:text-xs polli:font-bold polli:uppercase polli:tracking-wide", children: title }),
+      /* @__PURE__ */ jsx("div", { children })
+    ]
+  }
+);
+
 // src/primitives/Button.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var sizes = {
   small: "polli:px-2 polli:pt-0.5 polli:pb-1",
   medium: "polli:px-4 polli:pt-1.5 polli:pb-2",
   large: "polli:px-6 polli:py-3"
 };
 var themeClasses = "polli:bg-theme-bg-active polli:text-theme-text-base polli:hover:bg-theme-bg-hover polli:transition-colors";
-var intentClasses = {
+var intentClasses2 = {
   danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-[oklch(0.88_0.075_25)] polli:transition-colors"
 };
 var buttonClasses = ({
@@ -185,7 +216,7 @@ var buttonClasses = ({
   className,
   disabled
 }) => {
-  const colorClasses = intent ? intentClasses[intent] : themeClasses;
+  const colorClasses = intent ? intentClasses2[intent] : themeClasses;
   return cn2(
     "polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:self-center polli:placeholder-green-950 polli:font-medium polli:leading-normal polli:box-border",
     disabled ? "polli:opacity-50 polli:cursor-not-allowed" : "polli:hover:filter polli:hover:brightness-105 polli:cursor-pointer",
@@ -205,7 +236,7 @@ function Button({
   ...buttonProps
 }) {
   const Component = as || "button";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Component,
     {
       "data-theme": intent ? void 0 : theme,
@@ -223,9 +254,31 @@ function Button({
   );
 }
 
+// src/primitives/ButtonGroup.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ButtonGroup = ({
+  wrap = true,
+  className,
+  children,
+  role = "group",
+  ...rest
+}) => /* @__PURE__ */ jsx3(
+  "div",
+  {
+    ...rest,
+    role,
+    className: cn2(
+      "polli:flex polli:min-w-0 polli:items-center polli:gap-1.5",
+      wrap ? "polli:flex-wrap" : "polli:flex-nowrap",
+      className
+    ),
+    children
+  }
+);
+
 // src/primitives/ChevronIcon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx2(
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx4(
   "svg",
   {
     "aria-hidden": "true",
@@ -237,7 +290,7 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx2(
       expanded && "polli:rotate-180",
       className
     ),
-    children: /* @__PURE__ */ jsx2(
+    children: /* @__PURE__ */ jsx4(
       "path",
       {
         d: "M3 4.5 6 7.5l3-3",
@@ -252,16 +305,19 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ jsx2(
 );
 
 // src/primitives/Chip.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var chipSizes = {
   sm: "polli:px-2 polli:py-0.5 polli:text-xs",
   md: "polli:px-2.5 polli:py-0.5 polli:text-sm",
   lg: "polli:px-3 polli:py-1 polli:text-sm"
 };
-var intentClasses2 = {
+var intentClasses3 = {
   news: "polli:bg-[oklch(0.935_0.06_158)] polli:text-[oklch(0.46_0.13_158)]",
   alpha: "polli:bg-[oklch(0.93_0.06_300)] polli:text-[oklch(0.42_0.18_300)]",
-  neutral: "polli:border polli:border-gray-400/70 polli:bg-gray-100/80 polli:text-gray-900"
+  neutral: "polli:border polli:border-gray-400/70 polli:bg-gray-100/80 polli:text-gray-900",
+  success: "polli:border polli:border-intent-success-border polli:bg-intent-success-bg-light polli:text-intent-success-text",
+  warning: "polli:border polli:border-intent-warning-border polli:bg-intent-warning-bg-light polli:text-intent-warning-text",
+  danger: "polli:border polli:border-intent-danger-border polli:bg-intent-danger-bg-light polli:text-intent-danger-text"
 };
 var Chip = ({
   theme,
@@ -271,8 +327,8 @@ var Chip = ({
   children,
   ...rest
 }) => {
-  const intentClass = intent ? intentClasses2[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
-  return /* @__PURE__ */ jsx3(
+  const intentClass = intent ? intentClasses3[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
+  return /* @__PURE__ */ jsx5(
     "span",
     {
       ...rest,
@@ -289,7 +345,7 @@ var Chip = ({
 };
 
 // src/primitives/Collapsible.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Collapsible = ({
   label,
   expanded,
@@ -301,7 +357,7 @@ var Collapsible = ({
   focusClassName,
   panelClassName = "polli:border-t polli:border-theme-border polli:px-3 polli:pt-3 polli:pb-3",
   ariaLabel
-}) => /* @__PURE__ */ jsxs(
+}) => /* @__PURE__ */ jsxs2(
   "div",
   {
     className: cn2(
@@ -310,7 +366,7 @@ var Collapsible = ({
       disabled && "polli:opacity-50"
     ),
     children: [
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
@@ -326,8 +382,8 @@ var Collapsible = ({
             disabled ? "polli:cursor-not-allowed" : "polli:cursor-pointer"
           ),
           children: [
-            /* @__PURE__ */ jsx4("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx6("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
+            /* @__PURE__ */ jsx6(
               ChevronIcon,
               {
                 expanded,
@@ -337,7 +393,7 @@ var Collapsible = ({
           ]
         }
       ),
-      expanded && /* @__PURE__ */ jsx4("div", { className: panelClassName, children })
+      expanded && /* @__PURE__ */ jsx6("div", { className: panelClassName, children })
     ]
   }
 );
@@ -354,7 +410,7 @@ import {
   useRef,
   useState
 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var TOOLTIP_MAX_WIDTH = 288;
 var TOOLTIP_VIEWPORT_MARGIN = 12;
 var Tooltip = ({
@@ -401,9 +457,9 @@ var Tooltip = ({
   );
   const cursorClass = displayContents ? "polli:contents" : "polli:cursor-help";
   const popupClasses = "polli:fixed polli:w-max polli:px-2 polli:py-1 polli:bg-theme-bg-pale polli:text-theme-text-strong polli:border polli:border-theme-border polli:text-xs polli:rounded-md polli:shadow-sm polli:z-50 polli:pointer-events-none polli:transition-opacity polli:whitespace-pre-line polli:break-words";
-  const contentNode = /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx5("span", { className: cursorClass, children }),
-    /* @__PURE__ */ jsx5(
+  const contentNode = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx7("span", { className: cursorClass, children }),
+    /* @__PURE__ */ jsx7(
       "span",
       {
         style: {
@@ -438,7 +494,7 @@ var Tooltip = ({
     style
   };
   if (triggerAs === "span") {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       "span",
       {
         ref: (node) => {
@@ -449,7 +505,7 @@ var Tooltip = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       ref: (node) => {
@@ -468,7 +524,7 @@ var Tooltip = ({
 };
 
 // src/primitives/CopyButton.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function CopyButton({
   value,
   children,
@@ -505,7 +561,7 @@ function CopyButton({
       onCopyError?.(error);
     }
   }
-  const button = /* @__PURE__ */ jsx6(
+  const button = /* @__PURE__ */ jsx8(
     "button",
     {
       ...buttonProps,
@@ -517,7 +573,7 @@ function CopyButton({
       children: typeof children === "function" ? children(copied) : children
     }
   );
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     Tooltip,
     {
       triggerAs: "span",
@@ -531,7 +587,7 @@ function CopyButton({
 // src/primitives/Dialog.tsx
 import { Dialog as ArkDialog } from "@ark-ui/react/dialog";
 import { Portal } from "@ark-ui/react/portal";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: "polli:max-w-md",
   md: "polli:max-w-xl",
@@ -554,13 +610,13 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ jsxs3(
+}) => /* @__PURE__ */ jsxs4(
   ArkDialog.Root,
   {
     open,
     onOpenChange: (details) => onOpenChange?.(details.open),
     children: [
-      trigger && /* @__PURE__ */ jsx7(
+      trigger && /* @__PURE__ */ jsx9(
         ArkDialog.Trigger,
         {
           asChild: triggerAsChild,
@@ -568,8 +624,8 @@ var Dialog = ({
           children: trigger
         }
       ),
-      /* @__PURE__ */ jsxs3(Portal, { children: [
-        showBackdrop && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs4(Portal, { children: [
+        showBackdrop && /* @__PURE__ */ jsx9(
           ArkDialog.Backdrop,
           {
             className: cn2(
@@ -578,14 +634,14 @@ var Dialog = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx9(
           ArkDialog.Positioner,
           {
             className: cn2(
               "polli:fixed polli:inset-0 polli:z-[110] polli:flex polli:h-dvh polli:items-start polli:justify-center polli:overflow-hidden polli:p-4",
               positionerClassName
             ),
-            children: /* @__PURE__ */ jsxs3(
+            children: /* @__PURE__ */ jsxs4(
               ArkDialog.Content,
               {
                 "data-theme": theme,
@@ -597,7 +653,7 @@ var Dialog = ({
                   contentClassName
                 ),
                 children: [
-                  title && /* @__PURE__ */ jsx7(
+                  title && /* @__PURE__ */ jsx9(
                     DialogTitle,
                     {
                       className: cn2(
@@ -623,7 +679,7 @@ var DialogTitle = ArkDialog.Title;
 import { Popover } from "@ark-ui/react/popover";
 import { Portal as Portal2 } from "@ark-ui/react/portal";
 import { useState as useState3 } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-surface-white polli:shadow-lg";
 var Dropdown = ({
   theme,
@@ -642,7 +698,7 @@ var Dropdown = ({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     Popover.Root,
     {
       open,
@@ -651,8 +707,8 @@ var Dropdown = ({
         placement: align === "end" ? "bottom-end" : "bottom-start"
       },
       children: [
-        /* @__PURE__ */ jsx8(Popover.Trigger, { asChild: true, children: trigger(open) }),
-        /* @__PURE__ */ jsx8(Portal2, { children: /* @__PURE__ */ jsx8(Popover.Positioner, { children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ jsx10(Portal2, { children: /* @__PURE__ */ jsx10(Popover.Positioner, { children: /* @__PURE__ */ jsx10(
           Popover.Content,
           {
             "data-theme": theme,
@@ -670,7 +726,7 @@ var Dropdown = ({
 };
 
 // src/primitives/icons/index.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -679,26 +735,26 @@ var strokeProps = {
   strokeLinejoin: "round"
 };
 function AppIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ jsx9("path", { d: "M2 20h20" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "M2 20h20" })
   ] });
 }
 function BeakerIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ jsx9("path", { d: "M10 3v6.5L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V3" }),
-    /* @__PURE__ */ jsx9("path", { d: "M7 14h10" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ jsx11("path", { d: "M10 3v6.5L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V3" }),
+    /* @__PURE__ */ jsx11("path", { d: "M7 14h10" })
   ] });
 }
 function BookIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
-    /* @__PURE__ */ jsx9("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
+    /* @__PURE__ */ jsx11("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "svg",
     {
       "aria-hidden": "true",
@@ -706,24 +762,24 @@ function CheckIcon(props) {
       ...strokeProps,
       strokeWidth: 2.5,
       ...props,
-      children: /* @__PURE__ */ jsx9("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ jsx11("polyline", { points: "20 6 9 17 4 12" })
     }
   );
 }
 function ClipboardIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-    /* @__PURE__ */ jsx9("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
   ] });
 }
 function ClockIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__PURE__ */ jsx9("path", { d: "M12 7v5l3 2" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx11("path", { d: "M12 7v5l3 2" })
   ] });
 }
 function DiscordIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "currentColor",
@@ -732,23 +788,23 @@ function DiscordIcon(props) {
   ) });
 }
 function DownloadIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ jsx9("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx11("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx11("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx9("path", { d: "M7 17 17 7M9 7h8v8" }) });
+  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M7 17 17 7M9 7h8v8" }) });
 }
 function GenApiIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
-    /* @__PURE__ */ jsx9("path", { d: "M8 3v18M16 3v18" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
+    /* @__PURE__ */ jsx11("path", { d: "M8 3v18M16 3v18" })
   ] });
 }
 function GitHubIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "currentColor",
@@ -757,69 +813,69 @@ function GitHubIcon(props) {
   ) });
 }
 function ImageIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx9("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ jsx9("path", { d: "m21 15-5-5L5 21" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx11("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "m21 15-5-5L5 21" })
   ] });
 }
 function LockIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx9("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function MailIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-    /* @__PURE__ */ jsx9("path", { d: "m3 7 9 7 9-7" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx11("path", { d: "m3 7 9 7 9-7" })
   ] });
 }
 function McpIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ jsx9("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ jsx9("path", { d: "M10 12h4" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsx11("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ jsx11("path", { d: "M10 12h4" })
   ] });
 }
 function MenuIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx9("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 }
 function TerminalIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("polyline", { points: "4 8 8 12 4 16" }),
-    /* @__PURE__ */ jsx9("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("polyline", { points: "4 8 8 12 4 16" }),
+    /* @__PURE__ */ jsx11("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
   ] });
 }
 function TokensIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx9("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
+  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
 }
 function TrendUpIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("polyline", { points: "3 17 9 11 13 15 21 7" }),
-    /* @__PURE__ */ jsx9("polyline", { points: "15 7 21 7 21 13" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("polyline", { points: "3 17 9 11 13 15 21 7" }),
+    /* @__PURE__ */ jsx11("polyline", { points: "15 7 21 7 21 13" })
   ] });
 }
 function WalletIcon(props) {
-  return /* @__PURE__ */ jsxs5("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ jsx9("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
-    /* @__PURE__ */ jsx9("path", { d: "M3 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6Z" }),
-    /* @__PURE__ */ jsx9("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
+  return /* @__PURE__ */ jsxs6("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ jsx11("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
+    /* @__PURE__ */ jsx11("path", { d: "M3 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-6Z" }),
+    /* @__PURE__ */ jsx11("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
   ] });
 }
 function XIcon(props) {
-  return /* @__PURE__ */ jsx9("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx9("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ jsx11("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ jsx11("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 
 // src/primitives/ExternalLinkButton.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var ExternalLinkButton = ({
   theme,
   href,
   size = "medium",
   className,
   children
-}) => /* @__PURE__ */ jsxs6(
+}) => /* @__PURE__ */ jsxs7(
   Button,
   {
     as: "a",
@@ -830,8 +886,8 @@ var ExternalLinkButton = ({
     size,
     className: cn2("polli:gap-2", className),
     children: [
-      /* @__PURE__ */ jsx10("span", { children }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12("span", { children }),
+      /* @__PURE__ */ jsx12(
         ExternalLinkIcon,
         {
           className: "polli:h-4 polli:w-4 polli:shrink-0 polli:opacity-60",
@@ -846,8 +902,8 @@ var ExternalLinkButton = ({
 import { Field } from "@ark-ui/react/field";
 
 // src/primitives/IconButton.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var intentClasses3 = {
+import { jsx as jsx13 } from "react/jsx-runtime";
+var intentClasses4 = {
   danger: "polli:bg-intent-danger-bg-light polli:hover:bg-[oklch(0.88_0.075_25)] polli:text-intent-danger-text"
 };
 var defaultClasses = "polli:bg-theme-bg-active polli:hover:bg-theme-bg-hover polli:text-theme-text-soft polli:hover:text-theme-text-strong";
@@ -857,7 +913,7 @@ var IconButton = ({
   onClick,
   children,
   className
-}) => /* @__PURE__ */ jsx11(
+}) => /* @__PURE__ */ jsx13(
   "button",
   {
     type: "button",
@@ -866,7 +922,7 @@ var IconButton = ({
     "aria-label": title,
     className: cn2(
       "polli:inline-flex polli:h-6 polli:w-6 polli:cursor-pointer polli:items-center polli:justify-center polli:rounded polli:transition-colors",
-      intent ? intentClasses3[intent] : defaultClasses,
+      intent ? intentClasses4[intent] : defaultClasses,
       className
     ),
     children
@@ -874,18 +930,18 @@ var IconButton = ({
 );
 
 // src/primitives/InfoTip.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var InfoTip = ({
   text,
   content,
   label = "More info"
-}) => /* @__PURE__ */ jsx12(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ jsx12("span", { className: "polli:inline-flex polli:h-3.5 polli:w-3.5 polli:items-center polli:justify-center polli:rounded-full polli:border polli:border-theme-border polli:bg-theme-bg-active polli:font-bold polli:text-micro polli:text-theme-text-strong polli:transition-colors", children: "i" }) });
+}) => /* @__PURE__ */ jsx14(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ jsx14("span", { className: "polli:inline-flex polli:h-3.5 polli:w-3.5 polli:items-center polli:justify-center polli:rounded-full polli:border polli:border-theme-border polli:bg-theme-bg-active polli:font-bold polli:text-micro polli:text-theme-text-strong polli:transition-colors", children: "i" }) });
 
 // src/primitives/Input.tsx
 import { forwardRef } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Input = forwardRef(
-  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ jsx13(
+  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ jsx15(
     "input",
     {
       ref,
@@ -908,18 +964,17 @@ import {
   useEffect as useEffect3,
   useRef as useRef3
 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var axisClasses = {
   y: "polli:overflow-y-auto polli:overflow-x-hidden",
-  x: "polli:overflow-x-auto polli:overflow-y-hidden",
-  both: "polli:overflow-auto"
+  x: "polli:overflow-x-auto polli:overflow-y-hidden"
 };
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
 var ScrollArea = forwardRef2(
-  ({ theme, axis = "y", hideDelayMs = 2e3, className, children, ...rest }, externalRef) => {
+  ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
     const innerRef = useRef3(null);
     const setRef = useCallback(
       (node) => {
@@ -948,7 +1003,7 @@ var ScrollArea = forwardRef2(
       };
       const scheduleHide = () => {
         clearHideTimer();
-        hideTimer = window.setTimeout(hide, hideDelayMs);
+        hideTimer = window.setTimeout(hide, 2e3);
       };
       const handleInteraction = () => {
         show();
@@ -978,15 +1033,15 @@ var ScrollArea = forwardRef2(
         element.removeEventListener("focusin", handleInteraction);
         element.removeEventListener("focusout", scheduleHide);
       };
-    }, [hideDelayMs]);
-    return /* @__PURE__ */ jsx14(
+    }, []);
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         ...rest,
         ref: setRef,
         "data-theme": theme,
         className: cn2(
-          "polli-scrollbar-subtle",
+          "polli-scrollbar-subtle polli:min-w-0 polli:max-w-full",
           axisClasses[axis],
           className
         ),
@@ -998,7 +1053,7 @@ var ScrollArea = forwardRef2(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/MultiSelect.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var TRIGGER_BASE = "polli:inline-flex polli:min-h-8 polli:min-w-[140px] polli:items-center polli:gap-2 polli:rounded-full polli:border polli:px-3 polli:py-1.5 polli:text-xs polli:font-medium polli:transition-all polli:duration-200";
 var ROW_BASE = "polli:flex polli:w-full polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:text-xs polli:transition-colors";
 var CHECK_BASE = "polli:flex polli:h-4 polli:w-4 polli:flex-shrink-0 polli:items-center polli:justify-center polli:rounded polli:border polli:border-theme-border polli:text-xs";
@@ -1023,16 +1078,16 @@ var MultiSelect = ({
   };
   const selectAll = () => onChange([]);
   const displayText = disabled ? disabledText : isAllSelected ? "All" : `${selected.length} selected`;
-  const labelNode = label ? /* @__PURE__ */ jsx15("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
+  const labelNode = label ? /* @__PURE__ */ jsx17("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
   if (disabled) {
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         "data-theme": theme,
         className: "polli:group polli:relative polli:flex polli:items-center polli:gap-2",
         children: [
           labelNode,
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
@@ -1042,8 +1097,8 @@ var MultiSelect = ({
                 "polli:cursor-not-allowed polli:border-theme-border polli:bg-theme-bg-subtle polli:opacity-60"
               ),
               children: [
-                /* @__PURE__ */ jsx15("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx17("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
+                /* @__PURE__ */ jsx17(
                   ChevronIcon,
                   {
                     expanded: false,
@@ -1053,25 +1108,25 @@ var MultiSelect = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx15("span", { className: "polli:pointer-events-none polli:absolute polli:-top-8 polli:left-1/2 polli:z-[100] polli:-translate-x-1/2 polli:whitespace-nowrap polli:rounded-md polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:px-2 polli:py-1 polli:text-xs polli:text-theme-text-strong polli:opacity-0 polli:shadow-sm polli:transition-opacity polli:group-hover:opacity-100", children: "No items available" })
+          /* @__PURE__ */ jsx17("span", { className: "polli:pointer-events-none polli:absolute polli:-top-8 polli:left-1/2 polli:z-[100] polli:-translate-x-1/2 polli:whitespace-nowrap polli:rounded-md polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:px-2 polli:py-1 polli:text-xs polli:text-theme-text-strong polli:opacity-0 polli:shadow-sm polli:transition-opacity polli:group-hover:opacity-100", children: "No items available" })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:items-center polli:gap-2",
       children: [
         labelNode,
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           Dropdown,
           {
             theme,
             align,
             className: "polli:min-w-[320px]",
-            trigger: (open) => /* @__PURE__ */ jsxs7(
+            trigger: (open) => /* @__PURE__ */ jsxs8(
               "button",
               {
                 type: "button",
@@ -1080,7 +1135,7 @@ var MultiSelect = ({
                   open ? "polli:border-theme-border polli:bg-theme-bg-active" : "polli:border-theme-border polli:bg-theme-bg-subtle polli:hover:bg-theme-bg-pale"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx17(
                     "span",
                     {
                       className: cn2(
@@ -1090,7 +1145,7 @@ var MultiSelect = ({
                       children: displayText
                     }
                   ),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx17(
                     ChevronIcon,
                     {
                       expanded: open,
@@ -1103,8 +1158,8 @@ var MultiSelect = ({
                 ]
               }
             ),
-            children: /* @__PURE__ */ jsxs7(ScrollArea, { theme, className: "polli:max-h-64", children: [
-              /* @__PURE__ */ jsxs7(
+            children: /* @__PURE__ */ jsxs8(ScrollArea, { theme, className: "polli:max-h-64", children: [
+              /* @__PURE__ */ jsxs8(
                 "button",
                 {
                   type: "button",
@@ -1114,7 +1169,7 @@ var MultiSelect = ({
                     isAllSelected ? "polli:bg-theme-bg-active polli:font-medium polli:text-theme-text-strong" : "polli:text-theme-text-base polli:hover:bg-theme-bg-subtle"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx15(
+                    /* @__PURE__ */ jsx17(
                       "span",
                       {
                         className: cn2(
@@ -1130,7 +1185,7 @@ var MultiSelect = ({
               ),
               options.map((opt) => {
                 const isChecked = selected.includes(opt.value);
-                return /* @__PURE__ */ jsxs7(
+                return /* @__PURE__ */ jsxs8(
                   "button",
                   {
                     type: "button",
@@ -1140,7 +1195,7 @@ var MultiSelect = ({
                       isChecked ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-theme-text-base polli:hover:bg-theme-bg-subtle"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx15(
+                      /* @__PURE__ */ jsx17(
                         "span",
                         {
                           className: cn2(
@@ -1150,7 +1205,7 @@ var MultiSelect = ({
                           children: isChecked && "\u2713"
                         }
                       ),
-                      /* @__PURE__ */ jsx15("span", { className: "polli:whitespace-nowrap", children: opt.label })
+                      /* @__PURE__ */ jsx17("span", { className: "polli:whitespace-nowrap", children: opt.label })
                     ]
                   },
                   opt.value
@@ -1168,7 +1223,7 @@ var MultiSelect = ({
 import { useEffect as useEffect4, useMemo, useState as useState4 } from "react";
 
 // src/primitives/TabButton.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var sizeClasses2 = {
   medium: "polli:px-4 polli:py-1.5 polli:text-base",
   small: "polli:px-3 polli:py-1.5 polli:text-sm"
@@ -1183,7 +1238,7 @@ var TabButton = ({
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
@@ -1205,7 +1260,7 @@ var TabButton = ({
 };
 
 // src/primitives/PeriodPicker.tsx
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTH_LABELS = [
   "Jan",
@@ -1285,14 +1340,14 @@ var PeriodPicker = ({
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:flex-wrap polli:items-center polli:gap-2",
       children: [
-        /* @__PURE__ */ jsx17("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
-          (granularity2) => /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx19("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
+          (granularity2) => /* @__PURE__ */ jsx19(
             TabButton,
             {
               active: value.granularity === granularity2,
@@ -1302,14 +1357,14 @@ var PeriodPicker = ({
             granularity2
           )
         ) }),
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           Dropdown,
           {
             theme,
             open,
             onOpenChange: setOpen,
             className: "polli:w-[304px] polli:rounded-xl polli:p-3",
-            trigger: (isOpen) => /* @__PURE__ */ jsxs8(
+            trigger: (isOpen) => /* @__PURE__ */ jsxs9(
               "button",
               {
                 type: "button",
@@ -1321,14 +1376,14 @@ var PeriodPicker = ({
                   isOpen && "polli:bg-theme-bg-active polli:text-theme-text-strong polli:shadow-sm"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx17("span", { children: formatPeriodLabel(value) }),
-                  /* @__PURE__ */ jsx17(ChevronIcon, { expanded: isOpen })
+                  /* @__PURE__ */ jsx19("span", { children: formatPeriodLabel(value) }),
+                  /* @__PURE__ */ jsx19(ChevronIcon, { expanded: isOpen })
                 ]
               }
             ),
             children: [
-              /* @__PURE__ */ jsxs8("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
-                /* @__PURE__ */ jsx17(
+              /* @__PURE__ */ jsxs9("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
+                /* @__PURE__ */ jsx19(
                   "button",
                   {
                     type: "button",
@@ -1342,8 +1397,8 @@ var PeriodPicker = ({
                     children: "<"
                   }
                 ),
-                /* @__PURE__ */ jsx17("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx19("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
+                /* @__PURE__ */ jsx19(
                   "button",
                   {
                     type: "button",
@@ -1358,7 +1413,7 @@ var PeriodPicker = ({
                   }
                 )
               ] }),
-              value.granularity === "month" ? /* @__PURE__ */ jsx17("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
+              value.granularity === "month" ? /* @__PURE__ */ jsx19("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
                 const date = new Date(
                   Date.UTC(
                     viewDate.getUTCFullYear(),
@@ -1377,7 +1432,7 @@ var PeriodPicker = ({
                   year: "numeric"
                 });
                 const selected = date.getUTCFullYear() === selectedWindow.start.getUTCFullYear() && date.getUTCMonth() === selectedWindow.start.getUTCMonth();
-                return /* @__PURE__ */ jsx17(
+                return /* @__PURE__ */ jsx19(
                   "button",
                   {
                     type: "button",
@@ -1393,9 +1448,9 @@ var PeriodPicker = ({
                   },
                   label
                 );
-              }) }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
-                /* @__PURE__ */ jsx17("div", { className: "polli:mb-1 polli:grid polli:grid-cols-7 polli:gap-1 polli:text-center polli:text-micro polli:font-bold polli:uppercase polli:text-gray-400", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx17("div", { children: label }, label)) }),
-                /* @__PURE__ */ jsx17("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
+              }) }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                /* @__PURE__ */ jsx19("div", { className: "polli:mb-1 polli:grid polli:grid-cols-7 polli:gap-1 polli:text-center polli:text-micro polli:font-bold polli:uppercase polli:text-gray-400", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx19("div", { children: label }, label)) }),
+                /* @__PURE__ */ jsx19("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
                   const inCurrentMonth = date.getUTCMonth() === viewDate.getUTCMonth();
                   const selectable = isPeriodSelectable(
                     periodFromDate(value.granularity, date),
@@ -1413,7 +1468,7 @@ var PeriodPicker = ({
                     }
                   )}`;
                   const selected = value.granularity === "day" ? sameUtcDay(date, selectedWindow.start) : date >= selectedWindow.start && date < selectedWindow.end;
-                  return /* @__PURE__ */ jsx17(
+                  return /* @__PURE__ */ jsx19(
                     "button",
                     {
                       type: "button",
@@ -1442,7 +1497,7 @@ var PeriodPicker = ({
 };
 
 // src/primitives/Surface.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var variantClasses = {
   panel: "polli:rounded-2xl polli:border polli:border-theme-border polli:bg-theme-bg-subtle polli:p-6",
   card: "polli:rounded-xl polli:bg-surface-white polli:p-4",
@@ -1454,7 +1509,7 @@ var Surface = ({
   className,
   children,
   ...rest
-}) => /* @__PURE__ */ jsx18(
+}) => /* @__PURE__ */ jsx20(
   "div",
   {
     ...rest,
@@ -1465,7 +1520,7 @@ var Surface = ({
 );
 
 // src/primitives/Section.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var Section = ({
   title,
   theme,
@@ -1475,9 +1530,9 @@ var Section = ({
   actionClassName,
   children,
   className
-}) => /* @__PURE__ */ jsxs9("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
-  /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
-    /* @__PURE__ */ jsx19(
+}) => /* @__PURE__ */ jsxs10("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
+  /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
+    /* @__PURE__ */ jsx21(
       "h2",
       {
         "data-theme": theme,
@@ -1485,14 +1540,14 @@ var Section = ({
         children: title
       }
     ),
-    action && /* @__PURE__ */ jsx19("div", { className: cn2("shrink-0", actionClassName), children: action })
+    action && /* @__PURE__ */ jsx21("div", { className: cn2("shrink-0", actionClassName), children: action })
   ] }),
-  framed ? /* @__PURE__ */ jsx19(Surface, { variant: "panel", theme, children }) : children
+  framed ? /* @__PURE__ */ jsx21(Surface, { variant: "panel", theme, children }) : children
 ] });
 
 // src/primitives/Slider.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var toNumber = (value) => {
   if (typeof value === "number") return value;
   if (typeof value !== "string" || value.trim() === "") return void 0;
@@ -1532,7 +1587,7 @@ var Slider = forwardRef3(
       ...style,
       ...progressPercent === void 0 ? null : { "--polli-slider-progress": `${progressPercent}%` }
     };
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22(
       "input",
       {
         ref,
@@ -1550,7 +1605,7 @@ var Slider = forwardRef3(
 );
 
 // src/primitives/StatCard.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var StatCard = ({
   label,
   value,
@@ -1560,8 +1615,8 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => /* @__PURE__ */ jsxs10("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
-  /* @__PURE__ */ jsx21(
+}) => /* @__PURE__ */ jsxs11("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
+  /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn2(
@@ -1571,7 +1626,7 @@ var StatCard = ({
       children: label
     }
   ),
-  /* @__PURE__ */ jsx21(
+  /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn2(
@@ -1581,7 +1636,7 @@ var StatCard = ({
       children: value
     }
   ),
-  detail && /* @__PURE__ */ jsx21(
+  detail && /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn2(
@@ -1594,7 +1649,7 @@ var StatCard = ({
 ] });
 
 // src/primitives/Switch.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var trackClasses = {
   off: "polli:bg-gray-200",
   on: "polli:bg-[oklch(0.88_0.12_158)]",
@@ -1610,7 +1665,7 @@ var Switch = ({
 }) => {
   const effectiveStatus = status ?? (checked ? "on" : "off");
   const resolvedAriaLabel = ariaLabel ?? (checked ? "Turn off toggle" : "Turn on toggle");
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "button",
     {
       type: "button",
@@ -1624,7 +1679,7 @@ var Switch = ({
         trackClasses[effectiveStatus],
         className
       ),
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx24(
         "span",
         {
           className: cn2(
@@ -1637,6 +1692,118 @@ var Switch = ({
   );
 };
 
+// src/primitives/Table.tsx
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+var alignClasses = {
+  left: "polli:text-left",
+  center: "polli:text-center",
+  right: "polli:text-right"
+};
+var rowIntentClasses = {
+  default: "",
+  success: "polli:bg-intent-success-bg-light/55",
+  warning: "polli:bg-intent-warning-bg-light/65",
+  danger: "polli:bg-intent-danger-bg-light/65"
+};
+var Table = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+  "table",
+  {
+    ...rest,
+    className: cn2(
+      "polli:w-full polli:border-collapse polli:text-sm",
+      className
+    )
+  }
+);
+var TableHead = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+  "thead",
+  {
+    ...rest,
+    className: cn2(
+      "polli:bg-theme-bg-active polli:text-micro polli:text-theme-text-muted",
+      className
+    )
+  }
+);
+var TableBody = ({ className, ...rest }) => /* @__PURE__ */ jsx25(
+  "tbody",
+  {
+    ...rest,
+    className: cn2("polli:divide-y polli:divide-theme-border/65", className)
+  }
+);
+var TableRow = ({
+  intent = "default",
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx25(
+  "tr",
+  {
+    ...rest,
+    className: cn2(
+      "polli:transition-colors polli:hover:bg-theme-bg-subtle",
+      rowIntentClasses[intent],
+      className
+    )
+  }
+);
+var TableHeaderCell = ({
+  align = "left",
+  active = false,
+  sortDirection,
+  onSort,
+  className,
+  children,
+  ...rest
+}) => {
+  const content = /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    /* @__PURE__ */ jsx25("span", { children }),
+    active && sortDirection && /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", children: sortDirection === "asc" ? "^" : "v" })
+  ] });
+  const classes = cn2(
+    "polli:px-3 polli:py-2 polli:font-bold polli:uppercase polli:tracking-wide",
+    alignClasses[align],
+    active && "polli:text-theme-text-strong",
+    onSort && "polli:cursor-pointer polli:select-none polli:hover:text-theme-text-strong",
+    className
+  );
+  if (!onSort) {
+    return /* @__PURE__ */ jsx25("th", { ...rest, className: classes, children: content });
+  }
+  return /* @__PURE__ */ jsx25("th", { ...rest, className: classes, children: /* @__PURE__ */ jsx25(
+    "button",
+    {
+      type: "button",
+      onClick: onSort,
+      className: cn2(
+        "polli:inline-flex polli:w-full polli:items-center polli:gap-1 polli:bg-transparent polli:p-0 polli:font-bold polli:text-inherit",
+        align === "right" && "polli:justify-end",
+        align === "center" && "polli:justify-center"
+      ),
+      children: content
+    }
+  ) });
+};
+var TableCell = ({
+  align = "left",
+  numeric = false,
+  muted = false,
+  className,
+  ...rest
+}) => /* @__PURE__ */ jsx25(
+  "td",
+  {
+    ...rest,
+    className: cn2(
+      "polli:px-3 polli:py-2 polli:align-middle",
+      alignClasses[align],
+      numeric && "polli:tabular-nums",
+      muted && "polli:text-theme-text-muted",
+      className
+    )
+  }
+);
+
 // src/theme.ts
 var themes = [
   "amber",
@@ -1646,15 +1813,13 @@ var themes = [
   "violet",
   "green"
 ];
-var themeColors = {
-  amber: "#FEF3C7",
-  blue: "#DBEAFE"
-};
 export {
+  Alert,
   AppIcon,
   BeakerIcon,
   BookIcon,
   Button,
+  ButtonGroup,
   CheckIcon,
   ChevronIcon,
   Chip,
@@ -1689,6 +1854,12 @@ export {
   Surface,
   Switch,
   TabButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
   TerminalIcon,
   TokensIcon,
   Tooltip,
@@ -1699,7 +1870,6 @@ export {
   currentPeriod,
   getPeriodBucketKeys,
   periodBucketKeyToDate,
-  themeColors,
   themes,
   useScrollLock
 };