@pollinations/ui 0.0.2 → 0.1.0-alpha.0

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -38,21 +48,28 @@ __export(src_exports, {
   DiscordIcon: () => DiscordIcon,
   DownloadIcon: () => DownloadIcon,
   Dropdown: () => Dropdown,
+  DropdownItem: () => DropdownItem,
   ExternalLinkButton: () => ExternalLinkButton,
   ExternalLinkIcon: () => ExternalLinkIcon,
   Field: () => import_field.Field,
+  FileUpload: () => FileUpload,
   GenApiIcon: () => GenApiIcon,
   GitHubIcon: () => GitHubIcon,
   IconButton: () => IconButton,
   ImageIcon: () => ImageIcon,
   InfoTip: () => InfoTip,
+  InlineLink: () => InlineLink,
   Input: () => Input,
+  LinkCard: () => LinkCard,
   LockIcon: () => LockIcon,
   MailIcon: () => MailIcon,
+  Markdown: () => Markdown,
   McpIcon: () => McpIcon,
   MenuIcon: () => MenuIcon,
   MultiSelect: () => MultiSelect,
+  NavItem: () => NavItem,
   PeriodPicker: () => PeriodPicker,
+  Prose: () => Prose,
   ScrollArea: () => ScrollArea,
   Section: () => Section,
   Slider: () => Slider,
@@ -67,6 +84,7 @@ __export(src_exports, {
   TableHeaderCell: () => TableHeaderCell,
   TableRow: () => TableRow,
   TerminalIcon: () => TerminalIcon,
+  Textarea: () => Textarea,
   TokensIcon: () => TokensIcon,
   Tooltip: () => Tooltip,
   TrendUpIcon: () => TrendUpIcon,
@@ -284,13 +302,13 @@ var Alert = ({
 // 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"
+  sm: "polli:px-2 polli:pt-0.5 polli:pb-1",
+  md: "polli:px-4 polli:pt-1.5 polli:pb-2",
+  lg: "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 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"
+  danger: "polli:bg-intent-danger-bg-light polli:text-intent-danger-text polli:hover:bg-intent-danger-bg-hover polli:transition-colors"
 };
 var buttonClasses = ({
   theme: _theme,
@@ -301,10 +319,10 @@ var buttonClasses = ({
 }) => {
   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",
+    "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:self-center 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",
     colorClasses,
-    sizes[size || "medium"],
+    sizes[size || "md"],
     className
   );
 };
@@ -323,6 +341,7 @@ function Button({
     Component,
     {
       "data-theme": intent ? void 0 : theme,
+      "data-intent": intent,
       className: buttonClasses({
         theme,
         intent,
@@ -395,8 +414,8 @@ var chipSizes = {
   lg: "polli:px-3 polli:py-1 polli:text-sm"
 };
 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)]",
+  news: "polli:bg-intent-news-bg-light polli:text-intent-news-text",
+  alpha: "polli:bg-intent-alpha-bg-light polli:text-intent-alpha-text",
   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",
@@ -458,7 +477,7 @@ var Collapsible = ({
           disabled,
           onClick: onToggle,
           className: cn2(
-            "polli:w-full polli:flex polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:transition-colors",
+            "polli-control polli:w-full polli:flex polli:items-center polli:gap-3 polli:px-3 polli:py-2 polli:text-left polli:transition-colors",
             expanded ? "polli:rounded-t-lg" : "polli:rounded-lg",
             !disabled && hoverClassName,
             focusClassName,
@@ -528,7 +547,7 @@ var Tooltip = ({
     }
   };
   const triggerClassName = cn2(
-    "polli:relative polli:cursor-help polli:text-left polli:inline-flex polli:items-center",
+    "polli-control polli:relative polli:cursor-help polli:text-left polli:inline-flex polli:items-center",
     className
   );
   const cursorClass = displayContents ? "polli:contents" : "polli:cursor-help";
@@ -644,6 +663,7 @@ function CopyButton({
       type: "button",
       onClick: handleCopy,
       className: cn2(
+        "polli-control",
         typeof className === "function" ? className(copied) : className
       ),
       children: typeof children === "function" ? children(copied) : children
@@ -663,6 +683,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_react4 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var sizeClasses = {
   sm: "polli:max-w-md",
@@ -686,77 +707,83 @@ var Dialog = ({
   positionerClassName,
   contentClassName,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-  import_dialog.Dialog.Root,
-  {
-    open,
-    onOpenChange: (details) => onOpenChange?.(details.open),
-    children: [
-      trigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_dialog.Dialog.Trigger,
-        {
-          asChild: triggerAsChild,
-          className: triggerClassName,
-          children: trigger
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_portal.Portal, { children: [
-        showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_dialog.Dialog.Backdrop,
+}) => {
+  const contentRef = (0, import_react4.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_dialog.Dialog.Root,
+    {
+      open,
+      initialFocusEl: () => contentRef.current,
+      onOpenChange: (details) => onOpenChange?.(details.open),
+      children: [
+        trigger && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_dialog.Dialog.Trigger,
           {
-            className: cn2(
-              "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
-              backdropClassName
-            )
+            asChild: triggerAsChild,
+            className: triggerClassName,
+            children: trigger
           }
         ),
-        /* @__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_runtime9.jsxs)(
-              import_dialog.Dialog.Content,
-              {
-                "data-theme": theme,
-                "aria-label": ariaLabel,
-                "aria-labelledby": labelledBy,
-                className: cn2(
-                  "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg",
-                  sizeClasses[size],
-                  contentClassName
-                ),
-                children: [
-                  title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    DialogTitle,
-                    {
-                      className: cn2(
-                        "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
-                        titleClassName
-                      ),
-                      children: title
-                    }
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_portal.Portal, { children: [
+          showBackdrop && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_dialog.Dialog.Backdrop,
+            {
+              className: cn2(
+                "polli:fixed polli:inset-0 polli:z-[100] polli:bg-gray-950/50",
+                backdropClassName
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            import_dialog.Dialog.Positioner,
+            {
+              "data-theme": theme,
+              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_runtime9.jsxs)(
+                import_dialog.Dialog.Content,
+                {
+                  ref: contentRef,
+                  "data-theme": theme,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": labelledBy,
+                  className: cn2(
+                    "polli:my-auto polli:w-full polli:overflow-hidden polli:rounded-lg polli:border-2 polli:border-theme-border polli:bg-white polli:shadow-lg polli:outline-none polli:focus:outline-none polli:focus-visible:outline-none",
+                    sizeClasses[size],
+                    contentClassName
                   ),
-                  children
-                ]
-              }
-            )
-          }
-        )
-      ] })
-    ]
-  }
-);
+                  children: [
+                    title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      DialogTitle,
+                      {
+                        className: cn2(
+                          "polli:px-6 polli:pt-6 polli:font-subheading polli:text-xl polli:text-theme-text-strong",
+                          titleClassName
+                        ),
+                        children: title
+                      }
+                    ),
+                    children
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var DialogTitle = import_dialog.Dialog.Title;
 
 // src/primitives/Dropdown.tsx
 var import_popover = require("@ark-ui/react/popover");
 var import_portal2 = require("@ark-ui/react/portal");
-var import_react4 = require("react");
+var import_react5 = require("react");
 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 DEFAULT_PANEL = "polli:rounded-lg polli:border polli:border-theme-border polli:bg-theme-bg-pale polli:shadow-lg";
 var Dropdown = ({
   theme,
   trigger,
@@ -764,10 +791,9 @@ var Dropdown = ({
   align = "start",
   open: openProp,
   onOpenChange,
-  panelClassName,
   className
 }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react5.useState)(false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : internalOpen;
   const setOpen = (next) => {
@@ -790,7 +816,7 @@ var Dropdown = ({
             "data-theme": theme,
             className: cn2(
               "polli:z-50 polli:overflow-hidden polli:focus:outline-none",
-              panelClassName ?? DEFAULT_PANEL,
+              DEFAULT_PANEL,
               className
             ),
             children: typeof children === "function" ? children(() => setOpen(false)) : children
@@ -801,8 +827,31 @@ var Dropdown = ({
   );
 };
 
-// src/primitives/icons/index.tsx
+// src/primitives/DropdownItem.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
+function DropdownItem({
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Component,
+    {
+      ...Component === "button" ? { type: "button" } : void 0,
+      ...rest,
+      className: cn2(
+        "polli-control polli:flex polli:w-full polli:cursor-pointer polli:items-center polli:gap-2 polli:rounded-lg polli:bg-transparent polli:px-3 polli:py-2 polli:text-left polli:text-sm polli:font-medium polli:text-theme-text-base polli:no-underline polli:transition-colors polli:hover:bg-theme-bg-hover polli:focus-visible:bg-theme-bg-hover",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/primitives/icons/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var strokeProps = {
   fill: "none",
   stroke: "currentColor",
@@ -811,26 +860,26 @@ var strokeProps = {
   strokeLinejoin: "round"
 };
 function AppIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M2 20h20" })
   ] });
 }
 function BeakerIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("path", { d: "M7 14h10" })
   ] });
 }
 function BookIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 4h5a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "svg",
     {
       "aria-hidden": "true",
@@ -838,24 +887,24 @@ function CheckIcon(props) {
       ...strokeProps,
       strokeWidth: 2.5,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("polyline", { points: "20 6 9 17 4 12" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "20 6 9 17 4 12" })
     }
   );
 }
 function ClipboardIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 7v5l3 2" })
   ] });
 }
 function DiscordIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -864,23 +913,23 @@ function DiscordIcon(props) {
   ) });
 }
 function DownloadIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
   ] });
 }
 function ExternalLinkIcon(props) {
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) });
 }
 function GenApiIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m8 3 4 1.5L16 3v18l-4-1.5L8 21z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M8 3v18M16 3v18" })
   ] });
 }
 function GitHubIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "path",
     {
       fill: "currentColor",
@@ -889,69 +938,69 @@ function GitHubIcon(props) {
   ) });
 }
 function ImageIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m21 15-5-5L5 21" })
   ] });
 }
 function LockIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
   ] });
 }
 function MailIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m3 7 9 7 9-7" })
   ] });
 }
 function McpIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "2", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { x: "14", y: "7", width: "8", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 12h4" })
   ] });
 }
 function MenuIcon(props) {
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
 }
 function TerminalIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "4 8 8 12 4 16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("line", { x1: "12", y1: "20", x2: "20", y2: "20" })
   ] });
 }
 function TokensIcon(props) {
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 9h16M4 15h16M10 3 8 21M16 3l-2 18" }) });
 }
 function TrendUpIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "3 17 9 11 13 15 21 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("polyline", { points: "15 7 21 7 21 13" })
   ] });
 }
 function WalletIcon(props) {
-  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" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.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_runtime12.jsx)("circle", { cx: "17", cy: "14", r: "1.25", fill: "currentColor" })
   ] });
 }
 function XIcon(props) {
-  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" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", ...strokeProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
 }
 
 // src/primitives/ExternalLinkButton.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var ExternalLinkButton = ({
   theme,
   href,
-  size = "medium",
+  size = "md",
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
   Button,
   {
     as: "a",
@@ -962,8 +1011,8 @@ var ExternalLinkButton = ({
     size,
     className: cn2("polli:gap-2", className),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         ExternalLinkIcon,
         {
           className: "polli:h-4 polli:w-4 polli:shrink-0 polli:opacity-60",
@@ -977,10 +1026,48 @@ var ExternalLinkButton = ({
 // src/primitives/Field.tsx
 var import_field = require("@ark-ui/react/field");
 
+// src/primitives/FileUpload.tsx
+var import_react6 = require("react");
+
+// src/lib/partition-files.ts
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  return tokens.some((token) => {
+    if (token.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(token.toLowerCase());
+    }
+    if (token.endsWith("/*")) {
+      const prefix = token.slice(0, token.length - 1);
+      return file.type.startsWith(prefix);
+    }
+    return file.type === token;
+  });
+}
+function partitionFiles(incoming, current, { maxFiles, maxSizeBytes, accept }) {
+  const accepted = [];
+  const rejected = [];
+  let slots = Math.max(0, maxFiles - current.length);
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) {
+      rejected.push({ file, reason: "type" });
+    } else if (file.size > maxSizeBytes) {
+      rejected.push({ file, reason: "size" });
+    } else if (slots <= 0) {
+      rejected.push({ file, reason: "count" });
+    } else {
+      accepted.push(file);
+      slots -= 1;
+    }
+  }
+  return { accepted, rejected };
+}
+
 // src/primitives/IconButton.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = 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"
+  danger: "polli:bg-intent-danger-bg-light polli:hover:bg-intent-danger-bg-hover 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";
 var IconButton = ({
@@ -989,15 +1076,16 @@ var IconButton = ({
   onClick,
   children,
   className
-}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   "button",
   {
     type: "button",
     onClick,
     title,
     "aria-label": title,
+    "data-intent": intent,
     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",
+      "polli-control polli:inline-flex polli:h-6 polli:w-6 polli:cursor-pointer polli:items-center polli:justify-center polli:rounded polli:transition-colors",
       intent ? intentClasses4[intent] : defaultClasses,
       className
     ),
@@ -1005,26 +1093,252 @@ var IconButton = ({
   }
 );
 
+// src/primitives/FileUpload.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PREVIEWABLE_IMAGE_TYPES = /* @__PURE__ */ new Set([
+  "image/gif",
+  "image/jpeg",
+  "image/png",
+  "image/webp"
+]);
+var PREVIEW_SIZE = 64;
+function isPreviewableImage(file) {
+  return PREVIEWABLE_IMAGE_TYPES.has(file.type);
+}
+function PreviewPlaceholder() {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "polli:flex polli:h-16 polli:w-16 polli:items-center polli:justify-center polli:rounded-lg polli:bg-theme-bg-active polli:text-theme-text-soft", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageIcon, { className: "polli:h-5 polli:w-5" }) });
+}
+function FilePreview({ file }) {
+  const canvasRef = (0, import_react6.useRef)(null);
+  const [canPreview, setCanPreview] = (0, import_react6.useState)(
+    () => isPreviewableImage(file)
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!isPreviewableImage(file)) {
+      setCanPreview(false);
+      return;
+    }
+    let cancelled = false;
+    setCanPreview(true);
+    async function drawPreview() {
+      try {
+        const bitmap = await createImageBitmap(file);
+        if (cancelled) {
+          bitmap.close();
+          return;
+        }
+        const canvas = canvasRef.current;
+        const context = canvas?.getContext("2d");
+        if (!canvas || !context) {
+          bitmap.close();
+          setCanPreview(false);
+          return;
+        }
+        canvas.width = PREVIEW_SIZE;
+        canvas.height = PREVIEW_SIZE;
+        const scale = Math.max(
+          PREVIEW_SIZE / bitmap.width,
+          PREVIEW_SIZE / bitmap.height
+        );
+        const width = bitmap.width * scale;
+        const height = bitmap.height * scale;
+        const x = (PREVIEW_SIZE - width) / 2;
+        const y = (PREVIEW_SIZE - height) / 2;
+        context.clearRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
+        context.drawImage(bitmap, x, y, width, height);
+        bitmap.close();
+      } catch {
+        if (!cancelled) setCanPreview(false);
+      }
+    }
+    void drawPreview();
+    return () => {
+      cancelled = true;
+    };
+  }, [file]);
+  if (!canPreview) return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PreviewPlaceholder, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      role: "img",
+      "aria-label": file.name,
+      className: "polli:h-16 polli:w-16 polli:rounded-lg",
+      width: PREVIEW_SIZE,
+      height: PREVIEW_SIZE
+    }
+  );
+}
+function FileUpload({
+  value,
+  onChange,
+  onReject,
+  maxFiles = 4,
+  maxSizeBytes = 10 * 1024 * 1024,
+  accept = "image/*",
+  disabled = false,
+  theme,
+  className
+}) {
+  (0, import_react6.useEffect)(() => {
+    const prevent = (event) => event.preventDefault();
+    document.addEventListener("dragover", prevent);
+    document.addEventListener("drop", prevent);
+    return () => {
+      document.removeEventListener("dragover", prevent);
+      document.removeEventListener("drop", prevent);
+    };
+  }, []);
+  function addFiles(incoming) {
+    if (disabled || incoming.length === 0) return;
+    const { accepted, rejected } = partitionFiles(incoming, value, {
+      maxFiles,
+      maxSizeBytes,
+      accept
+    });
+    if (accepted.length > 0) onChange([...value, ...accepted]);
+    if (rejected.length > 0) onReject?.(rejected);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      "data-theme": theme,
+      className: cn2("polli:flex polli:flex-col polli:gap-3", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "label",
+          {
+            className: cn2(
+              "polli-control polli:flex polli:flex-col polli:items-center polli:justify-center polli:gap-2",
+              "polli:rounded-xl polli:border polli:border-dashed polli:border-theme-border",
+              "polli:bg-theme-bg-pale polli:px-4 polli:py-6 polli:text-center polli:text-sm",
+              "polli:text-theme-text-soft polli:transition-colors",
+              disabled ? "polli:cursor-not-allowed polli:opacity-50" : "polli:cursor-pointer polli:hover:bg-theme-bg-hover"
+            ),
+            onDragOver: (e) => e.preventDefault(),
+            onDrop: (e) => {
+              e.preventDefault();
+              if (disabled) return;
+              addFiles(Array.from(e.dataTransfer.files));
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ImageIcon, { className: "polli:h-6 polli:w-6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+                "Drag images here or",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:underline", children: "browse" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "input",
+                {
+                  type: "file",
+                  accept,
+                  multiple: maxFiles > 1,
+                  disabled,
+                  className: "polli:sr-only",
+                  onChange: (e) => {
+                    addFiles(Array.from(e.target.files ?? []));
+                    e.target.value = "";
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "polli:m-0 polli:flex polli:flex-wrap polli:gap-3 polli:p-0", children: value.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "li",
+          {
+            className: "polli:relative polli:flex polli:list-none polli:flex-col polli:gap-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FilePreview, { file }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "polli:max-w-16 polli:truncate polli:text-xs polli:text-theme-text-muted", children: file.name }),
+              !disabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "polli:absolute polli:-top-2 polli:-right-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                IconButton,
+                {
+                  intent: "danger",
+                  title: `Remove ${file.name}`,
+                  onClick: () => onChange(
+                    value.filter(
+                      (_, i) => i !== index
+                    )
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { className: "polli:h-3 polli:w-3" })
+                }
+              ) })
+            ]
+          },
+          `${file.name}-${index}`
+        )) })
+      ]
+    }
+  );
+}
+
 // src/primitives/InfoTip.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var InfoTip = ({
   text,
   content,
   label = "More info"
-}) => /* @__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" }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tooltip, { content: content ?? text, ariaLabel: label, className: "polli:ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.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/InlineLink.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function isExternalHref(href) {
+  return typeof href === "string" && /^https?:\/\//.test(href);
+}
+function InlineLink({
+  as,
+  theme,
+  external,
+  showIcon = true,
+  className,
+  children,
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref(linkProps.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Component,
+    {
+      "data-theme": theme,
+      target: isExternal ? "_blank" : void 0,
+      rel: isExternal ? "noopener noreferrer" : void 0,
+      className: cn2(
+        "polli-control polli:inline-flex polli:items-center polli:gap-1 polli:rounded-sm polli:font-semibold polli:text-theme-text-strong",
+        "polli:underline polli:decoration-theme-border polli:decoration-2 polli:underline-offset-3",
+        "polli:transition-colors polli:hover:text-theme-text-soft polli:hover:decoration-theme-text-soft",
+        className
+      ),
+      ...linkProps,
+      children: [
+        children,
+        showIcon && isExternal && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ExternalLinkIcon,
+          {
+            "aria-hidden": "true",
+            className: "polli:h-3.5 polli:w-3.5 polli:shrink-0 polli:opacity-65"
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/primitives/Input.tsx
-var import_react5 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Input = (0, import_react5.forwardRef)(
-  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var import_react7 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Input = (0, import_react7.forwardRef)(
+  ({ className, error, hideNumberSteppers, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "input",
     {
       ref,
+      "data-error": error ? "true" : void 0,
       className: cn2(
-        "polli:px-3 polli:py-2 polli:border polli:rounded-lg",
+        "polli-input polli:px-3 polli:py-2 polli:border polli:rounded-lg",
+        "polli:text-gray-950",
+        "polli:transition-colors",
         "polli:disabled:opacity-50 polli:disabled:cursor-not-allowed",
-        error ? "polli:border-red-400" : "polli:border-gray-300",
         hideNumberSteppers && "polli-input-number-clean",
         className
       ),
@@ -1033,9 +1347,145 @@ var Input = (0, import_react5.forwardRef)(
   )
 );
 
+// src/primitives/Surface.tsx
+var import_jsx_runtime19 = 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",
+  "card-themed": "polli:rounded-xl polli:bg-theme-bg-pale polli:p-4"
+};
+var Surface = ({
+  theme,
+  variant = "card",
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  "div",
+  {
+    ...rest,
+    "data-theme": theme,
+    className: cn2("polli:min-w-0", variantClasses[variant], className),
+    children
+  }
+);
+
+// src/primitives/LinkCard.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function isExternalHref2(href) {
+  return typeof href === "string" && /^https?:\/\//.test(href);
+}
+function LinkCard({
+  as,
+  theme,
+  external,
+  showIcon = true,
+  className,
+  surfaceClassName,
+  children,
+  ...linkProps
+}) {
+  const Component = as || "a";
+  const isExternal = external ?? isExternalHref2(linkProps.href);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Component,
+    {
+      "data-theme": theme,
+      target: isExternal ? "_blank" : void 0,
+      rel: isExternal ? "noopener noreferrer" : void 0,
+      className: cn2(
+        "polli:group polli:block polli:h-full polli:rounded-xl polli:outline-none",
+        className
+      ),
+      ...linkProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        Surface,
+        {
+          theme,
+          variant: "card",
+          className: cn2(
+            "polli:relative polli:flex polli:h-full polli:flex-col polli:gap-2 polli:bg-white/80 polli:p-5",
+            showIcon && isExternal && "polli:pr-10",
+            "polli:transition polli:group-hover:-translate-y-0.5 polli:group-hover:bg-white/95",
+            "polli:group-focus-visible:ring-2 polli:group-focus-visible:ring-theme-border",
+            surfaceClassName
+          ),
+          children: [
+            showIcon && isExternal && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              ExternalLinkIcon,
+              {
+                "aria-hidden": "true",
+                className: "polli:absolute polli:top-4 polli:right-4 polli:h-3.5 polli:w-3.5 polli:text-theme-text-soft"
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/primitives/Markdown.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var components = {
+  ul: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "ul",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-disc polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "ol",
+    {
+      className: "polli:flex polli:min-w-0 polli:list-decimal polli:flex-col polli:gap-1 polli:pl-5 polli:marker:text-theme-text-muted",
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "polli:mb-2 polli:last:mb-0", ...props }),
+  strong: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "strong",
+    {
+      className: "polli:font-semibold polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "code",
+    {
+      className: "polli:break-words polli:rounded polli:bg-theme-bg-subtle polli:px-1 polli:py-0.5 polli:font-mono polli:text-xs",
+      ...props
+    }
+  ),
+  a: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "a",
+    {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "polli-control polli:rounded-sm polli:font-semibold polli:text-theme-text-strong polli:underline polli:underline-offset-2",
+      ...props
+    }
+  )
+};
+function Markdown({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      className: cn2(
+        "polli:min-w-0 polli:font-body polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components, children })
+    }
+  );
+}
+
 // src/primitives/ScrollArea.tsx
-var import_react6 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var axisClasses = {
   y: "polli:overflow-y-auto polli:overflow-x-hidden",
   x: "polli:overflow-x-auto polli:overflow-y-hidden"
@@ -1044,17 +1494,17 @@ function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ScrollArea = (0, import_react6.forwardRef)(
+var ScrollArea = (0, import_react8.forwardRef)(
   ({ theme, axis = "y", className, children, ...rest }, externalRef) => {
-    const innerRef = (0, import_react6.useRef)(null);
-    const setRef = (0, import_react6.useCallback)(
+    const innerRef = (0, import_react8.useRef)(null);
+    const setRef = (0, import_react8.useCallback)(
       (node) => {
         innerRef.current = node;
         assignRef(externalRef, node);
       },
       [externalRef]
     );
-    (0, import_react6.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       const element = innerRef.current;
       if (!element) return;
       let hideTimer = null;
@@ -1105,7 +1555,7 @@ var ScrollArea = (0, import_react6.forwardRef)(
         element.removeEventListener("focusout", scheduleHide);
       };
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         ...rest,
@@ -1124,9 +1574,9 @@ var ScrollArea = (0, import_react6.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/MultiSelect.tsx
-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 import_jsx_runtime23 = require("react/jsx-runtime");
+var TRIGGER_BASE = "polli-control 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-control 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";
 var MultiSelect = ({
   options,
@@ -1149,16 +1599,16 @@ var MultiSelect = ({
   };
   const selectAll = () => onChange([]);
   const displayText = disabled ? disabledText : isAllSelected ? "All" : `${selected.length} selected`;
-  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;
+  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:text-xs polli:font-medium polli:text-theme-text-soft", children: label }) : null;
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         "data-theme": theme,
         className: "polli:group polli:relative polli:flex polli:items-center polli:gap-2",
         children: [
           labelNode,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "button",
             {
               type: "button",
@@ -1168,8 +1618,8 @@ var MultiSelect = ({
                 "polli:cursor-not-allowed polli:border-theme-border polli:bg-theme-bg-subtle polli:opacity-60"
               ),
               children: [
-                /* @__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)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:flex-1 polli:truncate polli:text-left polli:text-theme-text-soft/60", children: displayText }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   ChevronIcon,
                   {
                     expanded: false,
@@ -1179,25 +1629,25 @@ var MultiSelect = ({
               ]
             }
           ),
-          /* @__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" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:items-center polli:gap-2",
       children: [
         labelNode,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Dropdown,
           {
             theme,
             align,
             className: "polli:min-w-[320px]",
-            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            trigger: (open) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "button",
               {
                 type: "button",
@@ -1206,7 +1656,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_runtime17.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "span",
                     {
                       className: cn2(
@@ -1216,7 +1666,7 @@ var MultiSelect = ({
                       children: displayText
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     ChevronIcon,
                     {
                       expanded: open,
@@ -1229,8 +1679,8 @@ var MultiSelect = ({
                 ]
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ScrollArea, { theme, className: "polli:max-h-64", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -1240,7 +1690,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_runtime17.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                       "span",
                       {
                         className: cn2(
@@ -1256,7 +1706,7 @@ var MultiSelect = ({
               ),
               options.map((opt) => {
                 const isChecked = selected.includes(opt.value);
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -1266,7 +1716,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_runtime17.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         "span",
                         {
                           className: cn2(
@@ -1276,7 +1726,7 @@ var MultiSelect = ({
                           children: isChecked && "\u2713"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "polli:whitespace-nowrap", children: opt.label })
                     ]
                   },
                   opt.value
@@ -1290,26 +1740,74 @@ var MultiSelect = ({
   );
 };
 
+// src/primitives/NavItem.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var base = "polli-control polli:flex polli:items-center polli:gap-2 polli:rounded-full polli:px-3 polli:py-2 polli:text-left polli:text-sm polli:font-medium polli:whitespace-nowrap polli:transition-colors";
+var activeClasses = "polli:bg-theme-bg-active polli:text-theme-text-strong";
+var inactiveClasses = "polli:text-gray-800 polli:hover:bg-white/60 polli:hover:text-gray-950";
+var dotClasses = "polli:h-2.5 polli:w-2.5 polli:shrink-0 polli:rounded-full polli:bg-theme-bg-hover polli:shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]";
+function NavItem({
+  as,
+  theme,
+  active = false,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as || "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    Component,
+    {
+      "data-theme": theme,
+      "aria-current": active ? "page" : void 0,
+      className: cn2(
+        base,
+        active ? activeClasses : inactiveClasses,
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true", className: dotClasses }),
+        children
+      ]
+    }
+  );
+}
+
 // src/primitives/PeriodPicker.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/primitives/TabButton.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime25 = 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"
+  md: "polli:px-4 polli:py-1.5 polli:text-base",
+  sm: "polli:px-3 polli:py-1.5 polli:text-sm"
+};
+var variantClasses2 = {
+  default: {
+    base: "polli:border",
+    active: "polli:bg-theme-bg-active polli:text-theme-text-strong polli:border-theme-border",
+    inactive: "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:border-theme-border polli:hover:bg-theme-bg-active"
+  },
+  ghost: {
+    base: "polli:border polli:border-transparent",
+    active: "polli:bg-theme-bg-active polli:text-theme-text-strong",
+    inactive: "polli:bg-transparent polli:text-theme-text-base polli:hover:bg-theme-bg-subtle polli:hover:text-theme-text-strong"
+  }
 };
 var TabButton = ({
   theme,
   active,
   onClick,
   children,
-  size = "medium",
+  size = "md",
+  variant = "default",
   ariaLabel,
   disabled = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const classes = variantClasses2[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "button",
     {
       type: "button",
@@ -1319,8 +1817,9 @@ var TabButton = ({
       "aria-pressed": active,
       disabled,
       className: cn2(
-        "polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:border polli:font-medium polli:leading-normal polli:transition-all polli:duration-200",
-        active ? "polli:bg-theme-bg-active polli:text-theme-text-strong polli:border-theme-border" : "polli:bg-theme-bg-subtle polli:text-theme-text-base polli:border-theme-border polli:hover:bg-theme-bg-active",
+        "polli-control polli:inline-flex polli:items-center polli:justify-center polli:rounded-full polli:font-medium polli:leading-normal polli:transition-all polli:duration-200",
+        classes.base,
+        active ? classes.active : classes.inactive,
         disabled && "polli:cursor-not-allowed polli:opacity-50",
         sizeClasses2[size],
         className
@@ -1331,7 +1830,7 @@ var TabButton = ({
 };
 
 // src/primitives/PeriodPicker.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var MONTH_LABELS = [
   "Jan",
@@ -1347,7 +1846,7 @@ var MONTH_LABELS = [
   "Nov",
   "Dec"
 ];
-var NAV_BUTTON = "polli:rounded-full polli:px-2 polli:py-1 polli:text-xs polli:font-semibold polli:text-theme-text-base polli:transition-colors polli:hover:bg-theme-bg-subtle";
+var NAV_BUTTON = "polli-control polli:rounded-full polli:px-2 polli:py-1 polli:text-xs polli:font-semibold polli:text-theme-text-base polli:transition-colors polli:hover:bg-theme-bg-subtle";
 function addUtcMonths2(date, months) {
   return new Date(
     Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1)
@@ -1384,13 +1883,13 @@ var PeriodPicker = ({
   minDate = /* @__PURE__ */ new Date(0),
   maxDate
 }) => {
-  const [open, setOpen] = (0, import_react7.useState)(false);
-  const [viewDate, setViewDate] = (0, import_react7.useState)(() => periodDate(value));
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react9.useState)(() => periodDate(value));
   const { granularity, period } = value;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     setViewDate(periodDate({ granularity, period }));
   }, [granularity, period]);
-  const dates = (0, import_react7.useMemo)(() => monthGridDates(viewDate), [viewDate]);
+  const dates = (0, import_react9.useMemo)(() => monthGridDates(viewDate), [viewDate]);
   const selectedWindow = periodToWindow(value);
   const today = startOfUtcDay(maxDate);
   const previousViewDate = value.granularity === "month" ? addUtcMonths2(viewDate, -12) : addUtcMonths2(viewDate, -1);
@@ -1411,14 +1910,14 @@ var PeriodPicker = ({
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       "data-theme": theme,
       className: "polli:flex polli:flex-wrap polli:items-center polli:gap-2",
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:flex polli:flex-wrap polli:gap-1.5", children: ["day", "week", "month"].map(
+          (granularity2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             TabButton,
             {
               active: value.granularity === granularity2,
@@ -1428,33 +1927,33 @@ var PeriodPicker = ({
             granularity2
           )
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Dropdown,
           {
             theme,
             open,
             onOpenChange: setOpen,
             className: "polli:w-[304px] polli:rounded-xl polli:p-3",
-            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            trigger: (isOpen) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
               "button",
               {
                 type: "button",
                 "aria-label": `Select period, current ${formatPeriodLabel(value)}`,
                 className: cn2(
-                  "polli:inline-flex polli:min-w-[150px] polli:items-center polli:justify-between polli:gap-2 polli:rounded-full polli:border polli:px-4 polli:pt-1.5 polli:pb-2 polli:text-left polli:text-base polli:font-medium polli:leading-normal",
+                  "polli-control polli:inline-flex polli:min-w-[150px] polli:items-center polli:justify-between polli:gap-2 polli:rounded-full polli:border polli:px-4 polli:pt-1.5 polli:pb-2 polli:text-left polli:text-base polli:font-medium polli:leading-normal",
                   "polli:border-theme-border polli:bg-theme-bg-subtle polli:text-theme-text-base",
                   "polli:transition-all polli:duration-200 polli:ease-out polli:hover:bg-theme-bg-pale",
                   isOpen && "polli:bg-theme-bg-active polli:text-theme-text-strong polli:shadow-sm"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: formatPeriodLabel(value) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronIcon, { expanded: isOpen })
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: formatPeriodLabel(value) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronIcon, { expanded: isOpen })
                 ]
               }
             ),
             children: [
-              /* @__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)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "polli:mb-3 polli:flex polli:items-center polli:justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1468,8 +1967,8 @@ var PeriodPicker = ({
                     children: "<"
                   }
                 ),
-                /* @__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)(
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "polli:text-sm polli:font-bold polli:text-theme-text-base", children: viewLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1484,7 +1983,7 @@ var PeriodPicker = ({
                   }
                 )
               ] }),
-              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) => {
+              value.granularity === "month" ? /* @__PURE__ */ (0, import_jsx_runtime26.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(),
@@ -1503,7 +2002,7 @@ var PeriodPicker = ({
                   year: "numeric"
                 });
                 const selected = date.getUTCFullYear() === selectedWindow.start.getUTCFullYear() && date.getUTCMonth() === selectedWindow.start.getUTCMonth();
-                return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1511,7 +2010,7 @@ var PeriodPicker = ({
                     disabled: !selectable,
                     onClick: () => selectDate(date),
                     className: cn2(
-                      "polli:rounded-lg polli:px-3 polli:py-2 polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
+                      "polli-control polli:rounded-lg polli:px-3 polli:py-2 polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
                       selected ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-gray-700 polli:hover:bg-theme-bg-subtle",
                       !selectable && "polli:cursor-not-allowed polli:text-gray-300 polli:hover:bg-transparent"
                     ),
@@ -1519,9 +2018,9 @@ var PeriodPicker = ({
                   },
                   label
                 );
-              }) }) : /* @__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) => {
+              }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime26.jsx)("div", { children: label }, label)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.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),
@@ -1539,7 +2038,7 @@ var PeriodPicker = ({
                     }
                   )}`;
                   const selected = value.granularity === "day" ? sameUtcDay(date, selectedWindow.start) : date >= selectedWindow.start && date < selectedWindow.end;
-                  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     "button",
                     {
                       type: "button",
@@ -1547,7 +2046,7 @@ var PeriodPicker = ({
                       disabled: !selectable,
                       onClick: () => selectDate(date),
                       className: cn2(
-                        "polli:aspect-square polli:rounded-lg polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
+                        "polli-control polli:aspect-square polli:rounded-lg polli:text-xs polli:font-medium polli:transition-colors polli:duration-150",
                         !inCurrentMonth && "polli:text-gray-300",
                         sameUtcDay(date, today) && "polli:ring-1 polli:ring-theme-border",
                         selected ? "polli:bg-theme-bg-active polli:text-theme-text-strong" : "polli:text-gray-700 polli:hover:bg-theme-bg-subtle",
@@ -1567,58 +2066,189 @@ var PeriodPicker = ({
   );
 };
 
-// src/primitives/Surface.tsx
-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",
-  "card-themed": "polli:rounded-xl polli:bg-theme-bg-pale polli:p-4"
+// src/primitives/Prose.tsx
+var import_react_markdown2 = __toESM(require("react-markdown"), 1);
+var import_rehype_slug = __toESM(require("rehype-slug"), 1);
+var import_remark_gfm2 = __toESM(require("remark-gfm"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var components2 = {
+  h1: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h1",
+    {
+      className: "polli:mt-0 polli:mb-5 polli:break-words polli:font-heading polli:text-4xl polli:leading-none polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  h2: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h2",
+    {
+      className: "polli:mt-8 polli:mb-3 polli:break-words polli:font-subheading polli:text-2xl polli:leading-tight polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  h3: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "h3",
+    {
+      className: "polli:mt-6 polli:mb-2 polli:break-words polli:font-subheading polli:text-xl polli:leading-tight polli:text-theme-text-strong",
+      ...props
+    }
+  ),
+  p: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "polli:my-4 polli:leading-relaxed", ...props }),
+  a: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "a",
+    {
+      className: "polli-control polli:rounded-sm polli:font-semibold polli:text-theme-text-strong polli:underline polli:decoration-theme-border polli:decoration-2 polli:underline-offset-3 polli:hover:decoration-theme-text-soft",
+      ...props
+    }
+  ),
+  ul: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "ul",
+    {
+      className: "polli:my-4 polli:list-disc polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  ol: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "ol",
+    {
+      className: "polli:my-4 polli:list-decimal polli:pl-6 polli:leading-relaxed",
+      ...props
+    }
+  ),
+  blockquote: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "blockquote",
+    {
+      className: "polli:my-4 polli:border-l-4 polli:border-theme-border polli:pl-4 polli:text-theme-text-soft",
+      ...props
+    }
+  ),
+  code: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "code",
+    {
+      className: "polli:rounded polli:bg-theme-bg-active polli:px-1 polli:py-0.5 polli:font-pixel polli:text-sm",
+      ...props
+    }
+  ),
+  pre: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "pre",
+    {
+      className: "polli:my-4 polli:overflow-x-auto polli:rounded-lg polli:bg-theme-bg-active polli:p-4",
+      ...props
+    }
+  ),
+  table: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "table",
+    {
+      className: "polli:my-4 polli:w-full polli:border-collapse polli:text-sm",
+      ...props
+    }
+  ),
+  th: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "th",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2 polli:text-left polli:font-semibold",
+      ...props
+    }
+  ),
+  td: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "td",
+    {
+      className: "polli:border polli:border-theme-border polli:px-3 polli:py-2",
+      ...props
+    }
+  ),
+  hr: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("hr", { className: "polli:my-6 polli:border-theme-border", ...props })
 };
-var Surface = ({
-  theme,
-  variant = "card",
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  "div",
-  {
-    ...rest,
-    "data-theme": theme,
-    className: cn2("polli:min-w-0", variantClasses[variant], className),
-    children
-  }
-);
+function Prose({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    "div",
+    {
+      className: cn2(
+        "polli:font-body polli:text-theme-text-base polli:leading-relaxed",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        import_react_markdown2.default,
+        {
+          remarkPlugins: [import_remark_gfm2.default],
+          rehypePlugins: [import_rehype_slug.default],
+          components: components2,
+          children
+        }
+      )
+    }
+  );
+}
 
 // src/primitives/Section.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Section = ({
   title,
   theme,
   id,
   framed = false,
+  intro,
   action,
   actionClassName,
+  panelClassName,
+  titleClassName,
   children,
   className
-}) => /* @__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,
-        className: "text-left text-lg font-semibold sm:text-xl text-theme-text-strong",
-        children: title
-      }
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  "section",
+  {
+    id,
+    className: cn2(
+      "polli:flex polli:scroll-mt-10 polli:flex-col polli:gap-4",
+      className
     ),
-    action && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn2("shrink-0", actionClassName), children: action })
-  ] }),
-  framed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Surface, { variant: "panel", theme, children }) : children
-] });
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "polli:flex polli:flex-wrap polli:items-center polli:justify-between polli:gap-3 polli:px-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "h2",
+          {
+            "data-theme": theme,
+            className: cn2(
+              "polli:text-left polli:font-subheading polli:text-2xl polli:leading-tight polli:text-theme-text-strong",
+              titleClassName
+            ),
+            children: title
+          }
+        ),
+        action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn2("polli:shrink-0", actionClassName), children: action })
+      ] }),
+      framed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        Surface,
+        {
+          variant: "panel",
+          theme,
+          className: cn2(
+            "polli:flex polli:flex-col polli:gap-5",
+            panelClassName
+          ),
+          children: [
+            intro && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "polli:max-w-2xl polli:text-theme-text-base", children: intro }),
+            children
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        intro && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "div",
+          {
+            "data-theme": theme,
+            className: "polli:max-w-2xl polli:text-theme-text-base",
+            children: intro
+          }
+        ),
+        children
+      ] })
+    ]
+  }
+);
 
 // src/primitives/Slider.tsx
-var import_react8 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var toNumber = (value) => {
   if (typeof value === "number") return value;
   if (typeof value !== "string" || value.trim() === "") return void 0;
@@ -1645,7 +2275,7 @@ var getProgressPercent = ({
     (numericValue - numericMin) / (numericMax - numericMin) * 100
   );
 };
-var Slider = (0, import_react8.forwardRef)(
+var Slider = (0, import_react10.forwardRef)(
   ({ className, defaultValue, max, min, progress, style, value, ...props }, ref) => {
     const progressPercent = getProgressPercent({
       progress,
@@ -1658,7 +2288,7 @@ var Slider = (0, import_react8.forwardRef)(
       ...style,
       ...progressPercent === void 0 ? null : { "--polli-slider-progress": `${progressPercent}%` }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "input",
       {
         ref,
@@ -1676,7 +2306,7 @@ var Slider = (0, import_react8.forwardRef)(
 );
 
 // src/primitives/StatCard.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var StatCard = ({
   label,
   value,
@@ -1686,8 +2316,8 @@ var StatCard = ({
   labelClassName,
   valueClassName,
   detailClassName
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "data-theme": theme, className: cn2("polli:text-sm", className), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1697,7 +2327,7 @@ var StatCard = ({
       children: label
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1707,7 +2337,7 @@ var StatCard = ({
       children: value
     }
   ),
-  detail && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  detail && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       className: cn2(
@@ -1720,11 +2350,11 @@ var StatCard = ({
 ] });
 
 // src/primitives/Switch.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var trackClasses = {
   off: "polli:bg-gray-200",
-  on: "polli:bg-[oklch(0.88_0.12_158)]",
-  invalid: "polli:bg-[oklch(0.88_0.12_25)]"
+  on: "polli:bg-intent-success-bg-light",
+  invalid: "polli:bg-intent-danger-bg-light"
 };
 var Switch = ({
   checked,
@@ -1736,7 +2366,7 @@ var Switch = ({
 }) => {
   const effectiveStatus = status ?? (checked ? "on" : "off");
   const resolvedAriaLabel = ariaLabel ?? (checked ? "Turn off toggle" : "Turn on toggle");
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "button",
     {
       type: "button",
@@ -1746,11 +2376,11 @@ var Switch = ({
       onClick: () => onChange(!checked),
       disabled,
       className: cn2(
-        "polli:relative polli:inline-flex polli:h-7 polli:w-12 polli:shrink-0 polli:items-center polli:rounded-full polli:transition polli:disabled:cursor-not-allowed polli:disabled:opacity-60",
+        "polli-control polli:relative polli:inline-flex polli:h-7 polli:w-12 polli:shrink-0 polli:items-center polli:rounded-full polli:transition polli:disabled:cursor-not-allowed polli:disabled:opacity-60",
         trackClasses[effectiveStatus],
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "span",
         {
           className: cn2(
@@ -1764,7 +2394,7 @@ var Switch = ({
 };
 
 // src/primitives/Table.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var alignClasses = {
   left: "polli:text-left",
   center: "polli:text-center",
@@ -1776,7 +2406,7 @@ var rowIntentClasses = {
   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)(
+var Table = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "table",
   {
     ...rest,
@@ -1786,7 +2416,7 @@ var Table = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25
     )
   }
 );
-var TableHead = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var TableHead = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "thead",
   {
     ...rest,
@@ -1796,7 +2426,7 @@ var TableHead = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runti
     )
   }
 );
-var TableBody = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var TableBody = ({ className, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "tbody",
   {
     ...rest,
@@ -1807,7 +2437,7 @@ var TableRow = ({
   intent = "default",
   className,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "tr",
   {
     ...rest,
@@ -1827,9 +2457,9 @@ var TableHeaderCell = ({
   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 content = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children }),
+    active && sortDirection && /* @__PURE__ */ (0, import_jsx_runtime32.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",
@@ -1839,15 +2469,15 @@ var TableHeaderCell = ({
     className
   );
   if (!onSort) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("th", { ...rest, className: classes, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { ...rest, className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime32.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",
+        "polli-control 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"
       ),
@@ -1861,7 +2491,7 @@ var TableCell = ({
   muted = false,
   className,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
   "td",
   {
     ...rest,
@@ -1875,6 +2505,30 @@ var TableCell = ({
   }
 );
 
+// src/primitives/Textarea.tsx
+var import_react11 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = (0, import_react11.forwardRef)(
+  ({ className, error, rows = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "textarea",
+    {
+      ref,
+      rows,
+      "data-error": error ? "true" : void 0,
+      className: cn2(
+        "polli-textarea polli:w-full polli:rounded-lg polli:border polli:px-3 polli:py-2",
+        "polli:min-h-20 polli:resize-y polli:font-body polli:text-base",
+        "polli:text-gray-950",
+        "polli:transition-colors",
+        "polli:disabled:opacity-50 polli:disabled:cursor-not-allowed",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
 // src/theme.ts
 var themes = [
   "amber",
@@ -1904,21 +2558,28 @@ var themes = [
   DiscordIcon,
   DownloadIcon,
   Dropdown,
+  DropdownItem,
   ExternalLinkButton,
   ExternalLinkIcon,
   Field,
+  FileUpload,
   GenApiIcon,
   GitHubIcon,
   IconButton,
   ImageIcon,
   InfoTip,
+  InlineLink,
   Input,
+  LinkCard,
   LockIcon,
   MailIcon,
+  Markdown,
   McpIcon,
   MenuIcon,
   MultiSelect,
+  NavItem,
   PeriodPicker,
+  Prose,
   ScrollArea,
   Section,
   Slider,
@@ -1933,6 +2594,7 @@ var themes = [
   TableHeaderCell,
   TableRow,
   TerminalIcon,
+  Textarea,
   TokensIcon,
   Tooltip,
   TrendUpIcon,