@openwarelabs/ui 0.9.0 → 0.10.0

package/README.md

@@ -71,7 +71,7 @@ Hooks for your own components: `useControllableState`, `useFloating` (top-layer
 
 ## Blocks as components
 
-Blocks are becoming components in their own package, `@openwarelabs/blocks`, that take their content as props, so you don't copy their code. The heroes are first, `Hero01` to `Hero06`:
+Every block is also a component in its own package, `@openwarelabs/blocks`, that takes its content as props, so you don't copy its code: all 95, from `Header01` and `Hero01` to `Settings03` and `Chat03` ([the list](blocks/README.md#blocks)).
 
 ```sh
 npm install @openwarelabs/blocks
@@ -125,13 +125,17 @@ The docs' header has a colour picker that does this live, and the Theming page s
 
 `main` takes changes only through pull requests, squash-merged, so each one lands as a single commit named after the PR. The PR title follows [Conventional Commits](https://www.conventionalcommits.org) because `npm run release` reads it: `feat: add a date range picker`, `fix(Menu): close on Escape`, `feat!: rename Stack's gap sizes`. Put `BREAKING CHANGE: …` in the PR description for a breaking change.
 
-Three checks have to pass to merge:
+Five checks have to pass to merge:
 
-- **Checks**: types, contrast, blocks, the library, the MCP server and the docs.
+- **Checks**: types, contrast, blocks, the library, the MCP server and the docs, and the bundle size: what an app pays, minified and gzipped, for each package and for one piece of it imported alone, against the limits in `size-limits.json` (`npm run size` after a build). Raise a limit in the PR that needs it, so the growth is seen in review. It also lints for React's hooks rules (`npm run lint`; `eslint-suppressions.json` lists the problems there already were), and packs both packages as `npm publish` would, installs them in a new app and imports, requires, bundles and type-checks them there (`npm run smoke`).
 - **PR title**: the title follows the convention (`npm run commits:check -- --title "feat: …"` locally).
 - **Cleaner**: [openwarelabs/cleaner](https://github.com/openwarelabs/cleaner) on the `.ts` and `.tsx` files the PR changes. Types go in a `<name>.types.ts` beside the component, and imports from another folder use the aliases instead of `../`: `@/…` for `src/` (in the library and the docs), `@docs/…` for `docs/` (`?highlight` imports too) and `@build/…` in `mcp/`. Files that haven't been touched yet don't follow it; they catch up as they change.
+- **Visual**: every block (desktop and phone width) and every component example, in light and dark, rendered from the PR and from `main` and compared pixel by pixel. If something looks different, the run's summary lists it and the `visual-report` artifact shows each one before, after and with the changed pixels marked. When the change is meant, add the **visual change** label and the check passes. `npm run visual` runs the same comparison locally against `main` (`-- --filter Hero` for a few).
+- **Accessibility**: axe over every block (desktop and phone width) and every component example, in light and dark, against WCAG 2.2 A and AA. The run's summary lists each problem with the element and how to fix it. `a11y-known.json` lists the problems there already were, which don't fail it; fixing one means lowering its count. `npm run a11y` runs it locally (`-- --filter Hero` for a few).
 
-`scripts/setup-github.sh` sets this up on GitHub (squash merges only, the PR title as the commit, the ruleset for `main`). Repository admins can bypass the ruleset, which `npm run release` uses to push its version commit and tag.
+Dependabot opens a pull request each Monday with the week's npm and GitHub Actions updates, minor and patch ones grouped; every check above runs on it.
+
+`scripts/setup-github.sh` sets this up on GitHub (squash merges only, the PR title as the commit, the ruleset for `main`, the visual change label). Repository admins can bypass the ruleset, which `npm run release` uses to push its version commit and tag.
 
 ## Releasing
 

package/dist/index.cjs

@@ -262,7 +262,7 @@ function buttonClassName({
     iconOnly && "ow-button--icon-only"
   );
 }
-var Button = (0, import_react.forwardRef)(function Button2({
+var Button = /* @__PURE__ */ (0, import_react.forwardRef)(function Button2({
   children,
   className,
   disabled,
@@ -354,33 +354,33 @@ function icon(paths) {
     );
   };
 }
-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(
+var CheckIcon = /* @__PURE__ */ icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" }));
+var ChevronDownIcon = /* @__PURE__ */ icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }));
+var SearchIcon = /* @__PURE__ */ icon(
   /* @__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(
+var CornerDownLeftIcon = /* @__PURE__ */ icon(
   /* @__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(
+var XIcon = /* @__PURE__ */ icon(
   /* @__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(
+var UserIcon = /* @__PURE__ */ icon(
   /* @__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(
+var TrashIcon = /* @__PURE__ */ icon(
   /* @__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" }),
@@ -389,57 +389,56 @@ var TrashIcon = icon(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
   ] })
 );
-var CircleCheckIcon = icon(
+var CircleCheckIcon = /* @__PURE__ */ icon(
   /* @__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(
+var CircleAlertIcon = /* @__PURE__ */ icon(
   /* @__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_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(
+var ChevronRightIcon = /* @__PURE__ */ icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 18 6-6-6-6" }));
+var ChevronLeftIcon = /* @__PURE__ */ icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m15 18-6-6 6-6" }));
+var MinusIcon = /* @__PURE__ */ icon(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5 12h14" }));
+var PlusIcon = /* @__PURE__ */ icon(
   /* @__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(
+var InfoIcon = /* @__PURE__ */ icon(
   /* @__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(
+var TriangleAlertIcon = /* @__PURE__ */ icon(
   /* @__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(
+var PipetteIcon = /* @__PURE__ */ icon(
   /* @__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(
+var CopyIcon = /* @__PURE__ */ icon(
   /* @__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(
+var CalendarIcon = /* @__PURE__ */ icon(
   /* @__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" }),
@@ -447,62 +446,55 @@ var CalendarIcon = icon(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 10h18" })
   ] })
 );
-var FileIcon = icon(
+var FileIcon = /* @__PURE__ */ icon(
   /* @__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(
+var FolderIcon = /* @__PURE__ */ icon(
   /* @__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(
+var FolderOpenIcon = /* @__PURE__ */ icon(
   /* @__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(
+var UploadIcon = /* @__PURE__ */ icon(
   /* @__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(
+var ArrowUpRightIcon = /* @__PURE__ */ icon(
   /* @__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(
+var ArrowUpIcon = /* @__PURE__ */ icon(
   /* @__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(
+var ArrowDownIcon = /* @__PURE__ */ icon(
   /* @__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(
+var ChevronsUpDownIcon = /* @__PURE__ */ icon(
   /* @__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(
+var InboxIcon = /* @__PURE__ */ icon(
   /* @__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_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_runtime5 = require("react/jsx-runtime");
@@ -521,7 +513,7 @@ function ButtonGroup({ attached = true, orientation = "horizontal", className, .
     }
   );
 }
-var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size: size2 = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
+var CloseButton = /* @__PURE__ */ (0, import_react3.forwardRef)(function CloseButton2({ size: size2 = "md", label = "Close", className, type = "button", ...buttonProps }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
@@ -534,7 +526,7 @@ var CloseButton = (0, import_react3.forwardRef)(function CloseButton2({ size: si
     }
   );
 });
-var ToggleButton = (0, import_react3.forwardRef)(function ToggleButton2({ pressed, defaultPressed = false, onPressedChange, onClick, className, variant = "secondary", ...buttonProps }, ref) {
+var ToggleButton = /* @__PURE__ */ (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_runtime5.jsx)(
     Button,
@@ -667,7 +659,7 @@ function SegmentedControl({
 // src/components/ChoiceCard/ChoiceCard.tsx
 var import_react6 = require("react");
 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) {
+var ChoiceCard = /* @__PURE__ */ (0, import_react6.forwardRef)(function ChoiceCard2({ className, description, icon: icon2, recommended = false, shortcut, title, type = "button", ...buttonProps }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
@@ -785,7 +777,7 @@ var import_react12 = require("react");
 // src/components/Toolbar/Toolbar.tsx
 var import_react8 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ToolbarContext = (0, import_react8.createContext)(null);
+var ToolbarContext = /* @__PURE__ */ (0, import_react8.createContext)(null);
 var candidates = 'button, a[href], input:not([type="hidden"]), select, textarea, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"], [tabindex]';
 var textTypes = ["text", "search", "url", "tel", "password", "email"];
 var pressTypes = ["button", "checkbox", "submit", "reset", "image", "file", "color"];
@@ -817,7 +809,7 @@ function keepsKey(element, key, forward) {
   if (selectionStart === null || selectionEnd === null || selectionStart !== selectionEnd) return true;
   return forward ? selectionEnd < value.length : selectionStart > 0;
 }
-var Toolbar = (0, import_react8.forwardRef)(function Toolbar2({ orientation = "horizontal", variant = "raised", size: size2 = "md", className, children, onKeyDown, onFocus, ...props }, forwardedRef) {
+var Toolbar = /* @__PURE__ */ (0, import_react8.forwardRef)(function Toolbar2({ orientation = "horizontal", variant = "raised", size: size2 = "md", className, children, onKeyDown, onFocus, ...props }, forwardedRef) {
   const rootRef = (0, import_react8.useRef)(null);
   const activeRef = (0, import_react8.useRef)(null);
   const activeIndex = (0, import_react8.useRef)(0);
@@ -1220,12 +1212,12 @@ var import_react15 = require("react");
 // src/components/Checkbox/Checkbox.tsx
 var import_react13 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react13.createContext)(null);
+var CheckboxGroupContext = /* @__PURE__ */ (0, import_react13.createContext)(null);
 function assignRef(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Checkbox = (0, import_react13.forwardRef)(function Checkbox2({
+var Checkbox = /* @__PURE__ */ (0, import_react13.forwardRef)(function Checkbox2({
   className,
   size: size2 = "md",
   tone = "primary",
@@ -1396,7 +1388,7 @@ function Alert({
 
 // src/components/Form/Form.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var FormContext = (0, import_react14.createContext)(null);
+var FormContext = /* @__PURE__ */ (0, import_react14.createContext)(null);
 var checks = [
   "valueMissing",
   "typeMismatch",
@@ -1441,7 +1433,7 @@ function sameErrors(a, b) {
   const keys = Object.keys(a);
   return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
 }
-var Form = (0, import_react14.forwardRef)(function Form2({ onSubmit, validate, validationErrors, children, className, onChange, onBlur, onReset, ...formProps }, ref) {
+var Form = /* @__PURE__ */ (0, import_react14.forwardRef)(function Form2({ onSubmit, validate, validationErrors, children, className, onChange, onBlur, onReset, ...formProps }, ref) {
   const formRef = (0, import_react14.useRef)(null);
   const fields = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
   const [local, setLocal] = (0, import_react14.useState)({});
@@ -1722,7 +1714,7 @@ function Field({ label, children, hint, error, name: nameProp, errorMessages, cl
 // src/components/Input/Input.tsx
 var import_react16 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Input = (0, import_react16.forwardRef)(function Input2({ className, isInvalid = false, size: size2 = "md", startContent, endContent, ...inputProps }, ref) {
+var Input = /* @__PURE__ */ (0, import_react16.forwardRef)(function Input2({ className, isInvalid = false, size: size2 = "md", startContent, endContent, ...inputProps }, ref) {
   const invalid = isInvalid || void 0;
   if (startContent === void 0 && endContent === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1761,7 +1753,7 @@ function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var SearchField = (0, import_react17.forwardRef)(function SearchField2({
+var SearchField = /* @__PURE__ */ (0, import_react17.forwardRef)(function SearchField2({
   value,
   defaultValue = "",
   onChange,
@@ -1821,7 +1813,7 @@ var SearchField = (0, import_react17.forwardRef)(function SearchField2({
 var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var decimals = (step) => (String(step).split(".")[1] ?? "").length;
-var NumberField = (0, import_react18.forwardRef)(function NumberField2({
+var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function NumberField2({
   value,
   defaultValue = null,
   onChange,
@@ -2532,7 +2524,7 @@ function dateLayout(locale) {
   }
   return layout;
 }
-var DateField = (0, import_react21.forwardRef)(function DateField2({
+var DateField = /* @__PURE__ */ (0, import_react21.forwardRef)(function DateField2({
   value,
   defaultValue = "",
   onChange,
@@ -2695,7 +2687,7 @@ function timeLayout(locale, twelve, seconds) {
   if (twelve && !layout.some((part) => part.type === "dayPeriod")) layout.push({ type: "literal", text: " " }, { type: "dayPeriod" });
   return { layout, am: periodOf(1) ?? "AM", pm: periodOf(13) ?? "PM" };
 }
-var TimeField = (0, import_react22.forwardRef)(function TimeField2({
+var TimeField = /* @__PURE__ */ (0, import_react22.forwardRef)(function TimeField2({
   value,
   defaultValue = "",
   onChange,
@@ -2878,7 +2870,7 @@ function assignRef3(ref, element) {
   if (typeof ref === "function") ref(element);
   else if (ref) ref.current = element;
 }
-var Textarea = (0, import_react23.forwardRef)(function Textarea2({
+var Textarea = /* @__PURE__ */ (0, import_react23.forwardRef)(function Textarea2({
   autoGrow = false,
   autoGrowMaxHeight = defaultAutoGrowMaxHeight,
   bare = false,
@@ -3487,8 +3479,7 @@ function ListBoxWithRef({
     }
   );
 }
-var ForwardedListBox = (0, import_react25.forwardRef)(ListBoxWithRef);
-ForwardedListBox.displayName = "ListBox";
+var ForwardedListBox = /* @__PURE__ */ Object.assign(/* @__PURE__ */ (0, import_react25.forwardRef)(ListBoxWithRef), { displayName: "ListBox" });
 var ListBox = ForwardedListBox;
 
 // src/components/Combobox/Combobox.tsx
@@ -3498,7 +3489,7 @@ function assignRef4(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Combobox = (0, import_react26.forwardRef)(function Combobox2({
+var Combobox = /* @__PURE__ */ (0, import_react26.forwardRef)(function Combobox2({
   options,
   value,
   defaultValue = "",
@@ -3724,7 +3715,7 @@ var Combobox = (0, import_react26.forwardRef)(function Combobox2({
 // src/components/RadioGroup/RadioGroup.tsx
 var import_react27 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react27.createContext)(null);
+var RadioGroupContext = /* @__PURE__ */ (0, import_react27.createContext)(null);
 function RadioGroup({
   label,
   description,
@@ -3787,7 +3778,7 @@ function Radio({ value, children, description, disabled, className, ...inputProp
 // src/components/Switch/Switch.tsx
 var import_react28 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var Switch = (0, import_react28.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
+var Switch = /* @__PURE__ */ (0, import_react28.forwardRef)(function Switch2({ checked, onChange, label, className, disabled, ...buttonProps }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "button",
     {
@@ -4007,7 +3998,7 @@ function FileDropZone({
 // src/components/Calendar/Calendar.tsx
 var import_react31 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Calendar = (0, import_react31.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
+var Calendar = /* @__PURE__ */ (0, import_react31.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();
   const [focused, setFocused] = (0, import_react31.useState)(() => selected || clampDate(today, min, max));
@@ -4201,7 +4192,7 @@ function assignRef5(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var DatePicker = (0, import_react32.forwardRef)(function DatePicker2({
+var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(function DatePicker2({
   value,
   defaultValue = "",
   onChange,
@@ -4301,7 +4292,7 @@ var DatePicker = (0, import_react32.forwardRef)(function DatePicker2({
 // src/components/Calendar/RangeCalendar.tsx
 var import_react33 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var RangeCalendar = (0, import_react33.forwardRef)(function RangeCalendar2({ value, defaultValue = null, onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, visibleMonths = 1, autoFocus = false, className }, ref) {
+var RangeCalendar = /* @__PURE__ */ (0, import_react33.forwardRef)(function RangeCalendar2({ value, defaultValue = null, onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, visibleMonths = 1, autoFocus = false, className }, ref) {
   const months = visibleMonths;
   const [range, setRange] = useControllableState(value, defaultValue, onChange);
   const today = todayISO();
@@ -4484,7 +4475,7 @@ function useMediaQuery(query) {
   }, [query]);
   return matches2;
 }
-var DateRangePicker = (0, import_react34.forwardRef)(function DateRangePicker2({
+var DateRangePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(function DateRangePicker2({
   value,
   defaultValue = null,
   onChange,
@@ -5276,7 +5267,7 @@ function useMenuKeyboard({
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var MenuContext = (0, import_react44.createContext)(null);
+var MenuContext = /* @__PURE__ */ (0, import_react44.createContext)(null);
 function Menu({ trigger, children, label, align = "start", above = false, width, defaultOpen = false, className }) {
   const [open, setOpen] = (0, import_react44.useState)(defaultOpen);
   const rootRef = (0, import_react44.useRef)(null);
@@ -5343,7 +5334,7 @@ function Menu({ trigger, children, label, align = "start", above = false, width,
     ) : null
   ] });
 }
-var MenuItem = (0, import_react44.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
+var MenuItem = /* @__PURE__ */ (0, import_react44.forwardRef)(function MenuItem2({ icon: icon2, onSelect, destructive = false, shortcut, className, children, onClick, ...buttonProps }, ref) {
   const menu = (0, import_react44.useContext)(MenuContext);
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "button",
@@ -5511,7 +5502,7 @@ function CommandPalette({ open, onClose, commands, placeholder = "Search command
 // src/components/Tabs/Tabs.tsx
 var import_react46 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var TabsContext = (0, import_react46.createContext)(null);
+var TabsContext = /* @__PURE__ */ (0, import_react46.createContext)(null);
 function useTabs(component) {
   const context = (0, import_react46.useContext)(TabsContext);
   if (!context) throw new Error(`${component} must be inside <Tabs>.`);
@@ -5676,7 +5667,7 @@ function Disclosure({
     }
   );
 }
-var AccordionContext = (0, import_react47.createContext)(null);
+var AccordionContext = /* @__PURE__ */ (0, import_react47.createContext)(null);
 function Accordion({
   type = "single",
   value,
@@ -5739,7 +5730,7 @@ function Breadcrumbs({ items: items2, separator = "chevron", label = "Breadcrumb
 function linkClassName({ variant = "default" } = {}) {
   return cx("ow-link", `ow-link--${variant}`);
 }
-var Link = (0, import_react48.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
+var Link = /* @__PURE__ */ (0, import_react48.forwardRef)(function Link2({ variant = "default", external = false, className, children, target, rel, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "a",
     {
@@ -5892,7 +5883,7 @@ function NavList({ label, heading, orientation = "vertical", children, className
     children
   ] });
 }
-var NavItem = (0, import_react50.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
+var NavItem = /* @__PURE__ */ (0, import_react50.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
   const content = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
     icon2 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-nav__label", children }),
@@ -6491,7 +6482,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
 // src/components/Prose/Prose.tsx
 var import_react57 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var Prose = (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
+var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Element2,
@@ -6607,7 +6598,7 @@ function accepts(file, accept) {
   });
 }
 var hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
-var PromptInput = (0, import_react58.forwardRef)(function PromptInput2({
+var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function PromptInput2({
   value,
   defaultValue = "",
   onChange,
@@ -6958,7 +6949,7 @@ var PromptInput = (0, import_react58.forwardRef)(function PromptInput2({
 // src/components/PromptInput/PromptSuggestion.tsx
 var import_react59 = require("react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var PromptSuggestion = (0, import_react59.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
+var PromptSuggestion = /* @__PURE__ */ (0, import_react59.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
   if (variant === "card") {
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
       icon2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
@@ -7013,11 +7004,11 @@ function PromptSuggestions({
 // src/components/Chat/ChatConversation.tsx
 var import_react60 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var ChatConversationContext = (0, import_react60.createContext)(null);
+var ChatConversationContext = /* @__PURE__ */ (0, import_react60.createContext)(null);
 var stickyDistance = 32;
 var defaultCount = (count) => `${count} new`;
 var prefersReducedMotion = () => typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
-var ChatConversation = (0, import_react60.forwardRef)(function ChatConversation2({
+var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function ChatConversation2({
   children,
   empty,
   footer,
@@ -7174,7 +7165,7 @@ function lucide(paths) {
     );
   };
 }
-var BotIcon = lucide(
+var BotIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M12 8V4H8" }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
@@ -7184,25 +7175,25 @@ var BotIcon = lucide(
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M9 13v2" })
   ] })
 );
-var RotateCcwIcon = lucide(
+var RotateCcwIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M3 3v5h5" })
   ] })
 );
-var ThumbsUpIcon = lucide(
+var ThumbsUpIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M7 10v12" })
   ] })
 );
-var ThumbsDownIcon = lucide(
+var ThumbsDownIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M17 14V2" })
   ] })
 );
-var PencilIcon = lucide(
+var PencilIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { d: "m15 5 4 4" })
@@ -7294,7 +7285,7 @@ function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
     };
   }, [active, bodyRef, contentRef, caretRef]);
 }
-var ChatMessage = (0, import_react61.forwardRef)(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
+var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
   const conversation = (0, import_react61.useContext)(ChatConversationContext);
   const entering = useChatEntrance();
   const id = (0, import_react61.useId)();
@@ -7588,7 +7579,7 @@ function formatInput(input) {
     return String(input);
   }
 }
-var ChatTool = (0, import_react62.forwardRef)(function ChatTool2({
+var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2({
   title,
   name,
   icon: icon2,
@@ -7745,7 +7736,7 @@ var ChatTool = (0, import_react62.forwardRef)(function ChatTool2({
 var import_react63 = require("react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
-var ChainOfThought = (0, import_react63.forwardRef)(function ChainOfThought2({
+var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function ChainOfThought2({
   steps = [],
   status = "success",
   duration,
@@ -7810,7 +7801,7 @@ var import_react64 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var openDelay = 250;
 var closeDelay = 150;
-var ChatSource = (0, import_react64.forwardRef)(function ChatSource2({
+var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSource2({
   title,
   source,
   snippet,
@@ -7909,7 +7900,7 @@ var ChatSource = (0, import_react64.forwardRef)(function ChatSource2({
     }
   );
 });
-var ChatSources = (0, import_react64.forwardRef)(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
+var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
   const id = (0, import_react64.useId)();
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded, onExpandedChange);
   if (sources.length === 0) return null;
@@ -8029,7 +8020,7 @@ function assignRef7(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorField = (0, import_react65.forwardRef)(function ColorField2({
+var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorField2({
   value,
   defaultValue = "#312c7e",
   onChange,
@@ -8311,7 +8302,7 @@ function assignRef8(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorArea = (0, import_react67.forwardRef)(function ColorArea2({
+var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorArea2({
   value,
   defaultValue = "#312c7e",
   onChange,
@@ -8500,7 +8491,7 @@ function assignRef9(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorSlider = (0, import_react68.forwardRef)(function ColorSlider2({
+var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorSlider2({
   channel,
   value,
   defaultValue = "#312c7e",
@@ -8642,7 +8633,7 @@ var ColorSlider = (0, import_react68.forwardRef)(function ColorSlider2({
 // src/components/ColorPicker/ColorSwatchPicker.tsx
 var import_react69 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var ColorSwatchPicker = (0, import_react69.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
+var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
   const [current, setCurrent] = useControllableState(value, defaultValue ?? "", onChange);
   const refs = (0, import_react69.useRef)([]);
   const items2 = options.map((option) => {