@openwarelabs/ui 0.10.0 → 0.10.1

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) })
     }
   );
 }
@@ -6392,14 +6396,31 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
 }
 
 // src/components/Prose/Prose.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect26, useRef as useRef34 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
+  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__ */ jsx62(
     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
@@ -6424,10 +6445,10 @@ 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";
@@ -6549,13 +6570,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 +6599,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 +6614,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 +6633,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`);
@@ -6926,11 +6947,11 @@ 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";
@@ -6950,13 +6971,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 +7006,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;
@@ -7074,10 +7095,10 @@ 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";
@@ -7227,11 +7248,11 @@ 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(
@@ -7294,8 +7315,8 @@ 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(
@@ -7388,7 +7409,7 @@ function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2
 }
 
 // src/components/ChatTool/ChatTool.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect29, useId as useId24, useRef as useRef37, useState as useState32 } from "react";
+import { forwardRef as forwardRef28, useEffect as useEffect30, useId as useId24, useRef as useRef38, useState as useState32 } from "react";
 import { Fragment as Fragment11, jsx as jsx69, jsxs as jsxs53 } from "react/jsx-runtime";
 var statusWords = {
   pending: "Not started",
@@ -7474,9 +7495,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,8 +7523,8 @@ 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 }) }) });
@@ -7540,10 +7561,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 +7578,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 +7589,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;
@@ -7735,7 +7756,7 @@ 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 { 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 jsx71, jsxs as jsxs55 } from "react/jsx-runtime";
 var openDelay = 250;
 var closeDelay = 150;
@@ -7755,11 +7776,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 +7794,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" } : {};
@@ -7879,7 +7900,7 @@ var ChatSources = /* @__PURE__ */ forwardRef30(function ChatSources2({ sources,
 });
 
 // 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";
 var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
@@ -7898,9 +7919,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);
@@ -7975,8 +7996,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 +8006,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 +8024,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(
@@ -8050,10 +8071,10 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
 });
 
 // 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 +8151,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) {
@@ -8258,8 +8279,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());
@@ -8381,7 +8402,7 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
 });
 
 // src/components/ColorPicker/ColorSlider.tsx
-import { forwardRef as forwardRef33, useId as useId28, useRef as useRef42 } from "react";
+import { forwardRef as forwardRef33, useId as useId28, useRef as useRef43 } from "react";
 import { jsx as jsx74, jsxs as jsxs58 } from "react/jsx-runtime";
 var channels = {
   hue: { name: "Hue", max: 360, unit: "degree" },
@@ -8458,8 +8479,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());
@@ -8569,11 +8590,11 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
 });
 
 // src/components/ColorPicker/ColorSwatchPicker.tsx
-import { forwardRef as forwardRef34, useRef as useRef43 } from "react";
+import { forwardRef as forwardRef34, useRef as useRef44 } from "react";
 import { jsx as jsx75, 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);