@pollinations/ui 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -20,10 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Alert: () => Alert,
   AppIcon: () => AppIcon,
   BeakerIcon: () => BeakerIcon,
   BookIcon: () => BookIcon,
   Button: () => Button,
+  ButtonGroup: () => ButtonGroup,
   CheckIcon: () => CheckIcon,
   ChevronIcon: () => ChevronIcon,
   Chip: () => Chip,
@@ -58,6 +60,12 @@ __export(src_exports, {
   Surface: () => Surface,
   Switch: () => Switch,
   TabButton: () => TabButton,
+  Table: () => Table,
+  TableBody: () => TableBody,
+  TableCell: () => TableCell,
+  TableHead: () => TableHead,
+  TableHeaderCell: () => TableHeaderCell,
+  TableRow: () => TableRow,
   TerminalIcon: () => TerminalIcon,
   TokensIcon: () => TokensIcon,
   Tooltip: () => Tooltip,
@@ -68,7 +76,6 @@ __export(src_exports, {
   currentPeriod: () => currentPeriod,
   getPeriodBucketKeys: () => getPeriodBucketKeys,
   periodBucketKeyToDate: () => periodBucketKeyToDate,
-  themeColors: () => themeColors,
   themes: () => themes,
   useScrollLock: () => useScrollLock
 });
@@ -243,15 +250,46 @@ function cn2(...inputs) {
   return twMerge2((0, import_clsx2.clsx)(...inputs));
 }
 
-// src/primitives/Button.tsx
+// src/primitives/Alert.tsx
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "polli:mb-1 polli:text-xs polli:font-bold polli:uppercase polli:tracking-wide", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+    ]
+  }
+);
+
+// src/primitives/Button.tsx
+var import_jsx_runtime2 = require("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 = ({
@@ -261,7 +299,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",
@@ -281,7 +319,7 @@ function Button({
   ...buttonProps
 }) {
   const Component = as || "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       "data-theme": intent ? void 0 : theme,
@@ -299,9 +337,31 @@ function Button({
   );
 }
 
+// src/primitives/ButtonGroup.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ButtonGroup = ({
+  wrap = true,
+  className,
+  children,
+  role = "group",
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "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
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   "svg",
   {
     "aria-hidden": "true",
@@ -313,7 +373,7 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_ru
       expanded && "polli:rotate-180",
       className
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "path",
       {
         d: "M3 4.5 6 7.5l3-3",
@@ -328,16 +388,19 @@ var ChevronIcon = ({ expanded, className }) => /* @__PURE__ */ (0, import_jsx_ru
 );
 
 // src/primitives/Chip.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("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,
@@ -347,8 +410,8 @@ var Chip = ({
   children,
   ...rest
 }) => {
-  const intentClass = intent ? intentClasses2[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const intentClass = intent ? intentClasses3[intent] : "polli:bg-theme-bg-active polli:text-theme-text-strong";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       ...rest,
@@ -365,7 +428,7 @@ var Chip = ({
 };
 
 // src/primitives/Collapsible.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Collapsible = ({
   label,
   expanded,
@@ -377,7 +440,7 @@ var Collapsible = ({
   focusClassName,
   panelClassName = "polli:border-t polli:border-theme-border polli:px-3 polli:pt-3 polli:pb-3",
   ariaLabel
-}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
   "div",
   {
     className: cn2(
@@ -386,7 +449,7 @@ var Collapsible = ({
       disabled && "polli:opacity-50"
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -402,8 +465,8 @@ var Collapsible = ({
             disabled ? "polli:cursor-not-allowed" : "polli:cursor-pointer"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "polli:flex-1 polli:min-w-0", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               ChevronIcon,
               {
                 expanded,
@@ -413,7 +476,7 @@ var Collapsible = ({
           ]
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: panelClassName, children })
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: panelClassName, children })
     ]
   }
 );
@@ -423,7 +486,7 @@ var import_react3 = require("react");
 
 // src/primitives/Tooltip.tsx
 var import_react2 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TOOLTIP_MAX_WIDTH = 288;
 var TOOLTIP_VIEWPORT_MARGIN = 12;
 var Tooltip = ({
@@ -470,9 +533,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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cursorClass, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cursorClass, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         style: {
@@ -507,7 +570,7 @@ var Tooltip = ({
     style
   };
   if (triggerAs === "span") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       {
         ref: (node) => {
@@ -518,7 +581,7 @@ var Tooltip = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ref: (node) => {
@@ -537,7 +600,7 @@ var Tooltip = ({
 };
 
 // src/primitives/CopyButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CopyButton({
   value,
   children,
@@ -574,7 +637,7 @@ function CopyButton({
       onCopyError?.(error);
     }
   }
-  const button = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       ...buttonProps,
@@ -586,7 +649,7 @@ function CopyButton({
       children: typeof children === "function" ? children(copied) : children
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Tooltip,
     {
       triggerAs: "span",
@@ -600,7 +663,7 @@ function CopyButton({
 // src/primitives/Dialog.tsx
 var import_dialog = require("@ark-ui/react/dialog");
 var import_portal = require("@ark-ui/react/portal");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var sizeClasses = {
   sm: "polli:max-w-md",
   md: "polli:max-w-xl",
@@ -623,13 +686,13 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
   import_dialog.Dialog.Root,
   {
     open,
     onOpenChange: (details) => onOpenChange?.(details.open),
     children: [
-      trigger && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      trigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         import_dialog.Dialog.Trigger,
         {
           asChild: triggerAsChild,
@@ -637,8 +700,8 @@ var Dialog = ({
           children: trigger
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_portal.Portal, { children: [
-        showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_portal.Portal, { children: [
+        showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_dialog.Dialog.Backdrop,
           {
             className: cn2(
@@ -647,14 +710,14 @@ var Dialog = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           import_dialog.Dialog.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__ */ (0, import_jsx_runtime7.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               import_dialog.Dialog.Content,
               {
                 "data-theme": theme,
@@ -666,7 +729,7 @@ var Dialog = ({
                   contentClassName
                 ),
                 children: [
-                  title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     DialogTitle,
                     {
                       className: cn2(
@@ -692,7 +755,7 @@ var DialogTitle = import_dialog.Dialog.Title;
 var import_popover = require("@ark-ui/react/popover");
 var import_portal2 = require("@ark-ui/react/portal");
 var import_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("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,
@@ -711,7 +774,7 @@ var Dropdown = ({
     if (!isControlled) setInternalOpen(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     import_popover.Popover.Root,
     {
       open,
@@ -720,8 +783,8 @@ var Dropdown = ({
         placement: align === "end" ? "bottom-end" : "bottom-start"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Trigger, { asChild: true, children: trigger(open) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_popover.Popover.Content,
           {
             "data-theme": theme,
@@ -739,7 +802,7 @@ var Dropdown = ({
 };
 
 // src/primitives/icons/index.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -748,26 +811,26 @@ var strokeProps = {
   strokeLinejoin: "round"
 };
 function AppIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M2 20h20" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M2 20h20" })
   ] });
 }
 function BeakerIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M9 3h6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 14h10" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 14h10" })
   ] });
 }
 function BookIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M20 4h-5a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h6z" })
   ] });
 }
 function CheckIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -775,24 +838,24 @@ function CheckIcon(props) {
       ...strokeProps,
       strokeWidth: 2.5,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "20 6 9 17 4 12" })
     }
   );
 }
 function ClipboardIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 7v5l3 2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M12 7v5l3 2" })
   ] });
 }
 function DiscordIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -801,23 +864,23 @@ function DiscordIcon(props) {
   ) });
 }
 function DownloadIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "7 10 12 15 17 10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) });
 }
 function GenApiIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M8 3v18M16 3v18" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M8 3v18M16 3v18" })
   ] });
 }
 function GitHubIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -826,69 +889,69 @@ function GitHubIcon(props) {
   ) });
 }
 function ImageIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m21 15-5-5L5 21" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m21 15-5-5L5 21" })
   ] });
 }
 function LockIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function MailIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m3 7 9 7 9-7" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m3 7 9 7 9-7" })
   ] });
 }
 function McpIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 12h4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M10 12h4" })
   ] });
 }
 function MenuIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 }
 function TerminalIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "4 8 8 12 4 16" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "4 8 8 12 4 16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
   ] });
 }
 function TokensIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
 }
 function TrendUpIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "3 17 9 11 13 15 21 7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "15 7 21 7 21 13" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "3 17 9 11 13 15 21 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "15 7 21 7 21 13" })
   ] });
 }
 function WalletIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M3 7a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2v2H5a2 2 0 0 0-2 2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
   ] });
 }
 function XIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 
 // src/primitives/ExternalLinkButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ExternalLinkButton = ({
   theme,
   href,
   size = "medium",
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   Button,
   {
     as: "a",
@@ -899,8 +962,8 @@ var ExternalLinkButton = ({
     size,
     className: cn2("polli:gap-2", className),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         ExternalLinkIcon,
         {
           className: "polli:h-4 polli:w-4 polli:shrink-0 polli:opacity-60",
@@ -915,8 +978,8 @@ var ExternalLinkButton = ({
 var import_field = require("@ark-ui/react/field");
 
 // src/primitives/IconButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var intentClasses3 = {
+var import_jsx_runtime13 = require("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";
@@ -926,7 +989,7 @@ var IconButton = ({
   onClick,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
   "button",
   {
     type: "button",
@@ -935,7 +998,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
@@ -943,18 +1006,18 @@ var IconButton = ({
 );
 
 // src/primitives/InfoTip.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var InfoTip = ({
   text,
   content,
   label = "More info"
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime14.jsx)(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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
 var import_react5 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var Input = (0, import_react5.forwardRef)(
-  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "input",
     {
       ref,
@@ -972,18 +1035,17 @@ var Input = (0, import_react5.forwardRef)(
 
 // src/primitives/ScrollArea.tsx
 var import_react6 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("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 = (0, import_react6.forwardRef)(
-  ({ theme, axis = "y", hideDelayMs = 2e3, className, children, ...rest }, externalRef) => {
+  ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
     const innerRef = (0, import_react6.useRef)(null);
     const setRef = (0, import_react6.useCallback)(
       (node) => {
@@ -1012,7 +1074,7 @@ var ScrollArea = (0, import_react6.forwardRef)(
       };
       const scheduleHide = () => {
         clearHideTimer();
-        hideTimer = window.setTimeout(hide, hideDelayMs);
+        hideTimer = window.setTimeout(hide, 2e3);
       };
       const handleInteraction = () => {
         show();
@@ -1042,15 +1104,15 @@ var ScrollArea = (0, import_react6.forwardRef)(
         element.removeEventListener("focusin", handleInteraction);
         element.removeEventListener("focusout", scheduleHide);
       };
-    }, [hideDelayMs]);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "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
         ),
@@ -1062,7 +1124,7 @@ var ScrollArea = (0, import_react6.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/MultiSelect.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("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";
@@ -1087,16 +1149,16 @@ var MultiSelect = ({
   };
   const selectAll = () => onChange([]);
   const displayText = disabled ? disabledText : isAllSelected ? "All" : `${selected.length} selected`;
-  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
+  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         "data-theme": theme,
         className: "polli:group polli:relative polli:flex polli:items-center polli:gap-2",
         children: [
           labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             "button",
             {
               type: "button",
@@ -1106,8 +1168,8 @@ var MultiSelect = ({
                 "polli:cursor-not-allowed polli:border-theme-border polli:bg-theme-bg-subtle polli:opacity-60"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   ChevronIcon,
                   {
                     expanded: false,
@@ -1117,25 +1179,25 @@ var MultiSelect = ({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:items-center polli:gap-2",
       children: [
         labelNode,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           Dropdown,
           {
             theme,
             align,
             className: "polli:min-w-[320px]",
-            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
               "button",
               {
                 type: "button",
@@ -1144,7 +1206,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__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                     "span",
                     {
                       className: cn2(
@@ -1154,7 +1216,7 @@ var MultiSelect = ({
                       children: displayText
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                     ChevronIcon,
                     {
                       expanded: open,
@@ -1167,8 +1229,8 @@ var MultiSelect = ({
                 ]
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1178,7 +1240,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__ */ (0, import_jsx_runtime15.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       "span",
                       {
                         className: cn2(
@@ -1194,7 +1256,7 @@ var MultiSelect = ({
               ),
               options.map((opt) => {
                 const isChecked = selected.includes(opt.value);
-                return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -1204,7 +1266,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__ */ (0, import_jsx_runtime15.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                         "span",
                         {
                           className: cn2(
@@ -1214,7 +1276,7 @@ var MultiSelect = ({
                           children: isChecked && "\u2713"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
                     ]
                   },
                   opt.value
@@ -1232,7 +1294,7 @@ var MultiSelect = ({
 var import_react7 = require("react");
 
 // src/primitives/TabButton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("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"
@@ -1247,7 +1309,7 @@ var TabButton = ({
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -1269,7 +1331,7 @@ var TabButton = ({
 };
 
 // src/primitives/PeriodPicker.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTH_LABELS = [
   "Jan",
@@ -1349,14 +1411,14 @@ var PeriodPicker = ({
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:flex-wrap polli:items-center polli:gap-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
-          (granularity2) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
+          (granularity2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             TabButton,
             {
               active: value.granularity === granularity2,
@@ -1366,14 +1428,14 @@ var PeriodPicker = ({
             granularity2
           )
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           Dropdown,
           {
             theme,
             open,
             onOpenChange: setOpen,
             className: "polli:w-[304px] polli:rounded-xl polli:p-3",
-            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
                 type: "button",
@@ -1385,14 +1447,14 @@ var PeriodPicker = ({
                   isOpen && "polli:bg-theme-bg-active polli:text-theme-text-strong polli:shadow-sm"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: formatPeriodLabel(value) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronIcon, { expanded: isOpen })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: formatPeriodLabel(value) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronIcon, { expanded: isOpen })
                 ]
               }
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1406,8 +1468,8 @@ var PeriodPicker = ({
                     children: "<"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1422,7 +1484,7 @@ var PeriodPicker = ({
                   }
                 )
               ] }),
-              value.granularity === "month" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:grid polli:grid-cols-3 polli:gap-1.5", children: MONTH_LABELS.map((label, monthIndex) => {
+              value.granularity === "month" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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(),
@@ -1441,7 +1503,7 @@ var PeriodPicker = ({
                   year: "numeric"
                 });
                 const selected = date.getUTCFullYear() === selectedWindow.start.getUTCFullYear() && date.getUTCMonth() === selectedWindow.start.getUTCMonth();
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1457,9 +1519,9 @@ var PeriodPicker = ({
                   },
                   label
                 );
-              }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("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__ */ (0, import_jsx_runtime17.jsx)("div", { children: label }, label)) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "polli:grid polli:grid-cols-7 polli:gap-1", children: dates.map((date) => {
+              }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("div", { children: label }, label)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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),
@@ -1477,7 +1539,7 @@ var PeriodPicker = ({
                     }
                   )}`;
                   const selected = value.granularity === "day" ? sameUtcDay(date, selectedWindow.start) : date >= selectedWindow.start && date < selectedWindow.end;
-                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1506,7 +1568,7 @@ var PeriodPicker = ({
 };
 
 // src/primitives/Surface.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("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",
@@ -1518,7 +1580,7 @@ var Surface = ({
   className,
   children,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "div",
   {
     ...rest,
@@ -1529,7 +1591,7 @@ var Surface = ({
 );
 
 // src/primitives/Section.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var Section = ({
   title,
   theme,
@@ -1539,9 +1601,9 @@ var Section = ({
   actionClassName,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { id, className: cn2("scroll-mt-10 space-y-2", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "h2",
       {
         "data-theme": theme,
@@ -1549,14 +1611,14 @@ var Section = ({
         children: title
       }
     ),
-    action && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn2("shrink-0", actionClassName), children: action })
+    action && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn2("shrink-0", actionClassName), children: action })
   ] }),
-  framed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Surface, { variant: "panel", theme, children }) : children
+  framed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Surface, { variant: "panel", theme, children }) : children
 ] });
 
 // src/primitives/Slider.tsx
 var import_react8 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var toNumber = (value) => {
   if (typeof value === "number") return value;
   if (typeof value !== "string" || value.trim() === "") return void 0;
@@ -1596,7 +1658,7 @@ var Slider = (0, import_react8.forwardRef)(
       ...style,
       ...progressPercent === void 0 ? null : { "--polli-slider-progress": `${progressPercent}%` }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "input",
       {
         ref,
@@ -1614,7 +1676,7 @@ var Slider = (0, import_react8.forwardRef)(
 );
 
 // src/primitives/StatCard.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var StatCard = ({
   label,
   value,
@@ -1624,8 +1686,8 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: cn2(
@@ -1635,7 +1697,7 @@ var StatCard = ({
       children: label
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: cn2(
@@ -1645,7 +1707,7 @@ var StatCard = ({
       children: value
     }
   ),
-  detail && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  detail && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: cn2(
@@ -1658,7 +1720,7 @@ var StatCard = ({
 ] });
 
 // src/primitives/Switch.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var trackClasses = {
   off: "polli:bg-gray-200",
   on: "polli:bg-[oklch(0.88_0.12_158)]",
@@ -1674,7 +1736,7 @@ var Switch = ({
 }) => {
   const effectiveStatus = status ?? (checked ? "on" : "off");
   const resolvedAriaLabel = ariaLabel ?? (checked ? "Turn off toggle" : "Turn on toggle");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "button",
     {
       type: "button",
@@ -1688,7 +1750,7 @@ var Switch = ({
         trackClasses[effectiveStatus],
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "span",
         {
           className: cn2(
@@ -1701,6 +1763,118 @@ var Switch = ({
   );
 };
 
+// src/primitives/Table.tsx
+var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.jsx)(
+  "table",
+  {
+    ...rest,
+    className: cn2(
+      "polli:w-full polli:border-collapse polli:text-sm",
+      className
+    )
+  }
+);
+var TableHead = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  "thead",
+  {
+    ...rest,
+    className: cn2(
+      "polli:bg-theme-bg-active polli:text-micro polli:text-theme-text-muted",
+      className
+    )
+  }
+);
+var TableBody = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  "tbody",
+  {
+    ...rest,
+    className: cn2("polli:divide-y polli:divide-theme-border/65", className)
+  }
+);
+var TableRow = ({
+  intent = "default",
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  "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__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children }),
+    active && sortDirection && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("th", { ...rest, className: classes, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { ...rest, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "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__ */ (0, import_jsx_runtime25.jsx)(
+  "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",
@@ -1710,16 +1884,14 @@ var themes = [
   "violet",
   "green"
 ];
-var themeColors = {
-  amber: "#FEF3C7",
-  blue: "#DBEAFE"
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
   AppIcon,
   BeakerIcon,
   BookIcon,
   Button,
+  ButtonGroup,
   CheckIcon,
   ChevronIcon,
   Chip,
@@ -1754,6 +1926,12 @@ var themeColors = {
   Surface,
   Switch,
   TabButton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
   TerminalIcon,
   TokensIcon,
   Tooltip,
@@ -1764,7 +1942,6 @@ var themeColors = {
   currentPeriod,
   getPeriodBucketKeys,
   periodBucketKeyToDate,
-  themeColors,
   themes,
   useScrollLock
 });