@servicetitan/anvil2 3.16.1 → 3.18.0

package/dist/{DataTable-DIXP9-Bx.js → DataTableEditColumnsDrawer-C7OHRsJU.js}

@@ -1,42 +1,53 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-2OydLs66.js';
+import { C as Chip } from './Chip-BWqgUX71.js';
 import { F as Flex } from './Flex-CRF7gj0_.js';
 import * as React from 'react';
 import { useId, useRef, useCallback, useMemo, createContext, forwardRef, useState, useEffect, useContext, useLayoutEffect, useImperativeHandle, memo as memo$1, Fragment as Fragment$1, isValidElement } from 'react';
-import { T as Tooltip } from './Tooltip-C_VcYS9P.js';
+import { T as Tooltip } from './Tooltip-CsTkZqMg.js';
 import { c as cx } from './index-De1g9FRV.js';
-import { D as DateTime } from './luxon-wpz4A-OQ.js';
+import { D as DateTime } from './Calendar-BcsuV4Xv.js';
 import { A as ANV_PART_ATTR } from './anvParts-DFVq7-Cm.js';
-import { C as Checkbox } from './Checkbox-U-kuWhgc.js';
-import { B as Button } from './Button-Dn6-01xl.js';
+import { C as Checkbox } from './Checkbox-BCaUzwF_.js';
+import { B as Button } from './Button-B_E6ybA-.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
 import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
-import { u as useNumberField } from './useNumberField-CXFYUZ_n.js';
+import { u as useNumberField } from './NumberField-DjOvcCa1.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-CPpE6vUG.js';
-import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-BhNXsgAN.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-Klna2oqs.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-AVcf8ZUZ.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { S as SvgDragIndicator } from './drag_indicator-BRHAPLSJ.js';
-import { u as usePortalScopeStyle, p as portalScopeClassNames } from './portalScopeClassNames-DA28LrXe.js';
+import { S as SvgDragIndicator } from './DndHandleButton-BJqj2hc0.js';
+import { u as usePortalScopeStyle, p as portalScopeClassNames } from './portalScopeClassNames-CMdDYHE0.js';
 import { a as useOnClickOutside, r as registerLayer, u as unregisterLayer } from './useOnClickOutside-Zw5vzxSq.js';
 import { u as useBreakpoint } from './useBreakpoint-BBNRlMGZ.js';
 import { c as computePosition, o as offset, h as autoPlacement, d as shift, g as size, a as autoUpdate, s as safeShowPopover, b as safeHidePopover } from './floating-ui.react-dom-BIKT960u.js';
-import { F as FieldLabel } from './FieldLabel-ThEmUiAq.js';
+import { F as FieldLabel } from './FieldLabel-Cn559Brf.js';
 import { S as StatusIcon } from './StatusIcon-BqorkNJf.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 import { S as SvgKeyboardArrowLeft } from './keyboard_arrow_left-CiE1n99w.js';
 import { S as SvgKeyboardArrowRight } from './keyboard_arrow_right-DMloHg_F.js';
-import { a as PARTS$1, b as Pagination, P as Pagination$1 } from './Pagination-Bsl99RRI.js';
+import { a as PARTS$1, b as Pagination, P as Pagination$1 } from './Pagination-CsSpaTCs.js';
 import { useTrackingId } from './useTrackingId.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { u as useVirtualizer } from './index-DXeGMe23.js';
+import { M as Menu } from './Menu-DqP7YQgE.js';
+import { F as FilterBar } from './FilterBar-COd38Ent.js';
+import { T as Toolbar, a as ToolbarButton } from './Toolbar-BhrHuIN7.js';
+import { S as SvgAdd } from './add-BcQkAUip.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { S as Spinner } from './Spinner-B7tTWcP6.js';
+import { C as Card } from './Card-Bt0F6RTq.js';
+import { D as Dialog } from './Dialog-BgWoV2on.js';
+import { D as Divider } from './Divider-C7fp5Xb6.js';
+import { DndSort } from './DndSort.js';
+import { D as Drawer } from './Drawer-BVBLtGn_.js';
+import { G as Grid } from './Grid-BPCDtqoT.js';
+import { T as Text } from './Text-D4SWT4u-.js';
 
-import './DataTable.css';const SvgResizeWindowAlt = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4.4 21 21 4.425 19.575 3 3 19.575zm10.025 0L21 14.425 19.575 13 13 19.575z" }));
+import './DataTableEditColumnsDrawer.css';const SvgResizeWindowAlt = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4.4 21 21 4.425 19.575 3 3 19.575zm10.025 0L21 14.425 19.575 13 13 19.575z" }));
 
 const SURFACE_VIEWPORT_PADDING = 8;
 const SURFACE_MIN_WIDTH = 240;
@@ -232,7 +243,7 @@ const surface = "_surface_9apry_1";
 const header = "_header_9apry_55";
 const title = "_title_9apry_83";
 const content = "_content_9apry_110";
-const styles$i = {
+const styles$j = {
 	surface: surface,
 	header: header,
 	"header-bottom-border": "_header-bottom-border_9apry_71",
@@ -822,7 +833,7 @@ const SurfaceContent = forwardRef(
           popover: "manual",
           ...dialogProps,
           tabIndex: -1,
-          className: cx(className, styles$i["surface"], portalScopeClassNames),
+          className: cx(className, styles$j["surface"], portalScopeClassNames),
           style: portalSurfaceStyle,
           onKeyDown: handleSurfaceKeyDown,
           "data-anv": "surface-content",
@@ -832,19 +843,19 @@ const SurfaceContent = forwardRef(
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: cx(styles$i["header"], {
-                  [styles$i["header-bottom-border"]]: title
+                className: cx(styles$j["header"], {
+                  [styles$j["header-bottom-border"]]: title
                 }),
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: styles$i["header-copy"], children: title ? /* @__PURE__ */ jsx("div", { id: titleId, className: styles$i["title"], children: title }) : null }),
-                  /* @__PURE__ */ jsxs("div", { className: styles$i["header-actions"], children: [
+                  /* @__PURE__ */ jsx("div", { className: styles$j["header-copy"], children: title ? /* @__PURE__ */ jsx("div", { id: titleId, className: styles$j["title"], children: title }) : null }),
+                  /* @__PURE__ */ jsxs("div", { className: styles$j["header-actions"], children: [
                     headerContent,
                     !isDrawerMode ? /* @__PURE__ */ jsx(
                       Button,
                       {
                         appearance: "ghost",
                         "aria-label": "Move surface",
-                        className: styles$i["drag-handle"],
+                        className: styles$j["drag-handle"],
                         "data-anv": "surface-drag-handle",
                         icon: SvgDragIndicator,
                         onBlur: handleDragKeyboardInteractionBlur,
@@ -863,7 +874,7 @@ const SurfaceContent = forwardRef(
                       {
                         appearance: "ghost",
                         "aria-label": closeButtonLabel,
-                        className: styles$i["close-button"],
+                        className: styles$j["close-button"],
                         "data-anv": "surface-close-button",
                         icon: SvgClose,
                         onClick: onClose,
@@ -878,8 +889,8 @@ const SurfaceContent = forwardRef(
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: cx(styles$i["content"], {
-                  [styles$i["content-title-spacing"]]: title
+                className: cx(styles$j["content"], {
+                  [styles$j["content-title-spacing"]]: title
                 }),
                 children
               }
@@ -888,7 +899,7 @@ const SurfaceContent = forwardRef(
               "button",
               {
                 "aria-label": "Resize surface",
-                className: styles$i["resize-handle"],
+                className: styles$j["resize-handle"],
                 "data-anv": "surface-resize-handle",
                 onBlur: handleResizeKeyboardInteractionBlur,
                 onKeyDown: handleResizeKeyDown,
@@ -945,25 +956,25 @@ const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } =
   return value ? trueLabel : falseLabel;
 };
 
-const styles$h = {
-	"table-header-cell": "_table-header-cell_185r9_4",
-	"table-body-cell": "_table-body-cell_185r9_5",
-	"table-footer-cell": "_table-footer-cell_185r9_6",
-	"last-pinned-left-column": "_last-pinned-left-column_185r9_30",
-	"first-pinned-right-column": "_first-pinned-right-column_185r9_30",
-	"empty-cell": "_empty-cell_185r9_63",
-	"table-cell-internal-select": "_table-cell-internal-select_185r9_80",
-	"table-cell-internal-expand": "_table-cell-internal-expand_185r9_84",
-	"table-header-cell-sortable": "_table-header-cell-sortable_185r9_89",
-	"table-header-cell-interactive": "_table-header-cell-interactive_185r9_90",
-	"table-header-cell-group": "_table-header-cell-group_185r9_94"
+const styles$i = {
+	"table-header-cell": "_table-header-cell_inf26_4",
+	"table-body-cell": "_table-body-cell_inf26_5",
+	"table-footer-cell": "_table-footer-cell_inf26_6",
+	"last-pinned-left-column": "_last-pinned-left-column_inf26_30",
+	"first-pinned-right-column": "_first-pinned-right-column_inf26_30",
+	"empty-cell": "_empty-cell_inf26_64",
+	"table-cell-internal-select": "_table-cell-internal-select_inf26_81",
+	"table-cell-internal-expand": "_table-cell-internal-expand_inf26_85",
+	"table-header-cell-sortable": "_table-header-cell-sortable_inf26_90",
+	"table-header-cell-interactive": "_table-header-cell-interactive_inf26_91",
+	"table-header-cell-group": "_table-header-cell-group_inf26_95"
 };
 
 const TableEmptyCellContent = () => {
-  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$h["empty-cell"], children: "—" });
+  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$i["empty-cell"], children: "—" });
 };
 
-const styles$g = {
+const styles$h = {
 	"truncate-chips": "_truncate-chips_16wxd_4",
 	"truncate-chips-measurement": "_truncate-chips-measurement_16wxd_17"
 };
@@ -1046,7 +1057,7 @@ const TruncateChips = ({
     {
       ref: containerRef,
       "data-anv": "truncate-chips",
-      className: cx(styles$g["truncate-chips"], className),
+      className: cx(styles$h["truncate-chips"], className),
       style: { visibility: visibleCount === null ? "hidden" : void 0 },
       ...rest,
       children: [
@@ -1055,7 +1066,7 @@ const TruncateChips = ({
           {
             ref: measurementRef,
             "data-anv": "truncate-chips-measurement",
-            className: styles$g["truncate-chips-measurement"],
+            className: styles$h["truncate-chips-measurement"],
             "aria-hidden": true,
             children: [
               items.map((chip, index) => /* @__PURE__ */ jsx(Chip, { ...chip }, index)),
@@ -1375,7 +1386,7 @@ const container = "_container_16fej_23";
 const heading1 = "_heading1_16fej_29";
 const heading2 = "_heading2_16fej_30";
 const heading3 = "_heading3_16fej_31";
-const styles$f = {
+const styles$g = {
 	highlight: highlight,
 	code: code,
 	list: list,
@@ -1410,11 +1421,11 @@ function parseInline(text) {
       parts.push(/* @__PURE__ */ jsx("em", { children: parseInline(match[3]) }, key));
     } else if (match[4]) {
       parts.push(
-        /* @__PURE__ */ jsx("mark", { className: styles$f.highlight, children: parseInline(match[4]) }, key)
+        /* @__PURE__ */ jsx("mark", { className: styles$g.highlight, children: parseInline(match[4]) }, key)
       );
     } else if (match[5]) {
       parts.push(
-        /* @__PURE__ */ jsx("code", { className: styles$f.code, children: match[5] }, key)
+        /* @__PURE__ */ jsx("code", { className: styles$g.code, children: match[5] }, key)
       );
     } else if (match[6]) {
       parts.push(/* @__PURE__ */ jsx("s", { children: parseInline(match[6]) }, key));
@@ -1478,11 +1489,11 @@ function renderBlocks(blocks) {
       case "text":
         return /* @__PURE__ */ jsx("span", { children: parseInline(block.content) }, index);
       case "heading":
-        return /* @__PURE__ */ jsx("span", { className: styles$f[`heading${block.level}`], children: parseInline(block.content) }, index);
+        return /* @__PURE__ */ jsx("span", { className: styles$g[`heading${block.level}`], children: parseInline(block.content) }, index);
       case "ul":
-        return /* @__PURE__ */ jsx("ul", { className: styles$f.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+        return /* @__PURE__ */ jsx("ul", { className: styles$g.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
       case "ol":
-        return /* @__PURE__ */ jsx("ol", { className: styles$f.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+        return /* @__PURE__ */ jsx("ol", { className: styles$g.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
     }
   });
 }
@@ -1494,7 +1505,7 @@ const markdownFormatter = (value) => {
   if (blocks.length === 1 && blocks[0].type === "text") {
     return /* @__PURE__ */ jsx(Fragment, { children: parseInline(blocks[0].content) });
   }
-  return /* @__PURE__ */ jsx("div", { className: styles$f.container, children: renderBlocks(blocks) });
+  return /* @__PURE__ */ jsx("div", { className: styles$g.container, children: renderBlocks(blocks) });
 };
 
 const htmlFormatter = (value) => {
@@ -2567,7 +2578,7 @@ const unique = (columnId, leafRows) => {
 const uniqueCount = (columnId, leafRows) => {
   return new Set(leafRows.map(d => d.getValue(columnId))).size;
 };
-const count = (_columnId, leafRows) => {
+const count$1 = (_columnId, leafRows) => {
   return leafRows.length;
 };
 const aggregationFns = {
@@ -2579,7 +2590,7 @@ const aggregationFns = {
   median,
   unique,
   uniqueCount,
-  count
+  count: count$1
 };
 
 //
@@ -4886,7 +4897,24 @@ const PARTS = {
   expandButton: "expand-button",
   expandAllButton: "expand-all-button",
   resizeHandle: "resize-handle",
-  editableInput: "editable-input"
+  editableInput: "editable-input",
+  bulkActionBar: "bulk-action-bar",
+  bulkSelectAllButton: "bulk-select-all-button",
+  bulkCancelButton: "bulk-cancel-button",
+  bulkActionsMenuButton: "bulk-actions-menu-button",
+  bulkActionButton: "bulk-action-button",
+  bulkActionMenuItem: "bulk-action-menu-item",
+  rowAddButton: "row-add-button",
+  editColumnsButton: "edit-columns-button",
+  editColumnsDrawer: "edit-columns-drawer",
+  columnsSection: "columns-section",
+  columnCard: "column-card",
+  pinColumnButton: "pin-column-button",
+  hideColumnButton: "hide-column-button",
+  resetColumnsButton: "reset-columns-button",
+  applyButton: "apply-button",
+  cancelButton: "cancel-button",
+  confirmButton: "confirm-button"
 };
 
 const DTFocusStateContext = createContext({
@@ -4944,7 +4972,7 @@ function useDTFocusDispatchContext() {
   };
 }
 
-const styles$e = {
+const styles$f = {
 	"table-base": "_table-base_1tsp8_4",
 	"data-table-base": "_data-table-base_1tsp8_21"
 };
@@ -4954,7 +4982,7 @@ const SimpleTableBase = ({
   className,
   ...rest
 }) => {
-  const tableBaseClassNames = cx(className, styles$e["table-base"]);
+  const tableBaseClassNames = cx(className, styles$f["table-base"]);
   return /* @__PURE__ */ jsx(
     "table",
     {
@@ -4973,7 +5001,7 @@ const DataTableBase = ({
   hasSubRows,
   ...rest
 }) => {
-  const tableBaseClassNames = cx(className, styles$e["data-table-base"]);
+  const tableBaseClassNames = cx(className, styles$f["data-table-base"]);
   const { focusTableGenerally, blur, moveFocusToCell } = useDTFocusDispatchContext();
   const handleBlur = (event) => {
     if (!event.currentTarget.contains(event.relatedTarget)) {
@@ -5027,12 +5055,12 @@ const TableBase = ({ type, ...rest }) => {
   }
 };
 
-const styles$d = {
+const styles$e = {
 	"table-body": "_table-body_z02xk_4"
 };
 
 function TableBody({ type, children, ...rest }) {
-  const classes = cx(styles$d["table-body"], rest.className);
+  const classes = cx(styles$e["table-body"], rest.className);
   const Element = type === "simple" ? "tbody" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -5046,24 +5074,46 @@ function TableBody({ type, children, ...rest }) {
   );
 }
 
+function createCellTabbablesQueue() {
+  const pending = /* @__PURE__ */ new Set();
+  const flush = () => {
+    const sweeps = Array.from(pending);
+    pending.clear();
+    for (const sweep of sweeps) sweep();
+  };
+  return {
+    enqueue(sweep) {
+      if (pending.size === 0) queueMicrotask(flush);
+      pending.add(sweep);
+    },
+    cancel(sweep) {
+      pending.delete(sweep);
+    },
+    flush
+  };
+}
+const CellTabbablesQueueContext = createContext(
+  createCellTabbablesQueue()
+);
+
 const getCommonPinningClasses = (column) => {
   const isPinned = column.getIsPinned();
   if (!isPinned) return void 0;
   return cx({
-    [styles$h["first-pinned-left-column"]]: isPinned === "left" && column.getIsFirstColumn("left"),
-    [styles$h["last-pinned-left-column"]]: isPinned === "left" && column.getIsLastColumn("left"),
-    [styles$h["first-pinned-right-column"]]: isPinned === "right" && column.getIsFirstColumn("right"),
-    [styles$h["last-pinned-right-column"]]: isPinned === "right" && column.getIsLastColumn("right")
+    [styles$i["first-pinned-left-column"]]: isPinned === "left" && column.getIsFirstColumn("left"),
+    [styles$i["last-pinned-left-column"]]: isPinned === "left" && column.getIsLastColumn("left"),
+    [styles$i["first-pinned-right-column"]]: isPinned === "right" && column.getIsFirstColumn("right"),
+    [styles$i["last-pinned-right-column"]]: isPinned === "right" && column.getIsLastColumn("right")
   });
 };
 
-const styles$c = {
+const styles$d = {
 	"data-table-body-cell-affordance-container": "_data-table-body-cell-affordance-container_1eir6_1",
 	"data-table-body-cell-affordance-host": "_data-table-body-cell-affordance-host_1eir6_6",
 	"data-table-body-cell-affordance-container-interactive": "_data-table-body-cell-affordance-container-interactive_1eir6_21"
 };
 
-const dataTableCellAffordanceHostClassName = styles$c["data-table-body-cell-affordance-host"];
+const dataTableCellAffordanceHostClassName = styles$d["data-table-body-cell-affordance-host"];
 
 function DataTableCellAffordance({
   children,
@@ -5072,8 +5122,8 @@ function DataTableCellAffordance({
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cx(styles$c["data-table-body-cell-affordance-container"], {
-        [styles$c["data-table-body-cell-affordance-container-interactive"]]: interactive
+      className: cx(styles$d["data-table-body-cell-affordance-container"], {
+        [styles$d["data-table-body-cell-affordance-container-interactive"]]: interactive
       }),
       "aria-hidden": true,
       children
@@ -5086,9 +5136,9 @@ const DataTableEditableCellEditIcon = () => {
 };
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
-  const classes = cx(styles$h["table-body-cell"], className, {
-    [styles$h["table-cell-internal-expand"]]: isExpandCell,
-    [styles$h["table-cell-internal-select"]]: isSelectCell
+  const classes = cx(styles$i["table-body-cell"], className, {
+    [styles$i["table-cell-internal-expand"]]: isExpandCell,
+    [styles$i["table-cell-internal-select"]]: isSelectCell
   });
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
@@ -5105,10 +5155,10 @@ const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isS
 });
 TableBodyCell.displayName = "TableBodyCell";
 
-const styles$b = {
-	"data-table-body-cell-input": "_data-table-body-cell-input_1t30b_4"};
+const styles$c = {
+	"data-table-body-cell-input": "_data-table-body-cell-input_101bf_4"};
 
-const styles$a = {
+const styles$b = {
 	"data-table-body-cell": "_data-table-body-cell_1gi7u_4",
 	"data-table-body-cell-input": "_data-table-body-cell-input_1gi7u_5",
 	"table-body-cell": "_table-body-cell_1gi7u_10",
@@ -5244,28 +5294,47 @@ function DataTableBodyImmutableCell(props) {
   const meta = cell.row.original.meta;
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
-  const classes = cx(styles$a["data-table-body-cell"], rest.className, {
-    [styles$a["data-table-body-cell-error"]]: !!cellError,
-    [styles$a["data-table-body-cell-warning"]]: !cellError && !!cellWarning,
-    [styles$h["table-cell-internal-expand"]]: isExpandCell,
-    [styles$h["table-cell-internal-select"]]: isSelectCell
+  const classes = cx(styles$b["data-table-body-cell"], rest.className, {
+    [styles$b["data-table-body-cell-error"]]: !!cellError,
+    [styles$b["data-table-body-cell-warning"]]: !cellError && !!cellWarning,
+    [styles$i["table-cell-internal-expand"]]: isExpandCell,
+    [styles$i["table-cell-internal-select"]]: isSelectCell
   });
   const commonPinningStyles = useCommonPinningStyles(column);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
   const { isRowClickEnabled, clickRow } = useDataTableRowClick();
   const [isInteractionMode, setIsInteractionMode] = useState(false);
+  const interactionModeRef = useRef(false);
+  const tabbablesQueue = useContext(CellTabbablesQueueContext);
   useLayoutEffect(() => {
-    if (!cellRef.current) return;
-    const newOnes = getUnmanagedTabbables(cellRef.current);
-    newOnes.forEach((el) => {
-      el.setAttribute(CELL_MANAGED_ATTR, "");
-      if (!isInteractionMode) {
-        el.tabIndex = -1;
-      }
+    const cellEl = cellRef.current;
+    if (!cellEl) return;
+    const observer = new MutationObserver(() => sweep());
+    const sweep = () => {
+      const inInteractionMode = interactionModeRef.current;
+      getUnmanagedTabbables(cellEl).forEach((el) => {
+        el.setAttribute(CELL_MANAGED_ATTR, "");
+        if (!inInteractionMode) {
+          el.tabIndex = -1;
+        }
+      });
+      observer.takeRecords();
+    };
+    observer.observe(cellEl, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["disabled", "tabindex", "href", "type"]
     });
-  });
+    tabbablesQueue.enqueue(sweep);
+    return () => {
+      tabbablesQueue.cancel(sweep);
+      observer.disconnect();
+    };
+  }, [tabbablesQueue]);
   const exitInteractionMode = useCallback(() => {
     if (!cellRef.current) return;
+    interactionModeRef.current = false;
     getManagedInteractives(cellRef.current).forEach((el) => {
       el.tabIndex = -1;
     });
@@ -5357,6 +5426,7 @@ function DataTableBodyImmutableCell(props) {
             interactives[0].click();
             return;
           }
+          interactionModeRef.current = true;
           interactives.forEach((el) => {
             el.tabIndex = 0;
           });
@@ -5488,10 +5558,10 @@ function DataTableEditableTextCellInner(props, ref) {
   }, [commitValue]);
   const classes = cx(
     dataTableCellAffordanceHostClassName,
-    styles$b["data-table-body-cell-editable"],
+    styles$c["data-table-body-cell-editable"],
     cellProps.className,
     {
-      [styles$a["data-table-body-cell-editing"]]: isEditing
+      [styles$b["data-table-body-cell-editing"]]: isEditing
     }
   );
   const handleCellKeyDown = useCallback(
@@ -5524,12 +5594,16 @@ function DataTableEditableTextCellInner(props, ref) {
   );
   const handleCellMouseDown = useCallback(
     (e) => {
+      if (isEditing && e.target instanceof Node && inputRef.current?.contains(e.target)) {
+        e.stopPropagation();
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       beginEditing();
       moveFocusToCell(cellPosition);
     },
-    [beginEditing, cellPosition, moveFocusToCell]
+    [beginEditing, cellPosition, isEditing, moveFocusToCell]
   );
   useEffect(() => {
     if (isEditing) {
@@ -5562,7 +5636,7 @@ function DataTableEditableTextCellInner(props, ref) {
             type: "text",
             name: `${cell.column.id}-row-${cellPosition.rowIndex}`,
             value: draftValue,
-            className: styles$b["data-table-body-cell-input"],
+            className: styles$c["data-table-body-cell-input"],
             onChange: handleInputChange,
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown,
@@ -5684,10 +5758,10 @@ function DataTableEditableNumberCellInner(props, ref) {
     commitValue();
   }, [commitValue]);
   const classes = cx(
-    styles$b["data-table-body-cell-editable"],
+    styles$c["data-table-body-cell-editable"],
     cellProps.className,
     {
-      [styles$a["data-table-body-cell-editing"]]: isEditing
+      [styles$b["data-table-body-cell-editing"]]: isEditing
     }
   );
   const handleCellKeyDown = useCallback(
@@ -5720,12 +5794,16 @@ function DataTableEditableNumberCellInner(props, ref) {
   );
   const handleCellMouseDown = useCallback(
     (e) => {
+      if (isEditing && e.target instanceof Node && localInputRef.current?.contains(e.target)) {
+        e.stopPropagation();
+        return;
+      }
       e.preventDefault();
       e.stopPropagation();
       beginEditing();
       moveFocusToCell(cellPosition);
     },
-    [beginEditing, cellPosition, moveFocusToCell]
+    [beginEditing, cellPosition, isEditing, moveFocusToCell]
   );
   useEffect(() => {
     if (isEditing) {
@@ -5759,7 +5837,7 @@ function DataTableEditableNumberCellInner(props, ref) {
             name: `${cell.column.id}-row-${cellPosition.rowIndex}`,
             "aria-label": inputAriaLabel,
             "aria-describedby": instructionsId,
-            className: styles$b["data-table-body-cell-input"],
+            className: styles$c["data-table-body-cell-input"],
             onBlur: handleInputBlur,
             onKeyDown: handleInputKeyDown,
             ...{ [ANV_PART_ATTR]: PARTS.editableInput }
@@ -5925,7 +6003,7 @@ function DataTableEditableSelectCellInner(props, ref) {
             ...restCellProps,
             className: cx(
               dataTableCellAffordanceHostClassName,
-              styles$b["data-table-body-cell-editable"],
+              styles$c["data-table-body-cell-editable"],
               className
             ),
             onMouseDown: handleCellMouseDown(onClick),
@@ -6074,7 +6152,7 @@ function DataTableEditableSelectAsyncCellInner(props, ref) {
             tabIndex,
             type: "data-table",
             ...restCellProps,
-            className: cx(styles$b["data-table-body-cell-editable"], className),
+            className: cx(styles$c["data-table-body-cell-editable"], className),
             onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
@@ -6186,7 +6264,7 @@ function DataTableEditableMultiselectCellInner(props, ref) {
             tabIndex,
             type: "data-table",
             ...restCellProps,
-            className: cx(styles$b["data-table-body-cell-editable"], className),
+            className: cx(styles$c["data-table-body-cell-editable"], className),
             onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
@@ -6333,7 +6411,7 @@ function DataTableEditableMultiselectAsyncCellInner(props, ref) {
             tabIndex,
             type: "data-table",
             ...restCellProps,
-            className: cx(styles$b["data-table-body-cell-editable"], className),
+            className: cx(styles$c["data-table-body-cell-editable"], className),
             onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
@@ -6471,7 +6549,7 @@ function DataTableEditableBooleanCellInner(props, ref) {
             tabIndex,
             type: "data-table",
             ...restCellProps,
-            className: cx(styles$b["data-table-body-cell-editable"], className),
+            className: cx(styles$c["data-table-body-cell-editable"], className),
             onMouseDown: handleCellMouseDown(onClick),
             onBlur: handleCellBlur,
             onFocus: handleCellFocus,
@@ -6948,10 +7026,10 @@ function DataTableEditableCustomCellInner(props, ref) {
   );
   const classes = cx(
     dataTableCellAffordanceHostClassName,
-    styles$b["data-table-body-cell-editable"],
+    styles$c["data-table-body-cell-editable"],
     cellProps.className,
     {
-      [styles$a["data-table-body-cell-editing"]]: isOpen
+      [styles$b["data-table-body-cell-editing"]]: isOpen
     }
   );
   const handleCellKeyDown = useCallback(
@@ -7079,12 +7157,12 @@ function DataTableBodyMutableCell(props) {
   const cellError = meta?.errors?.[column.id];
   const cellWarning = meta?.warnings?.[column.id];
   const classes = cx(
-    styles$a["data-table-body-cell"],
+    styles$b["data-table-body-cell"],
     dataTableCellAffordanceHostClassName,
     rest.className,
     {
-      [styles$a["data-table-body-cell-error"]]: !!cellError,
-      [styles$a["data-table-body-cell-warning"]]: !cellError && !!cellWarning
+      [styles$b["data-table-body-cell-error"]]: !!cellError,
+      [styles$b["data-table-body-cell-warning"]]: !cellError && !!cellWarning
     }
   );
   const commonPinningStyles = useCommonPinningStyles(column);
@@ -7186,7 +7264,7 @@ function DataTableBodyMutableCell(props) {
 
 const SvgOpenInFull = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21 8.59V4c0-.55-.45-1-1-1h-4.59c-.89 0-1.34 1.08-.71 1.71l1.59 1.59-10 10-1.59-1.59c-.62-.63-1.7-.19-1.7.7V20c0 .55.45 1 1 1h4.59c.89 0 1.34-1.08.71-1.71L7.71 17.7l10-10 1.59 1.59c.62.63 1.7.19 1.7-.7z" }));
 
-const styles$9 = {
+const styles$a = {
 	"data-table-body-cell-overflow": "_data-table-body-cell-overflow_1xy0x_1",
 	"data-table-body-cell-overflow-viewport": "_data-table-body-cell-overflow-viewport_1xy0x_5",
 	"data-table-body-cell-overflow-content": "_data-table-body-cell-overflow-content_1xy0x_11",
@@ -7419,21 +7497,21 @@ function DataTableOverflowCell(props) {
   const hasSurfaceTrigger = isClipped || isOpen;
   const hasCellInstructions = isClipped || isOpen;
   const classes = cx(
-    styles$a["data-table-body-cell"],
+    styles$b["data-table-body-cell"],
     {
       [dataTableCellAffordanceHostClassName]: isClipped,
-      [styles$a["data-table-body-cell-error"]]: !!cellError,
-      [styles$a["data-table-body-cell-warning"]]: !cellError && !!cellWarning
+      [styles$b["data-table-body-cell-error"]]: !!cellError,
+      [styles$b["data-table-body-cell-warning"]]: !cellError && !!cellWarning
     },
-    styles$9["data-table-body-cell-overflow"],
+    styles$a["data-table-body-cell-overflow"],
     rest.className
   );
   const content = /* @__PURE__ */ jsx(
     "div",
     {
       ref: viewportRef,
-      className: styles$9["data-table-body-cell-overflow-viewport"],
-      children: /* @__PURE__ */ jsx("div", { className: styles$9["data-table-body-cell-overflow-content"], children })
+      className: styles$a["data-table-body-cell-overflow-viewport"],
+      children: /* @__PURE__ */ jsx("div", { className: styles$a["data-table-body-cell-overflow-content"], children })
     }
   );
   return /* @__PURE__ */ jsxs(Surface, { id: surfaceId, open: isOpen, children: [
@@ -7486,7 +7564,7 @@ function DataTableOverflowCell(props) {
             {
               ref: surfaceContentRef,
               tabIndex: -1,
-              className: styles$9["data-table-body-cell-overflow-surface-content"],
+              className: styles$a["data-table-body-cell-overflow-surface-content"],
               children
             }
           )
@@ -7514,7 +7592,7 @@ function DataTableBodyCell(props) {
   );
 }
 
-const styles$8 = {
+const styles$9 = {
 	"data-table-body-row": "_data-table-body-row_1sv3s_4",
 	"data-table-body-row-read-only": "_data-table-body-row-read-only_1sv3s_28",
 	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_1sv3s_35",
@@ -7660,8 +7738,8 @@ function DataTableBodyRowInner({
         onMouseLeave: handleMouseLeave,
         onClick: isRowClickable ? handleRowClick : void 0,
         ...isRowClickable ? { "data-anv-row-clickable": "true" } : {},
-        className: cx(styles$8["data-table-body-row"], {
-          [styles$8["data-table-body-row-read-only"]]: isReadOnly
+        className: cx(styles$9["data-table-body-row"], {
+          [styles$9["data-table-body-row-read-only"]]: isReadOnly
         }),
         style: depth > 0 ? { "--a2-row-depth": depth } : void 0,
         children: (() => {
@@ -7676,9 +7754,9 @@ function DataTableBodyRowInner({
               firstDataCellClaimed = true;
             }
             const cellClasses = cx(getCommonPinningClasses(cell.column), {
-              [styles$8["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup,
-              [styles$8["data-table-body-cell-depth-indent"]]: isFirstDataCell,
-              [styles$8["data-table-body-cell-action-depth-indent"]]: isExpandColumn
+              [styles$9["data-table-body-cell-group"]]: "columns" in cell.column.columnDef || cell.column.parent && isLastInParentGroup,
+              [styles$9["data-table-body-cell-depth-indent"]]: isFirstDataCell,
+              [styles$9["data-table-body-cell-action-depth-indent"]]: isExpandColumn
             });
             const columnIndex = columnIndexMap.get(cell.column.getIndex()) ?? -1;
             return /* @__PURE__ */ jsx(
@@ -7705,10 +7783,10 @@ function DataTableBodyRowInner({
         "aria-hidden": !isExpanded,
         ...{ [HAS_SUB_COMPONENT_ATTR]: "true" },
         ...isSelectedRow ? { [SELECTED_ATTR]: "true" } : {},
-        className: styles$8["data-table-body-sub-component-row"],
+        className: styles$9["data-table-body-sub-component-row"],
         onMouseEnter: handleSubComponentMouseEnter,
         onMouseLeave: handleSubComponentMouseLeave,
-        children: /* @__PURE__ */ jsx("div", { className: styles$8["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$8["data-table-body-sub-component-content"], children: original.subComponent }) })
+        children: /* @__PURE__ */ jsx("div", { className: styles$9["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$9["data-table-body-sub-component-content"], children: original.subComponent }) })
       }
     )
   ] }, row.id);
@@ -7813,7 +7891,7 @@ function VirtualizedContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$8["data-table-body-virtualized"],
+      className: styles$9["data-table-body-virtualized"],
       "data-virtualized-body": "true",
       style: { height: `${totalSize}px` },
       children: virtualItems.map((virtualRow) => {
@@ -7824,7 +7902,7 @@ function VirtualizedContent({
           {
             ref: measureRef,
             "data-index": virtualRow.index,
-            className: styles$8["data-table-body-row-virtualized"],
+            className: styles$9["data-table-body-row-virtualized"],
             style: { transform: `translateY(${virtualRow.start}px)` },
             children: /* @__PURE__ */ jsx(
               DataTableBodyRow,
@@ -7861,7 +7939,11 @@ function DataTableBody(props) {
     readOnlyRowMap,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
+  const [tabbablesQueue] = useState(createCellTabbablesQueue);
+  useLayoutEffect(() => {
+    tabbablesQueue.flush();
+  });
+  return /* @__PURE__ */ jsx(CellTabbablesQueueContext.Provider, { value: tabbablesQueue, children: /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: virtualizer ? /* @__PURE__ */ jsx(
     VirtualizedContent,
     {
       table,
@@ -7878,14 +7960,14 @@ function DataTableBody(props) {
       getRowVersion,
       readOnlyRowMap
     }
-  ) });
+  ) }) });
 }
 
-const styles$7 = {
+const styles$8 = {
 	"table-footer": "_table-footer_1olw1_4"};
 
 function TableFooter({ type, children, ...rest }) {
-  const classes = cx(styles$7["table-footer"], rest.className);
+  const classes = cx(styles$8["table-footer"], rest.className);
   const Element = type === "simple" ? "tfoot" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -7900,7 +7982,7 @@ function TableFooter({ type, children, ...rest }) {
 
 const TableFooterCell = forwardRef((props, ref) => {
   const { type, children, className, ...rest } = props;
-  const classes = cx(styles$h["table-footer-cell"], className);
+  const classes = cx(styles$i["table-footer-cell"], className);
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
     CellElement,
@@ -7961,14 +8043,14 @@ function DataTableFooterCell(props) {
       ref: footerCellRef,
       tabIndex: -1,
       onKeyDown: handleKeyDown,
-      className: cx(styles$a["data-table-footer-cell"], className),
+      className: cx(styles$b["data-table-footer-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
       children
     }
   );
 }
 
-const styles$6 = {
+const styles$7 = {
 	"data-table-footer": "_data-table-footer_e7sq6_4",
 	"data-table-footer-row": "_data-table-footer-row_e7sq6_8"
 };
@@ -8019,7 +8101,7 @@ function DefaultTableFooterRows({
       {
         role: "row",
         "data-anv": "table-footer-row",
-        className: styles$6["data-table-footer-row"],
+        className: styles$7["data-table-footer-row"],
         "aria-rowindex": rowIndex + 1,
         children: table.getFlatHeaders().filter((header) => {
           const column = findColumnById(columns, header.column.id);
@@ -8061,7 +8143,7 @@ function CustomTableFooterRows({
       {
         role: "row",
         "data-anv": "table-footer-row",
-        className: styles$6["data-table-footer-row"],
+        className: styles$7["data-table-footer-row"],
         "aria-rowindex": rowIndex + 1,
         children: (() => {
           let columnIndex = 0;
@@ -8099,7 +8181,7 @@ function DataTableFooter({
   ...rest
 }) {
   const columnCount = table.getFlatHeaders().length;
-  const classes = cx(styles$6["data-table-footer"], rest.className);
+  const classes = cx(styles$7["data-table-footer"], rest.className);
   return /* @__PURE__ */ jsx(TableFooter, { type: "data-table", ...rest, className: classes, children: customFooter ? /* @__PURE__ */ jsx(
     CustomTableFooterRows,
     {
@@ -8152,14 +8234,14 @@ function CellStatus({ status, variant }) {
     {
       variant,
       size: "small",
-      className: styles$a[config.className],
+      className: styles$b[config.className],
       rootProps: {
         "aria-label": message ? `${config.label}: ${message}` : `${config.label}.`
       }
     }
   );
   if (!message) {
-    return /* @__PURE__ */ jsx("span", { ref, className: styles$a["cell-status"], children: icon });
+    return /* @__PURE__ */ jsx("span", { ref, className: styles$b["cell-status"], children: icon });
   }
   const isTooltipOpen = isCellFocused || isHovered;
   return /* @__PURE__ */ jsxs(Tooltip, { open: isTooltipOpen, children: [
@@ -8167,7 +8249,7 @@ function CellStatus({ status, variant }) {
       Tooltip.Trigger,
       {
         ref,
-        className: styles$a["cell-status"],
+        className: styles$b["cell-status"],
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: icon
@@ -8362,8 +8444,8 @@ function getTanStackColumnDef({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cx(styles$a["data-table-cell-content"], {
-            [styles$a["data-table-cell-overflow-content"]]: leafColumnDef.overflow
+          className: cx(styles$b["data-table-cell-content"], {
+            [styles$b["data-table-cell-overflow-content"]]: leafColumnDef.overflow
           }),
           "data-align": resolvedAlign ?? "start",
           children: [
@@ -8443,12 +8525,12 @@ const SvgArrowUpward = (props) => /* @__PURE__ */ React.createElement("svg", { x
 
 const SvgArrowDownward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z" }));
 
-const styles$5 = {
+const styles$6 = {
 	"table-header": "_table-header_1sk5h_4"
 };
 
 function TableHeader({ type, children, ...rest }) {
-  const classes = cx(styles$5["table-header"], rest.className);
+  const classes = cx(styles$6["table-header"], rest.className);
   const Element = type === "simple" ? "thead" : "div";
   return /* @__PURE__ */ jsx(
     Element,
@@ -8473,12 +8555,12 @@ const TableHeaderCell = forwardRef(
     isExpandCell,
     ...rest
   }, ref) => {
-    const classes = cx(styles$h["table-header-cell"], className, {
-      [styles$h["table-header-cell-group"]]: isGroup,
-      [styles$h["table-header-cell-sortable"]]: isSortable,
-      [styles$h["table-header-cell-interactive"]]: isInteractiveHeaderCell,
-      [styles$h["table-cell-internal-expand"]]: isExpandCell,
-      [styles$h["table-cell-internal-select"]]: isSelectCell
+    const classes = cx(styles$i["table-header-cell"], className, {
+      [styles$i["table-header-cell-group"]]: isGroup,
+      [styles$i["table-header-cell-sortable"]]: isSortable,
+      [styles$i["table-header-cell-interactive"]]: isInteractiveHeaderCell,
+      [styles$i["table-cell-internal-expand"]]: isExpandCell,
+      [styles$i["table-cell-internal-select"]]: isSelectCell
     });
     const CellElement = type === "simple" ? "th" : "div";
     return /* @__PURE__ */ jsx(
@@ -8634,7 +8716,7 @@ function DataTableHeaderCellInner(props, forwardedRef) {
       onPointerDownCapture: handlePointerDownCapture,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      className: cx(styles$a["data-table-header-cell"], className),
+      className: cx(styles$b["data-table-header-cell"], className),
       "data-cell-pos": formatCellPositionString(cellPosition),
       ...isSortingCell ? { [ANV_PART_ATTR]: PARTS.sortToggle } : {},
       "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : void 0,
@@ -8652,7 +8734,7 @@ function DataTableHeaderCellInner(props, forwardedRef) {
 const DataTableHeaderCell = forwardRef(DataTableHeaderCellInner);
 
 const resizing = "_resizing_18cik_35";
-const styles$4 = {
+const styles$5 = {
 	"resize-handle": "_resize-handle_18cik_4",
 	resizing: resizing
 };
@@ -8664,8 +8746,8 @@ function ResizeHandle({
   className,
   ...rest
 }) {
-  const classes = cx(styles$4["resize-handle"], className, {
-    [styles$4["resizing"]]: header.column.getIsResizing()
+  const classes = cx(styles$5["resize-handle"], className, {
+    [styles$5["resizing"]]: header.column.getIsResizing()
   });
   const handleResizeStart = (e) => {
     onResizeStart?.();
@@ -8690,7 +8772,7 @@ function ResizeHandle({
   );
 }
 
-const styles$3 = {
+const styles$4 = {
 	"data-table-header-row": "_data-table-header-row_1n8uq_4"
 };
 
@@ -8754,7 +8836,7 @@ function DataTableHeader({
   return /* @__PURE__ */ jsx(TableHeader, { type: "data-table", children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$3["data-table-header-row"],
+      className: styles$4["data-table-header-row"],
       role: "row",
       "aria-rowindex": index + 1,
       children: headerGroup.headers.map((header) => {
@@ -8864,7 +8946,7 @@ function DataTableHeader({
   )) });
 }
 
-const styles$2 = {
+const styles$3 = {
 	"table-container": "_table-container_pfo9z_4",
 	"table-scroll-container": "_table-scroll-container_pfo9z_55"
 };
@@ -8873,7 +8955,7 @@ const TableContainer = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const { children, className, style, ...rest } = componentProps;
-    const tableContainerClassNames = cx(className, styles$2["table-container"]);
+    const tableContainerClassNames = cx(className, styles$3["table-container"]);
     const styleCombined = {
       ...style,
       ...layoutStyles
@@ -8889,7 +8971,7 @@ const TableContainer = forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles$2["table-scroll-container"],
+            className: styles$3["table-scroll-container"],
             "data-anv": "table-scroll-container",
             children
           }
@@ -8901,7 +8983,7 @@ const TableContainer = forwardRef(
 TableContainer.displayName = "TableContainer";
 
 const pagination = "_pagination_rmbrh_4";
-const styles$1 = {
+const styles$2 = {
 	"cursor-pagination-list": "_cursor-pagination-list_rmbrh_30",
 	"cursor-pagination-item": "_cursor-pagination-item_rmbrh_47",
 	pagination: pagination
@@ -8914,7 +8996,7 @@ const DataTablePagination = ({
   return /* @__PURE__ */ jsx(
     Pagination$1,
     {
-      className: styles$1["pagination"],
+      className: styles$2["pagination"],
       ...props,
       showCount
     }
@@ -8924,6 +9006,7 @@ const DataTableCursorPagination = ({
   page,
   itemsPerPage,
   itemsPerPageOptions,
+  itemsPerPageLabel,
   hasNextPage,
   hasPrevPage,
   onPageChange,
@@ -8942,12 +9025,12 @@ const DataTableCursorPagination = ({
   return /* @__PURE__ */ jsxs(
     "nav",
     {
-      className: styles$1["pagination"],
+      className: styles$2["pagination"],
       "aria-label": "Pagination navigation",
       "data-tracking-id": trackingId,
       children: [
-        /* @__PURE__ */ jsxs("ul", { className: styles$1["cursor-pagination-list"], children: [
-          /* @__PURE__ */ jsx("li", { className: styles$1["cursor-pagination-item"], children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("ul", { className: styles$2["cursor-pagination-list"], children: [
+          /* @__PURE__ */ jsx("li", { className: styles$2["cursor-pagination-item"], children: /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "ghost",
@@ -8963,7 +9046,7 @@ const DataTableCursorPagination = ({
               ...{ [ANV_PART_ATTR]: PARTS$1.prevPageButton }
             }
           ) }),
-          /* @__PURE__ */ jsx("li", { className: styles$1["cursor-pagination-item"], children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("li", { className: styles$2["cursor-pagination-item"], children: /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "ghost",
@@ -8985,6 +9068,7 @@ const DataTableCursorPagination = ({
           {
             itemsPerPage,
             itemsPerPageOptions,
+            itemsPerPageLabel,
             onItemsPerPageChange: (itemsPerPage2) => {
               onItemsPerPageChange?.(itemsPerPage2);
             }
@@ -9006,7 +9090,7 @@ const DataTableCursorPagination = ({
 };
 
 const expanded = "_expanded_1elu6_34";
-const styles = {
+const styles$1 = {
 	"data-table-container": "_data-table-container_1elu6_4",
 	"container-with-pagination": "_container-with-pagination_1elu6_11",
 	"footer-with-pagination": "_footer-with-pagination_1elu6_15",
@@ -9470,6 +9554,822 @@ function useDataTableVirtualizer({
   );
 }
 
+const selection = "_selection_1enoc_26";
+const actions = "_actions_1enoc_27";
+const count = "_count_1enoc_42";
+const styles = {
+	"bulk-action-bar": "_bulk-action-bar_1enoc_4",
+	selection: selection,
+	actions: actions,
+	count: count
+};
+
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+const formatCount = (count) => count.toLocaleString();
+const getSelectionKey = (selection) => selection.mode === "all" ? `all:${selection.selectedRowCount}` : `rows:${[...selection.rowIds].map(String).sort().join(",")}`;
+function DataTableBulkActionBar({
+  actions,
+  selectedCount,
+  selectAllCount,
+  hasUnselectableRows,
+  onSelectAll,
+  onCancel,
+  getSelection,
+  onActionComplete,
+  tableRef
+}) {
+  const { moveFocusToCell } = useDTFocusDispatchContext();
+  const [pendingKey, setPendingKey] = useState(null);
+  const isPending = pendingKey !== null;
+  const getSelectionRef = useRef(getSelection);
+  getSelectionRef.current = getSelection;
+  const selectionRunRef = useRef(0);
+  const isVisible = selectedCount > 0;
+  useEffect(() => {
+    if (!isVisible) {
+      selectionRunRef.current += 1;
+      setPendingKey(null);
+    }
+  }, [isVisible]);
+  const focusSelectAllCell = () => {
+    const checkboxCell = tableRef.current?.querySelector(`[${ANV_PART_ATTR}="${PARTS.selectAllCheckbox}"]`)?.closest("[data-cell-pos]");
+    const [rowIndex = 0, columnIndex = 0] = (checkboxCell?.dataset.cellPos ?? "0,0").split(",").map(Number);
+    moveFocusToCell({ rowIndex, columnIndex });
+    const target = checkboxCell ?? tableRef.current?.querySelector(
+      `[data-cell-pos="${rowIndex},${columnIndex}"]`
+    );
+    if (target && !target.contains(document.activeElement)) {
+      target.focus();
+    }
+  };
+  const completeAction = () => {
+    onActionComplete();
+    requestAnimationFrame(() => {
+      const active = document.activeElement;
+      if (!active || active === document.body) focusSelectAllCell();
+    });
+  };
+  const runAction = (key, action) => {
+    const selection = getSelection();
+    const run = selectionRunRef.current;
+    const result = action.onClick(selection);
+    if (!isThenable(result)) {
+      if (result !== false) completeAction();
+      return;
+    }
+    setPendingKey(key);
+    Promise.resolve(result).then(
+      (resolved) => {
+        if (run !== selectionRunRef.current) return;
+        setPendingKey(null);
+        const isSameSelection = getSelectionKey(getSelectionRef.current()) === getSelectionKey(selection);
+        if (resolved !== false && isSameSelection) completeAction();
+      },
+      // A rejected action keeps the selection; the consumer reports the error.
+      () => {
+        if (run === selectionRunRef.current) setPendingKey(null);
+      }
+    );
+  };
+  const handleCancel = () => {
+    onCancel();
+    focusSelectAllCell();
+  };
+  const getLabel = (label) => typeof label === "function" ? label(selectedCount) : label;
+  const secondaryAction = actions.secondary;
+  const primaryAction = actions.primary;
+  const renderMenuItems = (items) => items.map((item, index) => {
+    const { label, onClick: _onClick, disabled, ...itemProps } = item;
+    return /* @__PURE__ */ jsx(
+      Menu.Item,
+      {
+        ...itemProps,
+        label: getLabel(label),
+        disabled: disabled || isPending,
+        onClick: () => runAction(`primary-${index}`, item),
+        ...{ [ANV_PART_ATTR]: PARTS.bulkActionMenuItem }
+      },
+      index
+    );
+  });
+  const renderPrimaryMenuTrigger = (primary) => ({ ref, ...triggerProps }) => {
+    const {
+      items: _items,
+      label,
+      appearance = "primary",
+      ...buttonProps
+    } = primary;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        appearance,
+        ...buttonProps,
+        disabled: buttonProps.disabled || isPending,
+        loading: pendingKey?.startsWith("primary-") ?? false,
+        ...triggerProps,
+        ref,
+        ...{ [ANV_PART_ATTR]: PARTS.bulkActionsMenuButton },
+        children: getLabel(label)
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SrOnly, { "aria-live": "polite", "aria-atomic": "true", children: isVisible ? `${formatCount(selectedCount)} ${selectedCount === 1 ? "item" : "items"} selected` : "" }),
+    isVisible && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Bulk actions",
+        className: styles["bulk-action-bar"],
+        ...{ [ANV_PART_ATTR]: PARTS.bulkActionBar },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["selection"], children: [
+            /* @__PURE__ */ jsxs("span", { className: styles["count"], "aria-hidden": "true", children: [
+              formatCount(selectedCount),
+              " selected"
+            ] }),
+            selectAllCount !== void 0 && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "small",
+                appearance: "ghost",
+                onClick: onSelectAll,
+                disabled: isPending,
+                ...{ [ANV_PART_ATTR]: PARTS.bulkSelectAllButton },
+                children: [
+                  "Select all ",
+                  formatCount(selectAllCount),
+                  " items",
+                  hasUnselectableRows && ` of ${formatCount(selectAllCount)}`
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles["actions"], children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                appearance: "ghost",
+                onClick: handleCancel,
+                ...{ [ANV_PART_ATTR]: PARTS.bulkCancelButton },
+                children: "Cancel"
+              }
+            ),
+            secondaryAction && (() => {
+              const {
+                label,
+                onClick: _onClick,
+                appearance = "secondary",
+                ...buttonProps
+              } = secondaryAction;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  appearance,
+                  ...buttonProps,
+                  disabled: buttonProps.disabled || isPending,
+                  loading: pendingKey === "secondary",
+                  onClick: () => runAction("secondary", secondaryAction),
+                  ...{ [ANV_PART_ATTR]: PARTS.bulkActionButton },
+                  children: getLabel(label)
+                }
+              );
+            })(),
+            primaryAction && ("items" in primaryAction ? /* @__PURE__ */ jsx(
+              Menu,
+              {
+                label: getLabel(primaryAction.label),
+                trigger: renderPrimaryMenuTrigger(primaryAction),
+                children: renderMenuItems(primaryAction.items)
+              }
+            ) : (() => {
+              const {
+                label,
+                onClick: _onClick,
+                appearance = "primary",
+                ...buttonProps
+              } = primaryAction;
+              return /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  appearance,
+                  ...buttonProps,
+                  disabled: buttonProps.disabled || isPending,
+                  loading: pendingKey === "primary",
+                  onClick: () => runAction("primary", primaryAction),
+                  ...{ [ANV_PART_ATTR]: PARTS.bulkActionButton },
+                  children: getLabel(label)
+                }
+              );
+            })())
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+const SvgViewColumn = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M14.67 6v12c0 .55-.45 1-1 1h-3.33c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h3.33c.55 0 1 .45 1 1zm2 13H20c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1h-3.33c-.55 0-1 .45-1 1v12c0 .55.44 1 1 1zm-8.34-1V6c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3.33c.56 0 1-.45 1-1z" }));
+
+const SvgLock = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z" }));
+
+const SvgLockOpen = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22a1 1 0 0 0 1.22-.72A2.996 2.996 0 0 1 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z" }));
+
+const SvgVisibility = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }));
+
+const SvgVisibilityOff = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16a.996.996 0 0 0 0 1.41l1.97 1.97A11.892 11.892 0 0 0 1 11.5C2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72a.996.996 0 1 0 1.41-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33a2.97 2.97 0 0 0-2.64-2.64l2.64 2.64z" }));
+
+function isEditableColumn(column) {
+  return column.pinned !== "right";
+}
+function getColumnLabel(column) {
+  return column.header?.label ?? column.headerLabel ?? String(column.id);
+}
+function getLeafColumnIds(columns) {
+  const ids = /* @__PURE__ */ new Set();
+  const visit = (list) => {
+    for (const column of list) {
+      if (column.columns) {
+        visit(column.columns);
+      } else {
+        ids.add(String(column.id));
+      }
+    }
+  };
+  visit(columns);
+  return ids;
+}
+function getDefaultLayout(columns) {
+  return columns.filter(isEditableColumn).map((column) => ({
+    id: String(column.id),
+    visible: true,
+    pinned: column.pinned === "left"
+  }));
+}
+function mergeLayout(layout, editable) {
+  const byId = new Map(editable.map((column) => [String(column.id), column]));
+  const seen = /* @__PURE__ */ new Set();
+  const merged = [];
+  for (const pref of layout) {
+    const column = byId.get(pref.id);
+    if (column && !seen.has(pref.id)) {
+      seen.add(pref.id);
+      const visible = pref.visible || !!column.alwaysVisible;
+      merged.push({ id: pref.id, visible, pinned: pref.pinned && visible });
+    }
+  }
+  for (const column of editable) {
+    const id = String(column.id);
+    if (!seen.has(id)) {
+      merged.push({ id, visible: true, pinned: column.pinned === "left" });
+    }
+  }
+  return merged;
+}
+function applyColumnLayout(columns, layout) {
+  const editable = columns.filter(isEditableColumn);
+  const byId = new Map(editable.map((c) => [String(c.id), c]));
+  let merged = mergeLayout(layout, editable).filter((pref) => pref.visible);
+  if (merged.length === 0 && editable.length === columns.length) {
+    merged = getDefaultLayout(editable);
+  }
+  const ordered = [
+    ...merged.filter((p) => p.pinned),
+    ...merged.filter((p) => !p.pinned)
+  ].map((pref) => ({
+    ...byId.get(pref.id),
+    pinned: pref.pinned ? "left" : void 0
+  }));
+  const shown = new Set(merged.map((pref) => pref.id));
+  const next = [];
+  let cursor = 0;
+  for (const column of columns) {
+    if (!isEditableColumn(column)) {
+      next.push(column);
+    } else if (shown.has(String(column.id))) {
+      next.push(ordered[cursor++]);
+    }
+  }
+  return next;
+}
+const PINNED = "pinned";
+const VISIBLE = "visible";
+const HIDDEN = "hidden";
+function toBuckets(layout) {
+  const buckets = { [PINNED]: [], [VISIBLE]: [], [HIDDEN]: [] };
+  for (const pref of layout) {
+    const zone = !pref.visible ? HIDDEN : pref.pinned ? PINNED : VISIBLE;
+    buckets[zone].push(pref.id);
+  }
+  return buckets;
+}
+function toLayout(buckets) {
+  return [
+    ...buckets[PINNED].map((id) => ({ id, visible: true, pinned: true })),
+    ...buckets[VISIBLE].map((id) => ({ id, visible: true, pinned: false })),
+    ...buckets[HIDDEN].map((id) => ({ id, visible: false, pinned: false }))
+  ];
+}
+function reorderBucket(prev, bucket, event) {
+  if (!event.valid || event.zoneSort === null) {
+    return prev;
+  }
+  return { ...prev, [bucket]: event.zoneSort.map(String) };
+}
+function togglePinnedIn(prev, id) {
+  if (prev[PINNED].includes(id)) {
+    return {
+      ...prev,
+      [PINNED]: prev[PINNED].filter((f) => f !== id),
+      [VISIBLE]: [id, ...prev[VISIBLE]]
+    };
+  }
+  if (prev[VISIBLE].includes(id)) {
+    return {
+      ...prev,
+      [PINNED]: [...prev[PINNED], id],
+      [VISIBLE]: prev[VISIBLE].filter((f) => f !== id)
+    };
+  }
+  return prev;
+}
+function isLastShown(buckets, hasFixedColumns = false) {
+  return !hasFixedColumns && buckets[VISIBLE].length <= 1 && buckets[PINNED].length === 0;
+}
+function toggleVisibleIn(prev, id, hasFixedColumns = false) {
+  if (prev[VISIBLE].includes(id)) {
+    if (isLastShown(prev, hasFixedColumns)) {
+      return prev;
+    }
+    return {
+      ...prev,
+      [VISIBLE]: prev[VISIBLE].filter((f) => f !== id),
+      [HIDDEN]: [...prev[HIDDEN], id]
+    };
+  }
+  if (prev[HIDDEN].includes(id)) {
+    return {
+      ...prev,
+      [VISIBLE]: [...prev[VISIBLE], id],
+      [HIDDEN]: prev[HIDDEN].filter((f) => f !== id)
+    };
+  }
+  return prev;
+}
+
+const draftsOf = (sections) => sections.map((section) => toBuckets(section.layout));
+const bucketsEqual = (a, b) => ["pinned", "visible", "hidden"].every(
+  (name) => a[name].length === b[name].length && a[name].every((id, i) => id === b[name][i])
+);
+function EditColumnsDrawer({
+  open,
+  onClose,
+  sections
+}) {
+  const [drafts, setDrafts] = useState(
+    () => draftsOf(sections)
+  );
+  const [initial, setInitial] = useState(drafts);
+  const [confirm, setConfirm] = useState(null);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      const opening = draftsOf(sections);
+      setDrafts(opening);
+      setInitial(opening);
+    }
+    wasOpen.current = open;
+  }, [open, sections]);
+  const edit = (index, update) => {
+    setDrafts((prev) => prev.map((b, i) => i === index ? update(b) : b));
+  };
+  const dirty = sections.map((_, i) => {
+    const draft = drafts[i];
+    const start = initial[i];
+    return !!draft && !!start && !bucketsEqual(draft, start);
+  });
+  const anyDirty = dirty.some(Boolean);
+  const handleClose = () => anyDirty ? setConfirm("discard") : onClose();
+  const handleApply = () => {
+    sections.forEach((section, i) => {
+      if (dirty[i] && drafts[i]) {
+        section.onApply(toLayout(drafts[i]));
+      }
+    });
+    onClose();
+  };
+  const multiple = sections.length > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Drawer,
+      {
+        open,
+        onClose: handleClose,
+        size: "medium",
+        ...{ [ANV_PART_ATTR]: PARTS.editColumnsDrawer },
+        children: [
+          /* @__PURE__ */ jsx(Drawer.Header, { children: "Edit Columns" }),
+          /* @__PURE__ */ jsx(Drawer.Content, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "6", children: [
+            /* @__PURE__ */ jsx(Text, { children: "Pinned columns stay at the left of the table. Drag columns to reorder them, and use the eye icon to hide or show them." }),
+            sections.map((section, i) => {
+              const buckets = drafts[i];
+              if (!buckets) {
+                return null;
+              }
+              const editor = /* @__PURE__ */ jsx(
+                SectionEditor,
+                {
+                  buckets,
+                  alwaysVisibleIds: section.alwaysVisibleIds,
+                  hasFixedColumns: section.hasFixedColumns,
+                  labels: section.labels,
+                  onEdit: (update) => edit(i, update),
+                  zonePrefix: section.id
+                },
+                section.id
+              );
+              return multiple ? /* @__PURE__ */ jsx(
+                Card,
+                {
+                  padding: "medium",
+                  ...{ [ANV_PART_ATTR]: PARTS.columnsSection },
+                  children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "4", grow: 1, children: [
+                    /* @__PURE__ */ jsx(Text, { variant: "headline", el: "h3", size: "small", children: section.title ?? section.id }),
+                    editor
+                  ] })
+                },
+                section.id
+              ) : /* @__PURE__ */ jsx(Flex, { direction: "column", children: editor }, section.id);
+            })
+          ] }) }),
+          /* @__PURE__ */ jsxs(Drawer.Footer, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                onClick: () => setConfirm("reset"),
+                ...{ [ANV_PART_ATTR]: PARTS.resetColumnsButton },
+                children: "Reset Defaults"
+              }
+            ),
+            /* @__PURE__ */ jsx(Flex, { grow: 1 }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                onClick: handleClose,
+                ...{ [ANV_PART_ATTR]: PARTS.cancelButton },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                onClick: handleApply,
+                disabled: !anyDirty,
+                ...{ [ANV_PART_ATTR]: PARTS.applyButton },
+                children: "Apply"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirm === "discard",
+        header: "You have unsaved changes",
+        confirmLabel: "Discard",
+        onConfirm: () => {
+          setConfirm(null);
+          onClose();
+        },
+        onClose: () => setConfirm(null),
+        children: "Are you sure you want to close? Your changes will be lost."
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirm === "reset",
+        header: "Reset columns",
+        confirmLabel: "Reset Defaults",
+        danger: true,
+        onConfirm: () => {
+          setConfirm(null);
+          for (const section of sections) {
+            section.onReset();
+          }
+          onClose();
+        },
+        onClose: () => setConfirm(null),
+        children: multiple ? "Reset every table to its default columns? Your changes will be reverted." : "Reset the table to its default columns? Your changes will be reverted."
+      }
+    )
+  ] });
+}
+function SectionEditor({
+  alwaysVisibleIds = [],
+  buckets,
+  hasFixedColumns,
+  labels,
+  onEdit,
+  zonePrefix
+}) {
+  const labelOf = (id) => labels[id] ?? id;
+  const lastShown = isLastShown(buckets, hasFixedColumns);
+  const controls = {
+    labelOf,
+    onTogglePinned: (id) => onEdit((prev) => togglePinnedIn(prev, id)),
+    onToggleVisible: (id) => onEdit((prev) => toggleVisibleIn(prev, id, hasFixedColumns))
+  };
+  const sortableZone = (bucket) => (
+    // A DndSort per zone keeps drags inside it; pinning is the lock button's job.
+    /* @__PURE__ */ jsx(
+      DndSort,
+      {
+        onDrop: (event) => onEdit((prev) => reorderBucket(prev, bucket, event)),
+        children: /* @__PURE__ */ jsx(
+          DndSort.Zone,
+          {
+            id: `${zonePrefix}-${bucket}`,
+            label: bucket === "pinned" ? "Pinned columns" : "Visible columns",
+            orientation: "vertical",
+            sortable: true,
+            sortedIds: buckets[bucket],
+            gap: "2",
+            children: buckets[bucket].map((id) => /* @__PURE__ */ jsx(
+              DndSort.Card,
+              {
+                id,
+                label: labelOf(id),
+                dragOnlyWithHandle: true,
+                padding: "xsmall",
+                ...{ [ANV_PART_ATTR]: PARTS.columnCard },
+                children: /* @__PURE__ */ jsx(
+                  CardControls,
+                  {
+                    id,
+                    visible: true,
+                    pinned: bucket === "pinned",
+                    disableHide: bucket === "visible" && lastShown,
+                    alwaysVisible: alwaysVisibleIds.includes(id),
+                    ...controls
+                  }
+                )
+              },
+              id
+            ))
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "6", children: [
+    buckets.pinned.length > 0 && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsx(ZoneHeading, { children: "Pinned Columns" }),
+      sortableZone("pinned")
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsx(ZoneHeading, { children: "Visible Columns" }),
+      sortableZone("visible")
+    ] }),
+    buckets.hidden.length > 0 && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+      /* @__PURE__ */ jsx(ZoneHeading, { children: "Hidden Columns" }),
+      /* @__PURE__ */ jsx(Grid, { templateColumns: "1fr", gap: "2", children: buckets.hidden.map((id) => /* @__PURE__ */ jsx(
+        Card,
+        {
+          padding: "xsmall",
+          ...{ [ANV_PART_ATTR]: PARTS.columnCard },
+          children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: "2", grow: 1, children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                svg: SvgDragIndicator,
+                "aria-hidden": "true",
+                style: { opacity: 0.4 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CardControls,
+              {
+                id,
+                visible: false,
+                pinned: false,
+                ...controls
+              }
+            )
+          ] })
+        },
+        id
+      )) })
+    ] })
+  ] });
+}
+function ConfirmDialog({
+  open,
+  header,
+  confirmLabel,
+  danger,
+  onConfirm,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose, children: [
+    /* @__PURE__ */ jsx(Dialog.Header, { children: header }),
+    /* @__PURE__ */ jsx(Dialog.Content, { children }),
+    /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+      /* @__PURE__ */ jsx(Dialog.CancelButton, { children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: danger ? "danger" : "primary",
+          onClick: onConfirm,
+          ...{ [ANV_PART_ATTR]: PARTS.confirmButton },
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] });
+}
+function ZoneHeading({ children }) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "1", alignItems: "center", children: [
+    /* @__PURE__ */ jsx(Text, { variant: "eyebrow", size: "large", style: { whiteSpace: "nowrap" }, children }),
+    /* @__PURE__ */ jsx(Divider, {})
+  ] });
+}
+function CardControls({
+  id,
+  visible,
+  pinned,
+  labelOf,
+  onTogglePinned,
+  onToggleVisible,
+  disableHide,
+  alwaysVisible
+}) {
+  const label = labelOf(id);
+  const pinBlocked = !visible;
+  const hideBlocked = !!alwaysVisible || pinned || visible && !!disableHide;
+  const pinTip = !visible ? "Hidden columns can't be pinned" : pinned ? "Unpin column" : "Pin column";
+  const visibilityTip = alwaysVisible ? "This column is always visible" : pinned ? "Unpin this column to hide it" : visible && disableHide ? "Show another column before hiding this one" : visible ? "Hide column" : "Show column";
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      templateColumns: "1fr auto auto",
+      alignItems: "center",
+      gap: "1",
+      style: { flex: 1 },
+      children: [
+        /* @__PURE__ */ jsx(Text, { children: label }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "ghost",
+              size: "xsmall",
+              icon: pinned ? SvgLock : SvgLockOpen,
+              "aria-label": `${pinTip}: ${label}`,
+              "aria-disabled": pinBlocked,
+              onClick: () => {
+                if (!pinBlocked) onTogglePinned(id);
+              },
+              ...{ [ANV_PART_ATTR]: PARTS.pinColumnButton }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip.Content, { children: pinTip })
+        ] }),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "ghost",
+              size: "xsmall",
+              icon: visible ? SvgVisibility : SvgVisibilityOff,
+              "aria-label": `${visibilityTip}: ${label}`,
+              "aria-disabled": hideBlocked,
+              onClick: () => {
+                if (!hideBlocked) onToggleVisible(id);
+              },
+              ...{ [ANV_PART_ATTR]: PARTS.hideColumnButton }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip.Content, { children: visibilityTip })
+        ] })
+      ]
+    }
+  );
+}
+
+const DEFAULT_FILTER_BAR_SIZE = "small";
+function DataTableFilterToolbar({
+  filters,
+  tools,
+  onFilterChange,
+  columnEditing
+}) {
+  const [columnsOpen, setColumnsOpen] = useState(false);
+  const hasFilters = (filters?.items.length ?? 0) > 0;
+  const hasActions = (tools?.actions.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: "2", alignItems: "center", justifyContent: "flex-end", children: [
+    filters && hasFilters && /* @__PURE__ */ jsx(
+      FilterBar,
+      {
+        size: filters.size ?? DEFAULT_FILTER_BAR_SIZE,
+        associatedContent: "table filters",
+        filters: filters.items,
+        onFilterChange,
+        controlledFiltering: filters.controlled,
+        style: { flex: "1 1 auto" }
+      }
+    ),
+    (hasActions || columnEditing) && /* @__PURE__ */ jsxs(
+      Toolbar,
+      {
+        size: tools?.size ?? DEFAULT_FILTER_BAR_SIZE,
+        associatedContent: "table actions",
+        style: { flex: "0 0 auto", width: "fit-content" },
+        children: [
+          tools?.actions.map(({ id, ...buttonProps }) => /* @__PURE__ */ jsx(ToolbarButton, { ...buttonProps }, id)),
+          columnEditing && /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              icon: { after: SvgViewColumn },
+              onClick: () => setColumnsOpen(true),
+              ...{ [ANV_PART_ATTR]: PARTS.editColumnsButton },
+              children: "Edit Columns"
+            }
+          )
+        ]
+      }
+    ),
+    columnEditing && /* @__PURE__ */ jsx(
+      EditColumnsDrawer,
+      {
+        open: columnsOpen,
+        onClose: () => setColumnsOpen(false),
+        sections: [columnEditing]
+      }
+    )
+  ] });
+}
+
+function toEditColumnsSection({ title, columns, layout, onLayoutChange }, id) {
+  const editable = columns.filter(isEditableColumn);
+  return {
+    id,
+    title,
+    hasFixedColumns: editable.length < columns.length || editable.some((c) => c.alwaysVisible),
+    alwaysVisibleIds: editable.filter((column) => column.alwaysVisible).map((column) => String(column.id)),
+    labels: Object.fromEntries(
+      editable.map((column) => [String(column.id), getColumnLabel(column)])
+    ),
+    layout: mergeLayout(layout, editable),
+    onApply: (next) => onLayoutChange(next),
+    onReset: () => onLayoutChange(getDefaultLayout(columns))
+  };
+}
+
+function DataTableEmptyAddRow({ rowAdd }) {
+  return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", style: { padding: "var(--spacing-2)" }, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: SvgAdd,
+      ...{ [ANV_PART_ATTR]: PARTS.rowAddButton },
+      disabled: rowAdd.disabled,
+      loading: rowAdd.loading,
+      onClick: rowAdd.onAddRow,
+      children: rowAdd.addRowLabel ?? "Add row"
+    }
+  ) });
+}
+function DataTableAddRow({ rowAdd }) {
+  return /* @__PURE__ */ jsx(
+    Toolbar,
+    {
+      size: rowAdd.size ?? "medium",
+      associatedContent: "table add row",
+      style: { width: "fit-content" },
+      children: /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          icon: SvgAdd,
+          disabled: rowAdd.disabled,
+          loading: rowAdd.loading,
+          onClick: rowAdd.onAddRow,
+          children: rowAdd.addRowLabel ?? "Add row"
+        }
+      )
+    }
+  );
+}
+
 const EMPTY_DATA = [];
 const REACT_FORWARD_REF = Symbol.for("react.forward_ref");
 const REACT_MEMO = Symbol.for("react.memo");
@@ -9482,11 +10382,29 @@ function isEmptyStateSvgComponent(value) {
   }
   return type === REACT_MEMO;
 }
+const PARENT_PLACEMENT_KEYS = /* @__PURE__ */ new Set([
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "order",
+  "gridArea",
+  "gridColumn",
+  "gridRow",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd",
+  "alignSelf",
+  "justifySelf",
+  "placeSelf"
+]);
 function DataTableInner(props, ref) {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const {
     data: dataProp,
-    columns: columnsProp,
+    columns: columnsInput,
+    columnEditing,
     customFooter,
     defaultExpandedRowIds,
     defaultSelectedRowIds,
@@ -9508,14 +10426,26 @@ function DataTableInner(props, ref) {
     disableVirtualization,
     forceVirtualization,
     getRowVersion,
+    filters,
+    tools,
+    bulkActions,
+    rowAdd,
     className,
     style,
     ...rest
   } = componentProps;
-  const styleCombined = {
-    ...style,
-    ...layoutStyles
-  };
+  const columnEditingLayout = columnEditing?.layout;
+  const columnsProp = useMemo(
+    () => columnEditingLayout ? applyColumnLayout(columnsInput, columnEditingLayout) : columnsInput,
+    [columnsInput, columnEditingLayout]
+  );
+  const columnEditingSection = useMemo(
+    () => columnEditing && !columnEditing.hideButton ? toEditColumnsSection(
+      { columns: columnsInput, ...columnEditing },
+      "table"
+    ) : void 0,
+    [columnEditing, columnsInput]
+  );
   const tableRef = useRef(null);
   const lastBodyHeightRef = useRef(null);
   const [rowSelection, setRowSelection] = useOptionallyControlledState({
@@ -9525,6 +10455,14 @@ function DataTableInner(props, ref) {
       onSelectRow?.(Object.keys(newRowSelection));
     }
   });
+  const [isAllRowsSelected, setIsAllRowsSelected] = useState(false);
+  const selectedRowCount = Object.keys(rowSelection ?? {}).filter(
+    (id) => rowSelection[id]
+  ).length;
+  const clearSelection = useCallback(() => {
+    setIsAllRowsSelected(false);
+    setRowSelection({});
+  }, [setRowSelection]);
   const readOnlyRowMap = useMemo(
     () => readOnlyRowIds ? Object.fromEntries(readOnlyRowIds.map((id) => [String(id), true])) : {},
     [readOnlyRowIds]
@@ -9535,13 +10473,19 @@ function DataTableInner(props, ref) {
     () => sortedColumnId !== void 0 ? [{ id: sortedColumnId, desc: sortedColumnDesc ?? false }] : void 0,
     [sortedColumnId, sortedColumnDesc]
   );
-  const [sorting, setSorting] = useOptionallyControlledState({
+  const [rawSorting, setSorting] = useOptionallyControlledState({
     controlledValue: controlledSorting,
     defaultValue: defaultSortedColumn ? [defaultSortedColumn] : void 0,
     onChange: (newSorting) => {
       onSort?.(newSorting[0]);
     }
   });
+  const sorting = useMemo(() => {
+    const sortedId = rawSorting?.[0]?.id;
+    if (!columnEditing || sortedId === void 0) return rawSorting ?? [];
+    return getLeafColumnIds(columnsProp).has(sortedId) ? rawSorting : [];
+  }, [rawSorting, columnEditing, columnsProp]);
+  const sortHidden = rawSorting?.[0] !== void 0 && sorting.length === 0;
   const isPaginated = !!pagination;
   const paginationObject = typeof pagination === "object" ? pagination : void 0;
   const rowsPerPage = paginationObject?.rowsPerPage ?? 25;
@@ -9554,6 +10498,15 @@ function DataTableInner(props, ref) {
       paginationObject?.onPageChange?.(newPageIndex);
     }
   });
+  const effectivePageIndex = sortHidden && isPaginated ? 0 : currentPageIndex ?? 0;
+  useEffect(() => {
+    if (sortHidden) {
+      setSorting([]);
+      if (isPaginated) {
+        setCurrentPageIndex(0);
+      }
+    }
+  }, [sortHidden]);
   const [refreshCounter, setRefreshCounter] = useState(0);
   const pageLoader = paginationObject?.loadPageData;
   const isAsyncPaginated = !!pageLoader && typeof pageLoader === "function";
@@ -9578,9 +10531,10 @@ function DataTableInner(props, ref) {
         setRefreshCounter((c) => c + 1);
         setCurrentPageIndex(0);
       },
-      clearCache
+      clearCache,
+      clearSelection
     }),
-    [setCurrentPageIndex, clearCache]
+    [setCurrentPageIndex, clearCache, clearSelection]
   );
   const isFirstRender = useRef(true);
   useEffect(() => {
@@ -9596,10 +10550,10 @@ function DataTableInner(props, ref) {
     if (!isAsyncPaginated) {
       return dataProp;
     }
-    return getOrLoad(currentPageIndex ?? 0, rowsPerPage, sorting?.[0]);
+    return getOrLoad(effectivePageIndex, rowsPerPage, sorting?.[0]);
   }, [
     isAsyncPaginated,
-    currentPageIndex,
+    effectivePageIndex,
     rowsPerPage,
     dataProp,
     refreshKey,
@@ -9718,8 +10672,8 @@ function DataTableInner(props, ref) {
               tabIndex: -1,
               onClick: table2.getToggleAllRowsExpandedHandler(),
               appearance: "ghost",
-              className: cx(styles["expand-button"], {
-                [styles["expanded"]]: table2.getIsAllRowsExpanded()
+              className: cx(styles$1["expand-button"], {
+                [styles$1["expanded"]]: table2.getIsAllRowsExpanded()
               }),
               size: "small",
               icon: SvgChevronRight,
@@ -9739,8 +10693,8 @@ function DataTableInner(props, ref) {
                 appearance: "ghost",
                 size: "small",
                 icon: SvgChevronRight,
-                className: cx(styles["expand-button"], {
-                  [styles["expanded"]]: row.getIsExpanded()
+                className: cx(styles$1["expand-button"], {
+                  [styles$1["expanded"]]: row.getIsExpanded()
                 }),
                 "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
                 "aria-expanded": hasSubComponent && row.getCanExpand() ? row.getIsExpanded() : void 0,
@@ -9830,7 +10784,7 @@ function DataTableInner(props, ref) {
       sorting,
       ...isPaginated && {
         pagination: {
-          pageIndex: currentPageIndex ?? 0,
+          pageIndex: effectivePageIndex,
           pageSize: rowsPerPage
         }
       }
@@ -9863,6 +10817,36 @@ function DataTableInner(props, ref) {
       }
     }
   });
+  const previousRowSelectionRef = useRef(rowSelection);
+  const hasLostSelectedRow = Object.keys(previousRowSelectionRef.current).some(
+    (id) => previousRowSelectionRef.current[id] && !rowSelection[id]
+  );
+  previousRowSelectionRef.current = rowSelection;
+  if (isAllRowsSelected && (hasLostSelectedRow || selectedRowCount === 0)) {
+    setIsAllRowsSelected(false);
+  }
+  const hasUnselectedLoadedRow = isAllRowsSelected && table.getCoreRowModel().flatRows.some((row) => row.getCanSelect() && !row.getIsSelected());
+  useLayoutEffect(() => {
+    if (hasUnselectedLoadedRow) {
+      table.toggleAllRowsSelected(true);
+    }
+  }, [hasUnselectedLoadedRow, table]);
+  const isBulkActionBarEnabled = !!bulkActions && !!isSelectable;
+  const isBulkActionBarVisible = isBulkActionBarEnabled && selectedRowCount > 0;
+  const canSelectAllRows = !!bulkActions?.selectAll && isPaginated && !isCursorPagination && totalItemCount !== void 0 && totalItemCount > rowsPerPage && !isAllRowsSelected;
+  let allRowCount = totalItemCount;
+  let selectableRowCount = bulkActions?.selectableRowCount ?? totalItemCount;
+  if (bulkActions?.selectAll && !isAsyncPaginated && !isCursorPagination) {
+    const flatRows = table.getCoreRowModel().flatRows;
+    allRowCount = flatRows.length;
+    selectableRowCount = bulkActions.selectableRowCount ?? flatRows.filter((row) => row.getCanSelect()).length;
+  }
+  const getBulkSelection = () => isAllRowsSelected && selectableRowCount !== void 0 ? { mode: "all", selectedRowCount: selectableRowCount } : {
+    mode: "rows",
+    rowIds: Object.keys(rowSelection).filter(
+      (id) => rowSelection[id]
+    )
+  };
   const rowVirtualizer = useDataTableVirtualizer({
     rowCount: table.getRowModel().rows.length,
     scrollRef: tableRef,
@@ -9947,10 +10931,41 @@ function DataTableInner(props, ref) {
   const columnCount = useMemo(() => {
     return headers.filter((header) => header.subHeaders?.length === 0).length;
   }, [headers]);
-  const containerClassName = cx(styles["data-table-container"], className, {
-    [styles["container-with-pagination"]]: pagination && !isTrulyEmpty
+  const containerClassName = cx(styles$1["data-table-container"], className, {
+    [styles$1["container-with-pagination"]]: pagination && !isTrulyEmpty
   });
-  return /* @__PURE__ */ jsx(
+  const handleFilterChange = useCallback(
+    (next) => {
+      if (isPaginated) {
+        setCurrentPageIndex(0);
+      }
+      if (isAsyncPaginated) {
+        setRefreshCounter((c) => c + 1);
+      }
+      filters?.onChange(next);
+    },
+    [isAsyncPaginated, isPaginated, filters, setCurrentPageIndex]
+  );
+  const hasToolbar = (filters?.items.length ?? 0) > 0 || (tools?.actions.length ?? 0) > 0 || !!columnEditingSection;
+  const hasWrapper = hasToolbar || isBulkActionBarEnabled || !!rowAdd;
+  const { wrapperLayoutStyles, containerLayoutStyles } = (() => {
+    if (!hasWrapper) {
+      return { wrapperLayoutStyles: {}, containerLayoutStyles: layoutStyles };
+    }
+    const wrapper = {};
+    const container = {};
+    for (const [key, value] of Object.entries(layoutStyles ?? {})) {
+      (PARENT_PLACEMENT_KEYS.has(key) ? wrapper : container)[key] = value;
+    }
+    if ("flex" in wrapper || "flexGrow" in wrapper) {
+      container.flex = "1 1 auto";
+      if (style?.minHeight === void 0) {
+        container.minHeight = 0;
+      }
+    }
+    return { wrapperLayoutStyles: wrapper, containerLayoutStyles: container };
+  })();
+  const tableElement = /* @__PURE__ */ jsx(
     DTFocusProvider,
     {
       rowCount,
@@ -9961,139 +10976,208 @@ function DataTableInner(props, ref) {
       virtualizer: rowVirtualizer,
       headerRowCount,
       children: /* @__PURE__ */ jsx(DataTableSurfaceCoordinatorProvider, { intersectionBoundaryRef: tableRef, children: /* @__PURE__ */ jsxs(
-        TableContainer,
+        Flex,
         {
-          ...rest,
-          ref: tableRef,
-          style: {
-            ...styleCombined,
-            width: cssVars["--a2-table-width"]
-          },
-          className: containerClassName,
+          direction: "column",
+          gap: "2",
+          style: hasWrapper ? {
+            maxHeight: "100%",
+            maxWidth: "100%",
+            minHeight: 0,
+            minWidth: 0,
+            ...wrapperLayoutStyles
+          } : { display: "contents" },
           children: [
+            hasToolbar && // Hidden rather than unmounted: FilterBar holds uncommitted input.
+            /* @__PURE__ */ jsx("div", { hidden: isBulkActionBarVisible, children: /* @__PURE__ */ jsx(
+              DataTableFilterToolbar,
+              {
+                filters,
+                tools,
+                onFilterChange: handleFilterChange,
+                columnEditing: columnEditingSection
+              }
+            ) }),
+            isBulkActionBarEnabled && bulkActions && /* @__PURE__ */ jsx(
+              DataTableBulkActionBar,
+              {
+                actions: bulkActions,
+                selectedCount: isAllRowsSelected && selectableRowCount !== void 0 ? selectableRowCount : selectedRowCount,
+                selectAllCount: canSelectAllRows ? selectableRowCount : void 0,
+                hasUnselectableRows: selectableRowCount !== void 0 && allRowCount !== void 0 && selectableRowCount < allRowCount,
+                onSelectAll: () => {
+                  setIsAllRowsSelected(true);
+                  table.toggleAllRowsSelected(true);
+                },
+                onCancel: clearSelection,
+                getSelection: getBulkSelection,
+                onActionComplete: clearSelection,
+                tableRef
+              }
+            ),
             /* @__PURE__ */ jsxs(
-              TableBase,
+              TableContainer,
               {
-                type: "data-table",
-                style: cssVars,
-                rowCount,
-                colCount: columnCount,
-                hasSubRows,
+                ...rest,
+                ref: tableRef,
+                style: {
+                  ...style,
+                  ...containerLayoutStyles,
+                  width: cssVars["--a2-table-width"]
+                },
+                className: containerClassName,
                 children: [
-                  /* @__PURE__ */ jsx(DataTableHeader, { table, tableRef }),
-                  /* @__PURE__ */ jsx(
-                    DataTableRowClickProvider,
+                  /* @__PURE__ */ jsxs(
+                    TableBase,
                     {
-                      onClickRow,
-                      readOnlyRowMap,
-                      children: /* @__PURE__ */ jsx(
-                        DataTableBody,
-                        {
-                          table,
-                          hasSubRows,
-                          virtualizer: rowVirtualizer,
-                          getRowVersion,
-                          readOnlyRowMap
-                        }
-                      )
-                    }
-                  ),
-                  isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(SrOnly, { children: "No data to display." }),
-                    /* @__PURE__ */ jsx("div", { className: styles["empty-state-container"], children: /* @__PURE__ */ jsxs(
-                      Flex,
-                      {
-                        justifyContent: "center",
-                        alignItems: "center",
-                        direction: "column",
-                        gap: 2,
-                        children: [
-                          EmptyStateSvg && /* @__PURE__ */ jsx(EmptyStateSvg, { "aria-hidden": "true" }),
-                          emptyState.content
-                        ]
-                      }
-                    ) })
-                  ] }),
-                  isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(SrOnly, { children: "Loading data. Please wait." }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          height: `${loadingSpacerHeight}px`
-                        },
-                        role: "presentation",
-                        "aria-hidden": "true",
-                        children: /* @__PURE__ */ jsx(
-                          Flex,
+                      type: "data-table",
+                      style: cssVars,
+                      rowCount,
+                      colCount: columnCount,
+                      hasSubRows,
+                      children: [
+                        /* @__PURE__ */ jsx(DataTableHeader, { table, tableRef }),
+                        /* @__PURE__ */ jsx(
+                          DataTableRowClickProvider,
                           {
-                            justifyContent: "center",
-                            alignItems: "center",
-                            style: {
-                              position: "absolute",
-                              top: 0,
-                              bottom: 0,
-                              left: 0,
-                              right: 0,
-                              margin: "auto",
-                              zIndex: 3
-                            },
-                            children: /* @__PURE__ */ jsx(Spinner, {})
+                            onClickRow,
+                            readOnlyRowMap,
+                            children: /* @__PURE__ */ jsx(
+                              DataTableBody,
+                              {
+                                table,
+                                hasSubRows,
+                                virtualizer: rowVirtualizer,
+                                getRowVersion,
+                                readOnlyRowMap
+                              }
+                            )
+                          }
+                        ),
+                        isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(SrOnly, { children: "No data to display." }),
+                          /* @__PURE__ */ jsx("div", { className: styles$1["empty-state-container"], children: /* @__PURE__ */ jsxs(
+                            Flex,
+                            {
+                              justifyContent: "center",
+                              alignItems: "center",
+                              direction: "column",
+                              gap: 2,
+                              children: [
+                                EmptyStateSvg && /* @__PURE__ */ jsx(EmptyStateSvg, { "aria-hidden": "true" }),
+                                emptyState.content
+                              ]
+                            }
+                          ) })
+                        ] }),
+                        isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(SrOnly, { children: "Loading data. Please wait." }),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                height: `${loadingSpacerHeight}px`
+                              },
+                              role: "presentation",
+                              "aria-hidden": "true",
+                              children: /* @__PURE__ */ jsx(
+                                Flex,
+                                {
+                                  justifyContent: "center",
+                                  alignItems: "center",
+                                  style: {
+                                    position: "absolute",
+                                    top: 0,
+                                    bottom: 0,
+                                    left: 0,
+                                    right: 0,
+                                    margin: "auto",
+                                    zIndex: 3
+                                  },
+                                  children: /* @__PURE__ */ jsx(Spinner, {})
+                                }
+                              )
+                            }
+                          )
+                        ] }),
+                        hasFooters && !isTrulyEmpty && /* @__PURE__ */ jsx(
+                          DataTableFooter,
+                          {
+                            className: pagination ? styles$1["footer-with-pagination"] : void 0,
+                            table,
+                            columns: columnsProp,
+                            customFooter
                           }
                         )
-                      }
-                    )
-                  ] }),
-                  hasFooters && !isTrulyEmpty && /* @__PURE__ */ jsx(
-                    DataTableFooter,
+                      ]
+                    }
+                  ),
+                  isEmpty && emptyState?.includeAddRow && rowAdd && /* @__PURE__ */ jsx(DataTableEmptyAddRow, { rowAdd }),
+                  pagination && !isTrulyEmpty && (isCursorPagination ? /* @__PURE__ */ jsx(
+                    DataTableCursorPagination,
                     {
-                      className: pagination ? styles["footer-with-pagination"] : void 0,
-                      table,
-                      columns: columnsProp,
-                      customFooter
+                      itemsPerPage: rowsPerPage,
+                      page: effectivePageIndex + 1,
+                      hasNextPage: paginationObject?.hasNextPage,
+                      hasPrevPage: paginationObject?.hasPrevPage,
+                      onPageChange: (page) => {
+                        setCurrentPageIndex(page - 1);
+                      },
+                      onItemsPerPageChange: (itemsPerPage) => {
+                        paginationObject?.onRowsPerPageChange?.(itemsPerPage);
+                      },
+                      itemsPerPageOptions: paginationObject?.onRowsPerPageChange ? paginationObject.rowsPerPageOptions : void 0,
+                      itemsPerPageLabel: paginationObject?.itemsPerPageLabel
                     }
-                  )
+                  ) : /* @__PURE__ */ jsx(
+                    DataTablePagination,
+                    {
+                      itemsPerPage: rowsPerPage,
+                      showCount: paginationObject?.showCount ?? true,
+                      page: effectivePageIndex + 1,
+                      totalItemCount,
+                      onPageChange: (page) => {
+                        setCurrentPageIndex(page - 1);
+                      },
+                      onItemsPerPageChange: (itemsPerPage) => {
+                        paginationObject?.onRowsPerPageChange?.(itemsPerPage);
+                      },
+                      itemsPerPageOptions: paginationObject?.rowsPerPageOptions,
+                      itemsPerPageLabel: paginationObject?.itemsPerPageLabel,
+                      itemRangeFormatter: paginationObject?.itemRangeFormatter
+                    }
+                  ))
                 ]
               }
             ),
-            pagination && !isTrulyEmpty && (isCursorPagination ? /* @__PURE__ */ jsx(
-              DataTableCursorPagination,
-              {
-                itemsPerPage: rowsPerPage,
-                page: (currentPageIndex ?? 0) + 1,
-                hasNextPage: paginationObject?.hasNextPage,
-                hasPrevPage: paginationObject?.hasPrevPage,
-                onPageChange: (page) => {
-                  setCurrentPageIndex(page - 1);
-                },
-                onItemsPerPageChange: (itemsPerPage) => {
-                  paginationObject?.onRowsPerPageChange?.(itemsPerPage);
-                },
-                itemsPerPageOptions: paginationObject?.onRowsPerPageChange ? paginationObject.rowsPerPageOptions : void 0
-              }
-            ) : /* @__PURE__ */ jsx(
-              DataTablePagination,
-              {
-                itemsPerPage: rowsPerPage,
-                showCount: paginationObject?.showCount ?? true,
-                page: (currentPageIndex ?? 0) + 1,
-                totalItemCount,
-                onPageChange: (page) => {
-                  setCurrentPageIndex(page - 1);
-                },
-                onItemsPerPageChange: (itemsPerPage) => {
-                  paginationObject?.onRowsPerPageChange?.(itemsPerPage);
-                },
-                itemsPerPageOptions: paginationObject?.rowsPerPageOptions
-              }
-            ))
+            rowAdd && /* @__PURE__ */ jsx(DataTableAddRow, { rowAdd })
           ]
         }
       ) })
     }
   );
+  return tableElement;
 }
 const DataTable = forwardRef(DataTableInner);
 
-export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-DIXP9-Bx.js.map
+function DataTableEditColumnsDrawer({
+  open,
+  onClose,
+  sections
+}) {
+  const drawerSections = useMemo(
+    () => sections.map((section, i) => toEditColumnsSection(section, `${i}`)),
+    [sections]
+  );
+  return /* @__PURE__ */ jsx(
+    EditColumnsDrawer,
+    {
+      open,
+      onClose,
+      sections: drawerSections
+    }
+  );
+}
+
+export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, DataTableEditColumnsDrawer as k, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
+//# sourceMappingURL=DataTableEditColumnsDrawer-C7OHRsJU.js.map