npm - twico-ui - Versions diffs - 1.6.0 → 1.7.0 - Mend

twico-ui 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,22 +1,335 @@
 "use client";
-import * as React25 from 'react';
-import React25__default from 'react';
+import * as React36 from 'react';
+import React36__default from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-// components/navigation/Accordion.jsx
-var SUPPORTS_STYLE_HOIST = parseInt(String(React25.version), 10) >= 19;
+// components/TwicoProvider.jsx
+var SUPPORTS_STYLE_HOIST = parseInt(String(React36.version), 10) >= 19;
+var NonceContext = React36.createContext(void 0);
 function useScopedStyles(id, css) {
-  React25.useInsertionEffect(() => {
+  const nonce = React36.useContext(NonceContext);
+  React36.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.createElement("style", { href: id, precedence: "twc-ui" }, css) : null;
+  }, [id, css, nonce]);
+  return SUPPORTS_STYLE_HOIST ? React36.createElement("style", { href: id, precedence: "twc-ui", nonce }, css) : null;
+}
+// components/TwicoProvider.jsx
+function TwicoProvider({ nonce, children }) {
+  return React36__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__default.useMemo(() => toVars(theme), [theme]);
+  const uid = React36__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__ */ 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__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__ */ jsxs(
+    "form",
+    {
+      ref,
+      className: `twc-form ${className}`.trim(),
+      onSubmit: handleSubmit,
+      style: gap != null ? { gap: `var(--space-${gap})`, ...style } : style,
+      ...rest,
+      children: [
+        __twcStyles,
+        /* @__PURE__ */ 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__default.forwardRef(function VisuallyHidden2({ as: Tag2 = "span", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-visually-hidden-styles", VH_CSS);
+  return /* @__PURE__ */ 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__default.useLayoutEffect : React36__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__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__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__default.useCallback((node) => {
+    if (typeof document === "undefined") return null;
+    return typeof createPortal === "function" ? 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__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__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__default.forwardRef(function Kbd2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-kbd-styles", KBD_CSS);
+  return /* @__PURE__ */ 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__default.forwardRef(function Pre2({ className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-pre-styles", PRE_CSS);
+  return /* @__PURE__ */ 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__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__ */ jsxs(Tag2, { ref, className: `twc-anchor ${className}`.trim(), href: Tag2 === "a" ? safeHref(href) : href, ...extra, ...rest, children: [
+    __twcStyles,
+    children,
+    external ? /* @__PURE__ */ 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__default.forwardRef(function Label2({ htmlFor, required = false, size = "md", className = "", children, ...rest }, ref) {
+  const __twcStyles = useScopedStyles("twc-label-styles", LABEL_CSS);
+  return /* @__PURE__ */ jsxs("label", { ref, htmlFor, className: `twc-label ${className}`.trim(), "data-size": size, ...rest, children: [
+    __twcStyles,
+    children,
+    required ? /* @__PURE__ */ 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__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__default.useState(false);
+  const shownSrc = failed && fallback ? fallback : src;
+  const s = {
+    objectFit: fit,
+    borderRadius: radius ? `var(--radius-${radius})` : void 0,
+    aspectRatio,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    __twcStyles,
+    /* @__PURE__ */ 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); }
@@ -56,10 +369,10 @@ function Accordion({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-accordion-styles", ACCORDION_CSS);
-  const rootRef = React25__default.useRef(null);
-  const [internal, setInternal] = React25__default.useState(() => new Set(defaultOpen));
+  const rootRef = React36__default.useRef(null);
+  const [internal, setInternal] = React36__default.useState(() => new Set(defaultOpen));
   const open = openProp !== void 0 ? new Set(openProp) : internal;
-  const baseId = React25__default.useId();
+  const baseId = React36__default.useId();
   function toggle(val) {
     const item = items.find((x) => x.value === val);
     if (item?.disabled) return;
@@ -106,9 +419,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__ */ jsxs("div", { className: "twc-accordion__item", children: [
-        /* @__PURE__ */ jsx(Heading2, { className: "twc-accordion__heading", children: /* @__PURE__ */ 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__ */ jsx(Heading3, { className: "twc-accordion__heading", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "twc-accordion__label", children: it.label }),
           /* @__PURE__ */ jsx("span", { className: "twc-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
@@ -245,7 +558,7 @@ function Avatar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-avatar-styles", AVATAR_CSS);
-  const [errored, setErrored] = React25__default.useState(false);
+  const [errored, setErrored] = React36__default.useState(false);
   const cleanSrc = safeSrc(src);
   const showImg = cleanSrc && !errored;
   const _statusLabel = status ? statusLabel ?? statusLabels?.[status] ?? STATUS_LABELS[status] : void 0;
@@ -303,7 +616,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;
@@ -323,25 +636,25 @@ function Menu({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-menu-styles", MENU_CSS);
-  const [openState, setOpenState] = React25__default.useState(defaultOpen);
-  const [render, setRender] = React25__default.useState(false);
-  const [pos, setPos] = React25__default.useState(null);
-  const [active, setActive] = React25__default.useState(-1);
-  const wrapRef = React25__default.useRef(null);
-  const menuRef = React25__default.useRef(null);
-  const typeBufRef = React25__default.useRef("");
-  const typeTimerRef = React25__default.useRef(null);
-  const menuId = React25__default.useId();
+  const [openState, setOpenState] = React36__default.useState(defaultOpen);
+  const [render, setRender] = React36__default.useState(false);
+  const [pos, setPos] = React36__default.useState(null);
+  const [active, setActive] = React36__default.useState(-1);
+  const wrapRef = React36__default.useRef(null);
+  const menuRef = React36__default.useRef(null);
+  const typeBufRef = React36__default.useRef("");
+  const typeTimerRef = React36__default.useRef(null);
+  const menuId = React36__default.useId();
   const headerId = `${menuId}-header`;
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__default.useRef(open);
+  const openRef = React36__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__default.useRef(controlled);
+  const controlledRef = React36__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__default.useRef(onOpenChange);
+  const onOpenChangeRef = React36__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__default.useCallback((next) => {
+  const setOpen = React36__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -349,7 +662,7 @@ function Menu({
   }, []);
   const RD = { createPortal: typeof createPortal === "function" ? 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__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -364,7 +677,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -382,7 +695,7 @@ function Menu({
       document.removeEventListener("mousedown", onDown);
     };
   }, [open, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -475,7 +788,7 @@ function Menu({
         items.map((it, i) => {
           if (it.separator) return /* @__PURE__ */ jsx("div", { className: "twc-menu__sep", role: "separator" }, `s${i}`);
           if (it.label && it.heading) return /* @__PURE__ */ 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__ */ jsxs(
             Tag2,
@@ -505,7 +818,7 @@ function Menu({
     }
   ) : null;
   const activeDescId = open && active >= 0 ? `${menuId}-item-${active}` : void 0;
-  const triggerEl = React25__default.isValidElement(trigger) ? React25__default.cloneElement(trigger, {
+  const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -656,7 +969,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;
@@ -670,7 +983,7 @@ function Breadcrumb({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-breadcrumb-styles", BREADCRUMB_CSS);
-  const [expanded, setExpanded] = React25__default.useState(false);
+  const [expanded, setExpanded] = React36__default.useState(false);
   const sep = separator || /* @__PURE__ */ jsx(ChevronSep, {});
   let display = items;
   if (maxItems > 0 && items.length > maxItems && !expanded) {
@@ -683,7 +996,7 @@ function Breadcrumb({
     __twcStyles,
     display.map((it, i) => {
       const last = i === display.length - 1;
-      return /* @__PURE__ */ jsxs(React25__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
         it.ellipsis ? /* @__PURE__ */ jsx("button", { className: "twc-breadcrumb__ellipsis", "aria-label": "Show more", onClick: () => setExpanded(true), children: "\u2026" }) : last ? /* @__PURE__ */ jsxs(
           "span",
           {
@@ -695,7 +1008,7 @@ function Breadcrumb({
               it.label
             ]
           }
-        ) : safeHref2(it.href) ? /* @__PURE__ */ jsxs("a", { className: "twc-breadcrumb__item", href: safeHref2(it.href), onClick: it.onClick, children: [
+        ) : safeHref3(it.href) ? /* @__PURE__ */ jsxs("a", { className: "twc-breadcrumb__item", href: safeHref3(it.href), onClick: it.onClick, children: [
           it.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: it.icon }) : null,
           it.label
         ] }) : it.onClick ? /* @__PURE__ */ jsxs("button", { type: "button", className: "twc-breadcrumb__item", onClick: it.onClick, children: [
@@ -803,7 +1116,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;
@@ -825,7 +1138,7 @@ function Button({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-btn-styles", CSS2);
-  const [ripples, setRipples] = React25__default.useState([]);
+  const [ripples, setRipples] = React36__default.useState([]);
   const Tag2 = as;
   const inert = Tag2 === "a" && (disabled || loading);
   function handleClick(e) {
@@ -854,7 +1167,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,
@@ -999,14 +1312,14 @@ function Carousel({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-carousel-styles", CAROUSEL_CSS);
-  const slides = React25__default.Children.toArray(children);
+  const slides = React36__default.Children.toArray(children);
   const count = slides.length;
-  const [internal, setInternal] = React25__default.useState(defaultIndex);
+  const [internal, setInternal] = React36__default.useState(defaultIndex);
   const index = indexProp !== void 0 ? indexProp : internal;
-  const [paused, setPaused] = React25__default.useState(false);
-  const [userPaused, setUserPaused] = React25__default.useState(false);
-  const [prefersReduced, setPrefersReduced] = React25__default.useState(false);
-  React25__default.useEffect(() => {
+  const [paused, setPaused] = React36__default.useState(false);
+  const [userPaused, setUserPaused] = React36__default.useState(false);
+  const [prefersReduced, setPrefersReduced] = React36__default.useState(false);
+  React36__default.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return void 0;
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
     const on = () => setPrefersReduced(mql.matches);
@@ -1014,15 +1327,15 @@ function Carousel({
     mql.addEventListener("change", on);
     return () => mql.removeEventListener("change", on);
   }, []);
-  const setIndex = React25__default.useCallback((i) => {
+  const setIndex = React36__default.useCallback((i) => {
     if (indexProp === void 0) setInternal(i);
     onIndexChange?.(i);
   }, [indexProp, onIndexChange]);
-  const go = React25__default.useCallback((i) => {
+  const go = React36__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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!autoRotating) return void 0;
     const t = setInterval(() => {
       const next = loop ? (index + 1) % count : index + 1 >= count ? index : index + 1;
@@ -1117,7 +1430,7 @@ function Chart({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-chart-styles", CHART_CSS);
-  const uid = React25__default.useId();
+  const uid = React36__default.useId();
   const tableId = tableFallback ? `${uid}-table` : void 0;
   const keys = series || ["value"];
   const palette = colors && colors.length ? colors : SERIES_COLORS;
@@ -1273,13 +1586,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__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
-  const ref = React25__default.useRef(null);
+  const ref = React36__default.useRef(null);
   const mixed = indeterminate && !checked;
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (ref.current) ref.current.indeterminate = mixed;
   }, [mixed]);
   if (process.env.NODE_ENV !== "production" && !label && !description && !rest["aria-label"] && !rest["aria-labelledby"]) {
@@ -1422,20 +1735,20 @@ function ColorPicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS);
   const __twcStyles1 = useScopedStyles("twc-colorpicker-styles", COLORPICKER_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const hex = (value !== void 0 ? value : internal) || "#000000";
-  const lastValidRef = React25__default.useRef(hex);
+  const lastValidRef = React36__default.useRef(hex);
   if (/^#[0-9a-f]{6}$/i.test(hex)) lastValidRef.current = hex;
-  const [open, setOpen] = React25__default.useState(false);
-  const [hsv, setHsv] = React25__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
-  const [coords, setCoords] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const triggerRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const areaRef = React25__default.useRef(null);
-  const hueRef = React25__default.useRef(null);
+  const [open, setOpen] = React36__default.useState(false);
+  const [hsv, setHsv] = React36__default.useState(() => hexToHsv(hex) || { h: 239, s: 60, v: 94 });
+  const [coords, setCoords] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const triggerRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const areaRef = React36__default.useRef(null);
+  const hueRef = React36__default.useRef(null);
   const POP_W = 240;
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1446,7 +1759,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -1457,17 +1770,17 @@ function ColorPicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  const labelId = React25__default.useId();
+  const labelId = React36__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
-  React25__default.useEffect(() => {
+  React36__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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1484,18 +1797,7 @@ function ColorPicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__default.useRef(false);
-  React25__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);
@@ -1588,6 +1890,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: [
@@ -1815,29 +2118,29 @@ function Combobox({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-combo-styles", COMBO_CSS);
-  const groups = React25__default.useMemo(() => normalizeGroups(options), [options]);
-  const flat = React25__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__default.useId();
+  const groups = React36__default.useMemo(() => normalizeGroups(options), [options]);
+  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const selected = flat.find((o) => o.value === current);
-  const [open, setOpen] = React25__default.useState(false);
-  const [query, setQuery] = React25__default.useState("");
-  const [active, setActive] = React25__default.useState(0);
-  const [coords, setCoords] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const controlRef = React25__default.useRef(null);
-  const inputRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const listRef = React25__default.useRef(null);
-  const activeRef = React25__default.useRef(null);
-  const fGroups = React25__default.useMemo(() => {
+  const [open, setOpen] = React36__default.useState(false);
+  const [query, setQuery] = React36__default.useState("");
+  const [active, setActive] = React36__default.useState(0);
+  const [coords, setCoords] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const controlRef = React36__default.useRef(null);
+  const inputRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const listRef = React36__default.useRef(null);
+  const activeRef = React36__default.useRef(null);
+  const fGroups = React36__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__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
     while (i >= 0 && i < visible.length) {
@@ -1846,7 +2149,7 @@ function Combobox({
     }
     return from;
   };
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -1861,7 +2164,7 @@ function Combobox({
       flip
     });
   }, [placement, minWidth]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -1872,7 +2175,7 @@ function Combobox({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -1882,15 +2185,15 @@ function Combobox({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
   }, [open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) ensureVisible(listRef.current, activeRef.current);
   }, [active, open]);
   function openMenu() {
@@ -1941,7 +2244,7 @@ function Combobox({
   const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React25__default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -2086,95 +2389,6 @@ function Combobox({
     error ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { id: descId, className: "twc-field__hint", children: hint }) : null
   ] });
 }
-var canUseDOM = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsoLayoutEffect = canUseDOM ? React25__default.useLayoutEffect : React25__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__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__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__default.useCallback((node) => {
-    if (typeof document === "undefined") return null;
-    return typeof createPortal === "function" ? 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__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; }
@@ -2222,14 +2436,14 @@ function CommandPalette({
 }) {
   const __twcStyles = useScopedStyles("twc-cmdk-styles", COMMAND_CSS);
   const renderPortal = usePortal();
-  const [query, setQuery] = React25__default.useState("");
-  const [active, setActive] = React25__default.useState(0);
-  const inputRef = React25__default.useRef(null);
-  const listRef = React25__default.useRef(null);
-  const paletteRef = React25__default.useRef(null);
-  const baseId = React25__default.useId();
-  const [mounted, setMounted] = React25__default.useState(open);
-  React25__default.useEffect(() => {
+  const [query, setQuery] = React36__default.useState("");
+  const [active, setActive] = React36__default.useState(0);
+  const inputRef = React36__default.useRef(null);
+  const listRef = React36__default.useRef(null);
+  const paletteRef = React36__default.useRef(null);
+  const baseId = React36__default.useId();
+  const [mounted, setMounted] = React36__default.useState(open);
+  React36__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -2238,14 +2452,14 @@ function CommandPalette({
     return () => clearTimeout(t);
   }, [open]);
   useScrollLock(open);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) {
       setQuery("");
       setActive(0);
     }
   }, [open]);
   useFocusTrap(paletteRef, open && mounted);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -2257,7 +2471,7 @@ function CommandPalette({
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   const q = query.trim().toLowerCase();
-  const filtered = React25__default.useMemo(() => commands.filter(
+  const filtered = React36__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 = [];
@@ -2272,7 +2486,7 @@ function CommandPalette({
     g.items.push(c);
     flat.push(c);
   });
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setActive(0);
   }, [query]);
   const run = (cmd) => {
@@ -2292,7 +2506,7 @@ function CommandPalette({
       if (cmd) run(cmd);
     }
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     const node = listRef.current?.querySelector('[data-active="true"]');
     if (node) node.scrollIntoView({ block: "nearest" });
   }, [active]);
@@ -2468,13 +2682,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__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const controlled = value !== void 0;
-  const [internal, setInternal] = React25__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [internal, setInternal] = React36__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
   const shown = controlled ? clampPrecision(String(value ?? ""), prec) : internal;
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!controlled) return;
     const raw = String(value ?? "");
     if (shown !== raw) {
@@ -2668,32 +2882,32 @@ function Select({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-select-styles", SELECT_CSS);
-  const bufferRef = React25__default.useRef("");
-  const bufferTimerRef = React25__default.useRef(null);
-  const groups = React25__default.useMemo(() => normalizeGroups2(options), [options]);
-  const flat = React25__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__default.useId();
+  const bufferRef = React36__default.useRef("");
+  const bufferTimerRef = React36__default.useRef(null);
+  const groups = React36__default.useMemo(() => normalizeGroups2(options), [options]);
+  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__default.useState(false);
-  const [render, setRender] = React25__default.useState(false);
-  const [active, setActive] = React25__default.useState(0);
-  const [coords, setCoords] = React25__default.useState(null);
-  const [query, setQuery] = React25__default.useState("");
-  const wrapRef = React25__default.useRef(null);
-  const triggerRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const listRef = React25__default.useRef(null);
-  const activeRef = React25__default.useRef(null);
-  const searchRef = React25__default.useRef(null);
+  const [open, setOpen] = React36__default.useState(false);
+  const [render, setRender] = React36__default.useState(false);
+  const [active, setActive] = React36__default.useState(0);
+  const [coords, setCoords] = React36__default.useState(null);
+  const [query, setQuery] = React36__default.useState("");
+  const wrapRef = React36__default.useRef(null);
+  const triggerRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const listRef = React36__default.useRef(null);
+  const activeRef = React36__default.useRef(null);
+  const searchRef = React36__default.useRef(null);
   const showSearch = searchable === void 0 ? flat.length > 5 : searchable;
-  const fGroups = React25__default.useMemo(() => {
+  const fGroups = React36__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__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
   const selected = flat.find((o) => o.value === current);
   const nextEnabled = (from, dir) => {
     let i = from + dir;
@@ -2703,7 +2917,7 @@ function Select({
     }
     return from;
   };
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -2719,7 +2933,7 @@ function Select({
       flip
     });
   }, [placement, minWidth, matchTriggerWidth]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -2730,7 +2944,7 @@ function Select({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const idx = flat.findIndex((o) => o.value === current);
     setActive(idx >= 0 ? idx : 0);
@@ -2746,13 +2960,13 @@ function Select({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) ensureVisible2(listRef.current, activeRef.current);
   }, [active, open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -2760,8 +2974,8 @@ function Select({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  const prevOpen = React25__default.useRef(false);
-  React25__default.useEffect(() => {
+  const prevOpen = React36__default.useRef(false);
+  React36__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();
@@ -2855,7 +3069,7 @@ function Select({
     /* @__PURE__ */ jsx("div", { className: "twc-pop__list", ref: listRef, children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
       /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
       "Loading\u2026"
-    ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React25__default.Fragment, { children: [
+    ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
       g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
       g.options.map((o) => {
         counter += 1;
@@ -3038,21 +3252,21 @@ function CurrencyField({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-curf-styles", CURF_CSS);
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const invalid = Boolean(error);
   const curControlled = currency !== void 0;
-  const [curInternal, setCurInternal] = React25__default.useState(defaultCurrency);
+  const [curInternal, setCurInternal] = React36__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__default.useState(() => clampPrecision(String(defaultValue ?? ""), prec));
+  const [valInternal, setValInternal] = React36__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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!valControlled) {
       const clamped = clampPrecision(valInternal, prec);
       if (clamped !== valInternal) {
@@ -3068,7 +3282,7 @@ function CurrencyField({
       }
     }
   }, [prec, cur, shown, value, valControlled, valInternal]);
-  const options = React25__default.useMemo(() => {
+  const options = React36__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]);
@@ -3222,13 +3436,13 @@ function Input({
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS2);
   const __twcExtra = useScopedStyles("twc-input-extra-styles", INPUT_EXTRA_CSS);
-  const autoId = React25__default.useId();
+  const autoId = React36__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__default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -3240,7 +3454,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__default.useState(false);
+  const [revealed, setRevealed] = React36__default.useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
   const suffix = rightIcon ? /* @__PURE__ */ jsx("span", { className: "twc-input__affix", children: rightIcon }) : isPassword ? /* @__PURE__ */ jsx(
     "button",
@@ -3441,27 +3655,27 @@ function MultiSelect({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-ms-styles", MULTI_CSS);
-  const groups = React25__default.useMemo(() => normalizeGroups3(options), [options]);
-  const flat = React25__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
-  const autoId = React25__default.useId();
+  const groups = React36__default.useMemo(() => normalizeGroups3(options), [options]);
+  const flat = React36__default.useMemo(() => groups.flatMap((g) => g.options), [groups]);
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__default.useState(false);
-  const [query, setQuery] = React25__default.useState("");
-  const [active, setActive] = React25__default.useState(0);
-  const [coords, setCoords] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const controlRef = React25__default.useRef(null);
-  const inputRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const listRef = React25__default.useRef(null);
-  const activeRef = React25__default.useRef(null);
-  const fGroups = React25__default.useMemo(
+  const [open, setOpen] = React36__default.useState(false);
+  const [query, setQuery] = React36__default.useState("");
+  const [active, setActive] = React36__default.useState(0);
+  const [coords, setCoords] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const controlRef = React36__default.useRef(null);
+  const inputRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const listRef = React36__default.useRef(null);
+  const activeRef = React36__default.useRef(null);
+  const fGroups = React36__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__default.useMemo(() => fGroups.flatMap((g) => g.options), [fGroups]);
+  const visible = React36__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) => {
@@ -3472,7 +3686,7 @@ function MultiSelect({
     }
     return from;
   };
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = controlRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3487,7 +3701,7 @@ function MultiSelect({
       flip
     });
   }, [placement, minWidth]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open || !portal) return;
     place();
     const onMove = () => place();
@@ -3498,7 +3712,7 @@ function MultiSelect({
       window.removeEventListener("resize", onMove);
     };
   }, [open, portal, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -3509,10 +3723,10 @@ function MultiSelect({
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setActive(0);
   }, [query]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) ensureVisible3(listRef.current, activeRef.current);
   }, [active, open]);
   function commit(next) {
@@ -3555,7 +3769,7 @@ function MultiSelect({
   const popInner = /* @__PURE__ */ jsx("div", { className: "twc-pop__list", id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": "true", children: loading ? /* @__PURE__ */ jsxs("div", { className: "twc-pop__loading", role: "status", children: [
     /* @__PURE__ */ jsx("span", { className: "twc-pop__spinner", "aria-hidden": "true" }),
     "Loading\u2026"
-  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React25__default.Fragment, { children: [
+  ] }) : visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-pop__empty", children: emptyText }) : fGroups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
     g.group ? /* @__PURE__ */ jsx("div", { className: "twc-pop__group", children: g.group }) : null,
     g.options.map((o) => {
       counter += 1;
@@ -3785,7 +3999,7 @@ function Pagination({
   }
   const jumperEnabled = showPageJumper ?? showJumper;
   const __twcStyles = useScopedStyles("twc-pagination-styles", PAGINATION_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultPage);
+  const [internal, setInternal] = React36__default.useState(defaultPage);
   const page = pageProp !== void 0 ? pageProp : internal;
   const pages = buildPages(page, total, siblings, boundaries);
   const go = (p) => {
@@ -3793,7 +4007,7 @@ function Pagination({
     if (pageProp === void 0) setInternal(p);
     onChange?.(p);
   };
-  const [jump, setJump] = React25__default.useState("");
+  const [jump, setJump] = React36__default.useState("");
   const submitJump = () => {
     const n = parseInt(jump, 10);
     if (!Number.isNaN(n)) go(Math.min(Math.max(n, 1), total));
@@ -3876,13 +4090,13 @@ function Tooltip({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-tooltip-styles", TOOLTIP_CSS);
-  const id = React25__default.useId();
-  const [show, setShow] = React25__default.useState(false);
-  const [coords, setCoords] = React25__default.useState(null);
-  const timer = React25__default.useRef(null);
-  const closeTimer = React25__default.useRef(null);
-  const wrapRef = React25__default.useRef(null);
-  const tipRef = React25__default.useRef(null);
+  const id = React36__default.useId();
+  const [show, setShow] = React36__default.useState(false);
+  const [coords, setCoords] = React36__default.useState(null);
+  const timer = React36__default.useRef(null);
+  const closeTimer = React36__default.useRef(null);
+  const wrapRef = React36__default.useRef(null);
+  const tipRef = React36__default.useRef(null);
   const open = () => {
     clearTimeout(closeTimer.current);
     clearTimeout(timer.current);
@@ -3896,11 +4110,11 @@ function Tooltip({
   const cancelClose = () => {
     clearTimeout(closeTimer.current);
   };
-  React25__default.useEffect(() => () => {
+  React36__default.useEffect(() => () => {
     clearTimeout(timer.current);
     clearTimeout(closeTimer.current);
   }, []);
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = wrapRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -3923,10 +4137,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     place();
   }, [place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!show) return void 0;
     place();
     const onMove = () => place();
@@ -3937,7 +4151,7 @@ function Tooltip({
       window.removeEventListener("resize", onMove);
     };
   }, [show, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!show) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -3949,7 +4163,7 @@ function Tooltip({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [show]);
   const describedBy = show ? id : void 0;
-  const trigger = React25__default.isValidElement(children) && children.type !== React25__default.Fragment ? React25__default.cloneElement(children, {
+  const trigger = React36__default.isValidElement(children) && children.type !== React36__default.Fragment ? React36__default.cloneElement(children, {
     "aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0
   }) : /* @__PURE__ */ jsx("span", { "aria-describedby": describedBy, children });
   return /* @__PURE__ */ jsxs(
@@ -4553,9 +4767,9 @@ function runDatatableQuery(rows, query, options = {}) {
   return { rows: page, total, filtered: out };
 }
 function useFloating() {
-  const [pos, setPos] = React25__default.useState(null);
-  const cfg = React25__default.useRef(null);
-  const place = React25__default.useCallback(() => {
+  const [pos, setPos] = React36__default.useState(null);
+  const cfg = React36__default.useRef(null);
+  const place = React36__default.useCallback(() => {
     const c = cfg.current;
     if (!c || !c.el || !c.el.isConnected) return null;
     const r = c.el.getBoundingClientRect();
@@ -4566,17 +4780,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__default.useCallback((el, align = "left", width = 220) => {
+  const open = React36__default.useCallback((el, align = "left", width = 220) => {
     cfg.current = { el, align, width };
     const p = place();
     if (p) setPos(p);
   }, [place]);
-  const close = React25__default.useCallback(() => {
+  const close = React36__default.useCallback(() => {
     cfg.current = null;
     setPos(null);
   }, []);
   const isOpen = pos != null;
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!isOpen) return void 0;
     const update = () => {
       const p = place();
@@ -4600,9 +4814,9 @@ function Caret({ pos }) {
   return /* @__PURE__ */ jsx("span", { className: "twc-dt__caret", style: { left } });
 }
 function EditCell({ col, value, options, onChange, onCommit, onCommitValue, onCancel, onKeyDown }) {
-  const ref = React25__default.useRef(null);
+  const ref = React36__default.useRef(null);
   const isSelect = col.editType === "select" || options && col.editType !== "text";
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (isSelect) {
       const t = setTimeout(() => ref.current?.querySelector(".twc-sel__trigger")?.click(), 0);
       return () => clearTimeout(t);
@@ -4807,7 +5021,7 @@ function Datatable({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-dt-styles", DT_CSS);
-  const cols = React25__default.useMemo(() => {
+  const cols = React36__default.useMemo(() => {
     const out = columns.map((c) => {
       const isActions = c.type === "actions";
       return {
@@ -4842,7 +5056,7 @@ function Datatable({
     }
     return out;
   }, [columns, rowPinning]);
-  const _autoKey = React25__default.useRef();
+  const _autoKey = React36__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;
@@ -4857,17 +5071,17 @@ function Datatable({
     }
     return i;
   });
-  const [sort, setSort] = React25__default.useState(null);
-  const [filters, setFilters] = React25__default.useState([]);
-  const [hidden, setHidden] = React25__default.useState(() => /* @__PURE__ */ new Set());
-  const [showRowNum, setShowRowNum] = React25__default.useState(rowNumbers);
-  const [wrapped, setWrapped] = React25__default.useState(() => new Set((columns || []).filter((c) => c.wrapText).map((c) => c.field)));
+  const [sort, setSort] = React36__default.useState(null);
+  const [filters, setFilters] = React36__default.useState([]);
+  const [hidden, setHidden] = React36__default.useState(() => /* @__PURE__ */ new Set());
+  const [showRowNum, setShowRowNum] = React36__default.useState(rowNumbers);
+  const [wrapped, setWrapped] = React36__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__default.useState(() => {
+  const [pins, setPins] = React36__default.useState(() => {
     const left = [], right = [];
     columns.forEach((c) => {
       if (c.pinned === "left") left.push(c.field);
@@ -4875,34 +5089,34 @@ function Datatable({
     });
     return { left, right };
   });
-  const [density, setDensity] = React25__default.useState(densityProp);
-  const [quick, setQuick] = React25__default.useState("");
-  const [selected, setSelected] = React25__default.useState(() => /* @__PURE__ */ new Set());
-  const [activeRow, setActiveRow] = React25__default.useState(null);
-  const [activeCell, setActiveCell] = React25__default.useState(null);
-  const [page, setPage] = React25__default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React25__default.useState(pageSize > 0 ? pageSize : 10);
-  const [colQuery, setColQuery] = React25__default.useState("");
-  const [widths, setWidths] = React25__default.useState({});
-  const [order, setOrder] = React25__default.useState(() => columns.map((c) => c.field));
-  const [drag, setDrag] = React25__default.useState({ from: null, over: null, after: false });
-  const [aggOn, setAggOn] = React25__default.useState(showAggregation);
-  const [focus, setFocus] = React25__default.useState({ r: 0, c: 0 });
-  const gridRef = React25__default.useRef(null);
-  const [groupBy, setGroupBy] = React25__default.useState(rowGrouping || []);
-  const [collapsed, setCollapsed] = React25__default.useState(() => /* @__PURE__ */ new Set());
-  const [pinnedRows, setPinnedRows] = React25__default.useState({ top: [], bottom: [] });
-  const [headH, setHeadH] = React25__default.useState(41);
-  const theadRef = React25__default.useRef(null);
-  const [rowOrder, setRowOrder] = React25__default.useState(null);
-  const [rowHeights, setRowHeights] = React25__default.useState({});
-  const [rowDrag, setRowDrag] = React25__default.useState({ from: null, over: null, after: false });
-  const [rowGrab, setRowGrab] = React25__default.useState(null);
-  const [reorderMsg, setReorderMsg] = React25__default.useState("");
-  const rowFocusRef = React25__default.useRef(null);
-  const rootRef = React25__default.useRef(null);
-  const [compact, setCompact] = React25__default.useState(false);
-  React25__default.useEffect(() => {
+  const [density, setDensity] = React36__default.useState(densityProp);
+  const [quick, setQuick] = React36__default.useState("");
+  const [selected, setSelected] = React36__default.useState(() => /* @__PURE__ */ new Set());
+  const [activeRow, setActiveRow] = React36__default.useState(null);
+  const [activeCell, setActiveCell] = React36__default.useState(null);
+  const [page, setPage] = React36__default.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React36__default.useState(pageSize > 0 ? pageSize : 10);
+  const [colQuery, setColQuery] = React36__default.useState("");
+  const [widths, setWidths] = React36__default.useState({});
+  const [order, setOrder] = React36__default.useState(() => columns.map((c) => c.field));
+  const [drag, setDrag] = React36__default.useState({ from: null, over: null, after: false });
+  const [aggOn, setAggOn] = React36__default.useState(showAggregation);
+  const [focus, setFocus] = React36__default.useState({ r: 0, c: 0 });
+  const gridRef = React36__default.useRef(null);
+  const [groupBy, setGroupBy] = React36__default.useState(rowGrouping || []);
+  const [collapsed, setCollapsed] = React36__default.useState(() => /* @__PURE__ */ new Set());
+  const [pinnedRows, setPinnedRows] = React36__default.useState({ top: [], bottom: [] });
+  const [headH, setHeadH] = React36__default.useState(41);
+  const theadRef = React36__default.useRef(null);
+  const [rowOrder, setRowOrder] = React36__default.useState(null);
+  const [rowHeights, setRowHeights] = React36__default.useState({});
+  const [rowDrag, setRowDrag] = React36__default.useState({ from: null, over: null, after: false });
+  const [rowGrab, setRowGrab] = React36__default.useState(null);
+  const [reorderMsg, setReorderMsg] = React36__default.useState("");
+  const rowFocusRef = React36__default.useRef(null);
+  const rootRef = React36__default.useRef(null);
+  const [compact, setCompact] = React36__default.useState(false);
+  React36__default.useEffect(() => {
     const el = rootRef.current;
     if (!el) return void 0;
     const measure = () => setCompact((el.clientWidth || 0) < 720);
@@ -4915,11 +5129,11 @@ function Datatable({
       else if (typeof window !== "undefined") window.removeEventListener("resize", measure);
     };
   }, []);
-  const scrollRef = React25__default.useRef(null);
-  const [scrollTop, setScrollTop] = React25__default.useState(0);
-  const [viewportH, setViewportH] = React25__default.useState(0);
-  const [pivotOn, setPivotOn] = React25__default.useState(pivotMode);
-  const [aggConfig, setAggConfig] = React25__default.useState(() => {
+  const scrollRef = React36__default.useRef(null);
+  const [scrollTop, setScrollTop] = React36__default.useState(0);
+  const [viewportH, setViewportH] = React36__default.useState(0);
+  const [pivotOn, setPivotOn] = React36__default.useState(pivotMode);
+  const [aggConfig, setAggConfig] = React36__default.useState(() => {
     const m = {};
     (columns || []).forEach((c) => {
       if (typeof c.aggregation === "string") m[c.field] = c.aggregation;
@@ -4927,13 +5141,13 @@ function Datatable({
     return m;
   });
   const aggOf = (c) => aggConfig[c.field] || (typeof c.aggregation === "function" ? c.aggregation : null);
-  const [pivotConfig, setPivotConfig] = React25__default.useState(() => ({
+  const [pivotConfig, setPivotConfig] = React36__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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setOrder((prev) => {
       const fields = columns.map((c) => c.field);
       const kept = prev.filter((f) => fields.includes(f));
@@ -4941,32 +5155,32 @@ function Datatable({
       return [...kept, ...added];
     });
   }, [columns]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setDensity(densityProp);
   }, [densityProp]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     setAggOn(showAggregation);
   }, [showAggregation]);
   const rowGroupingKey = (rowGrouping || []).join("\0");
-  const rowGroupingKeyRef = React25__default.useRef(rowGroupingKey);
-  React25__default.useEffect(() => {
+  const rowGroupingKeyRef = React36__default.useRef(rowGroupingKey);
+  React36__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__default.useState(null);
+  const [colMenu, setColMenu] = React36__default.useState(null);
   const [menuPos, openMenu, closeMenu] = useFloating();
-  const [panel, setPanel] = React25__default.useState(null);
+  const [panel, setPanel] = React36__default.useState(null);
   const [panelPos, openPanel, closePanel] = useFloating();
-  const [rowMenu, setRowMenu] = React25__default.useState(null);
+  const [rowMenu, setRowMenu] = React36__default.useState(null);
   const [rowMenuPos, openRowMenu, closeRowMenu] = useFloating();
-  const [exportOpen, setExportOpen] = React25__default.useState(false);
+  const [exportOpen, setExportOpen] = React36__default.useState(false);
   const [exportPos, openExport, closeExport] = useFloating();
-  const menuTriggerRef = React25__default.useRef(null);
-  const colMenuRef = React25__default.useRef(null);
-  const rowMenuRef = React25__default.useRef(null);
-  const exportMenuRef = React25__default.useRef(null);
+  const menuTriggerRef = React36__default.useRef(null);
+  const colMenuRef = React36__default.useRef(null);
+  const rowMenuRef = React36__default.useRef(null);
+  const exportMenuRef = React36__default.useRef(null);
   function focusFirstItem(container) {
     if (!container) return;
     const first = container.querySelector('[role="menuitem"]:not([disabled])');
@@ -5005,16 +5219,16 @@ function Datatable({
       restoreTriggerFocus();
     }
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (colMenu) focusFirstItem(colMenuRef.current);
   }, [colMenu]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (rowMenu) focusFirstItem(rowMenuRef.current);
   }, [rowMenu]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (exportOpen) focusFirstItem(exportMenuRef.current);
   }, [exportOpen]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!colMenu && !panel && !rowMenu) return;
     const closeAll = () => {
       setColMenu(null);
@@ -5037,7 +5251,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [colMenu, panel, rowMenu]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!exportOpen) return;
     const close = () => {
       setExportOpen(false);
@@ -5056,9 +5270,9 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [exportOpen]);
-  const colByField = React25__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
+  const colByField = React36__default.useMemo(() => Object.fromEntries(cols.map((c) => [c.field, c])), [cols]);
   const visibleCols = cols.filter((c) => !hidden.has(c.field));
-  const ordered = React25__default.useMemo(() => {
+  const ordered = React36__default.useMemo(() => {
     const orderIdx = (f) => {
       const i = order.indexOf(f);
       return i === -1 ? 9999 : i;
@@ -5093,7 +5307,7 @@ function Datatable({
     }
     return {};
   };
-  const processed = React25__default.useMemo(() => {
+  const processed = React36__default.useMemo(() => {
     if (serverMode) {
       if (rowOrder) {
         const idx = new Map(rowOrder.map((k, i) => [k, i]));
@@ -5132,10 +5346,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (page > totalPages - 1) setPage(0);
   }, [totalPages]);
-  const activeGroupBy = React25__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
+  const activeGroupBy = React36__default.useMemo(() => groupBy.filter((f) => colByField[f]), [groupBy, colByField]);
   function subtotalText(rowsIn) {
     const parts = [];
     for (const c of ordered) {
@@ -5162,7 +5376,7 @@ function Datatable({
     if (agg === "max") return Math.max(...nums);
     return null;
   }
-  const displayItems = React25__default.useMemo(() => {
+  const displayItems = React36__default.useMemo(() => {
     if (!activeGroupBy.length) return null;
     const build = (rowsIn, depth, prefix) => {
       if (depth >= activeGroupBy.length) return rowsIn.map((row) => ({ kind: "leaf", row }));
@@ -5204,7 +5418,7 @@ function Datatable({
       return { top, bottom };
     });
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!rowPinning) return;
     const measure = () => {
       if (theadRef.current) setHeadH(theadRef.current.offsetHeight || 41);
@@ -5218,12 +5432,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__default.useMemo(() => {
+  const keyIndex = React36__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     leafRows.forEach((r, i) => m.set(keyOf(r, i), i));
     return m;
   }, [leafRows]);
-  const keyIndexMid = React25__default.useMemo(() => {
+  const keyIndexMid = React36__default.useMemo(() => {
     const m = /* @__PURE__ */ new Map();
     middleRows.forEach((r, i) => m.set(keyOf(r, keyIndex.get(keyOf(r)) ?? i), i));
     return m;
@@ -5308,7 +5522,7 @@ function Datatable({
       setReorderMsg("Reorder cancelled.");
     }
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (rowFocusRef.current == null) return;
     const key = rowFocusRef.current;
     rowFocusRef.current = null;
@@ -5320,7 +5534,7 @@ function Datatable({
   });
   const estRowH = rowHeight ?? (density === "compact" ? 36 : density === "comfortable" ? 56 : 44);
   const virtualizing = virtualized && !paginated && !activeGroupBy.length && !loading;
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5330,13 +5544,13 @@ function Datatable({
     if (ro) ro.observe(el);
     return () => ro && ro.disconnect();
   }, [virtualizing, height]);
-  const onScrollVirtual = React25__default.useCallback((e) => {
+  const onScrollVirtual = React36__default.useCallback((e) => {
     setScrollTop(e.currentTarget.scrollTop);
   }, []);
   const vh = viewportH || (typeof height === "number" ? height : 440);
-  const rowHRef = React25__default.useRef(/* @__PURE__ */ new Map());
-  const [measureTick, setMeasureTick] = React25__default.useState(0);
-  const offsets = React25__default.useMemo(() => {
+  const rowHRef = React36__default.useRef(/* @__PURE__ */ new Map());
+  const [measureTick, setMeasureTick] = React36__default.useState(0);
+  const offsets = React36__default.useMemo(() => {
     if (!virtualizing) return null;
     const total = middleRows.length;
     const arr = new Float64Array(total + 1);
@@ -5346,7 +5560,7 @@ function Datatable({
     }
     return arr;
   }, [virtualizing, middleRows, estRowH, measureTick]);
-  const vWindow = React25__default.useMemo(() => {
+  const vWindow = React36__default.useMemo(() => {
     if (!virtualizing || !offsets) return null;
     const total = middleRows.length;
     const totalH = offsets[total];
@@ -5375,7 +5589,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__default.useLayoutEffect(() => {
+  React36__default.useLayoutEffect(() => {
     if (!virtualizing) return;
     const el = scrollRef.current;
     if (!el) return;
@@ -5390,9 +5604,9 @@ function Datatable({
     }
     if (changed) setMeasureTick((t) => t + 1);
   });
-  const onServerChangeRef = React25__default.useRef(onServerChange);
+  const onServerChangeRef = React36__default.useRef(onServerChange);
   onServerChangeRef.current = onServerChange;
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!serverMode) return;
     const t = setTimeout(() => {
       onServerChangeRef.current?.({
@@ -5427,7 +5641,7 @@ function Datatable({
       return n;
     });
   }
-  const movableMidFields = React25__default.useMemo(
+  const movableMidFields = React36__default.useMemo(
     () => ordered.filter((c) => !pins.left.includes(c.field) && !pins.right.includes(c.field) && c.reorderable !== false).map((c) => c.field),
     [ordered, pins]
   );
@@ -5458,7 +5672,7 @@ function Datatable({
     }
     return [...set].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
   }
-  const [resizing, setResizing] = React25__default.useState(false);
+  const [resizing, setResizing] = React36__default.useState(false);
   function startResize(e, field) {
     e.preventDefault();
     e.stopPropagation();
@@ -5565,7 +5779,7 @@ function Datatable({
     if (!agg) return null;
     if (aggregationValues && col.field in aggregationValues) {
       const pre = aggregationValues[col.field];
-      if (pre && typeof pre === "object" && !React25__default.isValidElement(pre)) {
+      if (pre && typeof pre === "object" && !React36__default.isValidElement(pre)) {
         if (typeof agg === "string" && agg in pre) return pre[agg];
       } else {
         return pre;
@@ -5683,14 +5897,14 @@ function Datatable({
       focusCell(r, c);
     }
   }
-  React25__default.useEffect(() => {
+  React36__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__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
+  const selectedRows = React36__default.useMemo(() => rows.filter((r, i) => selected.has(keyOf(r, i))), [rows, selected]);
   function clearSelection() {
     setSelected(/* @__PURE__ */ new Set());
   }
-  const [editing, setEditing] = React25__default.useState(null);
+  const [editing, setEditing] = React36__default.useState(null);
   const isColEditable = (c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false));
   function beginEdit(rowK, col, row) {
     if (!isColEditable(col)) return;
@@ -5725,17 +5939,17 @@ function Datatable({
       cancelEdit();
     }
   }
-  const batchEditableCols = React25__default.useMemo(
+  const batchEditableCols = React36__default.useMemo(
     () => cols.filter((c) => c.type !== "actions" && (c.editable ?? (editMode && c.editable !== false))),
     [cols, editMode]
   );
-  const [batchEdit, setBatchEdit] = React25__default.useState(null);
+  const [batchEdit, setBatchEdit] = React36__default.useState(null);
   const [batchEditPos, openBatchEdit, closeBatchEdit] = useFloating();
   function openBatchEditor(el) {
     setBatchEdit({ fields: {}, values: {} });
     openBatchEdit(el, "left", 320);
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!batchEdit) return;
     const close = () => {
       setBatchEdit(null);
@@ -5754,7 +5968,7 @@ function Datatable({
       document.removeEventListener("keydown", onKey);
     };
   }, [batchEdit]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (batchEdit && selected.size === 0) {
       setBatchEdit(null);
       closeBatchEdit();
@@ -5791,7 +6005,7 @@ function Datatable({
     setBatchEdit(null);
     closeBatchEdit();
   }
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!editing) return;
     const onDown = (e) => {
       if (e.target.closest(".twc-dt__editor-wrap") || e.target.closest(".twc-pop")) return;
@@ -7314,23 +7528,24 @@ function DatePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS3);
   const __twcStyles1 = useScopedStyles("twc-datepicker-styles", DATEPICKER_CSS);
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const selected = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__default.useState(false);
-  const [view, setView] = React25__default.useState(selected || /* @__PURE__ */ new Date());
-  const [mode, setMode] = React25__default.useState("days");
-  const [focusDate, setFocusDate] = React25__default.useState(null);
-  const [coords, setCoords] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const triggerRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const gridRef = React25__default.useRef(null);
+  const [open, setOpen] = React36__default.useState(false);
+  const [view, setView] = React36__default.useState(selected || /* @__PURE__ */ new Date());
+  const [mode, setMode] = React36__default.useState("days");
+  const [focusDate, setFocusDate] = React36__default.useState(null);
+  const [focusMonth, setFocusMonth] = React36__default.useState(null);
+  const [coords, setCoords] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const triggerRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const gridRef = React36__default.useRef(null);
   const POP_W = 280;
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7341,7 +7556,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7352,7 +7567,7 @@ function DatePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     setView(selected || /* @__PURE__ */ new Date());
     setMode("days");
@@ -7372,21 +7587,10 @@ function DatePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open]);
-  const prevOpen = React25__default.useRef(false);
-  React25__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__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
-  const monthsShort = React25__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
-  const dows = React25__default.useMemo(
+  useFocusTrap(popRef, open && !!coords, { initialFocus: () => gridRef.current?.querySelector('[tabindex="0"]') });
+  const months = React36__default.useMemo(() => locale === void 0 ? MONTHS : monthNames(locale), [locale]);
+  const monthsShort = React36__default.useMemo(() => locale === void 0 ? MONTHS.map((n) => n.slice(0, 3)) : monthShortNames(locale), [locale]);
+  const dows = React36__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW[(i + weekStartsOn) % 7]) : weekdayNames(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7414,10 +7618,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open || mode !== "days" || !focusDate) return;
     gridRef.current?.querySelector(`[data-key="${keyOf(focusDate)}"]`)?.focus();
   }, [focusDate, open, mode]);
+  React36__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;
@@ -7498,12 +7726,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__ */ jsxs("div", { className: "twc-dp__head", children: [
               /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) }) }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "twc-dp__title", onClick: () => setMode(mode === "days" ? "months" : "days"), children: mode === "days" ? `${months[m]} ${y}` : y }),
+              /* @__PURE__ */ 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__ */ jsx("span", { className: "twc-dp__sr", "aria-live": "polite", children: mode === "days" ? `${months[m]} ${y}` : y }),
               /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
             ] }),
@@ -7531,11 +7763,14 @@ function DatePicker({
                   i
                 );
               })
-            ] }) : /* @__PURE__ */ jsx("div", { className: "twc-dp__months", children: monthsShort.map((name, i) => /* @__PURE__ */ jsx(
+            ] }) : /* @__PURE__ */ jsx("div", { className: "twc-dp__months", ref: gridRef, onKeyDown: onMonthsKeyDown, role: "grid", children: monthsShort.map((name, i) => /* @__PURE__ */ 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));
@@ -7642,23 +7877,25 @@ function DateRangePicker({
 }) {
   const __twcStyles0 = useScopedStyles("twc-field-styles", FIELD_CSS4);
   const __twcStyles1 = useScopedStyles("twc-drp-styles", RANGE_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const range = value !== void 0 ? value : internal;
-  const [open, setOpen] = React25__default.useState(false);
-  const [view, setView] = React25__default.useState(range.start || /* @__PURE__ */ new Date());
-  const [hover, setHover] = React25__default.useState(null);
-  const [coords, setCoords] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const triggerRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const labelId = React25__default.useId();
+  const [open, setOpen] = React36__default.useState(false);
+  const [view, setView] = React36__default.useState(range.start || /* @__PURE__ */ new Date());
+  const [hover, setHover] = React36__default.useState(null);
+  const [focusDate, setFocusDate] = React36__default.useState(null);
+  const [coords, setCoords] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const triggerRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const gridRef = React36__default.useRef(null);
+  const labelId = React36__default.useId();
   const descId = `${labelId}-desc`;
   const invalid = Boolean(error);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const POP_W = 420;
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const el = triggerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -7669,7 +7906,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     place();
     const onMove = () => place();
@@ -7680,7 +7917,7 @@ function DateRangePicker({
       window.removeEventListener("resize", onMove);
     };
   }, [open, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (wrapRef.current && wrapRef.current.contains(e.target)) return;
@@ -7701,7 +7938,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__default.useEffect(() => {
+    if (!open) {
+      setFocusDate(null);
+      setHover(null);
+    }
+  }, [open]);
+  React36__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) {
@@ -7720,8 +8002,8 @@ function DateRangePicker({
     setView(start);
     setOpen(false);
   };
-  const months = React25__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
-  const dows = React25__default.useMemo(
+  const months = React36__default.useMemo(() => locale === void 0 ? MONTHS2 : monthNames2(locale), [locale]);
+  const dows = React36__default.useMemo(
     () => locale === void 0 ? Array.from({ length: 7 }, (_, i) => DOW2[(i + weekStartsOn) % 7]) : weekdayNames2(locale, weekStartsOn),
     [locale, weekStartsOn]
   );
@@ -7791,6 +8073,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: [
@@ -7810,7 +8093,7 @@ function DateRangePicker({
                 ] }),
                 /* @__PURE__ */ jsx("button", { type: "button", className: "twc-drp__nav", "aria-label": "Next month", onClick: () => setView(new Date(y, m + 1, 1)), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) }) })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "twc-drp__grid", children: [
+              /* @__PURE__ */ jsxs("div", { className: "twc-drp__grid", ref: gridRef, onKeyDown: onGridKeyDown, role: "grid", children: [
                 dows.map((d, i) => /* @__PURE__ */ 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);
@@ -7822,6 +8105,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),
@@ -7908,14 +8193,14 @@ function Dialog({
   className = "",
   ...rest
 }) {
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const dialogRef = React25__default.useRef(null);
+  const dialogRef = React36__default.useRef(null);
   const __twcStyles = useScopedStyles("twc-dialog-styles", DIALOG_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__default.useState(open);
-  React25__default.useEffect(() => {
+  const [mounted, setMounted] = React36__default.useState(open);
+  React36__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -7926,7 +8211,7 @@ function Dialog({
   useScrollLock(open);
   useInertBackground(dialogRef, open && mounted);
   useFocusTrap(dialogRef, open && mounted);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8073,14 +8358,14 @@ function Drawer({
   style,
   ...rest
 }) {
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const titleId = `${autoId}-title`;
   const descId = `${autoId}-desc`;
-  const panelRef = React25__default.useRef(null);
+  const panelRef = React36__default.useRef(null);
   const __twcStyles = useScopedStyles("twc-drawer-styles", DRAWER_CSS);
   const renderPortal = usePortal();
-  const [mounted, setMounted] = React25__default.useState(open);
-  React25__default.useEffect(() => {
+  const [mounted, setMounted] = React36__default.useState(open);
+  React36__default.useEffect(() => {
     if (open) {
       setMounted(true);
       return;
@@ -8091,7 +8376,7 @@ function Drawer({
   useScrollLock(open);
   useInertBackground(panelRef, open && mounted);
   useFocusTrap(panelRef, open && mounted);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -8180,11 +8465,11 @@ function Field({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-field-styles", FIELD_CSS5);
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const hasMsg = Boolean(error || hint);
-  const control = React25__default.isValidElement(children) ? React25__default.cloneElement(children, {
+  const control = React36__default.isValidElement(children) ? React36__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;
@@ -8276,11 +8561,11 @@ function FileUpload({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-upload-styles", UPLOAD_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const files = value !== void 0 ? value : internal;
-  const [drag, setDrag] = React25__default.useState(false);
-  const inputRef = React25__default.useRef(null);
-  const autoId = React25__default.useId();
+  const [drag, setDrag] = React36__default.useState(false);
+  const inputRef = React36__default.useRef(null);
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const invalid = Boolean(error);
@@ -8503,15 +8788,15 @@ function Kanban({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-kanban-styles", KANBAN_CSS);
-  const [internal, setInternal] = React25__default.useState(cards ?? defaultCards ?? []);
+  const [internal, setInternal] = React36__default.useState(cards ?? defaultCards ?? []);
   const items = cards !== void 0 ? cards : internal;
-  const [drag, setDrag] = React25__default.useState(null);
-  const [overCol, setOverCol] = React25__default.useState(null);
-  const [grab, setGrab] = React25__default.useState(null);
-  const [announce, setAnnounce] = React25__default.useState("");
-  const rootRef = React25__default.useRef(null);
-  const focusIdRef = React25__default.useRef(null);
-  React25__default.useEffect(() => {
+  const [drag, setDrag] = React36__default.useState(null);
+  const [overCol, setOverCol] = React36__default.useState(null);
+  const [grab, setGrab] = React36__default.useState(null);
+  const [announce, setAnnounce] = React36__default.useState("");
+  const rootRef = React36__default.useRef(null);
+  const focusIdRef = React36__default.useRef(null);
+  React36__default.useEffect(() => {
     if (focusIdRef.current == null) return void 0;
     const raf = requestAnimationFrame(() => {
       const id = focusIdRef.current;
@@ -8660,7 +8945,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;
@@ -8672,7 +8957,7 @@ function List({ items, plain = false, emptyMessage, className = "", ...rest }) {
     /* @__PURE__ */ jsxs("ul", { className: `twc-list ${className}`, role: "list", "data-plain": plain || void 0, ...rest, children: [
       __twcStyles,
       items.length === 0 ? /* @__PURE__ */ jsx("li", { role: "presentation", style: { display: "contents" }, children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
@@ -8728,7 +9013,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;
@@ -8751,9 +9036,9 @@ function Navbar({
   return /* @__PURE__ */ jsxs("header", { className: `twc-navbar ${className}`, "data-sticky": sticky || void 0, ...rest, children: [
     __twcStyles,
     onMenuClick ? /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" }) }) }) : null,
-    brand ? brandHref ? /* @__PURE__ */ jsx("a", { className: "twc-navbar__brand", href: safeHref4(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
+    brand ? brandHref ? /* @__PURE__ */ jsx("a", { className: "twc-navbar__brand", href: safeHref5(brandHref), children: brand }) : onBrandClick ? /* @__PURE__ */ jsx("button", { type: "button", className: "twc-navbar__brand", onClick: onBrandClick, children: brand }) : /* @__PURE__ */ jsx("span", { className: "twc-navbar__brand", children: brand }) : null,
     /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
         l.icon,
         l.label
@@ -8821,21 +9106,21 @@ function Popover({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-popover-styles", POPOVER_CSS);
-  const [openState, setOpenState] = React25__default.useState(defaultOpen);
-  const [render, setRender] = React25__default.useState(false);
-  const [pos, setPos] = React25__default.useState(null);
-  const wrapRef = React25__default.useRef(null);
-  const popRef = React25__default.useRef(null);
-  const popId = React25__default.useId();
+  const [openState, setOpenState] = React36__default.useState(defaultOpen);
+  const [render, setRender] = React36__default.useState(false);
+  const [pos, setPos] = React36__default.useState(null);
+  const wrapRef = React36__default.useRef(null);
+  const popRef = React36__default.useRef(null);
+  const popId = React36__default.useId();
   const controlled = openProp !== void 0;
   const open = controlled ? !!openProp : openState;
-  const openRef = React25__default.useRef(open);
+  const openRef = React36__default.useRef(open);
   openRef.current = open;
-  const controlledRef = React25__default.useRef(controlled);
+  const controlledRef = React36__default.useRef(controlled);
   controlledRef.current = controlled;
-  const onOpenChangeRef = React25__default.useRef(onOpenChange);
+  const onOpenChangeRef = React36__default.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  const setOpen = React25__default.useCallback((next) => {
+  const setOpen = React36__default.useCallback((next) => {
     const value = typeof next === "function" ? next(openRef.current) : next;
     if (value === openRef.current) return;
     if (!controlledRef.current) setOpenState(value);
@@ -8843,7 +9128,7 @@ function Popover({
   }, []);
   const toggle = () => setOpen((o) => !o);
   const RD = { createPortal: typeof createPortal === "function" ? createPortal : typeof window !== "undefined" && window.ReactDOM && window.ReactDOM.createPortal };
-  const place = React25__default.useCallback(() => {
+  const place = React36__default.useCallback(() => {
     const t = wrapRef.current;
     if (!t) return;
     const r = t.getBoundingClientRect();
@@ -8880,7 +9165,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__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!open) return;
     place();
     const onMove = () => place();
@@ -8903,7 +9188,7 @@ function Popover({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, place]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (open) {
       setRender(true);
       return;
@@ -8911,12 +9196,12 @@ function Popover({
     const t = setTimeout(() => setRender(false), 170);
     return () => clearTimeout(t);
   }, [open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (render && open) place();
   }, [render, place]);
-  const restoreRef = React25__default.useRef(null);
-  const needFocusRef = React25__default.useRef(false);
-  React25__default.useEffect(() => {
+  const restoreRef = React36__default.useRef(null);
+  const needFocusRef = React36__default.useRef(false);
+  React36__default.useEffect(() => {
     if (open) {
       restoreRef.current = document.activeElement;
       needFocusRef.current = true;
@@ -8951,7 +9236,7 @@ function Popover({
       ]
     }
   ) : null;
-  const triggerEl = React25__default.isValidElement(trigger) ? React25__default.cloneElement(trigger, {
+  const triggerEl = React36__default.isValidElement(trigger) ? React36__default.cloneElement(trigger, {
     onClick: (e) => {
       trigger.props.onClick?.(e);
       toggle();
@@ -8994,7 +9279,7 @@ function Progress({
   className = "",
   ...rest
 }) {
-  const labelId = React25__default.useId();
+  const labelId = React36__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); }
@@ -9117,7 +9402,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__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -9187,13 +9472,13 @@ function RadioGroup({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-radio-group-styles", RADIO_GROUP_CSS);
-  const autoId = React25__default.useId();
+  const autoId = React36__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__default.useState(defaultValue);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
   const current = value !== void 0 ? value : internal;
   const select = (v) => {
     if (value === void 0) setInternal(v);
@@ -9214,10 +9499,10 @@ function RadioGroup({
       tone
     },
     o.value
-  )) : React25__default.Children.map(children, (child) => {
-    if (!React25__default.isValidElement(child)) return child;
+  )) : React36__default.Children.map(children, (child) => {
+    if (!React36__default.isValidElement(child)) return child;
     const v = child.props.value;
-    return React25__default.cloneElement(child, {
+    return React36__default.cloneElement(child, {
       name: child.props.name ?? groupName,
       checked: child.props.checked ?? current === v,
       onChange: child.props.onChange ?? (() => select(v)),
@@ -9297,12 +9582,12 @@ function Rating({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-rating-styles", RATING_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultValue);
-  const [hover, setHover] = React25__default.useState(0);
+  const [internal, setInternal] = React36__default.useState(defaultValue);
+  const [hover, setHover] = React36__default.useState(0);
   const val = value !== void 0 ? value : internal;
   const shown = hover || val;
   const interactive = !readOnly && !disabled;
-  const btnRefs = React25__default.useRef([]);
+  const btnRefs = React36__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)) {
@@ -9489,24 +9774,24 @@ function Sidebar({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-sidebar-styles", SIDEBAR_CSS);
-  const navId = React25__default.useId();
-  const panelRef = React25__default.useRef(null);
+  const navId = React36__default.useId();
+  const panelRef = React36__default.useRef(null);
   const renderPortal = usePortal();
-  const [internal, setInternal] = React25__default.useState(defaultCollapsed);
+  const [internal, setInternal] = React36__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__default.useState(defaultOpen);
+  const [openInternal, setOpenInternal] = React36__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__default.useState(open);
-  React25__default.useEffect(() => {
+  const [mounted, setMounted] = React36__default.useState(open);
+  React36__default.useEffect(() => {
     if (!overlay) return void 0;
     if (open) {
       setMounted(true);
@@ -9515,7 +9800,7 @@ function Sidebar({
     const t = setTimeout(() => setMounted(false), 170);
     return () => clearTimeout(t);
   }, [overlay, open]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -9524,7 +9809,7 @@ function Sidebar({
     };
   }, [overlay, open]);
   useFocusTrap(panelRef, overlay && open && mounted);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!overlay || !open) return void 0;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -9536,13 +9821,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__ */ jsxs(Fragment, { children: [
       it.icon ? /* @__PURE__ */ jsx("span", { className: "twc-sidebar__ic", "aria-hidden": "true", children: it.icon }) : labelStr != null ? /* @__PURE__ */ jsx("span", { className: "twc-sidebar__ic twc-sidebar__ic--initial", "aria-hidden": "true", children: labelStr.charAt(0) }) : null,
@@ -9576,7 +9861,7 @@ function Sidebar({
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     __twcStyles,
     brand ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__head", children: /* @__PURE__ */ jsx("span", { className: "twc-sidebar__brand", children: brand }) }) : null,
-    /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React25__default.Fragment, { children: [
+    /* @__PURE__ */ jsx("nav", { id: navId, className: "twc-sidebar__nav", "aria-label": navLabel, children: groups.map((g, gi) => /* @__PURE__ */ jsxs(React36__default.Fragment, { children: [
       g.section != null ? /* @__PURE__ */ jsx("div", { className: "twc-sidebar__section", id: g.sid, children: g.section }) : null,
       /* @__PURE__ */ jsx("ul", { className: "twc-sidebar__list", ...g.section != null ? { "aria-labelledby": g.sid } : {}, children: g.entries.map(({ it, i }) => /* @__PURE__ */ jsx("li", { children: renderItem(it) }, i)) })
     ] }, gi)) }),
@@ -9745,10 +10030,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__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const isRange = range || Array.isArray(value) || Array.isArray(defaultValue);
-  const [internal, setInternal] = React25__default.useState(() => {
+  const [internal, setInternal] = React36__default.useState(() => {
     if (isRange) {
       const dv = Array.isArray(defaultValue) ? defaultValue : [min, max];
       return [clampSnap(dv[0]), clampSnap(dv[1])];
@@ -9758,8 +10043,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__default.useRef(null);
-  const [dragging, setDragging] = React25__default.useState(false);
+  const trackRef = React36__default.useRef(null);
+  const [dragging, setDragging] = React36__default.useState(false);
   const fmt = (v) => formatValue ? formatValue(v) : v.toFixed(decimals);
   const valueTextFor = (v) => {
     if (getAriaValueText) return getAriaValueText(v);
@@ -9790,8 +10075,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__default.useRef(null);
-  React25__default.useEffect(() => () => dragCleanupRef.current?.(), []);
+  const dragCleanupRef = React36__default.useRef(null);
+  React36__default.useEffect(() => () => dragCleanupRef.current?.(), []);
   function onPointerDown(e) {
     if (disabled) return;
     e.preventDefault();
@@ -10022,7 +10307,7 @@ function Stepper({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-stepper-styles", STEPPER_CSS);
-  const [activeInternal, setActiveInternal] = React25__default.useState(defaultActive);
+  const [activeInternal, setActiveInternal] = React36__default.useState(defaultActive);
   const active = activeProp !== void 0 ? activeProp : activeInternal;
   const handleStep = (i) => {
     if (activeProp === void 0) setActiveInternal(i);
@@ -10154,7 +10439,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__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const errId = `${fieldId}-error`;
   const invalid = Boolean(error);
@@ -10257,14 +10542,14 @@ function Table({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-table-styles", TABLE_CSS);
-  const cols = React25__default.useMemo(
+  const cols = React36__default.useMemo(
     () => (columns || []).map((c) => ({ ...c, header: c.headerName, render: c.renderCell })),
     [columns]
   );
   const dataRows = rowsProp || [];
-  const [internalSort, setInternalSort] = React25__default.useState(defaultSort || { field: null, dir: "asc" });
+  const [internalSort, setInternalSort] = React36__default.useState(defaultSort || { field: null, dir: "asc" });
   const sort = (sortProp !== void 0 ? sortProp : internalSort) || { field: null, dir: "asc" };
-  const rows = React25__default.useMemo(() => {
+  const rows = React36__default.useMemo(() => {
     if (!sortable || !sort.field) return dataRows;
     const col = cols.find((c) => c.field === sort.field);
     if (!col) return dataRows;
@@ -10411,15 +10696,15 @@ function Tabs({
 }) {
   const vertical = orientation === "vertical";
   const __twcStyles = useScopedStyles("twc-tabs-styles", TABS_CSS);
-  const [internal, setInternal] = React25__default.useState(defaultValue ?? items[0]?.value);
+  const [internal, setInternal] = React36__default.useState(defaultValue ?? items[0]?.value);
   const active = value ?? internal;
-  const listRef = React25__default.useRef(null);
-  const [ind, setInd] = React25__default.useState({ left: 0, width: 0, top: 0, height: 0 });
-  const baseId = React25__default.useId();
+  const listRef = React36__default.useRef(null);
+  const [ind, setInd] = React36__default.useState({ left: 0, width: 0, top: 0, height: 0 });
+  const baseId = React36__default.useId();
   const tabIdAt = (i) => `${baseId}-tab-${i}`;
   const panelId = `${baseId}-panel`;
   const activeIndex = items.findIndex((it) => it.value === active);
-  const updateIndicator = React25__default.useCallback(() => {
+  const updateIndicator = React36__default.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const el = list.querySelector('[data-active="true"]');
@@ -10428,10 +10713,10 @@ function Tabs({
       if (!vertical) el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
     }
   }, [vertical]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     updateIndicator();
   }, [active, updateIndicator, items, orientation]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     const r = () => updateIndicator();
     window.addEventListener("resize", r);
     if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
@@ -10576,7 +10861,7 @@ function Tag({
     }, "aria-label": _removeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var useIso = typeof document !== "undefined" ? React25__default.useLayoutEffect : React25__default.useEffect;
+var useIso = typeof document !== "undefined" ? React36__default.useLayoutEffect : React36__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; }
@@ -10612,7 +10897,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__default.forwardRef(function Textarea2({
+var Textarea = React36__default.forwardRef(function Textarea2({
   label,
   hint,
   error,
@@ -10630,19 +10915,19 @@ var Textarea = React25__default.forwardRef(function Textarea2({
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-textarea-styles", TEXTAREA_CSS);
-  const autoId = React25__default.useId();
+  const autoId = React36__default.useId();
   const fieldId = id || autoId;
   const descId = `${fieldId}-desc`;
   const countId = `${fieldId}-count`;
   const invalid = Boolean(error);
-  const innerRef = React25__default.useRef(null);
+  const innerRef = React36__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__default.useState(() => String(rest.defaultValue ?? "").length);
+  const [len2, setLen] = React36__default.useState(() => String(rest.defaultValue ?? "").length);
   const count = countControlled ? String(rest.value ?? "").length : len2;
   const max = rest.maxLength;
   const showCounter = showCount && max != null;
@@ -10820,19 +11105,19 @@ function Toast({
 }) {
   const resolvedTone = tone === "neutral" ? "default" : tone;
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const onCloseRef = React25__default.useRef(onClose);
-  React25__default.useEffect(() => {
+  const onCloseRef = React36__default.useRef(onClose);
+  React36__default.useEffect(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const timer = React25__default.useRef();
-  const stop = React25__default.useCallback(() => clearTimeout(timer.current), []);
-  const start = React25__default.useCallback(() => {
+  const timer = React36__default.useRef();
+  const stop = React36__default.useCallback(() => clearTimeout(timer.current), []);
+  const start = React36__default.useCallback(() => {
     stop();
     if (duration && duration !== Infinity && onCloseRef.current) {
       timer.current = setTimeout(() => onCloseRef.current && onCloseRef.current(), duration);
     }
   }, [duration, stop]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     start();
     return stop;
   }, [start, stop]);
@@ -10877,30 +11162,30 @@ function Toast({
 }
 function ToastViewport({ children, limit, className = "", ...rest }) {
   const __twcStyles = useScopedStyles("twc-toast-styles", TOAST_CSS);
-  const shown = limit && limit > 0 ? React25__default.Children.toArray(children).slice(-limit) : children;
+  const shown = limit && limit > 0 ? React36__default.Children.toArray(children).slice(-limit) : children;
   return /* @__PURE__ */ jsxs("div", { className: `twc-toast-viewport ${className}`, role: "region", "aria-label": "Notifications", ...rest, children: [
     __twcStyles,
     shown
   ] });
 }
-var ToastContext = React25__default.createContext(null);
+var ToastContext = React36__default.createContext(null);
 function useToast() {
-  const ctx = React25__default.useContext(ToastContext);
+  const ctx = React36__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__default.useState([]);
-  const idRef = React25__default.useRef(0);
-  const limitRef = React25__default.useRef(limit);
-  React25__default.useEffect(() => {
+  const [toasts, setToasts] = React36__default.useState([]);
+  const idRef = React36__default.useRef(0);
+  const limitRef = React36__default.useRef(limit);
+  React36__default.useEffect(() => {
     limitRef.current = limit;
   }, [limit]);
-  const dismiss = React25__default.useCallback((id) => {
+  const dismiss = React36__default.useCallback((id) => {
     setToasts((s) => s.filter((t) => t.id !== id));
   }, []);
-  const clear = React25__default.useCallback(() => setToasts([]), []);
-  const api = React25__default.useMemo(() => {
+  const clear = React36__default.useCallback(() => setToasts([]), []);
+  const api = React36__default.useMemo(() => {
     const push = (opts) => {
       const id = idRef.current += 1;
       const next = typeof opts === "string" ? { title: opts } : opts && typeof opts === "object" ? opts : {};
@@ -10921,7 +11206,7 @@ function ToastProvider({ children, limit = 4, duration = 4500, ...viewportProps
     toast.show = withTone("default");
     return { toast, dismiss, clear };
   }, [dismiss, clear]);
-  const value = React25__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
+  const value = React36__default.useMemo(() => ({ ...api, toasts }), [api, toasts]);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ jsx(ToastViewport, { limit, ...viewportProps, children: toasts.map((t) => /* @__PURE__ */ jsx(
@@ -11029,13 +11314,13 @@ function TreeView({
 }) {
   const nodes = items;
   const __twcStyles = useScopedStyles("twc-tree-styles", TREE_CSS);
-  const [expInternal, setExpInternal] = React25__default.useState(() => new Set(defaultExpanded));
+  const [expInternal, setExpInternal] = React36__default.useState(() => new Set(defaultExpanded));
   const expanded = expandedProp !== void 0 ? new Set(expandedProp) : expInternal;
-  const [selInternal, setSelInternal] = React25__default.useState(defaultSelectedId);
+  const [selInternal, setSelInternal] = React36__default.useState(defaultSelectedId);
   const selectedId = selectedProp !== void 0 ? selectedProp : selInternal;
-  const [focusId, setFocusId] = React25__default.useState(null);
-  const rowRefs = React25__default.useRef(/* @__PURE__ */ new Map());
-  const taRef = React25__default.useRef({ str: "", t: 0 });
+  const [focusId, setFocusId] = React36__default.useState(null);
+  const rowRefs = React36__default.useRef(/* @__PURE__ */ new Map());
+  const taRef = React36__default.useRef({ str: "", t: 0 });
   const toggle = (id) => {
     const n = new Set(expanded);
     n.has(id) ? n.delete(id) : n.add(id);
@@ -11167,7 +11452,7 @@ function AppShell({
   ...rest
 }) {
   const __twcStyles = useScopedStyles("twc-shell-styles", SHELL_CSS);
-  const wiredSidebar = React25__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React25__default.cloneElement(sidebar, {
+  const wiredSidebar = React36__default.isValidElement(sidebar) && (sidebarOpen !== void 0 || onSidebarOpenChange !== void 0) ? React36__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
@@ -11197,12 +11482,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__default.forwardRef(function Box2({
   as: Tag2 = "div",
   p,
   px,
@@ -11226,7 +11511,7 @@ function Box({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const s = {
     paddingTop: sp(pt ?? py ?? p),
     paddingRight: sp(pr ?? px ?? p),
@@ -11242,16 +11527,17 @@ function Box({
     boxShadow: shadow ? `var(--shadow-${shadow})` : void 0,
     ...style
   };
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref5(rest.href);
-  return /* @__PURE__ */ jsx(Tag2, { className: `twc-box ${className}`.trim(), style: s, ...rest, children });
-}
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref6(rest.href);
+  return /* @__PURE__ */ 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__default.forwardRef(function Container2({
   as: Tag2 = "div",
   size = "lg",
   padded = true,
@@ -11259,12 +11545,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__ */ jsx(
     Tag2,
     {
+      ref,
       className: `twc-container ${className}`.trim(),
       style: {
         width: "100%",
@@ -11277,7 +11564,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(".", "-")})`;
@@ -11287,12 +11575,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__default.forwardRef(function Grid2({
   as: Tag2 = "div",
   columns,
   minChildWidth,
@@ -11307,9 +11595,9 @@ function Grid({
   style,
   children,
   ...rest
-}) {
+}, ref) {
   const responsive = columns != null && typeof columns === "object";
-  const uid = React25__default.useId();
+  const uid = React36__default.useId();
   const gridId = responsive ? `g${uid.replace(/[^a-zA-Z0-9]/g, "")}` : null;
   let css = "";
   if (responsive) {
@@ -11323,10 +11611,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__ */ jsxs(
     Tag2,
     {
+      ref,
       className: `twc-grid ${className}`.trim(),
       "data-twc-grid-id": gridId || void 0,
       style: {
@@ -11347,18 +11636,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__default.forwardRef(function Stack2({
   as: Tag2 = "div",
   direction = "column",
   gap = 4,
@@ -11378,12 +11668,13 @@ function Stack({
   style,
   children,
   ...rest
-}) {
-  if (Tag2 === "a" && rest.href != null) rest.href = safeHref8(rest.href);
-  const kids = divider != null ? React25__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React25__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__default.Children.toArray(children).flatMap((child, i, arr) => i < arr.length - 1 ? [child, /* @__PURE__ */ jsx(React36__default.Fragment, { children: divider }, `twc-stack-div-${i}`)] : [child]) : children;
   return /* @__PURE__ */ jsx(
     Tag2,
     {
+      ref,
       className: `twc-stack ${className}`.trim(),
       style: {
         display: inline ? "inline-flex" : "flex",
@@ -11403,7 +11694,8 @@ function Stack({
       children: kids
     }
   );
-}
+});
+Stack.displayName = "Stack";
 var CODE_CSS = `
 .twc-code {
   font-family: var(--font-mono); font-size: 0.875em;
@@ -11427,7 +11719,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;
@@ -11444,11 +11736,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__default.useRef(null);
-  const [copied, setCopied] = React25__default.useState(false);
-  const timerRef = React25__default.useRef(null);
-  React25__default.useEffect(() => () => clearTimeout(timerRef.current), []);
+  if (Tag2 === "a" && rest.href != null) rest.href = safeHref10(rest.href);
+  const rootRef = React36__default.useRef(null);
+  const [copied, setCopied] = React36__default.useState(false);
+  const timerRef = React36__default.useRef(null);
+  React36__default.useEffect(() => () => clearTimeout(timerRef.current), []);
   const doCopy = () => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     const text = typeof children === "string" ? children : rootRef.current?.textContent ?? "";
@@ -11469,12 +11761,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__default.forwardRef(function Heading2({
   as,
   level = 2,
   size,
@@ -11486,13 +11778,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__ */ jsx(
     Tag2,
     {
+      ref,
       className: `twc-heading ${className}`.trim(),
       style: {
         margin: 0,
@@ -11510,7 +11803,8 @@ function Heading({
       children
     }
   );
-}
+});
+Heading.displayName = "Heading";
 var TONE = {
   default: "--color-text",
   muted: "--color-text-muted",
@@ -11526,12 +11820,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__default.forwardRef(function Text2({
   as: Tag2 = "p",
   size = "base",
   tone = "default",
@@ -11543,12 +11837,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__ */ jsx(
     Tag2,
     {
+      ref,
       className: `twc-text ${className}`.trim(),
       style: {
         margin: 0,
@@ -11565,47 +11860,48 @@ function Text({
       children
     }
   );
-}
+});
+Text.displayName = "Text";
 var canUseDOM2 = typeof window !== "undefined" && typeof document !== "undefined";
-var useIsomorphicLayoutEffect = canUseDOM2 ? React25__default.useLayoutEffect : React25__default.useEffect;
+var useIsomorphicLayoutEffect = canUseDOM2 ? React36__default.useLayoutEffect : React36__default.useEffect;
 function useMounted() {
-  const [mounted, setMounted] = React25__default.useState(false);
-  React25__default.useEffect(() => {
+  const [mounted, setMounted] = React36__default.useState(false);
+  React36__default.useEffect(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 function usePrevious(value) {
-  const ref = React25__default.useRef(void 0);
-  React25__default.useEffect(() => {
+  const ref = React36__default.useRef(void 0);
+  React36__default.useEffect(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
 }
 function useToggle(initial = false) {
-  const [on, setOn] = React25__default.useState(initial);
-  const toggle = React25__default.useCallback((next) => {
+  const [on, setOn] = React36__default.useState(initial);
+  const toggle = React36__default.useCallback((next) => {
     setOn((prev) => typeof next === "boolean" ? next : !prev);
   }, []);
   return [on, toggle, setOn];
 }
 function useDisclosure(initial = false) {
-  const [open, setOpen] = React25__default.useState(initial);
-  const onOpen = React25__default.useCallback(() => setOpen(true), []);
-  const onClose = React25__default.useCallback(() => setOpen(false), []);
-  const onToggle = React25__default.useCallback(() => setOpen((p) => !p), []);
+  const [open, setOpen] = React36__default.useState(initial);
+  const onOpen = React36__default.useCallback(() => setOpen(true), []);
+  const onClose = React36__default.useCallback(() => setOpen(false), []);
+  const onToggle = React36__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__default.useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = React36__default.useState(defaultValue);
   const current = isControlled ? value : uncontrolled;
-  const ref = React25__default.useRef({ current, isControlled, onChange });
+  const ref = React36__default.useRef({ current, isControlled, onChange });
   useIsomorphicLayoutEffect(() => {
     ref.current = { current, isControlled, onChange };
   });
-  const wasControlled = React25__default.useRef(isControlled);
-  React25__default.useEffect(() => {
+  const wasControlled = React36__default.useRef(isControlled);
+  React36__default.useEffect(() => {
     if (wasControlled.current !== isControlled) {
       warnOnce(
         "useControllableState:switch",
@@ -11614,7 +11910,7 @@ function useControllableState({ value, defaultValue, onChange } = {}) {
       wasControlled.current = isControlled;
     }
   });
-  const setValue = React25__default.useCallback((next) => {
+  const setValue = React36__default.useCallback((next) => {
     const { current: cur, isControlled: ctrl, onChange: cb } = ref.current;
     const resolved = typeof next === "function" ? next(cur) : next;
     if (resolved === cur) return;
@@ -11625,7 +11921,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__default.useState(initializeWithValue ? get : defaultValue);
+  const [matches3, setMatches] = React36__default.useState(initializeWithValue ? get : defaultValue);
   useIsomorphicLayoutEffect(() => {
     if (!canUseDOM2) return void 0;
     const mql = window.matchMedia(query);
@@ -11641,7 +11937,7 @@ function usePrefersReducedMotion() {
 }
 function useColorScheme({ storageKey = "twico-theme", attribute = "class", element, disableTransitionsOnChange = true } = {}) {
   const getTarget = () => element || (canUseDOM2 ? document.documentElement : null);
-  const firstApply = React25__default.useRef(true);
+  const firstApply = React36__default.useRef(true);
   const read = () => {
     if (!canUseDOM2) return "light";
     try {
@@ -11651,8 +11947,8 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     }
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
   };
-  const [theme, setThemeState] = React25__default.useState(read);
-  const apply = React25__default.useCallback(
+  const [theme, setThemeState] = React36__default.useState(read);
+  const apply = React36__default.useCallback(
     (t) => {
       const target = getTarget();
       if (!target) return;
@@ -11678,11 +11974,11 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
   useIsomorphicLayoutEffect(() => {
     apply(theme);
   }, [theme, apply]);
-  const themeRef = React25__default.useRef(theme);
+  const themeRef = React36__default.useRef(theme);
   useIsomorphicLayoutEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-  const setTheme = React25__default.useCallback(
+  const setTheme = React36__default.useCallback(
     (t) => {
       setThemeState(t);
       try {
@@ -11693,10 +11989,10 @@ function useColorScheme({ storageKey = "twico-theme", attribute = "class", eleme
     },
     [storageKey]
   );
-  const toggle = React25__default.useCallback(() => {
+  const toggle = React36__default.useCallback(() => {
     setTheme(themeRef.current === "dark" ? "light" : "dark");
   }, [setTheme]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const sync = () => setThemeState(read());
     const onStorage = (e) => {
@@ -11712,14 +12008,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__default.useRef(handler);
+  const saved = React36__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__default.useEffect(() => {
+  React36__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 };
@@ -11729,11 +12025,11 @@ function useEventListener(eventName, handler, element, options) {
   }, [eventName, element, capture, passive, once]);
 }
 function useClickOutside(ref, handler, events = ["mousedown", "touchstart"]) {
-  const saved = React25__default.useRef(handler);
+  const saved = React36__default.useRef(handler);
   useIsomorphicLayoutEffect(() => {
     saved.current = handler;
   }, [handler]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const listener = (e) => {
       const el = ref && ref.current;
@@ -11768,8 +12064,8 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   };
-  const [stored, setStored] = React25__default.useState(read);
-  const setValue = React25__default.useCallback(
+  const [stored, setStored] = React36__default.useState(read);
+  const setValue = React36__default.useCallback(
     (value) => {
       setStored((prev) => {
         const next = typeof value === "function" ? value(prev) : value;
@@ -11785,8 +12081,8 @@ function useLocalStorage(key, initialValue) {
   return [stored, setValue];
 }
 function useCopyToClipboard(timeout = 1500) {
-  const [copied, setCopied] = React25__default.useState(false);
-  const copy = React25__default.useCallback(async (text) => {
+  const [copied, setCopied] = React36__default.useState(false);
+  const copy = React36__default.useCallback(async (text) => {
     if (!canUseDOM2 || !navigator.clipboard) {
       setCopied(false);
       return false;
@@ -11800,7 +12096,7 @@ function useCopyToClipboard(timeout = 1500) {
       return false;
     }
   }, []);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!copied) return void 0;
     const t = setTimeout(() => setCopied(false), timeout);
     return () => clearTimeout(t);
@@ -11808,23 +12104,23 @@ function useCopyToClipboard(timeout = 1500) {
   return { copied, copy };
 }
 function useDebouncedValue(value, delay = 200) {
-  const [debounced, setDebounced] = React25__default.useState(value);
-  React25__default.useEffect(() => {
+  const [debounced, setDebounced] = React36__default.useState(value);
+  React36__default.useEffect(() => {
     const t = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(t);
   }, [value, delay]);
   return debounced;
 }
 function useDebouncedCallback(callback, delay = 200) {
-  const saved = React25__default.useRef(callback);
-  const timer = React25__default.useRef(null);
+  const saved = React36__default.useRef(callback);
+  const timer = React36__default.useRef(null);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__default.useEffect(() => () => {
+  React36__default.useEffect(() => () => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  return React25__default.useCallback(
+  return React36__default.useCallback(
     (...args) => {
       if (timer.current) clearTimeout(timer.current);
       timer.current = setTimeout(() => saved.current(...args), delay);
@@ -11833,33 +12129,33 @@ function useDebouncedCallback(callback, delay = 200) {
   );
 }
 function useInterval(callback, delay) {
-  const saved = React25__default.useRef(callback);
+  const saved = React36__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__default.useEffect(() => {
+  React36__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__default.useRef(callback);
+  const saved = React36__default.useRef(callback);
   useIsomorphicLayoutEffect(() => {
     saved.current = callback;
   }, [callback]);
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (delay == null) return void 0;
     const id = setTimeout(() => saved.current(), delay);
     return () => clearTimeout(id);
   }, [delay]);
 }
 function useWindowSize() {
-  const [size, setSize] = React25__default.useState(() => ({
+  const [size, setSize] = React36__default.useState(() => ({
     width: canUseDOM2 ? window.innerWidth : 0,
     height: canUseDOM2 ? window.innerHeight : 0
   }));
-  React25__default.useEffect(() => {
+  React36__default.useEffect(() => {
     if (!canUseDOM2) return void 0;
     const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
     onResize();
@@ -11869,8 +12165,8 @@ function useWindowSize() {
   return size;
 }
 function useHover(ref) {
-  const [hovered, setHovered] = React25__default.useState(false);
-  React25__default.useEffect(() => {
+  const [hovered, setHovered] = React36__default.useState(false);
+  React36__default.useEffect(() => {
     const el = ref && ref.current;
     if (!el) return void 0;
     const on = () => setHovered(true);
@@ -11886,8 +12182,8 @@ function useHover(ref) {
 }
 function useIntersectionObserver(ref, options = {}) {
   const { root = null, rootMargin = "0px", threshold = 0 } = options;
-  const [entry, setEntry] = React25__default.useState(null);
-  React25__default.useEffect(() => {
+  const [entry, setEntry] = React36__default.useState(null);
+  React36__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 });
@@ -11897,13 +12193,13 @@ function useIntersectionObserver(ref, options = {}) {
   return entry;
 }
 function useId(prefix = "twc") {
-  const raw = React25__default.useId();
+  const raw = React36__default.useId();
   return prefix ? `${prefix}-${raw.replace(/:/g, "")}` : raw;
 }
 var useFocusTrap2 = useFocusTrap;
 var usePortal2 = usePortal;
 var useScrollLock2 = useScrollLock;
-export { Accordion, Alert, AppShell, Avatar, AvatarMenu, Badge, Box, Breadcrumb, Button, Card, Carousel, Chart, Checkbox, Code, ColorPicker, Combobox, CommandPalette, Container, Currency, CurrencyField, Datatable, DatePicker, DateRangePicker, Dialog, Divider, Drawer, EmptyState, Field, FileUpload, Grid, Heading, IconButton, Input, Kanban, List, Menu, MultiSelect, Navbar, Pagination, Popover, Progress, Radio, RadioGroup, Rating, Select, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, Text, Textarea, Timeline, Toast, ToastProvider, ToastViewport, Tooltip, TreeView, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFocusTrap2 as useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal2 as usePortal, usePrefersReducedMotion, usePrevious, useScrollLock2 as useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, Alert, Anchor, AppShell, Avatar, AvatarMenu, Badge, Box, Breadcrumb, Button, Card, Carousel, Chart, Checkbox, Code, ColorPicker, ColorSchemeScript, Combobox, CommandPalette, Container, Currency, CurrencyField, Datatable, DatePicker, DateRangePicker, Dialog, Divider, Drawer, EmptyState, Field, FileUpload, Form, Grid, Heading, IconButton, Image, Input, Kanban, Kbd, Label, List, Menu, MultiSelect, Navbar, Pagination, Popover, Portal, Pre, Progress, Radio, RadioGroup, Rating, Select, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, Tag, Text, Textarea, ThemeProvider, Timeline, Toast, ToastProvider, ToastViewport, Tooltip, TreeView, TwicoProvider, VisuallyHidden, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFocusTrap2 as useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal2 as usePortal, usePrefersReducedMotion, usePrevious, useScrollLock2 as useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map