@openwarelabs/ui 0.10.0 → 0.11.0

package/dist/index.js

@@ -3303,7 +3303,7 @@ function ListBoxWithRef({
     );
   };
   const isEmpty = flat.length === 0;
-  const describedBy = [ariaDescribedBy, isEmpty ? emptyId : void 0].filter(Boolean).join(" ") || void 0;
+  const describedBy = ariaDescribedBy;
   return /* @__PURE__ */ jsxs16(
     "div",
     {
@@ -3346,7 +3346,10 @@ function ListBoxWithRef({
             item.options.map(renderOption)
           ] }, `group-${item.label}-${groupIndex}`) : renderOption(item)
         ),
-        isEmpty ? /* @__PURE__ */ jsx25("div", { id: emptyId, className: "ow-listbox__empty", role: "presentation", children: emptyMessage }) : null
+        isEmpty ? (
+          // A listbox holds options, so an empty one says so with one that can't be chosen.
+          /* @__PURE__ */ jsx25("div", { id: emptyId, className: "ow-listbox__empty", role: "option", "aria-disabled": "true", "aria-selected": "false", children: emptyMessage })
+        ) : null
       ]
     }
   );
@@ -4114,9 +4117,9 @@ var DatePicker = /* @__PURE__ */ forwardRef17(function DatePicker2({
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? panelId : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${label}` : void 0,
+        "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+        "aria-describedby": ariaDescribedBy,
         "aria-invalid": isInvalid || void 0,
         disabled,
         className: cx(
@@ -4419,9 +4422,9 @@ var DateRangePicker = /* @__PURE__ */ forwardRef19(function DateRangePicker2({
               "aria-haspopup": "dialog",
               "aria-expanded": isOpen,
               "aria-controls": isOpen ? panelId : void 0,
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledBy,
-              "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+              "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${label}` : void 0,
+              "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+              "aria-describedby": ariaDescribedBy,
               "aria-invalid": isInvalid || void 0,
               disabled,
               className: cx("ow-select", "ow-date-range-picker__trigger", `ow-select--${size2}`, {
@@ -6164,7 +6167,8 @@ function Avatar({ name, src, size: size2 = "md", label, 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__ */ jsx56("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ jsx56(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
+      "data-initials": !showImage && initials ? initials : void 0,
+      children: showImage ? /* @__PURE__ */ jsx56("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ jsx56(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
@@ -6338,11 +6342,23 @@ function VisuallyHidden({ className, ...props }) {
   return /* @__PURE__ */ jsx60("span", { className: cx("ow-visually-hidden", className), ...props });
 }
 
+// src/components/Container/Container.tsx
+import { jsx as jsx61 } from "react/jsx-runtime";
+function Container({ size: size2 = "page", as: Element2 = "div", className, ...props }) {
+  return /* @__PURE__ */ jsx61(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
+}
+
+// src/components/Section/Section.tsx
+import { jsx as jsx62 } from "react/jsx-runtime";
+function Section({ tone = "paper", spacing = "md", size: size2 = "page", as: Element2 = "section", className, children, ...props }) {
+  return /* @__PURE__ */ jsx62(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ jsx62(Container, { size: size2, children }) });
+}
+
 // src/components/Marketing/Marketing.tsx
 import { useRef as useRef33 } from "react";
-import { jsx as jsx61, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 function Chip({ className, ...props }) {
-  return /* @__PURE__ */ jsx61("span", { className: cx("ow-chip", className), ...props });
+  return /* @__PURE__ */ jsx63("span", { className: cx("ow-chip", className), ...props });
 }
 function SectionHeading({
   eyebrow,
@@ -6353,16 +6369,16 @@ function SectionHeading({
   className
 }) {
   return /* @__PURE__ */ jsxs47("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
-    eyebrow ? /* @__PURE__ */ jsx61(Chip, { children: eyebrow }) : null,
-    /* @__PURE__ */ jsx61(Heading, { className: "ow-section-heading__title", children: title }),
-    intro ? /* @__PURE__ */ jsx61("p", { className: "ow-section-heading__intro", children: intro }) : null
+    eyebrow ? /* @__PURE__ */ jsx63(Chip, { children: eyebrow }) : null,
+    /* @__PURE__ */ jsx63(Heading, { className: "ow-section-heading__title", children: title }),
+    intro ? /* @__PURE__ */ jsx63("p", { className: "ow-section-heading__intro", children: intro }) : null
   ] });
 }
 function SiteHeader({ brand, nav, actions, className }) {
   return /* @__PURE__ */ jsxs47("header", { className: cx("ow-site-header", className), children: [
-    /* @__PURE__ */ jsx61("div", { className: "ow-site-header__brand", children: brand }),
-    nav ? /* @__PURE__ */ jsx61("nav", { className: "ow-site-header__nav", children: nav }) : null,
-    actions ? /* @__PURE__ */ jsx61("div", { className: "ow-site-header__actions", children: actions }) : null
+    /* @__PURE__ */ jsx63("div", { className: "ow-site-header__brand", children: brand }),
+    nav ? /* @__PURE__ */ jsx63("nav", { className: "ow-site-header__nav", children: nav }) : null,
+    actions ? /* @__PURE__ */ jsx63("div", { className: "ow-site-header__actions", children: actions }) : null
   ] });
 }
 function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
@@ -6383,23 +6399,40 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
       onPointerMove: track,
       ...props,
       children: [
-        /* @__PURE__ */ jsx61("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
-        interactive ? /* @__PURE__ */ jsx61("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ jsx61("div", { className: "ow-dot-grid__content", children })
+        /* @__PURE__ */ jsx63("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
+        interactive ? /* @__PURE__ */ jsx63("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsx63("div", { className: "ow-dot-grid__content", children })
       ]
     }
   );
 }
 
 // src/components/Prose/Prose.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { forwardRef as forwardRef23, useEffect as useEffect26, useRef as useRef34 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
-  return /* @__PURE__ */ jsx62(
+  const root = useRef34(null);
+  useEffect26(() => {
+    const element = root.current;
+    if (!element) return;
+    for (const scroller of element.querySelectorAll("pre, .ow-table-wrap")) {
+      if (scroller.scrollWidth > scroller.clientWidth && !scroller.hasAttribute("tabindex")) scroller.tabIndex = 0;
+    }
+    for (const box of element.querySelectorAll('li > input[type="checkbox"], li > p > input[type="checkbox"]')) {
+      if (box.labels?.length || box.hasAttribute("aria-label") || box.hasAttribute("aria-labelledby")) continue;
+      const text = box.closest("li")?.textContent?.trim();
+      if (text) box.setAttribute("aria-label", text);
+    }
+  });
+  return /* @__PURE__ */ jsx64(
     Element2,
     {
-      ref,
+      ref: (node) => {
+        root.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       className: cx("ow-prose", `ow-prose--${size2}`, size2 === "md" ? "ow-type-prose" : "ow-type-copy", fullWidth && "ow-prose--full", className),
       ...props,
       children
@@ -6408,10 +6441,10 @@ var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", f
 });
 
 // src/components/TextShimmer/TextShimmer.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function TextShimmer({ children, as = "span", duration = 2, active = true, className }) {
   const Element2 = as;
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx65(
     Element2,
     {
       className: cx("ow-shimmer", active && "ow-shimmer--active", className),
@@ -6424,18 +6457,18 @@ function TextShimmer({ children, as = "span", duration = 2, active = true, class
 // src/components/PromptInput/PromptInput.tsx
 import {
   forwardRef as forwardRef24,
-  useEffect as useEffect26,
+  useEffect as useEffect27,
   useId as useId22,
   useLayoutEffect as useLayoutEffect7,
-  useRef as useRef34,
+  useRef as useRef35,
   useState as useState29
 } from "react";
-import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
 var noAttachments = [];
 var counterFrom = 0.8;
 var announceDelay = 1e3;
 function Glyph({ children }) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx66(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -6455,29 +6488,29 @@ function Glyph({ children }) {
 }
 var sheet = "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z";
 var fold = "M14 2v5a1 1 0 0 0 1 1h5";
-var PaperclipIcon = () => /* @__PURE__ */ jsx64(Glyph, { children: /* @__PURE__ */ jsx64("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
-var StopIcon = () => /* @__PURE__ */ jsx64(Glyph, { children: /* @__PURE__ */ jsx64("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
+var PaperclipIcon = () => /* @__PURE__ */ jsx66(Glyph, { children: /* @__PURE__ */ jsx66("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
+var StopIcon = () => /* @__PURE__ */ jsx66(Glyph, { children: /* @__PURE__ */ jsx66("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
 var fileIcons = {
   image: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx64("path", { d: sheet }),
-    /* @__PURE__ */ jsx64("path", { d: fold }),
-    /* @__PURE__ */ jsx64("circle", { cx: "10", cy: "12", r: "2" }),
-    /* @__PURE__ */ jsx64("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
+    /* @__PURE__ */ jsx66("path", { d: sheet }),
+    /* @__PURE__ */ jsx66("path", { d: fold }),
+    /* @__PURE__ */ jsx66("circle", { cx: "10", cy: "12", r: "2" }),
+    /* @__PURE__ */ jsx66("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
   ] }),
   code: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx64("path", { d: sheet }),
-    /* @__PURE__ */ jsx64("path", { d: fold }),
-    /* @__PURE__ */ jsx64("path", { d: "M10 12.5 8 15l2 2.5" }),
-    /* @__PURE__ */ jsx64("path", { d: "m14 12.5 2 2.5-2 2.5" })
+    /* @__PURE__ */ jsx66("path", { d: sheet }),
+    /* @__PURE__ */ jsx66("path", { d: fold }),
+    /* @__PURE__ */ jsx66("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ jsx66("path", { d: "m14 12.5 2 2.5-2 2.5" })
   ] }),
   text: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx64("path", { d: sheet }),
-    /* @__PURE__ */ jsx64("path", { d: fold }),
-    /* @__PURE__ */ jsx64("path", { d: "M10 9H8" }),
-    /* @__PURE__ */ jsx64("path", { d: "M16 13H8" }),
-    /* @__PURE__ */ jsx64("path", { d: "M16 17H8" })
+    /* @__PURE__ */ jsx66("path", { d: sheet }),
+    /* @__PURE__ */ jsx66("path", { d: fold }),
+    /* @__PURE__ */ jsx66("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ jsx66("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx66("path", { d: "M16 17H8" })
   ] }),
-  file: /* @__PURE__ */ jsx64(FileIcon, { size: 16 })
+  file: /* @__PURE__ */ jsx66(FileIcon, { size: 16 })
 };
 function kindOf({ name, type = "" }) {
   const lower = name.toLowerCase();
@@ -6549,13 +6582,13 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   className
 }, ref) {
   const [text, setText] = useControllableState(value, defaultValue, onChange);
-  const textAreaRef = useRef34(null);
-  const actionRef = useRef34(null);
-  const pickerRef = useRef34(null);
-  const listRef = useRef34(null);
-  const composing = useRef34(false);
-  const dragDepth = useRef34(0);
-  const pendingFocus = useRef34(null);
+  const textAreaRef = useRef35(null);
+  const actionRef = useRef35(null);
+  const pickerRef = useRef35(null);
+  const listRef = useRef35(null);
+  const composing = useRef35(false);
+  const dragDepth = useRef35(0);
+  const pendingFocus = useRef35(null);
   const [isDragging, setIsDragging] = useState29(false);
   const [notice, setNotice] = useState29();
   const [announcement, setAnnouncement] = useState29("");
@@ -6578,7 +6611,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
     if (typeof ref === "function") ref(element);
     else if (ref) ref.current = element;
   }
-  useEffect26(() => {
+  useEffect27(() => {
     const textArea = textAreaRef.current;
     if (!textArea || typeof ResizeObserver === "undefined") return;
     let width = textArea.clientWidth;
@@ -6593,8 +6626,8 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   useLayoutEffect7(() => {
     if (textAreaRef.current) resizeTextArea(textAreaRef.current);
   }, [size2, rows]);
-  const wasStreaming = useRef34(isStreaming);
-  const actionHadFocus = useRef34(false);
+  const wasStreaming = useRef35(isStreaming);
+  const actionHadFocus = useRef35(false);
   if (wasStreaming.current !== isStreaming) {
     actionHadFocus.current = typeof document !== "undefined" && document.activeElement === actionRef.current;
   }
@@ -6612,7 +6645,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
     const next = buttons?.length ? buttons[Math.min(pending.index, buttons.length - 1)] : void 0;
     (next ?? textAreaRef.current)?.focus();
   }, [attachments]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!showCounter || document.activeElement !== textAreaRef.current) return;
     const timer = window.setTimeout(() => {
       setAnnouncement(`${number(remaining)} ${remaining === 1 ? "character" : "characters"} left`);
@@ -6670,7 +6703,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
     event.preventDefault();
     textAreaRef.current?.focus();
   }
-  const attachButton = onAttach ? /* @__PURE__ */ jsx64(Tooltip, { label: "Attach files", children: /* @__PURE__ */ jsx64(
+  const attachButton = onAttach ? /* @__PURE__ */ jsx66(Tooltip, { label: "Attach files", children: /* @__PURE__ */ jsx66(
     Button,
     {
       className: "ow-prompt-input__attach",
@@ -6680,11 +6713,11 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
       "aria-label": multiple ? "Attach files" : "Attach a file",
       disabled,
       onClick: () => pickerRef.current?.click(),
-      children: /* @__PURE__ */ jsx64(PaperclipIcon, {})
+      children: /* @__PURE__ */ jsx66(PaperclipIcon, {})
     }
   ) }) : null;
   const actionLabel = isStreaming ? "Stop" : "Send";
-  const actionButton = /* @__PURE__ */ jsx64(Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsx64(
+  const actionButton = /* @__PURE__ */ jsx66(Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsx66(
     Button,
     {
       ref: actionRef,
@@ -6699,7 +6732,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
         else submit();
         textAreaRef.current?.focus();
       },
-      children: isStreaming ? /* @__PURE__ */ jsx64(StopIcon, {}) : /* @__PURE__ */ jsx64(ArrowUpIcon, { size: 16 })
+      children: isStreaming ? /* @__PURE__ */ jsx66(StopIcon, {}) : /* @__PURE__ */ jsx66(ArrowUpIcon, { size: 16 })
     }
   ) });
   return /* @__PURE__ */ jsxs48(
@@ -6746,12 +6779,12 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
               take(Array.from(event.dataTransfer.files));
             },
             children: [
-              attachments.length ? /* @__PURE__ */ jsx64("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
+              attachments.length ? /* @__PURE__ */ jsx66("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
                 const [base, extension] = splitName(attachment.name);
                 return /* @__PURE__ */ jsxs48("li", { className: "ow-prompt-input__attachment", children: [
                   /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
                     fileIcons[kindOf(attachment)],
-                    attachment.previewUrl ? /* @__PURE__ */ jsx64(
+                    attachment.previewUrl ? /* @__PURE__ */ jsx66(
                       "img",
                       {
                         src: attachment.previewUrl,
@@ -6764,24 +6797,24 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                   ] }),
                   /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__file", children: [
                     /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
-                      /* @__PURE__ */ jsx64("span", { className: "ow-prompt-input__file-base", children: base }),
+                      /* @__PURE__ */ jsx66("span", { className: "ow-prompt-input__file-base", children: base }),
                       extension
                     ] }),
-                    attachment.size !== void 0 ? /* @__PURE__ */ jsx64("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
+                    attachment.size !== void 0 ? /* @__PURE__ */ jsx66("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
                   ] }),
-                  onRemoveAttachment ? /* @__PURE__ */ jsx64(
+                  onRemoveAttachment ? /* @__PURE__ */ jsx66(
                     "button",
                     {
                       type: "button",
                       className: "ow-prompt-input__remove",
                       "aria-label": `Remove ${attachment.name}`,
                       onClick: () => remove(attachment, index),
-                      children: /* @__PURE__ */ jsx64(XIcon, { size: 14 })
+                      children: /* @__PURE__ */ jsx66(XIcon, { size: 14 })
                     }
                   ) : null
                 ] }, attachment.id);
               }) }) : null,
-              /* @__PURE__ */ jsx64(
+              /* @__PURE__ */ jsx66(
                 Textarea,
                 {
                   ref: setTextAreaRef,
@@ -6827,7 +6860,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                   actionButton
                 ] })
               ] }),
-              onAttach ? /* @__PURE__ */ jsx64(
+              onAttach ? /* @__PURE__ */ jsx66(
                 "input",
                 {
                   ref: pickerRef,
@@ -6844,13 +6877,13 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                 }
               ) : null,
               isDragging ? /* @__PURE__ */ jsxs48("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx64(UploadIcon, { size: 16 }),
+                /* @__PURE__ */ jsx66(UploadIcon, { size: 16 }),
                 "Drop to attach"
               ] }) : null
             ]
           }
         ),
-        shownHint ? /* @__PURE__ */ jsx64(
+        shownHint ? /* @__PURE__ */ jsx66(
           "div",
           {
             className: cx("ow-prompt-input__hint", notice && "ow-prompt-input__hint--notice"),
@@ -6859,7 +6892,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
             children: shownHint
           }
         ) : null,
-        /* @__PURE__ */ jsx64("span", { className: "ow-visually-hidden", role: "status", children: announcement })
+        /* @__PURE__ */ jsx66("span", { className: "ow-visually-hidden", role: "status", children: announcement })
       ]
     }
   );
@@ -6867,14 +6900,14 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
 
 // src/components/PromptInput/PromptSuggestion.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 var PromptSuggestion = /* @__PURE__ */ forwardRef25(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
   if (variant === "card") {
     return /* @__PURE__ */ jsxs49("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
-      icon2 ? /* @__PURE__ */ jsx65("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+      icon2 ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
       /* @__PURE__ */ jsxs49("span", { className: "ow-prompt-suggestion__text", children: [
-        /* @__PURE__ */ jsx65("span", { className: "ow-prompt-suggestion__title", children }),
-        description ? /* @__PURE__ */ jsx65("span", { className: "ow-prompt-suggestion__description", children: description }) : null
+        /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__title", children }),
+        description ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__description", children: description }) : null
       ] })
     ] });
   }
@@ -6891,8 +6924,8 @@ var PromptSuggestion = /* @__PURE__ */ forwardRef25(function PromptSuggestion2({
       ),
       ...buttonProps,
       children: [
-        icon2 ? /* @__PURE__ */ jsx65("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
-        /* @__PURE__ */ jsx65("span", { className: "ow-prompt-suggestion__label", children })
+        icon2 ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+        /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__label", children })
       ]
     }
   );
@@ -6907,7 +6940,7 @@ function PromptSuggestions({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx67(
     "div",
     {
       role: "group",
@@ -6926,14 +6959,14 @@ import {
   createContext as createContext8,
   forwardRef as forwardRef26,
   useCallback as useCallback10,
-  useEffect as useEffect27,
+  useEffect as useEffect28,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo12,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState30
 } from "react";
-import { jsx as jsx66, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
 var ChatConversationContext = /* @__PURE__ */ createContext8(null);
 var stickyDistance = 32;
 var defaultCount = (count) => `${count} new`;
@@ -6950,13 +6983,13 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
   className,
   ...props
 }, ref) {
-  const scrollerRef = useRef35(null);
-  const contentRef = useRef35(null);
-  const jumpRef = useRef35(null);
-  const following = useRef35(true);
-  const lastTop = useRef35(0);
-  const ready = useRef35(false);
-  const unseen = useRef35(/* @__PURE__ */ new Set());
+  const scrollerRef = useRef36(null);
+  const contentRef = useRef36(null);
+  const jumpRef = useRef36(null);
+  const following = useRef36(true);
+  const lastTop = useRef36(0);
+  const ready = useRef36(false);
+  const unseen = useRef36(/* @__PURE__ */ new Set());
   const [isFollowing, setIsFollowing] = useState30(true);
   const [newCount, setNewCount] = useState30(0);
   const isEmpty = Children2.toArray(children).length === 0;
@@ -6985,10 +7018,10 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
   );
   useImperativeHandle3(ref, () => ({ scrollToBottom }), [scrollToBottom]);
   useLayoutEffect8(stick, [stick]);
-  useEffect27(() => {
+  useEffect28(() => {
     ready.current = true;
   }, []);
-  useEffect27(() => {
+  useEffect28(() => {
     const scroller = scrollerRef.current;
     const content = contentRef.current;
     if (!scroller || !content || typeof ResizeObserver === "undefined") return void 0;
@@ -7030,7 +7063,7 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
   const jump = usePresence(showJump);
   return /* @__PURE__ */ jsxs50("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
     /* @__PURE__ */ jsxs50("div", { className: "ow-chat-conversation__viewport", children: [
-      /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx68(
         "div",
         {
           ref: scrollerRef,
@@ -7042,17 +7075,17 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
           "aria-labelledby": ariaLabelledBy,
           tabIndex: isEmpty ? void 0 : 0,
           onScroll,
-          children: /* @__PURE__ */ jsx66("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ jsx66(ChatConversationContext.Provider, { value: context, children }) })
+          children: /* @__PURE__ */ jsx68("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ jsx68(ChatConversationContext.Provider, { value: context, children }) })
         }
       ),
-      isEmpty && empty ? /* @__PURE__ */ jsx66("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ jsx66("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
-      jump.mounted ? /* @__PURE__ */ jsx66("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ jsxs50(
+      isEmpty && empty ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
+      jump.mounted ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ jsxs50(
         Button,
         {
           ref: jumpRef,
           size: "sm",
           shape: "pill",
-          startIcon: /* @__PURE__ */ jsx66(ArrowDownIcon, { size: 16 }),
+          startIcon: /* @__PURE__ */ jsx68(ArrowDownIcon, { size: 16 }),
           "aria-label": newCount > 0 ? `${jumpLabel}, ${formatNewCount(newCount)}` : jumpLabel,
           tabIndex: showJump ? void 0 : -1,
           onClick: () => {
@@ -7061,12 +7094,12 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
           },
           children: [
             jumpLabel,
-            newCount > 0 ? /* @__PURE__ */ jsx66("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
+            newCount > 0 ? /* @__PURE__ */ jsx68("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
           ]
         }
       ) }) : null
     ] }),
-    footer != null && footer !== false ? /* @__PURE__ */ jsx66("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ jsx66("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
+    footer != null && footer !== false ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
   ] });
 });
 
@@ -7074,16 +7107,16 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
 import {
   forwardRef as forwardRef27,
   useContext as useContext10,
-  useEffect as useEffect28,
+  useEffect as useEffect29,
   useId as useId23,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef36,
+  useRef as useRef37,
   useState as useState31
 } from "react";
-import { Fragment as Fragment10, jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
 function lucide(paths) {
   return function Icon({ size: size2 = 16, strokeWidth = 2, ...props }) {
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx69(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -7105,48 +7138,48 @@ function lucide(paths) {
 }
 var BotIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67("path", { d: "M12 8V4H8" }),
-    /* @__PURE__ */ jsx67("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
-    /* @__PURE__ */ jsx67("path", { d: "M2 14h2" }),
-    /* @__PURE__ */ jsx67("path", { d: "M20 14h2" }),
-    /* @__PURE__ */ jsx67("path", { d: "M15 13v2" }),
-    /* @__PURE__ */ jsx67("path", { d: "M9 13v2" })
+    /* @__PURE__ */ jsx69("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ jsx69("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ jsx69("path", { d: "M9 13v2" })
   ] })
 );
 var RotateCcwIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ jsx67("path", { d: "M3 3v5h5" })
+    /* @__PURE__ */ jsx69("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx69("path", { d: "M3 3v5h5" })
   ] })
 );
 var ThumbsUpIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67("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__ */ jsx67("path", { d: "M7 10v12" })
+    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "M7 10v12" })
   ] })
 );
 var ThumbsDownIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67("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__ */ jsx67("path", { d: "M17 14V2" })
+    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "M17 14V2" })
   ] })
 );
 var PencilIcon = /* @__PURE__ */ lucide(
   /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67("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__ */ jsx67("path", { d: "m15 5 4 4" })
+    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "m15 5 4 4" })
   ] })
 );
 var botSizes = { sm: 14, md: 16, lg: 18 };
 function ChatAgentAvatar({ size: size2 = "md", label, className }) {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx69(
     "span",
     {
       className: cx("ow-chat-avatar", size2 !== "md" && `ow-chat-avatar--${size2}`, className),
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      children: /* @__PURE__ */ jsx67(BotIcon, { size: botSizes[size2] })
+      children: /* @__PURE__ */ jsx69(BotIcon, { size: botSizes[size2] })
     }
   );
 }
@@ -7171,10 +7204,10 @@ function formattersFor(locale) {
 function MessageTime({ time, locale }) {
   const date = typeof time === "string" ? new Date(time) : time;
   if (Number.isNaN(date.getTime())) {
-    return /* @__PURE__ */ jsx67("time", { className: "ow-chat-message__time", children: String(time) });
+    return /* @__PURE__ */ jsx69("time", { className: "ow-chat-message__time", children: String(time) });
   }
   const { short, full } = formattersFor(locale);
-  return /* @__PURE__ */ jsx67("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
+  return /* @__PURE__ */ jsx69("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
 }
 var skipCaret = '[aria-hidden="true"], .ow-visually-hidden';
 function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
@@ -7227,14 +7260,14 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
   const conversation = useContext10(ChatConversationContext);
   const entering = useChatEntrance();
   const id = useId23();
-  const bodyRef = useRef36(null);
-  const contentRef = useRef36(null);
-  const caretRef = useRef36(null);
+  const bodyRef = useRef37(null);
+  const contentRef = useRef37(null);
+  const caretRef = useRef37(null);
   const streaming = status === "streaming";
-  useEffect28(() => conversation?.register(id), [conversation, id]);
+  useEffect29(() => conversation?.register(id), [conversation, id]);
   useStreamingCaret(bodyRef, contentRef, caretRef, streaming && from !== "system");
   if (from === "system") {
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx69(
       "div",
       {
         ref,
@@ -7243,15 +7276,15 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
         children: /* @__PURE__ */ jsxs51("span", { className: "ow-chat-message__system-text", children: [
           children,
           time !== void 0 ? /* @__PURE__ */ jsxs51(Fragment10, { children: [
-            /* @__PURE__ */ jsx67("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ jsx67(MessageTime, { time, locale })
+            /* @__PURE__ */ jsx69("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsx69(MessageTime, { time, locale })
           ] }) : null
         ] })
       }
     );
   }
   const isUser = from === "user";
-  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ jsx67(ChatAgentAvatar, {});
+  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ jsx69(ChatAgentAvatar, {});
   const hasHeader = name != null || time !== void 0;
   const errorText = error ?? (isUser ? "Couldn't send this message." : "The answer didn't finish.");
   return /* @__PURE__ */ jsxs51(
@@ -7270,22 +7303,22 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
       "aria-busy": streaming || void 0,
       ...props,
       children: [
-        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx67("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx69("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
         /* @__PURE__ */ jsxs51("div", { className: "ow-chat-message__main", children: [
           hasHeader ? /* @__PURE__ */ jsxs51("div", { className: "ow-chat-message__header", children: [
-            name != null ? /* @__PURE__ */ jsx67("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ jsx67("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
-            time !== void 0 ? /* @__PURE__ */ jsx67(MessageTime, { time, locale }) : null
-          ] }) : /* @__PURE__ */ jsx67("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+            name != null ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+            time !== void 0 ? /* @__PURE__ */ jsx69(MessageTime, { time, locale }) : null
+          ] }) : /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
           /* @__PURE__ */ jsxs51("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
-            /* @__PURE__ */ jsx67("div", { ref: contentRef, className: "ow-chat-message__content", children }),
-            streaming ? /* @__PURE__ */ jsx67("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
+            /* @__PURE__ */ jsx69("div", { ref: contentRef, className: "ow-chat-message__content", children }),
+            streaming ? /* @__PURE__ */ jsx69("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
           ] }),
           status === "error" ? /* @__PURE__ */ jsxs51("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
-            /* @__PURE__ */ jsx67(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
-            /* @__PURE__ */ jsx67("span", { className: "ow-chat-message__error-text", children: errorText }),
-            onRetry ? /* @__PURE__ */ jsx67(Button, { size: "sm", startIcon: /* @__PURE__ */ jsx67(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
+            /* @__PURE__ */ jsx69(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
+            /* @__PURE__ */ jsx69("span", { className: "ow-chat-message__error-text", children: errorText }),
+            onRetry ? /* @__PURE__ */ jsx69(Button, { size: "sm", startIcon: /* @__PURE__ */ jsx69(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
           ] }) : null,
-          actions && !streaming ? /* @__PURE__ */ jsx67("div", { className: "ow-chat-message__actions", children: actions }) : null
+          actions && !streaming ? /* @__PURE__ */ jsx69("div", { className: "ow-chat-message__actions", children: actions }) : null
         ] })
       ]
     }
@@ -7294,11 +7327,11 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
 var defaultLabels = { copy: "Copy", copied: "Copied", edit: "Edit", retry: "Retry", good: "Good response", bad: "Bad response" };
 function CopyAction({ text, label, copiedLabel }) {
   const [copied, setCopied] = useState31(false);
-  const timer = useRef36(0);
-  useEffect28(() => () => window.clearTimeout(timer.current), []);
+  const timer = useRef37(0);
+  useEffect29(() => () => window.clearTimeout(timer.current), []);
   const current = copied ? copiedLabel : label;
   return /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx67(Tooltip, { label: current, children: /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx69(Tooltip, { label: current, children: /* @__PURE__ */ jsx69(
       Button,
       {
         variant: "ghost",
@@ -7314,12 +7347,12 @@ function CopyAction({ text, label, copiedLabel }) {
           }
         },
         children: /* @__PURE__ */ jsxs51("span", { className: "ow-chat-actions__copy-icon", children: [
-          /* @__PURE__ */ jsx67(CopyIcon, { size: 16 }),
-          /* @__PURE__ */ jsx67(CheckIcon, { size: 16 })
+          /* @__PURE__ */ jsx69(CopyIcon, { size: 16 }),
+          /* @__PURE__ */ jsx69(CheckIcon, { size: 16 })
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx67("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+    /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
   ] });
 }
 function ChatMessageActions({
@@ -7338,7 +7371,7 @@ function ChatMessageActions({
   const [current, setCurrent] = useControllableState(rating, defaultRating, onRate);
   const rate = (value, label, Icon) => {
     const pressed = current === value;
-    return /* @__PURE__ */ jsx67(Tooltip, { label, children: /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx69(Tooltip, { label, children: /* @__PURE__ */ jsx69(
       ToggleButton,
       {
         variant: "ghost",
@@ -7348,14 +7381,14 @@ function ChatMessageActions({
         pressed,
         className: "ow-chat-actions__rate",
         onPressedChange: () => setCurrent(pressed ? null : value),
-        children: /* @__PURE__ */ jsx67(Icon, { size: 16 })
+        children: /* @__PURE__ */ jsx69(Icon, { size: 16 })
       }
     ) });
   };
   return /* @__PURE__ */ jsxs51(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
-    text !== void 0 ? /* @__PURE__ */ jsx67(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
-    onEdit ? /* @__PURE__ */ jsx67(Tooltip, { label: words.edit, children: /* @__PURE__ */ jsx67(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ jsx67(PencilIcon, { size: 16 }) }) }) : null,
-    onRetry ? /* @__PURE__ */ jsx67(Tooltip, { label: words.retry, children: /* @__PURE__ */ jsx67(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ jsx67(RotateCcwIcon, { size: 16 }) }) }) : null,
+    text !== void 0 ? /* @__PURE__ */ jsx69(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
+    onEdit ? /* @__PURE__ */ jsx69(Tooltip, { label: words.edit, children: /* @__PURE__ */ jsx69(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ jsx69(PencilIcon, { size: 16 }) }) }) : null,
+    onRetry ? /* @__PURE__ */ jsx69(Tooltip, { label: words.retry, children: /* @__PURE__ */ jsx69(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ jsx69(RotateCcwIcon, { size: 16 }) }) }) : null,
     onRate ? /* @__PURE__ */ jsxs51(Fragment10, { children: [
       rate("up", words.good, ThumbsUpIcon),
       rate("down", words.bad, ThumbsDownIcon)
@@ -7365,31 +7398,31 @@ function ChatMessageActions({
 }
 
 // src/components/Chat/ChatLoader.tsx
-import { jsx as jsx68, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
 function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2026", className }) {
   const entering = useChatEntrance();
-  const indicator = label != null ? /* @__PURE__ */ jsx68(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ jsxs52("span", { className: "ow-chat-loader__dots", children: [
-    /* @__PURE__ */ jsx68("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx68("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx68("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx68("span", { className: "ow-visually-hidden", children: srLabel })
+  const indicator = label != null ? /* @__PURE__ */ jsx70(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ jsxs52("span", { className: "ow-chat-loader__dots", children: [
+    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx70("span", { className: "ow-visually-hidden", children: srLabel })
   ] });
   if (inline) {
-    return /* @__PURE__ */ jsx68("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
+    return /* @__PURE__ */ jsx70("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
   }
-  const avatarNode = avatar === void 0 ? /* @__PURE__ */ jsx68(ChatAgentAvatar, {}) : avatar;
+  const avatarNode = avatar === void 0 ? /* @__PURE__ */ jsx70(ChatAgentAvatar, {}) : avatar;
   return /* @__PURE__ */ jsxs52("div", { role: "status", className: cx("ow-chat-message", "ow-chat-message--assistant", "ow-chat-loader", entering && "ow-chat-loader--enter", className), children: [
-    avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+    avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx70("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
     /* @__PURE__ */ jsxs52("div", { className: "ow-chat-message__main", children: [
-      name != null ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ jsx68("span", { className: "ow-chat-message__name", children: name }) }) : null,
-      /* @__PURE__ */ jsx68("div", { className: "ow-chat-loader__line", children: indicator })
+      name != null ? /* @__PURE__ */ jsx70("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ jsx70("span", { className: "ow-chat-message__name", children: name }) }) : null,
+      /* @__PURE__ */ jsx70("div", { className: "ow-chat-loader__line", children: indicator })
     ] })
   ] });
 }
 
 // src/components/ChatTool/ChatTool.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect29, useId as useId24, useRef as useRef37, useState as useState32 } from "react";
-import { Fragment as Fragment11, jsx as jsx69, jsxs as jsxs53 } from "react/jsx-runtime";
+import { forwardRef as forwardRef28, useEffect as useEffect30, useId as useId24, useRef as useRef38, useState as useState32 } from "react";
+import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs53 } from "react/jsx-runtime";
 var statusWords = {
   pending: "Not started",
   running: "Running",
@@ -7399,7 +7432,7 @@ var statusWords = {
   cancelled: "Cancelled"
 };
 function SlashIcon() {
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx71(
     "svg",
     {
       width: 12,
@@ -7411,7 +7444,7 @@ function SlashIcon() {
       strokeLinecap: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx69("path", { d: "M7 17 17 7" })
+      children: /* @__PURE__ */ jsx71("path", { d: "M7 17 17 7" })
     }
   );
 }
@@ -7429,17 +7462,17 @@ function ExclamationIcon() {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ jsx69("path", { d: "M12 5v9" }),
-        /* @__PURE__ */ jsx69("path", { d: "M12 19h.01" })
+        /* @__PURE__ */ jsx71("path", { d: "M12 5v9" }),
+        /* @__PURE__ */ jsx71("path", { d: "M12 19h.01" })
       ]
     }
   );
 }
 function ChatStatusMarker({ status, icon: icon2 }) {
   const showsIcon = Boolean(icon2) && (status === "success" || status === "pending");
-  const glyph = status === "running" ? /* @__PURE__ */ jsx69(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ jsx69(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ jsx69(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ jsx69(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ jsx69(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
+  const glyph = status === "running" ? /* @__PURE__ */ jsx71(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ jsx71(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ jsx71(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ jsx71(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ jsx71(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
   return /* @__PURE__ */ jsxs53("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
-    /* @__PURE__ */ jsx69("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ jsx71("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
     /* @__PURE__ */ jsxs53("span", { className: "ow-visually-hidden", children: [
       statusWords[status],
       ": "
@@ -7463,7 +7496,7 @@ function formatDuration(ms, locale) {
   return rest ? `${number(hours)} h ${number(rest)} min` : `${number(hours)} h`;
 }
 function ChatDuration({ ms, locale, className }) {
-  return /* @__PURE__ */ jsx69("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
+  return /* @__PURE__ */ jsx71("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
 }
 function useStatusExpansion({
   expanded,
@@ -7474,9 +7507,9 @@ function useStatusExpansion({
   initial = wantsOpen
 }) {
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded ?? initial, onExpandedChange);
-  const touched = useRef37(false);
-  const previous = useRef37(wantsOpen);
-  useEffect29(() => {
+  const touched = useRef38(false);
+  const previous = useRef38(wantsOpen);
+  useEffect30(() => {
     if (previous.current === wantsOpen) return;
     previous.current = wantsOpen;
     if (expanded !== void 0) return;
@@ -7502,11 +7535,11 @@ function ChatCollapse({
   className,
   children
 }) {
-  const ref = useRef37(null);
-  useEffect29(() => {
+  const ref = useRef38(null);
+  useEffect30(() => {
     if (ref.current) ref.current.inert = !open;
   }, [open]);
-  return /* @__PURE__ */ jsx69("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ jsx69("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ jsx69("div", { className, children }) }) });
+  return /* @__PURE__ */ jsx71("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ jsx71("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ jsx71("div", { className, children }) }) });
 }
 var codeMaxHeight = 280;
 function formatInput(input) {
@@ -7540,10 +7573,10 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
   ...props
 }, ref) {
   const id = useId24();
-  const rootRef = useRef37(null);
-  const triggerRef = useRef37(null);
-  const messageRef = useRef37(null);
-  const decided = useRef37(false);
+  const rootRef = useRef38(null);
+  const triggerRef = useRef38(null);
+  const messageRef = useRef38(null);
+  const decided = useRef38(false);
   const [announcement, setAnnouncement] = useState32("");
   const needsApproval = status === "approval";
   const [isOpen, toggle] = useStatusExpansion({
@@ -7557,7 +7590,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
   const hasError = error !== void 0 && error !== null && error !== false && error !== "";
   const hasDetails = hasInput || hasOutput || hasError;
   const hasMeta = Boolean(summary) || duration !== void 0;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!needsApproval) {
       setAnnouncement("");
       return;
@@ -7568,7 +7601,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
     }, 150);
     return () => window.clearTimeout(timer);
   }, [needsApproval]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (needsApproval || !decided.current) return;
     decided.current = false;
     const active = document.activeElement;
@@ -7576,20 +7609,20 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
   }, [needsApproval]);
   const running = status === "running";
   const header = /* @__PURE__ */ jsxs53(Fragment11, { children: [
-    /* @__PURE__ */ jsx69(ChatStatusMarker, { status }),
-    icon2 ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
+    /* @__PURE__ */ jsx71(ChatStatusMarker, { status }),
+    icon2 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
     /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__main", children: [
       /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__heading", children: [
-        /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ jsx69(TextShimmer, { children: title }) : title }),
-        name ? /* @__PURE__ */ jsx69(Code, { className: "ow-chat-tool__name", children: name }) : null
+        /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ jsx71(TextShimmer, { children: title }) : title }),
+        name ? /* @__PURE__ */ jsx71(Code, { className: "ow-chat-tool__name", children: name }) : null
       ] }),
       hasMeta ? /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__meta", children: [
-        summary ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__summary", children: summary }) : null,
-        summary && duration !== void 0 ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
-        duration !== void 0 ? /* @__PURE__ */ jsx69(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
+        summary ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__summary", children: summary }) : null,
+        summary && duration !== void 0 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
+        duration !== void 0 ? /* @__PURE__ */ jsx71(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
       ] }) : null
     ] }),
-    hasDetails ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx69(ChevronRightIcon, { size: 14 }) }) : null
+    hasDetails ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx71(ChevronRightIcon, { size: 14 }) }) : null
   ] });
   return /* @__PURE__ */ jsxs53(
     "div",
@@ -7606,7 +7639,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
       tabIndex: hasDetails ? void 0 : -1,
       ...props,
       children: [
-        hasDetails ? /* @__PURE__ */ jsx69(
+        hasDetails ? /* @__PURE__ */ jsx71(
           "button",
           {
             ref: triggerRef,
@@ -7618,28 +7651,28 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
             onClick: toggle,
             children: header
           }
-        ) : /* @__PURE__ */ jsx69("div", { className: "ow-chat-tool__header", children: header }),
+        ) : /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__header", children: header }),
         hasDetails ? /* @__PURE__ */ jsxs53(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
           hasInput ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__label", children: "Input" }),
-            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ jsx69(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ jsx69(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
+            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Input" }),
+            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ jsx71(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ jsx71(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
           ] }) : null,
           hasOutput ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__label", children: "Output" }),
-            typeof output === "string" ? /* @__PURE__ */ jsx69(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ jsx69("div", { className: "ow-chat-tool__output", children: output })
+            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Output" }),
+            typeof output === "string" ? /* @__PURE__ */ jsx71(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__output", children: output })
           ] }) : null,
           hasError ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx69("span", { className: "ow-chat-tool__label", children: "Error" }),
-            /* @__PURE__ */ jsx69("div", { className: "ow-chat-tool__error", children: error })
+            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Error" }),
+            /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__error", children: error })
           ] }) : null
         ] }) : null,
         needsApproval ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
-          /* @__PURE__ */ jsx69("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ jsxs53(Fragment11, { children: [
+          /* @__PURE__ */ jsx71("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ jsxs53(Fragment11, { children: [
             "Wants to run ",
-            /* @__PURE__ */ jsx69(Code, { children: name })
+            /* @__PURE__ */ jsx71(Code, { children: name })
           ] }) : "Wants to go ahead") }),
           /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__actions", children: [
-            /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx71(
               Button,
               {
                 variant: "primary",
@@ -7651,7 +7684,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
                 children: approveLabel
               }
             ),
-            /* @__PURE__ */ jsx69(
+            /* @__PURE__ */ jsx71(
               Button,
               {
                 size: "sm",
@@ -7664,7 +7697,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
             )
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx71("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
       ]
     }
   );
@@ -7672,7 +7705,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
 
 // src/components/ChainOfThought/ChainOfThought.tsx
 import { forwardRef as forwardRef29, useId as useId25 } from "react";
-import { jsx as jsx70, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs54 } from "react/jsx-runtime";
 var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
 var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   steps = [],
@@ -7705,9 +7738,9 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   const heading = label ?? (running ? "Thinking\u2026" : duration !== void 0 ? `Thought for ${formatDuration(duration, locale)}` : "Reasoning");
   const count = steps.length > 0 ? running ? `${finished} of ${plural(steps.length, "step")}` : plural(steps.length, "step") : null;
   const headerText = /* @__PURE__ */ jsxs54("span", { className: "ow-chat-toggle__text", children: [
-    /* @__PURE__ */ jsx70("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ jsx70(TextShimmer, { children: heading }) : heading }),
+    /* @__PURE__ */ jsx72("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ jsx72(TextShimmer, { children: heading }) : heading }),
     count ? /* @__PURE__ */ jsxs54("span", { className: "ow-chat-toggle__meta", children: [
-      /* @__PURE__ */ jsx70("span", { "aria-hidden": "true", children: "\xB7 " }),
+      /* @__PURE__ */ jsx72("span", { "aria-hidden": "true", children: "\xB7 " }),
       count,
       failed > 0 ? /* @__PURE__ */ jsxs54("span", { className: "ow-chain-of-thought__failed", children: [
         ", ",
@@ -7718,16 +7751,16 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   ] });
   return /* @__PURE__ */ jsxs54("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
     hasBody ? /* @__PURE__ */ jsxs54("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
-      /* @__PURE__ */ jsx70("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx70(ChevronRightIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx72("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx72(ChevronRightIcon, { size: 14 }) }),
       headerText
-    ] }) : /* @__PURE__ */ jsx70("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
+    ] }) : /* @__PURE__ */ jsx72("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
     hasBody ? /* @__PURE__ */ jsxs54(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
-      hasReasoning ? /* @__PURE__ */ jsx70("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
-      steps.length > 0 ? /* @__PURE__ */ jsx70("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ jsxs54("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
-        /* @__PURE__ */ jsx70(ChatStatusMarker, { status: step.status, icon: step.icon }),
+      hasReasoning ? /* @__PURE__ */ jsx72("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
+      steps.length > 0 ? /* @__PURE__ */ jsx72("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ jsxs54("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
+        /* @__PURE__ */ jsx72(ChatStatusMarker, { status: step.status, icon: step.icon }),
         /* @__PURE__ */ jsxs54("div", { className: "ow-chain-of-thought__step-body", children: [
-          /* @__PURE__ */ jsx70("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ jsx70(TextShimmer, { children: step.title }) : step.title }),
-          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ jsx70("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
+          /* @__PURE__ */ jsx72("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ jsx72(TextShimmer, { children: step.title }) : step.title }),
+          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ jsx72("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
         ] })
       ] }, step.id)) }) : null
     ] }) : null
@@ -7735,8 +7768,8 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
 });
 
 // src/components/ChatSource/ChatSource.tsx
-import { forwardRef as forwardRef30, useCallback as useCallback11, useEffect as useEffect30, useId as useId26, useRef as useRef38, useState as useState33 } from "react";
-import { Fragment as Fragment12, jsx as jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30, useCallback as useCallback11, useEffect as useEffect31, useId as useId26, useRef as useRef39, useState as useState33 } from "react";
+import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs55 } from "react/jsx-runtime";
 var openDelay = 250;
 var closeDelay = 150;
 var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
@@ -7755,11 +7788,11 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
   className
 }, ref) {
   const id = useId26();
-  const wrapperRef = useRef38(null);
-  const chipRef = useRef38(null);
-  const cardRef = useRef38(null);
-  const timer = useRef38(0);
-  const pointer = useRef38("mouse");
+  const wrapperRef = useRef39(null);
+  const chipRef = useRef39(null);
+  const cardRef = useRef39(null);
+  const timer = useRef39(0);
+  const pointer = useRef39("mouse");
   const [open, setOpen] = useState33(false);
   const { mounted, state } = usePresence(open);
   const style = useFloating({ open: mounted, anchorRef: chipRef, floatingRef: cardRef, placement: "bottom-start", offset: 6, maxHeight: 360 });
@@ -7773,7 +7806,7 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
     setOpen(false);
   }, []);
   useDismiss(open, [wrapperRef], close);
-  useEffect30(() => () => window.clearTimeout(timer.current), []);
+  useEffect31(() => () => window.clearTimeout(timer.current), []);
   const name = ariaLabel ?? (index !== void 0 ? `Source ${index}` : label ?? "Source");
   const describedBy = [`${id}-title`, source ? `${id}-source` : null, snippet ? `${id}-snippet` : null].filter(Boolean).join(" ");
   const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
@@ -7805,7 +7838,7 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
       onClick?.(event);
     }
   };
-  const chipText = /* @__PURE__ */ jsx71("span", { className: "ow-chat-source__chip-text", children: index ?? label });
+  const chipText = /* @__PURE__ */ jsx73("span", { className: "ow-chat-source__chip-text", children: index ?? label });
   return /* @__PURE__ */ jsxs55(
     "span",
     {
@@ -7818,19 +7851,19 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
         if (event.pointerType === "mouse") schedule(false, closeDelay);
       },
       children: [
-        href ? /* @__PURE__ */ jsx71("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ jsx71("button", { type: "button", ...chipProps, children: chipText }),
+        href ? /* @__PURE__ */ jsx73("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ jsx73("button", { type: "button", ...chipProps, children: chipText }),
         /* @__PURE__ */ jsxs55("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
           /* @__PURE__ */ jsxs55("span", { className: "ow-chat-source-card__header", children: [
-            icon2 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
-            /* @__PURE__ */ jsx71("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
+            icon2 ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
+            /* @__PURE__ */ jsx73("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
           ] }),
-          source ? /* @__PURE__ */ jsx71("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
-          snippet ? /* @__PURE__ */ jsx71("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
+          source ? /* @__PURE__ */ jsx73("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
+          snippet ? /* @__PURE__ */ jsx73("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
           href ? (
             // The chip is the same link, so this one stays out of the tab order.
             /* @__PURE__ */ jsxs55("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
               openLabel,
-              /* @__PURE__ */ jsx71(ArrowUpRightIcon, { size: 13 })
+              /* @__PURE__ */ jsx73(ArrowUpRightIcon, { size: 13 })
             ] })
           ) : null
         ] })
@@ -7844,28 +7877,28 @@ var ChatSources = /* @__PURE__ */ forwardRef30(function ChatSources2({ sources,
   if (sources.length === 0) return null;
   return /* @__PURE__ */ jsxs55("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
     /* @__PURE__ */ jsxs55("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
-      /* @__PURE__ */ jsx71("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx71(ChevronRightIcon, { size: 14 }) }),
-      /* @__PURE__ */ jsx71("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
+      /* @__PURE__ */ jsx73("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(ChevronRightIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx73("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
     ] }),
-    /* @__PURE__ */ jsx71(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ jsx71("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
+    /* @__PURE__ */ jsx73(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ jsx73("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
       const content = /* @__PURE__ */ jsxs55(Fragment12, { children: [
         /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__lead", children: [
           item.index !== void 0 ? /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__index", children: [
-            /* @__PURE__ */ jsx71("span", { className: "ow-visually-hidden", children: "Source " }),
+            /* @__PURE__ */ jsx73("span", { className: "ow-visually-hidden", children: "Source " }),
             item.index
           ] }) : null,
-          item.icon || item.index === void 0 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx71(FileIcon, { size: 15 }) }) : null
+          item.icon || item.index === void 0 ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx73(FileIcon, { size: 15 }) }) : null
         ] }),
         /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__text", children: [
-          /* @__PURE__ */ jsx71("span", { className: "ow-chat-sources__title", children: item.title }),
-          item.source ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-sources__source", children: item.source }) : null
+          /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__title", children: item.title }),
+          item.source ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__source", children: item.source }) : null
         ] }),
         item.href && item.external ? /* @__PURE__ */ jsxs55(Fragment12, { children: [
-          /* @__PURE__ */ jsx71("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ jsx71(ArrowUpRightIcon, { size: 14 }) }),
-          /* @__PURE__ */ jsx71("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+          /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(ArrowUpRightIcon, { size: 14 }) }),
+          /* @__PURE__ */ jsx73("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
         ] }) : null
       ] });
-      return /* @__PURE__ */ jsx71("li", { children: item.href ? /* @__PURE__ */ jsx71(
+      return /* @__PURE__ */ jsx73("li", { children: item.href ? /* @__PURE__ */ jsx73(
         "a",
         {
           href: item.href,
@@ -7873,15 +7906,15 @@ var ChatSources = /* @__PURE__ */ forwardRef30(function ChatSources2({ sources,
           ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
           children: content
         }
-      ) : /* @__PURE__ */ jsx71("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
+      ) : /* @__PURE__ */ jsx73("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
     }) }) })
   ] });
 });
 
 // src/components/ColorPicker/ColorPicker.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback12, useEffect as useEffect31, useId as useId27, useRef as useRef39, useState as useState34 } from "react";
+import { forwardRef as forwardRef31, useCallback as useCallback12, useEffect as useEffect32, useId as useId27, useRef as useRef40, useState as useState34 } from "react";
 import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
-import { Fragment as Fragment13, jsx as jsx72, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs56 } from "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(/^#/, "");
@@ -7898,9 +7931,9 @@ function ColorPicker({
 }) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
   const [canPick, setCanPick] = useState34(false);
-  const rootRef = useRef39(null);
-  useEffect31(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
-  useEffect31(() => {
+  const rootRef = useRef40(null);
+  useEffect32(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
+  useEffect32(() => {
     const names = { saturation: "Colour", hue: "Hue", alpha: "Opacity" };
     for (const [part, label] of Object.entries(names)) {
       rootRef.current?.querySelector(`.react-colorful__${part} .react-colorful__interactive`)?.setAttribute("aria-label", label);
@@ -7917,12 +7950,12 @@ function ColorPicker({
     }
   }
   return /* @__PURE__ */ jsxs56("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
-    /* @__PURE__ */ jsx72(Picker, { color, onChange: change }),
+    /* @__PURE__ */ jsx74(Picker, { color, onChange: change }),
     showInput || eyeDropper && canPick ? /* @__PURE__ */ jsxs56("div", { className: "ow-color-picker__row", children: [
-      eyeDropper && canPick ? /* @__PURE__ */ jsx72("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ jsx72(PipetteIcon, { size: 15 }) }) : null,
+      eyeDropper && canPick ? /* @__PURE__ */ jsx74("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ jsx74(PipetteIcon, { size: 15 }) }) : null,
       showInput ? /* @__PURE__ */ jsxs56("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
-        /* @__PURE__ */ jsx72("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
-        /* @__PURE__ */ jsx72(
+        /* @__PURE__ */ jsx74("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ jsx74(
           HexColorInput,
           {
             className: "ow-input-group__input",
@@ -7934,11 +7967,11 @@ function ColorPicker({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx72("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+      /* @__PURE__ */ jsx74("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
     ] }) : null,
-    swatches?.length ? /* @__PURE__ */ jsx72("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+    swatches?.length ? /* @__PURE__ */ jsx74("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
       const swatchValue = swatchColor(swatch);
-      return /* @__PURE__ */ jsx72(
+      return /* @__PURE__ */ jsx74(
         "button",
         {
           type: "button",
@@ -7975,8 +8008,8 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
 }, ref) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
   const [isOpen, setOpen] = useState34(false);
-  const triggerRef = useRef39(null);
-  const panelRef = useRef39(null);
+  const triggerRef = useRef40(null);
+  const panelRef = useRef40(null);
   const panelId = useId27();
   const { mounted, state } = usePresence(isOpen);
   const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, offset: 6, maxHeight: 640 });
@@ -7985,7 +8018,7 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
     if (reason !== "outside") triggerRef.current?.focus();
   }, []);
   useDismiss(isOpen, [panelRef, triggerRef], close);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!isOpen) return void 0;
     const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
     return () => cancelAnimationFrame(frame);
@@ -8003,9 +8036,9 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? panelId : void 0,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": [`${panelId}-value`, ariaDescribedBy].filter(Boolean).join(" "),
+        "aria-label": ariaLabel && !ariaLabelledBy ? `${ariaLabel}, ${color.toUpperCase()}` : void 0,
+        "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${panelId}-value` : void 0,
+        "aria-describedby": ariaDescribedBy,
         "aria-invalid": isInvalid || void 0,
         disabled,
         className: cx(
@@ -8023,13 +8056,13 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
           }
         },
         children: [
-          /* @__PURE__ */ jsx72("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx72("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
-          /* @__PURE__ */ jsx72(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ jsx74("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx74("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ jsx74(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ jsx72(
+    mounted ? /* @__PURE__ */ jsx74(
       "div",
       {
         ref: panelRef,
@@ -8043,17 +8076,17 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
         onKeyDown: (event) => {
           if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
         },
-        children: /* @__PURE__ */ jsx72(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+        children: /* @__PURE__ */ jsx74(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
       }
     ) : null
   ] });
 });
 
 // src/components/ColorPicker/ColorArea.tsx
-import { forwardRef as forwardRef32, useRef as useRef41, useState as useState36 } from "react";
+import { forwardRef as forwardRef32, useRef as useRef42, useState as useState36 } from "react";
 
 // src/components/ColorPicker/color.ts
-import { useCallback as useCallback13, useReducer, useRef as useRef40, useState as useState35 } from "react";
+import { useCallback as useCallback13, useReducer, useRef as useRef41, useState as useState35 } from "react";
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 function parseHex(color) {
   let hex = color.trim().replace(/^#/, "");
@@ -8130,7 +8163,7 @@ var hslModel = {
 var fallback = { r: 0, g: 0, b: 0, a: 1 };
 function useColorModel(value, defaultValue, onChange, model, { hue, alpha = false } = {}) {
   const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const memory = useRef40(null);
+  const memory = useRef41(null);
   const [, rerender] = useReducer((n) => n + 1, 0);
   const incoming = normalizeHex(color);
   if (!memory.current || memory.current.hex !== incoming || memory.current.model !== model) {
@@ -8234,7 +8267,7 @@ var hueHex = (h) => toHex(hsvToRgb({ h, s: 100, v: 100, a: 1 }));
 var hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";
 
 // src/components/ColorPicker/ColorArea.tsx
-import { jsx as jsx73, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs57 } from "react/jsx-runtime";
 var size = (length) => typeof length === "number" ? `${length}px` : length;
 function assignRef8(ref, value) {
   if (typeof ref === "function") ref(value);
@@ -8258,8 +8291,8 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
   className
 }, ref) {
   const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue, onChange, hsvModel, { hue });
-  const rootRef = useRef41(null);
-  const inputs = useRef41({ x: null, y: null });
+  const rootRef = useRef42(null);
+  const inputs = useRef42({ x: null, y: null });
   const [axis, setAxis] = useState36("x");
   const isRtl = () => rootRef.current ? getComputedStyle(rootRef.current).direction === "rtl" : false;
   const end = () => onChangeEnd?.(latest());
@@ -8315,7 +8348,7 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
   const saturation = `Saturation ${percent.format(hsv.s / 100)}`;
   const brightness = `brightness ${percent.format(hsv.v / 100)}`;
   const colorName = describeColor(rgba);
-  const input = (which) => /* @__PURE__ */ jsx73(
+  const input = (which) => /* @__PURE__ */ jsx75(
     "input",
     {
       ref: (element) => {
@@ -8374,15 +8407,15 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
             ]
           }
         ),
-        name ? /* @__PURE__ */ jsx73("input", { type: "hidden", name, value: hex }) : null
+        name ? /* @__PURE__ */ jsx75("input", { type: "hidden", name, value: hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSlider.tsx
-import { forwardRef as forwardRef33, useId as useId28, useRef as useRef42 } from "react";
-import { jsx as jsx74, jsxs as jsxs58 } from "react/jsx-runtime";
+import { forwardRef as forwardRef33, useId as useId28, useRef as useRef43 } from "react";
+import { jsx as jsx76, jsxs as jsxs58 } from "react/jsx-runtime";
 var channels = {
   hue: { name: "Hue", max: 360, unit: "degree" },
   saturation: { name: "Saturation", max: 100, unit: "percent" },
@@ -8458,8 +8491,8 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
   const { rgba, latest } = color;
   const current = read(channel, color.value, rgba);
   const labelId = useId28();
-  const trackRef = useRef42(null);
-  const inputRef = useRef42(null);
+  const trackRef = useRef43(null);
+  const inputRef = useRef43(null);
   const vertical = orientation === "vertical";
   const isRtl = () => !vertical && trackRef.current !== null && getComputedStyle(trackRef.current).direction === "rtl";
   const end = () => onChangeEnd?.(latest());
@@ -8513,10 +8546,10 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
       ),
       children: [
         label || showValue ? /* @__PURE__ */ jsxs58("div", { className: "ow-color-slider__header", children: [
-          label ? /* @__PURE__ */ jsx74("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ jsx74("span", {}),
-          showValue ? /* @__PURE__ */ jsx74("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
+          label ? /* @__PURE__ */ jsx76("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ jsx76("span", {}),
+          showValue ? /* @__PURE__ */ jsx76("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx76(
           "div",
           {
             ref: trackRef,
@@ -8525,12 +8558,12 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
               "--ow-color-slider-gradient": `linear-gradient(var(--ow-color-slider-direction), ${gradient(channel, color.value, rgba)})`
             },
             ...drag.handlers,
-            children: /* @__PURE__ */ jsx74(
+            children: /* @__PURE__ */ jsx76(
               "div",
               {
                 className: "ow-color-slider__thumb",
                 style: { "--ow-color-slider-position": `${current / spec.max * 100}%`, "--ow-color-slider-thumb": fill },
-                children: /* @__PURE__ */ jsx74(
+                children: /* @__PURE__ */ jsx76(
                   "input",
                   {
                     ref: (element) => {
@@ -8562,18 +8595,18 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
             )
           }
         ),
-        name ? /* @__PURE__ */ jsx74("input", { type: "hidden", name, value: color.hex }) : null
+        name ? /* @__PURE__ */ jsx76("input", { type: "hidden", name, value: color.hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSwatchPicker.tsx
-import { forwardRef as forwardRef34, useRef as useRef43 } from "react";
-import { jsx as jsx75, jsxs as jsxs59 } from "react/jsx-runtime";
+import { forwardRef as forwardRef34, useRef as useRef44 } from "react";
+import { jsx as jsx77, jsxs as jsxs59 } from "react/jsx-runtime";
 var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(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 = useRef43([]);
+  const refs = useRef44([]);
   const items2 = options.map((option) => {
     const item = typeof option === "string" ? { value: option } : option;
     const rgba = parseHex(item.value);
@@ -8624,7 +8657,7 @@ var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(function ColorSwatchPicker2
         items2.map((item, index) => {
           const isSelected = index === selectedIndex;
           const isDisabled = disabled || Boolean(item.disabled);
-          return /* @__PURE__ */ jsx75(
+          return /* @__PURE__ */ jsx77(
             "div",
             {
               ref: (element) => {
@@ -8641,12 +8674,12 @@ var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(function ColorSwatchPicker2
               style: { "--ow-color-swatch-picker-value": item.value },
               onClick: () => choose(index),
               onKeyDown: (event) => onKeyDown(event, index),
-              children: /* @__PURE__ */ jsx75(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx77(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
             },
             `${item.value}-${index}`
           );
         }),
-        name ? /* @__PURE__ */ jsx75("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
+        name ? /* @__PURE__ */ jsx77("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
       ]
     }
   );
@@ -8881,6 +8914,7 @@ export {
   Combobox,
   CommandPalette,
   ConfirmDialog,
+  Container,
   CopyButton,
   DateField,
   DatePicker,
@@ -8922,6 +8956,7 @@ export {
   RangeCalendar,
   ScrollShadow,
   SearchField,
+  Section,
   SectionHeading,
   SegmentedControl,
   Select,