@dxos/react-ui-table 0.6.7-staging.e9eb1ed → 0.6.8-main.046e6cf

package/dist/lib/browser/index.mjs

@@ -91,21 +91,15 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 };
 
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
-import { X as X2, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from "@phosphor-icons/react";
+import { X, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from "@phosphor-icons/react";
 import React4, { useRef as useRef2, useState as useState6, useCallback as useCallback5 } from "react";
-import { Button as Button2, DensityProvider, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
-import { getSize as getSize3, mx as mx3 } from "@dxos/react-ui-theme";
+import { Button as Button2, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnSettingsForm.tsx
-import { Check, Trash, X } from "@phosphor-icons/react";
 import React2, { useRef, useState as useState2 } from "react";
-import { Button, Input, Select, Separator, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
+import { Button, Input, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseInt } from "@dxos/util";
-var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement("div", {
-  role: "none",
-  className: mx2("p-2", className)
-}, children);
 var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
   const [formState, setFormState] = useState2({
     prop: column.id,
@@ -117,9 +111,6 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   });
   const propRef = useRef(null);
   const { t } = useTranslation2(translationKey);
-  const handleCancel = () => {
-    onClose?.();
-  };
   const handleSave = () => {
     const { prop, refTable, refProp, type, label, digits } = formState;
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
@@ -149,20 +140,21 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
     onClose?.();
   };
   return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1"
-  }, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+    className: "p-1 space-y-2"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: formState.label ?? "",
     onChange: (event) => setFormState((prevState) => ({
       ...prevState,
       label: event.target.value
     })),
-    autoFocus: true
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1 mbs-3"
-  }, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+    autoFocus: true,
+    "data-testid": "table.column-settings.label"
+  }))), /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     value: formState.prop ?? "",
@@ -170,17 +162,17 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
       ...prevState,
       prop: event.target.value.replace(/[^\w_]/g, "")
     }))
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1 mbs-3"
-  }, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }))), /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.type,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
       type: value
     }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
-    placeholder: "Type",
-    classNames: "is-full"
+    classNames: "is-full",
+    placeholder: "Type"
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, [
     "number",
     "boolean",
@@ -189,17 +181,17 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   ].map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: type,
     value: type
-  }, t(`${type} column type label`))))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1 mbs-3"
-  }, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, t(`${type} column type label`))))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     value: formState.digits ?? "",
     onChange: (event) => setFormState((prevState) => ({
       ...prevState,
       digits: event.target.value
     }))
-  }))), formState.type === "ref" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1 mbs-3"
-  }, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }))), formState.type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.refTable,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
@@ -211,49 +203,32 @@ var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDel
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
-    classNames: "mbe-1 mbs-3"
-  }, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, name ?? id)))))))), formState.refTable && /* @__PURE__ */ React2.createElement("div", {
+    className: "space-y-1"
+  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
     value: formState.refProp,
     onValueChange: (value) => setFormState((prevState) => ({
       ...prevState,
       refProp: value
     }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
-    placeholder: "Property",
-    classNames: "is-full"
+    placeholder: "Property"
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, label ?? id)))))))), /* @__PURE__ */ React2.createElement(Separator, {
-    classNames: "mli-2"
-  }), /* @__PURE__ */ React2.createElement(Section, {
-    className: "space-b-1.5"
+  }, label ?? id))))))))), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "h-1"
+  }), /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-row justify-end gap-1"
   }, /* @__PURE__ */ React2.createElement(Button, {
+    onClick: handleDelete,
+    "data-testid": "table.column-settings.delete"
+  }, t("delete label")), /* @__PURE__ */ React2.createElement(Button, {
     variant: "primary",
-    classNames: "is-full flex gap-2",
-    onClick: handleSave
-  }, /* @__PURE__ */ React2.createElement("span", null, t("save label")), /* @__PURE__ */ React2.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React2.createElement(Check, {
-    className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button, {
-    classNames: "is-full flex gap-2",
-    onClick: handleCancel
-  }, /* @__PURE__ */ React2.createElement("span", null, t("cancel label", {
-    ns: "os"
-  })), /* @__PURE__ */ React2.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React2.createElement(X, {
-    className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button, {
-    classNames: "is-full flex gap-2",
-    onClick: handleDelete
-  }, /* @__PURE__ */ React2.createElement("span", null, t("delete label")), /* @__PURE__ */ React2.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React2.createElement(Trash, {
-    className: getSize2(5)
-  }))));
+    onClick: handleSave,
+    "data-testid": "table.column-settings.save"
+  }, t("save label"))));
 };
 
 // packages/ui/react-ui-table/src/hooks/useColumnSizing.ts
@@ -363,17 +338,7 @@ var useSortColumn = (column) => {
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
 import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
 var usePinLastRow = (pinLastRow, table, data) => {
-  const { scrollContextRef } = useTableRootContext();
   const [pinnedRowKey, setPinnedRowKey] = useState5();
-  const scrollToBottom = useCallback3(() => {
-    const element = scrollContextRef.current;
-    const scrollHeight = element?.scrollHeight;
-    if (element && scrollHeight) {
-      requestAnimationFrame(() => element.scrollTo({
-        top: scrollHeight
-      }));
-    }
-  }, []);
   const pinRow = useCallback3((rowToPin) => {
     table.resetRowPinning();
     rowToPin.pin("bottom");
@@ -397,12 +362,8 @@ var usePinLastRow = (pinLastRow, table, data) => {
       return;
     }
     pinRow(lastRow);
-    if (pinnedRowKey !== void 0) {
-      scrollToBottom();
-    }
   }, [
     table,
-    scrollToBottom,
     pinnedRowKey
   ]);
   useEffect2(() => {
@@ -472,7 +433,7 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
     shouldPreventFocusOnClose
   ]);
   return /* @__PURE__ */ React4.createElement("div", {
-    className: "flex items-center justify-center justify-between"
+    className: "flex items-center justify-between"
   }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex items-center gap-1 truncate",
     title
@@ -493,9 +454,10 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
   }, /* @__PURE__ */ React4.createElement(Popover2.Anchor, {
     asChild: true
   }, /* @__PURE__ */ React4.createElement(Button2, {
-    variant: "ghost"
+    variant: "ghost",
+    "data-testid": "table.column-menu"
   }, /* @__PURE__ */ React4.createElement(CaretDown2, {
-    className: getSize3(4)
+    className: getSize2(4)
   })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
     onCloseAutoFocus: onDropdownCloseAutoFocus,
     sideOffset: 4,
@@ -507,7 +469,7 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
   }, "Sort ascending"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(ArrowUp, {
-    className: getSize3(4)
+    className: getSize2(4)
   }))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: () => onSelectSort("desc")
   }, /* @__PURE__ */ React4.createElement("span", {
@@ -515,15 +477,15 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
   }, "Sort descending"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(ArrowDown, {
-    className: getSize3(4)
+    className: getSize2(4)
   }))), sortDirection && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: onClearSort
   }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
   }, "Clear sort"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(X2, {
-    className: getSize3(4)
+  }, /* @__PURE__ */ React4.createElement(X, {
+    className: getSize2(4)
   })))), columnOrderable && /* @__PURE__ */ React4.createElement(React4.Fragment, null, columnPosition !== "start" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: () => onColumnReorder(header.column.id, "left")
   }, /* @__PURE__ */ React4.createElement("span", {
@@ -531,7 +493,7 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
   }, "Move left"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(ArrowLeft, {
-    className: mx3(getSize3(4))
+    className: mx2(getSize2(4))
   }))), columnPosition !== "end" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: () => onColumnReorder(header.column.id, "right")
   }, /* @__PURE__ */ React4.createElement("span", {
@@ -539,24 +501,21 @@ var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ..
   }, "Move right"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(ArrowRight, {
-    className: mx3(getSize3(4))
+    className: mx2(getSize2(4))
   })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: onOpenColumnSettings
+    onClick: onOpenColumnSettings,
+    "data-testid": "table.open-column-settings"
   }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
   }, "Column settings"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(GearSix, {
-    className: mx3(getSize3(4), "rotate-90")
-  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, {
-    classNames: "w-60"
-  }, /* @__PURE__ */ React4.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React4.createElement(ColumnSettingsForm, {
+    className: mx2(getSize2(4), "rotate-90")
+  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, null, /* @__PURE__ */ React4.createElement(ColumnSettingsForm, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
-  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))))));
+  })), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))))));
 };
 var SortIndicator = ({ direction, onClick }) => {
   if (direction === void 0) {
@@ -566,12 +525,12 @@ var SortIndicator = ({ direction, onClick }) => {
   switch (direction) {
     case "asc":
       icon = /* @__PURE__ */ React4.createElement(ArrowUp, {
-        className: getSize3(3)
+        className: getSize2(3)
       });
       break;
     case "desc":
       icon = /* @__PURE__ */ React4.createElement(ArrowDown, {
-        className: getSize3(3)
+        className: getSize2(3)
       });
       break;
   }
@@ -584,9 +543,9 @@ var SortIndicator = ({ direction, onClick }) => {
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState8, useContext as useContext3, memo } from "react";
-import { useDefaultValue } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import React8, { Fragment, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3, memo } from "react";
+import { DensityProvider, useDefaultValue } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
@@ -623,48 +582,84 @@ var useTableRootContext = () => {
 var TableRootContext = createContext2({});
 
 // packages/ui/react-ui-table/src/theme.ts
-import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx4 } from "@dxos/react-ui-theme";
+import { focusRing, ghostSelected, ghostSelectedCurrent, mx as mx3 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 var flushPadding = "pli-0 plb-0";
-var textPadding = "pli-2 plb-0.5";
-var headPadding = "pli-2 plb-1";
-var gridCellFocusRing = "focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400";
-var tableRoot = ({ fullWidth }, ...etc) => mx4("table-fixed", fullWidth && "is-full", ...etc);
-var groupTh = (_props, ...etc) => mx4("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header, stickyHeader }, ...etc) => mx4(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...etc);
-var theadTr = (_props, ...etc) => mx4("group", ...etc);
-var theadTh = ({ border }, ...etc) => mx4("relative", "text-start font-medium select-none truncate", headPadding, border && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
+var textPadding = "pli-2 plb-0";
+var headPadding = "pli-2 plb-0";
+var gridCellFocusRing = "relative focus-within:outline focus-within:outline-1 outline-primary-500 outline-offset-[-1px]";
+var borderColors = "border-neutral-200 dark:border-neutral-700";
+var stickyRowColors = "bg-neutral-50  dark:bg-neutral-800";
+var tableRoot = ({ fullWidth }, ...etc) => mx3("table-fixed", "text-neutral-800 dark:text-neutral-200", fullWidth && "is-full", ...etc);
+var groupTh = (_props, ...etc) => mx3("text-start font-medium", flushPadding, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx3(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", stickyRowColors, ...etc);
+var theadTr = (_props, ...etc) => mx3("group", ...etc);
+var theadTh = ({ border }, ...etc) => mx3("relative", "text-start text-xs select-none truncate", headPadding, border && borderColors, border && "border-t border-b border-l last:border-r", ...etc);
 var theadResizeRoot = ({ isResizing }) => {
-  return mx4("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
+  return mx3("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", isResizing && "bg-primary-500");
 };
-var tbodyRoot = (_props, ...etc) => mx4(...etc);
-var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => mx4("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", isPinned && "sticky z-1 bottom-[-1px] base-surface", ...etc);
-var tdRoot = ({ border, isGrid }, ...etc) => mx4("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
-var tdContent = (_props, ...etc) => mx4(...etc);
-var tfootRoot = (_props, ...etc) => mx4("sticky block-end-0 z-10", modalSurface, ...etc);
-var tfootTr = (_props, ...etc) => mx4(...etc);
-var tfootTh = ({ border }, ...etc) => mx4(textPadding, modalSurface, border && groupBorder, ...etc);
+var tbodyRoot = (_props, ...etc) => mx3(...etc);
+var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => mx3("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer", isPinned && "sticky z-1 block-end-0", isPinned && stickyRowColors, ...etc);
+var tdRoot = ({ border, isGrid, pinned }, ...etc) => mx3("relative", "focus-within:!bg-neutral-50 dark:focus-within:!bg-neutral-900", flushPadding, border && "border-b border-l last:border-r border-neutral-200 dark:border-neutral-700", pinned && "border-t", isGrid && gridCellFocusRing, ...etc);
 
 // packages/ui/react-ui-table/src/components/Cell/Cell.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React5 from "react";
+import React5, { useCallback as useCallback6 } from "react";
 var CELL_NAME = "Cell";
 var FocusableCell = ({ cell, children }) => {
   const tableContext = useTableContext();
   const domAttributes = useFocusableGroup({
     tabBehavior: "limited"
   });
-  const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
+  const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
+  const className = tdRoot({
+    ...tableContext,
+    pinned
+  }, cell.column.columnDef.meta?.cell?.classNames);
+  const handleKeyDown = useCallback6(({ key, currentTarget }) => {
+    if (key !== "Enter") {
+      return;
+    }
+    const currentRow2 = currentTarget.closest("tr");
+    if (!currentRow2) {
+      return;
+    }
+    const cellIndex = Array.from(currentRow2.cells || []).indexOf(currentTarget);
+    const nextSibling = currentRow2.nextElementSibling;
+    if (!(nextSibling instanceof HTMLTableRowElement)) {
+      let depth = 0;
+      const pollForNewRow = () => {
+        const newNextSibling = currentRow2.nextElementSibling;
+        if (newNextSibling instanceof HTMLTableRowElement) {
+          const nextCell = newNextSibling.cells[cellIndex];
+          const input = nextCell.querySelector("input");
+          if (input) {
+            input.focus();
+          }
+          currentRow2.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
+          });
+        } else if (depth++ < 100) {
+          requestAnimationFrame(pollForNewRow);
+        }
+      };
+      requestAnimationFrame(pollForNewRow);
+    }
+  }, []);
   return /* @__PURE__ */ React5.createElement("td", {
+    "data-testid": "table.cell",
     tabIndex: 0,
     ...domAttributes,
-    className
+    className,
+    onKeyDown: handleKeyDown
   }, children);
 };
 var StaticCell = ({ cell, children }) => {
   const tableContext = useTableContext();
   return /* @__PURE__ */ React5.createElement("td", {
+    "data-testid": "table.cell",
     className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
   }, children);
 };
@@ -699,6 +694,7 @@ var TableBody = ({ rows }) => {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: classNames,
       "data-index": row.index,
+      "data-testid": "table.data-row",
       ref: virtualizer.measureElement,
       ...isCurrent && {
         "aria-current": "location"
@@ -722,7 +718,6 @@ var TableBody = ({ rows }) => {
         key: cell.id,
         cell
       }, flexRender(cell.column.columnDef.cell, {
-        className: "pli-2",
         ...cell.getContext()
       }));
     }), expand && /* @__PURE__ */ React6.createElement("td", null));
@@ -730,44 +725,22 @@ var TableBody = ({ rows }) => {
 };
 TableBody.displayName = TABLE_BODY_NAME;
 
-// packages/ui/react-ui-table/src/components/Table/TableFooter.tsx
+// packages/ui/react-ui-table/src/components/Table/TableHead.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import React7 from "react";
-var TABLE_FOOT_NAME = "TableFooter";
-var TableFooter = (props) => {
-  const tableContext = useTableContext();
-  const { table, expand, debug } = tableContext;
-  const footers = table.getFooterGroups();
-  return /* @__PURE__ */ React7.createElement("tfoot", {
-    className: tfootRoot(props)
-  }, footers.map((footerGroup) => /* @__PURE__ */ React7.createElement("tr", {
-    key: footerGroup.id,
-    className: tfootTr(tableContext)
-  }, debug && /* @__PURE__ */ React7.createElement("th", null), footerGroup.headers.map((footer) => {
-    return /* @__PURE__ */ React7.createElement("th", {
-      key: footer.id,
-      className: tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)
-    }, footer.isPlaceholder ? null : flexRender2(footer.column.columnDef.footer, footer.getContext()));
-  }), expand && /* @__PURE__ */ React7.createElement("th", null))));
-};
-TableFooter.displayName = TABLE_FOOT_NAME;
-
-// packages/ui/react-ui-table/src/components/Table/TableHead.tsx
-import { flexRender as flexRender3 } from "@tanstack/react-table";
-import React8 from "react";
 var TABLE_HEAD_NAME = "TableHeader";
 var TableHead = (_props) => {
   const tableContext = useTableContext();
   const headerGroups = tableContext.table.getHeaderGroups();
-  return /* @__PURE__ */ React8.createElement("thead", {
+  return /* @__PURE__ */ React7.createElement("thead", {
     className: theadRoot(tableContext)
   }, headerGroups.map((headerGroup) => {
     return (
       // Group element to hover resize handles.
-      /* @__PURE__ */ React8.createElement("tr", {
+      /* @__PURE__ */ React7.createElement("tr", {
         key: headerGroup.id,
         className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ React8.createElement("th", {
+      }, tableContext.debug && /* @__PURE__ */ React7.createElement("th", {
         className: "font-mono",
         style: {
           width: 32
@@ -776,13 +749,14 @@ var TableHead = (_props) => {
         const isResizing = header.column.getIsResizing();
         const onResize = header.getResizeHandler();
         const resizable = header.column.columnDef.meta?.resizable;
-        return /* @__PURE__ */ React8.createElement("th", {
+        return /* @__PURE__ */ React7.createElement("th", {
           key: header.id,
           style: {
             width: header.getSize()
           },
-          className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)
-        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React8.createElement("div", {
+          className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames),
+          "data-testid": "table.header-cell"
+        }, !header || header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React7.createElement("div", {
           className: theadResizeRoot({
             isResizing
           }),
@@ -790,7 +764,7 @@ var TableHead = (_props) => {
           onMouseDown: onResize,
           onTouchStart: onResize
         }));
-      }), tableContext.expand && /* @__PURE__ */ React8.createElement("th", null))
+      }), tableContext.expand && /* @__PURE__ */ React7.createElement("th", null))
     );
   }));
 };
@@ -799,18 +773,20 @@ TableHead.displayName = TABLE_HEAD_NAME;
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 var TableRoot = ({ children }) => {
   const contextValue = useTableRootContext();
-  return /* @__PURE__ */ React9.createElement(TableRootContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(TableRootContext.Provider, {
     value: contextValue
-  }, children);
+  }, /* @__PURE__ */ React8.createElement(DensityProvider, {
+    density: "fine"
+  }, children));
 };
 var TableViewport = ({ children, classNames, asChild, ...props }) => {
   const { scrollContextRef } = useContext3(TableRootContext);
-  const classes = mx5(classNames, "overflow-auto");
-  return asChild ? /* @__PURE__ */ React9.createElement(Slot, {
+  const classes = mx4(classNames, "overflow-auto");
+  return asChild ? /* @__PURE__ */ React8.createElement(Slot, {
     ref: scrollContextRef,
     className: classes,
     ...props
-  }, children) : /* @__PURE__ */ React9.createElement("div", {
+  }, children) : /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: classes,
     ref: scrollContextRef,
@@ -824,7 +800,7 @@ var TablePrimitive = (props) => {
   const [data, setData] = useState8([
     ...incomingData
   ]);
-  const forceUpdate = useCallback6(() => setData([
+  const forceUpdate = useCallback7(() => setData([
     ...incomingData
   ]), [
     incomingData
@@ -893,37 +869,39 @@ var TablePrimitive = (props) => {
   ]);
   usePinLastRow(pinLastRow, table, data);
   const expand = false;
-  return /* @__PURE__ */ React9.createElement(TableProvider2, {
+  return /* @__PURE__ */ React8.createElement(TableProvider2, {
     ...props,
     ...columnSorting,
     table,
     header,
     expand,
     isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React9.createElement(TableImpl, {
+  }, /* @__PURE__ */ React8.createElement(TableImpl, {
     debug: false,
     ...props
   }));
 };
 var TableImpl = (props) => {
-  const { debug, classNames, role, footer, grouping, fullWidth } = props;
+  const { debug, classNames, role, grouping, fullWidth } = props;
   const { table } = useTableContext();
   if (debug) {
-    return /* @__PURE__ */ React9.createElement("pre", {
+    return /* @__PURE__ */ React8.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ React9.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
+    }, /* @__PURE__ */ React8.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
   const TableComponent = isResizingColumn ? MemoizedVirtualizedTableContent : VirtualizedTableContent;
-  return /* @__PURE__ */ React9.createElement("table", {
+  return /* @__PURE__ */ React8.createElement("table", {
     role,
     className: tableRoot(props, classNames),
-    ...!fullWidth && {
-      style: {
+    style: {
+      // borderCollapse: 'separate',
+      borderSpacing: 0,
+      ...!fullWidth && {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React9.createElement(TableComponent, null) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
+  }, /* @__PURE__ */ React8.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React8.createElement(TableComponent, null) : /* @__PURE__ */ React8.createElement(GroupedTableContent, null));
 };
 var VirtualizedTableContent = () => {
   const { table } = useTableContext();
@@ -951,22 +929,22 @@ var VirtualizedTableContent = () => {
     ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
     ...pinnedRows
   ].filter((r) => !!r);
-  return /* @__PURE__ */ React9.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
+  return /* @__PURE__ */ React8.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React8.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React9.createElement("tr", {
+  }, /* @__PURE__ */ React8.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React9.createElement("td", {
+  }, /* @__PURE__ */ React8.createElement("td", {
     style: {
       height: `${paddingTop}px`
     },
     role: "none"
-  }))), /* @__PURE__ */ React9.createElement(TableBody, {
+  }))), /* @__PURE__ */ React8.createElement(TableBody, {
     rows: rowsToRender
-  }), paddingBottom > 0 && /* @__PURE__ */ React9.createElement("tbody", {
+  }), paddingBottom > 0 && /* @__PURE__ */ React8.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React9.createElement("tr", {
+  }, /* @__PURE__ */ React8.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React9.createElement("td", {
+  }, /* @__PURE__ */ React8.createElement("td", {
     style: {
       height: `${paddingBottom}px`
     },
@@ -976,14 +954,14 @@ var VirtualizedTableContent = () => {
 var MemoizedVirtualizedTableContent = /* @__PURE__ */ memo(VirtualizedTableContent);
 var GroupedTableContent = () => {
   const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext();
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ React9.createElement(Fragment, {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
+    return /* @__PURE__ */ React8.createElement(Fragment, {
       key: i
-    }, /* @__PURE__ */ React9.createElement("thead", null, /* @__PURE__ */ React9.createElement("tr", null, debug && /* @__PURE__ */ React9.createElement("th", null), /* @__PURE__ */ React9.createElement("th", {
+    }, /* @__PURE__ */ React8.createElement("thead", null, /* @__PURE__ */ React8.createElement("tr", null, debug && /* @__PURE__ */ React8.createElement("th", null), /* @__PURE__ */ React8.createElement("th", {
       // TODO(burdon): Calculate row span.
       colSpan: getHeaderGroups()[0].headers.length,
       className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React9.createElement(TableBody, {
+    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React8.createElement(TableBody, {
       rows: row.subRows
     }));
   }));
@@ -996,14 +974,14 @@ var Table = {
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
-import { Check as Check2, ClipboardText, X as X3 } from "@phosphor-icons/react";
+import { Check, ClipboardText, X as X2 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
+import React9, { useCallback as useCallback8, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
 import { log } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx6 } from "@dxos/react-ui-theme";
+import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
@@ -1011,7 +989,7 @@ var createColumnBuilder = () => ({
 });
 var ComboboxBuilderCell = (cellContext) => {
   const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return model ? /* @__PURE__ */ React10.createElement(CellCombobox, {
+  return model ? /* @__PURE__ */ React9.createElement(CellCombobox, {
     model,
     value: cellContext.getValue(),
     onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
@@ -1022,7 +1000,7 @@ var StringBuilderCell = (cellContext) => {
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
-  const getInitialValue = useCallback7(() => {
+  const getInitialValue = useCallback8(() => {
     return initialValue?.content ?? initialValue;
   }, [
     initialValue
@@ -1044,7 +1022,7 @@ var StringBuilderCell = (cellContext) => {
     const rowCount = cellContext.table.getRowModel().rows.length;
     placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
   }
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.TextInput, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     placeholder: placeholder ? "Add row..." : void 0,
@@ -1056,7 +1034,8 @@ var StringBuilderCell = (cellContext) => {
     value: value ?? "",
     onBlur: handleSave,
     onChange: (event) => setValue(event.target.value),
-    onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel()
+    onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel(),
+    autoComplete: "off"
   }));
 };
 var parseNumber = (text) => text?.trim().length ? Number(text) : NaN;
@@ -1091,7 +1070,7 @@ var NumberBuilderCell = (cellContext) => {
     setText(displayNumber(value, digits));
     ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.TextInput, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     value: text,
@@ -1107,17 +1086,18 @@ var NumberBuilderCell = (cellContext) => {
         /* (event.key === 'Escape' && handleCancel()) || */
         event.key === "Enter" && handleSave()
       );
-    }
+    },
+    autoComplete: "off"
   }));
 };
 var RowSelectorBuilderCell = (cellContext) => {
   const { cell } = cellContext.column.columnDef.meta;
   const { row } = cellContext;
   const checked = row.getCanSelect() ? row.getIsSelected() : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? "indeterminate" : row.getIsAllSubRowsSelected());
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     className: "flex justify-center w-full h-full",
     role: "presentation"
-  }, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Checkbox, {
+  }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
     size: 4,
     classNames: [
       cell?.classNames
@@ -1134,7 +1114,7 @@ var RowSelectorBuilderCell = (cellContext) => {
 var SwitchBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Switch, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Switch, {
     classNames: "block mli-auto",
     onClick: (event) => event.stopPropagation(),
     disabled: !onUpdate,
@@ -1156,8 +1136,8 @@ var ColumnBuilder = class {
       },
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
-        return /* @__PURE__ */ React10.createElement("div", {
-          className: mx6("truncate", classNames)
+        return /* @__PURE__ */ React9.createElement("div", {
+          className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -1187,8 +1167,8 @@ var ColumnBuilder = class {
         if (typeof value === "object" && value?.__typename === "dxos.Text.v0") {
           value = value.content;
         }
-        return /* @__PURE__ */ React10.createElement("div", {
-          className: mx6("truncate", textPadding, classNames)
+        return /* @__PURE__ */ React9.createElement("div", {
+          className: mx5("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -1241,15 +1221,15 @@ var ColumnBuilder = class {
           const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
             addSuffix: true
           }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React10.createElement("div", {
-            className: mx6(textPadding, classNames)
+          return /* @__PURE__ */ React9.createElement("div", {
+            className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
           log.info("formatError", {
             value
           }, {
             F: __dxlog_file,
-            L: 376,
+            L: 378,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1283,9 +1263,9 @@ var ColumnBuilder = class {
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React10.createElement(Tooltip.Provider, null, /* @__PURE__ */ React10.createElement(Tooltip.Root, null, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React9.createElement(Tooltip.Provider, null, /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
           side: "right"
-        }, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React10.createElement(ClipboardText, {
+        }, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React9.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
@@ -1323,10 +1303,10 @@ var ColumnBuilder = class {
       header: ({ table }) => {
         const { rowsSelectable } = useTableContext();
         const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ React10.createElement("div", {
+        return rowsSelectable === "multi" ? /* @__PURE__ */ React9.createElement("div", {
           className: "flex justify-center w-full h-full",
           role: "presentation"
-        }, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Checkbox, {
+        }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
           size: 4,
           classNames: [
             "mli-auto",
@@ -1368,24 +1348,24 @@ var ColumnBuilder = class {
   * Icon based on boolean value.
   */
   icon({ label, size, on, off, ...props } = {}) {
-    const IconOn = on?.Icon ?? Check2;
-    const IconOff = off?.Icon ?? X3;
+    const IconOn = on?.Icon ?? Check;
+    const IconOff = off?.Icon ?? X2;
     return {
       size: size ?? 32,
       // TODO(zan): Implement sort algorithm
       enableSorting: false,
-      header: (column) => /* @__PURE__ */ React10.createElement("div", {
+      header: (column) => /* @__PURE__ */ React9.createElement("div", {
         className: "justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx6("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+          return /* @__PURE__ */ React9.createElement(IconOn, {
+            className: mx5("block mli-auto", getSize3(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
-          return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx6("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+          return /* @__PURE__ */ React9.createElement(IconOff, {
+            className: mx5("block mli-auto", getSize3(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1404,9 +1384,9 @@ var ColumnBuilder = class {
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
-        return /* @__PURE__ */ React10.createElement("div", {
+        return /* @__PURE__ */ React9.createElement("div", {
           className: "overflow-scroll"
-        }, /* @__PURE__ */ React10.createElement("code", {
+        }, /* @__PURE__ */ React9.createElement("code", {
           className: "text-xs"
         }, JSON.stringify(value)));
       },
@@ -1566,12 +1546,8 @@ export {
   tableRoot,
   tbodyRoot,
   tbodyTr,
-  tdContent,
   tdRoot,
   textPadding,
-  tfootRoot,
-  tfootTh,
-  tfootTr,
   theadResizeRoot,
   theadRoot,
   theadTh,