@pibit.ai/cure-design-system 0.3.40 → 0.3.45

package/dist/patterns/table/TableWrapper.js

@@ -1,31 +1,31 @@
-import { jsx as a, jsxs as E, Fragment as wt } from "react/jsx-runtime";
-import { forwardRef as Vr, useMemo as b, useState as H, useRef as oe, useEffect as X, useCallback as I, useLayoutEffect as Jt } from "react";
-import { Slider as Jr, SliderTrack as Qr, SliderThumb as en } from "react-aria-components";
-import { ChevronRight as tn } from "@untitledui/icons";
+import { jsx as c, jsxs as C, Fragment as Jt } from "react/jsx-runtime";
+import { forwardRef as Vr, useMemo as v, useState as H, useRef as oe, useEffect as $, useCallback as I, useLayoutEffect as Qt } from "react";
+import { ChevronRight as Jr } from "@untitledui/icons";
 import { cx as x } from "../../utils/cn.js";
-import { TableCard as rn, Table as m } from "./table.js";
-import { TablePagination as nn } from "./TablePagination.js";
-import { getEffectiveAlignment as dr, resolveColumnLabel as sn, alignmentClass as on } from "./toolbar/tableToolbarHelpers.js";
-import { normalizeZoomConfig as an, DEFAULT_TABLE_ZOOM as cn, parsePxValue as mt, DEFAULT_ZOOMABLE_COLUMN_MIN_WIDTH as Qt, supportsCssZoom as dn, DEFAULT_TABLE_ZOOM_MIN as ln, clamp as er, computeFillBaseWidth as un, computeEffectiveTableWidth as fn, computeFlexColumnWidth as pn, DEFAULT_COLUMN_MAX_WIDTH as lr, computeNeedsHorizontalScroll as hn } from "./tableZoomLayout.js";
+import { TableCard as Qr, Table as m } from "./table.js";
+import { TablePagination as en } from "./TablePagination.js";
+import { TableZoomControl as tn } from "./TableZoomControl.js";
+import { getEffectiveAlignment as dr, resolveColumnLabel as rn, alignmentClass as nn } from "./toolbar/tableToolbarHelpers.js";
+import { normalizeZoomConfig as sn, DEFAULT_TABLE_ZOOM as on, parsePxValue as yt, DEFAULT_ZOOMABLE_COLUMN_MIN_WIDTH as er, supportsCssZoom as an, DEFAULT_TABLE_ZOOM_MIN as cn, clamp as dn, computeFillBaseWidth as ln, computeEffectiveTableWidth as un, computeFlexColumnWidth as fn, DEFAULT_COLUMN_MAX_WIDTH as lr, getTableZoomFontSize as pn, computeNeedsHorizontalScroll as hn } from "./tableZoomLayout.js";
 import { findGridCell as tr, isWithinCellEditor as Be, getGridNeighbor as yn, getGridTabNeighbor as wn, focusGridCell as rr, GridNavProvider as mn } from "./useGridKeyboardNavigation.js";
 import { scrollGridCellIntoView as gn } from "./scrollCellIntoView.js";
-import { ROW_DRAG_THRESHOLD_PX as xn, computeDropTarget as Rn, clipDropLineToScrollport as vn, ROW_REORDER_ATTR as nr, measureRowPreview as bn, cloneRowForPreview as kn, FloatingRowPreview as En, DropIndicatorLine as In, getRowDragScrollDelta as Nn, ROW_DRAG_SOURCE_STYLE as Ln, ROW_SOURCE_INDEX_ATTR as Wn } from "./rowReorderDrag.js";
-import { selectionFromSingleCell as gt, resolveCellCoordFromElement as $e, resolveRowAnchorCoordFromTarget as Dn, buildCellRangeRect as xt, nextKeyboardCellSelection as _n, CELL_RANGE_DRAG_THRESHOLD_PX as Pn, hitTestGridCell as Sn, canStartCellRangeFromTarget as ir, getDragScrollDeltas as Tn, getCellRangeVisualState as Cn, cellRangeEdgeBoxShadow as On } from "./cellRangeSelection.js";
+import { ROW_DRAG_THRESHOLD_PX as xn, computeDropTarget as Rn, clipDropLineToScrollport as vn, ROW_REORDER_ATTR as nr, measureRowPreview as En, cloneRowForPreview as kn, FloatingRowPreview as In, DropIndicatorLine as Ln, getRowDragScrollDelta as bn, ROW_DRAG_SOURCE_STYLE as Nn, ROW_SOURCE_INDEX_ATTR as Wn } from "./rowReorderDrag.js";
+import { selectionFromSingleCell as wt, resolveCellCoordFromElement as Xe, resolveRowAnchorCoordFromTarget as Dn, buildCellRangeRect as mt, nextKeyboardCellSelection as _n, CELL_RANGE_DRAG_THRESHOLD_PX as Pn, hitTestGridCell as Sn, canStartCellRangeFromTarget as ir, getDragScrollDeltas as Tn, getCellRangeVisualState as Cn, cellRangeEdgeBoxShadow as On } from "./cellRangeSelection.js";
 import { BulkActionBar as Fn } from "./toolbar/BulkActionBar.js";
-import { TableToolbar as Zn } from "./toolbar/TableToolbar.js";
+import { TableToolbar as Gn } from "./toolbar/TableToolbar.js";
 import { Checkbox as sr } from "../../primitives/checkbox/checkbox.js";
-import { ColumnHeaderMenu as Gn } from "./toolbar/ColumnHeaderMenu.js";
-import { Button as Mn } from "../../primitives/button/button.js";
-import { SummaryFooterRow as An } from "./toolbar/SummaryFooter.js";
-import { RowActionsMenu as Un } from "./toolbar/RowActionsMenu.js";
+import { ColumnHeaderMenu as Mn } from "./toolbar/ColumnHeaderMenu.js";
+import { Button as Zn } from "../../primitives/button/button.js";
+import { SummaryFooterRow as Un } from "./toolbar/SummaryFooter.js";
+import { RowActionsMenu as An } from "./toolbar/RowActionsMenu.js";
 import { Icon as Yn } from "../../primitives/icon/icon.js";
 import { ShimmerLine as Bn } from "../../primitives/shimmer/shimmer.js";
-const $n = dn(), Xn = 5, jn = "__all__", or = {
+const Xn = an(), $n = 5, jn = "__all__", or = {
   ArrowUp: "up",
   ArrowDown: "down",
   ArrowLeft: "left",
   ArrowRight: "right"
-}, ve = (s) => s.__rowId ?? s.id ?? s.rule_id ?? String(s);
+}, xe = (s) => s.__rowId ?? s.id ?? s.rule_id ?? String(s);
 function ar(s, u) {
   return s === "all" ? new Set(u) : s ?? /* @__PURE__ */ new Set();
 }
@@ -54,7 +54,7 @@ function Jn(s) {
 function cr(s, u, f) {
   return f ? dr(f, u ?? /* @__PURE__ */ new Map()) : (u == null ? void 0 : u.get(s)) ?? "left";
 }
-const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s) => s.width ?? (s.maxWidth && s.sticky === "right" ? s.maxWidth : void 0), Qn = (s) => ({
+const Re = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), gt = (s) => s.width ?? (s.maxWidth && s.sticky === "right" ? s.maxWidth : void 0), Qn = (s) => ({
   width: s.width,
   maxWidth: s.maxWidth ?? lr,
   minWidth: s.minWidth ?? s.width
@@ -62,200 +62,169 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
   function({
     data: u,
     columns: f,
-    renderRowCell: vt,
-    onRowClick: ke,
+    renderRowCell: xt,
+    onRowClick: ve,
     onRowHover: V,
     arialabel: ur,
-    size: bt = "sm",
+    size: Rt = "sm",
     allowDefaultRowClass: fr = !1,
     centeredHeaders: pr = [],
     rootClassName: hr,
-    removeBorders: kt,
+    removeBorders: vt,
     headerClassName: yr,
     isRowExpandable: Et,
     renderExpandedContent: wr,
     loading: j = !1,
-    loadingRowCount: It = Xn,
-    renderHeaderCell: Xe,
+    loadingRowCount: kt = $n,
+    renderHeaderCell: $e,
     tableClassName: mr,
     getRowClassName: je,
     selectionMode: ae = "none",
     selectedKeys: F,
-    onSelectionChange: S,
+    onSelectionChange: P,
     inlineSelection: Ee = !1,
     toolbar: d,
     showToolbar: gr,
-    toolbarTitle: Nt,
+    toolbarTitle: It,
     toolbarTrailing: Lt,
-    disableExtendedTools: ce,
-    pagination: T,
+    disableExtendedTools: ke,
+    pagination: S,
     showBorders: Ie,
-    emptyState: Wt,
-    editChrome: G,
+    emptyState: bt,
+    editChrome: Z,
     showEditActions: xr = !1,
-    searchCollapsible: Dt,
+    searchCollapsible: Nt,
     isEditable: Rr,
     toolbarSlot: qe,
-    rowHeightClass: _t,
+    rowHeightClass: Wt,
     groupedData: J,
     showSummaryFooter: vr,
     summaryFooterProps: Ke,
-    bulkActionBar: Ne,
-    renderBulkActionBar: Le,
-    onBulkDuplicate: We,
-    onBulkDelete: De,
-    bulkActionBusy: _e,
+    bulkActionBar: Le,
+    renderBulkActionBar: be,
+    onBulkDuplicate: Ne,
+    onBulkDelete: We,
+    bulkActionBusy: De,
     columnAlignments: Q,
-    onColumnHeaderAction: Pe,
-    showColumnHeaderMenu: br,
+    onColumnHeaderAction: _e,
+    showColumnHeaderMenu: Er,
     columnMenuCapabilities: kr,
-    renderGroupHeader: Pt,
-    columnMenuSchema: de,
-    columnSchema: le,
-    labelMeta: Er,
-    renderColumnHeaderMenuExtraItems: Ir,
-    fillWidth: Nr = !1,
-    zoom: N,
-    rowActions: L,
+    renderGroupHeader: Dt,
+    columnMenuSchema: ce,
+    columnSchema: de,
+    labelMeta: Ir,
+    renderColumnHeaderMenuExtraItems: Lr,
+    fillWidth: br = !1,
+    zoom: L,
+    rowActions: b,
     onCellActivate: ee,
     cellSelection: w = null,
-    onCellSelectionChange: _,
+    onCellSelectionChange: D,
     onCopyCells: He,
     onPasteCells: ze,
     onClearCells: Ve
-  }, ue) {
-    const R = b(
-      () => N ? an(N) : null,
-      [N == null ? void 0 : N.defaultZoom, N == null ? void 0 : N.minZoom, N == null ? void 0 : N.maxZoom, N == null ? void 0 : N.step]
-    ), [fe, Je] = H(
-      () => (R == null ? void 0 : R.defaultZoom) ?? cn
-    ), M = R !== null && $n, pe = fe / 100, P = Nr || M, g = oe(null), [he, St] = H(null), te = b(() => {
-      if (!P) return null;
+  }, le) {
+    const E = v(
+      () => L ? sn(L) : null,
+      [L == null ? void 0 : L.defaultZoom, L == null ? void 0 : L.minZoom, L == null ? void 0 : L.maxZoom, L == null ? void 0 : L.step]
+    ), [Pe, _t] = H(
+      () => (E == null ? void 0 : E.defaultZoom) ?? on
+    ), G = E !== null && Xn, ue = Pe / 100, Se = G ? pn(Pe) : void 0, _ = br, g = oe(null), [fe, Pt] = H(null), te = v(() => {
+      if (!_) return null;
       const e = f.reduce(
-        (i, n) => be(n) ? i + mt(Rt(n)) : i,
+        (i, n) => Re(n) ? i + yt(gt(n)) : i,
         0
       );
       return { minTableWidth: f.filter(
-        (i) => !be(i)
+        (i) => !Re(i)
       ).reduce(
-        (i, n) => i + mt(
-          n.minWidth ?? (M ? Qt : void 0)
+        (i, n) => i + yt(
+          n.minWidth ?? (G ? er : void 0)
         ),
         0
       ) + e };
-    }, [f, P, M]), Se = (R == null ? void 0 : R.minZoom) ?? ln;
-    X(() => {
-      R && Je(
-        (e) => er(e, R.minZoom, R.maxZoom)
+    }, [f, _, G]), St = (E == null ? void 0 : E.minZoom) ?? cn;
+    $(() => {
+      E && _t(
+        (e) => dn(e, E.minZoom, E.maxZoom)
       );
-    }, [R]);
-    const [Te, Lr] = H(
+    }, [E]);
+    const [Te, Nr] = H(
       () => /* @__PURE__ */ new Set()
     ), [Wr, Tt] = H(
       null
-    ), [p, Dr] = H(null), A = oe(null), Qe = oe({ x: 0, y: 0 }), re = I((e) => {
-      A.current = e, Dr(e);
-    }, []), [z, Ct] = H(null), [ne, _r] = H(null), y = typeof _ == "function", q = oe(null), et = oe({ x: 0, y: 0 }), [ie, Ot] = H(!1), tt = oe(null), Ce = ae === "single" || ae === "multiple", rt = !!L, U = Ce && !Ee, Oe = Jn(J), nt = !!(L != null && L.onReorderRows) && (L == null ? void 0 : L.enableRowReorder) !== !1 && !Oe && !j, Pr = b(() => de != null && de.length ? new Map(de.map((e) => [e.key, e])) : /* @__PURE__ */ new Map(), [de]), Ft = b(() => le != null && le.length ? new Map(le.map((e) => [e.value, e])) : /* @__PURE__ */ new Map(), [le]), Y = b(
+    ), [p, Dr] = H(null), U = oe(null), Je = oe({ x: 0, y: 0 }), re = I((e) => {
+      U.current = e, Dr(e);
+    }, []), [z, Ct] = H(null), [ne, _r] = H(null), y = typeof D == "function", q = oe(null), Qe = oe({ x: 0, y: 0 }), [ie, Ot] = H(!1), et = oe(null), Ce = ae === "single" || ae === "multiple", tt = !!b, A = Ce && !Ee, Oe = Jn(J), rt = !!(b != null && b.onReorderRows) && (b == null ? void 0 : b.enableRowReorder) !== !1 && !Oe && !j, Pr = v(() => ce != null && ce.length ? new Map(ce.map((e) => [e.key, e])) : /* @__PURE__ */ new Map(), [ce]), Ft = v(() => de != null && de.length ? new Map(de.map((e) => [e.value, e])) : /* @__PURE__ */ new Map(), [de]), Y = v(
       () => f.map((e) => e.key),
       [f]
     ), Sr = I((e) => {
-      Lr((r) => {
-        const t = new Set(r);
-        return t.has(e) ? t.delete(e) : t.add(e), t;
+      Nr((t) => {
+        const r = new Set(t);
+        return r.has(e) ? r.delete(e) : r.add(e), r;
       });
-    }, []), Fe = b(() => j ? Array.from({ length: It }, (e, r) => ({
-      id: `loading-${r}`
+    }, []), Fe = v(() => j ? Array.from({ length: kt }, (e, t) => ({
+      id: `loading-${t}`
     })) : u.map((e) => {
-      const r = e;
-      if (r.__rowId != null)
-        return r;
-      const t = ve(r);
-      return r.id != null && String(r.id) === t ? r : { ...r, id: t };
-    }), [j, u, It]), v = b(() => j ? [] : Oe && J ? J.flatMap(
-      (e) => Te.has(e.key) ? [] : e.rows.map((r) => ve(r))
-    ) : Fe.map((e) => ve(e)), [j, Oe, J, Te, Fe]), ye = b(
-      () => ar(F, v),
-      [F, v]
-    ), it = Kn(F, v), st = it > 0, Zt = st && !!(Ne ?? Le ?? We ?? De), we = b(() => {
-      if (!st) return;
+      const t = e;
+      if (t.__rowId != null)
+        return t;
+      const r = xe(t);
+      return t.id != null && String(t.id) === r ? t : { ...t, id: r };
+    }), [j, u, kt]), R = v(() => j ? [] : Oe && J ? J.flatMap(
+      (e) => Te.has(e.key) ? [] : e.rows.map((t) => xe(t))
+    ) : Fe.map((e) => xe(e)), [j, Oe, J, Te, Fe]), pe = v(
+      () => ar(F, R),
+      [F, R]
+    ), nt = Kn(F, R), it = nt > 0, Gt = it && !!(Le ?? be ?? Ne ?? We), he = v(() => {
+      if (!it) return;
       const e = u.filter(
-        (r) => ye.has(ve(r))
+        (t) => pe.has(xe(t))
       );
       return {
-        selectedKeys: ye,
+        selectedKeys: pe,
         selectedRows: e,
-        clearSelection: () => S == null ? void 0 : S(/* @__PURE__ */ new Set()),
-        busy: _e
+        clearSelection: () => P == null ? void 0 : P(/* @__PURE__ */ new Set()),
+        busy: De
       };
     }, [
-      st,
-      ye,
+      it,
+      pe,
       u,
-      S,
-      _e
-    ]), Gt = b(() => {
+      P,
+      De
+    ]), Mt = v(() => {
       if (qe != null) return qe;
-      if (Zt) {
-        if (Ne != null) return Ne;
-        if (Le && we)
-          return Le(we);
-        if (we && (We || De))
-          return /* @__PURE__ */ a(
+      if (Gt) {
+        if (Le != null) return Le;
+        if (be && he)
+          return be(he);
+        if (he && (Ne || We))
+          return /* @__PURE__ */ c(
             Fn,
             {
-              count: it,
-              onDuplicate: We,
-              onDelete: De,
-              onClearSelection: we.clearSelection,
-              busy: _e
+              count: nt,
+              onDuplicate: Ne,
+              onDelete: We,
+              onClearSelection: he.clearSelection,
+              busy: De
             }
           );
       }
-      const e = M && R ? /* @__PURE__ */ E("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ a(
-          Jr,
-          {
-            "aria-label": "Table zoom",
-            className: "w-24 shrink-0",
-            minValue: Se,
-            maxValue: R.maxZoom,
-            step: R.step,
-            value: er(fe, Se, R.maxZoom),
-            onChange: (t) => Je(Array.isArray(t) ? t[0] : t),
-            isDisabled: ce || Se >= R.maxZoom,
-            children: /* @__PURE__ */ a(Qr, { className: "relative flex h-4 w-full items-center data-[disabled]:opacity-50", children: ({ state: t }) => /* @__PURE__ */ E(wt, { children: [
-              /* @__PURE__ */ a("div", { className: "absolute h-1 w-full rounded-full bg-tertiary" }),
-              /* @__PURE__ */ a(
-                "div",
-                {
-                  className: "absolute h-1 rounded-full bg-brand-solid",
-                  style: {
-                    width: `${t.getThumbPercent(0) * 100}%`
-                  }
-                }
-              ),
-              /* @__PURE__ */ a(en, { className: "top-1/2 size-3 rounded-full border-2 border-slider-handle-border bg-slider-handle-bg shadow-sm outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-focus-ring" })
-            ] }) })
-          }
-        ),
-        /* @__PURE__ */ E(
-          "button",
-          {
-            type: "button",
-            "aria-label": `Reset table zoom to ${R.defaultZoom}%`,
-            title: "Reset zoom",
-            className: "w-9 shrink-0 text-right text-xs tabular-nums text-secondary enabled:hover:text-primary disabled:opacity-50",
-            disabled: fe === R.defaultZoom || ce,
-            onClick: () => Je(R.defaultZoom),
-            children: [
-              fe,
-              "%"
-            ]
-          }
-        )
-      ] }) : null, r = Lt;
-      return !d && !r && !e ? null : /* @__PURE__ */ a(
-        Zn,
+      const e = G && E ? /* @__PURE__ */ c(
+        tn,
+        {
+          value: Pe,
+          defaultValue: E.defaultZoom,
+          minValue: St,
+          maxValue: E.maxZoom,
+          step: E.step,
+          onChange: _t,
+          isDisabled: ke
+        }
+      ) : null, t = Lt;
+      return !d && !t && !e ? null : /* @__PURE__ */ c(
+        Gn,
         {
           sort: d == null ? void 0 : d.sort,
           filter: d == null ? void 0 : d.filter,
@@ -267,99 +236,99 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
           summary: d == null ? void 0 : d.summary,
           sortContent: d == null ? void 0 : d.sortContent,
           filterContent: d == null ? void 0 : d.filterContent,
-          fallbackTitle: Nt,
+          fallbackTitle: It,
           beforeSearch: e,
-          trailing: r,
-          searchCollapsible: Dt,
-          disableExtendedTools: ce,
+          trailing: t,
+          searchCollapsible: Nt,
+          disableExtendedTools: ke,
           undoRedo: d != null && d.undoRedo ? {
             ...d.undoRedo,
-            isDisabled: d.undoRedo.isDisabled ?? ce
+            isDisabled: d.undoRedo.isDisabled ?? ke
           } : void 0
         }
       );
     }, [
       qe,
-      Zt,
-      Ne,
+      Gt,
       Le,
-      we,
+      be,
+      he,
+      Ne,
       We,
       De,
-      _e,
-      it,
+      nt,
       d,
-      Nt,
+      It,
       Lt,
-      Dt,
-      ce,
-      R,
-      M,
-      fe,
-      Se
-    ]), Mt = Gt != null && gr !== !1, At = !!T && (T == null ? void 0 : T.showPagination) !== !1, Tr = Mt || At, Ut = !j && u.length === 0 && Wt != null, O = !!(xr && G), ot = !!(G != null && G.showFooterRow), W = Rr ?? (O || ot || rt), Cr = Ut && !(ot && G), me = f.length + (U ? 1 : 0) + (O ? 1 : 0), Or = !!(vr && Ke), D = Ie ? "border-r border-secondary last:border-r-0" : void 0, Fr = b(() => {
+      Nt,
+      ke,
+      E,
+      G,
+      Pe,
+      St
+    ]), Zt = Mt != null && gr !== !1, Ut = !!S && (S == null ? void 0 : S.showPagination) !== !1, Tr = Zt || Ut, At = !j && u.length === 0 && bt != null, O = !!(xr && Z), st = !!(Z != null && Z.showFooterRow), N = Rr ?? (O || st || tt), Cr = At && !(st && Z), ye = f.length + (A ? 1 : 0) + (O ? 1 : 0), Or = !!(vr && Ke), W = Ie ? "border-r border-secondary last:border-r-0" : void 0, Fr = v(() => {
       const e = /* @__PURE__ */ new Map();
-      return Pe && f.forEach((r) => {
+      return _e && f.forEach((t) => {
         e.set(
-          r.key,
-          (t) => Pe(r.key, t)
+          t.key,
+          (r) => _e(t.key, r)
         );
       }), e;
-    }, [f, Pe]), at = I(
-      (e, r, t) => {
-        var c;
-        let i = t ?? null;
+    }, [f, _e]), ot = I(
+      (e, t, r) => {
+        var a;
+        let i = r ?? null;
         if (i == null) {
-          const l = (c = tr(
+          const l = (a = tr(
             g.current,
             e,
-            r
-          )) == null ? void 0 : c.getAttribute("data-grid-source-index"), h = l != null && l !== "" ? Number(l) : NaN;
+            t
+          )) == null ? void 0 : a.getAttribute("data-grid-source-index"), h = l != null && l !== "" ? Number(l) : NaN;
           i = Number.isNaN(h) ? null : h;
         }
         const n = {
           rowId: e,
-          columnKey: r,
+          columnKey: t,
           sourceIndex: i
         };
         if (y) {
-          _ == null || _(gt(n));
+          D == null || D(wt(n));
           return;
         }
         Ct(n);
       },
-      [y, _]
-    ), Ze = I(() => {
+      [y, D]
+    ), Ge = I(() => {
       if (y) {
-        _ == null || _(null);
+        D == null || D(null);
         return;
       }
       Ct(null);
-    }, [y, _]), C = y ? (w == null ? void 0 : w.focus) ?? null : z, B = I(
+    }, [y, D]), T = y ? (w == null ? void 0 : w.focus) ?? null : z, B = I(
       (e) => {
-        y && (_ == null || _(e));
+        y && (D == null || D(e));
       },
-      [y, _]
-    ), Zr = I(
+      [y, D]
+    ), Gr = I(
       (e) => {
-        var Ye, se, Re;
-        const r = e.key in or;
-        if (e.key !== "Enter" && e.key !== "Tab" && e.key !== "Escape" && e.key !== "Delete" && e.key !== "Backspace" && !r || Be(e.target)) return;
+        var Ye, se, ge;
+        const t = e.key in or;
+        if (e.key !== "Enter" && e.key !== "Tab" && e.key !== "Escape" && e.key !== "Delete" && e.key !== "Backspace" && !t || Be(e.target)) return;
         if (e.key === "Escape") {
-          if (!C && !w) return;
-          e.preventDefault(), e.stopPropagation(), Ze(), (Ye = g.current) != null && Ye.contains(document.activeElement) && document.activeElement.blur();
+          if (!T && !w) return;
+          e.preventDefault(), e.stopPropagation(), Ge(), (Ye = g.current) != null && Ye.contains(document.activeElement) && document.activeElement.blur();
           return;
         }
-        const t = (Re = (se = e.target).closest) == null ? void 0 : Re.call(
+        const r = (ge = (se = e.target).closest) == null ? void 0 : ge.call(
           se,
           "[data-grid-cell]"
-        ), i = t ? $e(t) : null, n = y && r && e.shiftKey && !C && !i ? Dn(e.target, g.current) : null, c = n != null && ye.has(n.rowId), l = C ?? i ?? (c ? n : null);
+        ), i = r ? Xe(r) : null, n = y && t && e.shiftKey && !T && !i ? Dn(e.target, g.current) : null, a = n != null && pe.has(n.rowId), l = T ?? i ?? (a ? n : null);
         if (!l) return;
         if (e.key === "Delete" || e.key === "Backspace") {
           if (!y || !w || !Ve) return;
-          const K = xt(
+          const K = mt(
             w,
-            v,
+            R,
             Y
           );
           if (!K) return;
@@ -379,197 +348,204 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
           });
           return;
         }
-        const h = y && e.shiftKey && r, k = r ? or[e.key] : e.shiftKey ? "left" : "right", o = r ? yn(
+        const h = y && e.shiftKey && t, k = t ? or[e.key] : e.shiftKey ? "left" : "right", o = t ? yn(
           g.current,
-          v,
+          R,
           Y,
           l.rowId,
           l.columnKey,
           k
         ) : wn(
           g.current,
-          v,
+          R,
           Y,
           l.rowId,
           l.columnKey,
           !e.shiftKey
         );
         if (!o && !(h && !w)) {
-          r && (e.preventDefault(), e.stopPropagation());
+          t && (e.preventDefault(), e.stopPropagation());
           return;
         }
         e.preventDefault(), e.stopPropagation();
-        const yt = o ? {
+        const ht = o ? {
           rowId: o.rowId,
           columnKey: o.columnKey,
           sourceIndex: o.sourceIndex
-        } : null, ge = c ? null : yt, xe = ge ? k : null;
-        if (tt.current = xe, y) {
+        } : null, we = a ? null : ht, me = we ? k : null;
+        if (et.current = me, y) {
           const K = _n(
             l,
-            ge,
+            we,
             w,
             h
           );
           K && K !== w && B(K);
-        } else o && at(o.rowId, o.columnKey, o.sourceIndex);
-        const Z = ge ?? l;
+        } else o && ot(o.rowId, o.columnKey, o.sourceIndex);
+        const M = we ?? l;
         requestAnimationFrame(
           () => rr(
             g.current,
-            Z.rowId,
-            Z.columnKey,
-            { dir: xe }
+            M.rowId,
+            M.columnKey,
+            { dir: me }
           )
         );
       },
       [
-        C,
-        v,
+        T,
+        R,
         y,
         w,
-        Ze,
+        Ge,
         Y,
         B,
-        ye,
+        pe,
         ee,
         Ve,
-        at
+        ot
       ]
     );
-    X(() => {
-      if (!W || !C && !w) return;
-      const e = (r) => {
-        const t = g.current;
-        t && !t.contains(r.target) && Ze();
+    $(() => {
+      if (!N || !T && !w) return;
+      const e = (t) => {
+        const r = g.current;
+        r && !r.contains(t.target) && Ge();
       };
       return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-    }, [W, C, w, Ze]);
-    const ct = (C == null ? void 0 : C.rowId) ?? null, dt = (C == null ? void 0 : C.columnKey) ?? null;
-    Jt(() => {
-      if (!W || ie || !ct || !dt) return;
+    }, [N, T, w, Ge]);
+    const at = (T == null ? void 0 : T.rowId) ?? null, ct = (T == null ? void 0 : T.columnKey) ?? null;
+    Qt(() => {
+      if (!N || ie || !at || !ct) return;
       const e = tr(
         g.current,
-        ct,
-        dt
+        at,
+        ct
       );
-      e && gn(e, { dir: tt.current });
-    }, [W, ie, ct, dt]);
-    const Yt = b(() => {
+      e && gn(e, { dir: et.current });
+    }, [N, ie, at, ct]);
+    const Yt = v(() => {
       let e = 0;
-      return U && (e += 40), O && (e += 56), f.forEach((r) => {
-        be(r) && (e += mt(Rt(r)));
+      return A && (e += 40), O && (e += 56), f.forEach((t) => {
+        Re(t) && (e += yt(gt(t)));
       }), e;
-    }, [f, O, U]), Bt = b(
-      () => f.filter((e) => !be(e)).length,
+    }, [f, O, A]), Bt = v(
+      () => f.filter((e) => !Re(e)).length,
       [f]
-    ), lt = b(
-      () => P && te ? un(he, te.minTableWidth) : null,
-      [he, P, te]
-    ), $t = P && hn(lt, he, pe), Ge = b(
-      () => fn(lt, he, pe),
-      [lt, he, pe]
-    ), ut = b(
-      () => pn(
-        Ge,
+    ), dt = v(
+      () => _ && te ? ln(fe, te.minTableWidth) : null,
+      [fe, _, te]
+    ), Xt = _ && hn(dt, fe, ue), Me = v(
+      () => un(dt, fe, ue),
+      [dt, fe, ue]
+    ), lt = v(
+      () => fn(
+        Me,
         Yt,
         Bt
       ),
-      [Ge, Yt, Bt]
+      [Me, Yt, Bt]
     );
-    Jt(() => {
-      if (!P) {
-        St(null);
+    Qt(() => {
+      if (!_) {
+        Pt(null);
         return;
       }
       const e = g.current;
       if (!e) return;
-      const r = () => {
+      const t = () => {
         const i = e.clientWidth;
-        i > 0 && St((n) => n === i ? n : i);
+        i > 0 && Pt((n) => n === i ? n : i);
       };
-      r();
-      const t = new ResizeObserver(r);
-      return t.observe(e), () => {
-        t.disconnect();
+      t();
+      const r = new ResizeObserver(t);
+      return r.observe(e), () => {
+        r.disconnect();
       };
     }, [
       f.length,
       u.length,
-      P,
+      _,
       j,
       O,
-      U
+      A
     ]);
-    const ft = I(
+    const ut = I(
       (e) => {
-        if (!P)
+        if (!_)
           return Qn(e);
-        const r = e.minWidth ?? (M ? Qt : void 0), t = Rt(e), i = t, n = e.maxWidth ?? t ?? lr;
-        return be(e) && i ? {
+        const t = e.minWidth ?? (G ? er : void 0), r = gt(e), i = r, n = e.maxWidth ?? r ?? lr;
+        return Re(e) && i ? {
           minWidth: i,
           width: i,
           maxWidth: n ?? i
-        } : ut != null ? {
-          width: `${ut}px`,
-          minWidth: r
-        } : { minWidth: r, maxWidth: n };
+        } : lt != null ? {
+          width: `${lt}px`,
+          minWidth: t
+        } : { minWidth: t, maxWidth: n };
       },
-      [P, ut, M]
-    ), Gr = b(() => !P || !te ? void 0 : {
-      ...M ? { zoom: pe } : void 0,
-      // The zoom-independent base, so the painted width tracks the zoom and overflows by
-      // more as you zoom in — matching the widths `getColumnStyle` hands the columns.
-      width: `${Ge ?? te.minTableWidth}px`,
-      tableLayout: "fixed"
+      [_, lt, G]
+    ), Mr = v(() => {
+      const e = G ? {
+        zoom: ue,
+        "--table-zoom-font-size": Se ? `${Se}px` : void 0
+      } : void 0;
+      return !_ || !te ? G ? { ...e, width: "max-content", minWidth: "100%" } : void 0 : {
+        ...e,
+        // The zoom-independent base, so the painted width tracks the zoom and overflows by
+        // more as you zoom in — matching the widths `getColumnStyle` hands the columns.
+        width: `${Me ?? te.minTableWidth}px`,
+        tableLayout: "fixed"
+      };
     }, [
-      P,
+      _,
       te,
-      $t,
-      Ge,
-      M,
-      pe
-    ]), Mr = I(
+      Xt,
+      Me,
+      G,
+      ue,
+      Se
+    ]), Zr = I(
       (e) => {
-        g.current = e, typeof ue == "function" ? ue(e) : ue && (ue.current = e);
+        g.current = e, typeof le == "function" ? le(e) : le && (le.current = e);
       },
-      [ue]
-    ), Ar = Ce && Ee ? {
+      [le]
+    ), Ur = Ce && Ee ? {
       selectionMode: ae,
       selectedKeys: F === "all" ? "all" : F,
-      onSelectionChange: Vn(S)
-    } : {}, Ur = (e, r = 0) => {
-      const t = e.__sourceIndex;
-      return typeof t == "number" ? t : r;
-    }, Me = I(
+      onSelectionChange: Vn(P)
+    } : {}, Ar = (e, t = 0) => {
+      const r = e.__sourceIndex;
+      return typeof r == "number" ? r : t;
+    }, Ze = I(
       (e) => {
-        const r = A.current;
-        if (!r) return;
-        const { fromSourceIndex: t, toSourceIndex: i, item: n, active: c } = r;
-        re(null), e && c && t !== i && (L != null && L.onReorderRows) && L.onReorderRows(t, i, n);
-      },
-      [L, re]
-    ), Ae = I(
-      (e, r) => {
-        const t = A.current;
+        const t = U.current;
         if (!t) return;
-        Qe.current = { x: e, y: r };
-        const i = e - t.startX, n = r - t.startY, c = Math.hypot(i, n), l = t.active || c >= xn;
+        const { fromSourceIndex: r, toSourceIndex: i, item: n, active: a } = t;
+        re(null), e && a && r !== i && (b != null && b.onReorderRows) && b.onReorderRows(r, i, n);
+      },
+      [b, re]
+    ), Ue = I(
+      (e, t) => {
+        const r = U.current;
+        if (!r) return;
+        Je.current = { x: e, y: t };
+        const i = e - r.startX, n = t - r.startY, a = Math.hypot(i, n), l = r.active || a >= xn;
         let h = {
-          ...t,
+          ...r,
           currentX: e,
-          currentY: r,
+          currentY: t,
           active: l
         };
         if (l) {
-          t.active || Tt(null);
+          r.active || Tt(null);
           const k = g.current;
           if (k) {
             const o = Rn(
               k,
-              r,
-              t.fromSourceIndex,
-              t.rowId
+              t,
+              r.fromSourceIndex,
+              r.rowId
             );
             o && (h = {
               ...h,
@@ -588,11 +564,11 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
       },
       [re]
     ), Yr = I(
-      (e, r, t, i) => {
+      (e, t, r, i) => {
         var k, o;
-        if (!nt || e.button !== 0) return;
+        if (!rt || e.button !== 0) return;
         const n = (k = g.current) == null ? void 0 : k.querySelector(
-          `tr[${nr}="${CSS.escape(r)}"]`
+          `tr[${nr}="${CSS.escape(t)}"]`
         );
         if (!n) return;
         e.preventDefault();
@@ -600,10 +576,10 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
           e.currentTarget.setPointerCapture(e.pointerId);
         } catch {
         }
-        const c = bn(n), l = kn(n), h = ((o = n.closest("table")) == null ? void 0 : o.getBoundingClientRect()) ?? n.getBoundingClientRect();
-        Qe.current = { x: e.clientX, y: e.clientY }, re({
-          rowId: r,
-          fromSourceIndex: t,
+        const a = En(n), l = kn(n), h = ((o = n.closest("table")) == null ? void 0 : o.getBoundingClientRect()) ?? n.getBoundingClientRect();
+        Je.current = { x: e.clientX, y: e.clientY }, re({
+          rowId: t,
+          fromSourceIndex: r,
           item: i,
           pointerId: e.pointerId,
           startX: e.clientX,
@@ -611,244 +587,244 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
           currentX: e.clientX,
           currentY: e.clientY,
           active: !1,
-          preview: c,
-          toSourceIndex: t,
+          preview: a,
+          toSourceIndex: r,
           dropLineY: null,
           dropLineLeft: h.left,
           dropLineWidth: h.width,
           rowClone: l
         });
       },
-      [nt, re]
-    ), Xt = p != null;
-    X(() => {
-      if (!Xt) return;
+      [rt, re]
+    ), $t = p != null;
+    $(() => {
+      if (!$t) return;
       const e = (n) => {
-        var c;
-        n.pointerId === ((c = A.current) == null ? void 0 : c.pointerId) && Ae(n.clientX, n.clientY);
-      }, r = (n) => {
-        var c;
-        n.pointerId === ((c = A.current) == null ? void 0 : c.pointerId) && Me(!0);
+        var a;
+        n.pointerId === ((a = U.current) == null ? void 0 : a.pointerId) && Ue(n.clientX, n.clientY);
       }, t = (n) => {
-        var c;
-        n.pointerId === ((c = A.current) == null ? void 0 : c.pointerId) && Me(!1);
+        var a;
+        n.pointerId === ((a = U.current) == null ? void 0 : a.pointerId) && Ze(!0);
+      }, r = (n) => {
+        var a;
+        n.pointerId === ((a = U.current) == null ? void 0 : a.pointerId) && Ze(!1);
       }, i = (n) => {
-        n.key === "Escape" && (n.preventDefault(), Me(!1));
+        n.key === "Escape" && (n.preventDefault(), Ze(!1));
       };
-      return window.addEventListener("pointermove", e), window.addEventListener("pointerup", r), window.addEventListener("pointercancel", t), window.addEventListener("keydown", i), () => {
-        window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", r), window.removeEventListener("pointercancel", t), window.removeEventListener("keydown", i);
+      return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", r), window.addEventListener("keydown", i), () => {
+        window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", r), window.removeEventListener("keydown", i);
       };
-    }, [Xt, Me, Ae]), X(() => {
+    }, [$t, Ze, Ue]), $(() => {
       if (!(p != null && p.active)) return;
-      const e = document.body.style.userSelect, r = document.body.style.cursor;
+      const e = document.body.style.userSelect, t = document.body.style.cursor;
       return document.body.style.userSelect = "none", document.body.style.cursor = "grabbing", () => {
-        document.body.style.userSelect = e, document.body.style.cursor = r;
+        document.body.style.userSelect = e, document.body.style.cursor = t;
       };
-    }, [p == null ? void 0 : p.active]), X(() => {
+    }, [p == null ? void 0 : p.active]), $(() => {
       if (!(p != null && p.active)) return;
       let e = 0;
-      const r = () => {
-        const t = A.current, i = g.current;
-        if (!(t != null && t.active) || !i) return;
-        const { x: n, y: c } = Qe.current, l = Nn(i, c);
-        l !== 0 && (i.scrollTop += l, Ae(n, c)), e = requestAnimationFrame(r);
+      const t = () => {
+        const r = U.current, i = g.current;
+        if (!(r != null && r.active) || !i) return;
+        const { x: n, y: a } = Je.current, l = bn(i, a);
+        l !== 0 && (i.scrollTop += l, Ue(n, a)), e = requestAnimationFrame(t);
       };
-      return e = requestAnimationFrame(r), () => cancelAnimationFrame(e);
-    }, [p == null ? void 0 : p.active, Ae]);
-    const Ue = I(
-      (e, r) => {
-        const t = q.current, i = g.current;
-        if (!t || !i) return;
-        et.current = { x: e, y: r };
-        const n = e - t.startX, c = r - t.startY, l = Math.hypot(n, c), h = t.active || l >= Pn;
-        if (h && !t.active && (t.active = !0, Ot(!0)), !h) return;
-        const k = Sn(i, e, r), o = k ? $e(k) : null;
-        o && (t.focus = o, B({
-          anchor: t.anchor,
+      return e = requestAnimationFrame(t), () => cancelAnimationFrame(e);
+    }, [p == null ? void 0 : p.active, Ue]);
+    const Ae = I(
+      (e, t) => {
+        const r = q.current, i = g.current;
+        if (!r || !i) return;
+        Qe.current = { x: e, y: t };
+        const n = e - r.startX, a = t - r.startY, l = Math.hypot(n, a), h = r.active || l >= Pn;
+        if (h && !r.active && (r.active = !0, Ot(!0)), !h) return;
+        const k = Sn(i, e, t), o = k ? Xe(k) : null;
+        o && (r.focus = o, B({
+          anchor: r.anchor,
           focus: o
         }));
       },
       [B]
-    ), pt = I((e) => {
-      const r = q.current;
-      q.current = null, Ot(!1), r && requestAnimationFrame(
+    ), ft = I((e) => {
+      const t = q.current;
+      q.current = null, Ot(!1), t && requestAnimationFrame(
         () => rr(
           g.current,
-          r.focus.rowId,
-          r.focus.columnKey
+          t.focus.rowId,
+          t.focus.columnKey
         )
       );
     }, []), Br = I(
       (e) => {
-        if (!y || !W || !ee || Be(e.target)) return;
-        const r = ir(
+        if (!y || !N || !ee || Be(e.target)) return;
+        const t = ir(
           e.target,
           g.current
         );
-        if (!r) return;
-        const t = $e(r);
-        t && (e.preventDefault(), e.stopPropagation(), B(gt(t)), ee({
-          rowId: t.rowId,
-          columnKey: t.columnKey,
-          sourceIndex: t.sourceIndex
+        if (!t) return;
+        const r = Xe(t);
+        r && (e.preventDefault(), e.stopPropagation(), B(wt(r)), ee({
+          rowId: r.rowId,
+          columnKey: r.columnKey,
+          sourceIndex: r.sourceIndex
         }));
       },
-      [y, B, W, ee]
-    ), $r = I(
+      [y, B, N, ee]
+    ), Xr = I(
       (e) => {
-        if (!y || !W || e.button !== 0 || A.current) return;
-        const r = ir(
+        if (!y || !N || e.button !== 0 || U.current) return;
+        const t = ir(
           e.target,
           g.current
         );
-        if (!r) return;
-        const t = $e(r);
         if (!t) return;
-        const i = e.shiftKey && w != null, n = i ? w.anchor : t;
-        tt.current = null, et.current = { x: e.clientX, y: e.clientY }, q.current = {
+        const r = Xe(t);
+        if (!r) return;
+        const i = e.shiftKey && w != null, n = i ? w.anchor : r;
+        et.current = null, Qe.current = { x: e.clientX, y: e.clientY }, q.current = {
           pointerId: e.pointerId,
           startX: e.clientX,
           startY: e.clientY,
           active: !1,
           anchor: n,
-          origin: t,
-          focus: t,
+          origin: r,
+          focus: r,
           extend: i
-        }, B(i ? { anchor: n, focus: t } : gt(t));
+        }, B(i ? { anchor: n, focus: r } : wt(r));
       },
-      [y, w, B, W]
+      [y, w, B, N]
     );
-    X(() => {
+    $(() => {
       if (!y) return;
       const e = (i) => {
         const n = q.current;
-        !n || i.pointerId !== n.pointerId || (i.preventDefault(), Ue(i.clientX, i.clientY));
-      }, r = (i) => {
-        const n = q.current;
-        !n || i.pointerId !== n.pointerId || pt(!0);
+        !n || i.pointerId !== n.pointerId || (i.preventDefault(), Ae(i.clientX, i.clientY));
       }, t = (i) => {
         const n = q.current;
-        !n || i.pointerId !== n.pointerId || pt(!1);
+        !n || i.pointerId !== n.pointerId || ft(!0);
+      }, r = (i) => {
+        const n = q.current;
+        !n || i.pointerId !== n.pointerId || ft(!1);
       };
-      return window.addEventListener("pointermove", e), window.addEventListener("pointerup", r), window.addEventListener("pointercancel", t), () => {
-        window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", r), window.removeEventListener("pointercancel", t);
+      return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", r), () => {
+        window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", r);
       };
-    }, [y, pt, Ue]), X(() => {
+    }, [y, ft, Ae]), $(() => {
       if (!ie) return;
       const e = document.body.style.userSelect;
       return document.body.style.userSelect = "none", () => {
         document.body.style.userSelect = e;
       };
-    }, [ie]), X(() => {
+    }, [ie]), $(() => {
       if (!ie) return;
       let e = 0;
-      const r = () => {
-        const t = q.current, i = g.current;
-        if (!(t != null && t.active) || !i) return;
-        const { x: n, y: c } = et.current, { dx: l, dy: h } = Tn(i, n, c);
-        (l !== 0 || h !== 0) && (l !== 0 && (i.scrollLeft += l), h !== 0 && (i.scrollTop += h), Ue(n, c)), e = requestAnimationFrame(r);
+      const t = () => {
+        const r = q.current, i = g.current;
+        if (!(r != null && r.active) || !i) return;
+        const { x: n, y: a } = Qe.current, { dx: l, dy: h } = Tn(i, n, a);
+        (l !== 0 || h !== 0) && (l !== 0 && (i.scrollLeft += l), h !== 0 && (i.scrollTop += h), Ae(n, a)), e = requestAnimationFrame(t);
       };
-      return e = requestAnimationFrame(r), () => cancelAnimationFrame(e);
-    }, [ie, Ue]), X(() => {
+      return e = requestAnimationFrame(t), () => cancelAnimationFrame(e);
+    }, [ie, Ae]), $(() => {
       if (!y || !w) return;
-      const e = (t) => {
-        if (Be(t.target)) return;
+      const e = (r) => {
+        if (Be(r.target)) return;
         const i = g.current;
         if (!i) return;
         const n = document.activeElement;
-        if (n && !i.contains(n) && t.target instanceof Node && !i.contains(t.target))
+        if (n && !i.contains(n) && r.target instanceof Node && !i.contains(r.target))
           return;
-        const c = xt(
+        const a = mt(
           w,
-          v,
+          R,
           Y
         );
-        !c || !He || (t.preventDefault(), He({ selection: w, rect: c, event: t }));
-      }, r = (t) => {
+        !a || !He || (r.preventDefault(), He({ selection: w, rect: a, event: r }));
+      }, t = (r) => {
         var h;
-        if (Be(t.target)) return;
+        if (Be(r.target)) return;
         const i = g.current;
         if (!i) return;
         const n = document.activeElement;
-        if (n && !i.contains(n) && t.target instanceof Node && !i.contains(t.target))
+        if (n && !i.contains(n) && r.target instanceof Node && !i.contains(r.target))
           return;
-        const c = xt(
+        const a = mt(
           w,
-          v,
+          R,
           Y
         );
-        if (!c || !ze) return;
-        const l = ((h = t.clipboardData) == null ? void 0 : h.getData("text/plain")) ?? "";
-        t.preventDefault(), ze({ selection: w, rect: c, text: l, event: t });
+        if (!a || !ze) return;
+        const l = ((h = r.clipboardData) == null ? void 0 : h.getData("text/plain")) ?? "";
+        r.preventDefault(), ze({ selection: w, rect: a, text: l, event: r });
       };
-      return document.addEventListener("copy", e), document.addEventListener("paste", r), () => {
-        document.removeEventListener("copy", e), document.removeEventListener("paste", r);
+      return document.addEventListener("copy", e), document.addEventListener("paste", t), () => {
+        document.removeEventListener("copy", e), document.removeEventListener("paste", t);
       };
     }, [
-      v,
+      R,
       y,
       w,
       Y,
       He,
       ze
     ]);
-    const ht = Ce && Hn(F, v), Xr = Ce && zn(F, v), jr = () => {
-      if (S) {
-        if (ht) {
-          S(/* @__PURE__ */ new Set());
+    const pt = Ce && Hn(F, R), $r = Ce && zn(F, R), jr = () => {
+      if (P) {
+        if (pt) {
+          P(/* @__PURE__ */ new Set());
           return;
         }
-        S("all");
+        P("all");
       }
-    }, qr = (e, r) => {
-      if (!S) return;
+    }, qr = (e, t) => {
+      if (!P) return;
       if (ae === "single") {
-        S(r ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set());
+        P(t ? /* @__PURE__ */ new Set([e]) : /* @__PURE__ */ new Set());
         return;
       }
-      const t = F === "all" ? new Set(v) : new Set(ar(F, v));
-      r ? t.add(e) : t.delete(e), S(t);
+      const r = F === "all" ? new Set(R) : new Set(ar(F, R));
+      t ? r.add(e) : r.delete(e), P(r);
     }, Kr = (e) => {
-      const r = Te.has(e.key);
-      return Pt ? /* @__PURE__ */ a(
+      const t = Te.has(e.key);
+      return Dt ? /* @__PURE__ */ c(
         m.Row,
         {
           id: `group-${e.key}`,
           highlightSelectedRow: !1,
           className: "bg-secondary_subtle hover:bg-secondary_subtle",
-          children: /* @__PURE__ */ a(m.Cell, { colSpan: me, className: x(D), children: Pt(e) })
+          children: /* @__PURE__ */ c(m.Cell, { colSpan: ye, className: x(W), children: Dt(e) })
         },
         `group-${e.key}`
-      ) : /* @__PURE__ */ a(
+      ) : /* @__PURE__ */ c(
         m.Row,
         {
           id: `group-${e.key}`,
           highlightSelectedRow: !1,
           className: "bg-secondary_subtle hover:bg-secondary_subtle",
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ c(
             m.Cell,
             {
-              colSpan: me,
-              className: x("py-1.5", D),
-              children: /* @__PURE__ */ E(
+              colSpan: ye,
+              className: x("py-1.5", W),
+              children: /* @__PURE__ */ C(
                 "button",
                 {
                   type: "button",
                   className: "flex w-full items-center gap-2 px-2 text-left text-xs font-medium text-secondary",
                   onClick: () => Sr(e.key),
-                  "aria-expanded": !r,
+                  "aria-expanded": !t,
                   children: [
-                    /* @__PURE__ */ a(
-                      tn,
+                    /* @__PURE__ */ c(
+                      Jr,
                       {
                         className: x(
                           "size-4 shrink-0 text-fg-quaternary transition-transform",
-                          !r && "rotate-90"
+                          !t && "rotate-90"
                         )
                       }
                     ),
-                    /* @__PURE__ */ a("span", { className: "truncate", children: e.label || "(Empty)" }),
-                    /* @__PURE__ */ E("span", { className: "text-tertiary", children: [
+                    /* @__PURE__ */ c("span", { className: "truncate", children: e.label || "(Empty)" }),
+                    /* @__PURE__ */ C("span", { className: "text-tertiary", children: [
                       "(",
                       e.rows.length,
                       ")"
@@ -861,51 +837,51 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
         },
         `group-${e.key}`
       );
-    }, jt = (e, r, t = 0) => {
-      const i = Et ? Et(e) : !1, n = ve(e), c = Ur(e, t), l = qn(F, n, v), h = Wr === n, k = (p == null ? void 0 : p.active) === !0 && p.rowId === n;
-      return /* @__PURE__ */ E(
+    }, jt = (e, t, r = 0) => {
+      const i = Et ? Et(e) : !1, n = xe(e), a = Ar(e, r), l = qn(F, n, R), h = Wr === n, k = (p == null ? void 0 : p.active) === !0 && p.rowId === n;
+      return /* @__PURE__ */ C(
         m.Row,
         {
           onAction: () => {
             var o;
-            (o = A.current) != null && o.active || ke == null || ke(e);
+            (o = U.current) != null && o.active || ve == null || ve(e);
           },
           onMouseEnter: () => V == null ? void 0 : V(e, !0),
           onMouseLeave: () => V == null ? void 0 : V(e, !1),
           id: n,
           value: e,
           columns: f,
-          expandedColSpan: me,
+          expandedColSpan: ye,
           isExpandable: i,
           highlightSelectedRow: Ee,
           renderExpandedContent: i ? wr : void 0,
           [nr]: n,
-          [Wn]: String(c),
+          [Wn]: String(a),
           className: x(
-            ke && "cursor-pointer",
+            ve && "cursor-pointer",
             fr ? "prose" : "",
-            kt && "[&>td]:after:hidden",
-            rt && "group/rowactions",
+            vt && "[&>td]:after:hidden",
+            tt && "group/rowactions",
             h && "bg-utility-brand-25 hover:bg-utility-brand-25",
-            U && l && "bg-secondary",
-            _t,
+            A && l && "bg-secondary",
+            Wt,
             je == null ? void 0 : je(e)
           ),
-          style: k ? Ln : void 0,
+          style: k ? Nn : void 0,
           children: [
-            U && /* @__PURE__ */ a(
+            A && /* @__PURE__ */ c(
               m.Cell,
               {
                 "data-grid-no-range": "",
-                className: x("relative w-10 text-center", D),
+                className: x("relative w-10 text-center", W),
                 style: { minWidth: "40px", width: "40px" },
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ c(
                   "div",
                   {
                     className: "flex items-center justify-center",
                     onClick: (o) => o.stopPropagation(),
                     onKeyDown: (o) => o.stopPropagation(),
-                    children: /* @__PURE__ */ a(
+                    children: /* @__PURE__ */ c(
                       sr,
                       {
                         checked: l,
@@ -919,63 +895,63 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
               }
             ),
             f.map((o, zt) => {
-              const yt = Ft.get(o.key), ge = cr(
+              const ht = Ft.get(o.key), we = cr(
                 o.key,
                 Q,
-                yt
-              ), xe = (ne == null ? void 0 : ne.rowId) === n && (ne == null ? void 0 : ne.columnKey) === o.key, Z = y ? Cn(
+                ht
+              ), me = (ne == null ? void 0 : ne.rowId) === n && (ne == null ? void 0 : ne.columnKey) === o.key, M = y ? Cn(
                 w,
                 n,
                 o.key,
-                v,
+                R,
                 Y
-              ) : null, Ye = !y && W && !xe && (z == null ? void 0 : z.rowId) === n && (z == null ? void 0 : z.columnKey) === o.key, se = !!(Z != null && Z.inRange) && W && !xe, Re = se && Z ? On(Z.edges) : void 0, K = ft(o);
-              return /* @__PURE__ */ a(
+              ) : null, Ye = !y && N && !me && (z == null ? void 0 : z.rowId) === n && (z == null ? void 0 : z.columnKey) === o.key, se = !!(M != null && M.inRange) && N && !me, ge = se && M ? On(M.edges) : void 0, K = ut(o);
+              return /* @__PURE__ */ c(
                 m.Cell,
                 {
                   sticky: o.sticky,
                   stickyOffset: o.stickyOffset,
                   style: {
                     ...K,
-                    ...Re ? { boxShadow: Re } : null
+                    ...ge ? { boxShadow: ge } : null
                   },
                   "data-grid-cell": "",
                   "data-grid-row-id": n,
                   "data-grid-col-key": o.key,
-                  "data-grid-source-index": c,
+                  "data-grid-source-index": a,
                   className: x(
                     "relative overflow-x-hidden",
                     // Uncontrolled single-cell highlight (legacy).
                     Ye && "z-1 outline-hidden ring-2 ring-inset ring-brand after:opacity-0",
                     // Controlled range: fill all selected cells except the anchor; perimeter via boxShadow.
                     se && "z-1 outline-hidden after:opacity-0",
-                    se && Z && !Z.isAnchor && "bg-utility-brand-25",
+                    se && M && !M.isAnchor && "bg-utility-brand-25",
                     o.cellClassName,
-                    on(ge),
-                    D
+                    nn(we),
+                    W
                   ),
                   children: (() => {
-                    const Vt = zt === 0 && (i || rt) ? /* @__PURE__ */ E("div", { className: "flex items-center", children: [
-                      L && /* @__PURE__ */ a(
+                    const Vt = zt === 0 && (i || tt) ? /* @__PURE__ */ C("div", { className: "flex items-center", children: [
+                      b && /* @__PURE__ */ c(
                         "div",
                         {
                           "data-grid-no-range": "",
                           className: "flex items-center justify-center",
-                          onClick: ($) => $.stopPropagation(),
-                          onContextMenu: ($) => $.stopPropagation(),
-                          onKeyDown: ($) => $.stopPropagation(),
-                          children: /* @__PURE__ */ a(
-                            Un,
+                          onClick: (X) => X.stopPropagation(),
+                          onContextMenu: (X) => X.stopPropagation(),
+                          onKeyDown: (X) => X.stopPropagation(),
+                          children: /* @__PURE__ */ c(
+                            An,
                             {
-                              config: L,
-                              sourceRowIndex: c,
+                              config: b,
+                              sourceRowIndex: a,
                               item: e,
-                              enableDrag: nt,
+                              enableDrag: rt,
                               isDragging: k,
-                              onDragHandlePointerDown: ($) => Yr(
-                                $,
+                              onDragHandlePointerDown: (X) => Yr(
+                                X,
                                 n,
-                                c,
+                                a,
                                 e
                               ),
                               triggerClassName: x(
@@ -984,14 +960,14 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                                 "transition-opacity group-hover/rowactions:opacity-100 focus-visible:opacity-100",
                                 h || k ? "opacity-100" : "opacity-0"
                               ),
-                              onOpenChange: ($) => Tt($ ? n : null)
+                              onOpenChange: (X) => Tt(X ? n : null)
                             }
                           )
                         }
                       ),
-                      /* @__PURE__ */ a("div", { className: "flex-1 min-w-0", children: vt(o.key, e[o.key], e) })
-                    ] }) : vt(o.key, e[o.key], e);
-                    return W ? /* @__PURE__ */ a(
+                      /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: xt(o.key, e[o.key], e) })
+                    ] }) : xt(o.key, e[o.key], e);
+                    return N ? /* @__PURE__ */ c(
                       "div",
                       {
                         "data-grid-focus": !0,
@@ -1005,13 +981,13 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                 o.key
               );
             }),
-            O && G && /* @__PURE__ */ a(
+            O && Z && /* @__PURE__ */ c(
               m.Cell,
               {
                 "data-grid-no-range": "",
-                className: x("relative w-14 text-center", D),
+                className: x("relative w-14 text-center", W),
                 style: { minWidth: "56px", width: "56px" },
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ c(
                   "button",
                   {
                     type: "button",
@@ -1019,9 +995,9 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                     "aria-label": "Delete row",
                     className: "inline-flex items-center justify-center rounded p-1 text-fg-quaternary hover:bg-secondary_subtle hover:text-fg-secondary",
                     onClick: (o) => {
-                      o.stopPropagation(), G.onDeleteRow(c);
+                      o.stopPropagation(), Z.onDeleteRow(a);
                     },
-                    children: /* @__PURE__ */ a(Yn, { name: "Trash02", className: "size-3" })
+                    children: /* @__PURE__ */ c(Yn, { name: "Trash02", className: "size-3" })
                   }
                 )
               }
@@ -1030,39 +1006,39 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
         },
         n
       );
-    }, Hr = (e) => /* @__PURE__ */ E(
+    }, Hr = (e) => /* @__PURE__ */ C(
       m.Row,
       {
         id: String(e.id),
         isExpandable: !1,
-        className: x(kt && "[&>td]:after:hidden", _t),
+        className: x(vt && "[&>td]:after:hidden", Wt),
         children: [
-          U && /* @__PURE__ */ a(
+          A && /* @__PURE__ */ c(
             m.Cell,
             {
-              className: x("relative w-10", D),
+              className: x("relative w-10", W),
               style: { minWidth: "40px", width: "40px" }
             }
           ),
-          f.map((r) => /* @__PURE__ */ a(
+          f.map((t) => /* @__PURE__ */ c(
             m.Cell,
             {
-              sticky: r.sticky,
-              stickyOffset: r.stickyOffset,
-              style: ft(r),
+              sticky: t.sticky,
+              stickyOffset: t.stickyOffset,
+              style: ut(t),
               className: x(
                 "overflow-x-hidden text-left",
-                r.cellClassName,
-                D
+                t.cellClassName,
+                W
               ),
-              children: /* @__PURE__ */ a(Bn, { height: "14px", width: "75%", className: "rounded" })
+              children: /* @__PURE__ */ c(Bn, { height: "14px", width: "75%", className: "rounded" })
             },
-            r.key
+            t.key
           )),
-          O && /* @__PURE__ */ a(
+          O && /* @__PURE__ */ c(
             m.Cell,
             {
-              className: x("w-14", D),
+              className: x("w-14", W),
               style: { minWidth: "56px", width: "56px" }
             }
           )
@@ -1070,45 +1046,46 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
       },
       String(e.id)
     ), zr = () => j ? Fe.map((e) => Hr(e)) : Oe && J ? J.flatMap((e) => {
-      const r = Te.has(e.key);
+      const t = Te.has(e.key);
       return [
         Kr(e),
-        ...r ? [] : e.rows.map(
-          (t, i) => jt(t, void 0, i)
+        ...t ? [] : e.rows.map(
+          (r, i) => jt(r, void 0, i)
         )
       ];
     }) : Fe.map(
-      (e, r) => jt(e, void 0, r)
-    ), qt = /* @__PURE__ */ a(
-      rn.Root,
+      (e, t) => jt(e, void 0, t)
+    ), qt = /* @__PURE__ */ c(
+      Qr.Root,
       {
-        ref: Mr,
-        onKeyDownCapture: W ? Zr : void 0,
-        onPointerDownCapture: y ? $r : void 0,
+        ref: Zr,
+        onKeyDownCapture: N ? Gr : void 0,
+        onPointerDownCapture: y ? Xr : void 0,
         onDoubleClickCapture: y ? Br : void 0,
         className: x(
           "w-full",
-          !P || $t ? "overflow-x-auto" : "overflow-x-hidden",
+          !_ || Xt ? "overflow-x-auto" : "overflow-x-hidden",
           Ie && "border border-secondary rounded-xl",
           "[&_tr:hover>td]:!bg-secondary_subtle",
           hr
         ),
-        size: bt,
-        children: /* @__PURE__ */ E(
+        size: Rt,
+        children: /* @__PURE__ */ C(
           m,
           {
+            "data-table-zoom-typography": Se !== void 0 ? "" : void 0,
             "aria-label": ur,
-            size: bt,
-            isEditable: W,
+            size: Rt,
+            isEditable: N,
             inlineSelection: Ee,
             className: x(
-              P && "min-w-full",
+              _ && "min-w-full",
               mr
             ),
-            style: Gr,
-            ...Ar,
+            style: Mr,
+            ...Ur,
             children: [
-              /* @__PURE__ */ E(
+              /* @__PURE__ */ C(
                 m.Header,
                 {
                   className: x(
@@ -1117,19 +1094,19 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                     yr
                   ),
                   children: [
-                    U && /* @__PURE__ */ a(
+                    A && /* @__PURE__ */ c(
                       m.Head,
                       {
                         label: "",
                         allowsSorting: !1,
                         isRowHeader: !1,
                         style: { minWidth: "40px", width: "40px" },
-                        className: x(D),
+                        className: x(W),
                         headerCellClass: "justify-center",
-                        children: ae === "multiple" && S && /* @__PURE__ */ a("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ a(
+                        children: ae === "multiple" && P && /* @__PURE__ */ c("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ c(
                           sr,
                           {
-                            checked: ht ? !0 : Xr && !ht ? "indeterminate" : !1,
+                            checked: pt ? !0 : $r && !pt ? "indeterminate" : !1,
                             onCheckedChange: () => jr(),
                             "aria-label": "Select all rows",
                             className: "items-center justify-center"
@@ -1138,33 +1115,33 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                       },
                       "selection"
                     ),
-                    f.map((e, r) => {
-                      const t = br ? Pr.get(e.key) : void 0, i = Ft.get(e.key), n = cr(
+                    f.map((e, t) => {
+                      const r = Er ? Pr.get(e.key) : void 0, i = Ft.get(e.key), n = cr(
                         e.key,
                         Q,
                         i
-                      ), c = pr.includes(e.key) || n === "center" ? "justify-center" : n === "right" ? "justify-end" : "";
-                      return /* @__PURE__ */ a(
+                      ), a = pr.includes(e.key) || n === "center" ? "justify-center" : n === "right" ? "justify-end" : "";
+                      return /* @__PURE__ */ c(
                         m.Head,
                         {
                           sticky: e.sticky,
                           stickyOffset: e.stickyOffset,
                           id: e.key,
                           label: e.label,
-                          isRowHeader: r === 0,
+                          isRowHeader: t === 0,
                           allowsSorting: e.allowsSorting,
-                          headerCellClass: `${e.headerCellClass} ${c}`,
-                          style: ft(e),
+                          headerCellClass: `${e.headerCellClass} ${a}`,
+                          style: ut(e),
                           className: x(
                             "overflow-hidden",
                             e.headClassName,
-                            D
+                            W
                           ),
-                          headerAction: t && Pe ? /* @__PURE__ */ a(
-                            Gn,
+                          headerAction: r && _e ? /* @__PURE__ */ c(
+                            Mn,
                             {
-                              column: t,
-                              columnLabel: t.label ?? (i ? sn(i, Er) : e.label),
+                              column: r,
+                              columnLabel: r.label ?? (i ? rn(i, Ir) : e.label),
                               currentAlignment: i ? dr(
                                 i,
                                 Q ?? /* @__PURE__ */ new Map()
@@ -1172,77 +1149,77 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                               capabilities: kr,
                               hideDisabled: f.length <= 1,
                               onAction: Fr.get(e.key),
-                              renderExtraItems: Ir,
+                              renderExtraItems: Lr,
                               showOnHeaderHover: !0
                             }
                           ) : void 0,
-                          children: (Xe == null ? void 0 : Xe(e.key)) ?? null
+                          children: ($e == null ? void 0 : $e(e.key)) ?? null
                         },
                         e.key
                       );
                     }),
-                    O && /* @__PURE__ */ a(
+                    O && /* @__PURE__ */ c(
                       m.Head,
                       {
                         label: "",
                         allowsSorting: !1,
                         isRowHeader: !1,
                         style: { minWidth: "56px", width: "56px" },
-                        className: x(D)
+                        className: x(W)
                       },
                       "actions"
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ E(m.Body, { children: [
-                !Ut && zr(),
-                Cr && /* @__PURE__ */ a(
+              /* @__PURE__ */ C(m.Body, { children: [
+                !At && zr(),
+                Cr && /* @__PURE__ */ c(
                   m.Row,
                   {
                     id: "empty-state",
                     highlightSelectedRow: !1,
-                    children: /* @__PURE__ */ a(
+                    children: /* @__PURE__ */ c(
                       m.Cell,
                       {
-                        colSpan: me,
+                        colSpan: ye,
                         className: x(
                           "text-left text-placeholder_subtle border-b border-secondary py-3",
-                          D
+                          W
                         ),
-                        children: Wt
+                        children: bt
                       }
                     )
                   },
                   "empty-state"
                 ),
-                ot && G && /* @__PURE__ */ E(
+                st && Z && /* @__PURE__ */ C(
                   m.Row,
                   {
                     id: "add-row-footer",
                     highlightSelectedRow: !1,
                     children: [
-                      /* @__PURE__ */ a(
+                      /* @__PURE__ */ c(
                         m.Cell,
                         {
-                          colSpan: me - (O ? 1 : 0),
-                          className: x(D),
-                          children: /* @__PURE__ */ a(
-                            Mn,
+                          colSpan: ye - (O ? 1 : 0),
+                          className: x(W),
+                          children: /* @__PURE__ */ c(
+                            Zn,
                             {
                               color: "tertiary",
                               className: "bg-secondary text-primary",
                               size: "xs",
-                              onClick: G.onAddRow,
+                              onClick: Z.onAddRow,
                               children: "+ Add Row"
                             }
                           )
                         }
                       ),
-                      O && /* @__PURE__ */ a(
+                      O && /* @__PURE__ */ c(
                         m.Cell,
                         {
-                          className: x("w-14", D),
+                          className: x("w-14", W),
                           style: { minWidth: "56px", width: "56px" }
                         }
                       )
@@ -1250,12 +1227,12 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
                   },
                   "add-row-footer"
                 ),
-                Or && Ke && /* @__PURE__ */ a(
-                  An,
+                Or && Ke && /* @__PURE__ */ c(
+                  Un,
                   {
                     ...Ke,
                     hasActionsColumn: O,
-                    hasSelectionColumn: U,
+                    hasSelectionColumn: A,
                     showBorders: !!Ie
                   }
                 )
@@ -1264,20 +1241,20 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
           }
         )
       }
-    ), Kt = W ? /* @__PURE__ */ a(
+    ), Kt = N ? /* @__PURE__ */ c(
       mn,
       {
-        rowIds: v,
+        rowIds: R,
         columnKeys: Y,
         containerRef: g,
-        onSelectCell: at,
+        onSelectCell: ot,
         onEditingCellChange: _r,
         children: qt
       }
-    ) : qt, Ht = p != null && p.active ? /* @__PURE__ */ E(wt, { children: [
-      /* @__PURE__ */ a(En, { session: p }),
-      p.dropLineY != null && /* @__PURE__ */ a(
-        In,
+    ) : qt, Ht = p != null && p.active ? /* @__PURE__ */ C(Jt, { children: [
+      /* @__PURE__ */ c(In, { session: p }),
+      p.dropLineY != null && /* @__PURE__ */ c(
+        Ln,
         {
           y: p.dropLineY,
           left: p.dropLineLeft,
@@ -1285,23 +1262,23 @@ const be = (s) => !!s.width || !!(s.maxWidth && s.sticky === "right"), Rt = (s)
         }
       )
     ] }) : null;
-    return Tr ? /* @__PURE__ */ E("div", { className: "flex flex-col gap-3", children: [
-      Mt && Gt,
+    return Tr ? /* @__PURE__ */ C("div", { className: "flex flex-col gap-3", children: [
+      Zt && Mt,
       Kt,
-      At && T && /* @__PURE__ */ a(
-        nn,
+      Ut && S && /* @__PURE__ */ c(
+        en,
         {
-          currentPage: T.currentPage,
-          pageSize: T.pageSize,
-          totalPages: T.totalPages,
-          totalItems: T.totalItems,
-          onPageChange: T.onPageChange,
-          onPageSizeChange: T.onPageSizeChange,
-          showPagination: T.showPagination
+          currentPage: S.currentPage,
+          pageSize: S.pageSize,
+          totalPages: S.totalPages,
+          totalItems: S.totalItems,
+          onPageChange: S.onPageChange,
+          onPageSizeChange: S.onPageSizeChange,
+          showPagination: S.showPagination
         }
       ),
       Ht
-    ] }) : /* @__PURE__ */ E(wt, { children: [
+    ] }) : /* @__PURE__ */ C(Jt, { children: [
       Kt,
       Ht
     ] });