twico-ui 1.6.0 → 1.7.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React25 = require('react');
+var React36 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
@@ -23,21 +23,334 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React25__namespace = /*#__PURE__*/_interopNamespace(React25);
+var React36__namespace = /*#__PURE__*/_interopNamespace(React36);
 
-// components/navigation/Accordion.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React25__namespace.version), 10) >= 19;
+// components/TwicoProvider.jsx
+var SUPPORTS_STYLE_HOIST = parseInt(String(React36__namespace.version), 10) >= 19;
+var NonceContext = React36__namespace.createContext(void 0);
 function useScopedStyles(id, css) {
-  React25__namespace.useInsertionEffect(() => {
+  const nonce = React36__namespace.useContext(NonceContext);
+  React36__namespace.useInsertionEffect(() => {
     if (SUPPORTS_STYLE_HOIST) return;
     if (typeof document === "undefined" || document.getElementById(id)) return;
     const el = document.createElement("style");
     el.id = id;
+    if (nonce) {
+      el.setAttribute("nonce", nonce);
+      el.nonce = nonce;
+    }
     el.textContent = css;
     document.head.appendChild(el);
-  }, [id, css]);
-  return SUPPORTS_STYLE_HOIST ? React25__namespace.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+  }, [id, css, nonce]);
+  return SUPPORTS_STYLE_HOIST ? React36__namespace.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+}
+
+// components/TwicoProvider.jsx
+function TwicoProvider({ nonce, children }) {
+  return React36__namespace.default.createElement(NonceContext.Provider, { value: nonce }, children);
+}
+var GROUPS = { colors: "color", space: "space", radius: "radius", font: "font", shadow: "shadow", motion: "" };
+function createTheme(partial = {}) {
+  const vars = {};
+  for (const [group, prefix] of Object.entries(GROUPS)) {
+    const obj = partial[group];
+    if (!obj || typeof obj !== "object") continue;
+    for (const [key, value] of Object.entries(obj)) {
+      if (value == null) continue;
+      vars[`--${prefix ? `${prefix}-` : ""}${key}`] = String(value);
+    }
+  }
+  return vars;
+}
+function toVars(theme) {
+  if (!theme) return {};
+  return Object.keys(theme).some((k) => k.startsWith("--")) ? theme : createTheme(theme);
+}
+function ThemeProvider({ theme, mode = "inline", className = "", style, children, ...rest }) {
+  const vars = React36__namespace.default.useMemo(() => toVars(theme), [theme]);
+  const uid = React36__namespace.default.useId();
+  const scopeId = `twc-theme-${uid.replace(/[^a-zA-Z0-9]/g, "")}`;
+  const css = mode === "stylesheet" ? `[data-twc-theme="${scopeId}"] { ${Object.entries(vars).map(([k, v]) => `${k}: ${v};`).join(" ")} }` : "";
+  const __twcStyles = useScopedStyles(mode === "stylesheet" ? scopeId : "twc-theme-noop", css);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `twc-theme ${className}`.trim(),
+      "data-twc-theme": mode === "stylesheet" ? scopeId : void 0,
+      style: mode === "stylesheet" ? style : { ...vars, ...style },
+      ...rest,
+      children: [
+        mode === "stylesheet" ? __twcStyles : null,
+        children
+      ]
+    }
+  );
+}
+var FORM_CSS = `
+.twc-form { display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-sans); }
+.twc-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: inherit; }
+`;
+var Form = React36__namespace.default.forwardRef(function Form2({
+  onSubmit,
+  preventDefault = true,
+  loading = false,
+  disabled = false,
+  gap,
+  className = "",
+  style,
+  children,
+  ...rest
+}, ref) {
+  const __twcStyles = useScopedStyles("twc-form-styles", FORM_CSS);
+  const handleSubmit = (e) => {
+    if (preventDefault) e.preventDefault();
+    onSubmit?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      ref,
+      className: `twc-form ${className}`.trim(),
+      onSubmit: handleSubmit,
+      style: gap != null ? { gap: `var(--space-${gap})`, ...style } : style,
+      ...rest,
+      children: [
+        __twcStyles,
+        /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: "twc-form__fieldset", disabled: loading || disabled || void 0, "aria-busy": loading || void 0, children })
+      ]
+    }
+  );
+});
+Form.displayName = "Form";
+var VH_CSS = `
+.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; }
+`;
+var VisuallyHidden = React36__namespace.default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-visually-hidden ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+VisuallyHidden.displayName = "VisuallyHidden";
+var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
+var useIsoLayoutEffect = canUseDOM ? React36__namespace.default.useLayoutEffect : React36__namespace.default.useEffect;
+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"])';
+function useFocusTrap(ref, active = true, { restoreFocus = true, initialFocus } = {}) {
+  React36__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    if (!node) return void 0;
+    const prevFocused = document.activeElement;
+    const target = (typeof initialFocus === "function" ? initialFocus() : initialFocus && initialFocus.current) || node.querySelector(FOCUSABLE);
+    (target || node).focus();
+    return () => {
+      if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
+    };
+  }, [active]);
+  React36__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    const onKey = (e) => {
+      if (e.key !== "Tab" || !node) return;
+      const f = Array.from(node.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
+      if (!f.length) {
+        e.preventDefault();
+        node.focus();
+        return;
+      }
+      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
+      if (e.shiftKey) {
+        if (ae === first || ae === node || !node.contains(ae)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (ae === last || !node.contains(ae)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [active]);
+}
+function usePortal() {
+  return React36__namespace.default.useCallback((node) => {
+    if (typeof document === "undefined") return null;
+    return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
+  }, []);
+}
+var __scrollLockCount = 0;
+var __scrollLockSaved = { overflow: "", paddingRight: "" };
+function useScrollLock(locked = true) {
+  useIsoLayoutEffect(() => {
+    if (!canUseDOM || !locked) return void 0;
+    if (__scrollLockCount === 0) {
+      const b = document.body;
+      __scrollLockSaved = { overflow: b.style.overflow, paddingRight: b.style.paddingRight };
+      const gutter = window.innerWidth - document.documentElement.clientWidth;
+      b.style.overflow = "hidden";
+      if (gutter > 0) b.style.paddingRight = `${(parseFloat(getComputedStyle(b).paddingRight) || 0) + gutter}px`;
+    }
+    __scrollLockCount += 1;
+    return () => {
+      __scrollLockCount -= 1;
+      if (__scrollLockCount === 0) {
+        document.body.style.overflow = __scrollLockSaved.overflow;
+        document.body.style.paddingRight = __scrollLockSaved.paddingRight;
+      }
+    };
+  }, [locked]);
 }
+function useInertBackground(ref, active) {
+  React36__namespace.default.useEffect(() => {
+    if (!active || !canUseDOM) return void 0;
+    const node = ref.current;
+    if (!node) return void 0;
+    const changed = [];
+    Array.from(document.body.children).forEach((el) => {
+      if (el.contains(node) || el.hasAttribute("aria-hidden") || el.inert) return;
+      el.inert = true;
+      el.setAttribute("aria-hidden", "true");
+      changed.push(el);
+    });
+    return () => {
+      changed.forEach((el) => {
+        el.inert = false;
+        el.removeAttribute("aria-hidden");
+      });
+    };
+  }, [active]);
+}
+
+// components/layout/Portal.jsx
+function Portal({ children }) {
+  const render = usePortal();
+  return render(children);
+}
+function getColorSchemeScript({ storageKey = "twico-theme", attribute = "class", defaultScheme } = {}) {
+  const k = JSON.stringify(storageKey);
+  const a = JSON.stringify(attribute);
+  const d = defaultScheme === "dark" || defaultScheme === "light" ? JSON.stringify(defaultScheme) : "null";
+  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){}})();`;
+}
+function ColorSchemeScript({ storageKey = "twico-theme", attribute = "class", nonce, defaultScheme }) {
+  return React36__namespace.default.createElement("script", { nonce }, getColorSchemeScript({ storageKey, attribute, defaultScheme }));
+}
+var KBD_CSS = `
+.twc-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 6px;
+  font-family: var(--font-mono); font-size: 11px; font-weight: var(--font-semibold); line-height: 1; color: var(--color-text-muted);
+  background: var(--color-surface-sunken); border: var(--border-thin) solid var(--color-border);
+  border-bottom-width: 2px; border-radius: var(--radius-sm); }
+`;
+var Kbd = React36__namespace.default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("kbd", { ref, className: `twc-kbd ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+Kbd.displayName = "Kbd";
+var PRE_CSS = `
+.twc-pre { margin: 0; padding: var(--space-4); overflow-x: auto; max-width: 100%;
+  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal);
+  color: var(--color-text); background: var(--color-surface-sunken);
+  border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg);
+  white-space: pre; -webkit-overflow-scrolling: touch; }
+`;
+var Pre = React36__namespace.default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { ref, className: `twc-pre ${className}`.trim(), ...rest, children: [
+    __twcStyles,
+    children
+  ] });
+});
+Pre.displayName = "Pre";
+var ANCHOR_CSS = `
+.twc-anchor { color: var(--color-primary); text-decoration: none; border-radius: var(--radius-sm);
+  transition: color var(--duration-fast) var(--ease-standard); }
+.twc-anchor:hover { text-decoration: underline; color: var(--color-primary-hover, var(--color-primary)); }
+.twc-anchor:focus-visible { outline: none; box-shadow: var(--ring); }
+.twc-anchor__ext { display: inline-block; margin-inline-start: 3px; font-size: 0.85em; vertical-align: baseline; }
+`;
+function safeHref(url) {
+  if (url == null) return void 0;
+  const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
+  return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
+}
+var Anchor = React36__namespace.default.forwardRef(function Anchor2({ as: Tag2 = "a", href, external = false, className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-anchor-styles", ANCHOR_CSS);
+  const extra = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
+    __twcStyles,
+    children,
+    external ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-anchor__ext", "aria-hidden": "true", children: "\u2197" }) : null
+  ] });
+});
+Anchor.displayName = "Anchor";
+var LABEL_CSS = `
+.twc-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: inline-flex; gap: 4px; align-items: center; }
+.twc-label[data-size="sm"] { font-size: var(--text-xs); }
+.twc-label[data-size="lg"] { font-size: var(--text-base); }
+.twc-label__req { color: var(--color-danger); }
+`;
+var Label = React36__namespace.default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
+    __twcStyles,
+    children,
+    required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-label__req", "aria-hidden": "true", children: "*" }) : null
+  ] });
+});
+Label.displayName = "Label";
+var IMAGE_CSS = `
+.twc-image { display: block; max-width: 100%; }
+.twc-image[data-fit] { width: 100%; height: 100%; }
+`;
+var Image = React36__namespace.default.forwardRef(function Image2({
+  src,
+  alt,
+  fit,
+  radius,
+  aspectRatio,
+  fallback,
+  loading = "lazy",
+  className = "",
+  style,
+  onError,
+  ...rest
+}, ref) {
+  const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
+  const [failed, setFailed] = React36__namespace.default.useState(false);
+  const shownSrc = failed && fallback ? fallback : src;
+  const s = {
+    objectFit: fit,
+    borderRadius: radius ? `var(--radius-${radius})` : void 0,
+    aspectRatio,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    __twcStyles,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        ref,
+        src: shownSrc,
+        alt,
+        loading,
+        className: `twc-image ${className}`.trim(),
+        "data-fit": fit || void 0,
+        style: s,
+        onError: (e) => {
+          onError?.(e);
+          if (fallback && !failed) setFailed(true);
+        },
+        ...rest
+      }
+    )
+  ] });
+});
+Image.displayName = "Image";
 var ACCORDION_CSS = `
 .twc-accordion { display: flex; flex-direction: column; font-family: var(--font-sans);
   border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
@@ -77,10 +390,10 @@ function Accordion({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [internal, setInternal] = React25__namespace.default.useState(() => new Set(defaultOpen));
+  const rootRef = React36__namespace.default.useRef(null);
+  const [internal, setInternal] = React36__namespace.default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React25__namespace.default.useId();
+  const baseId = React36__namespace.default.useId();
   function toggle(val) {
     const item = items.find((x) => x.value === val);
     if (item?.disabled) return;
@@ -127,9 +440,9 @@ function Accordion({
       const triggerId = `${baseId}-trigger-${i}`;
       const panelId = `${baseId}-panel-${i}`;
       const lvl = Math.min(6, Math.max(1, it.headingLevel ?? headingLevel));
-      const Heading2 = `h${lvl}`;
+      const Heading3 = `h${lvl}`;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-accordion__item", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Heading2, { className: "twc-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, disabled: it.disabled || void 0, "aria-disabled": it.disabled || void 0, "data-disabled": it.disabled || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading3, { className: "twc-accordion__heading", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", id: triggerId, className: "twc-accordion__trigger", "data-open": isOpen || void 0, disabled: it.disabled || void 0, "aria-disabled": it.disabled || void 0, "data-disabled": it.disabled || void 0, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(it.value), children: [
           it.icon,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__label", children: it.label }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }) })
@@ -266,7 +579,7 @@ function Avatar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React25__namespace.default.useState(false);
+  const [errored, setErrored] = React36__namespace.default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -324,7 +637,7 @@ var MENU_CSS = `
 .twc-menu__item-label { flex: 1 1 auto; min-width: 0; }
 .twc-menu__shortcut { margin-inline-start: auto; padding-inline-start: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); font-family: var(--font-mono); }
 `;
-var safeHref = (url) => {
+var safeHref2 = (url) => {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -344,25 +657,25 @@ function Menu({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React25__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const [active, setActive] = React25__namespace.default.useState(-1);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const menuRef = React25__namespace.default.useRef(null);
-  const typeBufRef = React25__namespace.default.useRef("");
-  const typeTimerRef = React25__namespace.default.useRef(null);
-  const menuId = React25__namespace.default.useId();
+  const [openState, setOpenState] = React36__namespace.default.useState(defaultOpen);
+  const [render, setRender] = React36__namespace.default.useState(false);
+  const [pos, setPos] = React36__namespace.default.useState(null);
+  const [active, setActive] = React36__namespace.default.useState(-1);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const menuRef = React36__namespace.default.useRef(null);
+  const typeBufRef = React36__namespace.default.useRef("");
+  const typeTimerRef = React36__namespace.default.useRef(null);
+  const menuId = React36__namespace.default.useId();
   const headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__namespace.default.useRef(open);
+  const openRef = React36__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__namespace.default.useRef(controlled);
+  const controlledRef = React36__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React36__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__namespace.default.useCallback((next) => {
+  const setOpen = React36__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -370,7 +683,7 @@ function Menu({
   }, []);
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
   const interactiveIdx = items.map((it, i) => !it.separator && !it.heading ? i : -1).filter((i) => i >= 0);
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -385,7 +698,7 @@ function Menu({
     const avail = (flip ? r.top : vh - r.bottom) - gap - M;
     setPos({ top, bottom, left, width: w, flip, maxHeight: Math.max(120, avail) });
   }, [align, width]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -403,7 +716,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -496,7 +809,7 @@ function Menu({
         items.map((it, i) => {
           if (it.separator) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__sep", role: "separator" }, `s${i}`);
           if (it.label && it.heading) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-menu__label", children: it.label }, `h${i}`);
-          const href = !it.disabled ? safeHref(it.href) : void 0;
+          const href = !it.disabled ? safeHref2(it.href) : void 0;
           const Tag2 = href ? "a" : "button";
           return /* @__PURE__ */ jsxRuntime.jsxs(
             Tag2,
@@ -526,7 +839,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
+  const triggerEl = React36__namespace.default.isValidElement(trigger) ? React36__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -677,7 +990,7 @@ a.twc-breadcrumb__item:hover, button.twc-breadcrumb__item:hover { color: var(--c
 .twc-breadcrumb__ellipsis { border: none; background: transparent; cursor: pointer; color: var(--color-text-subtle); padding: 3px 7px; border-radius: var(--radius-sm); font: inherit; }
 .twc-breadcrumb__ellipsis:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 `;
-function safeHref2(url) {
+function safeHref3(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -691,7 +1004,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React25__namespace.default.useState(false);
+  const [expanded, setExpanded] = React36__namespace.default.useState(false);
   const sep = separator || /* @__PURE__ */ jsxRuntime.jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -704,7 +1017,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
         it.ellipsis ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -716,7 +1029,7 @@ function Breadcrumb({
               it.label
             ]
           }
-        ) : safeHref2(it.href) ? /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "twc-breadcrumb__item", href: safeHref2(it.href), onClick: it.onClick, children: [
+        ) : safeHref3(it.href) ? /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "twc-breadcrumb__item", href: safeHref3(it.href), onClick: it.onClick, children: [
           it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
           it.label
         ] }) : it.onClick ? /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "twc-breadcrumb__item", onClick: it.onClick, children: [
@@ -824,7 +1137,7 @@ var CSS2 = `
   animation: twico-ripple var(--duration-slow) var(--ease-out) forwards;
 }
 `;
-function safeHref3(url) {
+function safeHref4(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -846,7 +1159,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React25__namespace.default.useState([]);
+  const [ripples, setRipples] = React36__namespace.default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -875,7 +1188,7 @@ function Button({
       "data-block": fullWidth || void 0,
       disabled: Tag2 === "button" ? disabled || loading : void 0,
       type: Tag2 === "button" ? "button" : void 0,
-      href: inert ? void 0 : safeHref3(href),
+      href: inert ? void 0 : safeHref4(href),
       "aria-disabled": inert || void 0,
       tabIndex: inert ? -1 : void 0,
       "aria-busy": loading || void 0,
@@ -1020,14 +1333,14 @@ function Carousel({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React25__namespace.default.Children.toArray(children);
+  const slides = React36__namespace.default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultIndex);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React25__namespace.default.useState(false);
-  const [userPaused, setUserPaused] = React25__namespace.default.useState(false);
-  const [prefersReduced, setPrefersReduced] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [paused, setPaused] = React36__namespace.default.useState(false);
+  const [userPaused, setUserPaused] = React36__namespace.default.useState(false);
+  const [prefersReduced, setPrefersReduced] = React36__namespace.default.useState(false);
+  React36__namespace.default.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
     const on = () => setPrefersReduced(mql.matches);
@@ -1035,15 +1348,15 @@ function Carousel({
     mql.addEventListener("change", on);
     return () => mql.removeEventListener("change", on);
   }, []);
-  const setIndex = React25__namespace.default.useCallback((i) => {
+  const setIndex = React36__namespace.default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React25__namespace.default.useCallback((i) => {
+  const go = React36__namespace.default.useCallback((i) => {
     setIndex(loop ? (i + count) % count : Math.min(Math.max(i, 0), count - 1));
   }, [count, loop, setIndex]);
   const autoRotating = autoPlay && !paused && !userPaused && !prefersReduced && count > 1;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -1138,7 +1451,7 @@ function Chart({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
-  const uid = React25__namespace.default.useId();
+  const uid = React36__namespace.default.useId();
   const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
@@ -1294,13 +1607,13 @@ function Checkbox({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React25__namespace.default.useRef(null);
+  const ref = React36__namespace.default.useRef(null);
   const mixed = indeterminate && !checked;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = mixed;
   }, [mixed]);
   if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
@@ -1443,20 +1756,20 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React25__namespace.default.useRef(hex);
+  const lastValidRef = React36__namespace.default.useRef(hex);
   if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [hsv, setHsv] = React25__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const areaRef = React25__namespace.default.useRef(null);
-  const hueRef = React25__namespace.default.useRef(null);
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [hsv, setHsv] = React36__namespace.default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const triggerRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const areaRef = React36__namespace.default.useRef(null);
+  const hueRef = React36__namespace.default.useRef(null);
   const POP_W = 240;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1467,7 +1780,7 @@ function ColorPicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1478,17 +1791,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React25__namespace.default.useId();
+  const labelId = React36__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     const v = hexToHsv(hex);
     if (v && hsvToHex(v.h, v.s, v.v).toLowerCase() !== hsvToHex(hsv.h, hsv.s, hsv.v).toLowerCase()) setHsv(v);
   }, [hex]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1505,18 +1818,7 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
-    let id;
-    if (!prevOpen.current && open) {
-      id = setTimeout(() => areaRef.current?.focus({ preventScroll: true }), 20);
-    } else if (prevOpen.current && !open) {
-      const ae = typeof document !== "undefined" ? document.activeElement : null;
-      if (!ae || ae === document.body) triggerRef.current?.focus();
-    }
-    prevOpen.current = open;
-    return () => clearTimeout(id);
-  }, [open]);
+  useFocusTrap(popRef, open && !!coords, { initialFocus: areaRef });
   const commit = (next) => {
     const h = hsvToHex(next.h, next.s, next.v);
     setHsv(next);
@@ -1609,6 +1911,7 @@ function ColorPicker({
           className: "twc-cp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Color picker",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
@@ -1836,29 +2139,29 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const groups = React36__namespace.default.useMemo(() => normalizeGroups(options), [options]);
+  const flat = React36__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const controlRef = React25__namespace.default.useRef(null);
-  const inputRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const fGroups = React25__namespace.default.useMemo(() => {
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [query, setQuery] = React36__namespace.default.useState("");
+  const [active, setActive] = React36__namespace.default.useState(0);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const controlRef = React36__namespace.default.useRef(null);
+  const inputRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const listRef = React36__namespace.default.useRef(null);
+  const activeRef = React36__namespace.default.useRef(null);
+  const fGroups = React36__namespace.default.useMemo(() => {
     const q = query.trim();
     const fn = filter === false ? null : typeof filter === "function" ? filter : matches;
     return groups.map((g) => ({ group: g.group, options: fn ? g.options.filter((o) => fn(o, q)) : g.options })).filter((g) => g.options.length);
   }, [groups, query, filter]);
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
     while (i >= 0 && i < visible.length) {
@@ -1867,7 +2170,7 @@ function Combobox({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1882,7 +2185,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1893,7 +2196,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1903,15 +2206,15 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) ensureVisible(listRef.current, activeRef.current);
   }, [active, open]);
   function openMenu() {
@@ -1962,7 +2265,7 @@ function Combobox({
   const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -2107,95 +2410,6 @@ function Combobox({
     error ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
   ] });
 }
-var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsoLayoutEffect = canUseDOM ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
-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"])';
-function useFocusTrap(ref, active = true, { restoreFocus = true } = {}) {
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    if (!node) return void 0;
-    const prevFocused = document.activeElement;
-    const first = node.querySelector(FOCUSABLE);
-    (first || node).focus();
-    return () => {
-      if (restoreFocus && prevFocused && typeof prevFocused.focus === "function") prevFocused.focus();
-    };
-  }, [active]);
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    const onKey = (e) => {
-      if (e.key !== "Tab" || !node) return;
-      const f = Array.from(node.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
-      if (!f.length) {
-        e.preventDefault();
-        node.focus();
-        return;
-      }
-      const first = f[0], last = f[f.length - 1], ae = document.activeElement;
-      if (e.shiftKey) {
-        if (ae === first || ae === node || !node.contains(ae)) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else if (ae === last || !node.contains(ae)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [active]);
-}
-function usePortal() {
-  return React25__namespace.default.useCallback((node) => {
-    if (typeof document === "undefined") return null;
-    return typeof reactDom.createPortal === "function" ? reactDom.createPortal(node, document.body) : node;
-  }, []);
-}
-var __scrollLockCount = 0;
-var __scrollLockSaved = { overflow: "", paddingRight: "" };
-function useScrollLock(locked = true) {
-  useIsoLayoutEffect(() => {
-    if (!canUseDOM || !locked) return void 0;
-    if (__scrollLockCount === 0) {
-      const b = document.body;
-      __scrollLockSaved = { overflow: b.style.overflow, paddingRight: b.style.paddingRight };
-      const gutter = window.innerWidth - document.documentElement.clientWidth;
-      b.style.overflow = "hidden";
-      if (gutter > 0) b.style.paddingRight = `${(parseFloat(getComputedStyle(b).paddingRight) || 0) + gutter}px`;
-    }
-    __scrollLockCount += 1;
-    return () => {
-      __scrollLockCount -= 1;
-      if (__scrollLockCount === 0) {
-        document.body.style.overflow = __scrollLockSaved.overflow;
-        document.body.style.paddingRight = __scrollLockSaved.paddingRight;
-      }
-    };
-  }, [locked]);
-}
-function useInertBackground(ref, active) {
-  React25__namespace.default.useEffect(() => {
-    if (!active || !canUseDOM) return void 0;
-    const node = ref.current;
-    if (!node) return void 0;
-    const changed = [];
-    Array.from(document.body.children).forEach((el) => {
-      if (el.contains(node) || el.hasAttribute("aria-hidden") || el.inert) return;
-      el.inert = true;
-      el.setAttribute("aria-hidden", "true");
-      changed.push(el);
-    });
-    return () => {
-      changed.forEach((el) => {
-        el.inert = false;
-        el.removeAttribute("aria-hidden");
-      });
-    };
-  }, [active]);
-}
 var COMMAND_CSS = `
 .twc-cmdk__overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--color-overlay); backdrop-filter: blur(3px);
   display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
@@ -2243,14 +2457,14 @@ function CommandPalette({
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
   const renderPortal = usePortal();
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const inputRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const paletteRef = React25__namespace.default.useRef(null);
-  const baseId = React25__namespace.default.useId();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [query, setQuery] = React36__namespace.default.useState("");
+  const [active, setActive] = React36__namespace.default.useState(0);
+  const inputRef = React36__namespace.default.useRef(null);
+  const listRef = React36__namespace.default.useRef(null);
+  const paletteRef = React36__namespace.default.useRef(null);
+  const baseId = React36__namespace.default.useId();
+  const [mounted, setMounted] = React36__namespace.default.useState(open);
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -2259,14 +2473,14 @@ function CommandPalette({
     return () => clearTimeout(t);
   }, [open]);
   useScrollLock(open);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
     }
   }, [open]);
   useFocusTrap(paletteRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2278,7 +2492,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React25__namespace.default.useMemo(() => commands.filter(
+  const filtered = React36__namespace.default.useMemo(() => commands.filter(
     (c) => !q || c.label.toLowerCase().includes(q) || (c.keywords || "").toLowerCase().includes(q) || (c.group || "").toLowerCase().includes(q)
   ), [commands, q]);
   const groups = [];
@@ -2293,7 +2507,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2313,7 +2527,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2489,13 +2703,13 @@ function Currency({
   const prec = precision != null ? precision : meta.precision;
   const sym = symbol != null ? symbol : meta.symbol;
   const cur = code != null ? code : meta.code;
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React36__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!controlled) return;
     const raw = String(value ?? "");
     if (shown !== raw) {
@@ -2689,32 +2903,32 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const bufferRef = React25__namespace.default.useRef("");
-  const bufferTimerRef = React25__namespace.default.useRef(null);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const bufferRef = React36__namespace.default.useRef("");
+  const bufferTimerRef = React36__namespace.default.useRef(null);
+  const groups = React36__namespace.default.useMemo(() => normalizeGroups2(options), [options]);
+  const flat = React36__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const searchRef = React25__namespace.default.useRef(null);
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [render, setRender] = React36__namespace.default.useState(false);
+  const [active, setActive] = React36__namespace.default.useState(0);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const [query, setQuery] = React36__namespace.default.useState("");
+  const wrapRef = React36__namespace.default.useRef(null);
+  const triggerRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const listRef = React36__namespace.default.useRef(null);
+  const activeRef = React36__namespace.default.useRef(null);
+  const searchRef = React36__namespace.default.useRef(null);
   const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React25__namespace.default.useMemo(() => {
+  const fGroups = React36__namespace.default.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return groups;
     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);
   }, [groups, query]);
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const selected = flat.find((o) => o.value === current);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
@@ -2724,7 +2938,7 @@ function Select({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2740,7 +2954,7 @@ function Select({
       flip
     });
   }, [placement, minWidth, matchTriggerWidth]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2751,7 +2965,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2767,13 +2981,13 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) ensureVisible2(listRef.current, activeRef.current);
   }, [active, open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2781,8 +2995,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
+  const prevOpen = React36__namespace.default.useRef(false);
+  React36__namespace.default.useEffect(() => {
     if (prevOpen.current && !open) {
       const ae = typeof document !== "undefined" ? document.activeElement : null;
       if (popRef.current && ae && popRef.current.contains(ae)) triggerRef.current?.focus();
@@ -2876,7 +3090,7 @@ function Select({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
       "Loading\u2026"
-    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+    ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
@@ -3059,21 +3273,21 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React25__namespace.default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React36__namespace.default.useState(defaultCurrency);
   const cur = curControlled ? currency : curInternal;
   const meta = CURRENCIES[cur] || CURRENCIES.USD;
   const prec = meta.precision;
   const valControlled = value !== void 0;
-  const [valInternal, setValInternal] = React25__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React36__namespace.default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = valControlled ? clampPrecision(String(value ?? ""), prec) : valInternal;
   const descId = `${fieldId}-desc`;
   const describedBy = [error || hint ? descId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!valControlled) {
       const clamped = clampPrecision(valInternal, prec);
       if (clamped !== valInternal) {
@@ -3089,7 +3303,7 @@ function CurrencyField({
       }
     }
   }, [prec, cur, shown, value, valControlled, valInternal]);
-  const options = React25__namespace.default.useMemo(() => {
+  const options = React36__namespace.default.useMemo(() => {
     if (!currencies) return CURRENCY_OPTIONS;
     return currencies.map((c) => typeof c === "string" ? { value: c, label: `${c} \u2014 ${(CURRENCIES[c] || {}).label || c}` } : c);
   }, [currencies]);
@@ -3243,13 +3457,13 @@ function Input({
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
   const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React25__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React36__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -3261,7 +3475,7 @@ function Input({
   const ariaInvalid = invalid ? true : rest["aria-invalid"] ?? void 0;
   const describedBy = [error || hint ? descId : null, showCounter ? countId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0;
   const isPassword = type === "password";
-  const [revealed, setRevealed] = React25__namespace.default.useState(false);
+  const [revealed, setRevealed] = React36__namespace.default.useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
   const suffix = rightIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -3462,27 +3676,27 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React25__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React25__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__namespace.default.useId();
+  const groups = React36__namespace.default.useMemo(() => normalizeGroups3(options), [options]);
+  const flat = React36__namespace.default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [query, setQuery] = React25__namespace.default.useState("");
-  const [active, setActive] = React25__namespace.default.useState(0);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const controlRef = React25__namespace.default.useRef(null);
-  const inputRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const listRef = React25__namespace.default.useRef(null);
-  const activeRef = React25__namespace.default.useRef(null);
-  const fGroups = React25__namespace.default.useMemo(
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [query, setQuery] = React36__namespace.default.useState("");
+  const [active, setActive] = React36__namespace.default.useState(0);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const controlRef = React36__namespace.default.useRef(null);
+  const inputRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const listRef = React36__namespace.default.useRef(null);
+  const activeRef = React36__namespace.default.useRef(null);
+  const fGroups = React36__namespace.default.useMemo(
     () => groups.map((g) => ({ group: g.group, options: g.options.filter((o) => matches2(o, query.trim())) })).filter((g) => g.options.length),
     [groups, query]
   );
-  const visible = React25__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__namespace.default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const capReached = max != null && (value !== void 0 ? value : internal).length >= max;
   const isOptDisabled = (o) => o.disabled || capReached && !(value !== void 0 ? value : internal).includes(o.value);
   const nextEnabled = (from, dir) => {
@@ -3493,7 +3707,7 @@ function MultiSelect({
     }
     return from;
   };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3508,7 +3722,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3519,7 +3733,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3530,10 +3744,10 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) ensureVisible3(listRef.current, activeRef.current);
   }, [active, open]);
   function commit(next) {
@@ -3576,7 +3790,7 @@ function MultiSelect({
   const popInner = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -3806,7 +4020,7 @@ function Pagination({
   }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultPage);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3814,7 +4028,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React25__namespace.default.useState("");
+  const [jump, setJump] = React36__namespace.default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -3897,13 +4111,13 @@ function Tooltip({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React25__namespace.default.useId();
-  const [show, setShow] = React25__namespace.default.useState(false);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const timer = React25__namespace.default.useRef(null);
-  const closeTimer = React25__namespace.default.useRef(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const tipRef = React25__namespace.default.useRef(null);
+  const id = React36__namespace.default.useId();
+  const [show, setShow] = React36__namespace.default.useState(false);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const timer = React36__namespace.default.useRef(null);
+  const closeTimer = React36__namespace.default.useRef(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const tipRef = React36__namespace.default.useRef(null);
   const open = () => {
     clearTimeout(closeTimer.current);
     clearTimeout(timer.current);
@@ -3917,11 +4131,11 @@ function Tooltip({
   const cancelClose = () => {
     clearTimeout(closeTimer.current);
   };
-  React25__namespace.default.useEffect(() => () => {
+  React36__namespace.default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
   }, []);
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3944,10 +4158,10 @@ function Tooltip({
     else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r.right + gap) });
     else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r.top + gap) });
   }, [placement]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     place();
   }, [place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -3958,7 +4172,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -3970,7 +4184,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React25__namespace.default.isValidElement(children) && children.type !== React25__namespace.default.Fragment ? React25__namespace.default.cloneElement(children, {
+  const trigger = React36__namespace.default.isValidElement(children) && children.type !== React36__namespace.default.Fragment ? React36__namespace.default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-describedby": describedBy, children });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4574,9 +4788,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const cfg = React25__namespace.default.useRef(null);
-  const place = React25__namespace.default.useCallback(() => {
+  const [pos, setPos] = React36__namespace.default.useState(null);
+  const cfg = React36__namespace.default.useRef(null);
+  const place = React36__namespace.default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4587,17 +4801,17 @@ function useFloating() {
     const top = r.bottom + 6;
     return { top, left, width: c.width, anchorX: r.left + r.width / 2, maxHeight: Math.max(180, vh - top - M) };
   }, []);
-  const open = React25__namespace.default.useCallback((el, align = "left", width = 220) => {
+  const open = React36__namespace.default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React25__namespace.default.useCallback(() => {
+  const close = React36__namespace.default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4621,9 +4835,9 @@ function Caret({ pos }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dt__caret", style: { left } });
 }
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
-  const ref = React25__namespace.default.useRef(null);
+  const ref = React36__namespace.default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4828,7 +5042,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React25__namespace.default.useMemo(() => {
+  const cols = React36__namespace.default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4863,7 +5077,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React25__namespace.default.useRef();
+  const _autoKey = React36__namespace.default.useRef();
   if (!_autoKey.current) _autoKey.current = { map: /* @__PURE__ */ new WeakMap(), n: 0 };
   const keyOf = rowKey || ((r, i) => {
     if (r != null && r.id != null) return r.id;
@@ -4878,17 +5092,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React25__namespace.default.useState(null);
-  const [filters, setFilters] = React25__namespace.default.useState([]);
-  const [hidden, setHidden] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React25__namespace.default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React25__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  const [sort, setSort] = React36__namespace.default.useState(null);
+  const [filters, setFilters] = React36__namespace.default.useState([]);
+  const [hidden, setHidden] = React36__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [showRowNum, setShowRowNum] = React36__namespace.default.useState(rowNumbers);
+  const [wrapped, setWrapped] = React36__namespace.default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
   const toggleWrap = (field) => setWrapped((w) => {
     const n = new Set(w);
     n.has(field) ? n.delete(field) : n.add(field);
     return n;
   });
-  const [pins, setPins] = React25__namespace.default.useState(() => {
+  const [pins, setPins] = React36__namespace.default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4896,34 +5110,34 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React25__namespace.default.useState(densityProp);
-  const [quick, setQuick] = React25__namespace.default.useState("");
-  const [selected, setSelected] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React25__namespace.default.useState(null);
-  const [activeCell, setActiveCell] = React25__namespace.default.useState(null);
-  const [page, setPage] = React25__namespace.default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React25__namespace.default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React25__namespace.default.useState("");
-  const [widths, setWidths] = React25__namespace.default.useState({});
-  const [order, setOrder] = React25__namespace.default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React25__namespace.default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React25__namespace.default.useState(showAggregation);
-  const [focus, setFocus] = React25__namespace.default.useState({ r: 0, c: 0 });
-  const gridRef = React25__namespace.default.useRef(null);
-  const [groupBy, setGroupBy] = React25__namespace.default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React25__namespace.default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React25__namespace.default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React25__namespace.default.useState(41);
-  const theadRef = React25__namespace.default.useRef(null);
-  const [rowOrder, setRowOrder] = React25__namespace.default.useState(null);
-  const [rowHeights, setRowHeights] = React25__namespace.default.useState({});
-  const [rowDrag, setRowDrag] = React25__namespace.default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React25__namespace.default.useState(null);
-  const [reorderMsg, setReorderMsg] = React25__namespace.default.useState("");
-  const rowFocusRef = React25__namespace.default.useRef(null);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [compact, setCompact] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [density, setDensity] = React36__namespace.default.useState(densityProp);
+  const [quick, setQuick] = React36__namespace.default.useState("");
+  const [selected, setSelected] = React36__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [activeRow, setActiveRow] = React36__namespace.default.useState(null);
+  const [activeCell, setActiveCell] = React36__namespace.default.useState(null);
+  const [page, setPage] = React36__namespace.default.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React36__namespace.default.useState(pageSize > 0 ? pageSize : 10);
+  const [colQuery, setColQuery] = React36__namespace.default.useState("");
+  const [widths, setWidths] = React36__namespace.default.useState({});
+  const [order, setOrder] = React36__namespace.default.useState(() => columns.map((c) => c.field));
+  const [drag, setDrag] = React36__namespace.default.useState({ from: null, over: null, after: false });
+  const [aggOn, setAggOn] = React36__namespace.default.useState(showAggregation);
+  const [focus, setFocus] = React36__namespace.default.useState({ r: 0, c: 0 });
+  const gridRef = React36__namespace.default.useRef(null);
+  const [groupBy, setGroupBy] = React36__namespace.default.useState(rowGrouping || []);
+  const [collapsed, setCollapsed] = React36__namespace.default.useState(() => /* @__PURE__ */ new Set());
+  const [pinnedRows, setPinnedRows] = React36__namespace.default.useState({ top: [], bottom: [] });
+  const [headH, setHeadH] = React36__namespace.default.useState(41);
+  const theadRef = React36__namespace.default.useRef(null);
+  const [rowOrder, setRowOrder] = React36__namespace.default.useState(null);
+  const [rowHeights, setRowHeights] = React36__namespace.default.useState({});
+  const [rowDrag, setRowDrag] = React36__namespace.default.useState({ from: null, over: null, after: false });
+  const [rowGrab, setRowGrab] = React36__namespace.default.useState(null);
+  const [reorderMsg, setReorderMsg] = React36__namespace.default.useState("");
+  const rowFocusRef = React36__namespace.default.useRef(null);
+  const rootRef = React36__namespace.default.useRef(null);
+  const [compact, setCompact] = React36__namespace.default.useState(false);
+  React36__namespace.default.useEffect(() => {
     const el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4936,11 +5150,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React25__namespace.default.useRef(null);
-  const [scrollTop, setScrollTop] = React25__namespace.default.useState(0);
-  const [viewportH, setViewportH] = React25__namespace.default.useState(0);
-  const [pivotOn, setPivotOn] = React25__namespace.default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React25__namespace.default.useState(() => {
+  const scrollRef = React36__namespace.default.useRef(null);
+  const [scrollTop, setScrollTop] = React36__namespace.default.useState(0);
+  const [viewportH, setViewportH] = React36__namespace.default.useState(0);
+  const [pivotOn, setPivotOn] = React36__namespace.default.useState(pivotMode);
+  const [aggConfig, setAggConfig] = React36__namespace.default.useState(() => {
     const m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4948,13 +5162,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React25__namespace.default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React36__namespace.default.useState(() => ({
     rows: pivot && pivot.rows || [],
     columns: pivot && pivot.columns || [],
     values: pivot && pivot.values || []
   }));
   const pivotActive = pivotOn && pivotConfig.rows.length > 0 && pivotConfig.values.length > 0;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4962,32 +5176,32 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React25__namespace.default.useRef(rowGroupingKey);
-  React25__namespace.default.useEffect(() => {
+  const rowGroupingKeyRef = React36__namespace.default.useRef(rowGroupingKey);
+  React36__namespace.default.useEffect(() => {
     if (rowGroupingKeyRef.current === rowGroupingKey) return;
     rowGroupingKeyRef.current = rowGroupingKey;
     setGroupBy(rowGrouping || []);
   }, [rowGroupingKey]);
   const widthOf = (c) => widths[c.field] ?? c.width ?? 160;
-  const [colMenu, setColMenu] = React25__namespace.default.useState(null);
+  const [colMenu, setColMenu] = React36__namespace.default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React25__namespace.default.useState(null);
+  const [panel, setPanel] = React36__namespace.default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React25__namespace.default.useState(null);
+  const [rowMenu, setRowMenu] = React36__namespace.default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React25__namespace.default.useState(false);
+  const [exportOpen, setExportOpen] = React36__namespace.default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React25__namespace.default.useRef(null);
-  const colMenuRef = React25__namespace.default.useRef(null);
-  const rowMenuRef = React25__namespace.default.useRef(null);
-  const exportMenuRef = React25__namespace.default.useRef(null);
+  const menuTriggerRef = React36__namespace.default.useRef(null);
+  const colMenuRef = React36__namespace.default.useRef(null);
+  const rowMenuRef = React36__namespace.default.useRef(null);
+  const exportMenuRef = React36__namespace.default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -5026,16 +5240,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -5058,7 +5272,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -5077,9 +5291,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React25__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React36__namespace.default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React25__namespace.default.useMemo(() => {
+  const ordered = React36__namespace.default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -5114,7 +5328,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React25__namespace.default.useMemo(() => {
+  const processed = React36__namespace.default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -5153,10 +5367,10 @@ function Datatable({
   const totalRows = serverMode ? serverTotal : processed.length;
   const totalPages = paginated ? Math.max(1, Math.ceil(totalRows / rowsPerPage)) : 1;
   const paged = !paginated || serverMode ? processed : processed.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (page > totalPages - 1) setPage(0);
   }, [totalPages]);
-  const activeGroupBy = React25__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React36__namespace.default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -5183,7 +5397,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React25__namespace.default.useMemo(() => {
+  const displayItems = React36__namespace.default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -5225,7 +5439,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -5239,12 +5453,12 @@ function Datatable({
   const pinnedTopRows = canPinRows ? pinnedRows.top.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const pinnedBottomRows = canPinRows ? pinnedRows.bottom.map((k) => leafRows.find((r, i) => keyOf(r, i) === k)).filter(Boolean) : [];
   const middleRows = canPinRows ? leafRows.filter((r, i) => !pinSideOf(keyOf(r, i))) : leafRows;
-  const keyIndex = React25__namespace.default.useMemo(() => {
+  const keyIndex = React36__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React25__namespace.default.useMemo(() => {
+  const keyIndexMid = React36__namespace.default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -5329,7 +5543,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -5341,7 +5555,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5351,13 +5565,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React25__namespace.default.useCallback((e) => {
+  const onScrollVirtual = React36__namespace.default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React25__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React25__namespace.default.useState(0);
-  const offsets = React25__namespace.default.useMemo(() => {
+  const rowHRef = React36__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React36__namespace.default.useState(0);
+  const offsets = React36__namespace.default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -5367,7 +5581,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React25__namespace.default.useMemo(() => {
+  const vWindow = React36__namespace.default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -5396,7 +5610,7 @@ function Datatable({
     if (start > end) start = end;
     return { start, end, padTop: offsets[start], padBottom: Math.max(0, totalH - offsets[end]) };
   }, [virtualizing, offsets, middleRows.length, vh, scrollTop, overscan]);
-  React25__namespace.default.useLayoutEffect(() => {
+  React36__namespace.default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5411,9 +5625,9 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React25__namespace.default.useRef(onServerChange);
+  const onServerChangeRef = React36__namespace.default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
@@ -5448,7 +5662,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React25__namespace.default.useMemo(
+  const movableMidFields = React36__namespace.default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
     [ordered, pins]
   );
@@ -5479,7 +5693,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React25__namespace.default.useState(false);
+  const [resizing, setResizing] = React36__namespace.default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5586,7 +5800,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React25__namespace.default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React36__namespace.default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5704,14 +5918,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     setFocus((f) => ({ r: Math.min(f.r, Math.max(0, leafRows.length - 1)), c: Math.min(f.c, Math.max(0, ordered.length - 1)) }));
   }, [leafRows.length, ordered.length, page]);
-  const selectedRows = React25__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  const selectedRows = React36__namespace.default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React25__namespace.default.useState(null);
+  const [editing, setEditing] = React36__namespace.default.useState(null);
   const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
@@ -5746,17 +5960,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React25__namespace.default.useMemo(
+  const batchEditableCols = React36__namespace.default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React25__namespace.default.useState(null);
+  const [batchEdit, setBatchEdit] = React36__namespace.default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5775,7 +5989,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5812,7 +6026,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -7335,23 +7549,24 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [view, setView] = React25__namespace.default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React25__namespace.default.useState("days");
-  const [focusDate, setFocusDate] = React25__namespace.default.useState(null);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const gridRef = React25__namespace.default.useRef(null);
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [view, setView] = React36__namespace.default.useState(selected || /* @__PURE__ */ new Date());
+  const [mode, setMode] = React36__namespace.default.useState("days");
+  const [focusDate, setFocusDate] = React36__namespace.default.useState(null);
+  const [focusMonth, setFocusMonth] = React36__namespace.default.useState(null);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const triggerRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const gridRef = React36__namespace.default.useRef(null);
   const POP_W = 280;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7362,7 +7577,7 @@ function DatePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7373,7 +7588,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -7393,21 +7608,10 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
-    let id2;
-    if (!prevOpen.current && open) {
-      id2 = setTimeout(() => gridRef.current?.querySelector('[tabindex="0"]')?.focus({ preventScroll: true }), 30);
-    } else if (prevOpen.current && !open) {
-      const ae = typeof document !== "undefined" ? document.activeElement : null;
-      if (!ae || ae === document.body) triggerRef.current?.focus();
-    }
-    prevOpen.current = open;
-    return () => clearTimeout(id2);
-  }, [open]);
-  const months = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React25__namespace.default.useMemo(
+  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
+  const months = React36__namespace.default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
+  const monthsShort = React36__namespace.default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
+  const dows = React36__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7435,10 +7639,34 @@ function DatePicker({
   };
   const cells = Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
   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);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
+  React36__namespace.default.useEffect(() => {
+    if (!open || mode !== "months" || focusMonth == null) return;
+    gridRef.current?.querySelector(`[data-mo="${focusMonth}"]`)?.focus();
+  }, [focusMonth, open, mode]);
+  const onMonthsKeyDown = (e) => {
+    const cur = focusMonth == null ? m : focusMonth;
+    let next;
+    if (e.key === "ArrowRight") next = cur + 1;
+    else if (e.key === "ArrowLeft") next = cur - 1;
+    else if (e.key === "ArrowDown") next = cur + 3;
+    else if (e.key === "ArrowUp") next = cur - 3;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = 11;
+    else return;
+    e.preventDefault();
+    if (next < 0) {
+      setView(new Date(y - 1, 0, 1));
+      next += 12;
+    } else if (next > 11) {
+      setView(new Date(y + 1, 0, 1));
+      next -= 12;
+    }
+    setFocusMonth(next);
+  };
   const onGridKeyDown = (e) => {
     const btn = e.target.closest?.("[data-key]");
     if (!btn) return;
@@ -7519,12 +7747,16 @@ function DatePicker({
           className: "twc-dp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Choose date",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": "Previous", onClick: () => setView(mode === "months" ? new Date(y - 1, m, 1) : new Date(y, m - 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__title", onClick: () => setMode(mode === "days" ? "months" : "days"), children: mode === "days" ? `${months[m]} ${y}` : y }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__title", onClick: () => {
+                if (mode === "days") setFocusMonth(m);
+                setMode(mode === "days" ? "months" : "days");
+              }, children: mode === "days" ? `${months[m]} ${y}` : y }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-dp__sr", "aria-live": "polite", children: mode === "days" ? `${months[m]} ${y}` : y }),
               /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-dp__nav", "aria-label": "Next", onClick: () => setView(mode === "months" ? new Date(y + 1, m, 1) : new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) }) })
             ] }),
@@ -7552,11 +7784,14 @@ function DatePicker({
                   i
                 );
               })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__months", children: monthsShort.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dp__months", ref: gridRef, onKeyDown: onMonthsKeyDown, role: "grid", children: monthsShort.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
                 className: "twc-dp__mo",
+                role: "gridcell",
+                "data-mo": i,
+                tabIndex: i === (focusMonth ?? m) ? 0 : -1,
                 "data-selected": selected && selected.getFullYear() === y && selected.getMonth() === i || void 0,
                 onClick: () => {
                   setView(new Date(y, i, 1));
@@ -7663,23 +7898,25 @@ function DateRangePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__namespace.default.useState(false);
-  const [view, setView] = React25__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React25__namespace.default.useState(null);
-  const [coords, setCoords] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const triggerRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const labelId = React25__namespace.default.useId();
+  const [open, setOpen] = React36__namespace.default.useState(false);
+  const [view, setView] = React36__namespace.default.useState(range.start || /* @__PURE__ */ new Date());
+  const [hover, setHover] = React36__namespace.default.useState(null);
+  const [focusDate, setFocusDate] = React36__namespace.default.useState(null);
+  const [coords, setCoords] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const triggerRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const gridRef = React36__namespace.default.useRef(null);
+  const labelId = React36__namespace.default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7690,7 +7927,7 @@ function DateRangePicker({
     left = Math.max(8, left);
     setCoords({ left, top: flip ? void 0 : Math.round(r.bottom + 6), bottom: flip ? Math.round(vh - r.top + 6) : void 0 });
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7701,7 +7938,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7722,7 +7959,52 @@ function DateRangePicker({
     if (value === void 0) setInternal(r);
     onChange?.(r);
   };
+  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
   const outOfRange = (d) => min && ymd(d) < ymd(min) || max && ymd(d) > ymd(max) || Boolean(disabledDate && disabledDate(d));
+  const sameDay2 = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  const keyOf = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+  const addMonths = (d, n) => {
+    const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0);
+    return new Date(last.getFullYear(), last.getMonth(), Math.min(d.getDate(), last.getDate()));
+  };
+  React36__namespace.default.useEffect(() => {
+    if (!open) {
+      setFocusDate(null);
+      setHover(null);
+    }
+  }, [open]);
+  React36__namespace.default.useEffect(() => {
+    if (!open || !focusDate) return;
+    gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
+  }, [focusDate, open]);
+  const onGridKeyDown = (e) => {
+    const btn = e.target.closest && e.target.closest("[data-key]");
+    if (!btn) return;
+    const [fy, fm, fd] = btn.getAttribute("data-key").split("-").map(Number);
+    const cur = new Date(fy, fm, fd);
+    let step;
+    if (e.key === "ArrowLeft") step = (d) => addDays(d, -1);
+    else if (e.key === "ArrowRight") step = (d) => addDays(d, 1);
+    else if (e.key === "ArrowUp") step = (d) => addDays(d, -7);
+    else if (e.key === "ArrowDown") step = (d) => addDays(d, 7);
+    else if (e.key === "Home") step = (d) => addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));
+    else if (e.key === "End") step = (d) => addDays(d, 6 - (d.getDay() - weekStartsOn + 7) % 7);
+    else if (e.key === "PageUp") step = (d) => addMonths(d, -1);
+    else if (e.key === "PageDown") step = (d) => addMonths(d, 1);
+    else return;
+    e.preventDefault();
+    let next = step(cur), guard = 0;
+    while (outOfRange(next) && guard < 366) {
+      next = step(next);
+      guard += 1;
+    }
+    if (outOfRange(next)) return;
+    setFocusDate(next);
+    setHover(next);
+    if (next.getFullYear() !== view.getFullYear() || next.getMonth() !== view.getMonth()) setView(new Date(next.getFullYear(), next.getMonth(), 1));
+  };
+  const tabbableDate = focusDate || range.start || /* @__PURE__ */ new Date();
   const clickDay = (d) => {
     if (outOfRange(d)) return;
     if (!range.start || range.start && range.end) {
@@ -7741,8 +8023,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React25__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React25__namespace.default.useMemo(
+  const months = React36__namespace.default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React36__namespace.default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7812,6 +8094,7 @@ function DateRangePicker({
           className: "twc-drp__pop",
           ref: popRef,
           role: "dialog",
+          "aria-modal": "true",
           "aria-label": "Choose date range",
           style: { position: "fixed", left: coords.left, right: "auto", top: coords.top, bottom: coords.bottom, zIndex: "var(--z-tooltip)" },
           children: [
@@ -7831,7 +8114,7 @@ function DateRangePicker({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-drp__nav", "aria-label": "Next month", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__grid", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drp__grid", ref: gridRef, onKeyDown: onGridKeyDown, role: "grid", children: [
                 dows.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drp__dow", children: d }, i)),
                 Array.from({ length: 42 }).map((_, i) => {
                   const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
@@ -7843,6 +8126,8 @@ function DateRangePicker({
                       className: "twc-drp__day",
                       "data-outside": outside || void 0,
                       disabled: outOfRange(d) || void 0,
+                      "data-key": keyOf(d),
+                      tabIndex: sameDay2(d, tabbableDate) ? 0 : -1,
                       "data-in": inRange(t) || void 0,
                       "data-edge": edgeOf(t) || void 0,
                       "aria-pressed": !!edgeOf(t),
@@ -7929,14 +8214,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React25__namespace.default.useRef(null);
+  const dialogRef = React36__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React36__namespace.default.useState(open);
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7947,7 +8232,7 @@ function Dialog({
   useScrollLock(open);
   useInertBackground(dialogRef, open && mounted);
   useFocusTrap(dialogRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8094,14 +8379,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React25__namespace.default.useRef(null);
+  const panelRef = React36__namespace.default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React36__namespace.default.useState(open);
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -8112,7 +8397,7 @@ function Drawer({
   useScrollLock(open);
   useInertBackground(panelRef, open && mounted);
   useFocusTrap(panelRef, open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8201,11 +8486,11 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const hasMsg = Boolean(error || hint);
-  const control = React25__namespace.default.isValidElement(children) ? React25__namespace.default.cloneElement(children, {
+  const control = React36__namespace.default.isValidElement(children) ? React36__namespace.default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], hasMsg ? descId : null].filter(Boolean).join(" ") || void 0,
     "aria-invalid": children.props["aria-invalid"] !== void 0 ? children.props["aria-invalid"] : error ? true : void 0
   }) : children;
@@ -8297,11 +8582,11 @@ function FileUpload({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React25__namespace.default.useState(false);
-  const inputRef = React25__namespace.default.useRef(null);
-  const autoId = React25__namespace.default.useId();
+  const [drag, setDrag] = React36__namespace.default.useState(false);
+  const inputRef = React36__namespace.default.useRef(null);
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -8524,15 +8809,15 @@ function Kanban({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React36__namespace.default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React25__namespace.default.useState(null);
-  const [overCol, setOverCol] = React25__namespace.default.useState(null);
-  const [grab, setGrab] = React25__namespace.default.useState(null);
-  const [announce, setAnnounce] = React25__namespace.default.useState("");
-  const rootRef = React25__namespace.default.useRef(null);
-  const focusIdRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => {
+  const [drag, setDrag] = React36__namespace.default.useState(null);
+  const [overCol, setOverCol] = React36__namespace.default.useState(null);
+  const [grab, setGrab] = React36__namespace.default.useState(null);
+  const [announce, setAnnounce] = React36__namespace.default.useState("");
+  const rootRef = React36__namespace.default.useRef(null);
+  const focusIdRef = React36__namespace.default.useRef(null);
+  React36__namespace.default.useEffect(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8681,7 +8966,7 @@ var LIST_CSS = `
 `;
 function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-list-styles", LIST_CSS);
-  const safeHref12 = (url) => {
+  const safeHref13 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -8693,7 +8978,7 @@ function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
     /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: `twc-list ${className}`, role: "list", "data-plain": plain || void 0, ...rest, children: [
       __twcStyles,
       items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { role: "presentation", style: { display: "contents" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-list__empty", children: emptyMessage ?? "Nothing here yet" }) }) : items.map((it, i) => {
-        const href = safeHref12(it.href);
+        const href = safeHref13(it.href);
         const interactive = Boolean(it.onClick || href);
         const Tag2 = href ? "a" : interactive ? "button" : "div";
         const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8749,7 +9034,7 @@ button.twc-navbar__brand, a.twc-navbar__brand { cursor: pointer; }
   .twc-navbar__menu-btn { display: inline-grid; }
 }
 `;
-function safeHref4(url) {
+function safeHref5(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -8772,9 +9057,9 @@ function Navbar({
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
     __twcStyles,
     onMenuClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__menu-btn", "aria-expanded": menuOpen, "aria-controls": menuControls, "aria-label": menuOpen ? "Close menu" : "Open menu", onClick: onMenuClick, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
-    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref4(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
+    brand ? brandHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "twc-navbar__brand", href: safeHref5(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
     /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "twc-navbar__links", "aria-label": navLabel, children: links.map((l, i) => {
-      const href = safeHref4(l.href);
+      const href = safeHref5(l.href);
       const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         l.icon,
         l.label
@@ -8842,21 +9127,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React25__namespace.default.useState(defaultOpen);
-  const [render, setRender] = React25__namespace.default.useState(false);
-  const [pos, setPos] = React25__namespace.default.useState(null);
-  const wrapRef = React25__namespace.default.useRef(null);
-  const popRef = React25__namespace.default.useRef(null);
-  const popId = React25__namespace.default.useId();
+  const [openState, setOpenState] = React36__namespace.default.useState(defaultOpen);
+  const [render, setRender] = React36__namespace.default.useState(false);
+  const [pos, setPos] = React36__namespace.default.useState(null);
+  const wrapRef = React36__namespace.default.useRef(null);
+  const popRef = React36__namespace.default.useRef(null);
+  const popId = React36__namespace.default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__namespace.default.useRef(open);
+  const openRef = React36__namespace.default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__namespace.default.useRef(controlled);
+  const controlledRef = React36__namespace.default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__namespace.default.useRef(onOpenChange);
+  const onOpenChangeRef = React36__namespace.default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__namespace.default.useCallback((next) => {
+  const setOpen = React36__namespace.default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8864,7 +9149,7 @@ function Popover({
   }, []);
   const toggle = () => setOpen((o) => !o);
   const RD = { createPortal: typeof reactDom.createPortal === "function" ? reactDom.createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
-  const place = React25__namespace.default.useCallback(() => {
+  const place = React36__namespace.default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8901,7 +9186,7 @@ function Popover({
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
     setPos({ top, left, width: w, flip: false, arrow });
   }, [placement, align, width]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8924,7 +9209,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8932,12 +9217,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React25__namespace.default.useRef(null);
-  const needFocusRef = React25__namespace.default.useRef(false);
-  React25__namespace.default.useEffect(() => {
+  const restoreRef = React36__namespace.default.useRef(null);
+  const needFocusRef = React36__namespace.default.useRef(false);
+  React36__namespace.default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8972,7 +9257,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React25__namespace.default.isValidElement(trigger) ? React25__namespace.default.cloneElement(trigger, {
+  const triggerEl = React36__namespace.default.isValidElement(trigger) ? React36__namespace.default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -9015,7 +9300,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  const labelId = React25__namespace.default.useId();
+  const labelId = React36__namespace.default.useId();
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restProps } = rest;
   const __twcStyles = useScopedStyles("twc-progress-styles", `
 .twc-progress-wrap { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -9138,7 +9423,7 @@ function Radio({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -9208,13 +9493,13 @@ function RadioGroup({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const labelId = `${fieldId}-label`;
   const descId = `${fieldId}-desc`;
   const groupName = name || `${fieldId}-name`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const select = (v) => {
     if (value === void 0) setInternal(v);
@@ -9235,10 +9520,10 @@ function RadioGroup({
       tone
     },
     o.value
-  )) : React25__namespace.default.Children.map(children, (child) => {
-    if (!React25__namespace.default.isValidElement(child)) return child;
+  )) : React36__namespace.default.Children.map(children, (child) => {
+    if (!React36__namespace.default.isValidElement(child)) return child;
     const v = child.props.value;
-    return React25__namespace.default.cloneElement(child, {
+    return React36__namespace.default.cloneElement(child, {
       name: child.props.name ?? groupName,
       checked: child.props.checked ?? current === v,
       onChange: child.props.onChange ?? (() => select(v)),
@@ -9318,12 +9603,12 @@ function Rating({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue);
-  const [hover, setHover] = React25__namespace.default.useState(0);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue);
+  const [hover, setHover] = React36__namespace.default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React25__namespace.default.useRef([]);
+  const btnRefs = React36__namespace.default.useRef([]);
   const tabStar = Math.min(count, Math.max(1, Math.round(val) || 1));
   const fmt = (v) => format ? format(v) : Number.isInteger(v) ? String(v) : v.toFixed(1);
   if (process.env.NODE_ENV !== "production" && interactive && !Number.isInteger(val)) {
@@ -9510,24 +9795,24 @@ function Sidebar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const navId = React25__namespace.default.useId();
-  const panelRef = React25__namespace.default.useRef(null);
+  const navId = React36__namespace.default.useId();
+  const panelRef = React36__namespace.default.useRef(null);
   const renderPortal = usePortal();
-  const [internal, setInternal] = React25__namespace.default.useState(defaultCollapsed);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultCollapsed);
   const collapsed = collapsedProp !== void 0 ? collapsedProp : internal;
   const toggle = () => {
     const next = !collapsed;
     if (collapsedProp === void 0) setInternal(next);
     onCollapsedChange?.(next);
   };
-  const [openInternal, setOpenInternal] = React25__namespace.default.useState(defaultOpen);
+  const [openInternal, setOpenInternal] = React36__namespace.default.useState(defaultOpen);
   const open = openProp !== void 0 ? openProp : openInternal;
   const setOpen = (next) => {
     if (openProp === void 0) setOpenInternal(next);
     onOpenChange?.(next);
   };
-  const [mounted, setMounted] = React25__namespace.default.useState(open);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React36__namespace.default.useState(open);
+  React36__namespace.default.useEffect(() => {
     if (!overlay) return void 0;
     if (open) {
       setMounted(true);
@@ -9536,7 +9821,7 @@ function Sidebar({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [overlay, open]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9545,7 +9830,7 @@ function Sidebar({
     };
   }, [overlay, open]);
   useFocusTrap(panelRef, overlay && open && mounted);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -9557,13 +9842,13 @@ function Sidebar({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [overlay, open, openProp, onOpenChange]);
-  const safeHref12 = (url) => {
+  const safeHref13 = (url) => {
     if (url == null) return void 0;
     const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
     return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
   };
   const renderItem = (it, i) => {
-    const href = safeHref12(it.href);
+    const href = safeHref13(it.href);
     const labelStr = typeof it.label === "string" ? it.label : void 0;
     const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
@@ -9597,7 +9882,7 @@ function Sidebar({
   const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     __twcStyles,
     brand ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React25__namespace.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxRuntime.jsxs(React36__namespace.default.Fragment, { children: [
       g.section != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: renderItem(it) }, i)) })
     ] }, gi)) }),
@@ -9766,10 +10051,10 @@ function Slider({
     return Math.min(max, Math.max(min, Math.round(stepped * 1e6) / 1e6));
   };
   const __twcStyles = useScopedStyles("twc-slider-styles", SLIDER_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
-  const [internal, setInternal] = React25__namespace.default.useState(() => {
+  const [internal, setInternal] = React36__namespace.default.useState(() => {
     if (isRange) {
       const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
       return [clampSnap(dv[0]), clampSnap(dv[1])];
@@ -9779,8 +10064,8 @@ function Slider({
   const rawVal = value !== void 0 ? value : internal;
   const clampedVals = (isRange ? [Number(rawVal[0]), Number(rawVal[1])] : [Number(rawVal)]).map((v) => Math.min(max, Math.max(min, Number.isFinite(v) ? v : min)));
   const indices = isRange ? [0, 1] : [0];
-  const trackRef = React25__namespace.default.useRef(null);
-  const [dragging, setDragging] = React25__namespace.default.useState(false);
+  const trackRef = React36__namespace.default.useRef(null);
+  const [dragging, setDragging] = React36__namespace.default.useState(false);
   const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
   const valueTextFor = (v) => {
     if (getAriaValueText) return getAriaValueText(v);
@@ -9811,8 +10096,8 @@ function Slider({
     const ratio = Math.min(1, Math.max(0, (clientX - r.left) / r.width));
     return clampSnap(min + ratio * (max - min));
   };
-  const dragCleanupRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React36__namespace.default.useRef(null);
+  React36__namespace.default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -10043,7 +10328,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React25__namespace.default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React36__namespace.default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -10175,7 +10460,7 @@ function Switch({
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__error { font-size: var(--text-xs); color: var(--color-danger-subtle-fg); font-weight: var(--font-medium); }
 `);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -10278,14 +10563,14 @@ function Table({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React25__namespace.default.useMemo(
+  const cols = React36__namespace.default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React25__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React36__namespace.default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React25__namespace.default.useMemo(() => {
+  const rows = React36__namespace.default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -10432,15 +10717,15 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React25__namespace.default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React36__namespace.default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React25__namespace.default.useRef(null);
-  const [ind, setInd] = React25__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React25__namespace.default.useId();
+  const listRef = React36__namespace.default.useRef(null);
+  const [ind, setInd] = React36__namespace.default.useState({ left: 0, width: 0, top: 0, height: 0 });
+  const baseId = React36__namespace.default.useId();
   const tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React25__namespace.default.useCallback(() => {
+  const updateIndicator = React36__namespace.default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
@@ -10449,10 +10734,10 @@ function Tabs({
       if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
     }
   }, [vertical]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -10597,7 +10882,7 @@ function Tag({
     }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var useIso = typeof document !== "undefined" ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
+var useIso = typeof document !== "undefined" ? React36__namespace.default.useLayoutEffect : React36__namespace.default.useEffect;
 var TEXTAREA_CSS = `
 .twc-field { display: flex; flex-direction: column; gap: var(--space-1-5); font-family: var(--font-sans); }
 .twc-field__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); display: flex; gap: 4px; align-items: center; }
@@ -10633,7 +10918,7 @@ var TEXTAREA_CSS = `
 .twc-field__count { margin-inline-start: auto; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
 .twc-field__count[data-danger="true"] { color: var(--color-danger-subtle-fg); }
 `;
-var Textarea = React25__namespace.default.forwardRef(function Textarea2({
+var Textarea = React36__namespace.default.forwardRef(function Textarea2({
   label,
   hint,
   error,
@@ -10651,19 +10936,19 @@ var Textarea = React25__namespace.default.forwardRef(function Textarea2({
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
-  const autoId = React25__namespace.default.useId();
+  const autoId = React36__namespace.default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
-  const innerRef = React25__namespace.default.useRef(null);
+  const innerRef = React36__namespace.default.useRef(null);
   const setRef = (el) => {
     innerRef.current = el;
     if (typeof ref === "function") ref(el);
     else if (ref) ref.current = el;
   };
   const countControlled = rest.value !== void 0;
-  const [len2, setLen] = React25__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React36__namespace.default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -10841,19 +11126,19 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React25__namespace.default.useRef(onClose);
-  React25__namespace.default.useEffect(() => {
+  const onCloseRef = React36__namespace.default.useRef(onClose);
+  React36__namespace.default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React25__namespace.default.useRef();
-  const stop = React25__namespace.default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React25__namespace.default.useCallback(() => {
+  const timer = React36__namespace.default.useRef();
+  const stop = React36__namespace.default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React36__namespace.default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -10898,30 +11183,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React25__namespace.default.Children.toArray(children).slice(-limit) : children;
+  const shown = limit && limit > 0 ? React36__namespace.default.Children.toArray(children).slice(-limit) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
     __twcStyles,
     shown
   ] });
 }
-var ToastContext = React25__namespace.default.createContext(null);
+var ToastContext = React36__namespace.default.createContext(null);
 function useToast() {
-  const ctx = React25__namespace.default.useContext(ToastContext);
+  const ctx = React36__namespace.default.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a <ToastProvider>.");
   return ctx;
 }
 function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps }) {
-  const [toasts, setToasts] = React25__namespace.default.useState([]);
-  const idRef = React25__namespace.default.useRef(0);
-  const limitRef = React25__namespace.default.useRef(limit);
-  React25__namespace.default.useEffect(() => {
+  const [toasts, setToasts] = React36__namespace.default.useState([]);
+  const idRef = React36__namespace.default.useRef(0);
+  const limitRef = React36__namespace.default.useRef(limit);
+  React36__namespace.default.useEffect(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React25__namespace.default.useCallback((id) => {
+  const dismiss = React36__namespace.default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React25__namespace.default.useCallback(() => setToasts([]), []);
-  const api = React25__namespace.default.useMemo(() => {
+  const clear = React36__namespace.default.useCallback(() => setToasts([]), []);
+  const api = React36__namespace.default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10942,7 +11227,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React25__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React36__namespace.default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -11050,13 +11335,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React25__namespace.default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React36__namespace.default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React25__namespace.default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React36__namespace.default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React25__namespace.default.useState(null);
-  const rowRefs = React25__namespace.default.useRef(/* @__PURE__ */ new Map());
-  const taRef = React25__namespace.default.useRef({ str: "", t: 0 });
+  const [focusId, setFocusId] = React36__namespace.default.useState(null);
+  const rowRefs = React36__namespace.default.useRef(/* @__PURE__ */ new Map());
+  const taRef = React36__namespace.default.useRef({ str: "", t: 0 });
   const toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -11188,7 +11473,7 @@ function AppShell({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
-  const wiredSidebar = React25__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React25__namespace.default.cloneElement(sidebar, {
+  const wiredSidebar = React36__namespace.default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React36__namespace.default.cloneElement(sidebar, {
     overlay: sidebar.props.overlay !== void 0 ? sidebar.props.overlay : true,
     open: sidebar.props.open !== void 0 ? sidebar.props.open : sidebarOpen,
     onOpenChange: sidebar.props.onOpenChange !== void 0 ? sidebar.props.onOpenChange : onSidebarOpenChange
@@ -11218,12 +11503,12 @@ function bgValue(bg) {
   if (BG[bg]) return `var(${BG[bg]})`;
   return String(bg).startsWith("--") ? `var(${bg})` : bg;
 }
-function safeHref5(url) {
+function safeHref6(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Box({
+var Box = React36__namespace.default.forwardRef(function Box2({
   as: Tag2 = "div",
   p,
   px,
@@ -11247,7 +11532,7 @@ function Box({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const s = {
     paddingTop: sp(pt ?? py ?? p),
     paddingRight: sp(pr ?? px ?? p),
@@ -11263,16 +11548,17 @@ function Box({
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
     ...style
   };
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref5(rest.href);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag2, { className: `twc-box ${className}`.trim(), style: s, ...rest, children });
-}
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag2, { ref, className: `twc-box ${className}`.trim(), style: s, ...rest, children });
+});
+Box.displayName = "Box";
 var SIZES = { sm: 640, md: 768, lg: 1024, xl: 1280, full: "100%" };
-function safeHref6(url) {
+function safeHref7(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Container({
+var Container = React36__namespace.default.forwardRef(function Container2({
   as: Tag2 = "div",
   size = "lg",
   padded = true,
@@ -11280,12 +11566,13 @@ function Container({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const max = SIZES[size] ?? size;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
+      ref,
       className: `twc-container ${className}`.trim(),
       style: {
         width: "100%",
@@ -11298,7 +11585,8 @@ function Container({
       children
     }
   );
-}
+});
+Container.displayName = "Container";
 function space(v) {
   if (v == null) return void 0;
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
@@ -11308,12 +11596,12 @@ function len(v) {
   return typeof v === "number" ? `${v}px` : v;
 }
 var BP = { sm: 640, md: 768, lg: 1024, xl: 1280 };
-function safeHref7(url) {
+function safeHref8(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Grid({
+var Grid = React36__namespace.default.forwardRef(function Grid2({
   as: Tag2 = "div",
   columns,
   minChildWidth,
@@ -11328,9 +11616,9 @@ function Grid({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const responsive = columns != null && typeof columns === "object";
-  const uid = React25__namespace.default.useId();
+  const uid = React36__namespace.default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
   let css = "";
   if (responsive) {
@@ -11344,10 +11632,11 @@ function Grid({
   }
   const __twcStyles = useScopedStyles(gridId ? `twc-grid-${gridId}` : "twc-grid", css);
   const templateColumns = minChildWidth ? `repeat(auto-fill, minmax(min(${len(minChildWidth)}, 100%), 1fr))` : responsive ? `repeat(var(--twc-grid-cols, ${columns.base ?? 1}), minmax(0, 1fr))` : `repeat(${columns || 1}, minmax(0, 1fr))`;
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref7(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag2,
     {
+      ref,
       className: `twc-grid ${className}`.trim(),
       "data-twc-grid-id": gridId || void 0,
       style: {
@@ -11368,18 +11657,19 @@ function Grid({
       ]
     }
   );
-}
+});
+Grid.displayName = "Grid";
 function space2(v) {
   if (v == null) return void 0;
   if (typeof v === "number") return `var(--space-${String(v).replace(".", "-")})`;
   return v;
 }
-function safeHref8(url) {
+function safeHref9(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Stack({
+var Stack = React36__namespace.default.forwardRef(function Stack2({
   as: Tag2 = "div",
   direction = "column",
   gap = 4,
@@ -11399,12 +11689,13 @@ function Stack({
   style,
   children,
   ...rest
-}) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  const kids = divider != null ? React25__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React25__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
+}, ref) {
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
+  const kids = divider != null ? React36__namespace.default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsxRuntime.jsx(React36__namespace.default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
+      ref,
       className: `twc-stack ${className}`.trim(),
       style: {
         display: inline ? "inline-flex" : "flex",
@@ -11424,7 +11715,8 @@ function Stack({
       children: kids
     }
   );
-}
+});
+Stack.displayName = "Stack";
 var CODE_CSS = `
 .twc-code {
   font-family: var(--font-mono); font-size: 0.875em;
@@ -11448,7 +11740,7 @@ var CODE_CSS = `
 .twc-code__copy:focus-visible { outline: none; box-shadow: var(--ring); }
 .twc-code__copy svg { width: 15px; height: 15px; display: block; }
 `;
-function safeHref9(url) {
+function safeHref10(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
@@ -11465,11 +11757,11 @@ function Code({
 }) {
   const __twcStyles = useScopedStyles("twc-code-styles", CODE_CSS);
   const Tag2 = as ?? (block ? "pre" : "code");
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref9(rest.href);
-  const rootRef = React25__namespace.default.useRef(null);
-  const [copied, setCopied] = React25__namespace.default.useState(false);
-  const timerRef = React25__namespace.default.useRef(null);
-  React25__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  const rootRef = React36__namespace.default.useRef(null);
+  const [copied, setCopied] = React36__namespace.default.useState(false);
+  const timerRef = React36__namespace.default.useRef(null);
+  React36__namespace.default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
@@ -11490,12 +11782,12 @@ function Code({
   ] });
 }
 var LEVEL_SIZE = { 1: "4xl", 2: "2xl", 3: "xl", 4: "lg", 5: "base", 6: "sm" };
-function safeHref10(url) {
+function safeHref11(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Heading({
+var Heading = React36__namespace.default.forwardRef(function Heading2({
   as,
   level = 2,
   size,
@@ -11507,13 +11799,14 @@ function Heading({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const Tag2 = as || `h${level}`;
   const sz = size || (display ? "display" : LEVEL_SIZE[level]) || "2xl";
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
+      ref,
       className: `twc-heading ${className}`.trim(),
       style: {
         margin: 0,
@@ -11531,7 +11824,8 @@ function Heading({
       children
     }
   );
-}
+});
+Heading.displayName = "Heading";
 var TONE = {
   default: "--color-text",
   muted: "--color-text-muted",
@@ -11547,12 +11841,12 @@ var TONE = {
   // Adopt the surrounding color (e.g. inside a solid Button/Badge/Alert or a link).
   inherit: "inherit"
 };
-function safeHref11(url) {
+function safeHref12(url) {
   if (url == null) return void 0;
   const s = String(url).replace(/[\x00-\x20]+/g, "").toLowerCase();
   return s.startsWith("javascript:") || s.startsWith("data:") || s.startsWith("vbscript:") ? void 0 : url;
 }
-function Text({
+var Text = React36__namespace.default.forwardRef(function Text2({
   as: Tag2 = "p",
   size = "base",
   tone = "default",
@@ -11564,12 +11858,13 @@ function Text({
   style,
   children,
   ...rest
-}) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref11(rest.href);
+}, ref) {
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref12(rest.href);
   const toneToken = TONE[tone] || TONE.default;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag2,
     {
+      ref,
       className: `twc-text ${className}`.trim(),
       style: {
         margin: 0,
@@ -11586,47 +11881,48 @@ function Text({
       children
     }
   );
-}
+});
+Text.displayName = "Text";
 var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM2 ? React25__namespace.default.useLayoutEffect : React25__namespace.default.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM2 ? React36__namespace.default.useLayoutEffect : React36__namespace.default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [mounted, setMounted] = React36__namespace.default.useState(false);
+  React36__namespace.default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React25__namespace.default.useRef(void 0);
-  React25__namespace.default.useEffect(() => {
+  const ref = React36__namespace.default.useRef(void 0);
+  React36__namespace.default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React25__namespace.default.useState(initial);
-  const toggle = React25__namespace.default.useCallback((next) => {
+  const [on, setOn] = React36__namespace.default.useState(initial);
+  const toggle = React36__namespace.default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React25__namespace.default.useState(initial);
-  const onOpen = React25__namespace.default.useCallback(() => setOpen(true), []);
-  const onClose = React25__namespace.default.useCallback(() => setOpen(false), []);
-  const onToggle = React25__namespace.default.useCallback(() => setOpen((p) => !p), []);
+  const [open, setOpen] = React36__namespace.default.useState(initial);
+  const onOpen = React36__namespace.default.useCallback(() => setOpen(true), []);
+  const onClose = React36__namespace.default.useCallback(() => setOpen(false), []);
+  const onToggle = React36__namespace.default.useCallback(() => setOpen((p) => !p), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 function useControllableState({ value, defaultValue, onChange } = {}) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React25__namespace.default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React36__namespace.default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React25__namespace.default.useRef({ current, isControlled, onChange });
+  const ref = React36__namespace.default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const wasControlled = React25__namespace.default.useRef(isControlled);
-  React25__namespace.default.useEffect(() => {
+  const wasControlled = React36__namespace.default.useRef(isControlled);
+  React36__namespace.default.useEffect(() => {
     if (wasControlled.current !== isControlled) {
       warnOnce(
         "useControllableState:switch",
@@ -11635,7 +11931,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
       wasControlled.current = isControlled;
     }
   });
-  const setValue = React25__namespace.default.useCallback((next) => {
+  const setValue = React36__namespace.default.useCallback((next) => {
     const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
     const resolved = typeof next === "function" ? next(cur) : next;
     if (resolved === cur) return;
@@ -11646,7 +11942,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
 }
 function useMediaQuery(query, { defaultValue = false, initializeWithValue = false } = {}) {
   const get = () => canUseDOM2 ? window.matchMedia(query).matches : defaultValue;
-  const [matches3, setMatches] = React25__namespace.default.useState(initializeWithValue ? get : defaultValue);
+  const [matches3, setMatches] = React36__namespace.default.useState(initializeWithValue ? get : defaultValue);
   useIsomorphicLayoutEffect(() => {
     if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
@@ -11662,7 +11958,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
-  const firstApply = React25__namespace.default.useRef(true);
+  const firstApply = React36__namespace.default.useRef(true);
   const read = () => {
     if (!canUseDOM2) return "light";
     try {
@@ -11672,8 +11968,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React25__namespace.default.useState(read);
-  const apply = React25__namespace.default.useCallback(
+  const [theme, setThemeState] = React36__namespace.default.useState(read);
+  const apply = React36__namespace.default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -11699,11 +11995,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React25__namespace.default.useRef(theme);
+  const themeRef = React36__namespace.default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React25__namespace.default.useCallback(
+  const setTheme = React36__namespace.default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -11714,10 +12010,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React25__namespace.default.useCallback(() => {
+  const toggle = React36__namespace.default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -11733,14 +12029,14 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   return { theme, setTheme, toggle, isDark: theme === "dark" };
 }
 function useEventListener(eventName, handler, element, options) {
-  const saved = React25__namespace.default.useRef(handler);
+  const saved = React36__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
   const capture = typeof options === "boolean" ? options : options && options.capture;
   const passive = typeof options === "object" && options ? options.passive : void 0;
   const once = typeof options === "object" && options ? options.once : void 0;
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     const target = element && element.current || element || (canUseDOM2 ? window : null);
     if (!target || !target.addEventListener) return void 0;
     const opts = typeof options === "boolean" ? options : { capture, passive, once };
@@ -11750,11 +12046,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React25__namespace.default.useRef(handler);
+  const saved = React36__namespace.default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -11789,8 +12085,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React25__namespace.default.useState(read);
-  const setValue = React25__namespace.default.useCallback(
+  const [stored, setStored] = React36__namespace.default.useState(read);
+  const setValue = React36__namespace.default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -11806,8 +12102,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React25__namespace.default.useState(false);
-  const copy = React25__namespace.default.useCallback(async (text) => {
+  const [copied, setCopied] = React36__namespace.default.useState(false);
+  const copy = React36__namespace.default.useCallback(async (text) => {
     if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -11821,7 +12117,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -11829,23 +12125,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React25__namespace.default.useState(value);
-  React25__namespace.default.useEffect(() => {
+  const [debounced, setDebounced] = React36__namespace.default.useState(value);
+  React36__namespace.default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React25__namespace.default.useRef(callback);
-  const timer = React25__namespace.default.useRef(null);
+  const saved = React36__namespace.default.useRef(callback);
+  const timer = React36__namespace.default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => () => {
+  React36__namespace.default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React25__namespace.default.useCallback(
+  return React36__namespace.default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -11854,33 +12150,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React25__namespace.default.useRef(callback);
+  const saved = React36__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setInterval(() => saved.current(), delay);
     return () => clearInterval(id);
   }, [delay]);
 }
 function useTimeout(callback, delay) {
-  const saved = React25__namespace.default.useRef(callback);
+  const saved = React36__namespace.default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React25__namespace.default.useState(() => ({
+  const [size, setSize] = React36__namespace.default.useState(() => ({
     width: canUseDOM2 ? window.innerWidth : 0,
     height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React25__namespace.default.useEffect(() => {
+  React36__namespace.default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -11890,8 +12186,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React25__namespace.default.useState(false);
-  React25__namespace.default.useEffect(() => {
+  const [hovered, setHovered] = React36__namespace.default.useState(false);
+  React36__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -11907,8 +12203,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React25__namespace.default.useState(null);
-  React25__namespace.default.useEffect(() => {
+  const [entry, setEntry] = React36__namespace.default.useState(null);
+  React36__namespace.default.useEffect(() => {
     const el = ref && ref.current;
     if (!canUseDOM2 || !el || typeof IntersectionObserver === "undefined") return void 0;
     const obs = new IntersectionObserver(([e]) => setEntry(e), { root, rootMargin, threshold });
@@ -11918,7 +12214,7 @@ function useIntersectionObserver(ref, options = {}) {
   return entry;
 }
 function useId(prefix = "twc") {
-  const raw = React25__namespace.default.useId();
+  const raw = React36__namespace.default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 var useFocusTrap2 = useFocusTrap;
@@ -11927,6 +12223,7 @@ var useScrollLock2 = useScrollLock;
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
+exports.Anchor = Anchor;
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.AvatarMenu = AvatarMenu;
@@ -11940,6 +12237,7 @@ exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.Code = Code;
 exports.ColorPicker = ColorPicker;
+exports.ColorSchemeScript = ColorSchemeScript;
 exports.Combobox = Combobox;
 exports.CommandPalette = CommandPalette;
 exports.Container = Container;
@@ -11954,17 +12252,23 @@ exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
 exports.FileUpload = FileUpload;
+exports.Form = Form;
 exports.Grid = Grid;
 exports.Heading = Heading;
 exports.IconButton = IconButton;
+exports.Image = Image;
 exports.Input = Input;
 exports.Kanban = Kanban;
+exports.Kbd = Kbd;
+exports.Label = Label;
 exports.List = List;
 exports.Menu = Menu;
 exports.MultiSelect = MultiSelect;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
+exports.Portal = Portal;
+exports.Pre = Pre;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
@@ -11983,12 +12287,17 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.ThemeProvider = ThemeProvider;
 exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastProvider = ToastProvider;
 exports.ToastViewport = ToastViewport;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
+exports.TwicoProvider = TwicoProvider;
+exports.VisuallyHidden = VisuallyHidden;
+exports.createTheme = createTheme;
+exports.getColorSchemeScript = getColorSchemeScript;
 exports.runDatatableQuery = runDatatableQuery;
 exports.useClickOutside = useClickOutside;
 exports.useColorScheme = useColorScheme;