twico-ui 1.44.0 → 1.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/index.cjs +914 -868
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +155 -10
  5. package/dist/index.d.ts +155 -10
  6. package/dist/index.mjs +914 -868
  7. package/dist/index.mjs.map +1 -1
  8. package/llms.txt +2 -0
  9. package/package.json +3 -3
package/dist/index.mjs CHANGED
@@ -1,15 +1,15 @@
1
1
  "use client";
2
- import * as React54 from 'react';
3
- import React54__default from 'react';
2
+ import * as React55 from 'react';
3
+ import React55__default from 'react';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
  import { createPortal } from 'react-dom';
6
6
 
7
7
  // components/TwicoProvider.jsx
8
- var SUPPORTS_STYLE_HOIST = parseInt(String(React54.version), 10) >= 19;
9
- var NonceContext = React54.createContext(void 0);
8
+ var SUPPORTS_STYLE_HOIST = parseInt(String(React55.version), 10) >= 19;
9
+ var NonceContext = React55.createContext(void 0);
10
10
  function useScopedStyles(id, css) {
11
- const nonce = React54.useContext(NonceContext);
12
- React54.useInsertionEffect(() => {
11
+ const nonce = React55.useContext(NonceContext);
12
+ React55.useInsertionEffect(() => {
13
13
  if (SUPPORTS_STYLE_HOIST) return;
14
14
  if (typeof document === "undefined") return;
15
15
  if (!css) return;
@@ -25,12 +25,12 @@ function useScopedStyles(id, css) {
25
25
  }
26
26
  if (el.textContent !== css) el.textContent = css;
27
27
  }, [id, css, nonce]);
28
- return SUPPORTS_STYLE_HOIST && css ? React54.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
28
+ return SUPPORTS_STYLE_HOIST && css ? React55.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
29
29
  }
30
30
 
31
31
  // components/TwicoProvider.jsx
32
32
  function TwicoProvider({ nonce, children }) {
33
- return React54__default.createElement(NonceContext.Provider, { value: nonce }, children);
33
+ return React55__default.createElement(NonceContext.Provider, { value: nonce }, children);
34
34
  }
35
35
  var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
36
36
  function createTheme(partial = {}) {
@@ -50,8 +50,8 @@ function toVars(theme) {
50
50
  return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
51
51
  }
52
52
  function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
53
- const vars = React54__default.useMemo(() => toVars(theme), [theme]);
54
- const uid = React54__default.useId();
53
+ const vars = React55__default.useMemo(() => toVars(theme), [theme]);
54
+ const uid = React55__default.useId();
55
55
  const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
56
56
  const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
57
57
  const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
@@ -73,7 +73,7 @@ var FORM_CSS = `
73
73
  .twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
74
74
  .twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
75
75
  `;
76
- var Form = React54__default.forwardRef(function Form2({
76
+ var Form = /* @__PURE__ */ React55__default.forwardRef(function Form2({
77
77
  onSubmit,
78
78
  preventDefault = true,
79
79
  loading = false,
@@ -104,18 +104,16 @@ var Form = React54__default.forwardRef(function Form2({
104
104
  }
105
105
  );
106
106
  });
107
- Form.displayName = "Form";
108
107
  var VH_CSS = `
109
108
  .twc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
110
109
  `;
111
- var VisuallyHidden = React54__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
110
+ var VisuallyHidden = /* @__PURE__ */ React55__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
112
111
  const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
113
112
  return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
114
113
  __twcStyles,
115
114
  children
116
115
  ] });
117
116
  });
118
- VisuallyHidden.displayName = "VisuallyHidden";
119
117
 
120
118
  // components/_warn.js
121
119
  var seen = /* @__PURE__ */ new Set();
@@ -128,7 +126,7 @@ function warnOnce(key, message) {
128
126
 
129
127
  // components/_overlay.js
130
128
  var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
131
- var useIsoLayoutEffect = canUseDOM ? React54__default.useLayoutEffect : React54__default.useEffect;
129
+ var useIsoLayoutEffect = canUseDOM ? React55__default.useLayoutEffect : React55__default.useEffect;
132
130
  var FOCUSABLE = 'a[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
133
131
  var CONTROL_TAGS = "|button|input|select|textarea|";
134
132
  var ROLE_OK = "|button|link|menuitem|menuitemcheckbox|menuitemradio|combobox|tab|treeitem|checkbox|switch|option|";
@@ -142,7 +140,7 @@ function triggerIsControl(el) {
142
140
  }
143
141
  var NATIVE_CONTROL = "button,a[href],summary,input,select,textarea";
144
142
  function useTriggerAudit(ref, name) {
145
- React54__default.useEffect(() => {
143
+ React55__default.useEffect(() => {
146
144
  const el = ref.current && ref.current.firstElementChild;
147
145
  if (!el) return;
148
146
  if (el.classList.contains("twc-tooltip-wrap")) {
@@ -157,7 +155,7 @@ function useTriggerAudit(ref, name) {
157
155
  }, []);
158
156
  }
159
157
  function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
160
- React54__default.useEffect(() => {
158
+ React55__default.useEffect(() => {
161
159
  if (!active || !canUseDOM) return void 0;
162
160
  const node = ref.current;
163
161
  if (!node) return void 0;
@@ -168,7 +166,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
168
166
  if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
169
167
  };
170
168
  }, [active]);
171
- React54__default.useEffect(() => {
169
+ React55__default.useEffect(() => {
172
170
  if (!active || !canUseDOM) return void 0;
173
171
  const node = ref.current;
174
172
  const onKey = (e) => {
@@ -195,7 +193,7 @@ function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus }
195
193
  }, [active]);
196
194
  }
197
195
  function usePortal() {
198
- return React54__default.useCallback((node) => {
196
+ return React55__default.useCallback((node) => {
199
197
  if (typeof document === "undefined") return null;
200
198
  return typeof createPortal === "function" ? createPortal(node, document.body) : node;
201
199
  }, []);
@@ -225,8 +223,8 @@ function useScrollLock(locked = true) {
225
223
  var __layerSeq = 0;
226
224
  var __openLayers = /* @__PURE__ */ new Set();
227
225
  function useLayer(active) {
228
- const depth = React54__default.useRef(0);
229
- React54__default.useEffect(() => {
226
+ const depth = React55__default.useRef(0);
227
+ React55__default.useEffect(() => {
230
228
  if (!active) return void 0;
231
229
  const d = ++__layerSeq;
232
230
  depth.current = d;
@@ -235,10 +233,10 @@ function useLayer(active) {
235
233
  __openLayers.delete(d);
236
234
  };
237
235
  }, [active]);
238
- return React54__default.useCallback(() => __openLayers.size === 0 || depth.current === Math.max(...__openLayers), []);
236
+ return React55__default.useCallback(() => __openLayers.size === 0 || depth.current === Math.max(...__openLayers), []);
239
237
  }
240
238
  function useInertBackground(ref, active) {
241
- React54__default.useEffect(() => {
239
+ React55__default.useEffect(() => {
242
240
  if (!active || !canUseDOM) return void 0;
243
241
  const node = ref.current;
244
242
  if (!node) return void 0;
@@ -273,7 +271,7 @@ function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class",
273
271
  return `(function(){try{var k=${k},a=${a},d=${d},t=localStorage.getItem(k);if(t!=='light'){if(t!=='dark'){t=d?d:(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');}}if(a==='class'){document.documentElement.classList.toggle('dark',t==='dark');}else{document.documentElement.setAttribute(a,t);}}catch(e){}})();`;
274
272
  }
275
273
  function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
276
- return React54__default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
274
+ return React55__default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
277
275
  }
278
276
  var KBD_CSS = `
279
277
  .twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
@@ -281,14 +279,13 @@ var KBD_CSS = `
281
279
  background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
282
280
  border-bottom-width: 2px; border-radius: var(--radius-sm); }
283
281
  `;
284
- var Kbd = React54__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
282
+ var Kbd = /* @__PURE__ */ React55__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
285
283
  const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
286
284
  return /* @__PURE__ */ jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
287
285
  __twcStyles,
288
286
  children
289
287
  ] });
290
288
  });
291
- Kbd.displayName = "Kbd";
292
289
  var PRE_CSS = `
293
290
  .twc-pre { margin: 0; padding: var(--space-4); overflow-x: auto; max-width: 100%;
294
291
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
@@ -296,14 +293,13 @@ var PRE_CSS = `
296
293
  border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
297
294
  white-space: pre; -webkit-overflow-scrolling: touch; }
298
295
  `;
299
- var Pre = React54__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
296
+ var Pre = /* @__PURE__ */ React55__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
300
297
  const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
301
298
  return /* @__PURE__ */ jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
302
299
  __twcStyles,
303
300
  children
304
301
  ] });
305
302
  });
306
- Pre.displayName = "Pre";
307
303
  var ANCHOR_CSS = `
308
304
  .twc-anchor { color: var(--color-primary-subtle-fg); text-decoration: none; border-radius: var(--radius-sm);
309
305
  transition: color var(--duration-fast) var(--ease-standard); }
@@ -316,7 +312,7 @@ function safeHref(url) {
316
312
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
317
313
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
318
314
  }
319
- var Anchor = React54__default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
315
+ var Anchor = /* @__PURE__ */ React55__default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
320
316
  const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
321
317
  const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
322
318
  return /* @__PURE__ */ jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
@@ -325,14 +321,13 @@ var Anchor = React54__default.forwardRef(function Anchor2({ as: Tag2 = "a", href
325
321
  external ? /* @__PURE__ */ jsx("span", { className: "twc-anchor__ext", "aria-hidden": "true", children: "\u2197" }) : null
326
322
  ] });
327
323
  });
328
- Anchor.displayName = "Anchor";
329
324
  var LABEL_CSS = `
330
325
  .twc-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: inline-flex; gap: 4px; align-items: center; }
331
326
  .twc-label[data-size="sm"] { font-size: var(--text-xs); }
332
327
  .twc-label[data-size="lg"] { font-size: var(--text-base); }
333
328
  .twc-label__req { color: var(--color-danger); }
334
329
  `;
335
- var Label = React54__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
330
+ var Label = /* @__PURE__ */ React55__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
336
331
  const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
337
332
  return /* @__PURE__ */ jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
338
333
  __twcStyles,
@@ -340,12 +335,11 @@ var Label = React54__default.forwardRef(function Label2({ htmlFor, required = fa
340
335
  required ? /* @__PURE__ */ jsx("span", { className: "twc-label__req", "aria-hidden": "true", children: "*" }) : null
341
336
  ] });
342
337
  });
343
- Label.displayName = "Label";
344
338
  var IMAGE_CSS = `
345
339
  .twc-image { display: block; max-width: 100%; }
346
340
  .twc-image[data-fit] { width: 100%; height: 100%; }
347
341
  `;
348
- var Image = React54__default.forwardRef(function Image2({
342
+ var Image = /* @__PURE__ */ React55__default.forwardRef(function Image2({
349
343
  src,
350
344
  alt,
351
345
  fit,
@@ -361,7 +355,7 @@ var Image = React54__default.forwardRef(function Image2({
361
355
  ...rest
362
356
  }, ref) {
363
357
  const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
364
- const [failed, setFailed] = React54__default.useState(false);
358
+ const [failed, setFailed] = React55__default.useState(false);
365
359
  const shownSrc = failed && fallback ? fallback : src;
366
360
  const s = {
367
361
  objectFit: fit,
@@ -400,7 +394,6 @@ var Image = React54__default.forwardRef(function Image2({
400
394
  )
401
395
  ] });
402
396
  });
403
- Image.displayName = "Image";
404
397
  var ICONBTN_CSS = `
405
398
  .twc-iconbtn {
406
399
  --_sz: var(--control-h-md);
@@ -470,7 +463,7 @@ function safeHref2(url) {
470
463
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
471
464
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
472
465
  }
473
- function IconButton({
466
+ var IconButton = /* @__PURE__ */ React55__default.forwardRef(function IconButton2({
474
467
  children,
475
468
  icon,
476
469
  variant = "ghost",
@@ -487,7 +480,7 @@ function IconButton({
487
480
  "aria-label": ariaLabel,
488
481
  onClick,
489
482
  ...rest
490
- }) {
483
+ }, ref) {
491
484
  const __twcStyles = useScopedStyles("twc-iconbtn-styles", ICONBTN_CSS);
492
485
  const Tag2 = as;
493
486
  const inert = Tag2 === "a" && disabled;
@@ -495,6 +488,7 @@ function IconButton({
495
488
  return /* @__PURE__ */ jsxs(
496
489
  Tag2,
497
490
  {
491
+ ref,
498
492
  className: `twc-iconbtn ${className}`,
499
493
  "data-variant": variant,
500
494
  "data-tone": tone,
@@ -516,7 +510,7 @@ function IconButton({
516
510
  ]
517
511
  }
518
512
  );
519
- }
513
+ });
520
514
 
521
515
  // components/_compose.js
522
516
  function compose(theirs, ours) {
@@ -592,14 +586,14 @@ function Tooltip({
592
586
  }) {
593
587
  const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
594
588
  const anchored = anchor !== void 0;
595
- const id = React54__default.useId();
596
- const [showU, setShowU] = React54__default.useState(false);
589
+ const id = React55__default.useId();
590
+ const [showU, setShowU] = React55__default.useState(false);
597
591
  const show = anchored ? !!openProp : showU;
598
- const [coords, setCoords] = React54__default.useState(null);
599
- const timer = React54__default.useRef(null);
600
- const closeTimer = React54__default.useRef(null);
601
- const wrapRef = React54__default.useRef(null);
602
- const tipRef = React54__default.useRef(null);
592
+ const [coords, setCoords] = React55__default.useState(null);
593
+ const timer = React55__default.useRef(null);
594
+ const closeTimer = React55__default.useRef(null);
595
+ const wrapRef = React55__default.useRef(null);
596
+ const tipRef = React55__default.useRef(null);
603
597
  const open = () => {
604
598
  clearTimeout(closeTimer.current);
605
599
  clearTimeout(timer.current);
@@ -610,11 +604,11 @@ function Tooltip({
610
604
  clearTimeout(closeTimer.current);
611
605
  closeTimer.current = setTimeout(() => setShowU(false), 120);
612
606
  };
613
- React54__default.useEffect(() => () => {
607
+ React55__default.useEffect(() => () => {
614
608
  clearTimeout(timer.current);
615
609
  clearTimeout(closeTimer.current);
616
610
  }, []);
617
- const place = React54__default.useCallback(() => {
611
+ const place = React55__default.useCallback(() => {
618
612
  const el = anchored ? anchor : wrapRef.current;
619
613
  if (!el || !el.getBoundingClientRect) return;
620
614
  const r2 = el.getBoundingClientRect();
@@ -649,10 +643,10 @@ function Tooltip({
649
643
  setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
650
644
  }
651
645
  }, [placement, anchored, anchor]);
652
- React54__default.useEffect(() => {
646
+ React55__default.useEffect(() => {
653
647
  place();
654
648
  }, [place]);
655
- React54__default.useEffect(() => {
649
+ React55__default.useEffect(() => {
656
650
  if (!show) return void 0;
657
651
  place();
658
652
  const onMove = () => place();
@@ -663,7 +657,7 @@ function Tooltip({
663
657
  window.removeEventListener("resize", onMove);
664
658
  };
665
659
  }, [show, place]);
666
- React54__default.useEffect(() => {
660
+ React55__default.useEffect(() => {
667
661
  if (!show || anchored) return;
668
662
  const onKeyDown = (e) => {
669
663
  if (e.key === "Escape") {
@@ -707,7 +701,7 @@ function Tooltip({
707
701
  bubble
708
702
  ] });
709
703
  const describedBy = show ? id : void 0;
710
- const trigger = React54__default.isValidElement(children) && children.type !== React54__default.Fragment ? React54__default.cloneElement(children, {
704
+ const trigger = React55__default.isValidElement(children) && children.type !== React55__default.Fragment ? React55__default.cloneElement(children, {
711
705
  "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
712
706
  }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
713
707
  return /* @__PURE__ */ jsxs(
@@ -756,7 +750,7 @@ var IcoReset = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none",
756
750
  /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9 9 0 0 0-6.3 2.6L3 8" }),
757
751
  /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
758
752
  ] });
759
- var ImageViewer = /* @__PURE__ */ React54__default.forwardRef(function ImageViewer2({
753
+ var ImageViewer = /* @__PURE__ */ React55__default.forwardRef(function ImageViewer2({
760
754
  src,
761
755
  alt,
762
756
  minZoom = 1,
@@ -775,16 +769,16 @@ var ImageViewer = /* @__PURE__ */ React54__default.forwardRef(function ImageView
775
769
  ...rest
776
770
  }, ref) {
777
771
  const __twcStyles = useScopedStyles("twc-imageviewer-styles", IV_CSS);
778
- const stageRef = React54__default.useRef(null);
779
- const natRef = React54__default.useRef({ w: 0, h: 0 });
780
- const [internalZoom, setInternalZoom] = React54__default.useState(clamp(defaultZoom, minZoom, maxZoom));
772
+ const stageRef = React55__default.useRef(null);
773
+ const natRef = React55__default.useRef({ w: 0, h: 0 });
774
+ const [internalZoom, setInternalZoom] = React55__default.useState(clamp(defaultZoom, minZoom, maxZoom));
781
775
  const zoomControlled = zoomProp !== void 0;
782
776
  const zoom = clamp(zoomControlled ? zoomProp : internalZoom, minZoom, maxZoom);
783
- const [offset, setOffset] = React54__default.useState({ x: 0, y: 0 });
784
- const [dragging, setDragging] = React54__default.useState(false);
785
- const zoomRef = React54__default.useRef(zoom);
777
+ const [offset, setOffset] = React55__default.useState({ x: 0, y: 0 });
778
+ const [dragging, setDragging] = React55__default.useState(false);
779
+ const zoomRef = React55__default.useRef(zoom);
786
780
  zoomRef.current = zoom;
787
- const offsetRef = React54__default.useRef(offset);
781
+ const offsetRef = React55__default.useRef(offset);
788
782
  offsetRef.current = offset;
789
783
  const applyZoom = (next) => {
790
784
  const z = clamp(next, minZoom, maxZoom);
@@ -834,12 +828,12 @@ var ImageViewer = /* @__PURE__ */ React54__default.forwardRef(function ImageView
834
828
  if (r2) zoomAt(r2.left + r2.width / 2, r2.top + r2.height / 2, next);
835
829
  else if (applyZoom(next) <= minZoom) setOffset({ x: 0, y: 0 });
836
830
  };
837
- const mountedRef = React54__default.useRef(false);
838
- React54__default.useEffect(() => {
831
+ const mountedRef = React55__default.useRef(false);
832
+ React55__default.useEffect(() => {
839
833
  if (mountedRef.current) reset();
840
834
  else mountedRef.current = true;
841
835
  }, [src]);
842
- React54__default.useEffect(() => {
836
+ React55__default.useEffect(() => {
843
837
  const stage = stageRef.current;
844
838
  if (!stage) return void 0;
845
839
  const onWheel = (e) => {
@@ -850,9 +844,9 @@ var ImageViewer = /* @__PURE__ */ React54__default.forwardRef(function ImageView
850
844
  stage.addEventListener("wheel", onWheel, { passive: false });
851
845
  return () => stage.removeEventListener("wheel", onWheel);
852
846
  }, [step, minZoom, maxZoom, fit]);
853
- const pointers = React54__default.useRef(/* @__PURE__ */ new Map());
854
- const pinchRef = React54__default.useRef(null);
855
- const panRef = React54__default.useRef(null);
847
+ const pointers = React55__default.useRef(/* @__PURE__ */ new Map());
848
+ const pinchRef = React55__default.useRef(null);
849
+ const panRef = React55__default.useRef(null);
856
850
  const onPointerDown = (e) => {
857
851
  pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
858
852
  e.currentTarget.setPointerCapture?.(e.pointerId);
@@ -904,13 +898,13 @@ var ImageViewer = /* @__PURE__ */ React54__default.forwardRef(function ImageView
904
898
  };
905
899
  const canZoomIn = zoom < maxZoom, canZoomOut = zoom > minZoom;
906
900
  const api = { zoom, zoomIn: () => zoomFromCenter(zoom + step), zoomOut: () => zoomFromCenter(zoom - step), reset, canZoomIn, canZoomOut };
907
- React54__default.useImperativeHandle(ref, () => api);
908
- const onStateChangeRef = React54__default.useRef(onStateChange);
901
+ React55__default.useImperativeHandle(ref, () => api);
902
+ const onStateChangeRef = React55__default.useRef(onStateChange);
909
903
  onStateChangeRef.current = onStateChange;
910
- React54__default.useEffect(() => {
904
+ React55__default.useEffect(() => {
911
905
  onStateChangeRef.current?.({ zoom, canZoomIn, canZoomOut });
912
906
  }, [zoom, canZoomIn, canZoomOut]);
913
- React54__default.useEffect(() => {
907
+ React55__default.useEffect(() => {
914
908
  setOffset((o) => clampOffset(o, zoomRef.current));
915
909
  }, [fit]);
916
910
  const defaultControls = /* @__PURE__ */ jsxs("div", { className: "twc-iv__controls", children: [
@@ -1004,11 +998,11 @@ function Accordion({
1004
998
  ...rest
1005
999
  }) {
1006
1000
  const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
1007
- const rootRef = React54__default.useRef(null);
1008
- const [internal, setInternal] = React54__default.useState(() => new Set(defaultOpen));
1001
+ const rootRef = React55__default.useRef(null);
1002
+ const [internal, setInternal] = React55__default.useState(() => new Set(defaultOpen));
1009
1003
  const open = openProp !== void 0 ? new Set(openProp) : internal;
1010
- const baseId = React54__default.useId();
1011
- const [ever, setEver] = React54__default.useState(() => new Set(open));
1004
+ const baseId = React55__default.useId();
1005
+ const [ever, setEver] = React55__default.useState(() => new Set(open));
1012
1006
  const defer = mountOnOpen || unmountOnClose;
1013
1007
  let mounted = ever;
1014
1008
  if (defer) {
@@ -1020,7 +1014,7 @@ function Accordion({
1020
1014
  }
1021
1015
  }
1022
1016
  const openKey = defer ? JSON.stringify([...open].sort()) : "";
1023
- React54__default.useEffect(() => {
1017
+ React55__default.useEffect(() => {
1024
1018
  if (!unmountOnClose) return void 0;
1025
1019
  const drop = [...ever].filter((v) => !open.has(v));
1026
1020
  if (!drop.length) return void 0;
@@ -1225,7 +1219,7 @@ function Avatar({
1225
1219
  ...rest
1226
1220
  }) {
1227
1221
  const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
1228
- const [errored, setErrored] = React54__default.useState(false);
1222
+ const [errored, setErrored] = React55__default.useState(false);
1229
1223
  const cleanSrc = safeSrc(src);
1230
1224
  const showImg = cleanSrc && !errored;
1231
1225
  const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -1307,28 +1301,28 @@ function Menu({
1307
1301
  ...rest
1308
1302
  }) {
1309
1303
  const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
1310
- const _tp = React54__default.isValidElement(trigger) ? trigger.props : {};
1304
+ const _tp = React55__default.isValidElement(trigger) ? trigger.props : {};
1311
1305
  const triggerDisabled = _tp.disabled === true || _tp["aria-disabled"] === true || _tp["aria-disabled"] === "true";
1312
- const [openState, setOpenState] = React54__default.useState(defaultOpen);
1313
- const [render, setRender] = React54__default.useState(false);
1314
- const [pos, setPos] = React54__default.useState(null);
1315
- const [active, setActive] = React54__default.useState(-1);
1316
- const wrapRef = React54__default.useRef(null);
1306
+ const [openState, setOpenState] = React55__default.useState(defaultOpen);
1307
+ const [render, setRender] = React55__default.useState(false);
1308
+ const [pos, setPos] = React55__default.useState(null);
1309
+ const [active, setActive] = React55__default.useState(-1);
1310
+ const wrapRef = React55__default.useRef(null);
1317
1311
  useTriggerAudit(wrapRef, "Menu");
1318
- const menuRef = React54__default.useRef(null);
1319
- const typeBufRef = React54__default.useRef("");
1320
- const typeTimerRef = React54__default.useRef(null);
1321
- const menuId = React54__default.useId();
1312
+ const menuRef = React55__default.useRef(null);
1313
+ const typeBufRef = React55__default.useRef("");
1314
+ const typeTimerRef = React55__default.useRef(null);
1315
+ const menuId = React55__default.useId();
1322
1316
  const headerId = `${menuId}-header`;
1323
1317
  const controlled = openProp !== void 0;
1324
1318
  const open = controlled ? !!openProp : openState;
1325
- const openRef = React54__default.useRef(open);
1319
+ const openRef = React55__default.useRef(open);
1326
1320
  openRef.current = open;
1327
- const controlledRef = React54__default.useRef(controlled);
1321
+ const controlledRef = React55__default.useRef(controlled);
1328
1322
  controlledRef.current = controlled;
1329
- const onOpenChangeRef = React54__default.useRef(onOpenChange);
1323
+ const onOpenChangeRef = React55__default.useRef(onOpenChange);
1330
1324
  onOpenChangeRef.current = onOpenChange;
1331
- const setOpen = React54__default.useCallback((next) => {
1325
+ const setOpen = React55__default.useCallback((next) => {
1332
1326
  const value = typeof next === "function" ? next(openRef.current) : next;
1333
1327
  if (value === openRef.current) return;
1334
1328
  if (!controlledRef.current) setOpenState(value);
@@ -1336,7 +1330,7 @@ function Menu({
1336
1330
  }, []);
1337
1331
  const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
1338
1332
  const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
1339
- const place = React54__default.useCallback(() => {
1333
+ const place = React55__default.useCallback(() => {
1340
1334
  const t = wrapRef.current;
1341
1335
  if (!t) return;
1342
1336
  const r2 = t.getBoundingClientRect();
@@ -1352,7 +1346,7 @@ function Menu({
1352
1346
  setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
1353
1347
  }, [align, width]);
1354
1348
  const isTop = useLayer(open && render);
1355
- React54__default.useEffect(() => {
1349
+ React55__default.useEffect(() => {
1356
1350
  if (!open) return;
1357
1351
  place();
1358
1352
  const onMove = () => place();
@@ -1371,18 +1365,18 @@ function Menu({
1371
1365
  document.removeEventListener("mousedown", onDown);
1372
1366
  };
1373
1367
  }, [open, place, isTop]);
1374
- const kbdRef = React54__default.useRef(false);
1375
- React54__default.useEffect(() => {
1368
+ const kbdRef = React55__default.useRef(false);
1369
+ React55__default.useEffect(() => {
1376
1370
  if (!open || !render || active < 0 || !kbdRef.current) return;
1377
1371
  kbdRef.current = false;
1378
1372
  const el = document.getElementById(`${menuId}-item-${active}`);
1379
1373
  if (el) el.focus();
1380
1374
  }, [open, render, active, menuId]);
1381
- const focusTrigger = React54__default.useCallback(() => {
1375
+ const focusTrigger = React55__default.useCallback(() => {
1382
1376
  const t = wrapRef.current && wrapRef.current.querySelector('button, a[href], [role="button"], [tabindex]');
1383
1377
  if (t) t.focus();
1384
1378
  }, []);
1385
- React54__default.useEffect(() => {
1379
+ React55__default.useEffect(() => {
1386
1380
  if (open) return;
1387
1381
  kbdRef.current = false;
1388
1382
  setActive(-1);
@@ -1390,7 +1384,7 @@ function Menu({
1390
1384
  if (!m || typeof document === "undefined" || !m.contains(document.activeElement)) return;
1391
1385
  focusTrigger();
1392
1386
  }, [open, focusTrigger]);
1393
- React54__default.useEffect(() => {
1387
+ React55__default.useEffect(() => {
1394
1388
  if (open) {
1395
1389
  setRender(true);
1396
1390
  return;
@@ -1523,8 +1517,8 @@ function Menu({
1523
1517
  ]
1524
1518
  }
1525
1519
  ) : null;
1526
- const fix = React54__default.isValidElement(trigger) && !triggerIsControl(trigger) ? { role: "button" } : null;
1527
- const triggerEl = React54__default.isValidElement(trigger) ? React54__default.cloneElement(trigger, {
1520
+ const fix = React55__default.isValidElement(trigger) && !triggerIsControl(trigger) ? { role: "button" } : null;
1521
+ const triggerEl = React55__default.isValidElement(trigger) ? React55__default.cloneElement(trigger, {
1528
1522
  onClick: (e) => {
1529
1523
  trigger.props.onClick?.(e);
1530
1524
  toggle();
@@ -1715,7 +1709,7 @@ function Breadcrumb({
1715
1709
  ...rest
1716
1710
  }) {
1717
1711
  const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
1718
- const [expanded, setExpanded] = React54__default.useState(false);
1712
+ const [expanded, setExpanded] = React55__default.useState(false);
1719
1713
  const sep = separator || /* @__PURE__ */ jsx(ChevronSep, {});
1720
1714
  let display = items;
1721
1715
  if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -1728,7 +1722,7 @@ function Breadcrumb({
1728
1722
  __twcStyles,
1729
1723
  display.map((it, i) => {
1730
1724
  const last = i === display.length - 1;
1731
- return /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
1725
+ return /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
1732
1726
  it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
1733
1727
  "span",
1734
1728
  {
@@ -1877,7 +1871,7 @@ function safeHref5(url) {
1877
1871
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
1878
1872
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
1879
1873
  }
1880
- function Button({
1874
+ var Button = /* @__PURE__ */ React55__default.forwardRef(function Button2({
1881
1875
  children,
1882
1876
  variant = "solid",
1883
1877
  tone = "primary",
@@ -1895,9 +1889,9 @@ function Button({
1895
1889
  className = "",
1896
1890
  onClick,
1897
1891
  ...rest
1898
- }) {
1892
+ }, ref) {
1899
1893
  const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
1900
- const [ripples, setRipples] = React54__default.useState([]);
1894
+ const [ripples, setRipples] = React55__default.useState([]);
1901
1895
  const Tag2 = as;
1902
1896
  const inert = Tag2 === "a" && (disabled || loading);
1903
1897
  const softDisabled = disabled && focusableWhenDisabled && !loading && Tag2 === "button";
@@ -1919,6 +1913,7 @@ function Button({
1919
1913
  return /* @__PURE__ */ jsxs(
1920
1914
  Tag2,
1921
1915
  {
1916
+ ref,
1922
1917
  className: `twc-btn ${className}`,
1923
1918
  "data-variant": variant,
1924
1919
  "data-tone": tone,
@@ -1954,7 +1949,7 @@ function Button({
1954
1949
  ]
1955
1950
  }
1956
1951
  );
1957
- }
1952
+ });
1958
1953
  var UNITLESS = /* @__PURE__ */ new Set([
1959
1954
  "animationIterationCount",
1960
1955
  "aspectRatio",
@@ -2127,9 +2122,9 @@ function buildSx(sx, uid) {
2127
2122
  return { flatStyle, css };
2128
2123
  }
2129
2124
  function useSx(sx) {
2130
- const rawId = React54__default.useId();
2125
+ const rawId = React55__default.useId();
2131
2126
  const uid = `sx${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
2132
- const { flatStyle, css } = React54__default.useMemo(() => buildSx(sx, uid), [sx, uid]);
2127
+ const { flatStyle, css } = React55__default.useMemo(() => buildSx(sx, uid), [sx, uid]);
2133
2128
  const styleNode = useScopedStyles(`twc-sx-${uid}`, css);
2134
2129
  return { flatStyle, styleNode, sxAttr: css ? uid : void 0 };
2135
2130
  }
@@ -2265,14 +2260,14 @@ function Carousel({
2265
2260
  ...rest
2266
2261
  }) {
2267
2262
  const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
2268
- const slides = React54__default.Children.toArray(children);
2263
+ const slides = React55__default.Children.toArray(children);
2269
2264
  const count = slides.length;
2270
- const [internal, setInternal] = React54__default.useState(defaultIndex);
2265
+ const [internal, setInternal] = React55__default.useState(defaultIndex);
2271
2266
  const index = indexProp !== void 0 ? indexProp : internal;
2272
- const [paused, setPaused] = React54__default.useState(false);
2273
- const [userPaused, setUserPaused] = React54__default.useState(false);
2274
- const [prefersReduced, setPrefersReduced] = React54__default.useState(false);
2275
- React54__default.useEffect(() => {
2267
+ const [paused, setPaused] = React55__default.useState(false);
2268
+ const [userPaused, setUserPaused] = React55__default.useState(false);
2269
+ const [prefersReduced, setPrefersReduced] = React55__default.useState(false);
2270
+ React55__default.useEffect(() => {
2276
2271
  if (typeof window === "undefined" || !window.matchMedia) return void 0;
2277
2272
  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
2278
2273
  const on = () => setPrefersReduced(mql.matches);
@@ -2280,16 +2275,16 @@ function Carousel({
2280
2275
  mql.addEventListener("change", on);
2281
2276
  return () => mql.removeEventListener("change", on);
2282
2277
  }, []);
2283
- const setIndex = React54__default.useCallback((i) => {
2278
+ const setIndex = React55__default.useCallback((i) => {
2284
2279
  if (indexProp === void 0) setInternal(i);
2285
2280
  onIndexChange?.(i);
2286
2281
  }, [indexProp, onIndexChange]);
2287
- const go = React54__default.useCallback((i) => {
2282
+ const go = React55__default.useCallback((i) => {
2288
2283
  if (count <= 0) return;
2289
2284
  setIndex(loop ? (i % count + count) % count : Math.min(Math.max(i, 0), count - 1));
2290
2285
  }, [count, loop, setIndex]);
2291
2286
  const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
2292
- React54__default.useEffect(() => {
2287
+ React55__default.useEffect(() => {
2293
2288
  if (!autoRotating) return void 0;
2294
2289
  const t = setInterval(() => {
2295
2290
  const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -2549,7 +2544,7 @@ var CHART_BASE_CSS = `
2549
2544
  }
2550
2545
  `;
2551
2546
  function ChartTable({ id, caption, columns, rows }) {
2552
- const h = React54__default.createElement;
2547
+ const h = React55__default.createElement;
2553
2548
  return h(
2554
2549
  "table",
2555
2550
  { className: "twc-chart__sr", id },
@@ -2579,7 +2574,7 @@ function ChartTable({ id, caption, columns, rows }) {
2579
2574
  );
2580
2575
  }
2581
2576
  function ChartLegend({ items, onToggle, hidden, onFocus, onBlur }) {
2582
- const h = React54__default.createElement;
2577
+ const h = React55__default.createElement;
2583
2578
  return h(
2584
2579
  "div",
2585
2580
  { className: "twc-chart__legend" },
@@ -2610,23 +2605,23 @@ function ChartLegend({ items, onToggle, hidden, onFocus, onBlur }) {
2610
2605
  );
2611
2606
  }
2612
2607
  function useChartTooltip() {
2613
- const containerRef = React54__default.useRef(null);
2614
- const [tip, setTip] = React54__default.useState(null);
2615
- const show = React54__default.useCallback((content, e) => {
2608
+ const containerRef = React55__default.useRef(null);
2609
+ const [tip, setTip] = React55__default.useState(null);
2610
+ const show = React55__default.useCallback((content, e) => {
2616
2611
  const el = containerRef.current;
2617
2612
  const rect = el && el.getBoundingClientRect ? el.getBoundingClientRect() : null;
2618
2613
  const left = rect ? e.clientX - rect.left : 0;
2619
2614
  const top = rect ? e.clientY - rect.top : 0;
2620
2615
  setTip({ title: content.title, items: content.items || [], left, top });
2621
2616
  }, []);
2622
- const hide = React54__default.useCallback(() => setTip(null), []);
2617
+ const hide = React55__default.useCallback(() => setTip(null), []);
2623
2618
  return { containerRef, tip, show, hide };
2624
2619
  }
2625
2620
  function ChartTooltip({ tip }) {
2626
- const h = React54__default.createElement;
2627
- const ref = React54__default.useRef(null);
2628
- const [pos, setPos] = React54__default.useState({ dx: 0, below: false });
2629
- React54__default.useLayoutEffect(() => {
2621
+ const h = React55__default.createElement;
2622
+ const ref = React55__default.useRef(null);
2623
+ const [pos, setPos] = React55__default.useState({ dx: 0, below: false });
2624
+ React55__default.useLayoutEffect(() => {
2630
2625
  const el = ref.current;
2631
2626
  if (!tip || !el) return;
2632
2627
  const parent = el.offsetParent;
@@ -2703,17 +2698,17 @@ function Chart({
2703
2698
  }) {
2704
2699
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
2705
2700
  const styles = useScopedStyles("twc-chart-styles", CHART_CSS);
2706
- const uid = React54__default.useId();
2701
+ const uid = React55__default.useId();
2707
2702
  const gid = uid.replace(/[^a-zA-Z0-9]/g, "");
2708
2703
  const tableId = tableFallback ? `${uid}-table` : void 0;
2709
2704
  const { containerRef, tip, show, hide } = useChartTooltip();
2710
- const [hidden, setHidden] = React54__default.useState(() => /* @__PURE__ */ new Set());
2711
- const [focusSeries, setFocusSeries] = React54__default.useState(null);
2712
- const [selected, setSelected] = React54__default.useState(null);
2713
- const [hoverIdx, setHoverIdx] = React54__default.useState(null);
2714
- const [zoom, setZoom] = React54__default.useState(null);
2715
- const [drag, setDrag] = React54__default.useState(null);
2716
- const svgRef = React54__default.useRef(null);
2705
+ const [hidden, setHidden] = React55__default.useState(() => /* @__PURE__ */ new Set());
2706
+ const [focusSeries, setFocusSeries] = React55__default.useState(null);
2707
+ const [selected, setSelected] = React55__default.useState(null);
2708
+ const [hoverIdx, setHoverIdx] = React55__default.useState(null);
2709
+ const [zoom, setZoom] = React55__default.useState(null);
2710
+ const [drag, setDrag] = React55__default.useState(null);
2711
+ const svgRef = React55__default.useRef(null);
2717
2712
  const isBar = type === "bar" || type === "column";
2718
2713
  const isArea = type === "area";
2719
2714
  const crv = smooth ? "smooth" : curve;
@@ -2818,7 +2813,7 @@ function Chart({
2818
2813
  onDataClick({ label: d.label, series: null, seriesIndex: -1, value: void 0, index: baseIdx + idx, row: d });
2819
2814
  selectMark(`${idx}:*`);
2820
2815
  };
2821
- React54__default.useEffect(() => {
2816
+ React55__default.useEffect(() => {
2822
2817
  if (!zoomable) return void 0;
2823
2818
  const svg = svgRef.current;
2824
2819
  if (!svg) return void 0;
@@ -3128,12 +3123,12 @@ function PieChart({
3128
3123
  }) {
3129
3124
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
3130
3125
  const styles = useScopedStyles("twc-piechart-styles", CHART_CSS2);
3131
- const uid = React54__default.useId();
3126
+ const uid = React55__default.useId();
3132
3127
  const tableId = tableFallback ? `${uid}-table` : void 0;
3133
3128
  const { containerRef, tip, show, hide } = useChartTooltip();
3134
- const [active, setActive] = React54__default.useState(null);
3135
- const [focus, setFocus] = React54__default.useState(null);
3136
- const [selected, setSelected] = React54__default.useState(null);
3129
+ const [active, setActive] = React55__default.useState(null);
3130
+ const [focus, setFocus] = React55__default.useState(null);
3131
+ const [selected, setSelected] = React55__default.useState(null);
3137
3132
  const clickable = !!onDataClick;
3138
3133
  const rows = data || [];
3139
3134
  const fmt = valueFormat || fmtNumber;
@@ -3282,11 +3277,11 @@ function Gauge({
3282
3277
  }) {
3283
3278
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
3284
3279
  const styles = useScopedStyles("twc-gauge-styles", GAUGE_CSS);
3285
- const uid = React54__default.useId();
3280
+ const uid = React55__default.useId();
3286
3281
  const tableId = tableFallback ? `${uid}-table` : void 0;
3287
3282
  const { containerRef, tip, show, hide } = useChartTooltip();
3288
- const [selected, setSelected] = React54__default.useState(null);
3289
- const [focus, setFocus] = React54__default.useState(null);
3283
+ const [selected, setSelected] = React55__default.useState(null);
3284
+ const [focus, setFocus] = React55__default.useState(null);
3290
3285
  const fmt = valueFormat || ((n) => String(Math.round(Number(n) || 0)));
3291
3286
  const cx = size / 2, cy = size / 2;
3292
3287
  const span = endAngle - startAngle;
@@ -3447,11 +3442,11 @@ function Sparkline({
3447
3442
  }) {
3448
3443
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
3449
3444
  const styles = useScopedStyles("twc-sparkline-styles", SPARK_CSS);
3450
- const uid = React54__default.useId();
3445
+ const uid = React55__default.useId();
3451
3446
  const tableId = tableFallback ? `${uid}-table` : void 0;
3452
3447
  const { containerRef, tip, show, hide } = useChartTooltip();
3453
- const [hover, setHover] = React54__default.useState(null);
3454
- const [selected, setSelected] = React54__default.useState(null);
3448
+ const [hover, setHover] = React55__default.useState(null);
3449
+ const [selected, setSelected] = React55__default.useState(null);
3455
3450
  const clickable = !!onDataClick;
3456
3451
  const kind = area ? "area" : type;
3457
3452
  const isBar = kind === "bar";
@@ -3651,17 +3646,17 @@ function ScatterChart({
3651
3646
  }) {
3652
3647
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
3653
3648
  const styles = useScopedStyles("twc-scatter-styles", SCATTER_CSS);
3654
- const uid = React54__default.useId();
3649
+ const uid = React55__default.useId();
3655
3650
  const gid = uid.replace(/[^a-zA-Z0-9]/g, "");
3656
3651
  const clipId = `twc-sc-clip-${gid}`;
3657
3652
  const tableId = tableFallback ? `${uid}-table` : void 0;
3658
3653
  const { containerRef, tip, show, hide } = useChartTooltip();
3659
- const [focus, setFocus] = React54__default.useState(null);
3660
- const [selected, setSelected] = React54__default.useState(null);
3661
- const [zoom, setZoom] = React54__default.useState(null);
3662
- const [drag, setDrag] = React54__default.useState(null);
3663
- const svgRef = React54__default.useRef(null);
3664
- const movedRef = React54__default.useRef(false);
3654
+ const [focus, setFocus] = React55__default.useState(null);
3655
+ const [selected, setSelected] = React55__default.useState(null);
3656
+ const [zoom, setZoom] = React55__default.useState(null);
3657
+ const [drag, setDrag] = React55__default.useState(null);
3658
+ const svgRef = React55__default.useRef(null);
3659
+ const movedRef = React55__default.useRef(false);
3665
3660
  const list = Array.isArray(series) ? series : [];
3666
3661
  const vFmt = valueFormat || fmtNumber;
3667
3662
  const xFmt = xFormat || vFmt;
@@ -3834,7 +3829,7 @@ function ScatterChart({
3834
3829
  selectPoint(hit.key);
3835
3830
  }
3836
3831
  };
3837
- React54__default.useEffect(() => {
3832
+ React55__default.useEffect(() => {
3838
3833
  if (!canZoom) return void 0;
3839
3834
  const svg = svgRef.current;
3840
3835
  if (!svg) return void 0;
@@ -4020,11 +4015,11 @@ function RadarChart({
4020
4015
  }) {
4021
4016
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4022
4017
  const styles = useScopedStyles("twc-radarchart-styles", CHART_CSS3);
4023
- const uid = React54__default.useId();
4018
+ const uid = React55__default.useId();
4024
4019
  const tableId = tableFallback ? `${uid}-table` : void 0;
4025
4020
  const { containerRef, tip, show, hide } = useChartTooltip();
4026
- const [focus, setFocus] = React54__default.useState(null);
4027
- const [selected, setSelected] = React54__default.useState(null);
4021
+ const [focus, setFocus] = React55__default.useState(null);
4022
+ const [selected, setSelected] = React55__default.useState(null);
4028
4023
  const rows = data || [];
4029
4024
  const keys = series && series.length ? series : ["value"];
4030
4025
  const fmt = valueFormat || fmtNumber;
@@ -4174,12 +4169,12 @@ function PolarAreaChart({
4174
4169
  }) {
4175
4170
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4176
4171
  const styles = useScopedStyles("twc-polar-styles", CHART_CSS4);
4177
- const uid = React54__default.useId();
4172
+ const uid = React55__default.useId();
4178
4173
  const tableId = tableFallback ? `${uid}-table` : void 0;
4179
4174
  const { containerRef, tip, show, hide } = useChartTooltip();
4180
- const [active, setActive] = React54__default.useState(null);
4181
- const [focus, setFocus] = React54__default.useState(null);
4182
- const [selected, setSelected] = React54__default.useState(null);
4175
+ const [active, setActive] = React55__default.useState(null);
4176
+ const [focus, setFocus] = React55__default.useState(null);
4177
+ const [selected, setSelected] = React55__default.useState(null);
4183
4178
  const rows = data || [];
4184
4179
  const n = rows.length;
4185
4180
  const fmt = valueFormat || fmtNumber;
@@ -4329,15 +4324,15 @@ function Heatmap({
4329
4324
  }) {
4330
4325
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4331
4326
  const styles = useScopedStyles("twc-heatmap-styles", HEATMAP_CSS);
4332
- const uid = React54__default.useId();
4327
+ const uid = React55__default.useId();
4333
4328
  const tableId = tableFallback ? `${uid}-table` : void 0;
4334
4329
  const { containerRef, tip, show, hide } = useChartTooltip();
4335
- const [hovered, setHovered] = React54__default.useState(null);
4336
- const [selected, setSelected] = React54__default.useState(null);
4337
- const [zoom, setZoom] = React54__default.useState(null);
4338
- const [drag, setDrag] = React54__default.useState(null);
4339
- const svgRef = React54__default.useRef(null);
4340
- const movedRef = React54__default.useRef(false);
4330
+ const [hovered, setHovered] = React55__default.useState(null);
4331
+ const [selected, setSelected] = React55__default.useState(null);
4332
+ const [zoom, setZoom] = React55__default.useState(null);
4333
+ const [drag, setDrag] = React55__default.useState(null);
4334
+ const svgRef = React55__default.useRef(null);
4335
+ const movedRef = React55__default.useRef(false);
4341
4336
  const clickable = !!onDataClick;
4342
4337
  const selectMark = (key) => setSelected((s) => s === key ? null : key);
4343
4338
  const rows = Array.isArray(data) ? data : [];
@@ -4500,7 +4495,7 @@ function Heatmap({
4500
4495
  selectMark(cell.key);
4501
4496
  }
4502
4497
  };
4503
- React54__default.useEffect(() => {
4498
+ React55__default.useEffect(() => {
4504
4499
  if (!canZoom) return void 0;
4505
4500
  const svg = svgRef.current;
4506
4501
  if (!svg) return void 0;
@@ -4670,11 +4665,11 @@ function FunnelChart({
4670
4665
  }) {
4671
4666
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4672
4667
  const styles = useScopedStyles("twc-funnel-styles", FUNNEL_CSS);
4673
- const uid = React54__default.useId();
4668
+ const uid = React55__default.useId();
4674
4669
  const tableId = tableFallback ? `${uid}-table` : void 0;
4675
4670
  const { containerRef, tip, show, hide } = useChartTooltip();
4676
- const [active, setActive] = React54__default.useState(null);
4677
- const [selected, setSelected] = React54__default.useState(null);
4671
+ const [active, setActive] = React55__default.useState(null);
4672
+ const [selected, setSelected] = React55__default.useState(null);
4678
4673
  const clickable = !!onDataClick;
4679
4674
  const rows = data || [];
4680
4675
  const n = rows.length;
@@ -4792,11 +4787,11 @@ function Treemap({
4792
4787
  }) {
4793
4788
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4794
4789
  const styles = useScopedStyles("twc-treemap-styles", TREEMAP_CSS);
4795
- const uid = React54__default.useId();
4790
+ const uid = React55__default.useId();
4796
4791
  const tableId = tableFallback ? `${uid}-table` : void 0;
4797
4792
  const { containerRef, tip, show, hide } = useChartTooltip();
4798
- const [hovered, setHovered] = React54__default.useState(null);
4799
- const [selected, setSelected] = React54__default.useState(null);
4793
+ const [hovered, setHovered] = React55__default.useState(null);
4794
+ const [selected, setSelected] = React55__default.useState(null);
4800
4795
  const rows = data || [];
4801
4796
  const fmt = valueFormat || fmtNumber;
4802
4797
  const svgAriaLabel = ariaLabelProp ?? ariaLabel ?? "treemap";
@@ -4954,13 +4949,13 @@ function Candlestick({
4954
4949
  }) {
4955
4950
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
4956
4951
  const styles = useScopedStyles("twc-candlestick-styles", CANDLE_CSS);
4957
- const uid = React54__default.useId();
4952
+ const uid = React55__default.useId();
4958
4953
  const tableId = tableFallback ? `${uid}-table` : void 0;
4959
4954
  const { containerRef, tip, show, hide } = useChartTooltip();
4960
- const [selected, setSelected] = React54__default.useState(null);
4961
- const [zoom, setZoom] = React54__default.useState(null);
4962
- const [drag, setDrag] = React54__default.useState(null);
4963
- const svgRef = React54__default.useRef(null);
4955
+ const [selected, setSelected] = React55__default.useState(null);
4956
+ const [zoom, setZoom] = React55__default.useState(null);
4957
+ const [drag, setDrag] = React55__default.useState(null);
4958
+ const svgRef = React55__default.useRef(null);
4964
4959
  const fmt = valueFormat || fmtNumber;
4965
4960
  const clickable = !!onDataClick;
4966
4961
  const allRows = data || [];
@@ -5061,7 +5056,7 @@ function Candlestick({
5061
5056
  clickCandle(rows[idx], baseIdx + idx);
5062
5057
  selectMark(baseIdx + idx);
5063
5058
  };
5064
- React54__default.useEffect(() => {
5059
+ React55__default.useEffect(() => {
5065
5060
  if (!zoomable) return void 0;
5066
5061
  const svg = svgRef.current;
5067
5062
  if (!svg) return void 0;
@@ -5257,13 +5252,13 @@ function Boxplot({
5257
5252
  }) {
5258
5253
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
5259
5254
  const styles = useScopedStyles("twc-boxplot-styles", CHART_CSS5);
5260
- const uid = React54__default.useId();
5255
+ const uid = React55__default.useId();
5261
5256
  const tableId = tableFallback ? `${uid}-table` : void 0;
5262
5257
  const { containerRef, tip, show, hide } = useChartTooltip();
5263
- const [selected, setSelected] = React54__default.useState(null);
5264
- const [zoom, setZoom] = React54__default.useState(null);
5265
- const [drag, setDrag] = React54__default.useState(null);
5266
- const svgRef = React54__default.useRef(null);
5258
+ const [selected, setSelected] = React55__default.useState(null);
5259
+ const [zoom, setZoom] = React55__default.useState(null);
5260
+ const [drag, setDrag] = React55__default.useState(null);
5261
+ const svgRef = React55__default.useRef(null);
5267
5262
  const allRows = data || [];
5268
5263
  const baseIdx = zoom ? zoom.s : 0;
5269
5264
  const rows = zoom ? allRows.slice(zoom.s, zoom.e + 1) : allRows;
@@ -5363,7 +5358,7 @@ function Boxplot({
5363
5358
  if (idx == null) return;
5364
5359
  clickBox(rows[idx], idx);
5365
5360
  };
5366
- React54__default.useEffect(() => {
5361
+ React55__default.useEffect(() => {
5367
5362
  if (!zoomable) return void 0;
5368
5363
  const svg = svgRef.current;
5369
5364
  if (!svg) return void 0;
@@ -5524,13 +5519,13 @@ function RangeChart({
5524
5519
  }) {
5525
5520
  const baseStyles = useScopedStyles("twc-chart-base", CHART_BASE_CSS);
5526
5521
  const styles = useScopedStyles("twc-rangechart-styles", RANGE_CSS);
5527
- const uid = React54__default.useId();
5522
+ const uid = React55__default.useId();
5528
5523
  const tableId = tableFallback ? `${uid}-table` : void 0;
5529
5524
  const { containerRef, tip, show, hide } = useChartTooltip();
5530
- const [selected, setSelected] = React54__default.useState(null);
5531
- const [zoom, setZoom] = React54__default.useState(null);
5532
- const [drag, setDrag] = React54__default.useState(null);
5533
- const svgRef = React54__default.useRef(null);
5525
+ const [selected, setSelected] = React55__default.useState(null);
5526
+ const [zoom, setZoom] = React55__default.useState(null);
5527
+ const [drag, setDrag] = React55__default.useState(null);
5528
+ const svgRef = React55__default.useRef(null);
5534
5529
  const isArea = type === "area";
5535
5530
  const clickable = !!onDataClick;
5536
5531
  const fmt = valueFormat || fmtNumber;
@@ -5625,7 +5620,7 @@ function RangeChart({
5625
5620
  if (idx == null) return;
5626
5621
  clickAt(idx);
5627
5622
  };
5628
- React54__default.useEffect(() => {
5623
+ React55__default.useEffect(() => {
5629
5624
  if (!zoomable) return void 0;
5630
5625
  const svg = svgRef.current;
5631
5626
  if (!svg) return void 0;
@@ -5813,7 +5808,25 @@ function RangeChart({
5813
5808
  function labelText7(label) {
5814
5809
  return typeof label === "string" || typeof label === "number" ? String(label) : "";
5815
5810
  }
5816
- function Checkbox({
5811
+ function useMergedRef(...refs) {
5812
+ return React55.useCallback((node) => {
5813
+ const cleanups = [];
5814
+ for (const r2 of refs) {
5815
+ if (typeof r2 === "function") {
5816
+ const cleanup = r2(node);
5817
+ if (typeof cleanup === "function") cleanups.push(cleanup);
5818
+ } else if (r2 && typeof r2 === "object") {
5819
+ r2.current = node;
5820
+ }
5821
+ }
5822
+ if (cleanups.length === 0) return void 0;
5823
+ return () => {
5824
+ for (const r2 of refs) if (r2 && typeof r2 === "object") r2.current = null;
5825
+ for (const cleanup of cleanups) cleanup();
5826
+ };
5827
+ }, refs);
5828
+ }
5829
+ var Checkbox = /* @__PURE__ */ React55__default.forwardRef(function Checkbox2({
5817
5830
  label,
5818
5831
  description,
5819
5832
  error,
@@ -5828,7 +5841,7 @@ function Checkbox({
5828
5841
  className = "",
5829
5842
  onChange,
5830
5843
  ...rest
5831
- }) {
5844
+ }, forwardedRef) {
5832
5845
  const __twcStyles = useScopedStyles("twc-checkbox-styles", `
5833
5846
  .twc-check { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
5834
5847
  /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
@@ -5869,13 +5882,14 @@ function Checkbox({
5869
5882
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
5870
5883
  .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
5871
5884
  `);
5872
- const autoId = React54__default.useId();
5885
+ const autoId = React55__default.useId();
5873
5886
  const fieldId = id || autoId;
5874
5887
  const errId = `${fieldId}-error`;
5875
5888
  const invalid = Boolean(error);
5876
- const ref = React54__default.useRef(null);
5889
+ const ref = React55__default.useRef(null);
5890
+ const setRef = useMergedRef(ref, forwardedRef);
5877
5891
  const mixed = indeterminate && !checked;
5878
- React54__default.useEffect(() => {
5892
+ React55__default.useEffect(() => {
5879
5893
  if (ref.current) ref.current.indeterminate = mixed;
5880
5894
  }, [mixed]);
5881
5895
  if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
@@ -5887,7 +5901,7 @@ function Checkbox({
5887
5901
  /* @__PURE__ */ jsx(
5888
5902
  "input",
5889
5903
  {
5890
- ref,
5904
+ ref: setRef,
5891
5905
  id: fieldId,
5892
5906
  type: "checkbox",
5893
5907
  className: "twc-check__input",
@@ -5917,7 +5931,7 @@ function Checkbox({
5917
5931
  control,
5918
5932
  /* @__PURE__ */ jsx("span", { id: errId, className: "twc-field__error", children: error })
5919
5933
  ] });
5920
- }
5934
+ });
5921
5935
  var FIELD_CSS = `
5922
5936
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
5923
5937
  .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -6035,22 +6049,22 @@ function ColorPicker({
6035
6049
  }) {
6036
6050
  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
6037
6051
  const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
6038
- const [internal, setInternal] = React54__default.useState(defaultValue);
6052
+ const [internal, setInternal] = React55__default.useState(defaultValue);
6039
6053
  const hex = (value !== void 0 ? value : internal) || "#000000";
6040
6054
  const hexRe = alpha ? /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i : /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
6041
- const lastValidRef = React54__default.useRef(hex);
6055
+ const lastValidRef = React55__default.useRef(hex);
6042
6056
  if (hexRe.test(hex)) lastValidRef.current = hex;
6043
- const [open, setOpen] = React54__default.useState(false);
6044
- const [hsv, setHsv] = React54__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
6045
- const [coords, setCoords] = React54__default.useState(null);
6046
- const wrapRef = React54__default.useRef(null);
6047
- const triggerRef = React54__default.useRef(null);
6048
- const popRef = React54__default.useRef(null);
6049
- const areaRef = React54__default.useRef(null);
6050
- const hueRef = React54__default.useRef(null);
6051
- const alphaRef = React54__default.useRef(null);
6057
+ const [open, setOpen] = React55__default.useState(false);
6058
+ const [hsv, setHsv] = React55__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94, a: 1 });
6059
+ const [coords, setCoords] = React55__default.useState(null);
6060
+ const wrapRef = React55__default.useRef(null);
6061
+ const triggerRef = React55__default.useRef(null);
6062
+ const popRef = React55__default.useRef(null);
6063
+ const areaRef = React55__default.useRef(null);
6064
+ const hueRef = React55__default.useRef(null);
6065
+ const alphaRef = React55__default.useRef(null);
6052
6066
  const POP_W = 240;
6053
- const place = React54__default.useCallback(() => {
6067
+ const place = React55__default.useCallback(() => {
6054
6068
  const el = triggerRef.current;
6055
6069
  if (!el) return;
6056
6070
  const r2 = el.getBoundingClientRect();
@@ -6061,7 +6075,7 @@ function ColorPicker({
6061
6075
  left = Math.max(8, left);
6062
6076
  setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
6063
6077
  }, []);
6064
- React54__default.useEffect(() => {
6078
+ React55__default.useEffect(() => {
6065
6079
  if (!open) return void 0;
6066
6080
  place();
6067
6081
  const onMove = () => place();
@@ -6079,17 +6093,17 @@ function ColorPicker({
6079
6093
  ro?.disconnect();
6080
6094
  };
6081
6095
  }, [open, place]);
6082
- const labelId = React54__default.useId();
6096
+ const labelId = React55__default.useId();
6083
6097
  const descId = `${labelId}-desc`;
6084
6098
  const invalid = Boolean(error);
6085
- React54__default.useEffect(() => {
6099
+ React55__default.useEffect(() => {
6086
6100
  if (disabled) setOpen(false);
6087
6101
  }, [disabled]);
6088
- React54__default.useEffect(() => {
6102
+ React55__default.useEffect(() => {
6089
6103
  const v = hexToHsv(hex);
6090
6104
  if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
6091
6105
  }, [hex]);
6092
- React54__default.useEffect(() => {
6106
+ React55__default.useEffect(() => {
6093
6107
  if (!open) return;
6094
6108
  const onDown = (e) => {
6095
6109
  if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -6439,7 +6453,7 @@ function ensureVisible(list, el) {
6439
6453
  if (top < list.scrollTop) list.scrollTop = top - 4;
6440
6454
  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
6441
6455
  }
6442
- function Combobox({
6456
+ var Combobox = /* @__PURE__ */ React55__default.forwardRef(function Combobox2({
6443
6457
  label,
6444
6458
  hint,
6445
6459
  error,
@@ -6472,38 +6486,39 @@ function Combobox({
6472
6486
  onFocus,
6473
6487
  onKeyDown,
6474
6488
  ...rest
6475
- }) {
6489
+ }, ref) {
6476
6490
  const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
6477
6491
  if (virtualizedProp && (wrapOptions || renderOption)) warnOnce("combobox-var-height-virtualized", "twico-ui Combobox: `wrapOptions`/`renderOption` disable `virtualized` \u2014 those rows aren't a fixed height.");
6478
6492
  const virtualized = virtualizedProp && !wrapOptions && !renderOption;
6479
- const groups = React54__default.useMemo(() => normalizeGroups(options), [options]);
6480
- const flat = React54__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
6481
- const autoId = React54__default.useId();
6493
+ const groups = React55__default.useMemo(() => normalizeGroups(options), [options]);
6494
+ const flat = React55__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
6495
+ const autoId = React55__default.useId();
6482
6496
  const fieldId = id || autoId;
6483
- const [internal, setInternal] = React54__default.useState(defaultValue);
6497
+ const [internal, setInternal] = React55__default.useState(defaultValue);
6484
6498
  const current = value !== void 0 ? value : internal;
6485
6499
  const selected = flat.find((o) => o.value === current);
6486
- const [open, setOpen] = React54__default.useState(false);
6487
- const [query, setQuery] = React54__default.useState("");
6488
- const [active, setActive] = React54__default.useState(0);
6489
- const [coords, setCoords] = React54__default.useState(null);
6490
- const [scrollTop, setScrollTop] = React54__default.useState(0);
6491
- const [listH, setListH] = React54__default.useState(260);
6492
- const wrapRef = React54__default.useRef(null);
6493
- const controlRef = React54__default.useRef(null);
6494
- const inputRef = React54__default.useRef(null);
6495
- const popRef = React54__default.useRef(null);
6496
- const listRef = React54__default.useRef(null);
6497
- const activeRef = React54__default.useRef(null);
6498
- const fGroups = React54__default.useMemo(() => {
6500
+ const [open, setOpen] = React55__default.useState(false);
6501
+ const [query, setQuery] = React55__default.useState("");
6502
+ const [active, setActive] = React55__default.useState(0);
6503
+ const [coords, setCoords] = React55__default.useState(null);
6504
+ const [scrollTop, setScrollTop] = React55__default.useState(0);
6505
+ const [listH, setListH] = React55__default.useState(260);
6506
+ const wrapRef = React55__default.useRef(null);
6507
+ const controlRef = React55__default.useRef(null);
6508
+ const inputRef = React55__default.useRef(null);
6509
+ const setInputRef = useMergedRef(inputRef, ref);
6510
+ const popRef = React55__default.useRef(null);
6511
+ const listRef = React55__default.useRef(null);
6512
+ const activeRef = React55__default.useRef(null);
6513
+ const fGroups = React55__default.useMemo(() => {
6499
6514
  const q = query.trim();
6500
6515
  const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
6501
6516
  return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
6502
6517
  }, [groups, query, filter]);
6503
- const visible = React54__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
6504
- const rowH = React54__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
6518
+ const visible = React55__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
6519
+ const rowH = React55__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
6505
6520
  const GROUP_H = 30;
6506
- const { rows, totalH } = React54__default.useMemo(() => {
6521
+ const { rows, totalH } = React55__default.useMemo(() => {
6507
6522
  if (!virtualized) return { rows: [], totalH: 0 };
6508
6523
  const rows2 = [];
6509
6524
  let off = 0;
@@ -6529,7 +6544,7 @@ function Combobox({
6529
6544
  }
6530
6545
  return from;
6531
6546
  };
6532
- const place = React54__default.useCallback(() => {
6547
+ const place = React55__default.useCallback(() => {
6533
6548
  const el = controlRef.current;
6534
6549
  if (!el) return;
6535
6550
  const r2 = el.getBoundingClientRect();
@@ -6544,7 +6559,7 @@ function Combobox({
6544
6559
  flip
6545
6560
  });
6546
6561
  }, [placement, minWidth]);
6547
- React54__default.useEffect(() => {
6562
+ React55__default.useEffect(() => {
6548
6563
  if (!open || !portal) return;
6549
6564
  place();
6550
6565
  const onMove = () => place();
@@ -6562,7 +6577,7 @@ function Combobox({
6562
6577
  ro?.disconnect();
6563
6578
  };
6564
6579
  }, [open, portal, place]);
6565
- React54__default.useEffect(() => {
6580
+ React55__default.useEffect(() => {
6566
6581
  if (!open) return;
6567
6582
  const onDown = (e) => {
6568
6583
  if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -6572,33 +6587,33 @@ function Combobox({
6572
6587
  document.addEventListener("mousedown", onDown);
6573
6588
  return () => document.removeEventListener("mousedown", onDown);
6574
6589
  }, [open]);
6575
- React54__default.useEffect(() => {
6590
+ React55__default.useEffect(() => {
6576
6591
  setActive(0);
6577
6592
  }, [query]);
6578
- React54__default.useEffect(() => {
6593
+ React55__default.useEffect(() => {
6579
6594
  if (visible.length === 0) return;
6580
6595
  setActive((a) => Math.min(a, visible.length - 1));
6581
6596
  }, [visible.length]);
6582
- const onOpenChangeRef = React54__default.useRef(onOpenChange);
6597
+ const onOpenChangeRef = React55__default.useRef(onOpenChange);
6583
6598
  onOpenChangeRef.current = onOpenChange;
6584
- const prevOpenRef = React54__default.useRef(open);
6585
- React54__default.useEffect(() => {
6599
+ const prevOpenRef = React55__default.useRef(open);
6600
+ React55__default.useEffect(() => {
6586
6601
  if (prevOpenRef.current !== open) {
6587
6602
  prevOpenRef.current = open;
6588
6603
  onOpenChangeRef.current?.(open);
6589
6604
  }
6590
6605
  }, [open]);
6591
- React54__default.useEffect(() => {
6606
+ React55__default.useEffect(() => {
6592
6607
  if (!open) return;
6593
6608
  const idx = visible.findIndex((o) => o.value === current);
6594
6609
  setActive(idx >= 0 ? idx : 0);
6595
6610
  }, [open]);
6596
- React54__default.useEffect(() => {
6611
+ React55__default.useEffect(() => {
6597
6612
  if (!open || !virtualized) return;
6598
6613
  const el = listRef.current;
6599
6614
  if (el && el.clientHeight) setListH(el.clientHeight);
6600
6615
  }, [open, virtualized]);
6601
- React54__default.useEffect(() => {
6616
+ React55__default.useEffect(() => {
6602
6617
  if (!open) return;
6603
6618
  if (!virtualized) {
6604
6619
  ensureVisible(listRef.current, activeRef.current);
@@ -6727,7 +6742,7 @@ function Combobox({
6727
6742
  /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
6728
6743
  ) : renderRow(r2.o, r2.idx)),
6729
6744
  vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
6730
- ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
6745
+ ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
6731
6746
  g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
6732
6747
  g.options.map((o) => {
6733
6748
  counter += 1;
@@ -6785,7 +6800,7 @@ function Combobox({
6785
6800
  /* @__PURE__ */ jsx(
6786
6801
  "input",
6787
6802
  {
6788
- ref: inputRef,
6803
+ ref: setInputRef,
6789
6804
  id: fieldId,
6790
6805
  className: "twc-cb__input",
6791
6806
  role: "combobox",
@@ -6840,7 +6855,7 @@ function Combobox({
6840
6855
  ] }),
6841
6856
  error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
6842
6857
  ] });
6843
- }
6858
+ });
6844
6859
  var COMMAND_CSS = `
6845
6860
  .twc-cmdk__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(3px);
6846
6861
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
@@ -6891,14 +6906,14 @@ function CommandPalette({
6891
6906
  }) {
6892
6907
  const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
6893
6908
  const renderPortal = usePortal();
6894
- const [query, setQuery] = React54__default.useState("");
6895
- const [active, setActive] = React54__default.useState(0);
6896
- const inputRef = React54__default.useRef(null);
6897
- const listRef = React54__default.useRef(null);
6898
- const paletteRef = React54__default.useRef(null);
6899
- const baseId = React54__default.useId();
6900
- const [mounted, setMounted] = React54__default.useState(open);
6901
- React54__default.useEffect(() => {
6909
+ const [query, setQuery] = React55__default.useState("");
6910
+ const [active, setActive] = React55__default.useState(0);
6911
+ const inputRef = React55__default.useRef(null);
6912
+ const listRef = React55__default.useRef(null);
6913
+ const paletteRef = React55__default.useRef(null);
6914
+ const baseId = React55__default.useId();
6915
+ const [mounted, setMounted] = React55__default.useState(open);
6916
+ React55__default.useEffect(() => {
6902
6917
  if (open) {
6903
6918
  setMounted(true);
6904
6919
  return;
@@ -6907,7 +6922,7 @@ function CommandPalette({
6907
6922
  return () => clearTimeout(t);
6908
6923
  }, [open]);
6909
6924
  useScrollLock(open);
6910
- React54__default.useEffect(() => {
6925
+ React55__default.useEffect(() => {
6911
6926
  if (open) {
6912
6927
  setQuery("");
6913
6928
  setActive(0);
@@ -6915,7 +6930,7 @@ function CommandPalette({
6915
6930
  }, [open]);
6916
6931
  useFocusTrap(paletteRef, open && mounted);
6917
6932
  const isTop = useLayer(open && mounted);
6918
- React54__default.useEffect(() => {
6933
+ React55__default.useEffect(() => {
6919
6934
  if (!open) return void 0;
6920
6935
  const onKey = (e) => {
6921
6936
  if (e.defaultPrevented || !isTop()) return;
@@ -6928,7 +6943,7 @@ function CommandPalette({
6928
6943
  return () => document.removeEventListener("keydown", onKey);
6929
6944
  }, [open, onClose, isTop]);
6930
6945
  const q = query.trim().toLowerCase();
6931
- const filtered = React54__default.useMemo(() => commands.filter(
6946
+ const filtered = React55__default.useMemo(() => commands.filter(
6932
6947
  (c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
6933
6948
  ), [commands, q]);
6934
6949
  const groups = [];
@@ -6943,7 +6958,7 @@ function CommandPalette({
6943
6958
  g.items.push(c);
6944
6959
  flat.push(c);
6945
6960
  });
6946
- React54__default.useEffect(() => {
6961
+ React55__default.useEffect(() => {
6947
6962
  setActive(0);
6948
6963
  }, [query]);
6949
6964
  const run = (cmd) => {
@@ -6963,7 +6978,7 @@ function CommandPalette({
6963
6978
  if (cmd) run(cmd);
6964
6979
  }
6965
6980
  }
6966
- React54__default.useEffect(() => {
6981
+ React55__default.useEffect(() => {
6967
6982
  const node = listRef.current?.querySelector('[data-active="true"]');
6968
6983
  if (node) node.scrollIntoView({ block: "nearest" });
6969
6984
  }, [active]);
@@ -7153,13 +7168,13 @@ function Currency({
7153
7168
  const prec = precision != null ? precision : meta.precision;
7154
7169
  const sym = symbol != null ? symbol : meta.symbol;
7155
7170
  const cur = code != null ? code : meta.code;
7156
- const autoId = React54__default.useId();
7171
+ const autoId = React55__default.useId();
7157
7172
  const fieldId = id || autoId;
7158
7173
  const invalid = Boolean(error);
7159
7174
  const controlled = value !== void 0;
7160
- const [internal, setInternal] = React54__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
7175
+ const [internal, setInternal] = React55__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
7161
7176
  const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
7162
- React54__default.useEffect(() => {
7177
+ React55__default.useEffect(() => {
7163
7178
  if (!controlled) return;
7164
7179
  const raw = String(value ?? "");
7165
7180
  if (shown !== raw) {
@@ -7167,7 +7182,7 @@ function Currency({
7167
7182
  onValueChange?.(shown === "" || Number.isNaN(n) ? null : n, shown);
7168
7183
  }
7169
7184
  }, [controlled, shown, value]);
7170
- React54__default.useEffect(() => {
7185
+ React55__default.useEffect(() => {
7171
7186
  if (controlled) return;
7172
7187
  const next = clampPrecision(internal, prec);
7173
7188
  if (next === internal) return;
@@ -7226,8 +7241,8 @@ function Currency({
7226
7241
  ] });
7227
7242
  }
7228
7243
  function useFallbackName(ref, hasOwnName) {
7229
- const [needsFallback, setNeedsFallback] = React54__default.useState(false);
7230
- const useIso2 = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
7244
+ const [needsFallback, setNeedsFallback] = React55__default.useState(false);
7245
+ const useIso2 = typeof document !== "undefined" ? React55__default.useLayoutEffect : React55__default.useEffect;
7231
7246
  useIso2(() => {
7232
7247
  if (hasOwnName) {
7233
7248
  setNeedsFallback(false);
@@ -7354,7 +7369,7 @@ function ensureVisible2(list, el) {
7354
7369
  if (top < list.scrollTop) list.scrollTop = top - 4;
7355
7370
  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
7356
7371
  }
7357
- function Select({
7372
+ var Select = /* @__PURE__ */ React55__default.forwardRef(function Select2({
7358
7373
  label,
7359
7374
  hint,
7360
7375
  error,
@@ -7385,46 +7400,47 @@ function Select({
7385
7400
  onClick,
7386
7401
  onKeyDown,
7387
7402
  ...rest
7388
- }) {
7403
+ }, ref) {
7389
7404
  const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
7390
7405
  if (virtualizedProp && renderOption) warnOnce("select-renderoption-virtualized", "twico-ui Select: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
7391
7406
  const virtualized = virtualizedProp && !renderOption;
7392
- const bufferRef = React54__default.useRef("");
7393
- const bufferTimerRef = React54__default.useRef(null);
7394
- const groups = React54__default.useMemo(() => normalizeGroups2(options), [options]);
7395
- const flat = React54__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
7396
- const autoId = React54__default.useId();
7407
+ const bufferRef = React55__default.useRef("");
7408
+ const bufferTimerRef = React55__default.useRef(null);
7409
+ const groups = React55__default.useMemo(() => normalizeGroups2(options), [options]);
7410
+ const flat = React55__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
7411
+ const autoId = React55__default.useId();
7397
7412
  const fieldId = id || autoId;
7398
- const [internal, setInternal] = React54__default.useState(defaultValue);
7413
+ const [internal, setInternal] = React55__default.useState(defaultValue);
7399
7414
  const current = value !== void 0 ? value : internal;
7400
- const [open, setOpen] = React54__default.useState(false);
7401
- const [render, setRender] = React54__default.useState(false);
7402
- const [active, setActive] = React54__default.useState(0);
7403
- const [coords, setCoords] = React54__default.useState(null);
7404
- const [query, setQuery] = React54__default.useState("");
7405
- const [scrollTop, setScrollTop] = React54__default.useState(0);
7406
- const [listH, setListH] = React54__default.useState(260);
7407
- const wrapRef = React54__default.useRef(null);
7408
- const triggerRef = React54__default.useRef(null);
7409
- const popRef = React54__default.useRef(null);
7410
- const listRef = React54__default.useRef(null);
7411
- const activeRef = React54__default.useRef(null);
7412
- const searchRef = React54__default.useRef(null);
7415
+ const [open, setOpen] = React55__default.useState(false);
7416
+ const [render, setRender] = React55__default.useState(false);
7417
+ const [active, setActive] = React55__default.useState(0);
7418
+ const [coords, setCoords] = React55__default.useState(null);
7419
+ const [query, setQuery] = React55__default.useState("");
7420
+ const [scrollTop, setScrollTop] = React55__default.useState(0);
7421
+ const [listH, setListH] = React55__default.useState(260);
7422
+ const wrapRef = React55__default.useRef(null);
7423
+ const triggerRef = React55__default.useRef(null);
7424
+ const setTriggerRef = useMergedRef(triggerRef, ref);
7425
+ const popRef = React55__default.useRef(null);
7426
+ const listRef = React55__default.useRef(null);
7427
+ const activeRef = React55__default.useRef(null);
7428
+ const searchRef = React55__default.useRef(null);
7413
7429
  const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
7414
- const fGroupsLive = React54__default.useMemo(() => {
7430
+ const fGroupsLive = React55__default.useMemo(() => {
7415
7431
  const q = query.trim().toLowerCase();
7416
7432
  if (!q) return groups;
7417
7433
  return groups.map((g) => ({ group: g.group, options: g.options.filter((o) => o.label.toLowerCase().includes(q) || o.description && o.description.toLowerCase().includes(q)) })).filter((g) => g.options.length);
7418
7434
  }, [groups, query]);
7419
- const fGroupsFrozen = React54__default.useRef(fGroupsLive);
7420
- React54__default.useEffect(() => {
7435
+ const fGroupsFrozen = React55__default.useRef(fGroupsLive);
7436
+ React55__default.useEffect(() => {
7421
7437
  if (open) fGroupsFrozen.current = fGroupsLive;
7422
7438
  }, [open, fGroupsLive]);
7423
7439
  const fGroups = open ? fGroupsLive : fGroupsFrozen.current;
7424
- const visible = React54__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
7425
- const rowH = React54__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
7440
+ const visible = React55__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
7441
+ const rowH = React55__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
7426
7442
  const GROUP_H = 30;
7427
- const { rows, totalH } = React54__default.useMemo(() => {
7443
+ const { rows, totalH } = React55__default.useMemo(() => {
7428
7444
  if (!virtualized) return { rows: [], totalH: 0 };
7429
7445
  const rows2 = [];
7430
7446
  let off = 0;
@@ -7451,7 +7467,7 @@ function Select({
7451
7467
  }
7452
7468
  return from;
7453
7469
  };
7454
- const place = React54__default.useCallback(() => {
7470
+ const place = React55__default.useCallback(() => {
7455
7471
  const el = triggerRef.current;
7456
7472
  if (!el) return;
7457
7473
  const r2 = el.getBoundingClientRect();
@@ -7467,7 +7483,7 @@ function Select({
7467
7483
  flip
7468
7484
  });
7469
7485
  }, [placement, minWidth, matchTriggerWidth]);
7470
- React54__default.useEffect(() => {
7486
+ React55__default.useEffect(() => {
7471
7487
  if (!open || !portal) return;
7472
7488
  place();
7473
7489
  const onMove = () => place();
@@ -7485,7 +7501,7 @@ function Select({
7485
7501
  ro?.disconnect();
7486
7502
  };
7487
7503
  }, [open, portal, place]);
7488
- React54__default.useEffect(() => {
7504
+ React55__default.useEffect(() => {
7489
7505
  if (!open) return;
7490
7506
  const idx = flat.findIndex((o) => o.value === current);
7491
7507
  setActive(idx >= 0 ? idx : 0);
@@ -7500,19 +7516,19 @@ function Select({
7500
7516
  document.addEventListener("mousedown", onDown);
7501
7517
  return () => document.removeEventListener("mousedown", onDown);
7502
7518
  }, [open]);
7503
- React54__default.useEffect(() => {
7519
+ React55__default.useEffect(() => {
7504
7520
  setActive(0);
7505
7521
  }, [query]);
7506
- React54__default.useEffect(() => {
7522
+ React55__default.useEffect(() => {
7507
7523
  if (visible.length === 0) return;
7508
7524
  setActive((a) => Math.min(a, visible.length - 1));
7509
7525
  }, [visible.length]);
7510
- React54__default.useEffect(() => {
7526
+ React55__default.useEffect(() => {
7511
7527
  if (!open || !virtualized) return;
7512
7528
  const el = listRef.current;
7513
7529
  if (el && el.clientHeight) setListH(el.clientHeight);
7514
7530
  }, [open, virtualized, render]);
7515
- React54__default.useEffect(() => {
7531
+ React55__default.useEffect(() => {
7516
7532
  if (!open) return;
7517
7533
  if (!virtualized) {
7518
7534
  ensureVisible2(listRef.current, activeRef.current);
@@ -7529,7 +7545,7 @@ function Select({
7529
7545
  if (next !== el.scrollTop) el.scrollTop = next;
7530
7546
  setScrollTop(next);
7531
7547
  }, [active, open, virtualized, rows, listH]);
7532
- React54__default.useEffect(() => {
7548
+ React55__default.useEffect(() => {
7533
7549
  if (open) {
7534
7550
  setRender(true);
7535
7551
  return;
@@ -7538,8 +7554,8 @@ function Select({
7538
7554
  const t = setTimeout(() => setRender(false), 170);
7539
7555
  return () => clearTimeout(t);
7540
7556
  }, [open]);
7541
- const prevOpen = React54__default.useRef(false);
7542
- React54__default.useEffect(() => {
7557
+ const prevOpen = React55__default.useRef(false);
7558
+ React55__default.useEffect(() => {
7543
7559
  if (prevOpen.current && !open) {
7544
7560
  const ae = typeof document !== "undefined" ? document.activeElement : null;
7545
7561
  if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
@@ -7692,7 +7708,7 @@ function Select({
7692
7708
  /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
7693
7709
  ) : renderRow(r2.o, r2.idx)),
7694
7710
  vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
7695
- ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
7711
+ ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
7696
7712
  g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
7697
7713
  g.options.map((o) => {
7698
7714
  counter += 1;
@@ -7739,7 +7755,7 @@ function Select({
7739
7755
  {
7740
7756
  type: "button",
7741
7757
  id: fieldId,
7742
- ref: triggerRef,
7758
+ ref: setTriggerRef,
7743
7759
  className: "twc-sel__trigger",
7744
7760
  "data-size": size,
7745
7761
  "data-tone": tone,
@@ -7777,7 +7793,7 @@ function Select({
7777
7793
  ] }),
7778
7794
  error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
7779
7795
  ] });
7780
- }
7796
+ });
7781
7797
  var CURF_CSS = `
7782
7798
  /* Shared input shell (self-contained \u2014 CurrencyField must not depend on the
7783
7799
  Currency component being rendered on the same page to get these styles). */
@@ -7854,21 +7870,21 @@ function CurrencyField({
7854
7870
  ...rest
7855
7871
  }) {
7856
7872
  const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
7857
- const autoId = React54__default.useId();
7873
+ const autoId = React55__default.useId();
7858
7874
  const fieldId = id || autoId;
7859
7875
  const invalid = Boolean(error);
7860
7876
  const curControlled = currency !== void 0;
7861
- const [curInternal, setCurInternal] = React54__default.useState(defaultCurrency);
7877
+ const [curInternal, setCurInternal] = React55__default.useState(defaultCurrency);
7862
7878
  const cur = curControlled ? currency : curInternal;
7863
7879
  const meta = CURRENCIES[cur] || CURRENCIES.USD;
7864
7880
  const prec = meta.precision;
7865
7881
  const valControlled = value !== void 0;
7866
- const [valInternal, setValInternal] = React54__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
7882
+ const [valInternal, setValInternal] = React55__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
7867
7883
  const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
7868
7884
  const descId = `${fieldId}-desc`;
7869
7885
  const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
7870
7886
  const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
7871
- React54__default.useEffect(() => {
7887
+ React55__default.useEffect(() => {
7872
7888
  if (!valControlled) {
7873
7889
  const clamped = clampPrecision(valInternal, prec);
7874
7890
  if (clamped !== valInternal) {
@@ -7884,7 +7900,7 @@ function CurrencyField({
7884
7900
  }
7885
7901
  }
7886
7902
  }, [prec, cur, shown, value, valControlled, valInternal]);
7887
- const options = React54__default.useMemo(() => {
7903
+ const options = React55__default.useMemo(() => {
7888
7904
  if (!currencies) return CURRENCY_OPTIONS;
7889
7905
  return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
7890
7906
  }, [currencies]);
@@ -8032,7 +8048,7 @@ var INPUT_EXTRA_CSS = `
8032
8048
  .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
8033
8049
  .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
8034
8050
  `;
8035
- function Input({
8051
+ var Input = /* @__PURE__ */ React55__default.forwardRef(function Input2({
8036
8052
  label,
8037
8053
  hint,
8038
8054
  error,
@@ -8050,16 +8066,16 @@ function Input({
8050
8066
  id,
8051
8067
  className = "",
8052
8068
  ...rest
8053
- }) {
8069
+ }, ref) {
8054
8070
  const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
8055
8071
  const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
8056
- const autoId = React54__default.useId();
8072
+ const autoId = React55__default.useId();
8057
8073
  const fieldId = id || autoId;
8058
8074
  const descId = `${fieldId}-desc`;
8059
8075
  const countId = `${fieldId}-count`;
8060
8076
  const invalid = Boolean(error);
8061
8077
  const countControlled = rest.value !== void 0;
8062
- const [len2, setLen] = React54__default.useState(() => String(rest.defaultValue ?? "").length);
8078
+ const [len2, setLen] = React55__default.useState(() => String(rest.defaultValue ?? "").length);
8063
8079
  const count = countControlled ? String(rest.value ?? "").length : len2;
8064
8080
  const max = rest.maxLength;
8065
8081
  const showCounter = showCount && max != null;
@@ -8068,13 +8084,20 @@ function Input({
8068
8084
  rest.onChange?.(e);
8069
8085
  if ((showCount || clearable) && !countControlled) setLen(e.target.value.length);
8070
8086
  };
8071
- const inputRef = React54__default.useRef(null);
8072
- const userRef = rest.ref;
8073
- const setRef = React54__default.useCallback((node) => {
8087
+ const inputRef = React55__default.useRef(null);
8088
+ const setRef = React55__default.useCallback((node) => {
8074
8089
  inputRef.current = node;
8075
- if (typeof userRef === "function") userRef(node);
8076
- else if (userRef && typeof userRef === "object") userRef.current = node;
8077
- }, [userRef]);
8090
+ if (typeof ref === "function") {
8091
+ const cleanup = ref(node);
8092
+ if (typeof cleanup === "function") return () => {
8093
+ inputRef.current = null;
8094
+ cleanup();
8095
+ };
8096
+ } else if (ref && typeof ref === "object") {
8097
+ ref.current = node;
8098
+ }
8099
+ return void 0;
8100
+ }, [ref]);
8078
8101
  const clearField = () => {
8079
8102
  const el = inputRef.current;
8080
8103
  if (!el) return;
@@ -8088,7 +8111,7 @@ function Input({
8088
8111
  const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
8089
8112
  const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
8090
8113
  const isPassword = type === "password";
8091
- const [revealed, setRevealed] = React54__default.useState(false);
8114
+ const [revealed, setRevealed] = React55__default.useState(false);
8092
8115
  const effectiveType = isPassword && revealed ? "text" : type;
8093
8116
  const suffix = rightIcon ? /* @__PURE__ */ jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsx(
8094
8117
  "button",
@@ -8153,7 +8176,7 @@ function Input({
8153
8176
  ] }) : null
8154
8177
  ] }) : null
8155
8178
  ] });
8156
- }
8179
+ });
8157
8180
  var MULTI_CSS = `
8158
8181
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
8159
8182
  .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -8270,7 +8293,7 @@ function ensureVisible3(list, el) {
8270
8293
  if (top < list.scrollTop) list.scrollTop = top - 4;
8271
8294
  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight + 4;
8272
8295
  }
8273
- function MultiSelect({
8296
+ var MultiSelect = /* @__PURE__ */ React55__default.forwardRef(function MultiSelect2({
8274
8297
  label,
8275
8298
  hint,
8276
8299
  error,
@@ -8302,37 +8325,38 @@ function MultiSelect({
8302
8325
  onFocus,
8303
8326
  onKeyDown,
8304
8327
  ...rest
8305
- }) {
8328
+ }, ref) {
8306
8329
  const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
8307
8330
  if (virtualizedProp && renderOption) warnOnce("multiselect-renderoption-virtualized", "twico-ui MultiSelect: `renderOption` disables `virtualized` \u2014 custom rows aren't a fixed height.");
8308
8331
  const virtualized = virtualizedProp && !renderOption;
8309
- const groups = React54__default.useMemo(() => normalizeGroups3(options), [options]);
8310
- const flat = React54__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
8311
- const autoId = React54__default.useId();
8332
+ const groups = React55__default.useMemo(() => normalizeGroups3(options), [options]);
8333
+ const flat = React55__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
8334
+ const autoId = React55__default.useId();
8312
8335
  const fieldId = id || autoId;
8313
- const [internal, setInternal] = React54__default.useState(defaultValue);
8336
+ const [internal, setInternal] = React55__default.useState(defaultValue);
8314
8337
  const selected = value !== void 0 ? value : internal;
8315
- const [open, setOpen] = React54__default.useState(false);
8316
- const [query, setQuery] = React54__default.useState("");
8317
- const [active, setActive] = React54__default.useState(0);
8318
- const [coords, setCoords] = React54__default.useState(null);
8319
- const [scrollTop, setScrollTop] = React54__default.useState(0);
8320
- const [listH, setListH] = React54__default.useState(260);
8321
- const wrapRef = React54__default.useRef(null);
8322
- const controlRef = React54__default.useRef(null);
8323
- const inputRef = React54__default.useRef(null);
8324
- const popRef = React54__default.useRef(null);
8325
- const listRef = React54__default.useRef(null);
8326
- const activeRef = React54__default.useRef(null);
8327
- const fGroups = React54__default.useMemo(() => {
8338
+ const [open, setOpen] = React55__default.useState(false);
8339
+ const [query, setQuery] = React55__default.useState("");
8340
+ const [active, setActive] = React55__default.useState(0);
8341
+ const [coords, setCoords] = React55__default.useState(null);
8342
+ const [scrollTop, setScrollTop] = React55__default.useState(0);
8343
+ const [listH, setListH] = React55__default.useState(260);
8344
+ const wrapRef = React55__default.useRef(null);
8345
+ const controlRef = React55__default.useRef(null);
8346
+ const inputRef = React55__default.useRef(null);
8347
+ const setInputRef = useMergedRef(inputRef, ref);
8348
+ const popRef = React55__default.useRef(null);
8349
+ const listRef = React55__default.useRef(null);
8350
+ const activeRef = React55__default.useRef(null);
8351
+ const fGroups = React55__default.useMemo(() => {
8328
8352
  const q = query.trim();
8329
8353
  const fn = filter === false ? null : typeof filter === "function" ? filter : matches2;
8330
8354
  return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
8331
8355
  }, [groups, query, filter]);
8332
- const visible = React54__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
8333
- const rowH = React54__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
8356
+ const visible = React55__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
8357
+ const rowH = React55__default.useMemo(() => visible.some((o) => o.description) ? 48 : 36, [visible]);
8334
8358
  const GROUP_H = 30;
8335
- const { rows, totalH } = React54__default.useMemo(() => {
8359
+ const { rows, totalH } = React55__default.useMemo(() => {
8336
8360
  if (!virtualized) return { rows: [], totalH: 0 };
8337
8361
  const rows2 = [];
8338
8362
  let off = 0;
@@ -8360,7 +8384,7 @@ function MultiSelect({
8360
8384
  }
8361
8385
  return from;
8362
8386
  };
8363
- const place = React54__default.useCallback(() => {
8387
+ const place = React55__default.useCallback(() => {
8364
8388
  const el = controlRef.current;
8365
8389
  if (!el) return;
8366
8390
  const r2 = el.getBoundingClientRect();
@@ -8375,7 +8399,7 @@ function MultiSelect({
8375
8399
  flip
8376
8400
  });
8377
8401
  }, [placement, minWidth]);
8378
- React54__default.useEffect(() => {
8402
+ React55__default.useEffect(() => {
8379
8403
  if (!open || !portal) return;
8380
8404
  place();
8381
8405
  const onMove = () => place();
@@ -8393,7 +8417,7 @@ function MultiSelect({
8393
8417
  ro?.disconnect();
8394
8418
  };
8395
8419
  }, [open, portal, place]);
8396
- React54__default.useEffect(() => {
8420
+ React55__default.useEffect(() => {
8397
8421
  if (!open) return;
8398
8422
  const onDown = (e) => {
8399
8423
  if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -8404,19 +8428,19 @@ function MultiSelect({
8404
8428
  document.addEventListener("mousedown", onDown);
8405
8429
  return () => document.removeEventListener("mousedown", onDown);
8406
8430
  }, [open]);
8407
- React54__default.useEffect(() => {
8431
+ React55__default.useEffect(() => {
8408
8432
  setActive(0);
8409
8433
  }, [query]);
8410
- React54__default.useEffect(() => {
8434
+ React55__default.useEffect(() => {
8411
8435
  if (visible.length === 0) return;
8412
8436
  setActive((a) => Math.min(a, visible.length - 1));
8413
8437
  }, [visible.length]);
8414
- React54__default.useEffect(() => {
8438
+ React55__default.useEffect(() => {
8415
8439
  if (!open || !virtualized) return;
8416
8440
  const el = listRef.current;
8417
8441
  if (el && el.clientHeight) setListH(el.clientHeight);
8418
8442
  }, [open, virtualized]);
8419
- React54__default.useEffect(() => {
8443
+ React55__default.useEffect(() => {
8420
8444
  if (!open) return;
8421
8445
  if (!virtualized) {
8422
8446
  ensureVisible3(listRef.current, activeRef.current);
@@ -8540,7 +8564,7 @@ function MultiSelect({
8540
8564
  /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: r2.label }, `g${r2.gi}`)
8541
8565
  ) : renderRow(r2.o, r2.idx)),
8542
8566
  vBottom > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { height: vBottom } }) : null
8543
- ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
8567
+ ] }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
8544
8568
  g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", role: "presentation", children: g.group }) : null,
8545
8569
  g.options.map((o) => {
8546
8570
  counter += 1;
@@ -8613,7 +8637,7 @@ function MultiSelect({
8613
8637
  /* @__PURE__ */ jsx(
8614
8638
  "input",
8615
8639
  {
8616
- ref: inputRef,
8640
+ ref: setInputRef,
8617
8641
  id: fieldId,
8618
8642
  className: "twc-ms__input",
8619
8643
  role: "combobox",
@@ -8672,7 +8696,7 @@ function MultiSelect({
8672
8696
  ] }),
8673
8697
  error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
8674
8698
  ] });
8675
- }
8699
+ });
8676
8700
  var PAGINATION_CSS = `
8677
8701
  .twc-pagination { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); }
8678
8702
  .twc-page {
@@ -8747,7 +8771,7 @@ function Pagination({
8747
8771
  }
8748
8772
  const jumperEnabled = showPageJumper ?? showJumper;
8749
8773
  const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
8750
- const [internal, setInternal] = React54__default.useState(defaultPage);
8774
+ const [internal, setInternal] = React55__default.useState(defaultPage);
8751
8775
  const page = pageProp !== void 0 ? pageProp : internal;
8752
8776
  const pages = buildPages(page, total, siblings, boundaries);
8753
8777
  const go = (p) => {
@@ -8755,7 +8779,7 @@ function Pagination({
8755
8779
  if (pageProp === void 0) setInternal(p);
8756
8780
  onChange?.(p);
8757
8781
  };
8758
- const [jump, setJump] = React54__default.useState("");
8782
+ const [jump, setJump] = React55__default.useState("");
8759
8783
  const submitJump = () => {
8760
8784
  const n = parseInt(jump, 10);
8761
8785
  if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -9231,8 +9255,22 @@ var DT_CSS = `
9231
9255
  .twc-dt__row:hover .twc-dt__row-resizer::after { background: var(--color-border-strong); }
9232
9256
  .twc-dt__row-resizer:hover::after { background: var(--color-primary); }
9233
9257
 
9258
+ /* #481: the cell background reads --twc-dt-row-bg, which getRowStyle sets on the <tr>. It has to come
9259
+ through a custom property rather than straight off the row, because this rule paints an OPAQUE
9260
+ --color-surface on every cell: a background set on the <tr> would sit behind it and never show,
9261
+ which would make the commonest use of a row-style hook silently do nothing. Cells in a pinned
9262
+ COLUMN inherit it too, so a tinted row does not develop a hole where a sticky column scrolls over
9263
+ it.
9264
+ Layering: this rule is (0,1,0), the LOWEST specificity of any background in this sheet, so the
9265
+ row tint is the bottom layer above the plain surface and every built-in state covers it - hover,
9266
+ row selection, data-active, data-pinned-row, data-row-grabbed, the diff data-op washes, cell
9267
+ selection/active, inline editing (each (0,3,0), (0,4,0) for the pinned-column twins, or (0,2,0)
9268
+ for the cell-level ones) - and an inline per-cell cellStyle
9269
+ covers them all. That is the intended rule, not an accident of ordering: a row tint is a
9270
+ data-derived wash, and no data wash should be able to hide an interaction state. Consumers who
9271
+ need a tint that outranks those use getRowClassName and a rule of their own. */
9234
9272
  .twc-dt__td { padding: 0 12px; height: var(--_rowh, 44px); border-bottom: var(--border-thin) solid var(--color-divider);
9235
- font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface);
9273
+ font-size: var(--text-sm); color: var(--color-text); background: var(--twc-dt-row-bg, var(--color-surface));
9236
9274
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
9237
9275
  /* Wrap-text columns: content flows onto multiple lines (the row grows down) instead of
9238
9276
  clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
@@ -9618,27 +9656,27 @@ function renderCombined(srcCols, row, cfg) {
9618
9656
  const v = getColVal(sc, row);
9619
9657
  if (v == null || v === "") return;
9620
9658
  const disp = sc.valueFormatter ? sc.valueFormatter(v, row) : v;
9621
- const label = cfg.labels ? React54__default.createElement("span", { className: "twc-dt__combine-label" }, colLabel(sc) + ": ") : null;
9622
- if (count > 0 && cfg.layout !== "stack") nodes.push(React54__default.createElement("span", { key: "sep" + idx, className: "twc-dt__combine-sep", "aria-hidden": "true" }, cfg.separator));
9623
- nodes.push(React54__default.createElement("span", { key: idx, className: "twc-dt__combine-item" }, label, disp));
9659
+ const label = cfg.labels ? React55__default.createElement("span", { className: "twc-dt__combine-label" }, colLabel(sc) + ": ") : null;
9660
+ if (count > 0 && cfg.layout !== "stack") nodes.push(React55__default.createElement("span", { key: "sep" + idx, className: "twc-dt__combine-sep", "aria-hidden": "true" }, cfg.separator));
9661
+ nodes.push(React55__default.createElement("span", { key: idx, className: "twc-dt__combine-item" }, label, disp));
9624
9662
  count++;
9625
9663
  });
9626
9664
  if (!nodes.length) return "";
9627
- return React54__default.createElement("span", { className: cfg.layout === "stack" ? "twc-dt__combine twc-dt__combine--stack" : "twc-dt__combine" }, nodes);
9665
+ return React55__default.createElement("span", { className: cfg.layout === "stack" ? "twc-dt__combine twc-dt__combine--stack" : "twc-dt__combine" }, nodes);
9628
9666
  }
9629
9667
  var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
9630
9668
  function renderDiffCell(col, val, row) {
9631
9669
  const meta = row && row.__diffMeta;
9632
9670
  if (!meta) return diffValueNode(col, val, row);
9633
- if (meta.op === "removed") return React54__default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from));
9634
- if (meta.op === "added") return React54__default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to));
9671
+ if (meta.op === "removed") return React55__default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from));
9672
+ if (meta.op === "added") return React55__default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to));
9635
9673
  if (meta.op === "modified" && meta.changed.has(col.field)) {
9636
- return React54__default.createElement(
9674
+ return React55__default.createElement(
9637
9675
  "span",
9638
9676
  { className: "twc-dt__diff-change" },
9639
- React54__default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from)),
9640
- React54__default.createElement("span", { className: "twc-dt__diff-arrow", "aria-hidden": "true" }, "\u2192"),
9641
- React54__default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to))
9677
+ React55__default.createElement("span", { className: "twc-dt__diff-old" }, diffValueNode(col, getColVal(col, meta.from), meta.from)),
9678
+ React55__default.createElement("span", { className: "twc-dt__diff-arrow", "aria-hidden": "true" }, "\u2192"),
9679
+ React55__default.createElement("span", { className: "twc-dt__diff-new" }, diffValueNode(col, getColVal(col, meta.to), meta.to))
9642
9680
  );
9643
9681
  }
9644
9682
  return diffValueNode(col, val, row);
@@ -9655,7 +9693,7 @@ var DIFF_OP_COLUMN = {
9655
9693
  resizable: true,
9656
9694
  wrappable: false,
9657
9695
  hideable: false,
9658
- renderCell: (v) => v && DIFF_OPS[v] ? React54__default.createElement(Badge, { size: "sm", variant: "soft", tone: DIFF_OPS[v].tone }, DIFF_OPS[v].label) : null,
9696
+ renderCell: (v) => v && DIFF_OPS[v] ? React55__default.createElement(Badge, { size: "sm", variant: "soft", tone: DIFF_OPS[v].tone }, DIFF_OPS[v].label) : null,
9659
9697
  exportValue: (v) => v && DIFF_OPS[v] ? DIFF_OPS[v].label : ""
9660
9698
  };
9661
9699
  function testFilter(raw, op, target, type) {
@@ -9728,9 +9766,9 @@ function runDatatableQuery(rows, query, options = {}) {
9728
9766
  return { rows: page, total, filtered: out };
9729
9767
  }
9730
9768
  function useFloating() {
9731
- const [pos, setPos] = React54__default.useState(null);
9732
- const cfg = React54__default.useRef(null);
9733
- const place = React54__default.useCallback(() => {
9769
+ const [pos, setPos] = React55__default.useState(null);
9770
+ const cfg = React55__default.useRef(null);
9771
+ const place = React55__default.useCallback(() => {
9734
9772
  const c = cfg.current;
9735
9773
  if (!c || !c.el || !c.el.isConnected) return null;
9736
9774
  const r2 = c.el.getBoundingClientRect();
@@ -9741,17 +9779,17 @@ function useFloating() {
9741
9779
  const top = r2.bottom + 6;
9742
9780
  return { top, left, width: c.width, anchorX: r2.left + r2.width / 2, maxHeight: Math.max(180, vh - top - M) };
9743
9781
  }, []);
9744
- const open = React54__default.useCallback((el, align = "left", width = 220) => {
9782
+ const open = React55__default.useCallback((el, align = "left", width = 220) => {
9745
9783
  cfg.current = { el, align, width };
9746
9784
  const p = place();
9747
9785
  if (p) setPos(p);
9748
9786
  }, [place]);
9749
- const close = React54__default.useCallback(() => {
9787
+ const close = React55__default.useCallback(() => {
9750
9788
  cfg.current = null;
9751
9789
  setPos(null);
9752
9790
  }, []);
9753
9791
  const isOpen = pos != null;
9754
- React54__default.useEffect(() => {
9792
+ React55__default.useEffect(() => {
9755
9793
  if (!isOpen) return void 0;
9756
9794
  const update = () => {
9757
9795
  const p = place();
@@ -9775,11 +9813,11 @@ function Caret({ pos }) {
9775
9813
  return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
9776
9814
  }
9777
9815
  function AsyncFilterValue({ col, value, onChange }) {
9778
- const [opts, setOpts] = React54__default.useState([]);
9779
- const [loading, setLoading] = React54__default.useState(false);
9780
- const reqRef = React54__default.useRef(0);
9781
- const debRef = React54__default.useRef();
9782
- const load = React54__default.useCallback((query) => {
9816
+ const [opts, setOpts] = React55__default.useState([]);
9817
+ const [loading, setLoading] = React55__default.useState(false);
9818
+ const reqRef = React55__default.useRef(0);
9819
+ const debRef = React55__default.useRef();
9820
+ const load = React55__default.useCallback((query) => {
9783
9821
  const id = ++reqRef.current;
9784
9822
  setLoading(true);
9785
9823
  Promise.resolve(col.loadValueOptions(query)).then(
@@ -9794,16 +9832,16 @@ function AsyncFilterValue({ col, value, onChange }) {
9794
9832
  }
9795
9833
  );
9796
9834
  }, [col]);
9797
- React54__default.useEffect(() => {
9835
+ React55__default.useEffect(() => {
9798
9836
  load("");
9799
9837
  return () => clearTimeout(debRef.current);
9800
9838
  }, [load]);
9801
- const onInput = React54__default.useCallback((q) => {
9839
+ const onInput = React55__default.useCallback((q) => {
9802
9840
  clearTimeout(debRef.current);
9803
9841
  debRef.current = setTimeout(() => load(q), 250);
9804
9842
  }, [load]);
9805
9843
  const selected = Array.isArray(value) ? value : [];
9806
- const merged = React54__default.useMemo(() => {
9844
+ const merged = React55__default.useMemo(() => {
9807
9845
  const seen2 = new Set(opts.map((o) => o.value));
9808
9846
  return [...selected.filter((v) => !seen2.has(v)).map((v) => ({ value: v, label: String(v) })), ...opts];
9809
9847
  }, [opts, selected]);
@@ -9822,9 +9860,9 @@ function AsyncFilterValue({ col, value, onChange }) {
9822
9860
  );
9823
9861
  }
9824
9862
  function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
9825
- const ref = React54__default.useRef(null);
9863
+ const ref = React55__default.useRef(null);
9826
9864
  const isSelect = col.editType === "select" || options && col.editType !== "text";
9827
- React54__default.useEffect(() => {
9865
+ React55__default.useEffect(() => {
9828
9866
  if (isSelect) {
9829
9867
  const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
9830
9868
  return () => clearTimeout(t);
@@ -9999,6 +10037,8 @@ function Datatable({
9999
10037
  onColumnVisibilityChange,
10000
10038
  batchActions = [],
10001
10039
  onRowSelectionChange,
10040
+ getRowStyle,
10041
+ getRowClassName,
10002
10042
  showExport = false,
10003
10043
  showDensity = false,
10004
10044
  showPivot = false,
@@ -10087,21 +10127,21 @@ function Datatable({
10087
10127
  }) {
10088
10128
  const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
10089
10129
  const isDiff = !!diff;
10090
- const [diffOnly, setDiffOnly] = React54__default.useState(diff && diff.onlyChanged !== void 0 ? diff.onlyChanged : true);
10130
+ const [diffOnly, setDiffOnly] = React55__default.useState(diff && diff.onlyChanged !== void 0 ? diff.onlyChanged : true);
10091
10131
  const diffRowKey = diff && diff.rowKey || rowKeyProp || ((r2) => r2 == null ? r2 : r2.id);
10092
- const diffData = React54__default.useMemo(
10132
+ const diffData = React55__default.useMemo(
10093
10133
  () => isDiff ? classifyDiff(diff.from || [], diff.to || [], columnsProp, diffRowKey, { moveDetection: diff.moveDetection, compare: diff.compare }) : null,
10094
10134
  [isDiff, diff, columnsProp]
10095
10135
  // eslint-disable-line react-hooks/exhaustive-deps
10096
10136
  );
10097
- const onClassifiedRef = React54__default.useRef(diff && diff.onClassified);
10137
+ const onClassifiedRef = React55__default.useRef(diff && diff.onClassified);
10098
10138
  onClassifiedRef.current = diff && diff.onClassified;
10099
- React54__default.useEffect(() => {
10139
+ React55__default.useEffect(() => {
10100
10140
  if (diffData && onClassifiedRef.current) onClassifiedRef.current(diffData.counts);
10101
10141
  }, [diffData]);
10102
- const diffRowKeyFn = React54__default.useCallback((r2) => r2.__diffKey, []);
10103
- const [userCombine, setUserCombine] = React54__default.useState({});
10104
- const columns = React54__default.useMemo(
10142
+ const diffRowKeyFn = React55__default.useCallback((r2) => r2.__diffKey, []);
10143
+ const [userCombine, setUserCombine] = React55__default.useState({});
10144
+ const columns = React55__default.useMemo(
10105
10145
  () => {
10106
10146
  if (!isDiff) return columnsProp;
10107
10147
  const byField = {};
@@ -10114,12 +10154,12 @@ function Datatable({
10114
10154
  },
10115
10155
  [isDiff, columnsProp, userCombine]
10116
10156
  );
10117
- const rows = React54__default.useMemo(
10157
+ const rows = React55__default.useMemo(
10118
10158
  () => isDiff ? diffData.rows.filter((r2) => !diffOnly || r2.op !== "unchanged").map((r2) => ({ ...r2.to || r2.from, __diffop: r2.op, __diffMeta: r2, __diffKey: r2.key })) : rowsProp,
10119
10159
  [isDiff, diffData, diffOnly, rowsProp]
10120
10160
  );
10121
10161
  const rowKey = isDiff ? diffRowKeyFn : rowKeyProp;
10122
- const cols = React54__default.useMemo(() => {
10162
+ const cols = React55__default.useMemo(() => {
10123
10163
  const seenFields = /* @__PURE__ */ new Map();
10124
10164
  for (const c of columns) {
10125
10165
  if (!c || c.field == null) continue;
@@ -10187,9 +10227,9 @@ function Datatable({
10187
10227
  }
10188
10228
  return out;
10189
10229
  }, [columns, rowPinning, userCombine, defaultColumn]);
10190
- const _autoKey = React54__default.useRef();
10230
+ const _autoKey = React55__default.useRef();
10191
10231
  if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
10192
- const keyOf = React54__default.useCallback(rowKey || ((r2, i) => {
10232
+ const keyOf = React55__default.useCallback(rowKey || ((r2, i) => {
10193
10233
  if (r2 != null && r2.id != null) return r2.id;
10194
10234
  if (r2 != null && typeof r2 === "object") {
10195
10235
  const m = _autoKey.current.map;
@@ -10202,19 +10242,19 @@ function Datatable({
10202
10242
  }
10203
10243
  return i;
10204
10244
  }), [rowKey]);
10205
- const [sort, setSort] = React54__default.useState(null);
10206
- const [filters, setFilters] = React54__default.useState([]);
10245
+ const [sort, setSort] = React55__default.useState(null);
10246
+ const [filters, setFilters] = React55__default.useState([]);
10207
10247
  const filterLogicControlled = filterLogicProp !== void 0;
10208
- const [filterLogicInternal, setFilterLogicInternal] = React54__default.useState(defaultFilterLogic === "or" ? "or" : "and");
10248
+ const [filterLogicInternal, setFilterLogicInternal] = React55__default.useState(defaultFilterLogic === "or" ? "or" : "and");
10209
10249
  const filterLogic = filterLogicControlled ? filterLogicProp === "or" ? "or" : "and" : filterLogicInternal;
10210
10250
  const setFilterLogic = (next) => {
10211
10251
  const v = next === "or" ? "or" : "and";
10212
10252
  if (!filterLogicControlled) setFilterLogicInternal(v);
10213
10253
  onFilterLogicChange?.(v);
10214
10254
  };
10215
- const [hidden, setHidden] = React54__default.useState(() => /* @__PURE__ */ new Set());
10216
- const [showRowNum, setShowRowNum] = React54__default.useState(rowNumbers);
10217
- const [wrapped, setWrapped] = React54__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
10255
+ const [hidden, setHidden] = React55__default.useState(() => /* @__PURE__ */ new Set());
10256
+ const [showRowNum, setShowRowNum] = React55__default.useState(rowNumbers);
10257
+ const [wrapped, setWrapped] = React55__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
10218
10258
  const toggleWrap = (field) => setWrapped((w) => {
10219
10259
  const n = new Set(w);
10220
10260
  n.has(field) ? n.delete(field) : n.add(field);
@@ -10256,7 +10296,7 @@ function Datatable({
10256
10296
  });
10257
10297
  closeCombineEditor();
10258
10298
  };
10259
- const [pins, setPins] = React54__default.useState(() => {
10299
+ const [pins, setPins] = React55__default.useState(() => {
10260
10300
  const left = [], right = [];
10261
10301
  columns.forEach((c) => {
10262
10302
  if (c.pinned === "left") left.push(c.field);
@@ -10264,23 +10304,23 @@ function Datatable({
10264
10304
  });
10265
10305
  return { left, right };
10266
10306
  });
10267
- const [density, setDensity] = React54__default.useState(densityProp);
10268
- const [internalQuick, setInternalQuick] = React54__default.useState("");
10307
+ const [density, setDensity] = React55__default.useState(densityProp);
10308
+ const [internalQuick, setInternalQuick] = React55__default.useState("");
10269
10309
  const quick = quickFilter !== void 0 ? quickFilter : internalQuick;
10270
10310
  const commitQuick = (v) => {
10271
10311
  onQuickFilterChange?.(v);
10272
10312
  if (quickFilter === void 0) setInternalQuick(v);
10273
10313
  commitPage(0);
10274
10314
  };
10275
- const [selected, setSelected] = React54__default.useState(() => /* @__PURE__ */ new Set());
10276
- const [activeRow, setActiveRow] = React54__default.useState(null);
10315
+ const [selected, setSelected] = React55__default.useState(() => /* @__PURE__ */ new Set());
10316
+ const [activeRow, setActiveRow] = React55__default.useState(null);
10277
10317
  const activeRowControlled = activeRowId !== void 0;
10278
10318
  const activeRowVal = activeRowControlled ? activeRowId : activeRow;
10279
- const [internalActiveCell, setInternalActiveCell] = React54__default.useState(null);
10319
+ const [internalActiveCell, setInternalActiveCell] = React55__default.useState(null);
10280
10320
  const activeCellControlled = activeCell !== void 0;
10281
10321
  const activeCellVal = activeCellControlled ? activeCell : internalActiveCell;
10282
- const selfCellSigRef = React54__default.useRef(null);
10283
- const jumpAppliedRef = React54__default.useRef(null);
10322
+ const selfCellSigRef = React55__default.useRef(null);
10323
+ const jumpAppliedRef = React55__default.useRef(null);
10284
10324
  const commitActiveCell = (next) => {
10285
10325
  const sig = next ? next.key + "\0" + next.field : null;
10286
10326
  selfCellSigRef.current = sig;
@@ -10288,10 +10328,10 @@ function Datatable({
10288
10328
  onActiveCellChange?.(next);
10289
10329
  if (!activeCellControlled) setInternalActiveCell(next);
10290
10330
  };
10291
- const [anchorCell, setAnchorCell] = React54__default.useState(null);
10292
- const gridId = React54__default.useId();
10293
- const [internalPage, setInternalPage] = React54__default.useState(0);
10294
- const [internalRpp, setInternalRpp] = React54__default.useState(pageSize > 0 ? pageSize : 10);
10331
+ const [anchorCell, setAnchorCell] = React55__default.useState(null);
10332
+ const gridId = React55__default.useId();
10333
+ const [internalPage, setInternalPage] = React55__default.useState(0);
10334
+ const [internalRpp, setInternalRpp] = React55__default.useState(pageSize > 0 ? pageSize : 10);
10295
10335
  const pageControlled = page !== void 0;
10296
10336
  const pageSizeControlled = onPageSizeChange !== void 0;
10297
10337
  const pageVal = pageControlled ? page : internalPage;
@@ -10305,42 +10345,42 @@ function Datatable({
10305
10345
  if (!pageSizeControlled) setInternalRpp(next);
10306
10346
  commitPage(0);
10307
10347
  };
10308
- const [colQuery, setColQuery] = React54__default.useState("");
10309
- const [widths, setWidths] = React54__default.useState({});
10310
- const [order, setOrder] = React54__default.useState(() => columns.map((c) => c.field));
10311
- const [drag, setDrag] = React54__default.useState({ from: null, over: null, after: false });
10312
- const [aggOn, setAggOn] = React54__default.useState(showAggregation);
10313
- const [focus, setFocus] = React54__default.useState({ r: 0, c: 0 });
10314
- const [interacting, setInteracting] = React54__default.useState(null);
10315
- const gridRef = React54__default.useRef(null);
10316
- const [groupBy, setGroupBy] = React54__default.useState(rowGrouping || []);
10317
- const [internalCollapsed, setInternalCollapsed] = React54__default.useState(() => new Set(defaultCollapsedGroups));
10348
+ const [colQuery, setColQuery] = React55__default.useState("");
10349
+ const [widths, setWidths] = React55__default.useState({});
10350
+ const [order, setOrder] = React55__default.useState(() => columns.map((c) => c.field));
10351
+ const [drag, setDrag] = React55__default.useState({ from: null, over: null, after: false });
10352
+ const [aggOn, setAggOn] = React55__default.useState(showAggregation);
10353
+ const [focus, setFocus] = React55__default.useState({ r: 0, c: 0 });
10354
+ const [interacting, setInteracting] = React55__default.useState(null);
10355
+ const gridRef = React55__default.useRef(null);
10356
+ const [groupBy, setGroupBy] = React55__default.useState(rowGrouping || []);
10357
+ const [internalCollapsed, setInternalCollapsed] = React55__default.useState(() => new Set(defaultCollapsedGroups));
10318
10358
  const collapsedControlled = collapsedGroups !== void 0;
10319
- const collapsedSet = React54__default.useMemo(() => new Set(collapsedControlled ? collapsedGroups : internalCollapsed), [collapsedControlled, collapsedGroups, internalCollapsed]);
10320
- const collapsedKey = React54__default.useMemo(() => [...collapsedSet].sort().join("\0"), [collapsedSet]);
10321
- const [internalExpanded, setInternalExpanded] = React54__default.useState(() => /* @__PURE__ */ new Set());
10359
+ const collapsedSet = React55__default.useMemo(() => new Set(collapsedControlled ? collapsedGroups : internalCollapsed), [collapsedControlled, collapsedGroups, internalCollapsed]);
10360
+ const collapsedKey = React55__default.useMemo(() => [...collapsedSet].sort().join("\0"), [collapsedSet]);
10361
+ const [internalExpanded, setInternalExpanded] = React55__default.useState(() => /* @__PURE__ */ new Set());
10322
10362
  const expandControlled = expandedRowIds !== void 0;
10323
- const expandedSet = React54__default.useMemo(
10363
+ const expandedSet = React55__default.useMemo(
10324
10364
  () => new Set(expandControlled ? expandedRowIds : internalExpanded),
10325
10365
  [expandControlled, expandedRowIds, internalExpanded]
10326
10366
  );
10327
- const expandedKey = React54__default.useMemo(() => JSON.stringify([...expandedSet].sort()), [expandedSet]);
10328
- const [pinnedRows, setPinnedRows] = React54__default.useState({ top: [], bottom: [] });
10329
- const [headH, setHeadH] = React54__default.useState(41);
10330
- const theadRef = React54__default.useRef(null);
10331
- const [rowOrder, setRowOrder] = React54__default.useState(null);
10332
- React54__default.useEffect(() => {
10367
+ const expandedKey = React55__default.useMemo(() => JSON.stringify([...expandedSet].sort()), [expandedSet]);
10368
+ const [pinnedRows, setPinnedRows] = React55__default.useState({ top: [], bottom: [] });
10369
+ const [headH, setHeadH] = React55__default.useState(41);
10370
+ const theadRef = React55__default.useRef(null);
10371
+ const [rowOrder, setRowOrder] = React55__default.useState(null);
10372
+ React55__default.useEffect(() => {
10333
10373
  if (serverMode) setRowOrder(null);
10334
10374
  }, [rows, serverMode]);
10335
- const [rowHeights, setRowHeights] = React54__default.useState({});
10336
- const [rowDrag, setRowDrag] = React54__default.useState({ from: null, over: null, after: false });
10337
- const [rowGrab, setRowGrab] = React54__default.useState(null);
10338
- const [reorderMsg, setReorderMsg] = React54__default.useState("");
10339
- const rowFocusRef = React54__default.useRef(null);
10340
- const [fWidths, setFWidths] = React54__default.useState({});
10341
- const [fPanelSize, setFPanelSize] = React54__default.useState(null);
10342
- const [batchNameW, setBatchNameW] = React54__default.useState(null);
10343
- const [popSizes, setPopSizes] = React54__default.useState({});
10375
+ const [rowHeights, setRowHeights] = React55__default.useState({});
10376
+ const [rowDrag, setRowDrag] = React55__default.useState({ from: null, over: null, after: false });
10377
+ const [rowGrab, setRowGrab] = React55__default.useState(null);
10378
+ const [reorderMsg, setReorderMsg] = React55__default.useState("");
10379
+ const rowFocusRef = React55__default.useRef(null);
10380
+ const [fWidths, setFWidths] = React55__default.useState({});
10381
+ const [fPanelSize, setFPanelSize] = React55__default.useState(null);
10382
+ const [batchNameW, setBatchNameW] = React55__default.useState(null);
10383
+ const [popSizes, setPopSizes] = React55__default.useState({});
10344
10384
  const serializeState = () => ({
10345
10385
  filters: filters.map(({ id, ...f }) => f),
10346
10386
  // strip the internal row id
@@ -10425,11 +10465,11 @@ function Datatable({
10425
10465
  if (Array.isArray(s.grouping)) setGroupBy(s.grouping.filter((f) => known.has(f)));
10426
10466
  if (Array.isArray(s.collapsedGroups) && !collapsedControlled) setInternalCollapsed(new Set(s.collapsedGroups.filter((k) => typeof k === "string")));
10427
10467
  };
10428
- const stateReadyRef = React54__default.useRef(false);
10429
- const stateRestoredRef = React54__default.useRef(false);
10430
- const onStateChangeRef = React54__default.useRef(onStateChange);
10468
+ const stateReadyRef = React55__default.useRef(false);
10469
+ const stateRestoredRef = React55__default.useRef(false);
10470
+ const onStateChangeRef = React55__default.useRef(onStateChange);
10431
10471
  onStateChangeRef.current = onStateChange;
10432
- React54__default.useEffect(() => {
10472
+ React55__default.useEffect(() => {
10433
10473
  if (!stateReadyRef.current) return void 0;
10434
10474
  if (!stateKey && !onStateChange) return void 0;
10435
10475
  const state = serializeState();
@@ -10455,7 +10495,7 @@ function Datatable({
10455
10495
  if (saved) applyState(saved);
10456
10496
  stateRestoredRef.current = true;
10457
10497
  };
10458
- React54__default.useEffect(() => {
10498
+ React55__default.useEffect(() => {
10459
10499
  if (columns.length) {
10460
10500
  restoreState();
10461
10501
  stateReadyRef.current = true;
@@ -10464,14 +10504,14 @@ function Datatable({
10464
10504
  stateReadyRef.current = false;
10465
10505
  };
10466
10506
  }, []);
10467
- React54__default.useEffect(() => {
10507
+ React55__default.useEffect(() => {
10468
10508
  if (stateRestoredRef.current || !columns.length) return;
10469
10509
  restoreState();
10470
10510
  stateReadyRef.current = true;
10471
10511
  }, [columns.length]);
10472
- const rootRef = React54__default.useRef(null);
10473
- const [compact, setCompact] = React54__default.useState(false);
10474
- React54__default.useEffect(() => {
10512
+ const rootRef = React55__default.useRef(null);
10513
+ const [compact, setCompact] = React55__default.useState(false);
10514
+ React55__default.useEffect(() => {
10475
10515
  const el = rootRef.current;
10476
10516
  if (!el) return void 0;
10477
10517
  const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -10484,13 +10524,13 @@ function Datatable({
10484
10524
  else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
10485
10525
  };
10486
10526
  }, []);
10487
- const scrollRef = React54__default.useRef(null);
10488
- const filterPanelRef = React54__default.useRef(null);
10489
- const measureCanvas = React54__default.useRef(null);
10490
- const [scrollTop, setScrollTop] = React54__default.useState(0);
10491
- const [viewportH, setViewportH] = React54__default.useState(0);
10492
- const [ovTip, setOvTip] = React54__default.useState(null);
10493
- const ovTimer = React54__default.useRef(null);
10527
+ const scrollRef = React55__default.useRef(null);
10528
+ const filterPanelRef = React55__default.useRef(null);
10529
+ const measureCanvas = React55__default.useRef(null);
10530
+ const [scrollTop, setScrollTop] = React55__default.useState(0);
10531
+ const [viewportH, setViewportH] = React55__default.useState(0);
10532
+ const [ovTip, setOvTip] = React55__default.useState(null);
10533
+ const ovTimer = React55__default.useRef(null);
10494
10534
  const hideOverflowTip = () => {
10495
10535
  clearTimeout(ovTimer.current);
10496
10536
  setOvTip((t) => t ? null : t);
@@ -10514,8 +10554,8 @@ function Datatable({
10514
10554
  if (el && el.scrollWidth > el.clientWidth + 1) setOvTip({ anchor: el, text: el.getAttribute("data-ovtext") });
10515
10555
  else hideOverflowTip();
10516
10556
  };
10517
- React54__default.useEffect(() => () => clearTimeout(ovTimer.current), []);
10518
- React54__default.useEffect(() => {
10557
+ React55__default.useEffect(() => () => clearTimeout(ovTimer.current), []);
10558
+ React55__default.useEffect(() => {
10519
10559
  if (!ovTip) return void 0;
10520
10560
  const onKey = (e) => {
10521
10561
  if (e.key === "Escape") setOvTip(null);
@@ -10523,8 +10563,8 @@ function Datatable({
10523
10563
  document.addEventListener("keydown", onKey);
10524
10564
  return () => document.removeEventListener("keydown", onKey);
10525
10565
  }, [ovTip]);
10526
- const [pivotOn, setPivotOn] = React54__default.useState(pivotMode);
10527
- const [aggConfig, setAggConfig] = React54__default.useState(() => {
10566
+ const [pivotOn, setPivotOn] = React55__default.useState(pivotMode);
10567
+ const [aggConfig, setAggConfig] = React55__default.useState(() => {
10528
10568
  const m = {};
10529
10569
  (columns || []).forEach((c) => {
10530
10570
  if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -10532,26 +10572,26 @@ function Datatable({
10532
10572
  return m;
10533
10573
  });
10534
10574
  const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
10535
- const [pivotConfig, setPivotConfig] = React54__default.useState(() => ({
10575
+ const [pivotConfig, setPivotConfig] = React55__default.useState(() => ({
10536
10576
  rows: pivot && pivot.rows || [],
10537
10577
  columns: pivot && pivot.columns || [],
10538
10578
  values: pivot && pivot.values || []
10539
10579
  }));
10540
10580
  const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
10541
- React54__default.useEffect(() => {
10581
+ React55__default.useEffect(() => {
10542
10582
  setOrder((prev) => mergeColOrder(prev, columns.map((c) => c.field).filter(Boolean)));
10543
10583
  }, [columns]);
10544
- const densityPropRef = React54__default.useRef(densityProp);
10545
- React54__default.useEffect(() => {
10584
+ const densityPropRef = React55__default.useRef(densityProp);
10585
+ React55__default.useEffect(() => {
10546
10586
  if (densityPropRef.current === densityProp) return;
10547
10587
  densityPropRef.current = densityProp;
10548
10588
  setDensity(densityProp);
10549
10589
  }, [densityProp]);
10550
- React54__default.useEffect(() => {
10590
+ React55__default.useEffect(() => {
10551
10591
  setAggOn(showAggregation);
10552
10592
  }, [showAggregation]);
10553
- const pageSizePropRef = React54__default.useRef(pageSize);
10554
- React54__default.useEffect(() => {
10593
+ const pageSizePropRef = React55__default.useRef(pageSize);
10594
+ React55__default.useEffect(() => {
10555
10595
  if (pageSizePropRef.current === pageSize) return;
10556
10596
  pageSizePropRef.current = pageSize;
10557
10597
  if (pageSizeControlled) return;
@@ -10559,8 +10599,8 @@ function Datatable({
10559
10599
  setInternalPage(0);
10560
10600
  }, [pageSize]);
10561
10601
  const rowGroupingKey = (rowGrouping || []).join("\0");
10562
- const rowGroupingKeyRef = React54__default.useRef(rowGroupingKey);
10563
- React54__default.useEffect(() => {
10602
+ const rowGroupingKeyRef = React55__default.useRef(rowGroupingKey);
10603
+ React55__default.useEffect(() => {
10564
10604
  if (rowGroupingKeyRef.current === rowGroupingKey) return;
10565
10605
  rowGroupingKeyRef.current = rowGroupingKey;
10566
10606
  setGroupBy(rowGrouping || []);
@@ -10578,29 +10618,29 @@ function Datatable({
10578
10618
  };
10579
10619
  const intrinsicWidth = (c) => c.width === "auto" ? autoWidth(c) : typeof c.width === "number" ? c.width : 160;
10580
10620
  const widthOf = (c) => clampWidth(widths[c.field] ?? intrinsicWidth(c), c);
10581
- const [colMenu, setColMenu] = React54__default.useState(null);
10621
+ const [colMenu, setColMenu] = React55__default.useState(null);
10582
10622
  const [menuPos, openMenu, closeMenu] = useFloating();
10583
- const [panel, setPanel] = React54__default.useState(null);
10623
+ const [panel, setPanel] = React55__default.useState(null);
10584
10624
  const [panelPos, openPanel, closePanel] = useFloating();
10585
- const [combineTarget, setCombineTarget] = React54__default.useState(null);
10586
- const [combineDraft, setCombineDraft] = React54__default.useState(null);
10587
- const combinePanelRef = React54__default.useRef(null);
10588
- React54__default.useEffect(() => {
10625
+ const [combineTarget, setCombineTarget] = React55__default.useState(null);
10626
+ const [combineDraft, setCombineDraft] = React55__default.useState(null);
10627
+ const combinePanelRef = React55__default.useRef(null);
10628
+ React55__default.useEffect(() => {
10589
10629
  if (panel === "combine" && combinePanelRef.current) {
10590
10630
  const el = combinePanelRef.current.querySelector('[role="switch"], button, [tabindex]');
10591
10631
  (el || combinePanelRef.current).focus?.();
10592
10632
  }
10593
10633
  }, [panel]);
10594
- const [rowMenu, setRowMenu] = React54__default.useState(null);
10634
+ const [rowMenu, setRowMenu] = React55__default.useState(null);
10595
10635
  const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
10596
- const [exportOpen, setExportOpen] = React54__default.useState(false);
10636
+ const [exportOpen, setExportOpen] = React55__default.useState(false);
10597
10637
  const [exportPos, openExport, closeExport] = useFloating();
10598
- const menuTriggerRef = React54__default.useRef(null);
10599
- const colMenuRef = React54__default.useRef(null);
10600
- const rowMenuRef = React54__default.useRef(null);
10601
- const exportMenuRef = React54__default.useRef(null);
10602
- const quickSearchRef = React54__default.useRef(null);
10603
- const colSearchRef = React54__default.useRef(null);
10638
+ const menuTriggerRef = React55__default.useRef(null);
10639
+ const colMenuRef = React55__default.useRef(null);
10640
+ const rowMenuRef = React55__default.useRef(null);
10641
+ const exportMenuRef = React55__default.useRef(null);
10642
+ const quickSearchRef = React55__default.useRef(null);
10643
+ const colSearchRef = React55__default.useRef(null);
10604
10644
  function focusFirstItem(container) {
10605
10645
  if (!container) return;
10606
10646
  const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -10639,16 +10679,16 @@ function Datatable({
10639
10679
  restoreTriggerFocus();
10640
10680
  }
10641
10681
  }
10642
- React54__default.useEffect(() => {
10682
+ React55__default.useEffect(() => {
10643
10683
  if (colMenu) focusFirstItem(colMenuRef.current);
10644
10684
  }, [colMenu]);
10645
- React54__default.useEffect(() => {
10685
+ React55__default.useEffect(() => {
10646
10686
  if (rowMenu) focusFirstItem(rowMenuRef.current);
10647
10687
  }, [rowMenu]);
10648
- React54__default.useEffect(() => {
10688
+ React55__default.useEffect(() => {
10649
10689
  if (exportOpen) focusFirstItem(exportMenuRef.current);
10650
10690
  }, [exportOpen]);
10651
- React54__default.useEffect(() => {
10691
+ React55__default.useEffect(() => {
10652
10692
  if (!colMenu && !panel && !rowMenu) return;
10653
10693
  const closeAll = () => {
10654
10694
  setColMenu(null);
@@ -10671,7 +10711,7 @@ function Datatable({
10671
10711
  document.removeEventListener("keydown", onKey);
10672
10712
  };
10673
10713
  }, [colMenu, panel, rowMenu]);
10674
- React54__default.useEffect(() => {
10714
+ React55__default.useEffect(() => {
10675
10715
  if (!exportOpen) return;
10676
10716
  const close = () => {
10677
10717
  setExportOpen(false);
@@ -10690,37 +10730,37 @@ function Datatable({
10690
10730
  document.removeEventListener("keydown", onKey);
10691
10731
  };
10692
10732
  }, [exportOpen]);
10693
- const colByField = React54__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
10733
+ const colByField = React55__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
10694
10734
  const fieldLabel = (f) => colLabel(colByField[f] || { field: f });
10695
- const combineSources = React54__default.useMemo(() => {
10735
+ const combineSources = React55__default.useMemo(() => {
10696
10736
  const s = /* @__PURE__ */ new Set();
10697
10737
  for (const cfg of Object.values(userCombine)) (cfg && cfg.fields ? cfg.fields : []).slice(1).forEach((f) => s.add(f));
10698
10738
  return s;
10699
10739
  }, [userCombine]);
10700
- const stackCombineTargets = React54__default.useMemo(
10740
+ const stackCombineTargets = React55__default.useMemo(
10701
10741
  () => new Set(cols.filter((c) => {
10702
10742
  const cfg = combineCfg(userCombine[c.field] || c.combine);
10703
10743
  return cfg && cfg.layout === "stack";
10704
10744
  }).map((c) => c.field)),
10705
10745
  [cols, userCombine]
10706
10746
  );
10707
- const effectiveHidden = React54__default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
10708
- const effectiveWrapped = React54__default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
10709
- const visibleCols = React54__default.useMemo(() => cols.filter((c) => !effectiveHidden.has(c.field)), [cols, effectiveHidden]);
10747
+ const effectiveHidden = React55__default.useMemo(() => combineSources.size ? /* @__PURE__ */ new Set([...hidden, ...combineSources]) : hidden, [hidden, combineSources]);
10748
+ const effectiveWrapped = React55__default.useMemo(() => stackCombineTargets.size ? /* @__PURE__ */ new Set([...wrapped, ...stackCombineTargets]) : wrapped, [wrapped, stackCombineTargets]);
10749
+ const visibleCols = React55__default.useMemo(() => cols.filter((c) => !effectiveHidden.has(c.field)), [cols, effectiveHidden]);
10710
10750
  const colFieldsKey = JSON.stringify(
10711
10751
  cols.filter((c) => typeof c.field === "string" && c.type !== "actions").map((c) => c.field)
10712
10752
  );
10713
- const colFields = React54__default.useMemo(() => JSON.parse(colFieldsKey), [colFieldsKey]);
10753
+ const colFields = React55__default.useMemo(() => JSON.parse(colFieldsKey), [colFieldsKey]);
10714
10754
  const hiddenKey = JSON.stringify([...hidden].filter((f) => typeof f === "string").sort());
10715
- const visibleColumns = React54__default.useMemo(() => {
10755
+ const visibleColumns = React55__default.useMemo(() => {
10716
10756
  const h = new Set(JSON.parse(hiddenKey));
10717
10757
  return colFields.filter((f) => !h.has(f));
10718
10758
  }, [colFields, hiddenKey]);
10719
- const hiddenColumns = React54__default.useMemo(() => {
10759
+ const hiddenColumns = React55__default.useMemo(() => {
10720
10760
  const h = new Set(JSON.parse(hiddenKey));
10721
10761
  return colFields.filter((f) => h.has(f));
10722
10762
  }, [colFields, hiddenKey]);
10723
- const ordered = React54__default.useMemo(() => {
10763
+ const ordered = React55__default.useMemo(() => {
10724
10764
  const orderIdx = (f) => {
10725
10765
  const i = order.indexOf(f);
10726
10766
  return i === -1 ? 9999 : i;
@@ -10739,8 +10779,8 @@ function Datatable({
10739
10779
  const EXP_W = hasExpandCol ? 44 : 0;
10740
10780
  const numLeft = EXP_W + CHK_W;
10741
10781
  const leadW = numLeft + (showRowNum ? NUM_W : 0);
10742
- const visLeft = React54__default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
10743
- const visRight = React54__default.useMemo(() => pins.right.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.right, colByField, effectiveHidden]);
10782
+ const visLeft = React55__default.useMemo(() => pins.left.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.left, colByField, effectiveHidden]);
10783
+ const visRight = React55__default.useMemo(() => pins.right.filter((f) => colByField[f] && !effectiveHidden.has(f)), [pins.right, colByField, effectiveHidden]);
10744
10784
  const stickyOf = (field) => {
10745
10785
  if (visLeft.includes(field)) {
10746
10786
  let off = leadW;
@@ -10763,7 +10803,7 @@ function Datatable({
10763
10803
  }
10764
10804
  return {};
10765
10805
  };
10766
- const processed = React54__default.useMemo(() => {
10806
+ const processed = React55__default.useMemo(() => {
10767
10807
  if (serverMode) {
10768
10808
  if (rowOrder) {
10769
10809
  const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -10805,14 +10845,14 @@ function Datatable({
10805
10845
  const serverTotal = rowCount == null ? processed.length : rowCount;
10806
10846
  const totalRows = serverMode ? serverTotal : processed.length;
10807
10847
  const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / sizeVal)) : 1;
10808
- const paged = React54__default.useMemo(
10848
+ const paged = React55__default.useMemo(
10809
10849
  () => !paginated || serverMode ? processed : processed.slice(pageVal * sizeVal, pageVal * sizeVal + sizeVal),
10810
10850
  [processed, paginated, serverMode, pageVal, sizeVal]
10811
10851
  );
10812
- React54__default.useEffect(() => {
10852
+ React55__default.useEffect(() => {
10813
10853
  if (pageVal > totalPages - 1) commitPage(0);
10814
10854
  }, [totalPages]);
10815
- const treeRows = React54__default.useMemo(() => {
10855
+ const treeRows = React55__default.useMemo(() => {
10816
10856
  if (serverMode || typeof getSubRows !== "function") return null;
10817
10857
  const out = [];
10818
10858
  const seen2 = /* @__PURE__ */ new Set();
@@ -10826,12 +10866,12 @@ function Datatable({
10826
10866
  for (const r2 of paged) walk(r2, 0);
10827
10867
  return out;
10828
10868
  }, [serverMode, getSubRows, paged, expandedSet, keyOf]);
10829
- const depthByKey = React54__default.useMemo(() => {
10869
+ const depthByKey = React55__default.useMemo(() => {
10830
10870
  const m = /* @__PURE__ */ new Map();
10831
10871
  if (treeRows) for (const t of treeRows) m.set(keyOf(t.row), t.depth);
10832
10872
  return m;
10833
10873
  }, [treeRows, keyOf]);
10834
- const treeSeqByKey = React54__default.useMemo(() => {
10874
+ const treeSeqByKey = React55__default.useMemo(() => {
10835
10875
  if (!treeRows) return null;
10836
10876
  const m = /* @__PURE__ */ new Map();
10837
10877
  const seen2 = /* @__PURE__ */ new Set();
@@ -10846,7 +10886,7 @@ function Datatable({
10846
10886
  for (const r2 of processed) walk(r2);
10847
10887
  return m;
10848
10888
  }, [treeRows, processed, expandedSet, getSubRows, keyOf]);
10849
- const activeGroupBy = React54__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
10889
+ const activeGroupBy = React55__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
10850
10890
  function subtotalText(rowsIn) {
10851
10891
  const parts = [];
10852
10892
  for (const c of ordered) {
@@ -10873,7 +10913,7 @@ function Datatable({
10873
10913
  if (agg === "max") return Math.max(...nums);
10874
10914
  return null;
10875
10915
  }
10876
- const displayItems = React54__default.useMemo(() => {
10916
+ const displayItems = React55__default.useMemo(() => {
10877
10917
  if (!activeGroupBy.length) return null;
10878
10918
  const build = (rowsIn, depth, prefix) => {
10879
10919
  if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -10896,7 +10936,7 @@ function Datatable({
10896
10936
  };
10897
10937
  return build(paged, 0, "");
10898
10938
  }, [activeGroupBy, collapsedSet, paged, ordered, aggOn]);
10899
- const leafRows = React54__default.useMemo(
10939
+ const leafRows = React55__default.useMemo(
10900
10940
  () => displayItems ? displayItems.filter((i) => i.kind === "leaf").map((i) => i.row) : treeRows ? treeRows.map((t) => t.row) : paged,
10901
10941
  [displayItems, treeRows, paged]
10902
10942
  );
@@ -10926,7 +10966,7 @@ function Datatable({
10926
10966
  return { top, bottom };
10927
10967
  });
10928
10968
  }
10929
- React54__default.useEffect(() => {
10969
+ React55__default.useEffect(() => {
10930
10970
  if (!rowPinning) return;
10931
10971
  const measure = () => {
10932
10972
  if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -10940,18 +10980,18 @@ function Datatable({
10940
10980
  const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r2, i) => keyOf(r2, i) === k)).filter(Boolean) : [];
10941
10981
  const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r2, i) => keyOf(r2, i) === k)).filter(Boolean) : [];
10942
10982
  const middleRows = canPinRows ? leafRows.filter((r2, i) => !pinSideOf(keyOf(r2, i))) : leafRows;
10943
- const keyIndex = React54__default.useMemo(() => {
10983
+ const keyIndex = React55__default.useMemo(() => {
10944
10984
  const m = /* @__PURE__ */ new Map();
10945
10985
  leafRows.forEach((r2, i) => m.set(keyOf(r2, i), i));
10946
10986
  return m;
10947
10987
  }, [leafRows]);
10948
- const keyIndexMid = React54__default.useMemo(() => {
10988
+ const keyIndexMid = React55__default.useMemo(() => {
10949
10989
  const m = /* @__PURE__ */ new Map();
10950
10990
  middleRows.forEach((r2, i) => m.set(keyOf(r2, keyIndex.get(keyOf(r2)) ?? i), i));
10951
10991
  return m;
10952
10992
  }, [middleRows, keyIndex]);
10953
- const cellColIndex = React54__default.useCallback((field) => ordered.findIndex((c) => c.field === field), [ordered]);
10954
- const cellRect = React54__default.useMemo(() => {
10993
+ const cellColIndex = React55__default.useCallback((field) => ordered.findIndex((c) => c.field === field), [ordered]);
10994
+ const cellRect = React55__default.useMemo(() => {
10955
10995
  if (selectionMode !== "cell" || !activeCellVal) return null;
10956
10996
  const ar = keyIndex.get(activeCellVal.key), ac = cellColIndex(activeCellVal.field);
10957
10997
  if (ar == null || ac < 0) return null;
@@ -10961,15 +11001,15 @@ function Datatable({
10961
11001
  const c0 = nc < 0 ? ac : Math.min(ac, nc), c1 = nc < 0 ? ac : Math.max(ac, nc);
10962
11002
  return { r0, r1, c0, c1 };
10963
11003
  }, [selectionMode, activeCellVal, anchorCell, keyIndex, cellColIndex]);
10964
- const activeCellId = React54__default.useMemo(() => {
11004
+ const activeCellId = React55__default.useMemo(() => {
10965
11005
  if (selectionMode !== "cell" || !activeCellVal) return void 0;
10966
11006
  const ar = keyIndex.get(activeCellVal.key), ac = cellColIndex(activeCellVal.field);
10967
11007
  return ar == null || ac < 0 ? void 0 : `${gridId}-${ar}-${ac}`;
10968
11008
  }, [selectionMode, activeCellVal, keyIndex, cellColIndex, gridId]);
10969
- const onCellSelRef = React54__default.useRef(onCellSelectionChange);
11009
+ const onCellSelRef = React55__default.useRef(onCellSelectionChange);
10970
11010
  onCellSelRef.current = onCellSelectionChange;
10971
- const prevSelSigRef = React54__default.useRef("");
10972
- React54__default.useEffect(() => {
11011
+ const prevSelSigRef = React55__default.useRef("");
11012
+ React55__default.useEffect(() => {
10973
11013
  const cb = onCellSelRef.current;
10974
11014
  if (selectionMode !== "cell" || !cb) return;
10975
11015
  const cells = [];
@@ -11062,7 +11102,7 @@ function Datatable({
11062
11102
  setReorderMsg("Reorder cancelled.");
11063
11103
  }
11064
11104
  }
11065
- React54__default.useEffect(() => {
11105
+ React55__default.useEffect(() => {
11066
11106
  if (rowFocusRef.current == null) return;
11067
11107
  const key = rowFocusRef.current;
11068
11108
  rowFocusRef.current = null;
@@ -11074,7 +11114,7 @@ function Datatable({
11074
11114
  });
11075
11115
  const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
11076
11116
  const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
11077
- React54__default.useEffect(() => {
11117
+ React55__default.useEffect(() => {
11078
11118
  if (!virtualizing) return;
11079
11119
  const el = scrollRef.current;
11080
11120
  if (!el) return;
@@ -11084,13 +11124,13 @@ function Datatable({
11084
11124
  if (ro) ro.observe(el);
11085
11125
  return () => ro && ro.disconnect();
11086
11126
  }, [virtualizing, height]);
11087
- const onScrollVirtual = React54__default.useCallback((e) => {
11127
+ const onScrollVirtual = React55__default.useCallback((e) => {
11088
11128
  setScrollTop(e.currentTarget.scrollTop);
11089
11129
  }, []);
11090
11130
  const vh = viewportH || (typeof height === "number" ? height : 440);
11091
- const rowHRef = React54__default.useRef(/* @__PURE__ */ new Map());
11092
- const [measureTick, setMeasureTick] = React54__default.useState(0);
11093
- const offsets = React54__default.useMemo(() => {
11131
+ const rowHRef = React55__default.useRef(/* @__PURE__ */ new Map());
11132
+ const [measureTick, setMeasureTick] = React55__default.useState(0);
11133
+ const offsets = React55__default.useMemo(() => {
11094
11134
  if (!virtualizing) return null;
11095
11135
  const total = middleRows.length;
11096
11136
  const arr = new Float64Array(total + 1);
@@ -11100,7 +11140,7 @@ function Datatable({
11100
11140
  }
11101
11141
  return arr;
11102
11142
  }, [virtualizing, middleRows, estRowH, measureTick]);
11103
- const vWindow = React54__default.useMemo(() => {
11143
+ const vWindow = React55__default.useMemo(() => {
11104
11144
  if (!virtualizing || !offsets) return null;
11105
11145
  const total = middleRows.length;
11106
11146
  const totalH = offsets[total];
@@ -11129,7 +11169,7 @@ function Datatable({
11129
11169
  if (start > end) start = end;
11130
11170
  return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
11131
11171
  }, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
11132
- React54__default.useLayoutEffect(() => {
11172
+ React55__default.useLayoutEffect(() => {
11133
11173
  if (!virtualizing) return;
11134
11174
  const el = scrollRef.current;
11135
11175
  if (!el) return;
@@ -11144,9 +11184,9 @@ function Datatable({
11144
11184
  }
11145
11185
  if (changed) setMeasureTick((t) => t + 1);
11146
11186
  });
11147
- const onServerChangeRef = React54__default.useRef(onServerChange);
11187
+ const onServerChangeRef = React55__default.useRef(onServerChange);
11148
11188
  onServerChangeRef.current = onServerChange;
11149
- React54__default.useEffect(() => {
11189
+ React55__default.useEffect(() => {
11150
11190
  if (!serverMode) return;
11151
11191
  const t = setTimeout(() => {
11152
11192
  onServerChangeRef.current?.({
@@ -11166,10 +11206,10 @@ function Datatable({
11166
11206
  }, 250);
11167
11207
  return () => clearTimeout(t);
11168
11208
  }, [serverMode, pageVal, sizeVal, sort, filters, filterLogic, quick, visibleColumns, hiddenColumns, treeExpandedKey]);
11169
- const onColVisRef = React54__default.useRef(onColumnVisibilityChange);
11209
+ const onColVisRef = React55__default.useRef(onColumnVisibilityChange);
11170
11210
  onColVisRef.current = onColumnVisibilityChange;
11171
- const lastVisibleKey = React54__default.useRef(null);
11172
- React54__default.useEffect(() => {
11211
+ const lastVisibleKey = React55__default.useRef(null);
11212
+ React55__default.useEffect(() => {
11173
11213
  const key = JSON.stringify(visibleColumns);
11174
11214
  if (lastVisibleKey.current === null) {
11175
11215
  lastVisibleKey.current = key;
@@ -11201,7 +11241,7 @@ function Datatable({
11201
11241
  return n;
11202
11242
  });
11203
11243
  }
11204
- const movableMidFields = React54__default.useMemo(
11244
+ const movableMidFields = React55__default.useMemo(
11205
11245
  () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
11206
11246
  [ordered, pins]
11207
11247
  );
@@ -11236,7 +11276,7 @@ function Datatable({
11236
11276
  }
11237
11277
  return [...seen2.values()].sort((a, b) => String(a.label).localeCompare(String(b.label)));
11238
11278
  }
11239
- const [resizing, setResizing] = React54__default.useState(false);
11279
+ const [resizing, setResizing] = React55__default.useState(false);
11240
11280
  function startResize(e, field) {
11241
11281
  e.preventDefault();
11242
11282
  e.stopPropagation();
@@ -11343,7 +11383,7 @@ function Datatable({
11343
11383
  if (!agg) return null;
11344
11384
  if (aggregationValues && col.field in aggregationValues) {
11345
11385
  const pre = aggregationValues[col.field];
11346
- if (pre && typeof pre === "object" && !React54__default.isValidElement(pre)) {
11386
+ if (pre && typeof pre === "object" && !React55__default.isValidElement(pre)) {
11347
11387
  if (typeof agg === "string" && agg in pre) return pre[agg];
11348
11388
  } else {
11349
11389
  return pre;
@@ -11548,10 +11588,10 @@ function Datatable({
11548
11588
  }
11549
11589
  }
11550
11590
  }
11551
- React54__default.useEffect(() => {
11591
+ React55__default.useEffect(() => {
11552
11592
  setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
11553
11593
  }, [leafRows.length, ordered.length, pageVal]);
11554
- React54__default.useLayoutEffect(() => {
11594
+ React55__default.useLayoutEffect(() => {
11555
11595
  if (cellNavigation !== "widget") return;
11556
11596
  const grid = gridRef.current;
11557
11597
  if (!grid) return;
@@ -11566,12 +11606,12 @@ function Datatable({
11566
11606
  td.tabIndex = active && ws.length === 0 ? 0 : -1;
11567
11607
  });
11568
11608
  }, [cellNavigation, focus.r, focus.c, leafRows, ordered, pageVal, interacting, hidden, pins, scrollTop, loading, measureTick, viewportH, pinnedRows]);
11569
- const selectedRows = React54__default.useMemo(() => rows.filter((r2, i) => selected.has(keyOf(r2, i))), [rows, selected]);
11570
- const selKeys = React54__default.useMemo(() => [...selected], [selected]);
11571
- const onRowSelRef = React54__default.useRef(onRowSelectionChange);
11609
+ const selectedRows = React55__default.useMemo(() => rows.filter((r2, i) => selected.has(keyOf(r2, i))), [rows, selected]);
11610
+ const selKeys = React55__default.useMemo(() => [...selected], [selected]);
11611
+ const onRowSelRef = React55__default.useRef(onRowSelectionChange);
11572
11612
  onRowSelRef.current = onRowSelectionChange;
11573
- const prevRowSelSigRef = React54__default.useRef("");
11574
- React54__default.useEffect(() => {
11613
+ const prevRowSelSigRef = React55__default.useRef("");
11614
+ React55__default.useEffect(() => {
11575
11615
  const cb = onRowSelRef.current;
11576
11616
  if (!cb) return;
11577
11617
  const sig = selKeys.join(",");
@@ -11580,7 +11620,7 @@ function Datatable({
11580
11620
  cb(selKeys, selectedRows);
11581
11621
  }, [selKeys, selectedRows]);
11582
11622
  const revealRowRi = activeRowVal != null ? keyIndex.get(activeRowVal) : void 0;
11583
- React54__default.useEffect(() => {
11623
+ React55__default.useEffect(() => {
11584
11624
  if (!activeRowControlled || !scrollActiveRowIntoView || activeRowId == null) return;
11585
11625
  const el = gridRef.current && gridRef.current.querySelector('.twc-dt__row[data-active="true"]');
11586
11626
  if (el && el.scrollIntoView) el.scrollIntoView({ block: "nearest" });
@@ -11590,11 +11630,11 @@ function Datatable({
11590
11630
  const revealInline = scrollActiveCellIntoView && typeof scrollActiveCellIntoView === "object" && scrollActiveCellIntoView.inline === "center" ? "center" : "nearest";
11591
11631
  const revealRi = activeCellVal ? keyIndex.get(activeCellVal.key) : void 0;
11592
11632
  const revealCi = activeCellVal ? cellColIndex(activeCellVal.field) : -1;
11593
- const revealOffsetsRef = React54__default.useRef(offsets);
11633
+ const revealOffsetsRef = React55__default.useRef(offsets);
11594
11634
  revealOffsetsRef.current = offsets;
11595
- const revealMidRef = React54__default.useRef(keyIndexMid);
11635
+ const revealMidRef = React55__default.useRef(keyIndexMid);
11596
11636
  revealMidRef.current = keyIndexMid;
11597
- React54__default.useEffect(() => {
11637
+ React55__default.useEffect(() => {
11598
11638
  if (!revealOn || !activeCellVal) return void 0;
11599
11639
  const block = revealBlock, inline = revealInline;
11600
11640
  const ri = revealRi, ci = revealCi;
@@ -11640,7 +11680,7 @@ function Datatable({
11640
11680
  if (raf) cancelAnimationFrame(raf);
11641
11681
  };
11642
11682
  }, [activeCellVal?.key, activeCellVal?.field, revealOn, revealBlock, revealInline, revealRi, revealCi, virtualizing, headH, loading]);
11643
- React54__default.useEffect(() => {
11683
+ React55__default.useEffect(() => {
11644
11684
  if (!activeCellControlled || !activeCellVal) {
11645
11685
  jumpAppliedRef.current = null;
11646
11686
  return;
@@ -11658,11 +11698,11 @@ function Datatable({
11658
11698
  function clearSelection() {
11659
11699
  setSelected(/* @__PURE__ */ new Set());
11660
11700
  }
11661
- const [editing, setEditing] = React54__default.useState(null);
11662
- const stagedEditRef = React54__default.useRef(null);
11663
- const onEditingChangeRef = React54__default.useRef(onEditingChange);
11701
+ const [editing, setEditing] = React55__default.useState(null);
11702
+ const stagedEditRef = React55__default.useRef(null);
11703
+ const onEditingChangeRef = React55__default.useRef(onEditingChange);
11664
11704
  onEditingChangeRef.current = onEditingChange;
11665
- const editStoppedRef = React54__default.useRef(false);
11705
+ const editStoppedRef = React55__default.useRef(false);
11666
11706
  const isColEditable = (c) => c.type !== "actions" && c.editable !== false && (c.editable === true || typeof c.editable === "function" || c.renderEditCell != null || editMode);
11667
11707
  const isCellEditable = (c, row) => isColEditable(c) && (typeof c.editable !== "function" || !!c.editable(row, { field: c.field }));
11668
11708
  function applyRowUpdate(rowKey2, updated, orig, field) {
@@ -11723,7 +11763,7 @@ function Datatable({
11723
11763
  }
11724
11764
  }
11725
11765
  const batchEditKey = batchEditFields ? batchEditFields.join("\0") : "";
11726
- const batchEditableCols = React54__default.useMemo(
11766
+ const batchEditableCols = React55__default.useMemo(
11727
11767
  () => {
11728
11768
  const base = cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false)));
11729
11769
  return batchEditFields ? base.filter((c) => batchEditFields.includes(c.field)) : base;
@@ -11731,7 +11771,7 @@ function Datatable({
11731
11771
  [cols, editMode, batchEditKey]
11732
11772
  // eslint-disable-line react-hooks/exhaustive-deps
11733
11773
  );
11734
- const batchSel = React54__default.useMemo(() => {
11774
+ const batchSel = React55__default.useMemo(() => {
11735
11775
  if (!selected.size) return EMPTY_BATCH_SEL;
11736
11776
  const testable = [], resolved = /* @__PURE__ */ new Set();
11737
11777
  const take = (r2, i) => {
@@ -11752,18 +11792,18 @@ function Datatable({
11752
11792
  }
11753
11793
  return { testable, hasUntestable };
11754
11794
  }, [rows, leafRows, selected, serverMode]);
11755
- const batchEditableColsSel = React54__default.useMemo(
11795
+ const batchEditableColsSel = React55__default.useMemo(
11756
11796
  () => batchEditableCols.filter((c) => typeof c.editable !== "function" || batchSel.hasUntestable || batchSel.testable.some((r2) => c.editable(r2, { field: c.field }))),
11757
11797
  [batchEditableCols, batchSel]
11758
11798
  );
11759
11799
  const hasBatchEditor = showBatchEdit && batchEditableCols.length > 0;
11760
- const [batchEdit, setBatchEdit] = React54__default.useState(null);
11800
+ const [batchEdit, setBatchEdit] = React55__default.useState(null);
11761
11801
  const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
11762
11802
  function openBatchEditor(el) {
11763
11803
  setBatchEdit({ fields: {}, values: {} });
11764
11804
  openBatchEdit(el, "left", 320);
11765
11805
  }
11766
- React54__default.useEffect(() => {
11806
+ React55__default.useEffect(() => {
11767
11807
  if (!batchEdit) return;
11768
11808
  const close = () => {
11769
11809
  setBatchEdit(null);
@@ -11782,7 +11822,7 @@ function Datatable({
11782
11822
  document.removeEventListener("keydown", onKey);
11783
11823
  };
11784
11824
  }, [batchEdit]);
11785
- React54__default.useEffect(() => {
11825
+ React55__default.useEffect(() => {
11786
11826
  if (batchEdit && selected.size === 0) {
11787
11827
  setBatchEdit(null);
11788
11828
  closeBatchEdit();
@@ -11852,17 +11892,17 @@ function Datatable({
11852
11892
  setBatchEdit(null);
11853
11893
  closeBatchEdit();
11854
11894
  }
11855
- const [clipboardMsg, setClipboardMsg] = React54__default.useState("");
11856
- const clipboardRef = React54__default.useRef(null);
11857
- const [clipFx, setClipFx] = React54__default.useState(null);
11858
- const clipFxTimer = React54__default.useRef(null);
11859
- const onCellsCopyRef = React54__default.useRef(onCellsCopy);
11895
+ const [clipboardMsg, setClipboardMsg] = React55__default.useState("");
11896
+ const clipboardRef = React55__default.useRef(null);
11897
+ const [clipFx, setClipFx] = React55__default.useState(null);
11898
+ const clipFxTimer = React55__default.useRef(null);
11899
+ const onCellsCopyRef = React55__default.useRef(onCellsCopy);
11860
11900
  onCellsCopyRef.current = onCellsCopy;
11861
- const onCellsPasteRef = React54__default.useRef(onCellsPaste);
11901
+ const onCellsPasteRef = React55__default.useRef(onCellsPaste);
11862
11902
  onCellsPasteRef.current = onCellsPaste;
11863
- const onCellsCommitRef = React54__default.useRef(onCellsCommit);
11903
+ const onCellsCommitRef = React55__default.useRef(onCellsCommit);
11864
11904
  onCellsCommitRef.current = onCellsCommit;
11865
- React54__default.useEffect(() => () => {
11905
+ React55__default.useEffect(() => () => {
11866
11906
  if (clipFxTimer.current) clearTimeout(clipFxTimer.current);
11867
11907
  }, []);
11868
11908
  const announceClip = (msg, rect) => {
@@ -12031,7 +12071,7 @@ function Datatable({
12031
12071
  e.preventDefault();
12032
12072
  applyPastedText(text);
12033
12073
  };
12034
- React54__default.useEffect(() => {
12074
+ React55__default.useEffect(() => {
12035
12075
  if (!editing) return;
12036
12076
  const onDown = (e) => {
12037
12077
  if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -12123,10 +12163,10 @@ function Datatable({
12123
12163
  ] });
12124
12164
  }
12125
12165
  const tableMinWidth = leadW + ordered.reduce((a, c) => a + widthOf(c), 0);
12126
- const filterableCols = React54__default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
12166
+ const filterableCols = React55__default.useMemo(() => cols.filter((c) => c.filterable), [cols]);
12127
12167
  const columnsShown = showColumns !== void 0 ? showColumns : cols.some((c) => c.hideable) || rowNumbers;
12128
12168
  const filtersShown = showFilters !== void 0 ? showFilters : filterableCols.length > 0;
12129
- React54__default.useEffect(() => {
12169
+ React55__default.useEffect(() => {
12130
12170
  const el = filterPanelRef.current;
12131
12171
  if (panel !== "filters" || !el || typeof document === "undefined") return void 0;
12132
12172
  const measure = () => {
@@ -12574,15 +12614,25 @@ function Datatable({
12574
12614
  const rowActive = selectionMode === "row" && activeRowVal === k;
12575
12615
  const stickyStyle = pinSide === "top" ? { position: "sticky", top: headH, zIndex: 5 } : pinSide === "bottom" ? { position: "sticky", bottom: 0, zIndex: 5 } : void 0;
12576
12616
  const h = rowHeights[k];
12577
- const rowStyle = { ...stickyStyle || {}, ...h ? { height: h } : {} };
12617
+ const userRowStyle = getRowStyle ? getRowStyle(row, ri) : void 0;
12618
+ const userRowClass = getRowClassName ? getRowClassName(row, ri) : void 0;
12619
+ const { background: _rowBgShorthand, backgroundColor: _rowBgColor, ...restRowStyle } = userRowStyle || {};
12620
+ const usable = (v) => typeof v === "string" && v.trim() !== "" ? v : void 0;
12621
+ const rowBg = usable(_rowBgShorthand) ?? usable(_rowBgColor);
12622
+ const rowStyle = {
12623
+ ...restRowStyle,
12624
+ ...rowBg != null ? { "--twc-dt-row-bg": rowBg } : {},
12625
+ ...stickyStyle || {},
12626
+ ...h ? { height: h } : {}
12627
+ };
12578
12628
  const reorderable = canReorderRows && !pinSide;
12579
12629
  const grabbed = rowGrab && rowGrab.key === k;
12580
12630
  const grabTarget = rowGrab && !grabbed && midIdx != null && rowGrab.index === midIdx ? rowGrab.index >= keyIndexMid.get(rowGrab.key) ? "after" : "before" : void 0;
12581
- return /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
12631
+ return /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
12582
12632
  /* @__PURE__ */ jsxs(
12583
12633
  "tr",
12584
12634
  {
12585
- className: "twc-dt__row",
12635
+ className: userRowClass ? `twc-dt__row ${userRowClass}` : "twc-dt__row",
12586
12636
  role: "row",
12587
12637
  "aria-rowindex": treeSeqByKey ? treeSeqByKey.get(k) + 2 : (paginated && !serverMode ? pageVal * sizeVal : 0) + ri + 2,
12588
12638
  "aria-selected": (checkboxSelection ? sel : rowActive) || void 0,
@@ -14236,7 +14286,7 @@ function safeHref7(url) {
14236
14286
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
14237
14287
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
14238
14288
  }
14239
- var Grid = React54__default.forwardRef(function Grid2({
14289
+ var Grid = /* @__PURE__ */ React55__default.forwardRef(function Grid2({
14240
14290
  as: Tag2 = "div",
14241
14291
  columns,
14242
14292
  minChildWidth,
@@ -14256,7 +14306,7 @@ var Grid = React54__default.forwardRef(function Grid2({
14256
14306
  }, ref) {
14257
14307
  const { flatStyle, styleNode, sxAttr } = useSx(sx);
14258
14308
  const responsive = columns != null && typeof columns === "object";
14259
- const uid = React54__default.useId();
14309
+ const uid = React55__default.useId();
14260
14310
  const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
14261
14311
  let css = "";
14262
14312
  if (responsive) {
@@ -14302,7 +14352,6 @@ var Grid = React54__default.forwardRef(function Grid2({
14302
14352
  }
14303
14353
  );
14304
14354
  });
14305
- Grid.displayName = "Grid";
14306
14355
  var CARDGRID_CSS = `
14307
14356
  .twc-cardgrid { font-family: var(--font-sans); display: flex; flex-direction: column; gap: var(--space-3); }
14308
14357
  .twc-cardgrid__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); }
@@ -14413,15 +14462,15 @@ function CardGrid({
14413
14462
  ...rest
14414
14463
  }) {
14415
14464
  const styles = useScopedStyles("twc-cardgrid-styles", CARDGRID_CSS);
14416
- const autoId = React54__default.useId();
14465
+ const autoId = React55__default.useId();
14417
14466
  const fieldId = id || autoId;
14418
- const [internalPage, setInternalPage] = React54__default.useState(defaultPage);
14467
+ const [internalPage, setInternalPage] = React55__default.useState(defaultPage);
14419
14468
  const pageVal = page !== void 0 ? page : internalPage;
14420
14469
  const commitPage = (p) => {
14421
14470
  onPageChange?.(p);
14422
14471
  if (page === void 0) setInternalPage(p);
14423
14472
  };
14424
- const [internalSize, setInternalSize] = React54__default.useState(pageSize > 0 ? pageSize : 12);
14473
+ const [internalSize, setInternalSize] = React55__default.useState(pageSize > 0 ? pageSize : 12);
14425
14474
  const sizeControlled = onPageSizeChange !== void 0;
14426
14475
  const sizeVal = sizeControlled ? pageSize > 0 ? pageSize : 12 : internalSize;
14427
14476
  const commitSize = (n) => {
@@ -14429,17 +14478,17 @@ function CardGrid({
14429
14478
  if (!sizeControlled) setInternalSize(n);
14430
14479
  commitPage(0);
14431
14480
  };
14432
- React54__default.useEffect(() => {
14481
+ React55__default.useEffect(() => {
14433
14482
  if (!sizeControlled) setInternalSize(pageSize > 0 ? pageSize : 12);
14434
14483
  }, [pageSize]);
14435
- const [internalQuick, setInternalQuick] = React54__default.useState(defaultQuickFilter);
14484
+ const [internalQuick, setInternalQuick] = React55__default.useState(defaultQuickFilter);
14436
14485
  const quickVal = quickFilter !== void 0 ? quickFilter : internalQuick;
14437
14486
  const commitQuick = (q) => {
14438
14487
  onQuickFilterChange?.(q);
14439
14488
  if (quickFilter === void 0) setInternalQuick(q);
14440
14489
  commitPage(0);
14441
14490
  };
14442
- const [internalSort, setInternalSort] = React54__default.useState(defaultSort);
14491
+ const [internalSort, setInternalSort] = React55__default.useState(defaultSort);
14443
14492
  const sortVal = sort !== void 0 ? sort : internalSort;
14444
14493
  const commitSort = (s) => {
14445
14494
  onSortChange?.(s);
@@ -14447,8 +14496,8 @@ function CardGrid({
14447
14496
  commitPage(0);
14448
14497
  };
14449
14498
  const filtersKey = JSON.stringify(filters);
14450
- const mounted = React54__default.useRef(false);
14451
- React54__default.useEffect(() => {
14499
+ const mounted = React55__default.useRef(false);
14500
+ React55__default.useEffect(() => {
14452
14501
  if (!mounted.current) {
14453
14502
  mounted.current = true;
14454
14503
  return;
@@ -14465,36 +14514,36 @@ function CardGrid({
14465
14514
  const pageKnowable = !(serverMode && rowCount == null) && !loading;
14466
14515
  const shownPage = pageKnowable ? Math.min(pageVal, lastPage) : pageVal;
14467
14516
  const pageRows = serverMode ? rows : paginated && shownPage !== pageVal ? client.filtered.slice(shownPage * sizeVal, shownPage * sizeVal + sizeVal) : client.rows;
14468
- const clampedFiltersKey = React54__default.useRef(filtersKey);
14469
- React54__default.useEffect(() => {
14517
+ const clampedFiltersKey = React55__default.useRef(filtersKey);
14518
+ React55__default.useEffect(() => {
14470
14519
  if (clampedFiltersKey.current !== filtersKey) {
14471
14520
  clampedFiltersKey.current = filtersKey;
14472
14521
  return;
14473
14522
  }
14474
14523
  if (pageKnowable && pageVal > lastPage) commitPage(lastPage);
14475
14524
  }, [lastPage, pageVal, pageKnowable, filtersKey]);
14476
- const onServerChangeRef = React54__default.useRef(onServerChange);
14525
+ const onServerChangeRef = React55__default.useRef(onServerChange);
14477
14526
  onServerChangeRef.current = onServerChange;
14478
14527
  const queryKey = JSON.stringify(query);
14479
- React54__default.useEffect(() => {
14528
+ React55__default.useEffect(() => {
14480
14529
  if (!serverMode) return void 0;
14481
14530
  const t = setTimeout(() => onServerChangeRef.current?.(JSON.parse(queryKey)), 250);
14482
14531
  return () => clearTimeout(t);
14483
14532
  }, [serverMode, queryKey]);
14484
14533
  const keyOf = typeof rowKey === "function" ? rowKey : (r2) => r2 && r2[rowKey];
14485
- const [selected, setSelected] = React54__default.useState(() => /* @__PURE__ */ new Set());
14534
+ const [selected, setSelected] = React55__default.useState(() => /* @__PURE__ */ new Set());
14486
14535
  const retainCap = retainSelectedRows === true ? 1e3 : retainSelectedRows || 0;
14487
- const retainedRef = React54__default.useRef(/* @__PURE__ */ new Map());
14488
- const selKeys = React54__default.useMemo(() => [...selected], [selected]);
14489
- const selectedRows = React54__default.useMemo(() => {
14536
+ const retainedRef = React55__default.useRef(/* @__PURE__ */ new Map());
14537
+ const selKeys = React55__default.useMemo(() => [...selected], [selected]);
14538
+ const selectedRows = React55__default.useMemo(() => {
14490
14539
  const onPage = new Map(pageRows.map((r2, i) => [keyOf(r2, i), r2]));
14491
14540
  return selKeys.map((k) => onPage.get(k) ?? retainedRef.current.get(k)).filter((r2) => r2 !== void 0);
14492
14541
  }, [selKeys, pageRows]);
14493
- const clearSelection = React54__default.useCallback(() => {
14542
+ const clearSelection = React55__default.useCallback(() => {
14494
14543
  retainedRef.current.clear();
14495
14544
  setSelected(/* @__PURE__ */ new Set());
14496
14545
  }, []);
14497
- const toggleKey = React54__default.useCallback((key, row) => {
14546
+ const toggleKey = React55__default.useCallback((key, row) => {
14498
14547
  setSelected((prev) => {
14499
14548
  const next = new Set(prev);
14500
14549
  if (next.has(key)) {
@@ -14527,10 +14576,10 @@ function CardGrid({
14527
14576
  return next;
14528
14577
  });
14529
14578
  };
14530
- const onSelRef = React54__default.useRef(onRowSelectionChange);
14579
+ const onSelRef = React55__default.useRef(onRowSelectionChange);
14531
14580
  onSelRef.current = onRowSelectionChange;
14532
- const prevSelSigRef = React54__default.useRef(null);
14533
- React54__default.useEffect(() => {
14581
+ const prevSelSigRef = React55__default.useRef(null);
14582
+ React55__default.useEffect(() => {
14534
14583
  const cb = onSelRef.current;
14535
14584
  if (!cb) return;
14536
14585
  const sig = selKeys.join(",");
@@ -14743,8 +14792,8 @@ function DiffTable({
14743
14792
  className = "",
14744
14793
  ...rest
14745
14794
  }) {
14746
- const dtColumns = React54__default.useMemo(() => columns.map(toDatatableColumn), [columns]);
14747
- const diff = React54__default.useMemo(
14795
+ const dtColumns = React55__default.useMemo(() => columns.map(toDatatableColumn), [columns]);
14796
+ const diff = React55__default.useMemo(
14748
14797
  () => ({ from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel }),
14749
14798
  [from, to, rowKey, onlyChanged, showToggle, showSummary, moveDetection, compare, toggleLabel]
14750
14799
  );
@@ -14901,26 +14950,26 @@ function DatePicker({
14901
14950
  }) {
14902
14951
  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
14903
14952
  const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
14904
- const autoId = React54__default.useId();
14953
+ const autoId = React55__default.useId();
14905
14954
  const fieldId = id || autoId;
14906
14955
  const descId = `${fieldId}-desc`;
14907
14956
  const invalid = Boolean(error);
14908
- const [internal, setInternal] = React54__default.useState(defaultValue);
14957
+ const [internal, setInternal] = React55__default.useState(defaultValue);
14909
14958
  const selected = value !== void 0 ? value : internal;
14910
- const [open, setOpen] = React54__default.useState(false);
14911
- const [view, setView] = React54__default.useState(selected || /* @__PURE__ */ new Date());
14912
- const [mode, setMode] = React54__default.useState("days");
14913
- const [focusDate, setFocusDate] = React54__default.useState(null);
14914
- const [focusMonth, setFocusMonth] = React54__default.useState(null);
14915
- const [focusYear, setFocusYear] = React54__default.useState(null);
14916
- const [editText, setEditText] = React54__default.useState(null);
14917
- const [coords, setCoords] = React54__default.useState(null);
14918
- const wrapRef = React54__default.useRef(null);
14919
- const triggerRef = React54__default.useRef(null);
14920
- const popRef = React54__default.useRef(null);
14921
- const gridRef = React54__default.useRef(null);
14959
+ const [open, setOpen] = React55__default.useState(false);
14960
+ const [view, setView] = React55__default.useState(selected || /* @__PURE__ */ new Date());
14961
+ const [mode, setMode] = React55__default.useState("days");
14962
+ const [focusDate, setFocusDate] = React55__default.useState(null);
14963
+ const [focusMonth, setFocusMonth] = React55__default.useState(null);
14964
+ const [focusYear, setFocusYear] = React55__default.useState(null);
14965
+ const [editText, setEditText] = React55__default.useState(null);
14966
+ const [coords, setCoords] = React55__default.useState(null);
14967
+ const wrapRef = React55__default.useRef(null);
14968
+ const triggerRef = React55__default.useRef(null);
14969
+ const popRef = React55__default.useRef(null);
14970
+ const gridRef = React55__default.useRef(null);
14922
14971
  const POP_W = 280;
14923
- const place = React54__default.useCallback(() => {
14972
+ const place = React55__default.useCallback(() => {
14924
14973
  const el = triggerRef.current;
14925
14974
  if (!el) return;
14926
14975
  const r2 = el.getBoundingClientRect();
@@ -14931,7 +14980,7 @@ function DatePicker({
14931
14980
  left = Math.max(8, left);
14932
14981
  setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
14933
14982
  }, []);
14934
- React54__default.useEffect(() => {
14983
+ React55__default.useEffect(() => {
14935
14984
  if (!open) return void 0;
14936
14985
  place();
14937
14986
  const onMove = () => place();
@@ -14949,7 +14998,7 @@ function DatePicker({
14949
14998
  ro?.disconnect();
14950
14999
  };
14951
15000
  }, [open, place]);
14952
- React54__default.useEffect(() => {
15001
+ React55__default.useEffect(() => {
14953
15002
  if (!open) return;
14954
15003
  setView(selected || /* @__PURE__ */ new Date());
14955
15004
  setMode("days");
@@ -14970,9 +15019,9 @@ function DatePicker({
14970
15019
  };
14971
15020
  }, [open]);
14972
15021
  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
14973
- const months = React54__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
14974
- const monthsShort = React54__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
14975
- const dows = React54__default.useMemo(
15022
+ const months = React55__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
15023
+ const monthsShort = React55__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
15024
+ const dows = React55__default.useMemo(
14976
15025
  () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
14977
15026
  [locale, weekStartsOn]
14978
15027
  );
@@ -15027,11 +15076,11 @@ function DatePicker({
15027
15076
  };
15028
15077
  const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
15029
15078
  const tabbableDate = (focusDate && cells.some((c) => sameDay(c, focusDate)) ? focusDate : null) || (selected && cells.some((c) => sameDay(c, selected)) ? selected : null) || (cells.some((c) => sameDay(c, today)) ? today : null) || new Date(y, m, 1);
15030
- React54__default.useEffect(() => {
15079
+ React55__default.useEffect(() => {
15031
15080
  if (!open || mode !== "days" || !focusDate) return;
15032
15081
  gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
15033
15082
  }, [focusDate, open, mode]);
15034
- React54__default.useEffect(() => {
15083
+ React55__default.useEffect(() => {
15035
15084
  if (!open || mode !== "months" || focusMonth == null) return;
15036
15085
  gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
15037
15086
  }, [focusMonth, open, mode]);
@@ -15055,7 +15104,7 @@ function DatePicker({
15055
15104
  }
15056
15105
  setFocusMonth(next);
15057
15106
  };
15058
- React54__default.useEffect(() => {
15107
+ React55__default.useEffect(() => {
15059
15108
  if (!open || mode !== "years" || focusYear == null) return;
15060
15109
  gridRef.current?.querySelector(`[data-yr="${focusYear}"]`)?.focus();
15061
15110
  }, [focusYear, open, mode]);
@@ -15462,29 +15511,29 @@ function DateRangePicker({
15462
15511
  }) {
15463
15512
  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
15464
15513
  const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS2);
15465
- const [internal, setInternal] = React54__default.useState(defaultValue);
15514
+ const [internal, setInternal] = React55__default.useState(defaultValue);
15466
15515
  const range2 = value !== void 0 ? value : internal;
15467
- const [open, setOpen] = React54__default.useState(false);
15468
- const [view, setView] = React54__default.useState(range2.start || /* @__PURE__ */ new Date());
15469
- const [hover, setHover] = React54__default.useState(null);
15470
- const [focusDate, setFocusDate] = React54__default.useState(null);
15471
- const [mode, setMode] = React54__default.useState("days");
15472
- const [focusMonth, setFocusMonth] = React54__default.useState(null);
15473
- const [focusYear, setFocusYear] = React54__default.useState(null);
15474
- const [editText, setEditText] = React54__default.useState(null);
15475
- const [coords, setCoords] = React54__default.useState(null);
15476
- const wrapRef = React54__default.useRef(null);
15477
- const triggerRef = React54__default.useRef(null);
15478
- const popRef = React54__default.useRef(null);
15479
- const gridRef = React54__default.useRef(null);
15480
- const labelId = React54__default.useId();
15516
+ const [open, setOpen] = React55__default.useState(false);
15517
+ const [view, setView] = React55__default.useState(range2.start || /* @__PURE__ */ new Date());
15518
+ const [hover, setHover] = React55__default.useState(null);
15519
+ const [focusDate, setFocusDate] = React55__default.useState(null);
15520
+ const [mode, setMode] = React55__default.useState("days");
15521
+ const [focusMonth, setFocusMonth] = React55__default.useState(null);
15522
+ const [focusYear, setFocusYear] = React55__default.useState(null);
15523
+ const [editText, setEditText] = React55__default.useState(null);
15524
+ const [coords, setCoords] = React55__default.useState(null);
15525
+ const wrapRef = React55__default.useRef(null);
15526
+ const triggerRef = React55__default.useRef(null);
15527
+ const popRef = React55__default.useRef(null);
15528
+ const gridRef = React55__default.useRef(null);
15529
+ const labelId = React55__default.useId();
15481
15530
  const descId = `${labelId}-desc`;
15482
15531
  const invalid = Boolean(error);
15483
- React54__default.useEffect(() => {
15532
+ React55__default.useEffect(() => {
15484
15533
  if (disabled) setOpen(false);
15485
15534
  }, [disabled]);
15486
15535
  const POP_W = 420;
15487
- const place = React54__default.useCallback(() => {
15536
+ const place = React55__default.useCallback(() => {
15488
15537
  const el = triggerRef.current;
15489
15538
  if (!el) return;
15490
15539
  const r2 = el.getBoundingClientRect();
@@ -15495,7 +15544,7 @@ function DateRangePicker({
15495
15544
  left = Math.max(8, left);
15496
15545
  setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
15497
15546
  }, []);
15498
- React54__default.useEffect(() => {
15547
+ React55__default.useEffect(() => {
15499
15548
  if (!open) return void 0;
15500
15549
  place();
15501
15550
  const onMove = () => place();
@@ -15513,7 +15562,7 @@ function DateRangePicker({
15513
15562
  ro?.disconnect();
15514
15563
  };
15515
15564
  }, [open, place]);
15516
- React54__default.useEffect(() => {
15565
+ React55__default.useEffect(() => {
15517
15566
  if (!open) return;
15518
15567
  const onDown = (e) => {
15519
15568
  if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -15577,20 +15626,20 @@ function DateRangePicker({
15577
15626
  const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
15578
15627
  return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
15579
15628
  };
15580
- React54__default.useEffect(() => {
15629
+ React55__default.useEffect(() => {
15581
15630
  if (!open) {
15582
15631
  setFocusDate(null);
15583
15632
  setHover(null);
15584
15633
  setMode("days");
15585
15634
  }
15586
15635
  }, [open]);
15587
- React54__default.useEffect(() => {
15636
+ React55__default.useEffect(() => {
15588
15637
  if (open && mode === "months" && focusMonth != null) gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
15589
15638
  }, [focusMonth, open, mode]);
15590
- React54__default.useEffect(() => {
15639
+ React55__default.useEffect(() => {
15591
15640
  if (open && mode === "years" && focusYear != null) gridRef.current?.querySelector(`[data-yr="${focusYear}"]`)?.focus();
15592
15641
  }, [focusYear, open, mode]);
15593
- React54__default.useEffect(() => {
15642
+ React55__default.useEffect(() => {
15594
15643
  if (!open || !focusDate) return;
15595
15644
  gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
15596
15645
  }, [focusDate, open]);
@@ -15675,9 +15724,9 @@ function DateRangePicker({
15675
15724
  if (r2.start) setView(r2.start);
15676
15725
  setOpen(false);
15677
15726
  };
15678
- const months = React54__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
15679
- const monthsShort = React54__default.useMemo(() => months.map((n) => n.slice(0, 3)), [months]);
15680
- const dows = React54__default.useMemo(
15727
+ const months = React55__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
15728
+ const monthsShort = React55__default.useMemo(() => months.map((n) => n.slice(0, 3)), [months]);
15729
+ const dows = React55__default.useMemo(
15681
15730
  () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
15682
15731
  [locale, weekStartsOn]
15683
15732
  );
@@ -16032,19 +16081,19 @@ function TimePicker({
16032
16081
  }) {
16033
16082
  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS5);
16034
16083
  const __twcStyles1 = useScopedStyles("twc-timepicker-styles", TIMEPICKER_CSS);
16035
- const autoId = React54__default.useId();
16084
+ const autoId = React55__default.useId();
16036
16085
  const fieldId = id || autoId;
16037
16086
  const descId = `${fieldId}-desc`;
16038
16087
  const invalid = Boolean(error);
16039
- const [internal, setInternal] = React54__default.useState(defaultValue);
16088
+ const [internal, setInternal] = React55__default.useState(defaultValue);
16040
16089
  const selected = value !== void 0 ? value : internal;
16041
- const [open, setOpen] = React54__default.useState(false);
16042
- const [editText, setEditText] = React54__default.useState(null);
16043
- const [coords, setCoords] = React54__default.useState(null);
16044
- const wrapRef = React54__default.useRef(null);
16045
- const triggerRef = React54__default.useRef(null);
16046
- const popRef = React54__default.useRef(null);
16047
- const place = React54__default.useCallback(() => {
16090
+ const [open, setOpen] = React55__default.useState(false);
16091
+ const [editText, setEditText] = React55__default.useState(null);
16092
+ const [coords, setCoords] = React55__default.useState(null);
16093
+ const wrapRef = React55__default.useRef(null);
16094
+ const triggerRef = React55__default.useRef(null);
16095
+ const popRef = React55__default.useRef(null);
16096
+ const place = React55__default.useCallback(() => {
16048
16097
  const el = triggerRef.current;
16049
16098
  if (!el) return;
16050
16099
  const r2 = el.getBoundingClientRect();
@@ -16055,7 +16104,7 @@ function TimePicker({
16055
16104
  left = Math.max(8, left);
16056
16105
  setCoords({ left, top: flip ? void 0 : Math.round(r2.bottom + 6), bottom: flip ? Math.round(vh - r2.top + 6) : void 0 });
16057
16106
  }, []);
16058
- React54__default.useEffect(() => {
16107
+ React55__default.useEffect(() => {
16059
16108
  if (!open) return void 0;
16060
16109
  place();
16061
16110
  const onMove = () => place();
@@ -16073,7 +16122,7 @@ function TimePicker({
16073
16122
  ro?.disconnect();
16074
16123
  };
16075
16124
  }, [open, place]);
16076
- React54__default.useEffect(() => {
16125
+ React55__default.useEffect(() => {
16077
16126
  if (!open) return void 0;
16078
16127
  const onDown = (e) => {
16079
16128
  if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -16093,7 +16142,7 @@ function TimePicker({
16093
16142
  useFocusTrap(popRef, open && !!coords, {
16094
16143
  initialFocus: () => popRef.current?.querySelector('.twc-tp__opt[data-selected="true"]') || popRef.current?.querySelector('.twc-tp__opt[tabindex="0"]')
16095
16144
  });
16096
- React54__default.useEffect(() => {
16145
+ React55__default.useEffect(() => {
16097
16146
  if (!open || !coords) return;
16098
16147
  popRef.current?.querySelectorAll('.twc-tp__opt[data-selected="true"]').forEach((el) => el.scrollIntoView({ block: "center" }));
16099
16148
  }, [open, coords]);
@@ -16441,10 +16490,10 @@ function DateTimePicker({
16441
16490
  }) {
16442
16491
  const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS6);
16443
16492
  const __twcStyles1 = useScopedStyles("twc-datetimepicker-styles", DTP_CSS);
16444
- const autoId = React54__default.useId();
16493
+ const autoId = React55__default.useId();
16445
16494
  const fieldId = id || autoId;
16446
16495
  const descId = `${fieldId}-desc`;
16447
- const [internal, setInternal] = React54__default.useState(defaultValue);
16496
+ const [internal, setInternal] = React55__default.useState(defaultValue);
16448
16497
  const selected = value !== void 0 ? value : internal;
16449
16498
  const commitVal = (d) => {
16450
16499
  if (value === void 0) setInternal(d);
@@ -16588,11 +16637,11 @@ function FilterBar({
16588
16637
  ...rest
16589
16638
  }) {
16590
16639
  const styles = useScopedStyles("twc-filterbar-styles", FILTERBAR_CSS);
16591
- const autoId = React54__default.useId();
16640
+ const autoId = React55__default.useId();
16592
16641
  const fieldId = id || autoId;
16593
- const [internal, setInternal] = React54__default.useState(defaultValue);
16642
+ const [internal, setInternal] = React55__default.useState(defaultValue);
16594
16643
  const clauses = value !== void 0 ? value : internal;
16595
- const values = React54__default.useMemo(() => clausesToValues(fields, clauses), [fields, clauses]);
16644
+ const values = React55__default.useMemo(() => clausesToValues(fields, clauses), [fields, clauses]);
16596
16645
  const emit = (nextValues) => {
16597
16646
  const next = valuesToClauses(fields, nextValues);
16598
16647
  if (value === void 0) setInternal(next);
@@ -16776,14 +16825,14 @@ function Dialog({
16776
16825
  className = "",
16777
16826
  ...rest
16778
16827
  }) {
16779
- const autoId = React54__default.useId();
16828
+ const autoId = React55__default.useId();
16780
16829
  const titleId = `${autoId}-title`;
16781
16830
  const descId = `${autoId}-desc`;
16782
- const dialogRef = React54__default.useRef(null);
16831
+ const dialogRef = React55__default.useRef(null);
16783
16832
  const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
16784
16833
  const renderPortal = usePortal();
16785
- const [mounted, setMounted] = React54__default.useState(open);
16786
- React54__default.useEffect(() => {
16834
+ const [mounted, setMounted] = React55__default.useState(open);
16835
+ React55__default.useEffect(() => {
16787
16836
  if (open) {
16788
16837
  setMounted(true);
16789
16838
  return;
@@ -16795,7 +16844,7 @@ function Dialog({
16795
16844
  useInertBackground(dialogRef, open && mounted);
16796
16845
  useFocusTrap(dialogRef, open && mounted);
16797
16846
  const isTop = useLayer(open && mounted);
16798
- React54__default.useEffect(() => {
16847
+ React55__default.useEffect(() => {
16799
16848
  if (!open) return void 0;
16800
16849
  const onKey = (e) => {
16801
16850
  if (e.defaultPrevented || !isTop()) return;
@@ -16948,14 +16997,14 @@ function Drawer({
16948
16997
  style,
16949
16998
  ...rest
16950
16999
  }) {
16951
- const autoId = React54__default.useId();
17000
+ const autoId = React55__default.useId();
16952
17001
  const titleId = `${autoId}-title`;
16953
17002
  const descId = `${autoId}-desc`;
16954
- const panelRef = React54__default.useRef(null);
17003
+ const panelRef = React55__default.useRef(null);
16955
17004
  const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
16956
17005
  const renderPortal = usePortal();
16957
- const [mounted, setMounted] = React54__default.useState(open);
16958
- React54__default.useEffect(() => {
17006
+ const [mounted, setMounted] = React55__default.useState(open);
17007
+ React55__default.useEffect(() => {
16959
17008
  if (open) {
16960
17009
  setMounted(true);
16961
17010
  return;
@@ -16967,7 +17016,7 @@ function Drawer({
16967
17016
  useInertBackground(panelRef, open && mounted);
16968
17017
  useFocusTrap(panelRef, open && mounted);
16969
17018
  const isTop = useLayer(open && mounted);
16970
- React54__default.useEffect(() => {
17019
+ React55__default.useEffect(() => {
16971
17020
  if (!open) return void 0;
16972
17021
  const onKey = (e) => {
16973
17022
  if (e.defaultPrevented || !isTop()) return;
@@ -17057,11 +17106,11 @@ function Field({
17057
17106
  ...rest
17058
17107
  }) {
17059
17108
  const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS7);
17060
- const autoId = React54__default.useId();
17109
+ const autoId = React55__default.useId();
17061
17110
  const fieldId = id || autoId;
17062
17111
  const descId = `${fieldId}-desc`;
17063
17112
  const hasMsg = Boolean(error || hint);
17064
- const control = React54__default.isValidElement(children) ? React54__default.cloneElement(children, {
17113
+ const control = React55__default.isValidElement(children) ? React55__default.cloneElement(children, {
17065
17114
  "aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
17066
17115
  "aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
17067
17116
  }) : children;
@@ -17161,7 +17210,7 @@ function fmtSize(bytes) {
17161
17210
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
17162
17211
  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
17163
17212
  }
17164
- var FileUpload = React54__default.forwardRef(function FileUpload2({
17213
+ var FileUpload = /* @__PURE__ */ React55__default.forwardRef(function FileUpload2({
17165
17214
  accept,
17166
17215
  multiple = false,
17167
17216
  disabled = false,
@@ -17186,12 +17235,12 @@ var FileUpload = React54__default.forwardRef(function FileUpload2({
17186
17235
  ...rest
17187
17236
  }, ref) {
17188
17237
  const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
17189
- const [internal, setInternal] = React54__default.useState(defaultValue);
17238
+ const [internal, setInternal] = React55__default.useState(defaultValue);
17190
17239
  const files = value !== void 0 ? value : internal;
17191
- const [drag, setDrag] = React54__default.useState(false);
17192
- const inputRef = React54__default.useRef(null);
17193
- React54__default.useImperativeHandle(ref, () => ({ open: () => inputRef.current?.click() }), []);
17194
- const autoId = React54__default.useId();
17240
+ const [drag, setDrag] = React55__default.useState(false);
17241
+ const inputRef = React55__default.useRef(null);
17242
+ React55__default.useImperativeHandle(ref, () => ({ open: () => inputRef.current?.click() }), []);
17243
+ const autoId = React55__default.useId();
17195
17244
  const fieldId = id || autoId;
17196
17245
  const descId = `${fieldId}-desc`;
17197
17246
  const labelId = `${fieldId}-label`;
@@ -17234,7 +17283,7 @@ var FileUpload = React54__default.forwardRef(function FileUpload2({
17234
17283
  )
17235
17284
  );
17236
17285
  if (trigger) {
17237
- const triggerEl = React54__default.isValidElement(trigger) && error ? React54__default.cloneElement(trigger, {
17286
+ const triggerEl = React55__default.isValidElement(trigger) && error ? React55__default.cloneElement(trigger, {
17238
17287
  "aria-describedby": [trigger.props["aria-describedby"], descId].filter(Boolean).join(" ") || void 0
17239
17288
  }) : trigger;
17240
17289
  return /* @__PURE__ */ jsxs("div", { className: `twc-upload ${className}`, "data-size": size, ...rest, children: [
@@ -17328,7 +17377,6 @@ var FileUpload = React54__default.forwardRef(function FileUpload2({
17328
17377
  error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : null
17329
17378
  ] });
17330
17379
  });
17331
- FileUpload.displayName = "FileUpload";
17332
17380
  var TOGGLEGROUP_CSS = `
17333
17381
  .twc-togglegroup { display: inline-flex; gap: var(--space-1); }
17334
17382
  .twc-togglegroup[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
@@ -17350,10 +17398,10 @@ function ToggleGroup({
17350
17398
  ...rest
17351
17399
  }) {
17352
17400
  const __twcStyles = useScopedStyles("twc-togglegroup-styles", TOGGLEGROUP_CSS);
17353
- const groupRef = React54__default.useRef(null);
17401
+ const groupRef = React55__default.useRef(null);
17354
17402
  const multiple = type === "multiple";
17355
- const [focusedIdx, setFocusedIdx] = React54__default.useState(null);
17356
- const [internal, setInternal] = React54__default.useState(defaultValue !== void 0 ? defaultValue : multiple ? [] : null);
17403
+ const [focusedIdx, setFocusedIdx] = React55__default.useState(null);
17404
+ const [internal, setInternal] = React55__default.useState(defaultValue !== void 0 ? defaultValue : multiple ? [] : null);
17357
17405
  const current = value !== void 0 ? value : internal;
17358
17406
  const isSelected = (v) => multiple ? Array.isArray(current) && current.includes(v) : current === v;
17359
17407
  const commit = (next) => {
@@ -17474,15 +17522,15 @@ function Kanban({
17474
17522
  ...rest
17475
17523
  }) {
17476
17524
  const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
17477
- const [internal, setInternal] = React54__default.useState(cards ?? defaultCards ?? []);
17525
+ const [internal, setInternal] = React55__default.useState(cards ?? defaultCards ?? []);
17478
17526
  const items = cards !== void 0 ? cards : internal;
17479
- const [drag, setDrag] = React54__default.useState(null);
17480
- const [overCol, setOverCol] = React54__default.useState(null);
17481
- const [grab, setGrab] = React54__default.useState(null);
17482
- const [announce, setAnnounce] = React54__default.useState("");
17483
- const rootRef = React54__default.useRef(null);
17484
- const focusIdRef = React54__default.useRef(null);
17485
- React54__default.useEffect(() => {
17527
+ const [drag, setDrag] = React55__default.useState(null);
17528
+ const [overCol, setOverCol] = React55__default.useState(null);
17529
+ const [grab, setGrab] = React55__default.useState(null);
17530
+ const [announce, setAnnounce] = React55__default.useState("");
17531
+ const rootRef = React55__default.useRef(null);
17532
+ const focusIdRef = React55__default.useRef(null);
17533
+ React55__default.useEffect(() => {
17486
17534
  if (focusIdRef.current == null) return void 0;
17487
17535
  const raf = requestAnimationFrame(() => {
17488
17536
  const id = focusIdRef.current;
@@ -17801,22 +17849,22 @@ function Popover({
17801
17849
  ...rest
17802
17850
  }) {
17803
17851
  const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
17804
- const [openState, setOpenState] = React54__default.useState(defaultOpen);
17805
- const [render, setRender] = React54__default.useState(false);
17806
- const [pos, setPos] = React54__default.useState(null);
17807
- const wrapRef = React54__default.useRef(null);
17852
+ const [openState, setOpenState] = React55__default.useState(defaultOpen);
17853
+ const [render, setRender] = React55__default.useState(false);
17854
+ const [pos, setPos] = React55__default.useState(null);
17855
+ const wrapRef = React55__default.useRef(null);
17808
17856
  useTriggerAudit(wrapRef, "Popover");
17809
- const popRef = React54__default.useRef(null);
17810
- const popId = React54__default.useId();
17857
+ const popRef = React55__default.useRef(null);
17858
+ const popId = React55__default.useId();
17811
17859
  const controlled = openProp !== void 0;
17812
17860
  const open = controlled ? !!openProp : openState;
17813
- const openRef = React54__default.useRef(open);
17861
+ const openRef = React55__default.useRef(open);
17814
17862
  openRef.current = open;
17815
- const controlledRef = React54__default.useRef(controlled);
17863
+ const controlledRef = React55__default.useRef(controlled);
17816
17864
  controlledRef.current = controlled;
17817
- const onOpenChangeRef = React54__default.useRef(onOpenChange);
17865
+ const onOpenChangeRef = React55__default.useRef(onOpenChange);
17818
17866
  onOpenChangeRef.current = onOpenChange;
17819
- const setOpen = React54__default.useCallback((next) => {
17867
+ const setOpen = React55__default.useCallback((next) => {
17820
17868
  const value = typeof next === "function" ? next(openRef.current) : next;
17821
17869
  if (value === openRef.current) return;
17822
17870
  if (!controlledRef.current) setOpenState(value);
@@ -17824,7 +17872,7 @@ function Popover({
17824
17872
  }, []);
17825
17873
  const toggle = () => setOpen((o) => !o);
17826
17874
  const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
17827
- const place = React54__default.useCallback(() => {
17875
+ const place = React55__default.useCallback(() => {
17828
17876
  const t = wrapRef.current;
17829
17877
  if (!t) return;
17830
17878
  const r2 = t.getBoundingClientRect();
@@ -17862,7 +17910,7 @@ function Popover({
17862
17910
  setPos({ top, left, width: w, flip: false, arrow, maxHeight: vh - 2 * M });
17863
17911
  }, [placement, align, width]);
17864
17912
  const isTop = useLayer(open && render);
17865
- React54__default.useEffect(() => {
17913
+ React55__default.useEffect(() => {
17866
17914
  if (!open) return;
17867
17915
  place();
17868
17916
  const onMove = () => place();
@@ -17889,7 +17937,7 @@ function Popover({
17889
17937
  document.removeEventListener("keydown", onKey);
17890
17938
  };
17891
17939
  }, [open, place, isTop]);
17892
- React54__default.useEffect(() => {
17940
+ React55__default.useEffect(() => {
17893
17941
  if (open) {
17894
17942
  setRender(true);
17895
17943
  return;
@@ -17897,12 +17945,12 @@ function Popover({
17897
17945
  const t = setTimeout(() => setRender(false), 170);
17898
17946
  return () => clearTimeout(t);
17899
17947
  }, [open]);
17900
- React54__default.useEffect(() => {
17948
+ React55__default.useEffect(() => {
17901
17949
  if (render && open) place();
17902
17950
  }, [render, place]);
17903
- const restoreRef = React54__default.useRef(null);
17904
- const needFocusRef = React54__default.useRef(false);
17905
- React54__default.useEffect(() => {
17951
+ const restoreRef = React55__default.useRef(null);
17952
+ const needFocusRef = React55__default.useRef(false);
17953
+ React55__default.useEffect(() => {
17906
17954
  if (open) {
17907
17955
  restoreRef.current = document.activeElement;
17908
17956
  needFocusRef.current = true;
@@ -17938,7 +17986,7 @@ function Popover({
17938
17986
  }
17939
17987
  ) : null;
17940
17988
  const fix = {};
17941
- if (React54__default.isValidElement(trigger)) {
17989
+ if (React55__default.isValidElement(trigger)) {
17942
17990
  if (!triggerIsControl(trigger)) fix.role = "button";
17943
17991
  fix.onKeyDown = (e) => {
17944
17992
  trigger.props.onKeyDown?.(e);
@@ -17950,7 +17998,7 @@ function Popover({
17950
17998
  }
17951
17999
  };
17952
18000
  }
17953
- const triggerEl = React54__default.isValidElement(trigger) ? React54__default.cloneElement(trigger, {
18001
+ const triggerEl = React55__default.isValidElement(trigger) ? React55__default.cloneElement(trigger, {
17954
18002
  onClick: (e) => {
17955
18003
  trigger.props.onClick?.(e);
17956
18004
  toggle();
@@ -17997,7 +18045,7 @@ function Progress({
17997
18045
  className = "",
17998
18046
  ...rest
17999
18047
  }) {
18000
- const labelId = React54__default.useId();
18048
+ const labelId = React55__default.useId();
18001
18049
  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
18002
18050
  const __twcStyles = useScopedStyles("twc-progress-styles", `
18003
18051
  .twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -18068,7 +18116,7 @@ function Progress({
18068
18116
  ] })
18069
18117
  );
18070
18118
  }
18071
- function Radio({
18119
+ var Radio = /* @__PURE__ */ React55__default.forwardRef(function Radio2({
18072
18120
  label,
18073
18121
  description,
18074
18122
  error,
@@ -18084,7 +18132,7 @@ function Radio({
18084
18132
  className = "",
18085
18133
  onChange,
18086
18134
  ...rest
18087
- }) {
18135
+ }, ref) {
18088
18136
  const __twcStyles = useScopedStyles("twc-radio-styles", `
18089
18137
  .twc-radio { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; font-family: var(--font-sans); }
18090
18138
  /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
@@ -18124,7 +18172,7 @@ function Radio({
18124
18172
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
18125
18173
  .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
18126
18174
  `);
18127
- const autoId = React54__default.useId();
18175
+ const autoId = React55__default.useId();
18128
18176
  const fieldId = id || autoId;
18129
18177
  const errId = `${fieldId}-error`;
18130
18178
  const invalid = Boolean(error);
@@ -18137,6 +18185,7 @@ function Radio({
18137
18185
  /* @__PURE__ */ jsx(
18138
18186
  "input",
18139
18187
  {
18188
+ ref,
18140
18189
  id: fieldId,
18141
18190
  type: "radio",
18142
18191
  className: "twc-radio__input",
@@ -18167,7 +18216,7 @@ function Radio({
18167
18216
  control,
18168
18217
  /* @__PURE__ */ jsx("span", { id: errId, className: "twc-field__error", children: error })
18169
18218
  ] });
18170
- }
18219
+ });
18171
18220
  var RADIO_GROUP_CSS = `
18172
18221
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
18173
18222
  .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -18197,13 +18246,13 @@ function RadioGroup({
18197
18246
  ...rest
18198
18247
  }) {
18199
18248
  const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
18200
- const autoId = React54__default.useId();
18249
+ const autoId = React55__default.useId();
18201
18250
  const fieldId = id || autoId;
18202
18251
  const labelId = `${fieldId}-label`;
18203
18252
  const descId = `${fieldId}-desc`;
18204
18253
  const groupName = name || `${fieldId}-name`;
18205
18254
  const invalid = Boolean(error);
18206
- const [internal, setInternal] = React54__default.useState(defaultValue);
18255
+ const [internal, setInternal] = React55__default.useState(defaultValue);
18207
18256
  const current = value !== void 0 ? value : internal;
18208
18257
  const select = (v) => {
18209
18258
  if (value === void 0) setInternal(v);
@@ -18224,10 +18273,10 @@ function RadioGroup({
18224
18273
  tone
18225
18274
  },
18226
18275
  o.value
18227
- )) : React54__default.Children.map(children, (child) => {
18228
- if (!React54__default.isValidElement(child)) return child;
18276
+ )) : React55__default.Children.map(children, (child) => {
18277
+ if (!React55__default.isValidElement(child)) return child;
18229
18278
  const v = child.props.value;
18230
- return React54__default.cloneElement(child, {
18279
+ return React55__default.cloneElement(child, {
18231
18280
  name: child.props.name ?? groupName,
18232
18281
  checked: child.props.checked ?? current === v,
18233
18282
  onChange: child.props.onChange ?? (() => select(v)),
@@ -18307,12 +18356,12 @@ function Rating({
18307
18356
  ...rest
18308
18357
  }) {
18309
18358
  const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
18310
- const [internal, setInternal] = React54__default.useState(defaultValue);
18311
- const [hover, setHover] = React54__default.useState(0);
18359
+ const [internal, setInternal] = React55__default.useState(defaultValue);
18360
+ const [hover, setHover] = React55__default.useState(0);
18312
18361
  const val = value !== void 0 ? value : internal;
18313
18362
  const shown = hover || val;
18314
18363
  const interactive = !readOnly && !disabled;
18315
- const btnRefs = React54__default.useRef([]);
18364
+ const btnRefs = React55__default.useRef([]);
18316
18365
  const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
18317
18366
  const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
18318
18367
  if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
@@ -18517,24 +18566,24 @@ function Sidebar({
18517
18566
  ...rest
18518
18567
  }) {
18519
18568
  const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
18520
- const navId = React54__default.useId();
18521
- const panelRef = React54__default.useRef(null);
18569
+ const navId = React55__default.useId();
18570
+ const panelRef = React55__default.useRef(null);
18522
18571
  const renderPortal = usePortal();
18523
- const [internal, setInternal] = React54__default.useState(defaultCollapsed);
18572
+ const [internal, setInternal] = React55__default.useState(defaultCollapsed);
18524
18573
  const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
18525
18574
  const toggle = () => {
18526
18575
  const next = !collapsed;
18527
18576
  if (collapsedProp === void 0) setInternal(next);
18528
18577
  onCollapsedChange?.(next);
18529
18578
  };
18530
- const [openInternal, setOpenInternal] = React54__default.useState(defaultOpen);
18579
+ const [openInternal, setOpenInternal] = React55__default.useState(defaultOpen);
18531
18580
  const open = openProp !== void 0 ? openProp : openInternal;
18532
18581
  const setOpen = (next) => {
18533
18582
  if (openProp === void 0) setOpenInternal(next);
18534
18583
  onOpenChange?.(next);
18535
18584
  };
18536
- const [mounted, setMounted] = React54__default.useState(open);
18537
- React54__default.useEffect(() => {
18585
+ const [mounted, setMounted] = React55__default.useState(open);
18586
+ React55__default.useEffect(() => {
18538
18587
  if (!overlay) return void 0;
18539
18588
  if (open) {
18540
18589
  setMounted(true);
@@ -18543,7 +18592,7 @@ function Sidebar({
18543
18592
  const t = setTimeout(() => setMounted(false), 170);
18544
18593
  return () => clearTimeout(t);
18545
18594
  }, [overlay, open]);
18546
- React54__default.useEffect(() => {
18595
+ React55__default.useEffect(() => {
18547
18596
  if (!overlay || !open) return void 0;
18548
18597
  const prev = document.body.style.overflow;
18549
18598
  document.body.style.overflow = "hidden";
@@ -18552,7 +18601,7 @@ function Sidebar({
18552
18601
  };
18553
18602
  }, [overlay, open]);
18554
18603
  useFocusTrap(panelRef, overlay && open && mounted);
18555
- React54__default.useEffect(() => {
18604
+ React55__default.useEffect(() => {
18556
18605
  if (!overlay || !open) return void 0;
18557
18606
  const onKey = (e) => {
18558
18607
  if (e.key === "Escape") {
@@ -18604,7 +18653,7 @@ function Sidebar({
18604
18653
  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
18605
18654
  __twcStyles,
18606
18655
  brand ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
18607
- /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
18656
+ /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
18608
18657
  g.section != null ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
18609
18658
  /* @__PURE__ */ jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsx("li", { children: renderItem(it) }, i)) })
18610
18659
  ] }, gi)) }),
@@ -18790,10 +18839,10 @@ function Slider({
18790
18839
  return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
18791
18840
  };
18792
18841
  const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
18793
- const autoId = React54__default.useId();
18842
+ const autoId = React55__default.useId();
18794
18843
  const fieldId = id || autoId;
18795
18844
  const isRange = range2 || Array.isArray(value) || Array.isArray(defaultValue);
18796
- const [internal, setInternal] = React54__default.useState(() => {
18845
+ const [internal, setInternal] = React55__default.useState(() => {
18797
18846
  if (isRange) {
18798
18847
  const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
18799
18848
  return [clampSnap(dv[0]), clampSnap(dv[1])];
@@ -18803,9 +18852,9 @@ function Slider({
18803
18852
  const rawVal = value !== void 0 ? value : internal;
18804
18853
  const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
18805
18854
  const indices = isRange ? [0, 1] : [0];
18806
- const trackRef = React54__default.useRef(null);
18807
- const [dragging, setDragging] = React54__default.useState(false);
18808
- const [typed, setTyped] = React54__default.useState({});
18855
+ const trackRef = React55__default.useRef(null);
18856
+ const [dragging, setDragging] = React55__default.useState(false);
18857
+ const [typed, setTyped] = React55__default.useState({});
18809
18858
  const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
18810
18859
  const valueTextFor = (v) => {
18811
18860
  if (getAriaValueText) return getAriaValueText(v);
@@ -18857,8 +18906,8 @@ function Slider({
18857
18906
  const ratio = Math.min(1, Math.max(0, (clientX - r2.left) / r2.width));
18858
18907
  return clampSnap(min + ratio * (max - min));
18859
18908
  };
18860
- const dragCleanupRef = React54__default.useRef(null);
18861
- React54__default.useEffect(() => () => dragCleanupRef.current?.(), []);
18909
+ const dragCleanupRef = React55__default.useRef(null);
18910
+ React55__default.useEffect(() => () => dragCleanupRef.current?.(), []);
18862
18911
  function onPointerDown(e) {
18863
18912
  if (disabled) return;
18864
18913
  e.preventDefault();
@@ -18907,7 +18956,7 @@ function Slider({
18907
18956
  name ? clampedVals.map((v, i) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v, disabled: disabled || void 0 }, i)) : null,
18908
18957
  label || showValue || editable ? /* @__PURE__ */ jsxs("div", { className: "twc-slider__head", children: [
18909
18958
  label ? /* @__PURE__ */ jsx("label", { className: "twc-slider__label", id: labelId, children: label }) : /* @__PURE__ */ jsx("span", {}),
18910
- editable ? /* @__PURE__ */ jsx("span", { className: "twc-slider__inputs", children: indices.map((i) => /* @__PURE__ */ jsxs(React54__default.Fragment, { children: [
18959
+ editable ? /* @__PURE__ */ jsx("span", { className: "twc-slider__inputs", children: indices.map((i) => /* @__PURE__ */ jsxs(React55__default.Fragment, { children: [
18911
18960
  i > 0 ? /* @__PURE__ */ jsx("span", { className: "twc-slider__input-sep", "aria-hidden": "true", children: "\u2013" }) : null,
18912
18961
  /* @__PURE__ */ jsx(
18913
18962
  "input",
@@ -19120,7 +19169,7 @@ function Stepper({
19120
19169
  ...rest
19121
19170
  }) {
19122
19171
  const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
19123
- const [activeInternal, setActiveInternal] = React54__default.useState(defaultActive);
19172
+ const [activeInternal, setActiveInternal] = React55__default.useState(defaultActive);
19124
19173
  const active = activeProp !== void 0 ? activeProp : activeInternal;
19125
19174
  const handleStep = (i) => {
19126
19175
  if (activeProp === void 0) setActiveInternal(i);
@@ -19200,7 +19249,7 @@ function Stepper({
19200
19249
  })
19201
19250
  ] });
19202
19251
  }
19203
- function Switch({
19252
+ var Switch = /* @__PURE__ */ React55__default.forwardRef(function Switch2({
19204
19253
  label,
19205
19254
  description,
19206
19255
  error,
@@ -19214,7 +19263,7 @@ function Switch({
19214
19263
  className = "",
19215
19264
  onChange,
19216
19265
  ...rest
19217
- }) {
19266
+ }, ref) {
19218
19267
  const __twcStyles = useScopedStyles("twc-switch-styles", `
19219
19268
  /* tone \u2192 accent set (default primary). Mirrors Button's --_accent model; Badge's tone vocabulary. */
19220
19269
  .twc-switch { --_accent: var(--color-primary); --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); --_accent-border: var(--color-primary-border); }
@@ -19267,7 +19316,7 @@ function Switch({
19267
19316
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
19268
19317
  .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
19269
19318
  `);
19270
- const autoId = React54__default.useId();
19319
+ const autoId = React55__default.useId();
19271
19320
  const fieldId = id || autoId;
19272
19321
  const errId = `${fieldId}-error`;
19273
19322
  const invalid = Boolean(error);
@@ -19280,6 +19329,7 @@ function Switch({
19280
19329
  /* @__PURE__ */ jsx(
19281
19330
  "input",
19282
19331
  {
19332
+ ref,
19283
19333
  id: fieldId,
19284
19334
  type: "checkbox",
19285
19335
  role: "switch",
@@ -19309,7 +19359,7 @@ function Switch({
19309
19359
  control,
19310
19360
  /* @__PURE__ */ jsx("span", { id: errId, className: "twc-field__error", children: error })
19311
19361
  ] });
19312
- }
19362
+ });
19313
19363
  var TABLE_CSS = `
19314
19364
  .twc-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); border: var(--border-thin) solid var(--color-border); background: var(--color-surface); }
19315
19365
  .twc-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text); }
@@ -19375,14 +19425,14 @@ function Table({
19375
19425
  ...rest
19376
19426
  }) {
19377
19427
  const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
19378
- const cols = React54__default.useMemo(
19428
+ const cols = React55__default.useMemo(
19379
19429
  () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
19380
19430
  [columns]
19381
19431
  );
19382
19432
  const dataRows = rowsProp || [];
19383
- const [internalSort, setInternalSort] = React54__default.useState(defaultSort || { field: null, dir: "asc" });
19433
+ const [internalSort, setInternalSort] = React55__default.useState(defaultSort || { field: null, dir: "asc" });
19384
19434
  const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
19385
- const rows = React54__default.useMemo(() => {
19435
+ const rows = React55__default.useMemo(() => {
19386
19436
  if (!sortable || !sort.field) return dataRows;
19387
19437
  const col = cols.find((c) => c.field === sort.field);
19388
19438
  if (!col) return dataRows;
@@ -19534,15 +19584,15 @@ function Tabs({
19534
19584
  }) {
19535
19585
  const vertical = orientation === "vertical";
19536
19586
  const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
19537
- const [internal, setInternal] = React54__default.useState(defaultValue ?? items[0]?.value);
19587
+ const [internal, setInternal] = React55__default.useState(defaultValue ?? items[0]?.value);
19538
19588
  const active = value ?? internal;
19539
- const listRef = React54__default.useRef(null);
19540
- const [ind, setInd] = React54__default.useState({ left: 0, width: 0, top: 0, height: 0 });
19541
- const baseId = React54__default.useId();
19589
+ const listRef = React55__default.useRef(null);
19590
+ const [ind, setInd] = React55__default.useState({ left: 0, width: 0, top: 0, height: 0 });
19591
+ const baseId = React55__default.useId();
19542
19592
  const tabIdAt = (i) => `${baseId}-tab-${i}`;
19543
19593
  const panelId = `${baseId}-panel`;
19544
19594
  const activeIndex = items.findIndex((it) => it.value === active);
19545
- const updateIndicator = React54__default.useCallback(() => {
19595
+ const updateIndicator = React55__default.useCallback(() => {
19546
19596
  const list = listRef.current;
19547
19597
  if (!list) return;
19548
19598
  const el = list.querySelector('[data-active="true"]');
@@ -19551,10 +19601,10 @@ function Tabs({
19551
19601
  if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
19552
19602
  }
19553
19603
  }, [vertical]);
19554
- React54__default.useEffect(() => {
19604
+ React55__default.useEffect(() => {
19555
19605
  updateIndicator();
19556
19606
  }, [active, updateIndicator, items, orientation]);
19557
- React54__default.useEffect(() => {
19607
+ React55__default.useEffect(() => {
19558
19608
  const r2 = () => updateIndicator();
19559
19609
  window.addEventListener("resize", r2);
19560
19610
  if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -19700,7 +19750,7 @@ function Tag({
19700
19750
  }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
19701
19751
  ] });
19702
19752
  }
19703
- var useIso = typeof document !== "undefined" ? React54__default.useLayoutEffect : React54__default.useEffect;
19753
+ var useIso = typeof document !== "undefined" ? React55__default.useLayoutEffect : React55__default.useEffect;
19704
19754
  var TEXTAREA_CSS = `
19705
19755
  .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
19706
19756
  .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -19749,7 +19799,7 @@ var TEXTAREA_CSS = `
19749
19799
  .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
19750
19800
  .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
19751
19801
  `;
19752
- var Textarea = React54__default.forwardRef(function Textarea2({
19802
+ var Textarea = /* @__PURE__ */ React55__default.forwardRef(function Textarea2({
19753
19803
  label,
19754
19804
  hint,
19755
19805
  error,
@@ -19768,19 +19818,19 @@ var Textarea = React54__default.forwardRef(function Textarea2({
19768
19818
  ...rest
19769
19819
  }, ref) {
19770
19820
  const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
19771
- const autoId = React54__default.useId();
19821
+ const autoId = React55__default.useId();
19772
19822
  const fieldId = id || autoId;
19773
19823
  const descId = `${fieldId}-desc`;
19774
19824
  const countId = `${fieldId}-count`;
19775
19825
  const invalid = Boolean(error);
19776
- const innerRef = React54__default.useRef(null);
19826
+ const innerRef = React55__default.useRef(null);
19777
19827
  const setRef = (el) => {
19778
19828
  innerRef.current = el;
19779
19829
  if (typeof ref === "function") ref(el);
19780
19830
  else if (ref) ref.current = el;
19781
19831
  };
19782
19832
  const countControlled = rest.value !== void 0;
19783
- const [len2, setLen] = React54__default.useState(() => String(rest.defaultValue ?? "").length);
19833
+ const [len2, setLen] = React55__default.useState(() => String(rest.defaultValue ?? "").length);
19784
19834
  const count = countControlled ? String(rest.value ?? "").length : len2;
19785
19835
  const max = rest.maxLength;
19786
19836
  const showCounter = showCount && max != null;
@@ -19982,19 +20032,19 @@ function Toast({
19982
20032
  }) {
19983
20033
  const resolvedTone = tone === "neutral" ? "default" : tone;
19984
20034
  const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
19985
- const onCloseRef = React54__default.useRef(onClose);
19986
- React54__default.useEffect(() => {
20035
+ const onCloseRef = React55__default.useRef(onClose);
20036
+ React55__default.useEffect(() => {
19987
20037
  onCloseRef.current = onClose;
19988
20038
  }, [onClose]);
19989
- const timer = React54__default.useRef();
19990
- const stop = React54__default.useCallback(() => clearTimeout(timer.current), []);
19991
- const start = React54__default.useCallback(() => {
20039
+ const timer = React55__default.useRef();
20040
+ const stop = React55__default.useCallback(() => clearTimeout(timer.current), []);
20041
+ const start = React55__default.useCallback(() => {
19992
20042
  stop();
19993
20043
  if (duration && duration !== Infinity && onCloseRef.current) {
19994
20044
  timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
19995
20045
  }
19996
20046
  }, [duration, stop]);
19997
- React54__default.useEffect(() => {
20047
+ React55__default.useEffect(() => {
19998
20048
  start();
19999
20049
  return stop;
20000
20050
  }, [start, stop]);
@@ -20039,32 +20089,32 @@ function Toast({
20039
20089
  }
20040
20090
  function ToastViewport({ children, limit, className = "", ...rest }) {
20041
20091
  const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
20042
- const shown = limit && limit > 0 ? React54__default.Children.toArray(children).slice(-limit) : children;
20092
+ const shown = limit && limit > 0 ? React55__default.Children.toArray(children).slice(-limit) : children;
20043
20093
  return /* @__PURE__ */ jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
20044
20094
  __twcStyles,
20045
20095
  shown
20046
20096
  ] });
20047
20097
  }
20048
- var ToastContext = React54__default.createContext(null);
20098
+ var ToastContext = React55__default.createContext(null);
20049
20099
  function useToast() {
20050
- const ctx = React54__default.useContext(ToastContext);
20100
+ const ctx = React55__default.useContext(ToastContext);
20051
20101
  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
20052
20102
  return ctx;
20053
20103
  }
20054
20104
  function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
20055
- const [toasts, setToasts] = React54__default.useState([]);
20056
- const [politeMsg, setPoliteMsg] = React54__default.useState("");
20057
- const [assertiveMsg, setAssertiveMsg] = React54__default.useState("");
20058
- const idRef = React54__default.useRef(0);
20059
- const limitRef = React54__default.useRef(limit);
20060
- React54__default.useEffect(() => {
20105
+ const [toasts, setToasts] = React55__default.useState([]);
20106
+ const [politeMsg, setPoliteMsg] = React55__default.useState("");
20107
+ const [assertiveMsg, setAssertiveMsg] = React55__default.useState("");
20108
+ const idRef = React55__default.useRef(0);
20109
+ const limitRef = React55__default.useRef(limit);
20110
+ React55__default.useEffect(() => {
20061
20111
  limitRef.current = limit;
20062
20112
  }, [limit]);
20063
- const dismiss = React54__default.useCallback((id) => {
20113
+ const dismiss = React55__default.useCallback((id) => {
20064
20114
  setToasts((s) => s.filter((t) => t.id !== id));
20065
20115
  }, []);
20066
- const clear = React54__default.useCallback(() => setToasts([]), []);
20067
- const api = React54__default.useMemo(() => {
20116
+ const clear = React55__default.useCallback(() => setToasts([]), []);
20117
+ const api = React55__default.useMemo(() => {
20068
20118
  const push = (opts) => {
20069
20119
  const id = idRef.current += 1;
20070
20120
  const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -20091,7 +20141,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
20091
20141
  toast.show = withTone("default");
20092
20142
  return { toast, dismiss, clear };
20093
20143
  }, [dismiss, clear]);
20094
- const value = React54__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
20144
+ const value = React55__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
20095
20145
  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
20096
20146
  children,
20097
20147
  /* @__PURE__ */ jsx("div", { className: "twc-toast-sr", "aria-live": "polite", "aria-atomic": "true", children: politeMsg }),
@@ -20205,13 +20255,13 @@ function TreeView({
20205
20255
  }) {
20206
20256
  const nodes = items;
20207
20257
  const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
20208
- const [expInternal, setExpInternal] = React54__default.useState(() => new Set(defaultExpanded));
20258
+ const [expInternal, setExpInternal] = React55__default.useState(() => new Set(defaultExpanded));
20209
20259
  const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
20210
- const [selInternal, setSelInternal] = React54__default.useState(defaultSelectedId);
20260
+ const [selInternal, setSelInternal] = React55__default.useState(defaultSelectedId);
20211
20261
  const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
20212
- const [focusId, setFocusId] = React54__default.useState(null);
20213
- const rowRefs = React54__default.useRef(/* @__PURE__ */ new Map());
20214
- const taRef = React54__default.useRef({ str: "", t: 0 });
20262
+ const [focusId, setFocusId] = React55__default.useState(null);
20263
+ const rowRefs = React55__default.useRef(/* @__PURE__ */ new Map());
20264
+ const taRef = React55__default.useRef({ str: "", t: 0 });
20215
20265
  const toggle = (id) => {
20216
20266
  const n = new Set(expanded);
20217
20267
  n.has(id) ? n.delete(id) : n.add(id);
@@ -20349,7 +20399,7 @@ function AppShell({
20349
20399
  ...rest
20350
20400
  }) {
20351
20401
  const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
20352
- const wiredSidebar = React54__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React54__default.cloneElement(sidebar, {
20402
+ const wiredSidebar = React55__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React55__default.cloneElement(sidebar, {
20353
20403
  overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
20354
20404
  open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
20355
20405
  onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
@@ -20384,7 +20434,7 @@ function safeHref9(url) {
20384
20434
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20385
20435
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20386
20436
  }
20387
- var Box = React54__default.forwardRef(function Box2({
20437
+ var Box = /* @__PURE__ */ React55__default.forwardRef(function Box2({
20388
20438
  as: Tag2 = "div",
20389
20439
  p,
20390
20440
  px,
@@ -20433,14 +20483,13 @@ var Box = React54__default.forwardRef(function Box2({
20433
20483
  children
20434
20484
  ] });
20435
20485
  });
20436
- Box.displayName = "Box";
20437
20486
  var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
20438
20487
  function safeHref10(url) {
20439
20488
  if (url == null) return void 0;
20440
20489
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20441
20490
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20442
20491
  }
20443
- var Container = React54__default.forwardRef(function Container2({
20492
+ var Container = /* @__PURE__ */ React55__default.forwardRef(function Container2({
20444
20493
  as: Tag2 = "div",
20445
20494
  size = "lg",
20446
20495
  padded = true,
@@ -20477,7 +20526,6 @@ var Container = React54__default.forwardRef(function Container2({
20477
20526
  }
20478
20527
  );
20479
20528
  });
20480
- Container.displayName = "Container";
20481
20529
  function space2(v) {
20482
20530
  if (v == null) return void 0;
20483
20531
  if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
@@ -20488,7 +20536,7 @@ function safeHref11(url) {
20488
20536
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20489
20537
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20490
20538
  }
20491
- var Stack = React54__default.forwardRef(function Stack2({
20539
+ var Stack = /* @__PURE__ */ React55__default.forwardRef(function Stack2({
20492
20540
  as: Tag2 = "div",
20493
20541
  direction = "column",
20494
20542
  gap = 4,
@@ -20512,7 +20560,7 @@ var Stack = React54__default.forwardRef(function Stack2({
20512
20560
  }, ref) {
20513
20561
  const { flatStyle, styleNode, sxAttr } = useSx(sx);
20514
20562
  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
20515
- const kids = divider != null ? React54__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React54__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
20563
+ const kids = divider != null ? React55__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React55__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
20516
20564
  return /* @__PURE__ */ jsxs(
20517
20565
  Tag2,
20518
20566
  {
@@ -20542,7 +20590,6 @@ var Stack = React54__default.forwardRef(function Stack2({
20542
20590
  }
20543
20591
  );
20544
20592
  });
20545
- Stack.displayName = "Stack";
20546
20593
  var CODE_CSS = `
20547
20594
  .twc-code {
20548
20595
  font-family: var(--font-mono); font-size: 0.875em;
@@ -20571,7 +20618,7 @@ function safeHref12(url) {
20571
20618
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20572
20619
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20573
20620
  }
20574
- function Code({
20621
+ var Code = /* @__PURE__ */ React55__default.forwardRef(function Code2({
20575
20622
  as,
20576
20623
  block = false,
20577
20624
  copyable = false,
@@ -20580,14 +20627,15 @@ function Code({
20580
20627
  className = "",
20581
20628
  children,
20582
20629
  ...rest
20583
- }) {
20630
+ }, ref) {
20584
20631
  const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
20585
20632
  const Tag2 = as ?? (block ? "pre" : "code");
20586
20633
  if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
20587
- const rootRef = React54__default.useRef(null);
20588
- const [copied, setCopied] = React54__default.useState(false);
20589
- const timerRef = React54__default.useRef(null);
20590
- React54__default.useEffect(() => () => clearTimeout(timerRef.current), []);
20634
+ const rootRef = React55__default.useRef(null);
20635
+ const setRootRef = useMergedRef(rootRef, ref);
20636
+ const [copied, setCopied] = React55__default.useState(false);
20637
+ const timerRef = React55__default.useRef(null);
20638
+ React55__default.useEffect(() => () => clearTimeout(timerRef.current), []);
20591
20639
  const doCopy = () => {
20592
20640
  const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
20593
20641
  const flash = () => {
@@ -20620,7 +20668,7 @@ function Code({
20620
20668
  }
20621
20669
  execFallback();
20622
20670
  };
20623
- return /* @__PURE__ */ jsxs(Tag2, { ref: rootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
20671
+ return /* @__PURE__ */ jsxs(Tag2, { ref: setRootRef, className: `twc-code ${className}`.trim(), "data-block": block || void 0, ...rest, children: [
20624
20672
  __twcStyles,
20625
20673
  copyable ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-code__copy", "aria-label": copied ? copiedLabel : copyLabel, onClick: doCopy, children: copied ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m20 6-11 11-5-5" }) }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
20626
20674
  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
@@ -20628,14 +20676,14 @@ function Code({
20628
20676
  ] }) }) : null,
20629
20677
  children
20630
20678
  ] });
20631
- }
20679
+ });
20632
20680
  var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
20633
20681
  function safeHref13(url) {
20634
20682
  if (url == null) return void 0;
20635
20683
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20636
20684
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20637
20685
  }
20638
- var Heading = React54__default.forwardRef(function Heading2({
20686
+ var Heading = /* @__PURE__ */ React55__default.forwardRef(function Heading2({
20639
20687
  as,
20640
20688
  level = 2,
20641
20689
  size,
@@ -20683,7 +20731,6 @@ var Heading = React54__default.forwardRef(function Heading2({
20683
20731
  }
20684
20732
  );
20685
20733
  });
20686
- Heading.displayName = "Heading";
20687
20734
  var TONE = {
20688
20735
  default: "--color-text",
20689
20736
  muted: "--color-text-muted",
@@ -20704,7 +20751,7 @@ function safeHref14(url) {
20704
20751
  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
20705
20752
  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
20706
20753
  }
20707
- var Text = React54__default.forwardRef(function Text2({
20754
+ var Text = /* @__PURE__ */ React55__default.forwardRef(function Text2({
20708
20755
  as: Tag2 = "p",
20709
20756
  size = "base",
20710
20757
  tone = "default",
@@ -20750,47 +20797,46 @@ var Text = React54__default.forwardRef(function Text2({
20750
20797
  }
20751
20798
  );
20752
20799
  });
20753
- Text.displayName = "Text";
20754
20800
  var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
20755
- var useIsomorphicLayoutEffect = canUseDOM2 ? React54__default.useLayoutEffect : React54__default.useEffect;
20801
+ var useIsomorphicLayoutEffect = canUseDOM2 ? React55__default.useLayoutEffect : React55__default.useEffect;
20756
20802
  function useMounted() {
20757
- const [mounted, setMounted] = React54__default.useState(false);
20758
- React54__default.useEffect(() => {
20803
+ const [mounted, setMounted] = React55__default.useState(false);
20804
+ React55__default.useEffect(() => {
20759
20805
  setMounted(true);
20760
20806
  }, []);
20761
20807
  return mounted;
20762
20808
  }
20763
20809
  function usePrevious(value) {
20764
- const ref = React54__default.useRef(void 0);
20765
- React54__default.useEffect(() => {
20810
+ const ref = React55__default.useRef(void 0);
20811
+ React55__default.useEffect(() => {
20766
20812
  ref.current = value;
20767
20813
  }, [value]);
20768
20814
  return ref.current;
20769
20815
  }
20770
20816
  function useToggle(initial = false) {
20771
- const [on, setOn] = React54__default.useState(initial);
20772
- const toggle = React54__default.useCallback((next) => {
20817
+ const [on, setOn] = React55__default.useState(initial);
20818
+ const toggle = React55__default.useCallback((next) => {
20773
20819
  setOn((prev) => typeof next === "boolean" ? next : !prev);
20774
20820
  }, []);
20775
20821
  return [on, toggle, setOn];
20776
20822
  }
20777
20823
  function useDisclosure(initial = false) {
20778
- const [open, setOpen] = React54__default.useState(initial);
20779
- const onOpen = React54__default.useCallback(() => setOpen(true), []);
20780
- const onClose = React54__default.useCallback(() => setOpen(false), []);
20781
- const onToggle = React54__default.useCallback(() => setOpen((p) => !p), []);
20824
+ const [open, setOpen] = React55__default.useState(initial);
20825
+ const onOpen = React55__default.useCallback(() => setOpen(true), []);
20826
+ const onClose = React55__default.useCallback(() => setOpen(false), []);
20827
+ const onToggle = React55__default.useCallback(() => setOpen((p) => !p), []);
20782
20828
  return { open, onOpen, onClose, onToggle, setOpen };
20783
20829
  }
20784
20830
  function useControllableState({ value, defaultValue, onChange } = {}) {
20785
20831
  const isControlled = value !== void 0;
20786
- const [uncontrolled, setUncontrolled] = React54__default.useState(defaultValue);
20832
+ const [uncontrolled, setUncontrolled] = React55__default.useState(defaultValue);
20787
20833
  const current = isControlled ? value : uncontrolled;
20788
- const ref = React54__default.useRef({ current, isControlled, onChange });
20834
+ const ref = React55__default.useRef({ current, isControlled, onChange });
20789
20835
  useIsomorphicLayoutEffect(() => {
20790
20836
  ref.current = { current, isControlled, onChange };
20791
20837
  });
20792
- const wasControlled = React54__default.useRef(isControlled);
20793
- React54__default.useEffect(() => {
20838
+ const wasControlled = React55__default.useRef(isControlled);
20839
+ React55__default.useEffect(() => {
20794
20840
  if (wasControlled.current !== isControlled) {
20795
20841
  warnOnce(
20796
20842
  "useControllableState:switch",
@@ -20799,7 +20845,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
20799
20845
  wasControlled.current = isControlled;
20800
20846
  }
20801
20847
  });
20802
- const setValue = React54__default.useCallback((next) => {
20848
+ const setValue = React55__default.useCallback((next) => {
20803
20849
  const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
20804
20850
  const resolved = typeof next === "function" ? next(cur) : next;
20805
20851
  if (resolved === cur) return;
@@ -20810,7 +20856,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
20810
20856
  }
20811
20857
  function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
20812
20858
  const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
20813
- const [matches3, setMatches] = React54__default.useState(initializeWithValue ? get : defaultValue);
20859
+ const [matches3, setMatches] = React55__default.useState(initializeWithValue ? get : defaultValue);
20814
20860
  useIsomorphicLayoutEffect(() => {
20815
20861
  if (!canUseDOM2) return void 0;
20816
20862
  const mql = window.matchMedia(query);
@@ -20826,7 +20872,7 @@ function usePrefersReducedMotion() {
20826
20872
  }
20827
20873
  function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true, initializeWithValue = false } = {}) {
20828
20874
  const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
20829
- const firstApply = React54__default.useRef(true);
20875
+ const firstApply = React55__default.useRef(true);
20830
20876
  const read = () => {
20831
20877
  if (!canUseDOM2) return "light";
20832
20878
  try {
@@ -20836,8 +20882,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
20836
20882
  }
20837
20883
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
20838
20884
  };
20839
- const [theme, setThemeState] = React54__default.useState(initializeWithValue ? read : "light");
20840
- const apply = React54__default.useCallback(
20885
+ const [theme, setThemeState] = React55__default.useState(initializeWithValue ? read : "light");
20886
+ const apply = React55__default.useCallback(
20841
20887
  (t) => {
20842
20888
  const target = getTarget();
20843
20889
  if (!target) return;
@@ -20860,7 +20906,7 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
20860
20906
  },
20861
20907
  [attribute, element, disableTransitionsOnChange]
20862
20908
  );
20863
- const resolved = React54__default.useRef(false);
20909
+ const resolved = React55__default.useRef(false);
20864
20910
  useIsomorphicLayoutEffect(() => {
20865
20911
  if (!resolved.current) {
20866
20912
  resolved.current = true;
@@ -20873,11 +20919,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
20873
20919
  }
20874
20920
  apply(theme);
20875
20921
  }, [theme, apply]);
20876
- const themeRef = React54__default.useRef(theme);
20922
+ const themeRef = React55__default.useRef(theme);
20877
20923
  useIsomorphicLayoutEffect(() => {
20878
20924
  themeRef.current = theme;
20879
20925
  }, [theme]);
20880
- const setTheme = React54__default.useCallback(
20926
+ const setTheme = React55__default.useCallback(
20881
20927
  (t) => {
20882
20928
  setThemeState(t);
20883
20929
  try {
@@ -20888,10 +20934,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
20888
20934
  },
20889
20935
  [storageKey]
20890
20936
  );
20891
- const toggle = React54__default.useCallback(() => {
20937
+ const toggle = React55__default.useCallback(() => {
20892
20938
  setTheme(themeRef.current === "dark" ? "light" : "dark");
20893
20939
  }, [setTheme]);
20894
- React54__default.useEffect(() => {
20940
+ React55__default.useEffect(() => {
20895
20941
  if (!canUseDOM2) return void 0;
20896
20942
  const sync = () => setThemeState(read());
20897
20943
  const onStorage = (e) => {
@@ -20907,14 +20953,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
20907
20953
  return { theme, setTheme, toggle, isDark: theme === "dark" };
20908
20954
  }
20909
20955
  function useEventListener(eventName, handler, element, options) {
20910
- const saved = React54__default.useRef(handler);
20956
+ const saved = React55__default.useRef(handler);
20911
20957
  useIsomorphicLayoutEffect(() => {
20912
20958
  saved.current = handler;
20913
20959
  }, [handler]);
20914
20960
  const capture = typeof options === "boolean" ? options : options && options.capture;
20915
20961
  const passive = typeof options === "object" && options ? options.passive : void 0;
20916
20962
  const once = typeof options === "object" && options ? options.once : void 0;
20917
- React54__default.useEffect(() => {
20963
+ React55__default.useEffect(() => {
20918
20964
  const target = element && element.current || element || (canUseDOM2 ? window : null);
20919
20965
  if (!target || !target.addEventListener) return void 0;
20920
20966
  const opts = typeof options === "boolean" ? options : { capture, passive, once };
@@ -20924,11 +20970,11 @@ function useEventListener(eventName, handler, element, options) {
20924
20970
  }, [eventName, element, capture, passive, once]);
20925
20971
  }
20926
20972
  function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
20927
- const saved = React54__default.useRef(handler);
20973
+ const saved = React55__default.useRef(handler);
20928
20974
  useIsomorphicLayoutEffect(() => {
20929
20975
  saved.current = handler;
20930
20976
  }, [handler]);
20931
- React54__default.useEffect(() => {
20977
+ React55__default.useEffect(() => {
20932
20978
  if (!canUseDOM2) return void 0;
20933
20979
  const listener = (e) => {
20934
20980
  const el = ref && ref.current;
@@ -20963,12 +21009,12 @@ function useLocalStorage(key, initialValue, { initializeWithValue = false } = {}
20963
21009
  return initialValue;
20964
21010
  }
20965
21011
  };
20966
- const [stored, setStored] = React54__default.useState(initializeWithValue ? read : initialValue);
21012
+ const [stored, setStored] = React55__default.useState(initializeWithValue ? read : initialValue);
20967
21013
  useIsomorphicLayoutEffect(() => {
20968
21014
  if (!canUseDOM2) return;
20969
21015
  setStored(read());
20970
21016
  }, [key]);
20971
- const setValue = React54__default.useCallback(
21017
+ const setValue = React55__default.useCallback(
20972
21018
  (value) => {
20973
21019
  setStored((prev) => {
20974
21020
  const next = typeof value === "function" ? value(prev) : value;
@@ -21007,9 +21053,9 @@ function legacyCopy(text) {
21007
21053
  }
21008
21054
  }
21009
21055
  function useCopyToClipboard(timeout = 1500) {
21010
- const [copied, setCopied] = React54__default.useState(false);
21011
- const [copyTick, setCopyTick] = React54__default.useState(0);
21012
- const copy = React54__default.useCallback(async (text) => {
21056
+ const [copied, setCopied] = React55__default.useState(false);
21057
+ const [copyTick, setCopyTick] = React55__default.useState(0);
21058
+ const copy = React55__default.useCallback(async (text) => {
21013
21059
  if (!canUseDOM2) {
21014
21060
  setCopied(false);
21015
21061
  return false;
@@ -21028,7 +21074,7 @@ function useCopyToClipboard(timeout = 1500) {
21028
21074
  if (ok) setCopyTick((t) => t + 1);
21029
21075
  return ok;
21030
21076
  }, []);
21031
- React54__default.useEffect(() => {
21077
+ React55__default.useEffect(() => {
21032
21078
  if (!copied) return void 0;
21033
21079
  const t = setTimeout(() => setCopied(false), timeout);
21034
21080
  return () => clearTimeout(t);
@@ -21036,23 +21082,23 @@ function useCopyToClipboard(timeout = 1500) {
21036
21082
  return { copied, copy };
21037
21083
  }
21038
21084
  function useDebouncedValue(value, delay = 200) {
21039
- const [debounced, setDebounced] = React54__default.useState(value);
21040
- React54__default.useEffect(() => {
21085
+ const [debounced, setDebounced] = React55__default.useState(value);
21086
+ React55__default.useEffect(() => {
21041
21087
  const t = setTimeout(() => setDebounced(value), delay);
21042
21088
  return () => clearTimeout(t);
21043
21089
  }, [value, delay]);
21044
21090
  return debounced;
21045
21091
  }
21046
21092
  function useDebouncedCallback(callback, delay = 200) {
21047
- const saved = React54__default.useRef(callback);
21048
- const timer = React54__default.useRef(null);
21093
+ const saved = React55__default.useRef(callback);
21094
+ const timer = React55__default.useRef(null);
21049
21095
  useIsomorphicLayoutEffect(() => {
21050
21096
  saved.current = callback;
21051
21097
  }, [callback]);
21052
- React54__default.useEffect(() => () => {
21098
+ React55__default.useEffect(() => () => {
21053
21099
  if (timer.current) clearTimeout(timer.current);
21054
21100
  }, []);
21055
- return React54__default.useCallback(
21101
+ return React55__default.useCallback(
21056
21102
  (...args) => {
21057
21103
  if (timer.current) clearTimeout(timer.current);
21058
21104
  timer.current = setTimeout(() => saved.current(...args), delay);
@@ -21061,22 +21107,22 @@ function useDebouncedCallback(callback, delay = 200) {
21061
21107
  );
21062
21108
  }
21063
21109
  function useInterval(callback, delay) {
21064
- const saved = React54__default.useRef(callback);
21110
+ const saved = React55__default.useRef(callback);
21065
21111
  useIsomorphicLayoutEffect(() => {
21066
21112
  saved.current = callback;
21067
21113
  }, [callback]);
21068
- React54__default.useEffect(() => {
21114
+ React55__default.useEffect(() => {
21069
21115
  if (delay == null) return void 0;
21070
21116
  const id = setInterval(() => saved.current(), delay);
21071
21117
  return () => clearInterval(id);
21072
21118
  }, [delay]);
21073
21119
  }
21074
21120
  function useTimeout(callback, delay) {
21075
- const saved = React54__default.useRef(callback);
21121
+ const saved = React55__default.useRef(callback);
21076
21122
  useIsomorphicLayoutEffect(() => {
21077
21123
  saved.current = callback;
21078
21124
  }, [callback]);
21079
- React54__default.useEffect(() => {
21125
+ React55__default.useEffect(() => {
21080
21126
  if (delay == null) return void 0;
21081
21127
  const id = setTimeout(() => saved.current(), delay);
21082
21128
  return () => clearTimeout(id);
@@ -21087,7 +21133,7 @@ function useWindowSize({ initializeWithValue = false } = {}) {
21087
21133
  width: canUseDOM2 ? window.innerWidth : 0,
21088
21134
  height: canUseDOM2 ? window.innerHeight : 0
21089
21135
  });
21090
- const [size, setSize] = React54__default.useState(initializeWithValue ? get : { width: 0, height: 0 });
21136
+ const [size, setSize] = React55__default.useState(initializeWithValue ? get : { width: 0, height: 0 });
21091
21137
  useIsomorphicLayoutEffect(() => {
21092
21138
  if (!canUseDOM2) return void 0;
21093
21139
  const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
@@ -21098,8 +21144,8 @@ function useWindowSize({ initializeWithValue = false } = {}) {
21098
21144
  return size;
21099
21145
  }
21100
21146
  function useHover(ref) {
21101
- const [hovered, setHovered] = React54__default.useState(false);
21102
- React54__default.useEffect(() => {
21147
+ const [hovered, setHovered] = React55__default.useState(false);
21148
+ React55__default.useEffect(() => {
21103
21149
  const el = ref && ref.current;
21104
21150
  if (!el) return void 0;
21105
21151
  const on = () => setHovered(true);
@@ -21115,8 +21161,8 @@ function useHover(ref) {
21115
21161
  }
21116
21162
  function useIntersectionObserver(ref, options = {}) {
21117
21163
  const { root = null, rootMargin = "0px", threshold = 0 } = options;
21118
- const [entry, setEntry] = React54__default.useState(null);
21119
- React54__default.useEffect(() => {
21164
+ const [entry, setEntry] = React55__default.useState(null);
21165
+ React55__default.useEffect(() => {
21120
21166
  const el = ref && ref.current;
21121
21167
  if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
21122
21168
  const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
@@ -21126,20 +21172,20 @@ function useIntersectionObserver(ref, options = {}) {
21126
21172
  return entry;
21127
21173
  }
21128
21174
  function useId(prefix = "twc") {
21129
- const raw = React54__default.useId();
21175
+ const raw = React55__default.useId();
21130
21176
  return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
21131
21177
  }
21132
21178
  var useFocusTrap2 = useFocusTrap;
21133
21179
  var usePortal2 = usePortal;
21134
21180
  var useScrollLock2 = useScrollLock;
21135
21181
  function useFilePicker({ accept, multiple = false, maxSize, maxFiles, onFiles, onReject } = {}) {
21136
- const inputRef = React54__default.useRef(null);
21137
- const cbRef = React54__default.useRef({ onFiles, onReject });
21182
+ const inputRef = React55__default.useRef(null);
21183
+ const cbRef = React55__default.useRef({ onFiles, onReject });
21138
21184
  cbRef.current = { onFiles, onReject };
21139
- const open = React54__default.useCallback(() => {
21185
+ const open = React55__default.useCallback(() => {
21140
21186
  inputRef.current?.click();
21141
21187
  }, []);
21142
- const getInputProps = React54__default.useCallback(() => ({
21188
+ const getInputProps = React55__default.useCallback(() => ({
21143
21189
  ref: inputRef,
21144
21190
  type: "file",
21145
21191
  accept,