@fairfox/polly 0.29.4 → 0.30.0

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

@@ -517,6 +517,257 @@ function Button(props) {
     children: content
   }, undefined, false, undefined, this);
 }
+// src/polly-ui/Surface.tsx
+import { createElement as createElement2 } from "preact";
+
+// src/polly-ui/Surface.module.css
+var Surface_module_default = {
+  surface: "surface_pQCFqA",
+  inline: "inline_pQCFqA",
+  "sides-block-start": "sides-block-start_pQCFqA",
+  "sides-block-end": "sides-block-end_pQCFqA",
+  "sides-inline-start": "sides-inline-start_pQCFqA",
+  "sides-inline-end": "sides-inline-end_pQCFqA",
+  "sides-block": "sides-block_pQCFqA",
+  "sides-inline": "sides-inline_pQCFqA"
+};
+
+// src/polly-ui/Surface.tsx
+var variantDefaults = {
+  plain: {},
+  raised: {
+    background: "raised",
+    radius: "md",
+    shadow: "md",
+    border: "default"
+  },
+  sunken: {
+    background: "sunken",
+    radius: "md",
+    border: "default"
+  },
+  bubble: {
+    radius: "md",
+    border: "default",
+    padding: "var(--polly-space-sm) var(--polly-space-md)"
+  },
+  chip: {
+    inline: true,
+    radius: "full",
+    padding: "var(--polly-space-xs) var(--polly-space-sm)",
+    border: "default"
+  },
+  callout: {
+    border: "default",
+    radius: "sm",
+    padding: "var(--polly-space-sm) var(--polly-space-md)"
+  },
+  floating: {
+    position: "fixed",
+    radius: "lg",
+    shadow: "lg",
+    border: "default",
+    background: "raised",
+    zIndex: 9999
+  },
+  "sticky-bar": {
+    position: "sticky",
+    inset: "0 0 auto 0",
+    borderSides: "block-end",
+    border: "default"
+  }
+};
+function bgValue(b) {
+  if (b === "raised")
+    return "var(--polly-surface-raised)";
+  if (b === "sunken")
+    return "var(--polly-surface-sunken)";
+  if (b === "transparent")
+    return "transparent";
+  return b;
+}
+function radiusValue(r) {
+  if (r === "none")
+    return "0";
+  return `var(--polly-radius-${r})`;
+}
+function borderColorValue(b) {
+  if (b === "none")
+    return "transparent";
+  if (b === "strong")
+    return "var(--polly-border-strong)";
+  return "var(--polly-border)";
+}
+function borderWidthValue(w) {
+  if (w === "none")
+    return "0";
+  return `var(--polly-border-width-${w})`;
+}
+function shadowValue(s) {
+  if (s === "none")
+    return "none";
+  return `var(--polly-shadow-${s})`;
+}
+function borderSidesClass(sides) {
+  if (sides === "all")
+    return;
+  if (sides === "block-start")
+    return Surface_module_default["sides-block-start"];
+  if (sides === "block-end")
+    return Surface_module_default["sides-block-end"];
+  if (sides === "inline-start")
+    return Surface_module_default["sides-inline-start"];
+  if (sides === "inline-end")
+    return Surface_module_default["sides-inline-end"];
+  if (sides === "block")
+    return Surface_module_default["sides-block"];
+  if (sides === "inline")
+    return Surface_module_default["sides-inline"];
+  return;
+}
+function Surface(props) {
+  const { variant = "plain" } = props;
+  const v = variantDefaults[variant];
+  const as = props.as ?? "div";
+  const padding = props.padding ?? v.padding;
+  const background = props.background ?? v.background;
+  const radius = props.radius ?? v.radius;
+  const border = props.border ?? v.border;
+  const borderSides = props.borderSides ?? v.borderSides ?? "all";
+  const shadow = props.shadow ?? v.shadow;
+  const inline = props.inline ?? v.inline;
+  const width = props.width ?? v.width;
+  const height = props.height ?? v.height;
+  const minHeight = props.minHeight ?? v.minHeight;
+  const maxInlineSize = props.maxInlineSize ?? v.maxInlineSize;
+  const position = props.position ?? v.position;
+  const inset = props.inset ?? v.inset;
+  const zIndex = props.zIndex ?? v.zIndex;
+  const borderWidth = props.borderWidth ?? v.borderWidth ?? (border && border !== "none" ? "default" : undefined);
+  const style = {};
+  if (padding)
+    style["--s-p"] = padding;
+  if (background)
+    style["--s-bg"] = bgValue(background);
+  if (radius)
+    style["--s-radius"] = radiusValue(radius);
+  if (border)
+    style["--s-border-color"] = borderColorValue(border);
+  if (borderWidth)
+    style["--s-border-width"] = borderWidthValue(borderWidth);
+  if (shadow)
+    style["--s-shadow"] = shadowValue(shadow);
+  if (width)
+    style["--s-w"] = width;
+  if (height)
+    style["--s-h"] = height;
+  if (minHeight)
+    style["--s-mh"] = minHeight;
+  if (maxInlineSize)
+    style["--s-mis"] = maxInlineSize;
+  if (position)
+    style["--s-position"] = position;
+  if (inset)
+    style["--s-inset"] = inset;
+  if (zIndex !== undefined)
+    style["--s-z"] = String(zIndex);
+  if (props.style) {
+    Object.assign(style, props.style);
+  }
+  const parts = [Surface_module_default["surface"]];
+  if (inline)
+    parts.push(Surface_module_default["inline"]);
+  parts.push(borderSidesClass(borderSides));
+  if (props.className)
+    parts.push(props.className);
+  const className = parts.filter(Boolean).join(" ");
+  const passthrough = {};
+  for (const key of Object.keys(props)) {
+    const isData = key.startsWith("data-");
+    const isAria = key.startsWith("aria-");
+    if (!isData && !isAria)
+      continue;
+    if (key === "data-polly-surface")
+      continue;
+    if (key === "aria-label" || key === "aria-labelledby" || key === "aria-describedby")
+      continue;
+    const value = props[key];
+    if (value === undefined)
+      continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      passthrough[key] = value;
+    }
+  }
+  return createElement2(as, {
+    id: props.id,
+    className,
+    style,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    role: props.role,
+    tabIndex: props.tabIndex,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"],
+    "aria-describedby": props["aria-describedby"],
+    "data-polly-surface": variant,
+    ...passthrough
+  }, props.children);
+}
+
+// src/polly-ui/Card.tsx
+import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+function Root(props) {
+  const { variant = "raised", radius = "md", ...rest } = props;
+  return /* @__PURE__ */ jsxDEV5(Surface, {
+    variant,
+    radius,
+    "data-polly-card": true,
+    ...rest,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function Header(props) {
+  const {
+    padding = "var(--polly-space-md) var(--polly-space-lg)",
+    border = "default",
+    borderSides = "block-end",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxDEV5(Surface, {
+    padding,
+    border,
+    borderSides,
+    "data-polly-card-header": true,
+    ...rest,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function Body(props) {
+  const { padding = "var(--polly-space-lg)", ...rest } = props;
+  return /* @__PURE__ */ jsxDEV5(Surface, {
+    padding,
+    "data-polly-card-body": true,
+    ...rest,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function Footer(props) {
+  const {
+    padding = "var(--polly-space-md) var(--polly-space-lg)",
+    border = "default",
+    borderSides = "block-start",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxDEV5(Surface, {
+    padding,
+    border,
+    borderSides,
+    "data-polly-card-footer": true,
+    ...rest,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+var Card = { Root, Header, Body, Footer };
 // src/polly-ui/Checkbox.module.css
 var Checkbox_module_default = {
   checkbox: "checkbox_EKE5sg",
@@ -526,7 +777,7 @@ var Checkbox_module_default = {
 };
 
 // src/polly-ui/Checkbox.tsx
-import { jsxDEV as jsxDEV5 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
 function isSignal(value) {
   return typeof value === "object" && value !== null && "value" in value && "peek" in value;
 }
@@ -543,12 +794,12 @@ function Checkbox(props) {
     parts.push(Checkbox_module_default["disabled"] ?? "");
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV5("label", {
+  return /* @__PURE__ */ jsxDEV6("label", {
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-checkbox": true,
     children: [
-      /* @__PURE__ */ jsxDEV5("input", {
+      /* @__PURE__ */ jsxDEV6("input", {
         id,
         type: "checkbox",
         class: Checkbox_module_default["input"],
@@ -558,7 +809,7 @@ function Checkbox(props) {
         disabled,
         onChange: handleChange
       }, undefined, false, undefined, this),
-      label !== undefined && /* @__PURE__ */ jsxDEV5("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV6("span", {
         class: Checkbox_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -573,24 +824,24 @@ var Collapsible_module_default = {
 };
 
 // src/polly-ui/Collapsible.tsx
-import { jsxDEV as jsxDEV6 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV7 } 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__ */ jsxDEV6("details", {
+  return /* @__PURE__ */ jsxDEV7("details", {
     id,
     class: parts.join(" "),
     open: defaultOpen,
     "data-polly-ui": true,
     "data-polly-collapsible": true,
     children: [
-      /* @__PURE__ */ jsxDEV6("summary", {
+      /* @__PURE__ */ jsxDEV7("summary", {
         class: Collapsible_module_default["summary"],
         children: summary
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV6("div", {
+      /* @__PURE__ */ jsxDEV7("div", {
         class: Collapsible_module_default["content"],
         children
       }, undefined, false, undefined, this)
@@ -760,7 +1011,7 @@ var OverlayRoot_module_default = {
 };
 
 // src/polly-ui/OverlayRoot.tsx
-import { jsxDEV as jsxDEV7 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
 function OverlayRoot() {
   const ref = useRef2(null);
   useEffect2(() => {
@@ -779,7 +1030,7 @@ function OverlayRoot() {
       release?.();
     };
   }, []);
-  return /* @__PURE__ */ jsxDEV7("div", {
+  return /* @__PURE__ */ jsxDEV8("div", {
     ref,
     class: OverlayRoot_module_default["root"],
     "data-polly-ui": true,
@@ -791,7 +1042,7 @@ function getOverlayRootNode() {
 }
 
 // src/polly-ui/Modal.tsx
-import { jsxDEV as jsxDEV8 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
 var Ctx = createContext(null);
 function useModal() {
   const ctx = useContext(Ctx);
@@ -799,7 +1050,7 @@ function useModal() {
     throw new Error("Modal sub-components must render inside <Modal.Root>");
   return ctx;
 }
-function Root({ when, onClose, children, "aria-label": ariaLabel }) {
+function Root2({ when, onClose, children, "aria-label": ariaLabel }) {
   const id = useId();
   const titleId = `${id}-title`;
   const descId = `${id}-desc`;
@@ -831,9 +1082,9 @@ function Root({ when, onClose, children, "aria-label": ariaLabel }) {
     onClose?.();
   };
   const ctx = { id, titleId, descId, close };
-  const content = /* @__PURE__ */ jsxDEV8(Ctx.Provider, {
+  const content = /* @__PURE__ */ jsxDEV9(Ctx.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsxDEV8("div", {
+    children: /* @__PURE__ */ jsxDEV9("div", {
       ref: mountRef,
       class: Modal_module_default["container"],
       "data-polly-ui": true,
@@ -852,22 +1103,28 @@ function Root({ when, onClose, children, "aria-label": ariaLabel }) {
 }
 function Backdrop() {
   const { close } = useModal();
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     class: Modal_module_default["backdrop"],
     "data-polly-modal-backdrop": true,
     onClick: close,
     "aria-hidden": "true"
   }, undefined, false, undefined, this);
 }
-function Content({ children }) {
-  return /* @__PURE__ */ jsxDEV8("div", {
-    class: Modal_module_default["surface"],
+function Content({ children, className, style }) {
+  const cls = className ? `${Modal_module_default["surface"]} ${className}` : Modal_module_default["surface"];
+  return /* @__PURE__ */ jsxDEV9(Surface, {
+    variant: "raised",
+    radius: "lg",
+    shadow: "lg",
+    position: "relative",
+    className: cls,
+    style,
     "data-polly-modal-surface": true,
     children
   }, undefined, false, undefined, this);
 }
-function Header({ children }) {
-  return /* @__PURE__ */ jsxDEV8("header", {
+function Header2({ children }) {
+  return /* @__PURE__ */ jsxDEV9("header", {
     class: Modal_module_default["header"],
     "data-polly-modal-header": true,
     children
@@ -875,24 +1132,24 @@ function Header({ children }) {
 }
 function Title({ children }) {
   const { titleId } = useModal();
-  return /* @__PURE__ */ jsxDEV8("h2", {
+  return /* @__PURE__ */ jsxDEV9("h2", {
     id: titleId,
     class: Modal_module_default["title"],
     "data-polly-modal-title": true,
     children
   }, undefined, false, undefined, this);
 }
-function Body({ children }) {
+function Body2({ children }) {
   const { descId } = useModal();
-  return /* @__PURE__ */ jsxDEV8("div", {
+  return /* @__PURE__ */ jsxDEV9("div", {
     id: descId,
     class: Modal_module_default["body"],
     "data-polly-modal-body": true,
     children
   }, undefined, false, undefined, this);
 }
-function Footer({ children }) {
-  return /* @__PURE__ */ jsxDEV8("footer", {
+function Footer2({ children }) {
+  return /* @__PURE__ */ jsxDEV9("footer", {
     class: Modal_module_default["footer"],
     "data-polly-modal-footer": true,
     children
@@ -901,7 +1158,7 @@ function Footer({ children }) {
 function Close({ children, action }) {
   const { close } = useModal();
   if (action) {
-    return /* @__PURE__ */ jsxDEV8("button", {
+    return /* @__PURE__ */ jsxDEV9("button", {
       type: "button",
       class: Modal_module_default["close"],
       "data-polly-ui": true,
@@ -911,7 +1168,7 @@ function Close({ children, action }) {
       children
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV8("button", {
+  return /* @__PURE__ */ jsxDEV9("button", {
     type: "button",
     class: Modal_module_default["close"],
     "data-polly-ui": true,
@@ -922,18 +1179,18 @@ function Close({ children, action }) {
   }, undefined, false, undefined, this);
 }
 var Modal = {
-  Root,
+  Root: Root2,
   Backdrop,
   Content,
-  Header,
+  Header: Header2,
   Title,
-  Body,
-  Footer,
+  Body: Body2,
+  Footer: Footer2,
   Close
 };
 
 // src/polly-ui/ConfirmDialog.tsx
-import { jsxDEV as jsxDEV9 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
 var pending = signal2(null);
 var isOpen = signal2(false);
 var nextId = 0;
@@ -964,27 +1221,27 @@ function Host() {
   const current = pending.value;
   if (!current)
     return null;
-  return /* @__PURE__ */ jsxDEV9(Modal.Root, {
+  return /* @__PURE__ */ jsxDEV10(Modal.Root, {
     when: isOpen,
     onClose: () => close(false),
     children: [
-      /* @__PURE__ */ jsxDEV9(Modal.Backdrop, {}, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV9(Modal.Content, {
+      /* @__PURE__ */ jsxDEV10(Modal.Backdrop, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10(Modal.Content, {
         children: [
-          /* @__PURE__ */ jsxDEV9(Modal.Header, {
-            children: /* @__PURE__ */ jsxDEV9(Modal.Title, {
+          /* @__PURE__ */ jsxDEV10(Modal.Header, {
+            children: /* @__PURE__ */ jsxDEV10(Modal.Title, {
               children: current.title
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          current.body ? /* @__PURE__ */ jsxDEV9(Modal.Body, {
+          current.body ? /* @__PURE__ */ jsxDEV10(Modal.Body, {
             children: current.body
           }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV9(Modal.Footer, {
-            children: /* @__PURE__ */ jsxDEV9("div", {
+          /* @__PURE__ */ jsxDEV10(Modal.Footer, {
+            children: /* @__PURE__ */ jsxDEV10("div", {
               class: ConfirmDialog_module_default["actions"],
               "data-polly-confirm-actions": true,
               children: [
-                /* @__PURE__ */ jsxDEV9("button", {
+                /* @__PURE__ */ jsxDEV10("button", {
                   type: "button",
                   class: ConfirmDialog_module_default["cancel"],
                   "data-polly-ui": true,
@@ -993,7 +1250,7 @@ function Host() {
                   onClick: () => close(false),
                   children: current.cancelLabel ?? "Cancel"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV9("button", {
+                /* @__PURE__ */ jsxDEV10("button", {
                   type: "button",
                   class: current.danger ? ConfirmDialog_module_default["confirmDanger"] : ConfirmDialog_module_default["confirm"],
                   "data-polly-ui": true,
@@ -1024,7 +1281,7 @@ var Dropdown_module_default = {
 };
 
 // src/polly-ui/Dropdown.tsx
-import { jsxDEV as jsxDEV10 } from "preact/jsx-dev-runtime";
+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;
@@ -1080,19 +1337,19 @@ function Dropdown(props) {
   const menuParts = [Dropdown_module_default["menu"] ?? ""];
   if (align === "right")
     menuParts.push(Dropdown_module_default["alignRight"] ?? "");
-  return /* @__PURE__ */ jsxDEV10("div", {
+  return /* @__PURE__ */ jsxDEV11("div", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-dropdown": true,
     children: [
-      /* @__PURE__ */ jsxDEV10("button", {
+      /* @__PURE__ */ jsxDEV11("button", {
         ref: triggerRef,
         type: "button",
         class: Dropdown_module_default["trigger"],
         children: trigger
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV10("div", {
+      /* @__PURE__ */ jsxDEV11("div", {
         ref: menuRef,
         id: popoverId,
         role: "listbox",
@@ -1102,7 +1359,7 @@ function Dropdown(props) {
         onToggle: handleToggle,
         onClick: handleMenuClick,
         onKeyDown: handleKeyDown,
-        children: /* @__PURE__ */ jsxDEV10(Layout, {
+        children: /* @__PURE__ */ jsxDEV11(Layout, {
           rows: "auto",
           gap: "0",
           children
@@ -1128,7 +1385,7 @@ var Select_module_default = {
 };
 
 // src/polly-ui/Select.tsx
-import { jsxDEV as jsxDEV11 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
 function formatSelected(options, selected) {
   if (selected.size === 0)
     return "";
@@ -1176,7 +1433,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__ */ jsxDEV11("button", {
+  const triggerButton = /* @__PURE__ */ jsxDEV12("button", {
     type: "button",
     class: triggerClass,
     disabled,
@@ -1185,34 +1442,34 @@ function Select(props) {
   const parts = [Select_module_default["select"] ?? ""];
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV11("div", {
+  return /* @__PURE__ */ jsxDEV12("div", {
     id,
     class: parts.filter(Boolean).join(" "),
     "data-polly-ui": true,
     "data-polly-select": true,
     children: [
-      label !== undefined && /* @__PURE__ */ jsxDEV11("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV12("span", {
         class: Select_module_default["label"],
         children: label
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV11(Dropdown, {
+      /* @__PURE__ */ jsxDEV12(Dropdown, {
         isOpen: isOpen2,
         trigger: triggerButton,
         multiSelect,
         children: [
-          multiSelect && /* @__PURE__ */ jsxDEV11("div", {
+          multiSelect && /* @__PURE__ */ jsxDEV12("div", {
             class: Select_module_default["actions"],
-            children: /* @__PURE__ */ jsxDEV11(Layout, {
+            children: /* @__PURE__ */ jsxDEV12(Layout, {
               columns: "1fr 1fr",
               gap: "var(--polly-space-xs)",
               children: [
-                /* @__PURE__ */ jsxDEV11("button", {
+                /* @__PURE__ */ jsxDEV12("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleSelectAll,
                   children: "Select All"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV11("button", {
+                /* @__PURE__ */ jsxDEV12("button", {
                   type: "button",
                   class: Select_module_default["actionBtn"],
                   onClick: handleClear,
@@ -1224,19 +1481,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__ */ jsxDEV11("button", {
+            return /* @__PURE__ */ jsxDEV12("button", {
               type: "button",
               class: optClass,
               onClick: () => handleOptionClick(opt.value),
               children: [
-                multiSelect && /* @__PURE__ */ jsxDEV11("input", {
+                multiSelect && /* @__PURE__ */ jsxDEV12("input", {
                   type: "checkbox",
                   class: Select_module_default["optionCheck"],
                   checked: isSelected,
                   tabIndex: -1,
                   readOnly: true
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV11("span", {
+                /* @__PURE__ */ jsxDEV12("span", {
                   children: opt.label
                 }, undefined, false, undefined, this)
               ]
@@ -1256,7 +1513,7 @@ var Skeleton_module_default = {
 };
 
 // src/polly-ui/Skeleton.tsx
-import { jsxDEV as jsxDEV12 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
 function resolveSize(value) {
   if (value === undefined)
     return;
@@ -1289,7 +1546,7 @@ function Skeleton(props) {
     parts.push(vClass);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV12("span", {
+  return /* @__PURE__ */ jsxDEV13("span", {
     class: parts.join(" "),
     style,
     "data-polly-ui": true,
@@ -1305,26 +1562,26 @@ var Tabs_module_default = {
 };
 
 // src/polly-ui/Tabs.tsx
-import { jsxDEV as jsxDEV13 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV14 } 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__ */ jsxDEV13("nav", {
+  return /* @__PURE__ */ jsxDEV14("nav", {
     id,
     class: parts.filter(Boolean).join(" "),
     "aria-label": props["aria-label"],
     "data-polly-ui": true,
     "data-polly-tabs": true,
-    children: /* @__PURE__ */ jsxDEV13(Layout, {
+    children: /* @__PURE__ */ jsxDEV14(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__ */ jsxDEV13("button", {
+        return /* @__PURE__ */ jsxDEV14("button", {
           type: "button",
           class: tabClass,
           disabled: tab.disabled,
@@ -1362,7 +1619,7 @@ var TextInput_module_default = {
 };
 
 // src/polly-ui/TextInput.tsx
-import { jsxDEV as jsxDEV14 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
 function isSignal2(v) {
   return typeof v === "object" && v !== null && "value" in v && "peek" in v;
 }
@@ -1383,7 +1640,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__ */ jsxDEV14("textarea", {
+    return /* @__PURE__ */ jsxDEV15("textarea", {
       ...a11y,
       class: className,
       "data-polly-input-variant": "multi",
@@ -1398,7 +1655,7 @@ function TextInput(props) {
       }
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsxDEV14("input", {
+  return /* @__PURE__ */ jsxDEV15("input", {
     ...a11y,
     type: "text",
     class: className,
@@ -1415,7 +1672,7 @@ function TextInput(props) {
 }
 // src/polly-ui/Toast.tsx
 import { createPortal as createPortal2 } from "preact/compat";
-import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "preact/hooks";
+import { useEffect as useEffect5, useState as useState3 } from "preact/hooks";
 
 // src/actions/error.ts
 import { signal as signal3 } from "@preact/signals";
@@ -1457,7 +1714,7 @@ var Toast_module_default = {
 };
 
 // src/polly-ui/Toast.tsx
-import { jsxDEV as jsxDEV15 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
 function Viewport(props) {
   const autoDismissMs = props.autoDismissMs ?? 5000;
   const [portalNode, setPortalNode] = useState3(null);
@@ -1479,13 +1736,13 @@ function Viewport(props) {
   }, [paused, entries, autoDismissMs]);
   if (!portalNode)
     return null;
-  const content = /* @__PURE__ */ jsxDEV15("div", {
+  const content = /* @__PURE__ */ jsxDEV16("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__ */ jsxDEV15(ToastItem, {
+    children: entries.map((entry) => /* @__PURE__ */ jsxDEV16(ToastItem, {
       entry
     }, entry.id, false, undefined, this))
   }, undefined, false, undefined, this);
@@ -1493,21 +1750,21 @@ function Viewport(props) {
 }
 function ToastItem({ entry }) {
   const liveness = entry.severity === "error" ? "assertive" : "polite";
-  const ref = useRef5(null);
-  return /* @__PURE__ */ jsxDEV15("div", {
-    ref,
-    class: Toast_module_default["item"],
+  return /* @__PURE__ */ jsxDEV16(Surface, {
+    variant: "raised",
+    padding: "var(--polly-space-md) var(--polly-space-lg)",
+    className: Toast_module_default["item"],
     "data-polly-ui": true,
     "data-polly-toast-item": true,
     "data-severity": entry.severity,
     role: entry.severity === "error" ? "alert" : "status",
     "aria-live": liveness,
     children: [
-      /* @__PURE__ */ jsxDEV15("span", {
+      /* @__PURE__ */ jsxDEV16("span", {
         class: Toast_module_default["message"],
         children: entry.message
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV15("button", {
+      /* @__PURE__ */ jsxDEV16("button", {
         type: "button",
         class: Toast_module_default["close"],
         "data-polly-ui": true,
@@ -1534,7 +1791,7 @@ var Toggle_module_default = {
 };
 
 // src/polly-ui/Toggle.tsx
-import { jsxDEV as jsxDEV16 } from "preact/jsx-dev-runtime";
+import { jsxDEV as jsxDEV17 } from "preact/jsx-dev-runtime";
 function Toggle(props) {
   const { checked = false, disabled = false, label, name, className, id } = props;
   const parts = [Toggle_module_default["toggle"]];
@@ -1542,12 +1799,12 @@ function Toggle(props) {
     parts.push(Toggle_module_default["disabled"]);
   if (className)
     parts.push(className);
-  return /* @__PURE__ */ jsxDEV16("label", {
+  return /* @__PURE__ */ jsxDEV17("label", {
     class: parts.join(" "),
     "data-polly-ui": true,
     "data-polly-toggle": true,
     children: [
-      /* @__PURE__ */ jsxDEV16("input", {
+      /* @__PURE__ */ jsxDEV17("input", {
         id,
         type: "checkbox",
         role: "switch",
@@ -1557,13 +1814,13 @@ function Toggle(props) {
         checked,
         disabled
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV16("span", {
+      /* @__PURE__ */ jsxDEV17("span", {
         class: checked ? `${Toggle_module_default["track"]} ${Toggle_module_default["trackChecked"]}` : Toggle_module_default["track"],
-        children: /* @__PURE__ */ jsxDEV16("span", {
+        children: /* @__PURE__ */ jsxDEV17("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__ */ jsxDEV16("span", {
+      label !== undefined && /* @__PURE__ */ jsxDEV17("span", {
         class: Toggle_module_default["label"],
         children: label
       }, undefined, false, undefined, this)
@@ -1577,6 +1834,7 @@ export {
   Toast,
   TextInput,
   Tabs,
+  Surface,
   Skeleton,
   Select,
   OverlayRoot,
@@ -1586,10 +1844,11 @@ export {
   ConfirmDialog,
   Collapsible,
   Checkbox,
+  Card,
   Button,
   Badge,
   ActionInput,
   ActionForm
 };
 
-//# debugId=2F1AD073C8A46D0F64756E2164756E21
+//# debugId=9CE0D265222997F864756E2164756E21