@fairfox/polly 0.71.0 → 0.73.0

package/dist/src/polly-ui/index.js

@@ -103,12 +103,47 @@ var ActionInput_module_default = {
   placeholder: "placeholder_-n6UrQ"
 };
 
+// src/polly-ui/internal/dispatch-action.ts
+function dispatchAction(action, data) {
+  const hidden = document.createElement("button");
+  hidden.setAttribute("data-action", action);
+  for (const [key, value] of Object.entries(data)) {
+    const dashKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+    hidden.setAttribute(`data-action-${dashKey}`, value);
+  }
+  hidden.style.position = "fixed";
+  hidden.style.opacity = "0";
+  hidden.style.pointerEvents = "none";
+  hidden.tabIndex = -1;
+  document.body.appendChild(hidden);
+  try {
+    hidden.click();
+  } finally {
+    hidden.remove();
+  }
+}
+
+// src/polly-ui/internal/passthrough.ts
+function collectPassthrough(props) {
+  const out = {};
+  for (const key of Object.keys(props)) {
+    if (!key.startsWith("data-") && !key.startsWith("aria-"))
+      continue;
+    const value = props[key];
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      out[key] = value;
+    }
+  }
+  return out;
+}
+
 // src/polly-ui/ActionInput.tsx
 import { jsxDEV as jsxDEV2 } from "preact/jsx-dev-runtime";
 function ActionInput(props) {
   const variant = props.variant ?? "single";
   const saveOn = props.saveOn ?? "blur";
-  const [mode, setMode] = useState("view");
+  const live = saveOn === "input";
+  const [mode, setMode] = useState(live ? "edit" : "view");
   const [draft, setDraft] = useState(props.value);
   const inputRef = useRef(null);
   useEffect(() => {
@@ -116,11 +151,11 @@ function ActionInput(props) {
       setDraft(props.value);
   }, [props.value, mode]);
   useEffect(() => {
-    if (mode === "edit" && inputRef.current) {
+    if (mode === "edit" && !live && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select?.();
     }
-  }, [mode]);
+  }, [mode, live]);
   const enterEdit = useCallback(() => {
     if (props.disabled)
       return;
@@ -128,36 +163,17 @@ function ActionInput(props) {
     setMode("edit");
   }, [props.disabled, props.value]);
   const commit = useCallback((next) => {
-    if (next === props.value) {
-      setMode("view");
-      return;
+    if (next !== props.value) {
+      dispatchAction(props.action, { ...props.actionData ?? {}, value: next });
     }
-    const dataAttrs = {
-      ...props.actionData ?? {},
-      value: next
-    };
-    const hidden = document.createElement("button");
-    hidden.setAttribute("data-action", props.action);
-    for (const [key, value] of Object.entries(dataAttrs)) {
-      const dashKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-      hidden.setAttribute(`data-action-${dashKey}`, value);
-    }
-    hidden.style.position = "fixed";
-    hidden.style.opacity = "0";
-    hidden.style.pointerEvents = "none";
-    hidden.tabIndex = -1;
-    document.body.appendChild(hidden);
-    try {
-      hidden.click();
-    } finally {
-      hidden.remove();
-    }
-    setMode("view");
-  }, [props.action, props.actionData, props.value]);
+    if (!live)
+      setMode("view");
+  }, [props.action, props.actionData, props.value, live]);
   const cancel = useCallback(() => {
     setDraft(props.value);
-    setMode("view");
-  }, [props.value]);
+    if (!live)
+      setMode("view");
+  }, [props.value, live]);
   const onKeyDown = (event) => {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -178,10 +194,12 @@ function ActionInput(props) {
     }
   };
   const className = props.className ? `${ActionInput_module_default["root"]} ${props.className}` : ActionInput_module_default["root"];
+  const passthrough = collectPassthrough(props);
   if (mode === "view") {
     const rendered = props.renderView ? props.renderView(props.value) : props.value;
     const isEmpty = props.value.length === 0;
     return /* @__PURE__ */ jsxDEV2("div", {
+      ...passthrough,
       class: `${className} ${ActionInput_module_default["view"]}`,
       "data-polly-ui": true,
       "data-polly-action-input": true,
@@ -206,6 +224,7 @@ function ActionInput(props) {
     }, undefined, false, undefined, this);
   }
   const common = {
+    ...passthrough,
     class: `${ActionInput_module_default["edit"]} ${ActionInput_module_default["root"]}`,
     "data-polly-ui": true,
     "data-polly-action-input": true,
@@ -213,11 +232,16 @@ function ActionInput(props) {
     "data-variant": variant,
     placeholder: props.placeholder,
     value: draft,
-    onInput: (e) => setDraft(e.currentTarget.value),
+    onInput: (e) => {
+      const next = e.currentTarget.value;
+      setDraft(next);
+      if (live)
+        commit(next);
+    },
     onBlur: () => {
       if (saveOn === "blur")
         commit(draft);
-      else
+      else if (!live)
         cancel();
     },
     onKeyDown,
@@ -236,62 +260,23 @@ function ActionInput(props) {
     ref: (el) => {
       inputRef.current = el;
     },
-    type: "text",
+    type: props.inputType ?? "text",
     ...common
   }, undefined, false, undefined, this);
 }
-// src/polly-ui/Badge.module.css
-var Badge_module_default = {
-  badge: "badge_cZd0Aw",
-  info: "info_cZd0Aw",
-  success: "success_cZd0Aw",
-  warning: "warning_cZd0Aw",
-  danger: "danger_cZd0Aw"
-};
+// src/polly-ui/ActionSelect.tsx
+import { useSignal } from "@preact/signals";
 
-// src/polly-ui/Badge.tsx
-import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
-function variantClass(variant) {
-  if (variant === "info")
-    return Badge_module_default["info"];
-  if (variant === "success")
-    return Badge_module_default["success"];
-  if (variant === "warning")
-    return Badge_module_default["warning"];
-  if (variant === "danger")
-    return Badge_module_default["danger"];
-  return;
-}
-function Badge(props) {
-  const { children, variant = "default", className, id } = props;
-  const parts = [Badge_module_default["badge"]];
-  const v = variantClass(variant);
-  if (v)
-    parts.push(v);
-  if (className)
-    parts.push(className);
-  return /* @__PURE__ */ jsxDEV3("span", {
-    id,
-    class: parts.join(" "),
-    "data-polly-ui": true,
-    "data-polly-badge": variant,
-    children
-  }, undefined, false, undefined, this);
-}
-// src/polly-ui/Button.module.css
-var Button_module_default = {
-  btn: "btn_c4HKfA",
-  tierPrimary: "tierPrimary_c4HKfA",
-  tierSecondary: "tierSecondary_c4HKfA",
-  tierTertiary: "tierTertiary_c4HKfA",
-  colorInfo: "colorInfo_c4HKfA",
-  colorSuccess: "colorSuccess_c4HKfA",
-  colorWarning: "colorWarning_c4HKfA",
-  colorDanger: "colorDanger_c4HKfA",
-  btnSmall: "btnSmall_c4HKfA",
-  btnLarge: "btnLarge_c4HKfA",
-  btnCircle: "btnCircle_c4HKfA",
-  btnFullWidth: "btnFullWidth_c4HKfA"
+// src/polly-ui/Dropdown.tsx
+import { useSignalEffect } from "@preact/signals";
+import { useEffect as useEffect2, useRef as useRef2 } from "preact/hooks";
+
+// src/polly-ui/Dropdown.module.css
+var Dropdown_module_default = {
+  dropdown: "dropdown_HX48zA",
+  trigger: "trigger_HX48zA",
+  menu: "menu_HX48zA",
+  alignRight: "alignRight_HX48zA"
 };
 
 // src/polly-ui/Layout.tsx
@@ -404,8 +389,239 @@ function Layout(props) {
   }, children);
 }
 
-// src/polly-ui/Button.tsx
+// src/polly-ui/Dropdown.tsx
+import { jsxDEV as jsxDEV3 } from "preact/jsx-dev-runtime";
+var dropdownCounter = 0;
+function Dropdown(props) {
+  const { isOpen, trigger, children, align = "left", multiSelect = false, className, id } = props;
+  const menuRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const idRef = useRef2(`polly-dropdown-${++dropdownCounter}`);
+  const popoverId = idRef.current;
+  useEffect2(() => {
+    triggerRef.current?.setAttribute("popovertarget", popoverId);
+  }, [popoverId]);
+  useEffect2(() => {
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const onOverlayClose = (e) => {
+      if (e instanceof CustomEvent && e.detail?.id === popoverId) {
+        isOpen.value = false;
+      }
+    };
+    menu.addEventListener("overlay:close", onOverlayClose);
+    return () => {
+      menu.removeEventListener("overlay:close", onOverlayClose);
+    };
+  }, [popoverId, isOpen]);
+  useSignalEffect(() => {
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    if (isOpen.value && !menu.matches(":popover-open")) {
+      menu.showPopover();
+    } else if (!isOpen.value && menu.matches(":popover-open")) {
+      menu.hidePopover();
+    }
+  });
+  const handleToggle = (e) => {
+    if ("newState" in e) {
+      isOpen.value = e.newState === "open";
+    }
+  };
+  const handleMenuClick = () => {
+    if (!multiSelect) {
+      isOpen.value = false;
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      isOpen.value = false;
+    }
+  };
+  const parts = [Dropdown_module_default["dropdown"] ?? ""];
+  if (className)
+    parts.push(className);
+  const menuParts = [Dropdown_module_default["menu"] ?? ""];
+  if (align === "right")
+    menuParts.push(Dropdown_module_default["alignRight"] ?? "");
+  return /* @__PURE__ */ jsxDEV3("div", {
+    id,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-dropdown": true,
+    children: [
+      /* @__PURE__ */ jsxDEV3("button", {
+        ref: triggerRef,
+        type: "button",
+        class: Dropdown_module_default["trigger"],
+        children: trigger
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        ref: menuRef,
+        id: popoverId,
+        role: "listbox",
+        class: menuParts.filter(Boolean).join(" "),
+        popover: "auto",
+        "data-overlay-id": popoverId,
+        onToggle: handleToggle,
+        onClick: handleMenuClick,
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsxDEV3(Layout, {
+          rows: "auto",
+          gap: "0",
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/polly-ui/Select.module.css
+var Select_module_default = {
+  select: "select_daofbw",
+  label: "label_daofbw",
+  trigger: "trigger_daofbw",
+  placeholder: "placeholder_daofbw",
+  actions: "actions_daofbw",
+  actionBtn: "actionBtn_daofbw",
+  option: "option_daofbw",
+  optionSelected: "optionSelected_daofbw",
+  optionCheck: "optionCheck_daofbw"
+};
+
+// src/polly-ui/ActionSelect.tsx
 import { jsxDEV as jsxDEV4 } from "preact/jsx-dev-runtime";
+function labelFor(options, value) {
+  for (const opt of options) {
+    if (opt.value === value)
+      return opt.label;
+  }
+  return;
+}
+function ActionSelect(props) {
+  const {
+    value,
+    options,
+    action,
+    actionData,
+    label,
+    placeholder = "Select…",
+    disabled = false,
+    className,
+    id
+  } = props;
+  const isOpen = useSignal(false);
+  const current = labelFor(options, value);
+  const isEmpty = current === undefined;
+  const displayText = current ?? placeholder;
+  const commit = (next) => {
+    isOpen.value = false;
+    if (next === value)
+      return;
+    dispatchAction(action, { ...actionData ?? {}, value: next });
+  };
+  const triggerClass = isEmpty ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
+  const parts = [Select_module_default["select"] ?? ""];
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    ...collectPassthrough(props),
+    id,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-action-select": true,
+    "data-state": isEmpty ? "empty" : "filled",
+    children: [
+      label !== undefined && /* @__PURE__ */ jsxDEV4("span", {
+        class: Select_module_default["label"],
+        children: label
+      }, undefined, false, undefined, this),
+      disabled ? /* @__PURE__ */ jsxDEV4("span", {
+        class: triggerClass,
+        "aria-disabled": "true",
+        children: displayText
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4(Dropdown, {
+        isOpen,
+        trigger: /* @__PURE__ */ jsxDEV4("span", {
+          class: triggerClass,
+          children: displayText
+        }, undefined, false, undefined, this),
+        children: options.map((opt) => {
+          const isSelected = opt.value === value;
+          const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
+          return /* @__PURE__ */ jsxDEV4("button", {
+            type: "button",
+            role: "option",
+            class: optClass,
+            "aria-selected": isSelected ? "true" : "false",
+            onClick: () => commit(opt.value),
+            children: /* @__PURE__ */ jsxDEV4("span", {
+              children: opt.label
+            }, undefined, false, undefined, this)
+          }, opt.value, false, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/polly-ui/Badge.module.css
+var Badge_module_default = {
+  badge: "badge_cZd0Aw",
+  info: "info_cZd0Aw",
+  success: "success_cZd0Aw",
+  warning: "warning_cZd0Aw",
+  danger: "danger_cZd0Aw"
+};
+
+// src/polly-ui/Badge.tsx
+import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+function variantClass(variant) {
+  if (variant === "info")
+    return Badge_module_default["info"];
+  if (variant === "success")
+    return Badge_module_default["success"];
+  if (variant === "warning")
+    return Badge_module_default["warning"];
+  if (variant === "danger")
+    return Badge_module_default["danger"];
+  return;
+}
+function Badge(props) {
+  const { children, variant = "default", className, id } = props;
+  const parts = [Badge_module_default["badge"]];
+  const v = variantClass(variant);
+  if (v)
+    parts.push(v);
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV5("span", {
+    id,
+    class: parts.join(" "),
+    "data-polly-ui": true,
+    "data-polly-badge": variant,
+    children
+  }, undefined, false, undefined, this);
+}
+// src/polly-ui/Button.module.css
+var Button_module_default = {
+  btn: "btn_c4HKfA",
+  tierPrimary: "tierPrimary_c4HKfA",
+  tierSecondary: "tierSecondary_c4HKfA",
+  tierTertiary: "tierTertiary_c4HKfA",
+  colorInfo: "colorInfo_c4HKfA",
+  colorSuccess: "colorSuccess_c4HKfA",
+  colorWarning: "colorWarning_c4HKfA",
+  colorDanger: "colorDanger_c4HKfA",
+  btnSmall: "btnSmall_c4HKfA",
+  btnLarge: "btnLarge_c4HKfA",
+  btnCircle: "btnCircle_c4HKfA",
+  btnFullWidth: "btnFullWidth_c4HKfA"
+};
+
+// src/polly-ui/Button.tsx
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
 function tierClass(tier) {
   if (tier === "primary")
     return Button_module_default["tierPrimary"];
@@ -462,14 +678,14 @@ function Button(props) {
   if (className)
     parts.push(className);
   const buttonClass = parts.filter(Boolean).join(" ");
-  const content = icon ? /* @__PURE__ */ jsxDEV4(Layout, {
+  const content = icon ? /* @__PURE__ */ jsxDEV6(Layout, {
     inline: true,
     columns: "auto auto",
     gap: "0.5em",
     alignItems: "center",
     children: [
       icon,
-      /* @__PURE__ */ jsxDEV4("span", {
+      /* @__PURE__ */ jsxDEV6("span", {
         children: label
       }, undefined, false, undefined, this)
     ]
@@ -486,13 +702,14 @@ function Button(props) {
     }
   }
   if ("href" in props && props.href) {
-    return /* @__PURE__ */ jsxDEV4("a", {
+    return /* @__PURE__ */ jsxDEV6("a", {
       id,
       class: buttonClass,
       title,
       href: disabled ? undefined : props.href,
       target: "target" in props ? props.target : undefined,
       rel: "rel" in props ? props.rel : undefined,
+      download: "download" in props ? props.download : undefined,
       "aria-disabled": disabled,
       "aria-label": ariaLabel,
       "data-polly-ui": true,
@@ -503,7 +720,7 @@ function Button(props) {
     }, undefined, false, undefined, this);
   }
   const resolvedType = "type" in props && props.type ? props.type : "button";
-  return /* @__PURE__ */ jsxDEV4("button", {
+  return /* @__PURE__ */ jsxDEV6("button", {
     id,
     class: buttonClass,
     title,
@@ -643,6 +860,7 @@ function Surface(props) {
   const position = props.position ?? v.position;
   const inset = props.inset ?? v.inset;
   const zIndex = props.zIndex ?? v.zIndex;
+  const { maxHeight, overflow, borderStyle, transform } = props;
   const borderWidth = props.borderWidth ?? v.borderWidth ?? (border && border !== "none" ? "default" : undefined);
   const style = {};
   if (padding)
@@ -657,18 +875,26 @@ function Surface(props) {
     style["--s-border-width"] = borderWidthValue(borderWidth);
   if (shadow)
     style["--s-shadow"] = shadowValue(shadow);
+  if (borderStyle)
+    style["--s-border-style"] = borderStyle;
   if (width)
     style["--s-w"] = width;
   if (height)
     style["--s-h"] = height;
   if (minHeight)
     style["--s-mh"] = minHeight;
+  if (maxHeight)
+    style["--s-maxh"] = maxHeight;
   if (maxInlineSize)
     style["--s-mis"] = maxInlineSize;
+  if (overflow)
+    style["--s-overflow"] = overflow;
   if (position)
     style["--s-position"] = position;
   if (inset)
     style["--s-inset"] = inset;
+  if (transform)
+    style["--s-transform"] = transform;
   if (zIndex !== undefined)
     style["--s-z"] = String(zIndex);
   if (props.style) {
@@ -715,10 +941,10 @@ function Surface(props) {
 }
 
 // src/polly-ui/Card.tsx
-import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
 function Root(props) {
   const { variant = "raised", radius = "md", ...rest } = props;
-  return /* @__PURE__ */ jsxDEV5(Surface, {
+  return /* @__PURE__ */ jsxDEV7(Surface, {
     variant,
     radius,
     "data-polly-card": true,
@@ -733,7 +959,7 @@ function Header(props) {
     borderSides = "block-end",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV5(Surface, {
+  return /* @__PURE__ */ jsxDEV7(Surface, {
     padding,
     border,
     borderSides,
@@ -744,7 +970,7 @@ function Header(props) {
 }
 function Body(props) {
   const { padding = "var(--polly-space-lg)", ...rest } = props;
-  return /* @__PURE__ */ jsxDEV5(Surface, {
+  return /* @__PURE__ */ jsxDEV7(Surface, {
     padding,
     "data-polly-card-body": true,
     ...rest,
@@ -758,7 +984,7 @@ function Footer(props) {
     borderSides = "block-start",
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxDEV5(Surface, {
+  return /* @__PURE__ */ jsxDEV7(Surface, {
     padding,
     border,
     borderSides,
@@ -777,7 +1003,7 @@ var Checkbox_module_default = {
 };
 
 // src/polly-ui/Checkbox.tsx
-import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
 function isSignal(value) {
   return typeof value === "object" && value !== null && "value" in value && "peek" in value;
 }
@@ -794,12 +1020,12 @@ function Checkbox(props) {
     parts.push(Checkbox_module_default["disabled"] ?? "");
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV6("label", {
+  return /* @__PURE__ */ jsxDEV8("label", {
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-checkbox": true,
     children: [
-      /* @__PURE__ */ jsxDEV6("input", {
+      /* @__PURE__ */ jsxDEV8("input", {
         id,
         type: "checkbox",
         class: Checkbox_module_default["input"],
@@ -809,13 +1035,88 @@ function Checkbox(props) {
         disabled,
         onChange: handleChange
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV6("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV8("span", {
         class: Checkbox_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
+// src/polly-ui/Cluster.tsx
+import { createElement as createElement3 } from "preact";
+
+// src/polly-ui/Cluster.module.css
+var Cluster_module_default = {
+  cluster: "cluster_pNLz5g",
+  inline: "inline_pNLz5g"
+};
+
+// src/polly-ui/Cluster.tsx
+function Cluster(props) {
+  const { children, as = "div", gap, padding, justify, align, inline, className, id, role } = props;
+  const style = {};
+  if (gap)
+    style["--c-gap"] = gap;
+  if (padding)
+    style["--c-p"] = padding;
+  if (justify)
+    style["--c-jc"] = justify;
+  if (align)
+    style["--c-ai"] = align;
+  const parts = [Cluster_module_default["cluster"]];
+  if (inline)
+    parts.push(Cluster_module_default["inline"]);
+  if (className)
+    parts.push(className);
+  return createElement3(as, {
+    ...collectPassthrough(props),
+    id,
+    class: parts.filter(Boolean).join(" "),
+    style,
+    role,
+    "aria-label": props["aria-label"],
+    "data-polly-ui": true,
+    "data-polly-cluster": true
+  }, children);
+}
+// src/polly-ui/Code.module.css
+var Code_module_default = {
+  code: "code_Vc8yiw",
+  block: "block_Vc8yiw"
+};
+
+// src/polly-ui/Code.tsx
+import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
+function Code(props) {
+  const { children, block, className, id } = props;
+  const passthrough = collectPassthrough(props);
+  if (block) {
+    const parts2 = [Code_module_default["block"]];
+    if (className)
+      parts2.push(className);
+    return /* @__PURE__ */ jsxDEV9("pre", {
+      ...passthrough,
+      id,
+      class: parts2.filter(Boolean).join(" "),
+      "data-polly-ui": true,
+      "data-polly-code": "block",
+      children: /* @__PURE__ */ jsxDEV9("code", {
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  const parts = [Code_module_default["code"]];
+  if (className)
+    parts.push(className);
+  return /* @__PURE__ */ jsxDEV9("code", {
+    ...passthrough,
+    id,
+    class: parts.filter(Boolean).join(" "),
+    "data-polly-ui": true,
+    "data-polly-code": "inline",
+    children
+  }, undefined, false, undefined, this);
+}
 // src/polly-ui/Collapsible.module.css
 var Collapsible_module_default = {
   collapsible: "collapsible_sEhnPw",
@@ -824,24 +1125,24 @@ var Collapsible_module_default = {
 };
 
 // src/polly-ui/Collapsible.tsx
-import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
 function Collapsible(props) {
   const { summary, children, defaultOpen = false, className, id } = props;
   const parts = [Collapsible_module_default["collapsible"]];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV7("details", {
+  return /* @__PURE__ */ jsxDEV10("details", {
     id,
     class: parts.join(" "),
     open: defaultOpen,
     "data-polly-ui": true,
     "data-polly-collapsible": true,
     children: [
-      /* @__PURE__ */ jsxDEV7("summary", {
+      /* @__PURE__ */ jsxDEV10("summary", {
         class: Collapsible_module_default["summary"],
         children: summary
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV7("div", {
+      /* @__PURE__ */ jsxDEV10("div", {
         class: Collapsible_module_default["content"],
         children
       }, undefined, false, undefined, this)
@@ -862,7 +1163,7 @@ var ConfirmDialog_module_default = {
 // src/polly-ui/Modal.tsx
 import { createContext } from "preact";
 import { createPortal } from "preact/compat";
-import { useContext, useEffect as useEffect3, useId, useRef as useRef3, useState as useState2 } from "preact/hooks";
+import { useContext, useEffect as useEffect4, useId, useRef as useRef4, useState as useState2 } from "preact/hooks";
 
 // src/actions/overlay.ts
 import { signal } from "@preact/signals";
@@ -978,7 +1279,7 @@ var Modal_module_default = {
 
 // src/polly-ui/OverlayRoot.tsx
 import { effect } from "@preact/signals";
-import { useEffect as useEffect2, useRef as useRef2 } from "preact/hooks";
+import { useEffect as useEffect3, useRef as useRef3 } from "preact/hooks";
 
 // src/polly-ui/internal/scroll-lock.ts
 var count = 0;
@@ -1011,10 +1312,10 @@ var OverlayRoot_module_default = {
 };
 
 // src/polly-ui/OverlayRoot.tsx
-import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
 function OverlayRoot() {
-  const ref = useRef2(null);
-  useEffect2(() => {
+  const ref = useRef3(null);
+  useEffect3(() => {
     let release = null;
     const dispose = effect(() => {
       if (hasOpenOverlay()) {
@@ -1030,7 +1331,7 @@ function OverlayRoot() {
       release?.();
     };
   }, []);
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV11("div", {
     ref,
     class: OverlayRoot_module_default["root"],
     "data-polly-ui": true,
@@ -1042,7 +1343,7 @@ function getOverlayRootNode() {
 }
 
 // src/polly-ui/Modal.tsx
-import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
 var Ctx = createContext(null);
 function useModal() {
   const ctx = useContext(Ctx);
@@ -1054,17 +1355,17 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
   const id = useId();
   const titleId = `${id}-title`;
   const descId = `${id}-desc`;
-  const mountRef = useRef3(null);
+  const mountRef = useRef4(null);
   const [portalNode, setPortalNode] = useState2(null);
   const isOpen = typeof when === "boolean" ? when : when.value;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen) {
       setPortalNode(null);
       return;
     }
     setPortalNode(getOverlayRootNode());
   }, [isOpen]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen || !portalNode)
       return;
     const entry = { id, onClose };
@@ -1082,9 +1383,9 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
     onClose?.();
   };
   const ctx = { id, titleId, descId, close };
-  const content = /* @__PURE__ */ jsxDEV9(Ctx.Provider, {
+  const content = /* @__PURE__ */ jsxDEV12(Ctx.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxDEV9("div", {
+    children: /* @__PURE__ */ jsxDEV12("div", {
       ref: mountRef,
       class: Modal_module_default["container"],
       "data-polly-ui": true,
@@ -1103,7 +1404,7 @@ function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
 }
 function Backdrop() {
   const { close } = useModal();
-  return /* @__PURE__ */ jsxDEV9("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     class: Modal_module_default["backdrop"],
     "data-polly-modal-backdrop": true,
     onClick: close,
@@ -1112,7 +1413,7 @@ function Backdrop() {
 }
 function Content({ children, className, style }) {
   const cls = className ? `${Modal_module_default["surface"]} ${className}` : Modal_module_default["surface"];
-  return /* @__PURE__ */ jsxDEV9(Surface, {
+  return /* @__PURE__ */ jsxDEV12(Surface, {
     variant: "raised",
     radius: "lg",
     shadow: "lg",
@@ -1124,7 +1425,7 @@ function Content({ children, className, style }) {
   }, undefined, false, undefined, this);
 }
 function Header2({ children }) {
-  return /* @__PURE__ */ jsxDEV9("header", {
+  return /* @__PURE__ */ jsxDEV12("header", {
     class: Modal_module_default["header"],
     "data-polly-modal-header": true,
     children
@@ -1132,7 +1433,7 @@ function Header2({ children }) {
 }
 function Title({ children }) {
   const { titleId } = useModal();
-  return /* @__PURE__ */ jsxDEV9("h2", {
+  return /* @__PURE__ */ jsxDEV12("h2", {
     id: titleId,
     class: Modal_module_default["title"],
     "data-polly-modal-title": true,
@@ -1141,7 +1442,7 @@ function Title({ children }) {
 }
 function Body2({ children }) {
   const { descId } = useModal();
-  return /* @__PURE__ */ jsxDEV9("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     id: descId,
     class: Modal_module_default["body"],
     "data-polly-modal-body": true,
@@ -1149,7 +1450,7 @@ function Body2({ children }) {
   }, undefined, false, undefined, this);
 }
 function Footer2({ children }) {
-  return /* @__PURE__ */ jsxDEV9("footer", {
+  return /* @__PURE__ */ jsxDEV12("footer", {
     class: Modal_module_default["footer"],
     "data-polly-modal-footer": true,
     children
@@ -1158,7 +1459,7 @@ function Footer2({ children }) {
 function Close({ children, action }) {
   const { close } = useModal();
   if (action) {
-    return /* @__PURE__ */ jsxDEV9("button", {
+    return /* @__PURE__ */ jsxDEV12("button", {
       type: "button",
       class: Modal_module_default["close"],
       "data-polly-ui": true,
@@ -1168,7 +1469,7 @@ function Close({ children, action }) {
       children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV9("button", {
+  return /* @__PURE__ */ jsxDEV12("button", {
     type: "button",
     class: Modal_module_default["close"],
     "data-polly-ui": true,
@@ -1190,7 +1491,7 @@ var Modal = {
 };
 
 // src/polly-ui/ConfirmDialog.tsx
-import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
 var pending = signal2(null);
 var isOpen = signal2(false);
 var nextId = 0;
@@ -1221,27 +1522,27 @@ function Host() {
   const current = pending.value;
   if (!current)
     return null;
-  return /* @__PURE__ */ jsxDEV10(Modal.Root, {
+  return /* @__PURE__ */ jsxDEV13(Modal.Root, {
     when: isOpen,
     onClose: () => close(false),
     children: [
-      /* @__PURE__ */ jsxDEV10(Modal.Backdrop, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10(Modal.Content, {
+      /* @__PURE__ */ jsxDEV13(Modal.Backdrop, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV13(Modal.Content, {
         children: [
-          /* @__PURE__ */ jsxDEV10(Modal.Header, {
-            children: /* @__PURE__ */ jsxDEV10(Modal.Title, {
+          /* @__PURE__ */ jsxDEV13(Modal.Header, {
+            children: /* @__PURE__ */ jsxDEV13(Modal.Title, {
               children: current.title
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          current.body ? /* @__PURE__ */ jsxDEV10(Modal.Body, {
+          current.body ? /* @__PURE__ */ jsxDEV13(Modal.Body, {
             children: current.body
           }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV10(Modal.Footer, {
-            children: /* @__PURE__ */ jsxDEV10("div", {
+          /* @__PURE__ */ jsxDEV13(Modal.Footer, {
+            children: /* @__PURE__ */ jsxDEV13("div", {
               class: ConfirmDialog_module_default["actions"],
               "data-polly-confirm-actions": true,
               children: [
-                /* @__PURE__ */ jsxDEV10("button", {
+                /* @__PURE__ */ jsxDEV13("button", {
                   type: "button",
                   class: ConfirmDialog_module_default["cancel"],
                   "data-polly-ui": true,
@@ -1250,7 +1551,7 @@ function Host() {
                   onClick: () => close(false),
                   children: current.cancelLabel ?? "Cancel"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV10("button", {
+                /* @__PURE__ */ jsxDEV13("button", {
                   type: "button",
                   class: current.danger ? ConfirmDialog_module_default["confirmDanger"] : ConfirmDialog_module_default["confirm"],
                   "data-polly-ui": true,
@@ -1268,124 +1569,9 @@ function Host() {
   }, undefined, true, undefined, this);
 }
 var ConfirmDialog = { Host, confirm };
-// src/polly-ui/Dropdown.tsx
-import { useSignalEffect } from "@preact/signals";
-import { useEffect as useEffect4, useRef as useRef4 } from "preact/hooks";
-
-// src/polly-ui/Dropdown.module.css
-var Dropdown_module_default = {
-  dropdown: "dropdown_HX48zA",
-  trigger: "trigger_HX48zA",
-  menu: "menu_HX48zA",
-  alignRight: "alignRight_HX48zA"
-};
-
-// src/polly-ui/Dropdown.tsx
-import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
-var dropdownCounter = 0;
-function Dropdown(props) {
-  const { isOpen: isOpen2, trigger, children, align = "left", multiSelect = false, className, id } = props;
-  const menuRef = useRef4(null);
-  const triggerRef = useRef4(null);
-  const idRef = useRef4(`polly-dropdown-${++dropdownCounter}`);
-  const popoverId = idRef.current;
-  useEffect4(() => {
-    triggerRef.current?.setAttribute("popovertarget", popoverId);
-  }, [popoverId]);
-  useEffect4(() => {
-    const menu = menuRef.current;
-    if (!menu)
-      return;
-    const onOverlayClose = (e) => {
-      if (e instanceof CustomEvent && e.detail?.id === popoverId) {
-        isOpen2.value = false;
-      }
-    };
-    menu.addEventListener("overlay:close", onOverlayClose);
-    return () => {
-      menu.removeEventListener("overlay:close", onOverlayClose);
-    };
-  }, [popoverId, isOpen2]);
-  useSignalEffect(() => {
-    const menu = menuRef.current;
-    if (!menu)
-      return;
-    if (isOpen2.value && !menu.matches(":popover-open")) {
-      menu.showPopover();
-    } else if (!isOpen2.value && menu.matches(":popover-open")) {
-      menu.hidePopover();
-    }
-  });
-  const handleToggle = (e) => {
-    if ("newState" in e) {
-      isOpen2.value = e.newState === "open";
-    }
-  };
-  const handleMenuClick = () => {
-    if (!multiSelect) {
-      isOpen2.value = false;
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      isOpen2.value = false;
-    }
-  };
-  const parts = [Dropdown_module_default["dropdown"] ?? ""];
-  if (className)
-    parts.push(className);
-  const menuParts = [Dropdown_module_default["menu"] ?? ""];
-  if (align === "right")
-    menuParts.push(Dropdown_module_default["alignRight"] ?? "");
-  return /* @__PURE__ */ jsxDEV11("div", {
-    id,
-    class: parts.filter(Boolean).join(" "),
-    "data-polly-ui": true,
-    "data-polly-dropdown": true,
-    children: [
-      /* @__PURE__ */ jsxDEV11("button", {
-        ref: triggerRef,
-        type: "button",
-        class: Dropdown_module_default["trigger"],
-        children: trigger
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV11("div", {
-        ref: menuRef,
-        id: popoverId,
-        role: "listbox",
-        class: menuParts.filter(Boolean).join(" "),
-        popover: "auto",
-        "data-overlay-id": popoverId,
-        onToggle: handleToggle,
-        onClick: handleMenuClick,
-        onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsxDEV11(Layout, {
-          rows: "auto",
-          gap: "0",
-          children
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-// src/polly-ui/Select.tsx
-import { useComputed, useSignal } from "@preact/signals";
-
-// src/polly-ui/Select.module.css
-var Select_module_default = {
-  select: "select_daofbw",
-  label: "label_daofbw",
-  trigger: "trigger_daofbw",
-  placeholder: "placeholder_daofbw",
-  actions: "actions_daofbw",
-  actionBtn: "actionBtn_daofbw",
-  option: "option_daofbw",
-  optionSelected: "optionSelected_daofbw",
-  optionCheck: "optionCheck_daofbw"
-};
-
 // src/polly-ui/Select.tsx
-import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
+import { useComputed, useSignal as useSignal2 } from "@preact/signals";
+import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
 function formatSelected(options, selected) {
   if (selected.size === 0)
     return "";
@@ -1407,7 +1593,7 @@ function Select(props) {
     className,
     id
   } = props;
-  const isOpen2 = useSignal(false);
+  const isOpen2 = useSignal2(false);
   const displayText = useComputed(() => {
     const text = formatSelected(options, selected.value);
     return text.length > 0 ? text : placeholder;
@@ -1433,7 +1619,7 @@ function Select(props) {
     selected.value = new Set;
   };
   const triggerClass = isEmpty.value ? `${Select_module_default["trigger"]} ${Select_module_default["placeholder"]}` : Select_module_default["trigger"];
-  const triggerButton = /* @__PURE__ */ jsxDEV12("button", {
+  const triggerButton = /* @__PURE__ */ jsxDEV14("button", {
     type: "button",
     class: triggerClass,
     disabled,
@@ -1442,34 +1628,34 @@ function Select(props) {
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV12("div", {
+  return /* @__PURE__ */ jsxDEV14("div", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-select": true,
     children: [
-      label !== undefined && /* @__PURE__ */ jsxDEV12("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV14("span", {
         class: Select_module_default["label"],
         children: label
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV12(Dropdown, {
+      /* @__PURE__ */ jsxDEV14(Dropdown, {
         isOpen: isOpen2,
         trigger: triggerButton,
         multiSelect,
         children: [
-          multiSelect && /* @__PURE__ */ jsxDEV12("div", {
+          multiSelect && /* @__PURE__ */ jsxDEV14("div", {
             class: Select_module_default["actions"],
-            children: /* @__PURE__ */ jsxDEV12(Layout, {
+            children: /* @__PURE__ */ jsxDEV14(Layout, {
               columns: "1fr 1fr",
               gap: "var(--polly-space-xs)",
               children: [
-                /* @__PURE__ */ jsxDEV12("button", {
+                /* @__PURE__ */ jsxDEV14("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleSelectAll,
                   children: "Select All"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12("button", {
+                /* @__PURE__ */ jsxDEV14("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleClear,
@@ -1481,19 +1667,19 @@ function Select(props) {
           options.map((opt) => {
             const isSelected = selected.value.has(opt.value);
             const optClass = isSelected ? `${Select_module_default["option"]} ${Select_module_default["optionSelected"]}` : Select_module_default["option"];
-            return /* @__PURE__ */ jsxDEV12("button", {
+            return /* @__PURE__ */ jsxDEV14("button", {
               type: "button",
               class: optClass,
               onClick: () => handleOptionClick(opt.value),
               children: [
-                multiSelect && /* @__PURE__ */ jsxDEV12("input", {
+                multiSelect && /* @__PURE__ */ jsxDEV14("input", {
                   type: "checkbox",
                   class: Select_module_default["optionCheck"],
                   checked: isSelected,
                   tabIndex: -1,
                   readOnly: true
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV12("span", {
+                /* @__PURE__ */ jsxDEV14("span", {
                   children: opt.label
                 }, undefined, false, undefined, this)
               ]
@@ -1513,7 +1699,7 @@ var Skeleton_module_default = {
 };
 
 // src/polly-ui/Skeleton.tsx
-import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
 function resolveSize(value) {
   if (value === undefined)
     return;
@@ -1546,7 +1732,7 @@ function Skeleton(props) {
     parts.push(vClass);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV13("span", {
+  return /* @__PURE__ */ jsxDEV15("span", {
     class: parts.join(" "),
     style,
     "data-polly-ui": true,
@@ -1562,26 +1748,26 @@ var Tabs_module_default = {
 };
 
 // src/polly-ui/Tabs.tsx
-import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
 function Tabs(props) {
   const { tabs, activeTab, action, className, id } = props;
   const parts = [Tabs_module_default["tabs"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV14("nav", {
+  return /* @__PURE__ */ jsxDEV16("nav", {
     id,
     class: parts.filter(Boolean).join(" "),
     "aria-label": props["aria-label"],
     "data-polly-ui": true,
     "data-polly-tabs": true,
-    children: /* @__PURE__ */ jsxDEV14(Layout, {
+    children: /* @__PURE__ */ jsxDEV16(Layout, {
       columns: `repeat(${tabs.length}, auto)`,
       gap: "0",
       alignItems: "end",
       children: tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         const tabClass = isActive ? `${Tabs_module_default["tab"]} ${Tabs_module_default["active"]}` : Tabs_module_default["tab"];
-        return /* @__PURE__ */ jsxDEV14("button", {
+        return /* @__PURE__ */ jsxDEV16("button", {
           type: "button",
           class: tabClass,
           disabled: tab.disabled,
@@ -1594,6 +1780,65 @@ function Tabs(props) {
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
+// src/polly-ui/Text.tsx
+import { createElement as createElement4 } from "preact";
+
+// src/polly-ui/Text.module.css
+var Text_module_default = {
+  text: "text_75HKdQ",
+  muted: "muted_75HKdQ",
+  danger: "danger_75HKdQ",
+  warning: "warning_75HKdQ",
+  success: "success_75HKdQ",
+  italic: "italic_75HKdQ",
+  tight: "tight_75HKdQ",
+  base: "base_75HKdQ",
+  loose: "loose_75HKdQ",
+  xs: "xs_75HKdQ",
+  sm: "sm_75HKdQ",
+  md: "md_75HKdQ",
+  lg: "lg_75HKdQ",
+  xl: "xl_75HKdQ",
+  normal: "normal_75HKdQ",
+  medium: "medium_75HKdQ",
+  bold: "bold_75HKdQ"
+};
+
+// src/polly-ui/Text.tsx
+function Text(props) {
+  const {
+    children,
+    as = "span",
+    tone = "default",
+    size,
+    weight,
+    italic,
+    leading,
+    className,
+    id
+  } = props;
+  const parts = [Text_module_default["text"]];
+  if (tone !== "default")
+    parts.push(Text_module_default[tone]);
+  if (size)
+    parts.push(Text_module_default[size]);
+  if (weight)
+    parts.push(Text_module_default[weight]);
+  if (italic)
+    parts.push(Text_module_default["italic"]);
+  if (leading)
+    parts.push(Text_module_default[leading]);
+  if (className)
+    parts.push(className);
+  return createElement4(as, {
+    ...collectPassthrough(props),
+    id,
+    class: parts.filter(Boolean).join(" "),
+    for: props.htmlFor,
+    "data-polly-ui": true,
+    "data-polly-text": tone
+  }, children);
+}
 // src/polly-ui/internal/input-base.ts
 function buildInputA11y(props) {
   const attrs = {
@@ -1619,7 +1864,7 @@ var TextInput_module_default = {
 };
 
 // src/polly-ui/TextInput.tsx
-import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
 function isSignal2(v) {
   return typeof v === "object" && v !== null && "value" in v && "peek" in v;
 }
@@ -1640,7 +1885,7 @@ function TextInput(props) {
   const defaultValue = controlled ? undefined : props.value ?? "";
   const className = props.className ? `${TextInput_module_default["input"]} ${props.className}` : TextInput_module_default["input"];
   if (variant === "multi") {
-    return /* @__PURE__ */ jsxDEV15("textarea", {
+    return /* @__PURE__ */ jsxDEV17("textarea", {
       ...a11y,
       class: className,
       "data-polly-input-variant": "multi",
@@ -1655,7 +1900,7 @@ function TextInput(props) {
       }
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV15("input", {
+  return /* @__PURE__ */ jsxDEV17("input", {
     ...a11y,
     type: "text",
     class: className,
@@ -1714,7 +1959,7 @@ var Toast_module_default = {
 };
 
 // src/polly-ui/Toast.tsx
-import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV18 } from "preact/jsx-dev-runtime";
 function Viewport(props) {
   const autoDismissMs = props.autoDismissMs ?? 5000;
   const [portalNode, setPortalNode] = useState3(null);
@@ -1736,13 +1981,13 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV16("div", {
+  const content = /* @__PURE__ */ jsxDEV18("div", {
     class: `${Toast_module_default["viewport"]} ${props.className ?? ""}`.trim(),
     "data-polly-ui": true,
     "data-polly-toast-viewport": true,
     onMouseEnter: () => setPaused(true),
     onMouseLeave: () => setPaused(false),
-    children: entries.map((entry) => /* @__PURE__ */ jsxDEV16(ToastItem, {
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV18(ToastItem, {
       entry
     }, entry.id, false, undefined, this))
   }, undefined, false, undefined, this);
@@ -1750,7 +1995,7 @@ function Viewport(props) {
 }
 function ToastItem({ entry }) {
   const liveness = entry.severity === "error" ? "assertive" : "polite";
-  return /* @__PURE__ */ jsxDEV16(Surface, {
+  return /* @__PURE__ */ jsxDEV18(Surface, {
     variant: "raised",
     padding: "var(--polly-space-md) var(--polly-space-lg)",
     className: Toast_module_default["item"],
@@ -1760,11 +2005,11 @@ function ToastItem({ entry }) {
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
     children: [
-      /* @__PURE__ */ jsxDEV16("span", {
+      /* @__PURE__ */ jsxDEV18("span", {
         class: Toast_module_default["message"],
         children: entry.message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV16("button", {
+      /* @__PURE__ */ jsxDEV18("button", {
         type: "button",
         class: Toast_module_default["close"],
         "data-polly-ui": true,
@@ -1791,7 +2036,7 @@ var Toggle_module_default = {
 };
 
 // src/polly-ui/Toggle.tsx
-import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV19 } from "preact/jsx-dev-runtime";
 function Toggle(props) {
   const { checked = false, disabled = false, label, name, className, id } = props;
   const parts = [Toggle_module_default["toggle"]];
@@ -1799,12 +2044,12 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV17("label", {
+  return /* @__PURE__ */ jsxDEV19("label", {
     class: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
-      /* @__PURE__ */ jsxDEV17("input", {
+      /* @__PURE__ */ jsxDEV19("input", {
         id,
         type: "checkbox",
         role: "switch",
@@ -1814,13 +2059,13 @@ function Toggle(props) {
         checked,
         disabled
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV17("span", {
+      /* @__PURE__ */ jsxDEV19("span", {
         class: checked ? `${Toggle_module_default["track"]} ${Toggle_module_default["trackChecked"]}` : Toggle_module_default["track"],
-        children: /* @__PURE__ */ jsxDEV17("span", {
+        children: /* @__PURE__ */ jsxDEV19("span", {
           class: checked ? `${Toggle_module_default["thumb"]} ${Toggle_module_default["thumbChecked"]}` : Toggle_module_default["thumb"]
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV17("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV19("span", {
         class: Toggle_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -1833,6 +2078,7 @@ export {
   Toggle,
   Toast,
   TextInput,
+  Text,
   Tabs,
   Surface,
   Skeleton,
@@ -1843,12 +2089,15 @@ export {
   Dropdown,
   ConfirmDialog,
   Collapsible,
+  Code,
+  Cluster,
   Checkbox,
   Card,
   Button,
   Badge,
+  ActionSelect,
   ActionInput,
   ActionForm
 };
 
-//# debugId=9CE0D265222997F864756E2164756E21
+//# debugId=7DA35338ECD4891D64756E2164756E21