@openwarelabs/ui 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -96,6 +96,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   Tag: () => Tag,
   TagGroup: () => TagGroup,
+  Text: () => Text,
   Textarea: () => Textarea,
   Toaster: () => Toaster,
   ToggleButton: () => ToggleButton,
@@ -132,9 +133,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button/Button.tsx
-var import_react = require("react");
-
 // src/utils/cx.ts
 function cx(...values) {
   const classes = [];
@@ -149,6 +147,52 @@ function cx(...values) {
   return classes.join(" ");
 }
 
+// src/components/Text/Text.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var elements = {
+  hero: "h1",
+  "page-title": "h1",
+  "section-title": "h2",
+  heading: "h3",
+  lead: "p",
+  prose: "p",
+  "dialog-title": "h2",
+  "card-title": "h3",
+  body: "p",
+  copy: "p",
+  label: "span",
+  button: "span",
+  caption: "span",
+  badge: "span",
+  overline: "span",
+  code: "code",
+  kbd: "kbd"
+};
+var mutedByDefault = ["lead", "copy", "caption", "overline"];
+function Text({ variant = "body", as, tone, align, truncate = false, className, children, ...props }) {
+  const Element = as ?? elements[variant];
+  const colour = tone ?? (mutedByDefault.includes(variant) ? "muted" : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Element,
+    {
+      className: cx(
+        "ow-text",
+        `ow-type-${variant}`,
+        `ow-text--${variant}`,
+        colour && `ow-text--${colour}`,
+        align && align !== "start" && `ow-text--${align}`,
+        truncate && "ow-text--truncate",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/Button/Button.tsx
+var import_react = require("react");
+
 // src/utils/text.ts
 function getInitials(name) {
   const words = name.trim().split(/\s+/).filter(Boolean);
@@ -161,9 +205,9 @@ function toAriaShortcut(shortcut) {
 }
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Spinner({ size = "md", tone = "primary", label = "Loading", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       className: cx("ow-spinner", `ow-spinner--${size}`, `ow-spinner--${tone}`, className),
@@ -173,7 +217,7 @@ function Spinner({ size = "md", tone = "primary", label = "Loading", className }
 }
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function buttonClassName({
   variant = "secondary",
   size = "md",
@@ -204,8 +248,8 @@ var Button = (0, import_react.forwardRef)(function Button2({
   variant = "secondary",
   ...buttonProps
 }, ref) {
-  const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm", tone: "current", label: "" }) : startIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const leading = loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm", tone: "current", label: "" }) : startIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "button",
     {
       ref,
@@ -222,10 +266,10 @@ var Button = (0, import_react.forwardRef)(function Button2({
       "aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
       ...buttonProps,
       children: [
-        leading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ow-button__icon", children: leading }) : null,
+        leading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ow-button__icon", children: leading }) : null,
         iconOnly && loading ? null : children,
-        endIcon && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ow-button__icon", children: endIcon }) : null,
-        shortcut && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { "aria-hidden": "true", className: "ow-button__shortcut", children: shortcut }) : null
+        endIcon && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ow-button__icon", children: endIcon }) : null,
+        shortcut && !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("kbd", { "aria-hidden": "true", className: "ow-button__shortcut", children: shortcut }) : null
       ]
     }
   );
@@ -257,10 +301,10 @@ function useControllableState(value, defaultValue, onChange) {
 }
 
 // src/icons.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function icon(paths) {
   return function Icon({ size = 16, strokeWidth = 2, ...props }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -280,160 +324,160 @@ function icon(paths) {
     );
   };
 }
-var CheckIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" }));
-var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }));
+var CheckIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }));
+var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }));
 var SearchIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21 21-4.3-4.3" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21 21-4.3-4.3" })
   ] })
 );
 var CornerDownLeftIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 10 4 15 9 20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "9 10 4 15 9 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 4v7a4 4 0 0 1-4 4H4" })
   ] })
 );
 var XIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
   ] })
 );
 var UserIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "7", r: "4" })
   ] })
 );
 var TrashIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 6h18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
   ] })
 );
 var CircleCheckIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 12 2 2 4-4" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 12 2 2 4-4" })
   ] })
 );
 var CircleAlertIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
   ] })
 );
-var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }));
-var ChevronLeftIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" }));
-var ChevronUpIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m18 15-6-6-6 6" }));
-var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }));
+var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 18 6-6-6-6" }));
+var ChevronLeftIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m15 18-6-6 6-6" }));
+var ChevronUpIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m18 15-6-6-6 6" }));
+var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }));
 var PlusIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5v14" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14" })
   ] })
 );
 var InfoIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8h.01" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 8h.01" })
   ] })
 );
 var TriangleAlertIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 17h.01" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 17h.01" })
   ] })
 );
 var PipetteIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 21v-3l9-9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m2 22 1-1h3l9-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 21v-3l9-9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
   ] })
 );
 var CopyIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
   ] })
 );
 var CalendarIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 2v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M16 2v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 10h18" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 2v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 2v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 10h18" })
   ] })
 );
 var FileIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
   ] })
 );
 var FolderIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" })
 );
 var FolderOpenIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" })
 );
 var UploadIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "17 8 12 3 7 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
   ] })
 );
 var ArrowUpRightIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 7h10v10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M7 17 17 7" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 7h10v10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M7 17 17 7" })
   ] })
 );
 var ArrowUpIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m5 12 7-7 7 7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 19V5" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m5 12 7-7 7 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 19V5" })
   ] })
 );
 var ArrowDownIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 5v14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m19 12-7 7-7-7" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 5v14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m19 12-7 7-7-7" })
   ] })
 );
 var ChevronsUpDownIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 9 5-5 5 5" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 9 5-5 5 5" })
   ] })
 );
 var InboxIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "22 12 16 12 14 15 10 15 8 12 2 12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
   ] })
 );
 var EllipsisIcon = icon(
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "12", r: "1" })
   ] })
 );
 
 // src/components/Button/ButtonGroup.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ButtonGroup({ attached = true, orientation = "horizontal", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       role: "group",
@@ -448,7 +492,7 @@ function ButtonGroup({ attached = true, orientation = "horizontal", className, .
   );
 }
 var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       ref,
@@ -456,13 +500,13 @@ var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size = "
       "aria-label": label,
       className: cx("ow-close-button", `ow-close-button--${size}`, className),
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { size: size === "sm" ? 14 : 17 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { size: size === "sm" ? 14 : 17 })
     }
   );
 });
 var ToggleButton = (0, import_react3.forwardRef)(function ToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, className, variant = "secondary", ...buttonProps }, ref) {
   const [isPressed, setPressed] = useControllableState(pressed, defaultPressed, onPressedChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Button,
     {
       ref,
@@ -520,7 +564,7 @@ function useIndicator(containerRef, selector, key) {
 }
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function SegmentedControl({
   options,
   value,
@@ -551,7 +595,7 @@ function SegmentedControl({
     setCurrent(options[target].value);
   }
   const focusable = options.some((option) => option.value === current && !option.disabled) ? current : enabled[0]?.option.value;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ref: groupRef,
@@ -561,7 +605,7 @@ function SegmentedControl({
       children: [
         options.map((option, index) => {
           const isSelected = option.value === current;
-          return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
               ref: (element) => {
@@ -577,14 +621,14 @@ function SegmentedControl({
               onClick: () => setCurrent(option.value),
               onKeyDown: (event) => onKeyDown(event, index),
               children: [
-                option.icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ow-segmented__icon", children: option.icon }) : null,
+                option.icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-segmented__icon", children: option.icon }) : null,
                 option.label
               ]
             },
             option.value
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
       ]
     }
   );
@@ -592,9 +636,9 @@ function SegmentedControl({
 
 // src/components/ChoiceCard/ChoiceCard.tsx
 var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ChoiceCard = (0, import_react6.forwardRef)(function ChoiceCard2({ className, description, icon: icon2, recommended = false, shortcut, title, type = "button", ...buttonProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       ref,
@@ -603,13 +647,13 @@ var ChoiceCard = (0, import_react6.forwardRef)(function ChoiceCard2({ className,
       "aria-keyshortcuts": shortcut ? toAriaShortcut(shortcut) : void 0,
       ...buttonProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ow-choice__top", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__icon", children: icon2 }),
-          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("kbd", { "aria-hidden": "true", className: "ow-choice__shortcut", children: shortcut }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-choice__top", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__icon", children: icon2 }),
+          shortcut ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("kbd", { "aria-hidden": "true", className: "ow-choice__shortcut", children: shortcut }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ow-choice__text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ow-choice__description", children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-choice__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-choice__description", children: description })
         ] })
       ]
     }
@@ -644,12 +688,12 @@ async function copyText(text) {
 }
 
 // src/components/CodeBlock/CodeBlock.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly = false, tone = "default", onCopy, className }) {
   const [copied, setCopied] = (0, import_react7.useState)(false);
   const timer = (0, import_react7.useRef)(0);
   (0, import_react7.useEffect)(() => () => window.clearTimeout(timer.current), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "button",
     {
       type: "button",
@@ -670,12 +714,12 @@ function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly =
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ow-copy-button__icon", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyIcon, { size: 14 }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, { size: 14 })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "ow-copy-button__icon", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyIcon, { size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, { size: 14 })
         ] }),
-        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: copied ? copiedLabel : label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+        iconOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: copied ? copiedLabel : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
       ]
     }
   );
@@ -683,31 +727,31 @@ function CopyButton({ value, label = "Copy", copiedLabel = "Copied", iconOnly =
 function CodeBlock({ code, html, title, language, showLineNumbers = false, copyable = true, maxHeight, className }) {
   const hasHeader = title !== void 0 || language !== void 0;
   const lines = code.replace(/\n$/, "").split("\n");
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("ow-code-block", showLineNumbers && "ow-code-block--numbered", className), children: [
-    hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ow-code-block__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__title", children: title }),
-      language ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__language", children: language }) : null,
-      copyable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code" }) : null
-    ] }) : copyable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code", className: "ow-code-block__floating-copy" }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("pre", { className: "ow-code-block__pre", style: maxHeight ? { maxHeight } : void 0, tabIndex: 0, children: [
-      showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-code-block__numbers", "aria-hidden": "true", children: lines.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: index + 1 }, index)) }) : null,
-      html ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ow-code-block__code", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "ow-code-block__code", children: code.replace(/\n$/, "") })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-code-block", showLineNumbers && "ow-code-block--numbered", className), children: [
+    hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ow-code-block__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__title", children: title }),
+      language ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__language", children: language }) : null,
+      copyable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code" }) : null
+    ] }) : copyable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value: code, tone: "onDark", iconOnly: true, label: "Copy code", className: "ow-code-block__floating-copy" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("pre", { className: "ow-code-block__pre", style: maxHeight ? { maxHeight } : void 0, tabIndex: 0, children: [
+      showLineNumbers ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-code-block__numbers", "aria-hidden": "true", children: lines.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: index + 1 }, index)) }) : null,
+      html ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "ow-code-block__code", dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "ow-code-block__code", children: code.replace(/\n$/, "") })
     ] })
   ] });
 }
 function Snippet({ value, prompt = "$", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("ow-snippet", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("code", { className: "ow-snippet__code", children: [
-      prompt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ow-snippet__prompt", "aria-hidden": "true", children: prompt }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-snippet", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("code", { className: "ow-snippet__code", children: [
+      prompt ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ow-snippet__prompt", "aria-hidden": "true", children: prompt }) : null,
       value
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyButton, { value, iconOnly: true, label: `Copy ${value}` })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CopyButton, { value, iconOnly: true, label: `Copy ${value}` })
   ] });
 }
 
 // src/components/Field/Field.tsx
 var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Field({ label, children, hint, error, className }) {
   const generatedId = (0, import_react8.useId)();
   const hintId = `${generatedId}-hint`;
@@ -716,21 +760,21 @@ function Field({ label, children, hint, error, className }) {
   const controlId = child?.props.id ?? `${generatedId}-control`;
   const describedBy = [child?.props["aria-describedby"], hint ? hintId : void 0, error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
   const invalidProp = child && typeof child.type !== "string" ? { isInvalid: child.props.isInvalid ?? Boolean(error) } : { "aria-invalid": error ? true : void 0 };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx("ow-field", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("ow-field", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ow-field__label", htmlFor: controlId, children: label }),
     child ? (0, import_react8.cloneElement)(child, { id: controlId, "aria-describedby": describedBy, ...invalidProp }) : children,
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: hintId, className: "ow-field__hint", children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { id: errorId, role: "alert", className: "ow-field__error", children: error }) : null
   ] });
 }
 
 // src/components/Input/Input.tsx
 var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid = false, size = "md", startContent, endContent, ...inputProps }, ref) {
   const invalid = isInvalid || void 0;
   if (startContent === void 0 && endContent === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
         ref,
@@ -740,7 +784,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: cx(
@@ -751,9 +795,9 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
         className
       ),
       children: [
-        startContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ow-input-group__addon", children: startContent }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
-        endContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ow-input-group__addon", children: endContent }) : null
+        startContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: startContent }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { ref, className: "ow-input-group__input", "aria-invalid": invalid, ...inputProps }),
+        endContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-input-group__addon", children: endContent }) : null
       ]
     }
   );
@@ -761,7 +805,7 @@ var Input = (0, import_react9.forwardRef)(function Input2({ className, isInvalid
 
 // src/components/SearchField/SearchField.tsx
 var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -791,7 +835,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
       onSubmit?.(text);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Input,
     {
       ref: (element) => {
@@ -805,8 +849,8 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
       value: text,
       onChange: (event) => setText(event.target.value),
       onKeyDown: handleKeyDown,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchIcon, { size: size === "sm" ? 14 : 16 }),
-      endContent: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchIcon, { size: size === "sm" ? 14 : 16 }),
+      endContent: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { size: "sm", label: "Searching" }) : text ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         CloseButton,
         {
           size: "sm",
@@ -824,7 +868,7 @@ var SearchField = (0, import_react10.forwardRef)(function SearchField2({
 
 // src/components/NumberField/NumberField.tsx
 var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var decimals = (step) => (String(step).split(".")[1] ?? "").length;
 var NumberField = (0, import_react11.forwardRef)(function NumberField2({
   value,
@@ -888,7 +932,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
   }
   const atMin = min !== void 0 && number !== null && number <= min;
   const atMax = max !== void 0 && number !== null && number >= max;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       className: cx(
@@ -899,7 +943,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
@@ -908,10 +952,10 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
             tabIndex: -1,
             disabled: disabled || atMin,
             onClick: () => stepBy(-1),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MinusIcon, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MinusIcon, { size: 14 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "input",
           {
             ref,
@@ -940,7 +984,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
             ...inputProps
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
@@ -949,7 +993,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
             tabIndex: -1,
             disabled: disabled || atMax,
             onClick: () => stepBy(1),
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusIcon, { size: 14 })
           }
         )
       ]
@@ -959,7 +1003,7 @@ var NumberField = (0, import_react11.forwardRef)(function NumberField2({
 
 // src/components/InputOTP/InputOTP.tsx
 var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function InputOTP({
   length = 6,
   value,
@@ -1021,10 +1065,10 @@ function InputOTP({
     const pasted = clean(event.clipboardData.getData("text"));
     if (pasted) update(chars.slice(0, index).join("") + pasted, index + pasted.length);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
-    chars.map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "ow-otp__slot", children: [
-      groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { role: "group", "aria-label": ariaLabel, className: cx("ow-otp", isInvalid && "ow-otp--invalid", className), children: [
+    chars.map((char, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "ow-otp__slot", children: [
+      groupSize && index > 0 && index % groupSize === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-otp__separator", "aria-hidden": "true" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "input",
         {
           ref: (element) => {
@@ -1052,7 +1096,7 @@ function InputOTP({
         }
       )
     ] }, index)),
-    name ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "hidden", name, value: code }) : null
+    name ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "hidden", name, value: code }) : null
   ] });
 }
 
@@ -1087,7 +1131,7 @@ function resizeTextArea(textArea) {
 }
 
 // src/components/Textarea/Textarea.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var defaultAutoGrowMaxHeight = 180;
 function assignRef2(ref, element) {
   if (typeof ref === "function") ref(element);
@@ -1121,7 +1165,7 @@ var Textarea = (0, import_react13.forwardRef)(function Textarea2({
     ...style,
     maxHeight: typeof autoGrowMaxHeight === "number" ? `${autoGrowMaxHeight}px` : autoGrowMaxHeight
   } : style;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "textarea",
     {
       ...textareaProps,
@@ -1172,6 +1216,25 @@ function useFloating({
     const rect = anchor.getBoundingClientRect();
     const width = Math.max(floating.offsetWidth, matchWidth ? rect.width : 0);
     const height = floating.scrollHeight;
+    if (placement === "left" || placement === "right") {
+      const roomLeft = rect.left - offset - margin;
+      const roomRight = window.innerWidth - rect.right - offset - margin;
+      const onLeft = placement === "left" ? width <= roomLeft || roomLeft > roomRight : width > roomRight && roomLeft > roomRight;
+      const top2 = Math.min(Math.max(margin, rect.top + rect.height / 2 - height / 2), window.innerHeight - height - margin);
+      floating.dataset.side = onLeft ? "left" : "right";
+      setStyle({
+        position: "fixed",
+        inset: "auto",
+        margin: 0,
+        left: onLeft ? "auto" : rect.right + offset,
+        right: onLeft ? window.innerWidth - rect.left + offset : "auto",
+        top: top2,
+        bottom: "auto",
+        maxHeight: Math.max(120, Math.min(maxHeight, window.innerHeight - 2 * margin)),
+        ["--ow-floating-origin"]: `${onLeft ? "right" : "left"} center`
+      });
+      return;
+    }
     const below = window.innerHeight - rect.bottom - offset - margin;
     const above = rect.top - offset - margin;
     const wantsTop = placement.startsWith("top");
@@ -1267,7 +1330,7 @@ function usePresence(open, exitMs = exitDuration) {
 }
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var menuGap = 4;
 var menuMaxHeight = 288;
 var typeaheadResetMs = 600;
@@ -1438,7 +1501,7 @@ function Select({
     const index = flatIndex;
     const isSelected = index === selectedIndex;
     const isActive = index === activeIndex;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         id: optionId(index),
@@ -1456,18 +1519,18 @@ function Select({
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => choose(index),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckIcon, { size: 14 }) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ow-option__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
-            option.description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-option__description", children: option.description }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 14 }) : null }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ow-option__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-option__label", valueClassName), children: option.label }),
+            option.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__description", children: option.description }) : null
           ] })
         ]
       },
       `${option.value}-${index}`
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1491,12 +1554,12 @@ function Select({
           if (!menuRef.current?.contains(event.relatedTarget)) close();
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cx("ow-select__value", !selected && "ow-select__value--placeholder", valueClassName), children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref: menuRef,
@@ -1511,12 +1574,12 @@ function Select({
         style: floatingStyle,
         children: [
           options.map(
-            (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
+            (item, groupIndex) => isGroup(item) ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { role: "group", "aria-label": item.label, className: "ow-listbox__group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__group-label", "aria-hidden": "true", children: item.label }),
               item.options.map(renderOption)
             ] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
           ),
-          flat.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "ow-listbox__empty", children: "No options" }) : null
+          flat.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__empty", children: "No options" }) : null
         ]
       }
     ) : null
@@ -1525,7 +1588,7 @@ function Select({
 
 // src/components/Combobox/Combobox.tsx
 var import_react17 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function assignRef3(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -1638,8 +1701,8 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
         break;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         ref: fieldRef,
@@ -1652,7 +1715,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "input",
             {
               ref: (element) => {
@@ -1683,7 +1746,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
               ...aria
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -1699,13 +1762,13 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
                   inputRef.current?.focus();
                 }
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: cx("ow-select__chevron", isOpen && "ow-combobox__chevron--open") })
             }
           )
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         ref: listRef,
@@ -1720,7 +1783,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
         children: [
           results.map((option, index) => {
             const isSelected = option.value === selected;
-            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "div",
               {
                 id: optionId(index),
@@ -1736,17 +1799,17 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
                 onMouseDown: (event) => event.preventDefault(),
                 onClick: () => choose(option),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 14 }) : null }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ow-option__text", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__label", children: option.label }),
-                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-option__description", children: option.description }) : null
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__check", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { size: 14 }) : null }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ow-option__text", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__label", children: option.label }),
+                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "ow-option__description", children: option.description }) : null
                   ] })
                 ]
               },
               option.value
             );
           }),
-          results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
+          results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
         ]
       }
     ) : null
@@ -1755,7 +1818,7 @@ var Combobox = (0, import_react17.forwardRef)(function Combobox2({
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react18 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react18.createContext)(null);
 function assignRef4(ref, value) {
   if (typeof ref === "function") ref(value);
@@ -1783,7 +1846,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
   (0, import_react18.useEffect)(() => {
     if (innerRef.current) innerRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  const box = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  const box = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "span",
     {
       className: cx(
@@ -1793,7 +1856,7 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
         children === void 0 && className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "input",
           {
             ref: (element) => {
@@ -1814,16 +1877,16 @@ var Checkbox = (0, import_react18.forwardRef)(function Checkbox2({
             ...inputProps
           }
         ),
-        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MinusIcon, { className: "ow-checkbox__check ow-checkbox__check--dash", size: size === "sm" ? 10 : 12, strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { className: "ow-checkbox__check", size: size === "sm" ? 10 : 12, strokeWidth: 3 })
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinusIcon, { className: "ow-checkbox__check ow-checkbox__check--dash", size: size === "sm" ? 10 : 12, strokeWidth: 3 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon, { className: "ow-checkbox__check", size: size === "sm" ? 10 : 12, strokeWidth: 3 })
       ]
     }
   );
   if (children === void 0) return box;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx("ow-check-label", (disabled || inGroup && group.disabled) && "ow-check-label--disabled", className), children: [
     box,
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ow-check-label__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-check-label__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
     ] })
   ] });
 });
@@ -1843,7 +1906,7 @@ function CheckboxGroup({
   const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
   const generatedName = (0, import_react18.useId)();
   const errorId = (0, import_react18.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     CheckboxGroupContext.Provider,
     {
       value: {
@@ -1854,7 +1917,7 @@ function CheckboxGroup({
           setCurrent(checked ? [...current.filter((v) => v !== item), item] : current.filter((v) => v !== item));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Fieldset,
         {
           legend: label,
@@ -1872,17 +1935,17 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
   const generatedId = (0, import_react18.useId)();
   const descriptionId = `${generatedId}-description`;
   const resolvedErrorId = errorId ?? `${generatedId}-error`;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "fieldset",
     {
       className: cx("ow-fieldset", className),
       disabled,
       "aria-describedby": [description ? descriptionId : "", error ? resolvedErrorId : ""].filter(Boolean).join(" ") || void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("legend", { className: "ow-fieldset__legend", children: legend }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-fieldset__content", children }),
-        error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("legend", { className: "ow-fieldset__legend", children: legend }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: descriptionId, className: "ow-fieldset__description", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-fieldset__content", children }),
+        error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { id: resolvedErrorId, role: "alert", className: "ow-field__error", children: error }) : null
       ]
     }
   );
@@ -1890,7 +1953,7 @@ function Fieldset({ legend, description, error, errorId, disabled, children, cla
 
 // src/components/RadioGroup/RadioGroup.tsx
 var import_react19 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react19.createContext)(null);
 function RadioGroup({
   label,
@@ -1908,7 +1971,7 @@ function RadioGroup({
 }) {
   const [current, select] = useControllableState(value, defaultValue, onChange);
   const generatedName = (0, import_react19.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Fieldset,
     {
       legend: label,
@@ -1929,8 +1992,8 @@ function Radio({ value, children, description, disabled, className, ...inputProp
   const descriptionId = (0, import_react19.useId)();
   if (!group) throw new Error("Radio must be inside <RadioGroup>.");
   const isDisabled = disabled || group.disabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ow-radio", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: cx("ow-check-label", "ow-radio-label", isDisabled && "ow-check-label--disabled", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ow-radio", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "input",
       {
         type: "radio",
@@ -1944,18 +2007,18 @@ function Radio({ value, children, description, disabled, className, ...inputProp
         ...inputProps
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-check-label__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "ow-check-label__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: descriptionId, className: "ow-check-label__description", children: description }) : null
     ] })
   ] });
 }
 
 // src/components/Switch/Switch.tsx
 var import_react20 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "button",
     {
       ref,
@@ -1967,14 +2030,14 @@ var Switch = (0, import_react20.forwardRef)(function Switch2({ checked, onChange
       className: cx("ow-switch", checked && "ow-switch--on", className),
       onClick: () => onChange(!checked),
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "ow-switch__knob" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-switch__knob" })
     }
   );
 });
 
 // src/components/Slider/Slider.tsx
 var import_react21 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Slider({
   value,
   defaultValue,
@@ -2000,7 +2063,7 @@ function Slider({
   const end = () => onChangeEnd?.(current);
   const input = (which) => {
     const own = which === "low" ? low : high;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "input",
       {
         type: "range",
@@ -2025,13 +2088,13 @@ function Slider({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
-    label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-slider__header", children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
-      showValue ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("ow-slider", disabled && "ow-slider--disabled", className), children: [
+    label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__header", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: labelId, className: "ow-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", {}),
+      showValue ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("output", { className: "ow-slider__value", "aria-hidden": "true", children: display }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-slider__control", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-slider__fill" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-slider__control", style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-slider__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-slider__fill" }) }),
       isRange ? input("low") : null,
       input("high")
     ] })
@@ -2040,7 +2103,7 @@ function Slider({
 
 // src/components/FileDropZone/FileDropZone.tsx
 var import_react22 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function matches(file, accept) {
   if (!accept) return true;
   return accept.split(",").some((rule) => {
@@ -2084,7 +2147,7 @@ function FileDropZone({
     }
   }
   const hasFiles = (event) => event.dataTransfer.types.includes("Files");
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "label",
     {
       className: cx(
@@ -2117,7 +2180,7 @@ function FileDropZone({
         take(event.dataTransfer.files);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             ref: inputRef,
@@ -2134,9 +2197,9 @@ function FileDropZone({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadIcon, { size: 20 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__icon", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UploadIcon, { size: 20 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "ow-dropzone__label", children: isDragging ? "Drop to add" : label }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: hintId, className: "ow-dropzone__hint", "aria-live": "polite", children: error ?? problem ?? hint })
       ]
     }
   );
@@ -2181,7 +2244,7 @@ function formatDate(iso, locale, options) {
 }
 
 // src/components/Calendar/Calendar.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
   const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
   const today = todayISO();
@@ -2244,9 +2307,9 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
   const nextMonth = addMonths(first, 1);
   const canGoBack = !min || toISO(year, month, 0) >= min;
   const canGoForward = !max || nextMonth <= max;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cx("ow-calendar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ow-calendar__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("ow-calendar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -2254,10 +2317,10 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
           "aria-label": `Previous month, ${formatDate(prevMonth, locale, { month: "long", year: "numeric" })}`,
           disabled: !canGoBack,
           onClick: () => setFocused(clampDate(addMonths(focused, -1), min, max)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronLeftIcon, { size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronLeftIcon, { size: 16 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "ow-calendar__title", "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "span",
         {
           className: cx("ow-calendar__title-text", slide.current.direction && `ow-calendar__slide--${slide.current.direction}`),
@@ -2265,7 +2328,7 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
         },
         monthIndex
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -2273,17 +2336,17 @@ var Calendar = (0, import_react23.forwardRef)(function Calendar2({ value, defaul
           "aria-label": `Next month, ${formatDate(nextMonth, locale, { month: "long", year: "numeric" })}`,
           disabled: !canGoForward,
           onClick: () => setFocused(clampDate(addMonths(focused, 1), min, max)),
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, { size: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronRightIcon, { size: 16 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", { scope: "col", abbr: name.long, className: "ow-calendar__weekday", children: name.short.slice(0, 2) }, name.long)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tbody", { className: cx(slide.current.direction && `ow-calendar__slide--${slide.current.direction}`), children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("tr", { children: week.map((date) => {
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { ref: gridRef, role: "grid", className: "ow-calendar__grid", "aria-label": monthLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: weekdayNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { scope: "col", abbr: name.long, className: "ow-calendar__weekday", children: name.short.slice(0, 2) }, name.long)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { className: cx(slide.current.direction && `ow-calendar__slide--${slide.current.direction}`), children: weeks.map((week) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: week.map((date) => {
         const inMonth = parseISO(date).month === month;
         const isSelected = date === selected;
         const disabled = isDisabled(date);
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { role: "gridcell", "aria-selected": isSelected, className: "ow-calendar__cell", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             type: "button",
@@ -2315,7 +2378,7 @@ function clampDate(date, min, max) {
 
 // src/components/Calendar/DatePicker.tsx
 var import_react24 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function assignRef5(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
@@ -2350,8 +2413,8 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
   }, []);
   useDismiss(isOpen, [panelRef, triggerRef], close);
   const label = date ? formatDate(date, locale, formatOptions) : placeholder;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
         ref: (element) => {
@@ -2383,12 +2446,12 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CalendarIcon, { size: size === "sm" ? 14 : 16, className: "ow-date-picker__icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: `${panelId}-value`, className: cx("ow-select__value", !date && "ow-select__value--placeholder"), children: label })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         ref: panelRef,
@@ -2399,7 +2462,7 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
         "aria-label": "Choose a date",
         className: "ow-popover ow-floating ow-date-picker__panel",
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Calendar,
           {
             ...calendarProps,
@@ -2418,13 +2481,13 @@ var DatePicker = (0, import_react24.forwardRef)(function DatePicker2({
 });
 
 // src/components/Alert/Alert.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var icons = {
-  info: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InfoIcon, { size: 16 }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircleCheckIcon, { size: 16 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TriangleAlertIcon, { size: 16 }),
-  danger: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircleAlertIcon, { size: 16 }),
-  neutral: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InfoIcon, { size: 16 })
+  info: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleCheckIcon, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TriangleAlertIcon, { size: 16 }),
+  danger: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CircleAlertIcon, { size: 16 }),
+  neutral: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InfoIcon, { size: 16 })
 };
 function Alert({
   variant = "info",
@@ -2437,37 +2500,37 @@ function Alert({
   role,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       role: role ?? (variant === "danger" || variant === "warning" ? "alert" : "status"),
       className: cx("ow-alert", `ow-alert--${variant}`, className),
       ...props,
       children: [
-        icon2 === false ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ow-alert__body", children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__title", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__description", children }) : null,
-          actions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ow-alert__actions", children: actions }) : null
+        icon2 === false ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-alert__icon", children: icon2 ?? icons[variant] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-alert__body", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__description", children }) : null,
+          actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-alert__actions", children: actions }) : null
         ] }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseButton, { size: "sm", label: "Dismiss", className: "ow-alert__close", onClick: onClose }) : null
       ]
     }
   );
 }
 
 // src/components/Badge/Badge.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Badge({ children, className, icon: icon2, size = "md", variant = "neutral", ...spanProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
-    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-badge__icon", children: icon2 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx("ow-badge", `ow-badge--${size}`, `ow-badge--${variant}`, className), ...spanProps, children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ow-badge__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children })
   ] });
 }
 
 // src/components/Progress/Progress.tsx
 var import_react25 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ProgressBar({
   value,
   max = 100,
@@ -2483,12 +2546,12 @@ function ProgressBar({
   const indeterminate = value === void 0;
   const pct = indeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
   const text = valueLabel ?? `${Math.round(pct)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
-    label || showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "ow-progress__header", children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", {}),
-      showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "ow-progress__value", children: text }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cx("ow-progress", `ow-progress--${size}`, `ow-progress--${tone}`, className), children: [
+    label || showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-progress__header", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { id: labelId, className: "ow-progress__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
+      showValue && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ow-progress__value", children: text }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         role: "progressbar",
@@ -2499,7 +2562,7 @@ function ProgressBar({
         "aria-valuenow": indeterminate ? void 0 : value,
         "aria-valuetext": indeterminate ? void 0 : text,
         className: cx("ow-progress__track", indeterminate && "ow-progress__track--indeterminate"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ow-progress__fill", style: indeterminate ? void 0 : { width: `${pct}%` } })
       }
     )
   ] });
@@ -2518,7 +2581,7 @@ function ProgressCircle({
   const circumference = 2 * Math.PI * radius;
   const indeterminate = value === void 0;
   const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       role: "progressbar",
@@ -2534,9 +2597,9 @@ function ProgressCircle({
       ),
       style: { width: box, height: box },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "circle",
             {
               className: "ow-progress-circle__fill",
@@ -2552,7 +2615,7 @@ function ProgressCircle({
             }
           )
         ] }),
-        size === "lg" && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "ow-progress-circle__value", children: [
+        size === "lg" && !indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "ow-progress-circle__value", children: [
           Math.round(pct),
           "%"
         ] }) : null
@@ -2563,9 +2626,9 @@ function ProgressCircle({
 
 // src/components/Skeleton/Skeleton.tsx
 var import_react26 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Skeleton({ width = "100%", height = 14, soft = false, shape = "bar", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "span",
     {
       className: cx("ow-skeleton", soft && "ow-skeleton--soft", shape === "block" && "ow-skeleton--block", className),
@@ -2581,26 +2644,26 @@ function SkeletonRows({ label = "Loading", rows = 4, delayMs = 150 }) {
     const timer = window.setTimeout(() => setIsVisible(true), delayMs);
     return () => window.clearTimeout(timer);
   }, [delayMs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { role: "status", "aria-label": label, "aria-busy": "true", children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ow-skeleton-rows", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-skeleton-rows__row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-skeleton-rows__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { role: "status", "aria-label": label, "aria-busy": "true", children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "ow-skeleton-rows", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-skeleton-rows__row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-skeleton-rows__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${28 + index * 17 % 22}%`, height: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: `${46 + index * 23 % 30}%`, height: 12, soft: true })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Skeleton, { width: 96, height: 32, soft: true, shape: "block" })
   ] }, index)) }) : null });
 }
 
 // src/components/Toast/Toast.tsx
 var import_react27 = require("react");
 var import_sonner = require("sonner");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var icons2 = {
-  success: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CircleCheckIcon, { size: 16 }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CircleAlertIcon, { size: 16 }),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TriangleAlertIcon, { size: 16 }),
-  info: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, { size: 16 }),
-  loading: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Spinner, { size: "sm", label: "" }),
-  close: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(XIcon, { size: 12 })
+  success: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleCheckIcon, { size: 16 }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleAlertIcon, { size: 16 }),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TriangleAlertIcon, { size: 16 }),
+  info: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, { size: 16 }),
+  loading: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Spinner, { size: "sm", label: "" }),
+  close: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(XIcon, { size: 12 })
 };
 function Toaster({
   position = "bottom-center",
@@ -2631,7 +2694,7 @@ function Toaster({
     observer.observe(document.body, { subtree: true, attributes: true, attributeFilter: ["open"] });
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: layerRef, ...manualPopover, className: "ow-toaster-layer", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_sonner.Toaster,
     {
       id,
@@ -2653,7 +2716,7 @@ function Toaster({
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react28 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var lastClosedAt = 0;
 var warmWindow = 500;
 function Tooltip({ children, label, placement = "top", delay = 400 }) {
@@ -2684,7 +2747,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "span",
     {
       ref: anchorRef,
@@ -2700,7 +2763,7 @@ function Tooltip({ children, label, placement = "top", delay = 400 }) {
       onBlur: hide,
       children: [
         children,
-        mounted ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
+        mounted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ref: bubbleRef, ...manualPopover, "data-state": state, className: "ow-tooltip__bubble ow-floating", style, "aria-hidden": "true", children: label }) : null
       ]
     }
   );
@@ -2766,7 +2829,7 @@ function useModalDialog(open, onCancel) {
 }
 
 // src/components/Dialog/Dialog.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Dialog({
   open,
   onClose,
@@ -2785,15 +2848,15 @@ function Dialog({
     if (dismissible) onClose();
   });
   if (!mounted) return null;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-dialog__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: titleId, className: "ow-dialog__title", children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
+  const body = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-dialog__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: "ow-dialog__title", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: descriptionId, className: "ow-dialog__description", children: description }) : null
     ] }),
     children,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-dialog__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__actions", children: actions }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "dialog",
     {
       ref: dialogRef,
@@ -2801,7 +2864,7 @@ function Dialog({
       style: { width: `min(${width}px, calc(100% - 32px))` },
       "aria-labelledby": titleId,
       "aria-describedby": description ? descriptionId : void 0,
-      children: onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "form",
         {
           className: "ow-dialog__body",
@@ -2811,7 +2874,7 @@ function Dialog({
           },
           children: body
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-dialog__body", children: body })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-dialog__body", children: body })
     }
   );
 }
@@ -2842,7 +2905,7 @@ function ConfirmDialog({
       setIsWorking(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     Dialog,
     {
       open,
@@ -2850,17 +2913,17 @@ function ConfirmDialog({
       dismissible: !isWorking,
       width: 380,
       className: "ow-dialog--confirm",
-      title: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        destructive ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TrashIcon, { size: 18 }) }) : null,
+      title: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        destructive ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ow-dialog__danger-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TrashIcon, { size: 18 }) }) : null,
         title
       ] }),
       description,
       onSubmit: () => {
         if (!confirmDisabled && !isWorking) void confirm();
       },
-      actions: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      actions: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "button", disabled: isWorking, autoFocus: true, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Button,
           {
             type: "submit",
@@ -2872,7 +2935,7 @@ function ConfirmDialog({
       ] }),
       children: [
         children,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
+        error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { role: "alert", className: "ow-dialog__error", children: error }) : null
       ]
     }
   );
@@ -2880,7 +2943,7 @@ function ConfirmDialog({
 
 // src/components/Drawer/Drawer.tsx
 var import_react31 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Drawer({
   open,
   onClose,
@@ -2900,7 +2963,7 @@ function Drawer({
   });
   if (!mounted) return null;
   const sizeStyle = side === "bottom" ? { height: `min(${size}px, 90dvh)` } : { width: `min(${size}px, 100vw - 24px)` };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "dialog",
     {
       ref: dialogRef,
@@ -2909,15 +2972,15 @@ function Drawer({
       "aria-labelledby": titleId,
       "aria-describedby": description ? descriptionId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "ow-drawer__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-drawer__titles", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { id: titleId, className: "ow-drawer__title", children: title }),
-            description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: "ow-drawer__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-drawer__titles", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { id: titleId, className: "ow-drawer__title", children: title }),
+            description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: descriptionId, className: "ow-drawer__description", children: description }) : null
           ] }),
-          dismissible ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseButton, { onClick: onClose }) : null
+          dismissible ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseButton, { onClick: onClose }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "ow-drawer__body", children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("footer", { className: "ow-drawer__footer", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ow-drawer__body", children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("footer", { className: "ow-drawer__footer", children: footer }) : null
       ]
     }
   );
@@ -2925,7 +2988,7 @@ function Drawer({
 
 // src/components/Popover/Popover.tsx
 var import_react32 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Popover({
   trigger,
   children,
@@ -2977,9 +3040,9 @@ function Popover({
       if (!event.defaultPrevented) setOpen(!isOpen);
     }
   }) : trigger;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { ref: anchorRef, className: "ow-popover-anchor", children: triggerElement }),
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -2997,7 +3060,7 @@ function Popover({
           if (next && !panelRef.current?.contains(next) && !anchorRef.current?.contains(next)) setOpen(false);
         },
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: `${id}-title`, className: "ow-popover__title", children: title }) : null,
           children
         ]
       }
@@ -3063,7 +3126,7 @@ function useMenuKeyboard({
 }
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MenuContext = (0, import_react34.createContext)(null);
 function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
   const [open, setOpen] = (0, import_react34.useState)(defaultOpen);
@@ -3101,9 +3164,9 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
       if (!event.defaultPrevented) setOpen((current) => !current);
     }
   }) : trigger;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { ref: rootRef, className: "ow-menu", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { ref: rootRef, className: "ow-menu", children: [
     triggerElement,
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       MenuContext.Provider,
       {
         value: {
@@ -3112,7 +3175,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
             triggerRef.current?.focus();
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             ref: menuRef,
@@ -3133,7 +3196,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
 }
 var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
   const menu = (0, import_react34.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     {
       ref,
@@ -3149,18 +3212,18 @@ var MenuItem = (0, import_react34.forwardRef)(function MenuItem2({ icon: icon2,
       },
       ...buttonProps,
       children: [
-        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ow-menu__icon", children: icon2 }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ow-menu__label", children }),
-        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__icon", children: icon2 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-menu__label", children }),
+        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-menu__shortcut", children: shortcut }) : null
       ]
     }
   );
 });
 function MenuLabel({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ow-menu__group-label", role: "presentation", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__group-label", role: "presentation", children });
 }
 function MenuSeparator() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ow-menu__separator", role: "separator" });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-menu__separator", role: "separator" });
 }
 
 // src/components/CommandPalette/CommandPalette.tsx
@@ -3201,7 +3264,7 @@ function filterCommands(commands, query) {
 }
 
 // src/components/CommandPalette/CommandPalette.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function CommandPalette({ open, onClose, commands, placeholder = "Search commands\u2026" }) {
   const { dialogRef, mounted } = useModalDialog(open, onClose);
   const [query, setQuery] = (0, import_react35.useState)("");
@@ -3227,10 +3290,10 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
     if (!results.length) return;
     setActiveIndex((index) => (Math.min(index, results.length - 1) + step + results.length) % results.length);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "ow-palette__search", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("dialog", { ref: dialogRef, className: "ow-dialog ow-palette", "aria-label": "Command palette", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "ow-palette__search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SearchIcon, { size: 16, className: "ow-palette__search-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "input",
         {
           autoFocus: true,
@@ -3257,14 +3320,14 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-palette__esc", children: "esc" })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__esc", children: "esc" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": "Commands", className: "ow-palette__list", children: results.length ? results.map((command, index) => {
       const showGroup = !query.trim() && command.group && command.group !== results[index - 1]?.group;
       const isActive = command === active;
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { role: "presentation", children: [
-        showGroup ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ow-palette__group", children: command.group }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { role: "presentation", children: [
+        showGroup ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ow-palette__group", children: command.group }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "div",
           {
             id: `${listId}-${command.id}`,
@@ -3279,16 +3342,16 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
             onMouseMove: () => setActiveIndex(index),
             onClick: () => run(command),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__title", children: command.title }),
-              command.disabled && isActive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__hint", children: command.disabled }) : command.hint ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ow-palette__hint", children: command.hint }) : null,
-              command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
-              isActive && !command.disabled ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__icon", "aria-hidden": "true", children: command.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__title", children: command.title }),
+              command.disabled && isActive ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__hint", children: command.disabled }) : command.hint ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-palette__hint", children: command.hint }) : null,
+              command.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "ow-palette__shortcut", children: command.shortcut }) : null,
+              isActive && !command.disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CornerDownLeftIcon, { size: 13, className: "ow-palette__enter" }) : null
             ]
           }
         )
       ] }, command.id);
-    }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "ow-palette__empty", children: [
+    }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("li", { className: "ow-palette__empty", children: [
       "No commands match \u201C",
       query,
       "\u201D."
@@ -3298,7 +3361,7 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
 
 // src/components/Tabs/Tabs.tsx
 var import_react36 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var TabsContext = (0, import_react36.createContext)(null);
 function useTabs(component) {
   const context = (0, import_react36.useContext)(TabsContext);
@@ -3309,7 +3372,7 @@ var idPart = (value) => value.replace(/[^\w-]/g, "_");
 function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
   const [current, select] = useControllableState(value, defaultValue, onValueChange);
   const baseId = (0, import_react36.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
 }
 function TabList({ className, onKeyDown, children, ...props }) {
   const { value, select } = useTabs("TabList");
@@ -3333,15 +3396,15 @@ function TabList({ className, onKeyDown, children, ...props }) {
     next.focus();
     if (next.dataset.value) select(next.dataset.value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: listRef, role: "tablist", className: cx("ow-tabs__list", className), onKeyDown: handleKeyDown, ...props, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-indicator", "aria-hidden": "true" })
   ] });
 }
 function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
   const { value: current, select, baseId } = useTabs("Tab");
   const selected = current === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       type: "button",
@@ -3358,7 +3421,7 @@ function Tab({ value, icon: icon2, className, children, onClick, ...props }) {
       },
       ...props,
       children: [
-        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ow-tab__icon", children: icon2 }) : null,
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-tab__icon", children: icon2 }) : null,
         children
       ]
     }
@@ -3368,7 +3431,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
   const { value: current, baseId } = useTabs("TabPanel");
   const selected = current === value;
   if (!selected && !keepMounted) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -3385,7 +3448,7 @@ function TabPanel({ value, keepMounted = false, className, children, ...props })
 
 // src/components/Accordion/Accordion.tsx
 var import_react37 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function DisclosureView({
   open,
   onToggle,
@@ -3405,9 +3468,9 @@ function DisclosureView({
   (0, import_react37.useEffect)(() => {
     if (panelRef.current) panelRef.current.inert = !open;
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "ow-disclosure__header", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx(item ? "ow-accordion__item" : "ow-disclosure", className), "data-open": open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "ow-disclosure__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Heading, { className: "ow-disclosure__heading", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
         "button",
         {
           type: "button",
@@ -3419,18 +3482,18 @@ function DisclosureView({
           "data-accordion-trigger": item ? "" : void 0,
           onClick: onToggle,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
-            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "ow-disclosure__titles", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__title", children: title }),
-              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 14, className: "ow-disclosure__chevron" }),
+            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__icon", children: icon2 }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "ow-disclosure__titles", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__title", children: title }),
+              subtitle ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-disclosure__subtitle", children: subtitle }) : null
             ] })
           ]
         }
       ) }),
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__actions", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__actions", children: actions }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
       {
         ref: panelRef,
@@ -3438,7 +3501,7 @@ function DisclosureView({
         role: "region",
         "aria-labelledby": `${id}-trigger`,
         className: "ow-disclosure__panel",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "ow-disclosure__content", children }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__clip", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "ow-disclosure__content", children }) })
       }
     )
   ] });
@@ -3453,7 +3516,7 @@ function Disclosure({
   ...props
 }) {
   const [isOpen, setOpen] = useControllableState(open, defaultOpen, onOpenChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     DisclosureView,
     {
       ...props,
@@ -3495,12 +3558,12 @@ function Accordion({
     event.preventDefault();
     triggers[(moves[event.key] + triggers.length) % triggers.length]?.focus();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AccordionContext.Provider, { value: { isOpen: (item) => openValues.includes(item), toggle, headingLevel }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("ow-accordion", `ow-accordion--${variant}`, className), onKeyDown: handleKeyDown, ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AccordionContext.Provider, { value: { isOpen: (item) => openValues.includes(item), toggle, headingLevel }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("ow-accordion", `ow-accordion--${variant}`, className), onKeyDown: handleKeyDown, ...props, children }) });
 }
 function AccordionItem({ value, ...props }) {
   const context = (0, import_react37.useContext)(AccordionContext);
   if (!context) throw new Error("AccordionItem must be inside <Accordion>.");
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     DisclosureView,
     {
       ...props,
@@ -3514,13 +3577,13 @@ function AccordionItem({ value, ...props }) {
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react38 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("nav", { "aria-label": label, className: cx("ow-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ol", { className: "ow-breadcrumbs__list", children: items2.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { "aria-label": label, className: cx("ow-breadcrumbs", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ol", { className: "ow-breadcrumbs__list", children: items2.map((item, index) => {
     const isLast = index === items2.length - 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "ow-breadcrumbs__item", children: [
-      isLast ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-breadcrumbs__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("a", { className: "ow-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: "ow-breadcrumbs__link", onClick: item.onClick, children: item.label }),
-      isLast ? null : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { size: 14 }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { className: "ow-breadcrumbs__item", children: [
+      isLast ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-breadcrumbs__current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { className: "ow-breadcrumbs__link", href: item.href, onClick: item.onClick, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "ow-breadcrumbs__link", onClick: item.onClick, children: item.label }),
+      isLast ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-breadcrumbs__separator", "aria-hidden": "true", children: separator === "slash" ? "/" : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, index);
   }) }) });
 }
@@ -3528,7 +3591,7 @@ function linkClassName({ variant = "default" } = {}) {
   return cx("ow-link", `ow-link--${variant}`);
 }
 var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "a",
     {
       ref,
@@ -3538,9 +3601,9 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
       ...props,
       children: [
         children,
-        external ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+        external ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowUpRightIcon, { size: 13, className: "ow-link__external" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
         ] }) : null
       ]
     }
@@ -3548,7 +3611,7 @@ var Link = (0, import_react38.forwardRef)(function Link2({ variant = "default",
 });
 
 // src/components/Pagination/Pagination.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function paginationItems(page, pageCount, siblingCount = 1, boundaryCount = 1) {
   const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
   const startPages = range(1, Math.min(boundaryCount, pageCount));
@@ -3581,8 +3644,8 @@ function Pagination({
 }) {
   const items2 = paginationItems(page, pageCount, siblingCount, boundaryCount);
   const go = (next) => onPageChange(Math.min(Math.max(1, next), pageCount));
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("ul", { className: "ow-pagination__list", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("nav", { "aria-label": label, className: cx("ow-pagination", `ow-pagination--${size}`, className), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("ul", { className: "ow-pagination__list", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
@@ -3590,11 +3653,11 @@ function Pagination({
         "aria-label": "Previous page",
         disabled: page <= 1,
         onClick: () => go(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronLeftIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronLeftIcon, { size: 16 })
       }
     ) }),
     items2.map(
-      (item) => typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      (item) => typeof item === "number" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "button",
         {
           type: "button",
@@ -3604,9 +3667,9 @@ function Pagination({
           onClick: () => go(item),
           children: item
         }
-      ) }, item) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
+      ) }, item) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { className: "ow-pagination__gap", "aria-hidden": "true", children: "\u2026" }, item)
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
@@ -3614,7 +3677,7 @@ function Pagination({
         "aria-label": "Next page",
         disabled: page >= pageCount,
         onClick: () => go(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronRightIcon, { size: 16 })
       }
     ) })
   ] }) });
@@ -3622,43 +3685,43 @@ function Pagination({
 
 // src/components/Steps/Steps.tsx
 var import_react39 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Steps({ items: items2, current = 0, orientation = "vertical", title, label = "Steps", className }) {
   const statuses = items2.map((item, index) => item.status ?? (index < current ? "done" : index === current ? "current" : "upcoming"));
   const doneCount = statuses.filter((status) => status === "done").length;
   const headingId = (0, import_react39.useId)();
-  const list = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
+  const list = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ol", { className: "ow-steps__list", children: items2.map((item, index) => {
     const status = statuses[index];
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "li",
       {
         className: cx("ow-steps__item", `ow-steps__item--${status}`),
         "aria-current": status === "current" ? "step" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__title", children: [
-              status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__marker", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckIcon, { size: 14, strokeWidth: 3 }) : index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__title", children: [
+              status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-visually-hidden", children: "Done: " }) : null,
               item.title
             ] }),
-            item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
+            item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
           ] }),
-          item.action && status !== "done" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
+          item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
         ]
       },
       index
     );
   }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "section",
     {
       className: cx("ow-steps", `ow-steps--${orientation}`, className),
       "aria-labelledby": title && orientation === "vertical" ? headingId : void 0,
       "aria-label": title && orientation === "vertical" ? void 0 : label,
       children: [
-        title && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ow-steps__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { id: headingId, className: "ow-steps__heading", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "ow-steps__count", children: [
+        title && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "ow-steps__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { id: headingId, className: "ow-steps__heading", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "ow-steps__count", children: [
             doneCount,
             " of ",
             items2.length,
@@ -3673,25 +3736,25 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
 
 // src/components/NavList/NavList.tsx
 var import_react40 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function NavList({ label, heading, orientation = "vertical", children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
-    heading && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__heading", children: heading }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
+    heading && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__heading", children: heading }) : null,
     children
   ] });
 }
 var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__label", children }),
-    end !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "ow-nav__end", children: end }) : null
+  const content = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__label", children }),
+    end !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ow-nav__end", children: end }) : null
   ] });
   const shared = {
     "aria-current": active ? "page" : void 0,
     className: cx("ow-nav__item", active && "ow-nav__item--active", className)
   };
   if (href !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "a",
       {
         ref,
@@ -3702,12 +3765,12 @@ var NavItem = (0, import_react40.forwardRef)(function NavItem2({ icon: icon2, ac
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
 });
 
 // src/components/Table/Table.tsx
 var import_react41 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function compare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
@@ -3726,6 +3789,7 @@ function Table({
   selectedKeys,
   defaultSelectedKeys = [],
   onSelectionChange,
+  rowLabel,
   emptyContent = "Nothing here yet.",
   density = "comfortable",
   stickyHeader = false,
@@ -3735,6 +3799,11 @@ function Table({
   const [currentSort, setSort] = useControllableState(sort, defaultSort, onSortChange);
   const [selected, setSelected] = useControllableState(selectedKeys, defaultSelectedKeys, onSelectionChange);
   const keyOf = (row) => typeof rowKey === "function" ? rowKey(row) : row[rowKey];
+  const labelOf = (row, index) => {
+    if (rowLabel) return rowLabel(row);
+    const first = columns[0] ? row[columns[0].key] : void 0;
+    return typeof first === "string" || typeof first === "number" ? String(first) : `row ${index + 1}`;
+  };
   const field = (row, key) => row[key];
   const sorted = (0, import_react41.useMemo)(() => {
     if (!currentSort || manualSort) return rows;
@@ -3752,16 +3821,16 @@ function Table({
     );
   }
   const selectable = selectionMode === "multiple";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
       style: maxHeight ? { maxHeight } : void 0,
       tabIndex: maxHeight ? 0 : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
-          selectable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { children: [
+          selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             Checkbox,
             {
               size: "sm",
@@ -3775,38 +3844,38 @@ function Table({
           ) }) : null,
           columns.map((column) => {
             const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "th",
               {
                 scope: "col",
                 "aria-sort": direction ?? (column.sortable ? "none" : void 0),
                 className: cx(`ow-table__cell--${column.align ?? "start"}`),
                 style: column.width !== void 0 ? { width: column.width } : void 0,
-                children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
+                children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
                   column.header,
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ChevronsUpDownIcon, { size: 12 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChevronsUpDownIcon, { size: 12 }) })
                 ] }) : column.header
               },
               column.key
             );
           })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row) => {
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
           const key = keyOf(row);
           const isSelected = selected.includes(key);
-          return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
-            selectable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               Checkbox,
               {
                 size: "sm",
-                "aria-label": "Select row",
+                "aria-label": `Select ${labelOf(row, index)}`,
                 checked: isSelected,
                 onChange: (event) => setSelected(
                   event.target.checked ? [...selected, key] : selected.filter((k) => k !== key)
                 )
               }
             ) }) : null,
-            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
           ] }, key);
         }) })
       ] })
@@ -3815,7 +3884,7 @@ function Table({
 }
 
 // src/components/Stat/Stat.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Sparkline({ values }) {
   const max = Math.max(...values);
   const min = Math.min(...values);
@@ -3827,37 +3896,37 @@ function Sparkline({ values }) {
   });
   const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ");
   const [lastX, lastY] = points[points.length - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
   ] });
 }
 function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
   const tone = changeTone ?? (change?.startsWith("+") ? "positive" : /^[-−]/.test(change ?? "") ? "negative" : "neutral");
   const rising = change ? !/^[-−]/.test(change) : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("ow-stat", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__label", children: [
-      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("ow-stat", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__label", children: [
+      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "ow-stat__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "ow-stat__value", children: value }),
-      change ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
-        tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowDownIcon, { size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ow-stat__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-stat__value", children: value }),
+      change ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
+        tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ArrowDownIcon, { size: 12 }),
         change
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "ow-stat__description", children: description }) : null,
-    trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Sparkline, { values: trend }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ow-stat__description", children: description }) : null,
+    trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Sparkline, { values: trend }) : null
   ] });
 }
 
 // src/components/FileTree/FileTree.tsx
 var import_react42 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function flatten(nodes, expanded, parent, level = 1) {
   return nodes.flatMap((node) => {
     const path = parent ? `${parent}/${node.name}` : node.name;
@@ -3935,8 +4004,8 @@ function FileTree({
       const row = rows.find((entry) => entry.path === path);
       if (!row) return null;
       const isOpen = row.isFolder && expanded.has(path);
-      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FileIcon, { size: 16 }));
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FileIcon, { size: 16 }));
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "li",
         {
           ref: (element) => {
@@ -3954,7 +4023,7 @@ function FileTree({
             if (event.target === event.currentTarget) setFocusPath(path);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
               "div",
               {
                 className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
@@ -3964,51 +4033,51 @@ function FileTree({
                   activate(row);
                 },
                 children: [
-                  row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__spacer" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__name", children: node.name }),
-                  node.meta ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
+                  row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__spacer" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__name", children: node.name }),
+                  node.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
                 ]
               }
             ),
-            isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
+            isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
           ]
         },
         path
       );
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(InboxIcon, { size: 20 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "ow-empty__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "ow-empty__title", children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "ow-empty__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InboxIcon, { size: 20 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "ow-empty__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__title", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "ow-empty__description", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
   ] });
 }
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Tag({ onRemove, variant = "neutral", size = "md", icon: icon2, removeLabel, className, children, ...props }) {
   const name = removeLabel ?? (typeof children === "string" ? children : "tag");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size}`, onRemove && "ow-tag--removable", className), ...props, children: [
-    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-tag__label", children }),
-    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(XIcon, { size: 12 }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size}`, onRemove && "ow-tag--removable", className), ...props, children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-tag__label", children }),
+    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(XIcon, { size: 12 }) }) : null
   ] });
 }
 function TagGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
 }
 function ColorSwatch({ color, name, value, size = "md", shape = "square", className }) {
-  const swatch = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const swatch = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "span",
     {
       className: cx("ow-swatch", `ow-swatch--${size}`, shape === "circle" && "ow-swatch--circle"),
@@ -4016,48 +4085,58 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
       ...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
     }
   );
-  if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className, children: swatch });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
+  if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className, children: swatch });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
     swatch,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ow-swatch-label__text", children: [
-      name ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ow-swatch-label__value", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "ow-swatch-label__text", children: [
+      name ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ow-swatch-label__value", children: value })
     ] })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
 var import_react43 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
+function avatarSize(size) {
+  if (typeof size === "number") {
+    return { className: "ow-avatar--custom", style: { "--ow-avatar-size": `${size}px` }, pixels: size };
+  }
+  return { className: `ow-avatar--${size}`, pixels: namedSizes[size] };
+}
 function Avatar({ name, src, size = "md", label, className }) {
   const initials = getInitials(name);
   const [failedImage, setFailedImage] = (0, import_react43.useState)();
   const showImage = src && src !== failedImage;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  const sizing = avatarSize(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "span",
     {
-      className: cx("ow-avatar", `ow-avatar--${size}`, !initials && !showImage && "ow-avatar--empty", className),
+      className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
+      style: sizing.style,
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
-      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UserIcon, { size: size === "sm" ? 13 : size === "lg" ? 18 : 15 })
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
 
 // src/components/Avatar/AvatarGroup.tsx
 var import_react44 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function AvatarGroup({ children, max = 4, size = "md", label, className }) {
   const avatars = import_react44.Children.toArray(children).filter(import_react44.isValidElement);
+  const sizing = avatarSize(size);
   const shown = avatars.slice(0, max);
   const hidden = avatars.length - shown.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
     shown.map((avatar) => (0, import_react44.cloneElement)(avatar, { size })),
-    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cx("ow-avatar", `ow-avatar--${size}`, "ow-avatar--count"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { "aria-hidden": "true", children: [
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { "aria-hidden": "true", children: [
         "+",
         hidden
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "ow-visually-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "ow-visually-hidden", children: [
         "and ",
         hidden,
         " more"
@@ -4065,43 +4144,47 @@ function AvatarGroup({ children, max = 4, size = "md", label, className }) {
     ] }) : null
   ] });
 }
+function userSize(size) {
+  if (typeof size !== "number") return `ow-user--${size}`;
+  return size >= 48 ? "ow-user--xl" : size >= 36 ? "ow-user--lg" : size >= 28 ? "ow-user--md" : "ow-user--sm";
+}
 function User({ name, description, src, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("ow-user", `ow-user--${size}`, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Avatar, { name, src, size }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ow-user__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ow-user__name", children: name }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ow-user__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cx("ow-user", userSize(size), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Avatar, { name, src, size }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ow-user__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__name", children: name }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ow-user__description", children: description }) : null
     ] })
   ] });
 }
 
 // src/components/Kbd/Kbd.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
 }
 function Code({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("code", { className: cx("ow-code", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("code", { className: cx("ow-code", className), ...props });
 }
 
 // src/components/Card/Card.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Card({ className, padding = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
 }
 function SettingsRow({ children, description, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("ow-settings-row", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "ow-settings-row__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ow-settings-row__label", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("ow-settings-row", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "ow-settings-row__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ow-settings-row__label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ow-settings-row__control", children })
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ow-settings-row__control", children })
   ] });
 }
 
 // src/components/Layout/Layout.tsx
 var import_react45 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
 var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
 function Stack({
@@ -4117,7 +4200,7 @@ function Stack({
   ...props
 }) {
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     Element,
     {
       className: cx("ow-stack", className),
@@ -4137,9 +4220,9 @@ function Stack({
 function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
   const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
   if (label && orientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ow-separator-label__text", children: label }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-separator-label__text", children: label }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       role: "separator",
@@ -4179,7 +4262,7 @@ function ScrollShadow({
       observer?.disconnect();
     };
   }, [orientation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       ref,
@@ -4200,14 +4283,14 @@ function ScrollShadow({
   );
 }
 function VisuallyHidden({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
 }
 
 // src/components/Marketing/Marketing.tsx
 var import_react46 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Chip({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cx("ow-chip", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: cx("ow-chip", className), ...props });
 }
 function SectionHeading({
   eyebrow,
@@ -4217,17 +4300,17 @@ function SectionHeading({
   as: Heading = "h2",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
-    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Chip, { children: eyebrow }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
-    intro ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Chip, { children: eyebrow }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
+    intro ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
   ] });
 }
 function SiteHeader({ brand, nav, actions, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("header", { className: cx("ow-site-header", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-site-header__brand", children: brand }),
-    nav ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("header", { className: cx("ow-site-header", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__brand", children: brand }),
+    nav ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
   ] });
 }
 function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
@@ -4240,7 +4323,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
     element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
     element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "div",
     {
       ref,
@@ -4248,9 +4331,9 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
       onPointerMove: track,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
-        interactive ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ow-dot-grid__content", children })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
+        interactive ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-dot-grid__content", children })
       ]
     }
   );
@@ -4259,7 +4342,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react47 = require("react");
 var import_react_colorful = require("react-colorful");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
 var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
 var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
@@ -4294,13 +4377,13 @@ function ColorPicker({
     } catch {
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Picker, { color, onChange: change }),
-    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "ow-color-picker__row", children: [
-      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PipetteIcon, { size: 15 }) }) : null,
-      showInput ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Picker, { color, onChange: change }),
+    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-color-picker__row", children: [
+      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PipetteIcon, { size: 15 }) }) : null,
+      showInput ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           import_react_colorful.HexColorInput,
           {
             className: "ow-input-group__input",
@@ -4312,11 +4395,11 @@ function ColorPicker({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
     ] }) : null,
-    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
       const swatchValue = swatchColor(swatch);
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
           type: "button",
@@ -4368,8 +4451,8 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
     const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
     return () => cancelAnimationFrame(frame);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "button",
       {
         ref: (element) => {
@@ -4401,13 +4484,13 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ChevronDownIcon, { size: size === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         ref: panelRef,
@@ -4421,7 +4504,7 @@ var ColorField = (0, import_react47.forwardRef)(function ColorField2({
         onKeyDown: (event) => {
           if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
       }
     ) : null
   ] });