@orianatech/pire 0.23.0 → 1.0.0

package/dist/index.js

@@ -865,6 +865,12 @@ function useMessage(key, override) {
   return override ?? messages[key];
 }
 
+// src/components/utils/focusField.ts
+function focusFieldOf(button) {
+  const control = button?.closest?.(".pire-control");
+  control?.querySelector(".pire-datesegment, .pire-input, input, textarea")?.focus();
+}
+
 // src/components/forms/Input.tsx
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function Input({
@@ -920,7 +926,17 @@ function Input({
             children: [
               icon ? /* @__PURE__ */ jsx17(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
               /* @__PURE__ */ jsx17(AriaInput, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
-              showsClear ? /* @__PURE__ */ jsx17(AriaButton4, { className: "pire-input-clear", onPress: () => handleChange(""), children: clearLabel ?? msg.inputClear }) : null,
+              showsClear ? /* @__PURE__ */ jsx17(
+                AriaButton4,
+                {
+                  className: "pire-input-clear",
+                  onPress: (event) => {
+                    handleChange("");
+                    focusFieldOf(event.target);
+                  },
+                  children: clearLabel ?? msg.inputClear
+                }
+              ) : null,
               suffix ? /* @__PURE__ */ jsx17("span", { className: "pire-affix", children: suffix }) : null
             ]
           }
@@ -1240,7 +1256,18 @@ function ComboBox({
             children: [
               /* @__PURE__ */ jsx23(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
               /* @__PURE__ */ jsx23(AriaInput2, { className: "pire-input", placeholder: rest.placeholder }),
-              showsClear ? /* @__PURE__ */ jsx23(AriaButton6, { className: "pire-input-clear", slot: null, onPress: clear, children: clearLabel ?? msg.inputClear }) : null,
+              showsClear ? /* @__PURE__ */ jsx23(
+                AriaButton6,
+                {
+                  className: "pire-input-clear",
+                  slot: null,
+                  onPress: (event) => {
+                    clear();
+                    focusFieldOf(event.target);
+                  },
+                  children: clearLabel ?? msg.inputClear
+                }
+              ) : null,
               /* @__PURE__ */ jsx23(AriaButton6, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ jsx23(Icon, { name: "chevron-down", size: 16 }) })
             ]
           }
@@ -1424,6 +1451,7 @@ function MultiComboBox({
 }
 
 // src/components/forms/NumberField.tsx
+import * as React14 from "react";
 import {
   NumberField as AriaNumberField,
   Label as Label7,
@@ -1432,7 +1460,8 @@ import {
   Button as AriaButton8,
   Text as Text9,
   FieldError as FieldError7,
-  useLocale
+  useLocale,
+  NumberFieldStateContext
 } from "react-aria-components";
 import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function decimalSeparatorFor(locale) {
@@ -1447,6 +1476,17 @@ function typeIntoInput(el, text) {
   const caret = start + text.length;
   el.setSelectionRange(caret, caret);
 }
+var SINGLE_DOT = /^(-?\d+)\.(\d+)$/;
+function couldBeGrouped(integerPart, fractionPart) {
+  return fractionPart.length === 3 && integerPart.replace("-", "").length <= 3;
+}
+function localiseMachineDecimal(text, separator) {
+  const match = SINGLE_DOT.exec(text.trim());
+  if (!match || couldBeGrouped(match[1], match[2])) {
+    return text;
+  }
+  return `${match[1]}${separator}${match[2]}`;
+}
 function toAriaNumber(value) {
   if (value === void 0) {
     return void 0;
@@ -1456,6 +1496,24 @@ function toAriaNumber(value) {
   }
   return typeof value === "number" ? value : Number(value);
 }
+function ClearButton({ label, onClear }) {
+  const state = React14.useContext(NumberFieldStateContext);
+  if (!state?.inputValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx25(
+    AriaButton8,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        onClear();
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
+}
 function NumberField({
   label,
   suffix,
@@ -1470,12 +1528,24 @@ function NumberField({
   defaultValue,
   onChange,
   emptyValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
   const { locale } = useLocale();
   const empty = emptyValue === void 0 ? NaN : emptyValue;
-  const handleChange = onChange && ((next) => onChange(Number.isNaN(next) ? empty : next));
+  const isControlled = value !== void 0;
+  const [ownValue, setOwnValue] = React14.useState(() => toAriaNumber(defaultValue) ?? NaN);
+  const takesOverValue = Boolean(isClearable) && !isControlled;
+  const valueProps = takesOverValue ? { value: ownValue, defaultValue: void 0 } : { value: toAriaNumber(value), defaultValue: toAriaNumber(defaultValue) };
+  const handleChange = (next) => {
+    if (takesOverValue) {
+      setOwnValue(next);
+    }
+    onChange?.(Number.isNaN(next) ? empty : next);
+  };
+  const showsClear = Boolean(isClearable) && !rest.isDisabled && !rest.isReadOnly;
   const handleDecimalKey = (event) => {
     if (event.key !== "." || event.ctrlKey || event.metaKey || event.altKey) {
       return;
@@ -1494,16 +1564,36 @@ function NumberField({
     event.preventDefault();
     typeIntoInput(event.currentTarget, separator);
   };
+  const handlePaste = (event) => {
+    if (rest.isReadOnly || rest.isDisabled) {
+      return;
+    }
+    const separator = decimalSeparatorFor(locale);
+    if (separator === ".") {
+      return;
+    }
+    const { maximumFractionDigits } = new Intl.NumberFormat(locale, rest.formatOptions).resolvedOptions();
+    if (!maximumFractionDigits) {
+      return;
+    }
+    const pasted = event.clipboardData.getData("text");
+    const localised = localiseMachineDecimal(pasted, separator);
+    if (localised === pasted) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    typeIntoInput(event.currentTarget, localised);
+  };
   return /* @__PURE__ */ jsxs18(
     AriaNumberField,
     {
       className: cx("pire-field", className),
       style,
       validationBehavior: "aria",
-      value: toAriaNumber(value),
-      defaultValue: toAriaNumber(defaultValue),
       onChange: handleChange,
       ...rest,
+      ...valueProps,
       children: [
         label ? /* @__PURE__ */ jsxs18(Label7, { className: "pire-field-label", children: [
           label,
@@ -1518,8 +1608,17 @@ function NumberField({
             "data-invalid": rest.isInvalid ? "true" : void 0,
             "data-readonly": rest.isReadOnly ? "true" : void 0,
             children: [
-              /* @__PURE__ */ jsx25(AriaInput4, { className: "pire-input", "data-numeric": "true", onKeyDown: handleDecimalKey }),
+              /* @__PURE__ */ jsx25(
+                AriaInput4,
+                {
+                  className: "pire-input",
+                  "data-numeric": "true",
+                  onKeyDown: handleDecimalKey,
+                  onPasteCapture: handlePaste
+                }
+              ),
               suffix ? /* @__PURE__ */ jsx25("span", { className: "pire-affix", children: suffix }) : null,
+              showsClear ? /* @__PURE__ */ jsx25(ClearButton, { label: clearLabel ?? msg.inputClear, onClear: () => handleChange(NaN) }) : null,
               hideStepper ? null : /* @__PURE__ */ jsxs18("span", { className: "pire-stepper", children: [
                 /* @__PURE__ */ jsx25(AriaButton8, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx25(Icon, { name: "plus", size: 10 }) }),
                 /* @__PURE__ */ jsx25(AriaButton8, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx25(Icon, { name: "minus", size: 10 }) })
@@ -1535,6 +1634,7 @@ function NumberField({
 }
 
 // src/components/forms/DatePicker.tsx
+import * as React15 from "react";
 import {
   DatePicker as AriaDatePicker,
   Label as Label8,
@@ -1552,7 +1652,8 @@ import {
   CalendarCell,
   Heading as Heading2,
   Text as Text10,
-  FieldError as FieldError8
+  FieldError as FieldError8,
+  DatePickerStateContext
 } from "react-aria-components";
 
 // src/components/forms/dateValues.ts
@@ -1584,6 +1685,24 @@ function coerceBound(value) {
 
 // src/components/forms/DatePicker.tsx
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+function ClearButton2({ label }) {
+  const state = React15.useContext(DatePickerStateContext);
+  if (!state?.value) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx26(
+    AriaButton9,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        state.setValue(null);
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
+}
 function DatePicker({
   label,
   description,
@@ -1598,22 +1717,25 @@ function DatePicker({
   valueFormat,
   minValue,
   maxValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
-  const handleChange = onChange && ((next) => onChange(
+  const showsClear = Boolean(isClearable) && !rest.isDisabled && !rest.isReadOnly;
+  const handleChange = (next) => onChange?.(
     valueFormat === "iso" && next ? next.toString() : next
-  ));
+  );
   return /* @__PURE__ */ jsxs19(
     AriaDatePicker,
     {
       className: cx("pire-field", className),
       style,
       validationBehavior: "aria",
-      value: coerceDateValue(value),
-      defaultValue: coerceDateValue(defaultValue),
       minValue: coerceBound(minValue),
       maxValue: coerceBound(maxValue),
+      value: coerceDateValue(value),
+      defaultValue: coerceDateValue(defaultValue),
       onChange: handleChange,
       ...rest,
       children: [
@@ -1631,6 +1753,7 @@ function DatePicker({
             "data-readonly": rest.isReadOnly ? "true" : void 0,
             children: [
               /* @__PURE__ */ jsx26(DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx26(DateSegment, { segment, className: "pire-datesegment" }) }),
+              showsClear ? /* @__PURE__ */ jsx26(ClearButton2, { label: clearLabel ?? msg.inputClear }) : null,
               /* @__PURE__ */ jsx26(AriaButton9, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: 16 }) })
             ]
           }
@@ -1654,6 +1777,7 @@ function DatePicker({
 }
 
 // src/components/forms/DateRangePicker.tsx
+import * as React16 from "react";
 import {
   DateRangePicker as AriaDateRangePicker,
   Label as Label9,
@@ -1671,7 +1795,8 @@ import {
   CalendarCell as CalendarCell2,
   Heading as Heading3,
   Text as Text11,
-  FieldError as FieldError9
+  FieldError as FieldError9,
+  DateRangePickerStateContext
 } from "react-aria-components";
 import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
 function coerceRange(range) {
@@ -1693,6 +1818,24 @@ function rangeLengthInDays(range) {
   }
   return end.toDate("UTC").getTime() / 864e5 - start.toDate("UTC").getTime() / 864e5 + 1;
 }
+function ClearButton3({ label }) {
+  const state = React16.useContext(DateRangePickerStateContext);
+  if (!state?.value?.start && !state?.value?.end) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx27(
+    AriaButton10,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        state.setValue(null);
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
+}
 function DateRangePicker({
   label,
   description,
@@ -1711,6 +1854,8 @@ function DateRangePicker({
   valueFormat,
   minValue,
   maxValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
@@ -1739,7 +1884,7 @@ function DateRangePicker({
       defaultValue: coerceRange(defaultValue),
       minValue: coerceBound(minValue),
       maxValue: coerceBound(maxValue),
-      onChange: onChange && emit,
+      onChange: emit,
       ...rest,
       isInvalid: rest.isInvalid || tooLong || void 0,
       children: [
@@ -1759,6 +1904,7 @@ function DateRangePicker({
               /* @__PURE__ */ jsx27(DateInput2, { slot: "start", className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx27(DateSegment2, { segment, className: "pire-datesegment" }) }),
               /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: "pire-daterange-dash", children: "\u2013" }),
               /* @__PURE__ */ jsx27(DateInput2, { slot: "end", className: "pire-datefield", children: (segment) => /* @__PURE__ */ jsx27(DateSegment2, { segment, className: "pire-datesegment" }) }),
+              isClearable && !rest.isDisabled && !rest.isReadOnly ? /* @__PURE__ */ jsx27(ClearButton3, { label: clearLabel ?? msg.inputClear }) : null,
               /* @__PURE__ */ jsx27(
                 AriaButton10,
                 {
@@ -1824,13 +1970,13 @@ function DateRangePicker({
 }
 
 // src/components/forms/ValueHelpField.tsx
-import * as React16 from "react";
+import * as React19 from "react";
 
 // src/components/patterns/ValueHelpDialog.tsx
-import * as React15 from "react";
+import * as React18 from "react";
 
 // src/components/feedback/Dialog.tsx
-import * as React14 from "react";
+import * as React17 from "react";
 import { ModalOverlay, Modal, Dialog as AriaDialog3, Heading as Heading4 } from "react-aria-components";
 import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function DialogTitle({ children, className }) {
@@ -1864,8 +2010,8 @@ function Dialog({
     onClose?.();
     onOpenChange?.(false);
   };
-  const parts = React14.Children.toArray(children);
-  const slotOf = (type) => parts.find((node) => React14.isValidElement(node) && node.type === type);
+  const parts = React17.Children.toArray(children);
+  const slotOf = (type) => parts.find((node) => React17.isValidElement(node) && node.type === type);
   const titleSlot = slotOf(DialogTitle);
   const descriptionSlot = slotOf(DialogDescription);
   const bodySlot = slotOf(DialogBody);
@@ -2122,11 +2268,11 @@ function ValueHelpDialog({
   onClose
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React15.useState("");
-  React15.useEffect(() => {
+  const [query, setQuery] = React18.useState("");
+  React18.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React15.useMemo(() => {
+  const filtered = React18.useMemo(() => {
     if (isFilteredExternally) return rows;
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -2208,7 +2354,7 @@ function ValueHelpField({
   style
 }) {
   const msg = usePireMessages();
-  const [open, setOpen] = React16.useState(false);
+  const [open, setOpen] = React19.useState(false);
   return /* @__PURE__ */ jsxs24("div", { className: cx(className), style, children: [
     /* @__PURE__ */ jsx32(
       Input,
@@ -2264,7 +2410,7 @@ function ValueHelpField({
 }
 
 // src/components/forms/FileUpload.tsx
-import * as React17 from "react";
+import * as React20 from "react";
 import { FileTrigger, Text as Text12 } from "react-aria-components";
 
 // src/components/feedback/ProgressBar.tsx
@@ -2355,10 +2501,10 @@ function FileUpload({
   ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React17.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React20.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React17.useRef([]);
-  React17.useEffect(() => () => {
+  const created = React20.useRef([]);
+  React20.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2470,7 +2616,7 @@ function ShellBar({
 }
 
 // src/components/navigation/SideNav.tsx
-import * as React18 from "react";
+import * as React21 from "react";
 import {
   Button as AriaButton12,
   Disclosure,
@@ -2570,10 +2716,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React18.useState(
+  const [ownExpanded, setOwnExpanded] = React21.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React18.useState(value);
+  const [lastValue, setLastValue] = React21.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -2837,7 +2983,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 }
 
 // src/components/feedback/Toast.tsx
-import * as React19 from "react";
+import * as React22 from "react";
 import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var KIND_ICON2 = {
   info: "info",
@@ -2863,26 +3009,26 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
     }
   );
 }
-var ToastContext = React19.createContext(null);
+var ToastContext = React22.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React19.useState([]);
-  const close = React19.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React19.useCallback((toast) => {
+  const [toasts, setToasts] = React22.useState([]);
+  const close = React22.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React22.useCallback((toast) => {
     const id = Math.random().toString(36).slice(2);
     setToasts((t) => [...t, { ...toast, id }]);
     const ms = toast.timeout ?? timeout;
     if (ms > 0) setTimeout(() => close(id), ms);
     return id;
   }, [close, timeout]);
-  const value = React19.useMemo(() => ({ add, close }), [add, close]);
+  const value = React22.useMemo(() => ({ add, close }), [add, close]);
   return /* @__PURE__ */ jsxs34(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsx42("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ jsx42(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React19.useContext(ToastContext);
+  const ctx = React22.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
@@ -3232,14 +3378,14 @@ function BarChart({
 }
 
 // src/components/data/LineChart.tsx
-import * as React20 from "react";
+import * as React23 from "react";
 import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 var PLOT_INSET = { top: 10, right: 14, bottom: 24, left: 58 };
 var MARKER_LIMIT = 20;
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React20.useEffect : React20.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React23.useEffect : React23.useLayoutEffect;
 function useMeasuredWidth() {
-  const ref = React20.useRef(null);
-  const [width, setWidth] = React20.useState(0);
+  const ref = React23.useRef(null);
+  const [width, setWidth] = React23.useState(0);
   useIsomorphicLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -3402,7 +3548,7 @@ function LineChart({
 }
 
 // src/components/data/DonutChart.tsx
-import * as React21 from "react";
+import * as React24 from "react";
 import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 var SEGMENT_GAP_DEGREES = 1.5;
 function DonutChart({
@@ -3423,7 +3569,7 @@ function DonutChart({
 }) {
   const label = rest["aria-label"];
   const msg = usePireMessages();
-  const [hoveredIndex, setHoveredIndex] = React21.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React24.useState(null);
   warnOnDonutShape(series, categories.length, label);
   const values = (series[0]?.values ?? []).slice(0, categories.length);
   const segments = categories.map((category, index) => ({ category, index, value: values[index] ?? 0 })).filter((segment) => segment.value > 0);
@@ -3660,7 +3806,7 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/CommandPalette.tsx
-import * as React22 from "react";
+import * as React25 from "react";
 import {
   Autocomplete,
   ModalOverlay as ModalOverlay2,
@@ -3694,17 +3840,17 @@ function CommandPalette({
   style
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React22.useState("");
+  const [query, setQuery] = React25.useState("");
   const { contains } = useFilter({ sensitivity: "base" });
-  React22.useEffect(() => {
+  React25.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const searchableById = React22.useMemo(() => {
+  const searchableById = React25.useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const group of groups) for (const item of group.items) byId.set(item.id, searchableText(item));
     return byId;
   }, [groups]);
-  const filter = React22.useCallback((textValue, inputValue, node) => {
+  const filter = React25.useCallback((textValue, inputValue, node) => {
     if (node.parentKey === RESULTS_SECTION_KEY) return true;
     return contains(searchableById.get(String(node.key)) ?? textValue, inputValue);
   }, [contains, searchableById]);
@@ -3787,9 +3933,9 @@ function CommandPalette({
   );
 }
 function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
-  const handler = React22.useRef(onTrigger);
+  const handler = React25.useRef(onTrigger);
   handler.current = onTrigger;
-  React22.useEffect(() => {
+  React25.useEffect(() => {
     if (isDisabled) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
@@ -3843,7 +3989,7 @@ function EmptyState({ icon = "file-text", title, action, compact, children, clas
 }
 
 // src/components/patterns/FileDropZone.tsx
-import * as React23 from "react";
+import * as React26 from "react";
 import { DropZone, FileTrigger as FileTrigger2, isFileDropItem } from "react-aria-components";
 import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
 var isImage2 = (file) => file.type.startsWith("image/");
@@ -3873,10 +4019,10 @@ function FileDropZone({
   ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React23.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React26.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React23.useRef([]);
-  React23.useEffect(() => () => {
+  const created = React26.useRef([]);
+  React26.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {