@economic/taco 1.19.1 → 1.21.0

package/dist/taco.cjs.development.js

@@ -34,8 +34,14 @@ var unset = _interopDefault(require('lodash/unset'));
 var get = _interopDefault(require('lodash/get'));
 var compact = _interopDefault(require('lodash/compact'));
 var pullAt = _interopDefault(require('lodash/pullAt'));
-var TabsPrimitive = require('@radix-ui/react-tabs');
+var reactTable$1 = require('@tanstack/react-table');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
+var ReactDOM = _interopDefault(require('react-dom'));
+var reactVirtual = require('react-virtual');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
 
@@ -3628,6 +3634,29 @@ const defaultLocalisationTexts = {
     newSubRow: 'New row (shift + n)',
     loading: 'Loading...'
   },
+  table2: {
+    shortcuts: {
+      search: 'Search',
+      filter: 'Filter',
+      previousRow: 'Previous row',
+      nextRow: 'Next row',
+      editCell: 'Edit cell',
+      previousColumn: 'Previous column',
+      nextColumn: 'Next column',
+      rowClick: 'Activate current row',
+      selectRow: 'Select current row',
+      selectAllRows: 'Select all rows',
+      expandRow: 'Expand current row',
+      collapseRow: 'Collapse current row'
+    },
+    rowIndicator: {
+      rowWillMove: 'Row will move due to sorting',
+      rowWillBeFiltered: 'Row will hide due to filtering',
+      searchFilterMovementReason: 'Due to a search filter applied to this table, this row will be hidden as soon as you select another row',
+      tableFilterMovementReason: "Due to a filter applied to the column '[COLUMN]', this row will be hidden as soon as you select another row",
+      sortingMovementReason: "Due to sorting applied to the column '[COLUMN]', this row will move position as soon as you select another row"
+    }
+  },
   select: {
     allOptionsSelected: 'All'
   },
@@ -3915,14 +3944,15 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem] focus:yt-focus',
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
   //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
-  props.className, {
+  {
     'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
     'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled
-  });
+    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
+    'self-start': !!label
+  }, props.className);
   let handleChange;
   if (onChange) {
     handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
@@ -3934,11 +3964,18 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       id
     };
   }
+  // the enter keyboard shortcut isn't supported by default, but we want it
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.currentTarget.click();
+    }
+  };
   const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
     "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
     onCheckedChange: handleChange,
+    onKeyDown: handleKeyDown,
     ref: ref
   }), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
     className: "flex h-full w-full"
@@ -3949,7 +3986,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   if (label) {
     const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
-    }, props.className);
+    });
     return /*#__PURE__*/React.createElement("span", {
       className: labelContainerClassName
     }, element, /*#__PURE__*/React.createElement("label", {
@@ -4899,6 +4936,9 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
   }))))));
 });
 
+const isWeakEqual = (leftDate, rightDate) => {
+  return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDay() === rightDate.getDay();
+};
 const format = (date, mask = 'dd.mm.yy') => {
   if (!date) {
     return undefined;
@@ -7826,6 +7866,19 @@ function _catch(body, recover) {
   return result;
 }
 
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+  try {
+    var result = body();
+  } catch (e) {
+    return finalizer(true, e);
+  }
+  if (result && result.then) {
+    return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+  }
+  return finalizer(false, result);
+}
+
 const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(TAG_COLORS);
 const EditPopover = props => {
   const {
@@ -8094,6 +8147,7 @@ const Title$4 = /*#__PURE__*/React__default.forwardRef(function Select2Title(pro
   }));
 });
 
+const isOverflowing = element => element !== null ? element.scrollWidth > element.offsetWidth : false;
 const getIndexOfFirstChildOverflowingParent = (element, overscan = 0) => {
   let index = 0;
   let boundaryChildIndex = null;
@@ -8829,6 +8883,19 @@ const ControlledHiddenField = props => {
 };
 Select2.displayName = 'Select2';
 
+const Shortcut$1 = ({
+  keys,
+  ...props
+}) => {
+  const className = cn('inline-flex gap-0.5', props.className);
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
+    className: className
+  }), keys.map(key => /*#__PURE__*/React__default.createElement("kbd", {
+    key: key,
+    className: "wcag-blue-900 inline-flex h-4 items-center rounded px-1 font-mono text-xs font-normal"
+  }, key)));
+};
+
 const sanitizeRowProps = (row, rowExpansionRenderer) => {
   var _row$subRows;
   const props = {
@@ -10299,96 +10366,364 @@ const useTableRowCreation = (data, tableRef) => {
   };
 };
 
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
-  const {
-    id,
-    defaultId,
-    children,
-    onChange,
-    orientation = 'horizontal',
-    ...otherProps
-  } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
-    'flex w-full': orientation === 'vertical'
-  }, props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "tabs",
-    defaultValue: defaultId,
-    dir: "ltr",
-    onValueChange: onChange,
-    orientation: orientation,
-    ref: ref,
-    value: id
-  }), children);
-});
-const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
-const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const {
-    id,
-    disabled,
-    ...otherProps
-  } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
-    className: className,
-    disabled: disabled,
-    ref: ref,
+const COLUMN_ID_FOR_DRAGGABLE = '__draggable';
+const COLUMN_ID_FOR_SELECTION = '__select';
+const COLUMN_ID_FOR_EXPANSION = '__expansion';
+const COLUMN_ID_FOR_ACTIONS = '__actions';
+const isInternalColumn = id => id === COLUMN_ID_FOR_SELECTION || id === COLUMN_ID_FOR_EXPANSION || id === COLUMN_ID_FOR_ACTIONS || id === COLUMN_ID_FOR_DRAGGABLE;
+const MIN_COLUMN_SIZE = 80; // accounts for padding and sort controls
+const toggleBetween$1 = (fromRowIndex, toRowIndex) => {
+  const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;
+  const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;
+  return [fromIndex, toIndex];
+};
+function createRowDraggableColumn(onRowDrag) {
+  return {
+    id: COLUMN_ID_FOR_DRAGGABLE,
+    cell: ({
+      row,
+      table
+    }) => {
+      const meta = table.options.meta;
+      const GHOST_ELEMENT_ID = 'taco_table_dragging';
+      const onDragStart = event => {
+        const rows = row.getIsSelected() ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];
+        meta.setDragging(rows.reduce((dragging, rowBeingDragged) => ({
+          ...dragging,
+          [rowBeingDragged.id]: true
+        }), {}));
+        const data = rows.map(row => row.original);
+        // set a default data value so that the consumer doesn't have to
+        event.dataTransfer.setData('text', JSON.stringify(data));
+        const showPlaceholder = text => {
+          const ghost = document.createElement('div');
+          ghost.id = GHOST_ELEMENT_ID;
+          ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';
+          ghost.innerText = text;
+          document.body.appendChild(ghost);
+          event.dataTransfer.setDragImage(ghost, 0, 0);
+        };
+        const setDataTransfer = text => event.dataTransfer.setData('text', text);
+        onRowDrag(data, showPlaceholder, setDataTransfer);
+      };
+      const onDragEnd = () => {
+        var _document$getElementB;
+        (_document$getElementB = document.getElementById(GHOST_ELEMENT_ID)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+        meta.setDragging({});
+      };
+      return /*#__PURE__*/React__default.createElement("div", {
+        draggable: true,
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        "aria-label": "Drag row",
+        name: "drag",
+        className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed]]/row:text-white"
+      }));
+    },
+    meta: {
+      align: 'center',
+      className: 'items-center !px-0',
+      disableTruncation: true,
+      headerClassName: 'items-center !px-0'
+    },
+    // sizing
+    enableResizing: false,
+    size: 10
+  };
+}
+function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowIndex, onRowDrag, tableRef) {
+  let header;
+  let cell;
+  if (enableMultipleRowSelection) {
+    header = ({
+      table
+    }) => /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? 'Deselect all' : 'Select all', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+        className: "ml-2",
+        keys: ['Ctrl', 'A']
+      }))
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
+      "aria-label": table.getIsAllPageRowsSelected() ? 'Deselect all rows' : 'Select all rows',
+      className: "hover:border-blue !mt-0",
+      checked: table.getIsAllPageRowsSelected(),
+      indeterminate: table.getIsSomePageRowsSelected(),
+      onChange: checked => table.toggleAllPageRowsSelected(checked),
+      onClick: () => {
+        var _tableRef$current;
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+      },
+      tabIndex: -1
+    }));
+    cell = ({
+      row,
+      table
+    }) => {
+      const meta = table.options.meta;
+      const handleClick = event => {
+        var _tableRef$current2;
+        event.stopPropagation();
+        if (event.shiftKey) {
+          const [fromIndex, toIndex] = toggleBetween$1((lastSelectedRowIndex === null || lastSelectedRowIndex === void 0 ? void 0 : lastSelectedRowIndex.current) || 0, row.index);
+          table.getRowModel().rows.slice(fromIndex, toIndex + 1).forEach(row => row.toggleSelected(true));
+        } else {
+          row.toggleSelected();
+        }
+        lastSelectedRowIndex.current = row.index;
+        meta.setActiveRowIndex(row.index);
+        (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.focus();
+      };
+      return /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, table.getIsAllPageRowsSelected() ? 'Deselect' : 'Select', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+          className: "ml-2",
+          keys: ['Space']
+        }))
+      }, /*#__PURE__*/React__default.createElement(Checkbox, {
+        "aria-label": row.getIsSelected() ? 'Deselect row' : 'Select row',
+        className: "hover:border-blue !mt-[0.45rem]",
+        checked: row.getIsSelected(),
+        onClick: handleClick,
+        // this is necessary to remove console spam from eslint
+        onChange: () => false,
+        tabIndex: -1
+      }));
+    };
+  } else {
+    cell = ({
+      row,
+      table
+    }) => {
+      const meta = table.options.meta;
+      const className = 'border-grey-300 focus:yt-focus flex h-5 w-5 mt-[0.45rem] flex-shrink-0 items-center justify-center self-start rounded-full border-2 bg-white hover:border-[5px] aria-checked:border-blue-500 aria-checked:bg-blue-500 hover:aria-checked:border-blue-300';
+      const handleClick = event => {
+        var _tableRef$current3;
+        event.stopPropagation();
+        row.toggleSelected();
+        meta.setActiveRowIndex(row.index);
+        (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.focus();
+      };
+      return /*#__PURE__*/React__default.createElement("button", {
+        className: className,
+        "aria-checked": row.getIsSelected(),
+        onClick: handleClick,
+        role: "radio",
+        tabIndex: -1,
+        type: "button"
+      }, row.getIsSelected() ? /*#__PURE__*/React__default.createElement("span", {
+        className: "h-2.5 w-2.5 rounded-full bg-white"
+      }) : null);
+    };
+  }
+  return {
+    id: COLUMN_ID_FOR_SELECTION,
+    header,
+    cell,
+    meta: {
+      align: 'center',
+      className: onRowDrag ? '!pl-0 !pr-3' : '!px-3',
+      disableTruncation: true,
+      headerClassName: onRowDrag ? '!pl-0 !pr-3' : '!px-3'
+    },
+    // sizing
+    enableResizing: false,
+    size: 46
+  };
+}
+function createRowExpansionColumn() {
+  return {
+    id: COLUMN_ID_FOR_EXPANSION,
+    header: ({
+      table
+    }) => /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: table.getIsSomeRowsExpanded() ? 'Collapse all' : 'Expand all'
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      title: table.getIsSomeRowsExpanded() ? 'Collapse all rows' : 'Expand all rows',
+      appearance: "discrete",
+      className: "-mb-2 -mt-1.5",
+      icon: table.getIsSomeRowsExpanded() ? 'chevron-down-double' : 'chevron-right-double',
+      onClick: event => {
+        event.stopPropagation();
+        table.toggleAllRowsExpanded(table.getIsSomeRowsExpanded() ? false : true);
+      },
+      tabIndex: -1
+    })),
+    cell: ({
+      row
+    }) => /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, row.getIsExpanded() ? 'Collapse' : 'Expand', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+        className: "ml-2",
+        keys: ['Ctrl', row.getIsExpanded() ? '←' : '→']
+      }))
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      title: row.getIsExpanded() ? 'Collapse row' : 'Expand row',
+      appearance: "discrete",
+      icon: row.getIsExpanded() ? 'chevron-down' : 'chevron-right',
+      onClick: event => {
+        event.stopPropagation();
+        row.toggleExpanded();
+      },
+      tabIndex: -1
+    })),
+    meta: {
+      align: 'center',
+      className: 'items-center !p-0',
+      disableTruncation: true,
+      headerClassName: 'items-center hover:!bg-white !p-0'
+    },
+    // sizing
+    enableResizing: false,
+    size: 36
+  };
+}
+const getActionPropertyValue = (property, row) => typeof property === 'function' ? property(row) : property;
+function RowActionCell({
+  row,
+  actions,
+  moreActions
+}) {
+  const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
+  const visibleActions = actions.filter(isVisible);
+  const visibleMoreActions = moreActions.filter(isVisible);
+  const rowActionCellWidth = React__default.useMemo(() => {
+    const totalButtons = visibleActions.length + (visibleMoreActions.length ? 1 : 0);
+    // this is necessary because row actions is has this mount hover delay, which makes the
+    // size calculation in the header get set before rendering - meaning the size doesn't include the buttons
+    // when we cache icons this can go
+    const paddingSize = 8;
+    const buttonSize = 32;
+    return paddingSize + totalButtons * buttonSize;
+  }, [visibleActions.length, visibleMoreActions.length]);
+  // Instead of relying on row.index to figure out whether the row is being hovered or is active. We should rely on a
+  // CSS fix. The reason behind this is that row data or index is the initial data or index that is passed to the
+  // table on the first render, the indexes of row changes when sorting or filtering is applied.
+  // If the row is not the active row or the hovered row then actions are hidden.
+  const actionClassName = 'group-hover/row:flex group-[[aria-current]]/row:flex hidden';
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: "-mb-2 -mt-1.5 flex justify-end text-right",
     style: {
-      transition: 'border 0.2s ease-in'
+      width: rowActionCellWidth
+    }
+  }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
+    key: i,
+    className: actionClassName,
+    "aria-label": getActionPropertyValue(action.ariaLabel, row.original),
+    appearance: "discrete",
+    dialog: action.dialog ? action.dialog(row.original) : undefined,
+    disabled: getActionPropertyValue(action.disabled, row.original),
+    icon: getActionPropertyValue(action.icon, row.original),
+    onClick: event => {
+      event.stopPropagation();
+      if (action.onClick) {
+        action.onClick(row.original);
+      }
     },
-    value: id
-  }));
-});
-const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const {
-    id,
-    ...otherProps
-  } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
-    className: className,
-    ref: ref,
-    value: id
-  }));
+    tooltip: getActionPropertyValue(action.text, row.original)
+  })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
+    className: actionClassName,
+    "aria-label": "View other actions",
+    appearance: "discrete",
+    icon: "more",
+    onClick: event => {
+      event.preventDefault();
+    },
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, visibleMoreActions.map((action, i) => /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      key: i,
+      dialog: action.dialog ? action.dialog(row.original) : undefined,
+      disabled: getActionPropertyValue(action.disabled, row.original),
+      icon: getActionPropertyValue(action.icon, row.original),
+      onClick: () => {
+        if (action.onClick) {
+          action.onClick(row.original);
+        }
+      }
+    }, getActionPropertyValue(action.text, row.original))))),
+    tooltip: "Other actions..."
+  }) : null);
+}
+function createRowActionsColumn(rowActions) {
+  const actions = rowActions.slice(0, 3);
+  const moreActions = rowActions.slice(3);
+  return {
+    id: COLUMN_ID_FOR_ACTIONS,
+    cell: ({
+      row
+    }) => /*#__PURE__*/React__default.createElement(RowActionCell, {
+      row: row,
+      actions: actions,
+      moreActions: moreActions
+    }),
+    meta: {
+      align: 'right',
+      className: row => cn('items-center print:opacity-0 group-[[aria-current]]/row:sticky group-hover/row:sticky right-0 bg-transparent !px-1', {
+        'group-hover/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)] group-[[aria-current]]/row:!shadow-[-6px_0px_6px_theme(colors.grey.100)]': !row.getIsSelected(),
+        'shadow-[-6px_0px_6px_theme(colors.blue.100)]': row.getIsSelected()
+      }),
+      disableTruncation: true,
+      headerClassName: 'hover:!bg-white !px-1'
+    },
+    // sizing
+    enableResizing: false
+  };
+}
+
+const getDensityPadding = (density, editing = false) => {
+  switch (density) {
+    case 'compact':
+      return editing ? 'py-0' : 'py-1.5';
+    case 'comfortable':
+      return editing ? 'py-2' : 'py-3.5';
+    case 'spacious':
+      return editing ? 'py-3' : 'py-5';
+    default:
+      return editing ? 'py-1' : 'py-2.5';
+  }
+};
+const getCellSizingClasses = (density = 'normal', editing = false) => {
+  return cn('flex items-center', getDensityPadding(density, editing), editing ? 'px-[7px]' : 'px-4');
+};
+const getCellAlignmentClasses = (alignment = 'left') => ({
+  'justify-start text-left': alignment === 'left',
+  'justify-end text-right': alignment === 'right',
+  'justify-center text-center': alignment === 'center'
 });
-Tabs.List = TabList;
-Tabs.Trigger = TabTrigger;
-Tabs.Content = TabContent;
+const getPinnedShadowClasses = (column, columnPinning, isHorizontallyOffset) => {
+  const pinned = !!column.getIsPinned();
+  // react-table has column.getPinnedIndex() but it does not exclude hidden columns, so the number is wrong
+  const pinnedIndex = columnPinning.indexOf(column.id);
+  const isLastPinned = pinned && pinnedIndex === columnPinning.length - 1;
+  const hidePinnedShadow = !isHorizontallyOffset && (column.id === COLUMN_ID_FOR_EXPANSION || column.id === COLUMN_ID_FOR_SELECTION);
+  return {
+    'shadow-[6px_0px_6px_rgb(0_0_0/8%),1px_0px_0px_theme(colors.grey.300)]': isLastPinned && isHorizontallyOffset,
+    'shadow-[1px_0px_0px_theme(colors.grey.300)]': isLastPinned && !isHorizontallyOffset && !hidePinnedShadow
+  };
+};
+const isKeyboardFocusableElement = element => {
+  const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
+  return focussableNodeNames.includes(element.nodeName) && !element.hasAttribute('disabled') && !element.hasAttribute('readonly') && !element.getAttribute('aria-hidden');
+};
 
-const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
+const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnBase(props, ref) {
+  var _column$columnDef$met;
   const {
-    defaultValue: _,
-    highlighted,
-    invalid,
-    onKeyDown,
-    ...otherProps
+    column,
+    scrolled,
+    style,
+    table,
+    ...attributes
   } = props;
-  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
-  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
-  // if it has scroll height then the browser reverts to native scrolling behaviour only
-  // so we manually override it to ensure _our_ desired behaviour remains intact
-  const handleKeyDown = event => {
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
-    className: classNames,
-    "data-taco": "textarea",
-    onKeyDown: handleKeyDown,
+  const pinned = !!column.getIsPinned();
+  const meta = table.options.meta;
+  const left = meta.columnOffsets[column.id];
+  const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);
+  const className = cn('border-grey-300', getPinnedShadowClasses(column, columnPinning, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
+    'cursor-pointer': !!attributes.onClick
+  }, attributes.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    style: {
+      ...style,
+      left: pinned && Number.isInteger(left) ? left : undefined
+    },
     ref: ref
   }));
 });
@@ -10434,6 +10769,3067 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
 });
 Switch.displayName = 'Switch';
 
+var Table2FilterComparator;
+(function (Table2FilterComparator) {
+  Table2FilterComparator[Table2FilterComparator["Contains"] = 0] = "Contains";
+  Table2FilterComparator[Table2FilterComparator["DoesNotContain"] = 1] = "DoesNotContain";
+  Table2FilterComparator[Table2FilterComparator["IsEqualTo"] = 2] = "IsEqualTo";
+  Table2FilterComparator[Table2FilterComparator["IsNotEqualTo"] = 3] = "IsNotEqualTo";
+  Table2FilterComparator[Table2FilterComparator["IsGreaterThan"] = 4] = "IsGreaterThan";
+  Table2FilterComparator[Table2FilterComparator["IsLessThan"] = 5] = "IsLessThan";
+  Table2FilterComparator[Table2FilterComparator["IsBetween"] = 6] = "IsBetween";
+  Table2FilterComparator[Table2FilterComparator["IsOneOf"] = 7] = "IsOneOf";
+  Table2FilterComparator[Table2FilterComparator["IsNoneOf"] = 8] = "IsNoneOf";
+  Table2FilterComparator[Table2FilterComparator["IsAllOf"] = 9] = "IsAllOf";
+})(Table2FilterComparator || (Table2FilterComparator = {}));
+
+const toLowerCase = value => String(value !== null && value !== void 0 ? value : '').toLocaleLowerCase();
+const isWeakContains = (left, right) => toLowerCase(left).includes(toLowerCase(right));
+const isWeakEqual$1 = (left, right) => toLowerCase(left) === toLowerCase(right);
+const globalFilterFn = (value, query) => isWeakContains(value, query);
+// the filter type is only settable on the column definition, which would re-render all columns
+// so instead we store it in the filter value, but that means we also have to destructure that
+// before we filter - that's why this custom filter function exists
+const columnFilterFn = (value, filter) => {
+  try {
+    if (filter.value === undefined || filter.value === null || filter.value === '') {
+      return true;
+    }
+    switch (filter.comparator) {
+      case Table2FilterComparator.Contains:
+        return isWeakContains(value, filter.value);
+      case Table2FilterComparator.DoesNotContain:
+        return !isWeakContains(value, filter.value);
+      case Table2FilterComparator.IsEqualTo:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && isWeakEqual(value, filter.value);
+          } else if (typeof filter.value === 'boolean') {
+            return value === filter.value;
+          }
+          return isWeakEqual$1(value, filter.value);
+        }
+      case Table2FilterComparator.IsNotEqualTo:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && isWeakEqual(value, filter.value) === false;
+          } else if (typeof filter.value === 'boolean') {
+            return value !== filter.value;
+          }
+          return !isWeakEqual$1(value, filter.value);
+        }
+      case Table2FilterComparator.IsGreaterThan:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && dateFns.isAfter(value, filter.value);
+          } else {
+            const valueAsNumber = parseInt(value);
+            return !isNaN(valueAsNumber) && filter.value !== undefined && valueAsNumber > filter.value;
+          }
+        }
+      case Table2FilterComparator.IsLessThan:
+        {
+          if (dateFns.isDate(value)) {
+            return dateFns.isDate(filter.value) && dateFns.isBefore(value, filter.value);
+          } else {
+            const valueAsNumber = parseInt(value);
+            return !isNaN(valueAsNumber) && filter.value !== undefined && valueAsNumber < filter.value;
+          }
+        }
+      case Table2FilterComparator.IsBetween:
+        {
+          const [fromValue, toValue] = filter.value;
+          if (dateFns.isDate(value)) {
+            if (dateFns.isDate(fromValue) && dateFns.isBefore(value, fromValue)) {
+              return false;
+            } else if (dateFns.isDate(toValue) && dateFns.isAfter(value, toValue)) {
+              return false;
+            }
+            return true;
+          } else {
+            const valueAsNumber = parseInt(value);
+            if (isNaN(valueAsNumber)) {
+              return false;
+            }
+            if (fromValue !== undefined && valueAsNumber < fromValue) {
+              return false;
+            } else if (toValue !== undefined && valueAsNumber > toValue) {
+              return false;
+            }
+            return true;
+          }
+        }
+      case Table2FilterComparator.IsOneOf:
+        return Array.isArray(filter.value) ? filter.value.includes(value) : false;
+      case Table2FilterComparator.IsNoneOf:
+        return Array.isArray(filter.value) ? filter.value.includes(value) === false : false;
+      case Table2FilterComparator.IsAllOf:
+        return Array.isArray(filter.value) && Array.isArray(value) ? filter.value.filter(v => value.includes(v)).length === filter.value.length : false;
+    }
+    return false;
+  } catch (e) {
+    console.error(e);
+    return true;
+  }
+};
+
+var MOVE_DIR;
+(function (MOVE_DIR) {
+  MOVE_DIR[MOVE_DIR["FIRST"] = 0] = "FIRST";
+  MOVE_DIR[MOVE_DIR["LAST"] = 1] = "LAST";
+  MOVE_DIR[MOVE_DIR["PREV"] = 2] = "PREV";
+  MOVE_DIR[MOVE_DIR["NEXT"] = 3] = "NEXT";
+})(MOVE_DIR || (MOVE_DIR = {}));
+const useEditMode = handleSave => {
+  const enableEditMode = !!handleSave;
+  const [editMode, setEditMode] = React__default.useState({
+    enableEditMode,
+    isEditing: false,
+    columnIndex: 0
+  });
+  React__default.useEffect(() => {
+    setEditMode(editMode => ({
+      ...editMode,
+      enableEditMode
+    }));
+  }, [enableEditMode]);
+  const _moveActiveColumn = (moveDirection, focussableColumnIndexes, moveRow) => {
+    var _focussableColumnInde, _focussableColumnInde2;
+    const firstDataColumnIndex = (_focussableColumnInde = focussableColumnIndexes.at(0)) !== null && _focussableColumnInde !== void 0 ? _focussableColumnInde : 0;
+    const lastDataColumnIndex = (_focussableColumnInde2 = focussableColumnIndexes.at(-1)) !== null && _focussableColumnInde2 !== void 0 ? _focussableColumnInde2 : 0;
+    if (!editMode.enableEditMode) {
+      return;
+    }
+    setEditMode(({
+      columnIndex: currentColumnIndex,
+      ...currentEditMode
+    }) => {
+      let nextCellIndex;
+      switch (moveDirection) {
+        case MOVE_DIR.FIRST:
+          nextCellIndex = firstDataColumnIndex;
+          break;
+        case MOVE_DIR.LAST:
+          nextCellIndex = lastDataColumnIndex;
+          break;
+        case MOVE_DIR.PREV:
+          // moves to the last data column of the previous row, if the current column is the first column
+          if (currentColumnIndex === firstDataColumnIndex) {
+            moveRow === null || moveRow === void 0 ? void 0 : moveRow(MOVE_DIR.PREV);
+            nextCellIndex = lastDataColumnIndex;
+          } else {
+            nextCellIndex = focussableColumnIndexes[getNextIndex(-1, currentColumnIndex, focussableColumnIndexes)];
+          }
+          break;
+        case MOVE_DIR.NEXT:
+          // moves to the first data column of the next row, if the current column is the last column
+          if (currentColumnIndex === lastDataColumnIndex) {
+            moveRow === null || moveRow === void 0 ? void 0 : moveRow(MOVE_DIR.NEXT);
+            nextCellIndex = firstDataColumnIndex;
+          } else {
+            nextCellIndex = focussableColumnIndexes[getNextIndex(1, currentColumnIndex, focussableColumnIndexes)];
+          }
+          break;
+      }
+      return {
+        ...currentEditMode,
+        columnIndex: nextCellIndex
+      };
+    });
+  };
+  // output
+  const toggleEditing = (isEditing, columnIndex = 0) => {
+    if (!editMode.enableEditMode) {
+      return;
+    }
+    setEditMode(editMode => ({
+      ...editMode,
+      isEditing: isEditing !== null && isEditing !== void 0 ? isEditing : !editMode.isEditing,
+      columnIndex
+    }));
+  };
+  const moveToPreviousColumn = (focussableColumnIndexes, moveRow) => _moveActiveColumn(MOVE_DIR.PREV, focussableColumnIndexes, moveRow);
+  const moveToNextColumn = (focussableColumnIndexes, moveRow) => _moveActiveColumn(MOVE_DIR.NEXT, focussableColumnIndexes, moveRow);
+  const moveToFirstColumn = focussableColumnIndexes => _moveActiveColumn(MOVE_DIR.FIRST, focussableColumnIndexes);
+  const moveToLastColumn = focussableColumnIndexes => _moveActiveColumn(MOVE_DIR.LAST, focussableColumnIndexes);
+  const setColumn = columnIndex => {
+    if (!editMode.enableEditMode) {
+      return;
+    }
+    setEditMode(currentEditMode => ({
+      ...currentEditMode,
+      columnIndex
+    }));
+  };
+  return {
+    ...editMode,
+    onSave: handleSave,
+    toggleEditing,
+    moveToPreviousColumn,
+    moveToNextColumn,
+    moveToFirstColumn,
+    moveToLastColumn,
+    setColumn
+  };
+};
+const getNextIndex = (direction, currentIndex, focussableColumnIndexes) => {
+  const currentIndexPosition = focussableColumnIndexes.indexOf(currentIndex);
+  const length = focussableColumnIndexes.length;
+  if (direction === -1) {
+    return currentIndexPosition - 1 > 0 ? currentIndexPosition - 1 : 0;
+  }
+  return currentIndexPosition + 1 < length ? currentIndexPosition + 1 : currentIndexPosition;
+};
+
+const RowContext = /*#__PURE__*/React__default.createContext({
+  validationErrors: null,
+  setValidationErrors: () => undefined,
+  rowMoveReason: {},
+  setRowMoveReason: () => undefined
+});
+const useRowContext = () => {
+  const context = React__default.useContext(RowContext);
+  if (context === undefined) {
+    throw new Error('useRowContext must be used within a RowProvider');
+  }
+  return context;
+};
+const RowProvider = ({
+  children,
+  ...providerProps
+}) => {
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: providerProps
+  }, children);
+};
+
+var IndicatorReason;
+(function (IndicatorReason) {
+  IndicatorReason["SEARCH"] = "SEARCH";
+  IndicatorReason["SORTING"] = "SORTING";
+  IndicatorReason["FILTER"] = "FILTER";
+})(IndicatorReason || (IndicatorReason = {}));
+const useIndicatorText = reason => {
+  let title = '';
+  let description = '';
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
+  switch (reason) {
+    case IndicatorReason.SEARCH:
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.searchFilterMovementReason;
+      break;
+    case IndicatorReason.SORTING:
+      title = tableTexts.rowIndicator.rowWillMove;
+      description = tableTexts.rowIndicator.sortingMovementReason;
+      break;
+    case IndicatorReason.FILTER:
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.tableFilterMovementReason;
+      break;
+  }
+  return {
+    title,
+    description
+  };
+};
+const Indicator = ({
+  reason,
+  columnName,
+  mountNode
+}) => {
+  const container = React__default.useMemo(() => {
+    const element = document.createElement('div');
+    element.className += '-translate-y-1/2 z-[3] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    return element;
+  }, []);
+  const indicatorText = useIndicatorText(reason);
+  const {
+    validationErrors
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  React__default.useEffect(() => {
+    // mountNode could be null when rows are filtered
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('relative');
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
+    return () => {
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
+    };
+  }, [hasValidationErrorsInRow]);
+  // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
+  // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: indicatorText.description.replace('[COLUMN]', columnName)
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex gap-1 hover:cursor-pointer"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "info",
+    className: "!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500"
+  }), indicatorText.title)), container);
+};
+
+const useTruncated = (element, deps = []) => {
+  const isTruncated = targetElement => {
+    if (targetElement !== null) {
+      return targetElement.offsetWidth < targetElement.scrollWidth;
+    }
+    return false;
+  };
+  const [truncated, setTruncated] = React__default.useState(isTruncated(element));
+  React__default.useEffect(() => {
+    setTruncated(isTruncated(element));
+  }, [element, ...deps]);
+  return {
+    truncated
+  };
+};
+
+const ValidationError = ({
+  className,
+  ...props
+}) => {
+  const ref = React__default.useRef(null);
+  const {
+    truncated
+  } = useTruncated(ref.current);
+  const error = /*#__PURE__*/React__default.createElement("span", Object.assign({
+    className: cn('truncate px-px text-xs font-normal leading-normal text-red-500', {
+      'hover:cursor-pointer': truncated
+    }, className),
+    ref: ref,
+    role: "alert"
+  }, props));
+  if (truncated) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: props.children
+    }, error);
+  }
+  return error;
+};
+
+const hasChanged = (value, newValue) => {
+  if (dateFns.isDate(value) && dateFns.isDate(newValue)) {
+    return !isWeakEqual(value, newValue);
+  } else if (Array.isArray(value)) {
+    return JSON.stringify(value) !== JSON.stringify(newValue);
+  }
+  return value !== newValue;
+};
+const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
+  const miniSortRows = [{
+    ...cell.row,
+    original: {
+      ...cell.row.original,
+      [cell.column.id]: value
+    }
+  }];
+  // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value
+  miniSortRows[0].getValue = () => value;
+  let index = 0;
+  if (rowIndex > 0) {
+    miniSortRows.unshift(rows[rowIndex - 1]);
+    index = 1;
+  }
+  if (rowIndex < rows.length - 1) {
+    miniSortRows.push(rows[rowIndex + 1]);
+  }
+  let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));
+  if (desc) {
+    resortedRows = resortedRows.reverse();
+  }
+  return resortedRows[index].id !== cell.row.id;
+};
+
+const Cell = function Cell(props) {
+  var _cell$column$columnDe, _cell$column$columnDe2, _cell$column$columnDe3, _table$options$meta;
+  const {
+    cell,
+    index,
+    isLastRow,
+    rowIndex,
+    rows,
+    scrollToIndex,
+    scrollToOffset,
+    table,
+    tableRef,
+    ...columnProps
+  } = props;
+  const meta = table.options.meta;
+  const {
+    addFocussableColumnIndex,
+    focussableColumnIndexes: allFocussableColumnIndexes
+  } = meta;
+  const {
+    validationErrors,
+    rowMoveReason
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  const internalRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const disableTruncation = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.disableTruncation;
+  const cellClassName = (_cell$column$columnDe2 = cell.column.columnDef.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.className;
+  const isActiveRow = meta.activeRowIndex === rowIndex;
+  const isHoveredRow = meta.hoveredRowIndex === rowIndex;
+  const isPinned = !!cell.column.getIsPinned();
+  const isDragging = meta.dragging[cell.row.id];
+  const isSelected = cell.row.getIsSelected();
+  const isDataColumn = !isInternalColumn(cell.column.id);
+  const hasCellControl = !!((_cell$column$columnDe3 = cell.column.columnDef.meta) !== null && _cell$column$columnDe3 !== void 0 && _cell$column$columnDe3.control);
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  // editing
+  const isEditingThisRow = meta.editMode.isEditing && isActiveRow;
+  const canEditThisCell = isEditingThisRow && isDataColumn;
+  const isEditingThisCell = canEditThisCell && meta.editMode.columnIndex === index;
+  const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow;
+  const isIndicatorVisible = Object.keys(rowMoveReason).length > 0;
+  React__default.useEffect(() => {
+    // Adds padding to the table so that indicator doesn't get cropped
+    if (isIndicatorVisible && isLastRow) {
+      var _tableRef$current;
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.classList.add('pb-4');
+    }
+    return () => {
+      var _tableRef$current2;
+      return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
+    };
+  }, [isIndicatorVisible, isLastRow]);
+  const className = cn({
+    'border-b': !isLastRow,
+    'sticky z-[1]': isPinned,
+    // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
+    'bg-white': !isActiveRow && !isSelected && !isHoveredRow,
+    'bg-grey-100': !isActiveRow && !isSelected && isHoveredRow,
+    'bg-grey-200 group-hover/row:bg-grey-200': isActiveRow && !isSelected,
+    'bg-blue-100': isSelected,
+    '!wcag-blue-500': isDragging,
+    '[&>*]:!grayscale [&_.bg-white]:!bg-grey-100': !isEditingThisRow && isHoveringThisRowWhileEditing,
+    '!bg-red-100': hasValidationErrorsInRow,
+    'z-[1]': isPinned && isActiveRow,
+    // First column should have higher z-index so that row indicator always show on top of the cell
+    // control components.
+    'z-[2]': isPinned && isActiveRow && index === 0,
+    'border-blue !border-y-2 border-x-0': isIndicatorVisible,
+    'border-l-2 rounded-l': isIndicatorVisible && index === 0,
+    'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex
+  }, getCellSizingClasses((_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.rowDensity, (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl), typeof cellClassName === 'function' ? cellClassName(cell.row) : cellClassName);
+  const handleMouseDown = event => {
+    // only detect left clicks
+    if (event.button === 0) {
+      const activeElement = document.activeElement;
+      const isActiveElementControl = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest('[role="cell"]');
+      const hasActiveRowChanged = meta.activeRowIndex !== rowIndex;
+      // When user clicks on a cell that is not in the active row, for some reason blur event is not called on the cell
+      // previous cell control element so we need to manually call it in order to save the changes in that cell
+      if (isActiveElementControl && hasActiveRowChanged) {
+        activeElement.blur();
+      }
+      meta.setActiveRowIndex(rowIndex);
+      if (meta.editMode.isEditing) {
+        if (allFocussableColumnIndexes.includes(index)) {
+          meta.editMode.setColumn(index);
+        } else {
+          meta.editMode.setColumn(allFocussableColumnIndexes[0]);
+        }
+      }
+    }
+  };
+  const attributes = {
+    ...columnProps,
+    // base props,
+    column: cell.column,
+    table,
+    // dom attributes
+    className,
+    'data-column-index': index,
+    'data-row-index': rowIndex,
+    onMouseDown: handleMouseDown,
+    ref: internalRef,
+    role: 'cell'
+  };
+  const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
+  const detailModeClassName = cn({
+    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+  });
+  // reset the editing state when we move column
+  React__default.useEffect(() => {
+    if (meta.editMode.columnIndex !== index) {
+      setDetailModeEditing(false);
+    }
+  }, [meta.editMode.columnIndex]);
+  React__default.useEffect(() => {
+    if (isEditingThisRow && controlRef.current && isKeyboardFocusableElement(controlRef.current)) {
+      addFocussableColumnIndex(index);
+    }
+  }, [isEditingThisRow, allFocussableColumnIndexes, addFocussableColumnIndex, index]);
+  const moveRow = moveDirection => {
+    if (moveDirection === MOVE_DIR.PREV) {
+      meta.moveToPreviousRow(rows, nextIndex => scrollToIndex(nextIndex - 1));
+    } else if (moveDirection === MOVE_DIR.NEXT) {
+      meta.moveToNextRow(rows, nextIndex => scrollToIndex(nextIndex + 2));
+    }
+  };
+  if (meta.editMode.onSave && hasCellControl && (canEditThisCell || isHoveringThisRowWhileEditing && isDataColumn)) {
+    attributes.onMouseDown = event => {
+      handleMouseDown(event);
+      const target = event.target;
+      const isTargetInput = target !== null && target.nodeName === 'INPUT';
+      // event.target?.select is only truthy for input elements
+      // if event.target is active element, then that means we should select the text
+      if (isTargetInput && target !== document.activeElement) {
+        event.preventDefault();
+        setTimeout(() => {
+          target.select();
+        }, 1);
+      } else if (isTargetInput && target === document.activeElement) {
+        // if user left clicks on the input then we are into edit mode
+        // only detect left clicks
+        if (event.button === 0) {
+          setDetailModeEditing(true);
+        }
+      }
+    };
+    if (canEditThisCell) {
+      var _allFocussableColumnI, _allFocussableColumnI2;
+      const firstDataColumnIndex = (_allFocussableColumnI = allFocussableColumnIndexes.at(0)) !== null && _allFocussableColumnI !== void 0 ? _allFocussableColumnI : 0;
+      const lastDataColumnIndex = (_allFocussableColumnI2 = allFocussableColumnIndexes.at(-1)) !== null && _allFocussableColumnI2 !== void 0 ? _allFocussableColumnI2 : 0;
+      attributes.onKeyDown = event => {
+        const control = event.target;
+        const isControlInput = control.nodeName === 'INPUT' && (control === null || control === void 0 ? void 0 : control.getAttribute('data-inline-editing-component')) === 'true';
+        // For some reason, Taco Input keyboard event always return true when "event.isDefaultPrevented()" is
+        // called. So we need to check if the control is input or not so that we don't return early.
+        if (!isControlInput && (event.isDefaultPrevented() || event.isPropagationStopped())) {
+          return;
+        }
+        if (control.tagName === 'INPUT') {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            const input = control;
+            if (!detailModeEditing) {
+              var _input$setSelectionRa, _input$value, _input$value2;
+              (_input$setSelectionRa = input.setSelectionRange) === null || _input$setSelectionRa === void 0 ? void 0 : _input$setSelectionRa.call(input, (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.length, (_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.length);
+              setDetailModeEditing(true);
+            }
+            return;
+          }
+        }
+        // Don't exit edit mode if the target of the escape isn't a child of the cell (e.g. if its a popover).
+        if (event.key === 'Escape' && event.currentTarget.contains(control)) {
+          event.preventDefault();
+          const input = control;
+          if (detailModeEditing) {
+            var _input$select;
+            input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
+            setDetailModeEditing(false);
+          } else {
+            var _tableRef$current3;
+            meta.editMode.toggleEditing(false);
+            (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.focus();
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
+          event.preventDefault();
+          const isFirstRow = rowIndex === 0;
+          const isFirstColumn = index === firstDataColumnIndex;
+          if (event.ctrlKey || event.metaKey) {
+            // If the current active column is the first column then we don't do any thing so that focus
+            // remains on the first column.
+            if (!isFirstColumn) {
+              control.blur();
+              meta.editMode.moveToFirstColumn(allFocussableColumnIndexes);
+            }
+          } else {
+            // If it is first row and first column, then don't move column.
+            if (!isFirstRow || !isFirstColumn) {
+              control.blur();
+              meta.editMode.moveToPreviousColumn(allFocussableColumnIndexes, moveRow);
+            }
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
+          event.preventDefault();
+          const isLastColumn = index === lastDataColumnIndex;
+          if (event.ctrlKey || event.metaKey) {
+            // If the current active column is the last column then we don't do any thing so that focus
+            // remains on the last column.
+            if (!isLastColumn) {
+              control.blur();
+              meta.editMode.moveToLastColumn(allFocussableColumnIndexes);
+            }
+          } else {
+            // If it is last row and last column, then don't move column.
+            if (!isLastRow || !isLastColumn) {
+              control.blur();
+              meta.editMode.moveToNextColumn(allFocussableColumnIndexes, moveRow);
+            }
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowUp') {
+          event.preventDefault();
+          // if it is the first row then return early, so that focus on the cell is not lost
+          if (rowIndex === 0) {
+            return;
+          }
+          control.blur();
+          if (event.ctrlKey || event.metaKey) {
+            meta.setActiveRowIndex(0);
+            scrollToOffset(0);
+          } else {
+            moveRow(MOVE_DIR.PREV);
+          }
+          meta.setHoveredRowIndex(undefined);
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowDown') {
+          event.preventDefault();
+          // if it is the last row then return early, so that focus on the cell is not lost
+          if (rowIndex === rows.length - 1) {
+            return;
+          }
+          control.blur();
+          if (event.ctrlKey || event.metaKey) {
+            meta.setActiveRowIndex(rows.length - 1);
+            scrollToIndex(rows.length + 20);
+          } else {
+            moveRow(MOVE_DIR.NEXT);
+          }
+          meta.setHoveredRowIndex(undefined);
+          return;
+        }
+      };
+    }
+    return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement(EditingCell, {
+      detailModeClassName: detailModeClassName,
+      cell: cell,
+      cellRef: internalRef,
+      columnIndex: index,
+      isEditingThisCell: isEditingThisCell,
+      onSave: meta.editMode.onSave,
+      rowIndex: rowIndex,
+      table: table,
+      ref: controlRef,
+      rowValues: rows[rowIndex].original,
+      rowsLength: rows.length
+    }));
+  } else {
+    if (meta.onRowClick) {
+      attributes.onClick = () => {
+        var _meta$onRowClick;
+        (_meta$onRowClick = meta.onRowClick) === null || _meta$onRowClick === void 0 ? void 0 : _meta$onRowClick.call(meta, cell.row.original);
+      };
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement("div", {
+    className: disableTruncation ? '-my-[0.45rem]' : 'truncate'
+  }, reactTable$1.flexRender(cell.column.columnDef.cell, cell.getContext())));
+};
+const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current, _cellRef$current$pare, _rowMoveReason$cellId;
+  const {
+    cell,
+    cellRef,
+    columnIndex,
+    detailModeClassName,
+    isEditingThisCell = false,
+    onSave: handleSave,
+    rowIndex,
+    rowValues,
+    table
+  } = props;
+  const {
+    validationErrors,
+    setValidationErrors,
+    rowMoveReason,
+    setRowMoveReason
+  } = useRowContext();
+  const controlRef = useMergedRef(ref);
+  const cellId = cell.column.id;
+  const cellValidationError = validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[cellId];
+  const value = cell.getValue();
+  const ariaLabel = cell.column.columnDef.header;
+  const meta = table.options.meta;
+  const {
+    globalFilter
+  } = table.getState();
+  const [state, setState] = React__default.useState(value);
+  const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && meta.hoveredRowIndex === rowIndex;
+  const showValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
+  // On each save, the initialValue will be set to the new value of the cell
+  const initialValue = React__default.useRef(value);
+  // It is important that we let consumers pass a newValue as an argument because when setState is called before
+  // onBlur then saveIfChanged method gets the stale state value. This happens because the rerender hasn't happened
+  // before the saveIfChanged method is called.
+  const saveIfChanged = function (eventOrNewValue) {
+    try {
+      let newValue = state;
+      // if eventOrNewValue is not an event object
+      if (!eventOrNewValue.target) {
+        newValue = eventOrNewValue;
+      }
+      const _temp2 = function () {
+        if (hasChanged(value, newValue)) {
+          const _temp = _catch(function () {
+            const updatedRow = {
+              ...cell.row.original,
+              [cellId]: newValue
+            };
+            return Promise.resolve(handleSave(updatedRow, cellId)).then(function () {
+              // If sorting is paused then update the last sorted or filtered rows to store the newly updated row
+              if (meta.shouldPauseSortingAndFiltering) {
+                meta.lastSortedOrFilteredRows.current = meta.lastSortedOrFilteredRows.current.map(row => {
+                  if (row.id === cell.row.id) {
+                    row.original = updatedRow;
+                  }
+                  return row;
+                });
+              }
+              // Reset error if save was successful
+              setValidationErrors(null);
+            });
+          }, function (error) {
+            setValidationErrors(error);
+          });
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  // Ensures we "auto focus" the field if the cell is being edited.
+  React__default.useEffect(() => {
+    var _meta$tableRef$curren;
+    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
+    // When control is blurred then body gets the focus that's why we have to make sure if activeElement
+    // is body then we focus the cell if it is being edited.
+    const isBodyFocussed = document.body === document.activeElement;
+    // Don't focus cell if any table popup(filter popup, column settings popup) is open.
+    if (isEditingThisCell && (isFocusInsideTable || isBodyFocussed)) {
+      var _controlRef$current, _controlRef$current$f;
+      (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : (_controlRef$current$f = _controlRef$current.focus) === null || _controlRef$current$f === void 0 ? void 0 : _controlRef$current$f.call(_controlRef$current);
+    }
+  }, [isEditingThisCell, controlRef.current]);
+  // make sure the cell becomes active if the field is focused
+  const handleFocus = event => {
+    var _event$target;
+    meta.editMode.setColumn(columnIndex);
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      var _event$target2;
+      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.select();
+    }
+  };
+  React__default.useEffect(() => {
+    if (hasChanged(initialValue.current, state)) {
+      showIndicator();
+    } else {
+      hideIndicator();
+    }
+    return hideIndicator;
+  }, [state]);
+  const showIndicator = () => {
+    var _table$getState$sorti;
+    let willRowMoveReason = null;
+    const isFilteredByGlobalFilter = Object.values({
+      ...rowValues,
+      [cellId]: state
+    }).some(cellValue =>
+    // Global filter can be undefined when there is no text being searched so we pass an empty string to
+    // globalFilterFn as query in that case.
+    globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+    if (!isFilteredByGlobalFilter) {
+      willRowMoveReason = IndicatorReason.SEARCH;
+    } else if (cell.column.getIsFiltered() && !columnFilterFn(state, cell.column.getFilterValue())) {
+      willRowMoveReason = IndicatorReason.FILTER;
+    } else if (!willRowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(state, cell, rowIndex, table.getRowModel().rows, !!((_table$getState$sorti = table.getState().sorting.find(s => s.id === cell.column.id)) !== null && _table$getState$sorti !== void 0 && _table$getState$sorti.desc))) {
+      willRowMoveReason = IndicatorReason.SORTING;
+    }
+    if (willRowMoveReason !== null) {
+      meta.setShouldPauseSortingAndFiltering(true);
+      setRowMoveReason({
+        [cellId]: willRowMoveReason
+      });
+    }
+  };
+  const hideIndicator = () => {
+    setRowMoveReason(prevState => {
+      const newState = {
+        ...prevState
+      };
+      delete newState[cellId];
+      return newState;
+    });
+  };
+  const cellControl = (_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.control;
+  const attributes = {
+    'aria-label': ariaLabel,
+    onBlur: saveIfChanged,
+    onFocus: handleFocus,
+    ref,
+    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,
+    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this
+    // data attribute we make sure the event is coming from a control component, and then we can make sure
+    // keyboard shortcut works as expected.
+    'data-inline-editing-component': 'true'
+  };
+  const className = cn(getCellAlignmentClasses((_cell$column$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.align));
+  const indicatorMountNode = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : (_cellRef$current$pare = _cellRef$current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(':first-child');
+  let controlComponent;
+  if (cellControl) {
+    if (typeof cellControl === 'function') {
+      controlComponent = cellControl({
+        onBlur: saveIfChanged,
+        onFocus: handleFocus,
+        ref: controlRef,
+        setValue: setState,
+        value: state,
+        'data-inline-editing-component': 'true',
+        className: detailModeClassName
+      }, cell.row.original);
+    } else {
+      switch (cellControl) {
+        case 'datepicker':
+          controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+            className: detailModeClassName,
+            onBlur: event => {
+              const newDate = event.detail;
+              saveIfChanged(newDate);
+            },
+            onChange: event => {
+              setState(event.detail);
+            },
+            ref: controlRef,
+            value: state
+          }));
+          break;
+        case 'switch':
+          controlComponent = /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+            className: cn('mx-2', detailModeClassName),
+            checked: Boolean(state),
+            onChange: setState,
+            ref: controlRef
+          }));
+          break;
+        default:
+          controlComponent = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+            className: cn(className, detailModeClassName),
+            onChange: event => {
+              setState(event.target.value);
+            },
+            ref: controlRef,
+            value: String(state !== null && state !== void 0 ? state : '')
+          }));
+          break;
+      }
+    }
+  }
+  const indicatorReason = (_rowMoveReason$cellId = rowMoveReason[cellId]) !== null && _rowMoveReason$cellId !== void 0 ? _rowMoveReason$cellId : null;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, indicatorReason !== null && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: indicatorReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: indicatorMountNode
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex-grow"
+  }, controlComponent, showValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
+}));
+
+const Header$1 = function Header(props) {
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
+  const {
+    header,
+    index,
+    isLastColumn,
+    table,
+    tableRef,
+    ...columnProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const pinned = !!header.column.getIsPinned();
+  const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
+  const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]', {
+    'z-[6]': header.column.getIsResizing(),
+    'z-[7]': pinned,
+    'cursor-pointer select-none': header.column.getCanSort(),
+    'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
+    'pointer-events-none': isOtherColumnBeingResized
+  }, getCellSizingClasses('normal'), (_header$column$column2 = header.column.columnDef.meta) === null || _header$column$column2 === void 0 ? void 0 : _header$column$column2.headerClassName, props.className);
+  // set the column size after the first render (after auto layout with 'max-content') has run
+  // this way columns default to fit their content, then we save that size for resizing
+  const refCallback = node => {
+    if (node && !table.getState().columnSizing[header.id]) {
+      const size = Math.ceil(node.getBoundingClientRect().width);
+      table.setColumnSizing(sizes => ({
+        ...sizes,
+        [header.id]: !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size
+      }));
+    }
+  };
+  // we use mousedown because clicking and dragging resize and then letting go over the
+  // column, results in sorting being applied
+  const handleMouseDown = header.column.getCanSort() ? event => {
+    // only detect left clicks
+    if (event.button === 0) {
+      var _tableRef$current;
+      event.preventDefault();
+      table.resetRowSelection();
+      header.column.toggleSorting();
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+    }
+  } : undefined;
+  const handleResizerDoubleClick = () => {
+    var _header$column$column3;
+    const size = (_header$column$column3 = header.column.columnDef.meta) === null || _header$column$column3 === void 0 ? void 0 : _header$column$column3.defaultWidth;
+    table.setColumnSizing(sizes => {
+      const nextSizes = {
+        ...sizes
+      };
+      if (size) {
+        nextSizes[header.id] = !isInternalColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
+      } else {
+        delete nextSizes[header.id];
+      }
+      return nextSizes;
+    });
+  };
+  const handleResizerClick = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const handleResize = event => {
+    // prevent the parent onMouseDown propagating
+    event.stopPropagation();
+    header.getResizeHandler()(event);
+  };
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    className: "truncate",
+    ref: textRef
+  }, reactTable$1.flexRender(header.column.columnDef.header, header.getContext()));
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
+    // base props
+    column: header.column,
+    table: table,
+    "aria-sort": (_asc$desc$header$colu = {
+      asc: 'ascending',
+      desc: 'descending'
+    }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu !== void 0 ? _asc$desc$header$colu : 'none',
+    className: className,
+    onMouseDown: handleMouseDown,
+    ref: refCallback,
+    role: "columnheader",
+    "data-column-index": index
+  }), isInternalColumn(header.id) ? reactTable$1.flexRender(header.column.columnDef.header, header.getContext()) : /*#__PURE__*/React__default.createElement("div", {
+    className: cn('flex flex-grow overflow-hidden', {
+      'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!((_header$column$column4 = header.column.columnDef.meta) !== null && _header$column$column4 !== void 0 && _header$column$column4.menu)
+    }, getCellAlignmentClasses((_header$column$column5 = header.column.columnDef.meta) === null || _header$column$column5 === void 0 ? void 0 : _header$column$column5.align))
+  }, isOverflowing(textRef.current) ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: (_header$column$column6 = (_header$column$column7 = header.column.columnDef.meta) === null || _header$column$column7 === void 0 ? void 0 : _header$column$column7.tooltip) !== null && _header$column$column6 !== void 0 ? _header$column$column6 : content,
+    placement: "top"
+  }, content) : content, (_asc$desc$header$colu2 = {
+    asc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-up-solid",
+      className: "pointer-events-none -my-0.5"
+    }),
+    desc: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "chevron-down-solid",
+      className: "pointer-events-none -my-0.5"
+    })
+  }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), (_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
+    header: header
+  }) : null, header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    placement: "top",
+    title: "Resize column"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible', {
+      '-mr-2.5 w-5 justify-center': !isLastColumn,
+      'w-2': isLastColumn,
+      '!visible': header.column.getIsResizing()
+    }),
+    onDoubleClick: handleResizerDoubleClick,
+    onMouseDown: handleResize,
+    onTouchStart: handleResize,
+    // this prevents sort handlers being activated
+    onClick: handleResizerClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('h-full w-1 rounded', {
+      '!bg-blue-500': header.column.getIsResizing(),
+      'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing()
+    })
+  }))) : null);
+};
+const HeaderMenu = ({
+  header
+}) => {
+  const [open, setOpen] = React__default.useState(false);
+  const className = cn('-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex', {
+    '!flex': open
+  });
+  return header.column.columnDef.meta ?
+  /*#__PURE__*/
+  // This div catches the mousedown events from menu item and menu trigger and prevents
+  // mousedown event from bubbling up to the Header component to prevent toggling sorting
+  React__default.createElement("div", {
+    onMouseDown: event => event.stopPropagation()
+  }, header.column.columnDef.meta.menu({
+    trigger: /*#__PURE__*/React__default.createElement(IconButton, {
+      className: className,
+      icon: "more"
+    }),
+    open: open,
+    onChange: setOpen
+  })) : null;
+};
+
+const Footer$2 = function Footer(props) {
+  const {
+    footer,
+    index,
+    table,
+    ...columnProps
+  } = props;
+  const isPinned = !!footer.column.getIsPinned();
+  const className = cn('group/header sticky bottom-0 bg-white border-t-2 relative ', {
+    'z-[1]': isPinned
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, columnProps, {
+    // base props
+    column: footer.column,
+    table: table,
+    className: className,
+    role: "cell",
+    "data-column-index": index
+  }));
+};
+
+function useColumnDefinitions(children, options, tableRef) {
+  const lastSelectedRowIndex = React__default.useRef();
+  const columnHelper = reactTable$1.createColumnHelper();
+  return React__default.useMemo(() => {
+    var _options$actionsForRo;
+    // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved
+    const columns = [];
+    const defaultColumnPinning = [];
+    const defaultColumnSizing = {};
+    const defaultColumnVisibility = {};
+    const defaultSorting = [];
+    const footers = {};
+    React__default.Children.toArray(children).forEach(child => {
+      if ( /*#__PURE__*/React__default.isValidElement(child)) {
+        var _child$props$minWidth;
+        if (child.props.defaultPinned && options.enableColumnPinning) {
+          defaultColumnPinning.push(child.props.accessor);
+        }
+        if (child.props.defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
+        }
+        if (child.props.defaultHidden && options.enableColumnHiding) {
+          defaultColumnVisibility[child.props.accessor] = false;
+        }
+        if (child.props.sort !== undefined) {
+          defaultSorting.push({
+            id: child.props.accessor,
+            desc: child.props.sort === 'desc'
+          });
+        }
+        if (child.props.footer) {
+          footers[child.props.accessor] = child.props.footer;
+        }
+        columns.push({
+          accessorKey: child.props.accessor,
+          id: child.props.accessor,
+          cell: props => {
+            var _props$getValue;
+            if (typeof child.props.renderer === 'function') {
+              return child.props.renderer(props.getValue(), props.row.original);
+            }
+            // If value is undefined then return null because cell is a react component, and undefined is not
+            // a valid child value.
+            return (_props$getValue = props.getValue()) !== null && _props$getValue !== void 0 ? _props$getValue : null;
+          },
+          header: child.props.header,
+          meta: {
+            align: child.props.align,
+            className: child.props.className,
+            control: child.props.control,
+            dataType: child.props.dataType,
+            defaultWidth: child.props.defaultWidth,
+            disableReordering: child.props.disableReordering,
+            disableTruncation: child.props.disableTruncation,
+            menu: child.props.menu,
+            tooltip: child.props.tooltip
+          },
+          enableHiding: !child.props.disableHiding,
+          // filtering
+          enableColumnFilter: !child.props.disableFiltering,
+          filterFn: options.enableColumnFiltering && !child.props.disableFiltering ? 'tacoFilter' : undefined,
+          // sizing
+          enableResizing: !child.props.disableResizing,
+          minSize: (_child$props$minWidth = child.props.minWidth) !== null && _child$props$minWidth !== void 0 ? _child$props$minWidth : MIN_COLUMN_SIZE,
+          size: child.props.defaultWidth,
+          // sorting
+          enableSorting: !child.props.disableSorting,
+          sortingFn: getSortingFn(child.props.dataType)
+        });
+      }
+    });
+    if (options.enableRowExpansion) {
+      columns.unshift(columnHelper.display(createRowExpansionColumn()));
+      defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);
+    }
+    if (options.enableRowSelection) {
+      columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef)));
+      defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);
+    }
+    if (options.onRowDrag) {
+      columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag)));
+      defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);
+    }
+    if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
+      columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow)));
+    }
+    return {
+      columns,
+      defaultColumnPinning,
+      defaultColumnSizing,
+      defaultColumnVisibility,
+      defaultSorting,
+      footers
+    };
+  }, [children]);
+}
+const getSortingFn = dataType => {
+  if (dataType && dataType !== 'boolean') {
+    return dataType;
+  }
+  return 'auto';
+};
+
+const isResizingPinnedColumn = (columnId, table) => {
+  var _table$getState$colum, _table$getState$colum2;
+  return !!columnId && ((_table$getState$colum = table.getState().columnPinning.left) === null || _table$getState$colum === void 0 ? void 0 : _table$getState$colum.includes((_table$getState$colum2 = table.getState().columnSizingInfo) === null || _table$getState$colum2 === void 0 ? void 0 : _table$getState$colum2.isResizingColumn));
+};
+const getOffsetsFromSize = (pinning, visibility, sizing) => {
+  const pinned = pinning.left.filter(c => visibility[c] !== false);
+  const offsets = {};
+  let leftOffset = 0;
+  for (const k of pinned) {
+    if (!Number.isInteger(sizing[k])) {
+      break;
+    }
+    offsets[k] = leftOffset;
+    leftOffset += sizing[k];
+  }
+  return offsets;
+};
+// pinned columns have position sticky, and because we support more than one of them
+// we must set a 'left' css value. this hook listens to changes on state that will
+// affect the left offset (resize, visibility, pinning) and updates offsets based on width
+const useColumnOffsetStateListener = (table, setColumnOffsets) => {
+  const {
+    columnPinning,
+    columnSizing,
+    columnSizingInfo,
+    columnVisibility
+  } = table.getState();
+  React__default.useEffect(() => {
+    if (isResizingPinnedColumn(columnSizingInfo.isResizingColumn, table)) {
+      setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+    }
+  }, [columnSizingInfo]);
+  React__default.useEffect(() => {
+    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+  }, [columnVisibility]);
+  React__default.useEffect(() => {
+    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
+  }, [columnPinning.left]);
+};
+
+const useRowSelectionListener = (table, onRowSelect) => {
+  React__default.useEffect(() => {
+    if (onRowSelect) {
+      if (table.options.enableMultiRowSelection) {
+        onRowSelect(table.getSelectedRowModel().rows.map(row => row.original));
+      } else {
+        var _table$getSelectedRow, _table$getSelectedRow2;
+        onRowSelect((_table$getSelectedRow = (_table$getSelectedRow2 = table.getSelectedRowModel().rows[0]) === null || _table$getSelectedRow2 === void 0 ? void 0 : _table$getSelectedRow2.original) !== null && _table$getSelectedRow !== void 0 ? _table$getSelectedRow : undefined);
+      }
+    }
+  }, [table.getState().rowSelection]);
+};
+
+const useSettingsStateListener = (table, onChangeSettings) => {
+  const meta = table.options.meta;
+  const state = table.getState();
+  React__default.useEffect(() => {
+    let handler;
+    if (typeof onChangeSettings === 'function') {
+      handler = setTimeout(() => onChangeSettings({
+        columnFilters: state.columnFilters,
+        columnOrder: state.columnOrder,
+        columnPinning: state.columnPinning,
+        columnSizing: state.columnSizing,
+        columnVisibility: state.columnVisibility,
+        globalFilter: state.globalFilter,
+        rowDensity: meta.rowDensity,
+        sorting: state.sorting
+      }), 250);
+    }
+    return () => clearTimeout(handler);
+  }, [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.globalFilter, meta.rowDensity, state.sorting]);
+};
+
+const useActiveRow = (defaultActiveRowIndex = 0) => {
+  const [activeRowIndex, _setActiveRow] = React__default.useState(defaultActiveRowIndex);
+  const moveActiveRow = (direction, rows, callback) => {
+    _setActiveRow(rowIndex => {
+      const nextRowIndex = getNextIndex$1(direction, rowIndex, rows.length);
+      if (callback) {
+        callback(nextRowIndex);
+      }
+      return nextRowIndex;
+    });
+  };
+  // output
+  const moveToPreviousRow = (rows, callback) => moveActiveRow(-1, rows, callback);
+  const moveToNextRow = (rows, callback) => moveActiveRow(1, rows, callback);
+  const setActiveRowIndex = rowIndex => _setActiveRow(rowIndex);
+  return {
+    activeRowIndex,
+    setActiveRowIndex,
+    moveToPreviousRow,
+    moveToNextRow
+  };
+};
+const getNextIndex$1 = (direction, currentIndex, length) => {
+  if (direction === -1) {
+    return currentIndex - 1 > 0 ? currentIndex - 1 : 0;
+  }
+  return currentIndex + 1 < length ? currentIndex + 1 : currentIndex;
+};
+
+const useActiveRowStateListener = (table, rows, activeRowIndex) => {
+  const meta = table.options.meta;
+  React__default.useEffect(() => {
+    if (meta.editMode.isEditing && meta.shouldPauseSortingAndFiltering) {
+      meta.setShouldPauseSortingAndFiltering(false);
+    }
+  }, [activeRowIndex.activeRowIndex]);
+  // if a filter would exclude the active row, reset it to 0
+  React__default.useEffect(() => {
+    if (activeRowIndex.activeRowIndex > rows.length - 1) {
+      meta.setActiveRowIndex(rows.length ? rows.length - 1 : 0);
+    }
+  }, [table.getState().columnFilters, rows.length]);
+};
+
+function useTable$1(children, props, ref) {
+  var _settings$columnOrder, _ref, _settings$columnPinni, _settings$columnPinni2, _settings$columnSizin, _settings$columnVisib, _settings$rowDensity;
+  const {
+    actionsForRow = [],
+    data,
+    defaultActiveRowIndex,
+    disableColumnFiltering = false,
+    disableColumnHiding = false,
+    disableColumnPinning = false,
+    disableColumnReordering = false,
+    disableColumnResizing = false,
+    disableRowDensity = false,
+    disableRowExpansion = false,
+    disableRowSelection = false,
+    disableMultipleRowSelection = false,
+    disableSearch = false,
+    disableSorting = false,
+    expandedRowRenderer,
+    manualColumnFiltering = false,
+    manualSearch = false,
+    manualSorting = false,
+    onChangeSettings,
+    onRowClick,
+    onRowDrag,
+    onRowSelect,
+    onSave,
+    settings = {},
+    // experimental
+    _experimentalActionsForTable
+  } = props;
+  const enableRowExpansion = !disableRowExpansion && !!expandedRowRenderer;
+  const enableRowSelection = !disableRowSelection && (!!onRowSelect || !!(_experimentalActionsForTable !== null && _experimentalActionsForTable !== void 0 && _experimentalActionsForTable.length));
+  const enableMultipleRowSelection = !disableMultipleRowSelection && enableRowSelection;
+  const {
+    columns,
+    defaultColumnPinning,
+    defaultColumnSizing,
+    defaultSorting,
+    defaultColumnVisibility,
+    footers
+  } = useColumnDefinitions(children, {
+    actionsForRow,
+    enableColumnFiltering: !disableColumnFiltering,
+    enableColumnHiding: !disableColumnHiding,
+    enableColumnPinning: !disableColumnPinning,
+    enableRowExpansion,
+    enableRowSelection,
+    enableMultipleRowSelection,
+    onRowDrag
+  }, ref);
+  const lastSortedOrFilteredRows = React__default.useRef(null);
+  // defaults
+  const initialState = {
+    columnOrder: (_settings$columnOrder = settings === null || settings === void 0 ? void 0 : settings.columnOrder) !== null && _settings$columnOrder !== void 0 ? _settings$columnOrder : columns.map(column => column.id),
+    columnPinning: {
+      left: (_ref = (_settings$columnPinni = settings === null || settings === void 0 ? void 0 : (_settings$columnPinni2 = settings.columnPinning) === null || _settings$columnPinni2 === void 0 ? void 0 : _settings$columnPinni2.left) !== null && _settings$columnPinni !== void 0 ? _settings$columnPinni : defaultColumnPinning) !== null && _ref !== void 0 ? _ref : [],
+      right: []
+    },
+    columnSizing: (_settings$columnSizin = settings === null || settings === void 0 ? void 0 : settings.columnSizing) !== null && _settings$columnSizin !== void 0 ? _settings$columnSizin : defaultColumnSizing,
+    columnVisibility: (_settings$columnVisib = settings === null || settings === void 0 ? void 0 : settings.columnVisibility) !== null && _settings$columnVisib !== void 0 ? _settings$columnVisib : defaultColumnVisibility
+  };
+  // Data column index - these are needed to make sure left and right arrow key shortcuts focuses only the data columns
+  const dataColumnStartOffset = [!!onRowDrag, !!enableRowExpansion, !!enableRowSelection].reduce((t, e) => t + (e ? 1 : 0), 0);
+  const dataColumnEndOffset = actionsForRow.length ? 1 : 0;
+  // custom
+  const activeRow = useActiveRow(defaultActiveRowIndex);
+  const [hoveredRowIndex, setHoveredRowIndex] = React__default.useState(undefined);
+  const editMode = useEditMode(onSave);
+  const [columnOffsets, setColumnOffsets] = React__default.useState(getOffsetsFromSize(initialState.columnPinning, initialState.columnVisibility, initialState.columnSizing));
+  const [rowDensity, setRowDensity] = React__default.useState((_settings$rowDensity = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _settings$rowDensity !== void 0 ? _settings$rowDensity : 'normal');
+  const [dragging, setDragging] = React__default.useState({});
+  const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React__default.useState(false);
+  const [shouldDisableTableActions, setShouldDisableTableActions] = React__default.useState(false);
+  // For some reason, using state instead of ref didn't work as expected, that's why ref is used
+  const focussableColumnIndexes = React__default.useRef([]);
+  // some options get set even if they are undefined, so we have to do it conditionally
+  const options = {
+    enableExpanding: enableRowExpansion,
+    enableColumnFilters: !disableColumnFiltering,
+    enableColumnResizing: !disableColumnResizing,
+    enableGlobalFilter: !disableSearch,
+    enableHiding: !disableColumnHiding,
+    enablePinning: !disableColumnPinning,
+    enableRowSelection: enableRowSelection,
+    enableMultiRowSelection: enableMultipleRowSelection,
+    enableSorting: !disableSorting
+  };
+  // resizing
+  if (options.enableColumnResizing) {
+    options.columnResizeMode = 'onChange';
+  }
+  // sorting
+  if (options.enableSorting) {
+    var _settings$sorting;
+    initialState.sorting = (_settings$sorting = settings === null || settings === void 0 ? void 0 : settings.sorting) !== null && _settings$sorting !== void 0 ? _settings$sorting : defaultSorting;
+    if (manualSorting) {
+      options.manualSorting = true;
+    } else {
+      options.getSortedRowModel = reactTable$1.getSortedRowModel();
+    }
+  }
+  // filtering
+  if (options.enableColumnFilters) {
+    var _settings$columnFilte;
+    initialState.columnFilters = (_settings$columnFilte = settings === null || settings === void 0 ? void 0 : settings.columnFilters) !== null && _settings$columnFilte !== void 0 ? _settings$columnFilte : [];
+    if (manualColumnFiltering) {
+      options.manualFiltering = true;
+    } else {
+      options.filterFns = {
+        tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter)
+      };
+      options.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    }
+  }
+  // search
+  if (options.enableGlobalFilter) {
+    if (manualSearch) {
+      options.manualFiltering = true;
+    } else {
+      options.globalFilterFn = (row, columnId, query) => globalFilterFn(row.getValue(columnId), query);
+      options.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    }
+  }
+  const table = reactTable$1.useReactTable({
+    data,
+    columns: columns,
+    getCoreRowModel: reactTable$1.getCoreRowModel(),
+    initialState,
+    ...options,
+    meta: {
+      ...activeRow,
+      editMode,
+      // offsets
+      columnOffsets,
+      // density
+      enableRowDensity: !disableRowDensity,
+      rowDensity,
+      setRowDensity,
+      // dragging
+      dragging,
+      setDragging,
+      // computed
+      enableColumnReordering: !disableColumnReordering,
+      // resorting
+      shouldPauseSortingAndFiltering,
+      setShouldPauseSortingAndFiltering,
+      // other
+      onRowClick,
+      hoveredRowIndex,
+      setHoveredRowIndex,
+      // data column positions
+      dataColumnStartOffset,
+      dataColumnEndOffset,
+      // disable table actions
+      shouldDisableTableActions,
+      setShouldDisableTableActions,
+      // active row column indexes
+      focussableColumnIndexes: focussableColumnIndexes.current,
+      addFocussableColumnIndex: index => {
+        if (!focussableColumnIndexes.current.includes(index)) {
+          focussableColumnIndexes.current = [...focussableColumnIndexes.current, index].sort((a, b) => a - b);
+        }
+      },
+      resetFocussableColumnIndexes: () => {
+        focussableColumnIndexes.current = [];
+      },
+      // table ref
+      tableRef: ref,
+      // last sorted or filtered rows
+      lastSortedOrFilteredRows
+    }
+  });
+  const tableRows = table.getRowModel().rows;
+  if (!shouldPauseSortingAndFiltering) {
+    lastSortedOrFilteredRows.current = tableRows;
+  }
+  const rows = shouldPauseSortingAndFiltering ? lastSortedOrFilteredRows.current : tableRows;
+  // state listeners
+  useActiveRowStateListener(table, rows, activeRow);
+  useColumnOffsetStateListener(table, setColumnOffsets);
+  useRowSelectionListener(table, onRowSelect);
+  useSettingsStateListener(table, onChangeSettings);
+  return {
+    rows,
+    table,
+    footers
+  };
+}
+
+const densitySizeEstimates = {
+  compact: 33,
+  normal: 41,
+  comfortable: 49,
+  spacious: 57
+};
+const useVirtualiser = ({
+  rows,
+  table
+}, tableRef) => {
+  var _virtualiser$virtualI, _virtualiser$virtualI2, _virtualiser$virtualI3, _virtualiser$virtualI4;
+  const [expandedRowSizes, setExpandedRowSizes] = React__default.useState({});
+  const firstAvailableExpandedRowHeight = React__default.useMemo(() => {
+    const values = Object.values(expandedRowSizes);
+    return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+  }, [expandedRowSizes]);
+  const meta = table.options.meta;
+  const estimateSize = React__default.useCallback(index => {
+    var _table$getState$expan;
+    const rowHeight = meta.rowDensity ? densitySizeEstimates[meta.rowDensity] : densitySizeEstimates.normal;
+    if (table.getState().expanded === true || (_table$getState$expan = table.getState().expanded) !== null && _table$getState$expan !== void 0 && _table$getState$expan[index]) {
+      var _ref, _expandedRowSizes$ind;
+      return rowHeight + ((_ref = (_expandedRowSizes$ind = expandedRowSizes[index]) !== null && _expandedRowSizes$ind !== void 0 ? _expandedRowSizes$ind : firstAvailableExpandedRowHeight) !== null && _ref !== void 0 ? _ref : 0);
+    }
+    return rowHeight;
+  }, [meta.rowDensity, expandedRowSizes, table.getState().expanded]);
+  const virtualiser = reactVirtual.useVirtual({
+    parentRef: tableRef,
+    size: rows.length,
+    estimateSize,
+    overscan: 10
+  });
+  const paddingTop = virtualiser.virtualItems.length > 0 ? ((_virtualiser$virtualI = virtualiser.virtualItems) === null || _virtualiser$virtualI === void 0 ? void 0 : (_virtualiser$virtualI2 = _virtualiser$virtualI[0]) === null || _virtualiser$virtualI2 === void 0 ? void 0 : _virtualiser$virtualI2.start) || 0 : 0;
+  const paddingBottom = virtualiser.virtualItems.length > 0 ? virtualiser.totalSize - (((_virtualiser$virtualI3 = virtualiser.virtualItems) === null || _virtualiser$virtualI3 === void 0 ? void 0 : (_virtualiser$virtualI4 = _virtualiser$virtualI3[virtualiser.virtualItems.length - 1]) === null || _virtualiser$virtualI4 === void 0 ? void 0 : _virtualiser$virtualI4.end) || 0) : 0;
+  return {
+    virtualiser,
+    virtualiserOffsets: {
+      top: paddingTop,
+      bottom: paddingBottom
+    },
+    setExpandedRowSizes
+  };
+};
+
+const useGridTemplate = table => {
+  var _table$options$meta$t, _table$options$meta, _table$options$meta$t2, _table$options$meta$t3, _table$options$meta2, _table$options$meta2$;
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  let scrollbarWidth = ((_table$options$meta$t = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : (_table$options$meta$t2 = _table$options$meta.tableRef.current) === null || _table$options$meta$t2 === void 0 ? void 0 : _table$options$meta$t2.offsetWidth) !== null && _table$options$meta$t !== void 0 ? _table$options$meta$t : 0) - ((_table$options$meta$t3 = (_table$options$meta2 = table.options.meta) === null || _table$options$meta2 === void 0 ? void 0 : (_table$options$meta2$ = _table$options$meta2.tableRef.current) === null || _table$options$meta2$ === void 0 ? void 0 : _table$options$meta2$.clientWidth) !== null && _table$options$meta$t3 !== void 0 ? _table$options$meta$t3 : 0);
+  scrollbarWidth = scrollbarWidth < 0 ? 0 : scrollbarWidth;
+  return allVisibleColumns.reduce((accum, column, index) => {
+    let size;
+    const isLastColumn = index === allVisibleColumns.length - 1;
+    const width = table.getState().columnSizing[column.id];
+    if (column.id === COLUMN_ID_FOR_ACTIONS) {
+      size = `minmax(max-content, auto)`;
+    } else if (isInternalColumn(column.id)) {
+      size = `${column.getSize()}px`;
+    } else if (width) {
+      if (isLastColumn) {
+        // Remove the scrollbar width from the last column
+        size = `minmax(${width - scrollbarWidth}px, auto)`;
+      } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
+        // react-table is supposed to handle minSize itself but it is really buggy
+        size = `${column.columnDef.minSize}px`;
+      } else {
+        size = `${width}px`;
+      }
+    } else if (column.getCanResize()) {
+      size = 'minmax(max-content, auto)';
+    } else {
+      size = 'max-content';
+    }
+    return `${accum} ${size}`;
+  }, '');
+};
+
+const RowDensityButton = ({
+  table
+}) => {
+  const meta = table.options.meta;
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "Change row density",
+    icon: `density-${meta.rowDensity}`,
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
+      align: "end"
+    }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+      onChange: rowDensity => meta.setRowDensity(rowDensity),
+      value: meta.rowDensity
+    }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+      value: "compact"
+    }, "Compact"), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+      value: "normal"
+    }, "Normal"), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+      value: "comfortable"
+    }, "Comfortable"), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+      value: "spacious"
+    }, "Spacious")))),
+    tooltip: "Row density"
+  });
+};
+
+function getContainerById(children, id) {
+  var _lists$find;
+  const lists = React__default.Children.toArray(children).filter(child => child.type.displayName === 'SortableList');
+  const list = lists.find(list => list.props.id === id);
+  if (list) {
+    return list === null || list === void 0 ? void 0 : list.props;
+  }
+  return (_lists$find = lists.find(l => React__default.Children.toArray(l.props.children).findIndex(child => child.props.id === id) > -1)) === null || _lists$find === void 0 ? void 0 : _lists$find.props;
+}
+function Container(externalProps) {
+  const {
+    children,
+    reorder,
+    move
+  } = externalProps;
+  function handleDragOver(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (!(active !== null && active !== void 0 && active.id) || !(over !== null && over !== void 0 && over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id === overList.id) {
+      return;
+    }
+    move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
+  }
+  function handleDragEnd(event) {
+    const {
+      active,
+      over
+    } = event;
+    if (!(active !== null && active !== void 0 && active.id) || !(over !== null && over !== void 0 && over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id !== overList.id) {
+      return;
+    }
+    reorder(active.id, over.id, overList.id);
+  }
+  return /*#__PURE__*/React__default.createElement(core.DndContext, Object.assign({
+    collisionDetection: core.closestCenter
+  }, externalProps, {
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd
+  }), children);
+}
+Container.displayName = 'SortableContainer';
+
+function Item$3(props) {
+  const {
+    asChild,
+    children,
+    disabled = false,
+    id
+  } = props;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = sortable.useSortable({
+    disabled,
+    id
+  });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition
+  };
+  const onPointerDown = event => {
+    // allow form components, like checkboxes, to be active
+    if (event.target === event.currentTarget) {
+      listeners === null || listeners === void 0 ? void 0 : listeners.onPointerDown(event);
+    }
+  };
+  const elProps = {
+    ...attributes,
+    ...listeners,
+    onPointerDown,
+    ref: setNodeRef,
+    style
+  };
+  if (asChild) {
+    return /*#__PURE__*/React__default.cloneElement(children, elProps);
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, elProps), children);
+}
+Item$3.displayName = 'SortableListItem';
+
+function List$1(externalProps) {
+  const {
+    children,
+    id,
+    ...props
+  } = externalProps;
+  const {
+    setNodeRef
+  } = core.useDroppable({
+    id
+  });
+  const items = React__default.Children.toArray(children).map(child => child.props);
+  return /*#__PURE__*/React__default.createElement(sortable.SortableContext, {
+    id: id,
+    items: items,
+    strategy: sortable.verticalListSortingStrategy
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    ref: id ? setNodeRef : undefined
+  }), children));
+}
+List$1.displayName = 'SortableList';
+
+const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _column$columnDef$hea;
+  const {
+    canBeReordered,
+    column,
+    isReorderingAllowed,
+    ...attributes
+  } = props;
+  let icon;
+  if (canBeReordered) {
+    icon = /*#__PURE__*/React__default.createElement(Icon, {
+      name: "drag",
+      className: "text-grey-500 hover:text-grey-700 mr-0.5 -ml-2 -mt-px cursor-move"
+    });
+  } else if (isReorderingAllowed) {
+    icon = /*#__PURE__*/React__default.createElement("span", {
+      className: "mr-0.5 inline-flex w-4"
+    });
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: "hover:bg-grey-100 aria-pressed:bg-grey-200 flex w-full items-center justify-between gap-x-2 rounded py-1 px-2 aria-pressed:z-10",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "pointer-events-none"
+  }, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
+    checked: column.getIsVisible(),
+    onChange: column.toggleVisibility
+  }) : null);
+});
+const isOrderingAllowed = (table, column) => {
+  var _column$columnDef$met;
+  const meta = table.options.meta;
+  if (table.options.enablePinning) {
+    return true;
+  }
+  return meta.enableColumnReordering ? !((_column$columnDef$met = column.columnDef.meta) !== null && _column$columnDef$met !== void 0 && _column$columnDef$met.disableReordering) : false;
+};
+const SortableColumnContainer = ({
+  state,
+  moveColumn,
+  reorderColumn,
+  table
+}) => {
+  var _ref;
+  const meta = table.options.meta;
+  const reorder = (activeId, overId, listId) => {
+    const draggedColumn = state[listId].find(c => c.id === activeId);
+    const targetColumn = state[listId].find(c => c.id === overId);
+    if (draggedColumn && targetColumn) {
+      reorderColumn(draggedColumn.id, targetColumn.id, listId === 'pinned');
+    }
+  };
+  const move = (activeId, oldListId) => {
+    const column = state[oldListId].find(c => c.id === activeId);
+    if (column) {
+      moveColumn(column);
+    }
+  };
+  const isReorderingAllowed = (_ref = meta.enableColumnReordering || table.options.enablePinning) !== null && _ref !== void 0 ? _ref : false;
+  if (!table.options.enablePinning) {
+    return /*#__PURE__*/React__default.createElement(Container, {
+      reorder: reorder,
+      move: move
+    }, /*#__PURE__*/React__default.createElement(List$1, {
+      id: "other",
+      className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+    }, state.other.map(column => {
+      var _column$columnDef$met2;
+      const canBeReordered = isOrderingAllowed(table, column);
+      return /*#__PURE__*/React__default.createElement(Item$3, {
+        key: column.id,
+        disabled: (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.disableReordering,
+        id: column.id,
+        asChild: true
+      }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+        canBeReordered: canBeReordered,
+        column: column,
+        isReorderingAllowed: isReorderingAllowed,
+        onDoubleClick: event => {
+          event.stopPropagation();
+          move(column.id, 'other');
+        }
+      }));
+    })));
+  }
+  return /*#__PURE__*/React__default.createElement(Container, {
+    reorder: reorder,
+    move: move
+  }, /*#__PURE__*/React__default.createElement("h5", {
+    className: "mx-4"
+  }, "Pinned columns"), /*#__PURE__*/React__default.createElement(List$1, {
+    id: "pinned",
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+  }, state.pinned.length ? state.pinned.map(column => {
+    var _column$columnDef$met3;
+    const canBeReordered = isOrderingAllowed(table, column);
+    return /*#__PURE__*/React__default.createElement(Item$3, {
+      key: column.id,
+      disabled: (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.disableReordering,
+      id: column.id,
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      canBeReordered: canBeReordered,
+      column: column,
+      isReorderingAllowed: isReorderingAllowed,
+      onDoubleClick: event => {
+        event.stopPropagation();
+        move(column.id, 'pinned');
+      }
+    }));
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
+  }, "Drop column here to pin")), /*#__PURE__*/React__default.createElement("h5", {
+    className: "mx-4"
+  }, "Other columns"), /*#__PURE__*/React__default.createElement(List$1, {
+    id: "other",
+    className: "flex min-h-[theme(spacing.8)] flex-col gap-y-px px-2"
+  }, state.other.length ? state.other.map(column => {
+    var _column$columnDef$met4;
+    const canBeReordered = isOrderingAllowed(table, column);
+    return /*#__PURE__*/React__default.createElement(Item$3, {
+      key: column.id,
+      disabled: (_column$columnDef$met4 = column.columnDef.meta) === null || _column$columnDef$met4 === void 0 ? void 0 : _column$columnDef$met4.disableReordering,
+      id: column.id,
+      asChild: true
+    }, /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      canBeReordered: canBeReordered,
+      column: column,
+      isReorderingAllowed: isReorderingAllowed,
+      onDoubleClick: event => {
+        event.stopPropagation();
+        move(column.id, 'other');
+      }
+    }));
+  }) : /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-500 mb-0 flex h-8 items-center px-2"
+  }, "Drop column here to unpin")));
+};
+const reorder = (draggedColumnId, targetColumnId, list = []) => {
+  const nextColumnOrder = [...list];
+  nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === targetColumnId), 0, nextColumnOrder.splice(nextColumnOrder.findIndex(c => c.id === draggedColumnId), 1)[0]);
+  return nextColumnOrder;
+};
+const ColumnSettingsButton = ({
+  table
+}) => {
+  const [query, setQuery] = React__default.useState('');
+  const columns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const [state, setState] = React__default.useState({
+    pinned: columns.filter(column => column.getIsPinned()),
+    other: columns.filter(column => !column.getIsPinned())
+  });
+  const pinColumn = column => {
+    if (state.pinned.find(c => c.id === column.id)) {
+      setState(currentState => ({
+        pinned: currentState.pinned.filter(c => c.id !== column.id),
+        other: [column].concat(...currentState.other)
+      }));
+    } else {
+      setState(currentState => ({
+        pinned: currentState.pinned.concat(column),
+        other: currentState.other.filter(c => c.id !== column.id)
+      }));
+    }
+  };
+  const reorderColumn = (draggedColumnId, targetColumnId, pinned) => {
+    if (pinned) {
+      setState(currentState => ({
+        ...currentState,
+        pinned: reorder(draggedColumnId, targetColumnId, currentState.pinned)
+      }));
+    } else {
+      setState(currentState => ({
+        ...currentState,
+        other: reorder(draggedColumnId, targetColumnId, currentState.other)
+      }));
+    }
+  };
+  // probably a more elegant way to do this without local state but had
+  // a range of issues using the native apis directly
+  React__default.useEffect(() => {
+    const internals = [];
+    if (table.options.enableRowSelection) {
+      internals.push(COLUMN_ID_FOR_SELECTION);
+    }
+    if (table.options.enableExpanding) {
+      internals.push(COLUMN_ID_FOR_EXPANSION);
+    }
+    table.setColumnPinning({
+      left: internals.concat(...state.pinned.map(c => c.id))
+    });
+    table.setColumnOrder(internals.concat([...state.pinned, ...state.other].map(c => c.id)));
+  }, [state]);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "Change column settings",
+    icon: "columns",
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+      align: "end"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-60 flex-col gap-2"
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      onChange: event => setQuery(event.target.value),
+      placeholder: "Search column...",
+      value: query
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "-ml-4 -mb-2 max-h-64 w-[calc(100%_+_theme(spacing.8))] overflow-auto"
+    }, query ? columns.filter(column => {
+      var _column$columnDef$hea2;
+      return (_column$columnDef$hea2 = column.columnDef.header) === null || _column$columnDef$hea2 === void 0 ? void 0 : _column$columnDef$hea2.toString().includes(query);
+    }).map(column => /*#__PURE__*/React__default.createElement(OrderableColumn, {
+      key: column.id,
+      canBeReordered: false,
+      column: column,
+      isReorderingAllowed: false
+    })) : /*#__PURE__*/React__default.createElement(SortableColumnContainer, {
+      state: state,
+      moveColumn: pinColumn,
+      reorderColumn: reorderColumn,
+      table: table
+    }))))),
+    tooltip: "Column settings"
+  });
+};
+
+const ExpandedRow = ({
+  index,
+  setSize,
+  ...props
+}) => {
+  const ref = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref.current) {
+      var _ref$current;
+      const height = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().height;
+      setSize(sizes => {
+        if (height !== sizes[index]) {
+          var _ref$current2;
+          return {
+            ...sizes,
+            [index]: (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect().height
+          };
+        }
+        return sizes;
+      });
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({
+    className: "border-grey-300 bg-grey-50 col-span-full border-b p-4"
+  }, props, {
+    ref: ref
+  }));
+};
+
+const useSeparatedChildren$1 = initialChildren => {
+  return React__default.useMemo(() => {
+    const columns = [];
+    let toolbar;
+    React__default.Children.toArray(initialChildren).filter(child => !!child) // skip falsey columns
+    .forEach(child => {
+      var _child$type, _child$type2;
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Table2Column') {
+        columns.push(child);
+      } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Table2Toolbar') {
+        toolbar = child;
+      }
+    });
+    return [columns, toolbar];
+  }, [initialChildren]);
+};
+
+const useBoundaryOverflowDetection = (ref, dependencies = []) => {
+  const [boundaryIndex, setBoundaryIndex] = React__default.useState();
+  React__default.useEffect(() => {
+    if (ref.current) {
+      const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);
+      setBoundaryIndex(boundaryChildIndex);
+    }
+  }, [ref, ...dependencies]);
+  return boundaryIndex;
+};
+
+const BUTTON_CLASSES = /*#__PURE__*/cn( /*#__PURE__*/getButtonClasses(), 'hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 rounded px-2');
+function unwrapActionProperty(property, rowsData) {
+  return typeof property === 'function' ? property(rowsData) : property;
+}
+function createActionButton(actions, rowsData, onReset) {
+  return actions.map((action, index) => {
+    const button = /*#__PURE__*/React__default.createElement("button", {
+      className: BUTTON_CLASSES,
+      disabled: unwrapActionProperty(action.disabled, rowsData),
+      onClick: action.onClick ? () => action.onClick ? action.onClick(rowsData, onReset) : undefined : undefined
+    }, action.icon ? /*#__PURE__*/React__default.createElement(Icon, {
+      name: unwrapActionProperty(action.icon, rowsData)
+    }) : null, unwrapActionProperty(action.text, rowsData));
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, typeof action.dialog === 'function' ? action.dialog(rowsData, onReset)({
+      trigger: button
+    }) : button);
+  });
+}
+function BatchActionsMenu({
+  actionsForTable = [],
+  summary,
+  table,
+  ...props
+}) {
+  const className = cn('bg-blue-900 yt-shadow flex w-96 flex-col gap-2 divide-y divide-white/25 rounded p-2 text-white', props.className);
+  const ref = React__default.useRef(null);
+  const boundaryIndex = useBoundaryOverflowDetection(ref, actionsForTable);
+  const rows = table.getSelectedRowModel().rows;
+  const rowsData = rows.map(row => row.original);
+  const handleReset = () => table.toggleAllRowsSelected(false);
+  const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(rowsData) : action.visible : true;
+  const visibleActions = actionsForTable.filter(isVisible);
+  let content;
+  if (boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < actionsForTable.length) {
+    const actions = visibleActions.slice(0, boundaryIndex);
+    const moreActions = visibleActions.slice(boundaryIndex);
+    content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, createActionButton(actions, rowsData, handleReset), moreActions.length ? /*#__PURE__*/React__default.createElement(Menu$1, null, /*#__PURE__*/React__default.createElement(Menu$1.Trigger, null, /*#__PURE__*/React__default.createElement("button", {
+      className: cn(BUTTON_CLASSES, 'ml-auto w-8')
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      name: "more",
+      className: "m-0 p-0"
+    }))), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, moreActions.map((action, index) => /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+      key: index,
+      dialog: action.dialog ? action.dialog(rowsData, handleReset) : undefined,
+      disabled: unwrapActionProperty(action.disabled, rowsData),
+      icon: unwrapActionProperty(action.icon, rowsData),
+      onClick: action.onClick ? () => action.onClick ? action.onClick(rowsData, handleReset) : undefined : undefined
+    }, unwrapActionProperty(action.text, rowsData))))) : null);
+  } else {
+    content = createActionButton(visibleActions, rowsData, handleReset);
+  }
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: className,
+    tabIndex: 0
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-center justify-between gap-2 px-2"
+  }, rows.length, " items selected ", summary ? ` - ${summary(rowsData)}` : undefined, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Reset selected",
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    "aria-label": "Reset selected",
+    className: "rounded hover:bg-white/[0.08]",
+    onClick: handleReset
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "close"
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full gap-px overflow-hidden px-1 pt-2",
+    ref: ref
+  }, content));
+}
+
+const HOVER_THRESHOLD_MS = 50;
+const Row$1 = ({
+  row,
+  rowIndex,
+  table,
+  ...props
+}) => {
+  const meta = table.options.meta;
+  const isActiveRow = meta.activeRowIndex === rowIndex;
+  const isDragging = meta.dragging[row.id];
+  const [validationErrors, setValidationErrors] = React__default.useState(null);
+  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
+  // This effect aims to focus the first focussable cell when edit mode is turned on.
+  React__default.useEffect(() => {
+    var _meta$tableRef$curren;
+    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
+    // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.
+    if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {
+      meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);
+    }
+    // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,
+    // first focussable cell is not focussed.
+  }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);
+  const handleSetValidationErrors = errors => {
+    if (errors !== null) {
+      meta.setShouldDisableTableActions(true);
+    }
+    setValidationErrors(errors);
+  };
+  const hoverTimerRef = React__default.useRef();
+  const handleEnter = () => {
+    hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);
+  };
+  const handleLeave = () => {
+    clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = undefined;
+    meta.setHoveredRowIndex(undefined);
+  };
+  return /*#__PURE__*/React__default.createElement(RowProvider, {
+    validationErrors: validationErrors,
+    setValidationErrors: handleSetValidationErrors,
+    rowMoveReason: rowMoveReason,
+    setRowMoveReason: setRowMoveReason
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    role: "row",
+    draggable: true,
+    "aria-current": isActiveRow ? 'true' : undefined,
+    "aria-grabbed": isDragging ? 'true' : undefined,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave
+  })));
+};
+
+const Column$1 = ({
+  allColumns,
+  column,
+  index,
+  table,
+  ...props
+}) => {
+  const handleChange = id => {
+    table.setColumnFilters(currentColumnFilters => {
+      const nextColumnFilters = [...currentColumnFilters];
+      nextColumnFilters[index].id = id;
+      nextColumnFilters[index].value = {};
+      return nextColumnFilters;
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, props, {
+    autoFocus: true,
+    onChange: handleChange,
+    value: column.id
+  }), allColumns.map(c => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: c.id,
+    disabled: !c.getCanFilter() || c.id !== column.id && !!table.getState().columnFilters.find(f => f.id === c.id),
+    value: c.id
+  }, String(c.columnDef.header))));
+};
+
+const Comparator = ({
+  column,
+  comparator,
+  validComparators,
+  ...props
+}) => {
+  const handleChange = comparator => {
+    column.setFilterValue(currentFilterValue => ({
+      comparator,
+      value: comparator === Table2FilterComparator.IsBetween ? [] : currentFilterValue.value
+    }));
+  };
+  React__default.useEffect(() => {
+    if (comparator === undefined) {
+      const initialComparator = validComparators[0];
+      column.setFilterValue(currentFilterValue => ({
+        comparator: initialComparator,
+        value: initialComparator === Table2FilterComparator.IsBetween && !Array.isArray(currentFilterValue.value) ? [] : currentFilterValue.value
+      }));
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, props, {
+    onChange: handleChange,
+    value: comparator
+  }), validComparators.map(comp => /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: comp,
+    value: comp
+  }, getComparatorText(comp))));
+};
+const getComparatorText = comparator => {
+  switch (comparator) {
+    case Table2FilterComparator.Contains:
+      return 'Contains';
+    case Table2FilterComparator.DoesNotContain:
+      return 'Does not contain';
+    case Table2FilterComparator.IsEqualTo:
+      return 'Is';
+    case Table2FilterComparator.IsNotEqualTo:
+      return 'Is not';
+    case Table2FilterComparator.IsGreaterThan:
+      return 'Is greater than';
+    case Table2FilterComparator.IsLessThan:
+      return 'Is less than';
+    case Table2FilterComparator.IsBetween:
+      return 'Is between';
+    case Table2FilterComparator.IsOneOf:
+      return 'Is one of';
+    case Table2FilterComparator.IsNoneOf:
+      return 'Is none of';
+    case Table2FilterComparator.IsAllOf:
+      return 'Is all of';
+  }
+};
+
+const InferredControl = ({
+  column,
+  comparator,
+  value
+}) => {
+  var _column$columnDef$met2, _column$columnDef$met3;
+  const ariaLabel = column.columnDef.header;
+  if (comparator === Table2FilterComparator.IsBetween) {
+    var _column$columnDef$met;
+    const fromValue = Array.isArray(value) ? value[0] : undefined;
+    const toValue = Array.isArray(value) ? value[1] : undefined;
+    if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex flex-grow items-center gap-2"
+      }, /*#__PURE__*/React__default.createElement(Datepicker, {
+        "aria-label": ariaLabel,
+        onChange: event => column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [event.detail, toValue]
+        })),
+        value: fromValue
+      }), /*#__PURE__*/React__default.createElement(Datepicker, {
+        "aria-label": ariaLabel,
+        onChange: event => column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [fromValue, event.detail]
+        })),
+        value: toValue
+      }));
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-grow items-center gap-2"
+    }, /*#__PURE__*/React__default.createElement(Input, {
+      "aria-label": ariaLabel,
+      className: "flex-grow",
+      placeholder: "from",
+      onChange: event => {
+        const value = parseInt(event.target.value);
+        column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [isNaN(value) ? undefined : value, toValue]
+        }));
+      },
+      value: fromValue !== null && fromValue !== void 0 ? fromValue : ''
+    }), /*#__PURE__*/React__default.createElement(Input, {
+      className: "flex-grow",
+      placeholder: "to",
+      onChange: event => {
+        const value = parseInt(event.target.value);
+        column.setFilterValue(currentValue => ({
+          ...currentValue,
+          value: [fromValue, isNaN(value) ? undefined : value]
+        }));
+      },
+      value: toValue !== null && toValue !== void 0 ? toValue : ''
+    }));
+  }
+  if (((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.dataType) === 'datetime') {
+    return /*#__PURE__*/React__default.createElement(Datepicker, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.detail
+      })),
+      value: value
+    });
+  } else if (((_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType) === 'boolean') {
+    return /*#__PURE__*/React__default.createElement(Switch, {
+      "aria-label": ariaLabel,
+      onChange: checked => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: checked
+      })),
+      checked: value
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(Input, {
+    "aria-label": ariaLabel,
+    className: "flex-grow",
+    onChange: event => column.setFilterValue(currentValue => ({
+      ...currentValue,
+      value: event.target.value
+    })),
+    required: true,
+    value: value !== null && value !== void 0 ? value : ''
+  });
+};
+
+const ColumnFilter = props => {
+  var _column$columnDef$hea, _column$columnDef$met, _column$columnDef$met2, _control;
+  const {
+    allColumns,
+    column,
+    index,
+    table
+  } = props;
+  const {
+    comparator,
+    value
+  } = column.getFilterValue();
+  const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
+  const ref = React__default.useRef(null);
+  let control;
+  const controlType = (_column$columnDef$met = (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : 'input';
+  if (typeof controlType === 'function') {
+    control = controlType({
+      onBlur: () => Promise.resolve(),
+      onFocus: () => Promise.resolve(),
+      ref,
+      setValue: value => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value
+      })),
+      value,
+      disabled: false,
+      readOnly: false
+    });
+  } else if (controlType === 'input') {
+    control = /*#__PURE__*/React__default.createElement(Input, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.target.value
+      })),
+      value: String(value !== null && value !== void 0 ? value : '')
+    });
+  } else if (controlType === 'datepicker') {
+    control = /*#__PURE__*/React__default.createElement(Datepicker, {
+      "aria-label": ariaLabel,
+      onChange: event => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: event.detail
+      })),
+      value: value
+    });
+  } else if (controlType === 'switch') {
+    control = /*#__PURE__*/React__default.createElement(Switch, {
+      "aria-label": ariaLabel,
+      checked: Boolean(value),
+      onChange: checked => column.setFilterValue(currentValue => ({
+        ...currentValue,
+        value: checked
+      }))
+    });
+  }
+  const handleRemove = () => column.setFilterValue(undefined);
+  const comparators = guessComparatorsBasedOnControl(controlType, control);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-2 flex gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, index === 0 ? 'Where' : 'And'), /*#__PURE__*/React__default.createElement(Column$1, {
+    className: "!w-32 flex-shrink-0",
+    allColumns: allColumns,
+    column: column,
+    index: index,
+    table: table
+  }), /*#__PURE__*/React__default.createElement(Comparator, {
+    className: "!w-32 flex-shrink-0",
+    column: column,
+    comparator: comparator,
+    validComparators: comparators
+  }), comparator !== undefined ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-grow items-center"
+  }, (_control = control) !== null && _control !== void 0 ? _control : /*#__PURE__*/React__default.createElement(InferredControl, {
+    column: column,
+    comparator: comparator,
+    value: value
+  })) : null, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "close",
+    onClick: handleRemove
+  }));
+};
+const guessComparatorsBasedOnControl = (control, instance) => {
+  if ( /*#__PURE__*/React__default.isValidElement(instance)) {
+    const {
+      props,
+      type
+    } = instance;
+    if (type.displayName === 'Select2') {
+      if (props.multiple) {
+        return [Table2FilterComparator.IsOneOf, Table2FilterComparator.IsNoneOf, Table2FilterComparator.IsAllOf];
+      }
+      return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo];
+    }
+  }
+  switch (control) {
+    case 'datepicker':
+      return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
+    case 'switch':
+      return [Table2FilterComparator.IsEqualTo];
+    default:
+      return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
+  }
+};
+
+const useGlobalKeyboardShortcut = handler => {
+  React__default.useEffect(() => {
+    document.addEventListener('keydown', handler);
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [handler]);
+};
+
+const FiltersButton = ({
+  length,
+  table
+}) => {
+  const ref = React__default.useRef(null);
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
+  const {
+    shouldDisableTableActions
+  } = table.options.meta;
+  const columnFilters = table.getState().columnFilters;
+  const filteredColumns = columnFilters.reduce((columns, columnFilter) => {
+    const column = allColumns.find(c => c.id === columnFilter.id);
+    if (column) {
+      return [...columns, column];
+    }
+    return columns;
+  }, []);
+  const handleAdd = () => {
+    const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));
+    if (firstFilterableColumn) {
+      firstFilterableColumn.setFilterValue({
+        comparator: undefined,
+        value: undefined
+      });
+    }
+  };
+  const handleReset = () => {
+    table.resetColumnFilters();
+  };
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+      var _ref$current;
+      event.preventDefault();
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: columnFilters.length ? 'primary' : 'default',
+    className: cn({
+      '!wcag-blue-100': columnFilters.length
+    }),
+    disabled: shouldDisableTableActions,
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-[40rem] flex-col gap-4"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex w-full items-center gap-2"
+    }, /*#__PURE__*/React__default.createElement("h4", {
+      className: "mb-0 inline-flex"
+    }, "Filter"), /*#__PURE__*/React__default.createElement("p", {
+      className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
+    }, "Viewing ", table.getFilteredRowModel().rows.length, " of ", length)), /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-2"
+    }, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
+      key: `${column.id}_${index}`,
+      allColumns: allColumns,
+      index: index,
+      column: column,
+      table: table
+    }))), /*#__PURE__*/React__default.createElement(Group, {
+      className: "justify-between"
+    }, /*#__PURE__*/React__default.createElement(Button$1, {
+      appearance: "discrete",
+      onClick: handleAdd
+    }, "+ Add filter"), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button$1, {
+      onClick: handleReset
+    }, "Clear all filters") : null)))),
+    ref: ref,
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFilters.length ? 'Change filters' : 'Apply filters', /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      className: "ml-2",
+      keys: ['Ctrl', 'Shift', 'F']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: columnFilters.length ? 'filter-solid' : 'filter'
+  }), columnFilters.length ? `Filters (${columnFilters.length})` : 'Filters');
+};
+
+const Search$2 = props => {
+  const {
+    value,
+    ...attributes
+  } = props;
+  const ref = React__default.useRef(null);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      var _props$onSearch;
+      (_props$onSearch = props.onSearch) === null || _props$onSearch === void 0 ? void 0 : _props$onSearch.call(props, '');
+    }
+  };
+  // gets called when the "clear" button is clicked
+  const handleInput = event => {
+    if (props.onInput) {
+      props.onInput(event);
+    }
+    if (!event.isDefaultPrevented() && !event.currentTarget.value) {
+      var _props$onSearch2;
+      (_props$onSearch2 = props.onSearch) === null || _props$onSearch2 === void 0 ? void 0 : _props$onSearch2.call(props, '');
+    }
+  };
+  const handleBlur = event => {
+    var _props$onSearch3;
+    const value = event.target.value;
+    (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
+  };
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+      if (document.activeElement !== ref.current) {
+        var _ref$current;
+        event.preventDefault();
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }
+  });
+  const className = cn('w-48', {
+    '!wcag-blue-100': !!value
+  });
+  return /*#__PURE__*/React__default.createElement(SearchInput, Object.assign({}, attributes, {
+    className: className,
+    onBlur: handleBlur,
+    onInput: handleInput,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+};
+
+const ShortcutsGuideButton = ({
+  table
+}) => {
+  const meta = table.options.meta;
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
+  const shortcuts = [];
+  if (table.options.enableGlobalFilter) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.search,
+      keys: ['Ctrl', 'F']
+    });
+  }
+  if (table.options.enableColumnFilters) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.filter,
+      keys: ['Ctrl', 'Shift', 'F']
+    });
+  }
+  shortcuts.push({
+    feature: tableTexts.shortcuts.previousRow,
+    keys: ['Up']
+  });
+  shortcuts.push({
+    feature: tableTexts.shortcuts.nextRow,
+    keys: ['Down']
+  });
+  if (meta.editMode.enableEditMode) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.editCell,
+      keys: ['Enter']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.previousColumn,
+      keys: ['Arrow-Left']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.nextColumn,
+      keys: ['Arrow-Right']
+    });
+  } else if (meta.onRowClick) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.rowClick,
+      keys: ['Enter']
+    });
+  }
+  if (table.options.enableRowSelection) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.selectRow,
+      keys: ['Space']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.selectAllRows,
+      keys: ['Ctrl', 'A']
+    });
+  }
+  if (table.options.enableExpanding) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.expandRow,
+      keys: ['Ctrl', 'Right']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.collapseRow,
+      keys: ['Ctrl', 'Left']
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "View keyboard shortcuts",
+    icon: "shortcuts",
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+      align: "end"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-y-1"
+    }, shortcuts.map(shortcut => /*#__PURE__*/React__default.createElement("span", {
+      className: "flex items-center justify-between gap-x-8",
+      key: shortcut.feature
+    }, /*#__PURE__*/React__default.createElement("span", null, shortcut.feature), /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      keys: shortcut.keys
+    })))))),
+    rounded: true
+  });
+};
+
+const EditModeButton = /*#__PURE__*/React__default.forwardRef(function EditModeButton(props, ref) {
+  const {
+    table,
+    tableRef
+  } = props;
+  const internalRef = useMergedRef(ref);
+  const meta = table.options.meta;
+  const {
+    isEditing
+  } = meta.editMode;
+  const showWarning = React__default.useCallback(event => {
+    if (isEditing) {
+      event.returnValue = true;
+      return true;
+    }
+    return false;
+  }, [isEditing]);
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'e' && (event.ctrlKey || event.metaKey)) {
+      var _internalRef$current;
+      event.preventDefault();
+      (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
+    }
+  });
+  React__default.useEffect(() => {
+    window.addEventListener('beforeunload', showWarning);
+    return () => window.removeEventListener('beforeunload', showWarning);
+  }, [showWarning]);
+  const handleClick = () => {
+    var _tableRef$current;
+    meta.editMode.toggleEditing();
+    (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+  };
+  return /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: handleClick,
+    className: cn({
+      '!wcag-blue-100': meta.editMode.isEditing
+    }),
+    ref: internalRef,
+    tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Edit", /*#__PURE__*/React__default.createElement(Shortcut$1, {
+      className: "ml-2",
+      keys: ['Ctrl', 'E']
+    }))
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "edit"
+  }), "Edit");
+});
+
+function Column$2(_) {
+  return null;
+}
+Column$2.displayName = 'Table2Column';
+function Toolbar(props) {
+  const className = cn('flex-grow', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: className
+  }));
+}
+Toolbar.displayName = 'Table2Toolbar';
+const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref) {
+  // dom
+  const {
+    emptyState: EmptyState,
+    expandedRowRenderer,
+    length = props.data.length,
+    loadMore,
+    onRowClick,
+    _experimentalActionsForTable,
+    _experimentalActionsForTableSummary
+  } = props;
+  const tableRef = useMergedRef(ref);
+  const timeoutIdRef = React__default.useRef();
+  // react-table
+  const [columns, toolbar] = useSeparatedChildren$1(props.children);
+  const {
+    rows,
+    table,
+    footers
+  } = useTable$1(columns, props, tableRef);
+  const meta = table.options.meta;
+  const {
+    columnVisibility,
+    columnOrder,
+    globalFilter
+  } = table.getState();
+  // If column visibility or order changes then we turn off the edit mode so that control indexes gets computed
+  // when user turns on the editing mode again. This is a temporary solution to make sure the keyboard navigation
+  // still keeps working on changes in column visibility, order, or both
+  React__default.useEffect(() => {
+    meta.resetFocussableColumnIndexes();
+  }, [columnVisibility, columnOrder]);
+  React__default.useEffect(() => {
+    // Whenever edit mode is turned off we reset the focussableColumnIndexes ref to an empty array so that
+    // we don't have stale values, in case column visibility or ordering changes
+    if (!meta.editMode.isEditing) {
+      meta.resetFocussableColumnIndexes();
+    }
+  }, [meta.editMode.isEditing]);
+  React__default.useEffect(() => {
+    return () => clearTimeout(timeoutIdRef.current);
+  }, []);
+  // virtualiser
+  const {
+    virtualiser,
+    virtualiserOffsets,
+    setExpandedRowSizes
+  } = useVirtualiser({
+    rows,
+    table
+  }, tableRef);
+  // css grid
+  const gridTemplateColumns = useGridTemplate(table);
+  // handlers
+  const editButtonRef = React__default.useRef(null);
+  // support grid like keyboard navigation between cells
+  const handleKeyDown = event => {
+    if (document.activeElement === tableRef.current) {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+          meta.setActiveRowIndex(0);
+          virtualiser.scrollToOffset(0);
+        } else {
+          meta.moveToPreviousRow(rows, nextIndex => virtualiser.scrollToIndex(nextIndex - 1));
+        }
+        return;
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+          meta.setActiveRowIndex(rows.length - 1);
+          virtualiser.scrollToOffset(virtualiser.totalSize + 1);
+        } else {
+          meta.moveToNextRow(rows, nextIndex => virtualiser.scrollToIndex(nextIndex + 2));
+        }
+        return;
+      }
+      const canToggleRowExpansion = table.options.enableExpanding;
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+          if (canToggleRowExpansion) {
+            var _rows$meta$activeRowI;
+            (_rows$meta$activeRowI = rows[meta.activeRowIndex]) === null || _rows$meta$activeRowI === void 0 ? void 0 : _rows$meta$activeRowI.toggleExpanded(false);
+          }
+        }
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+          if (canToggleRowExpansion) {
+            var _rows$meta$activeRowI2;
+            (_rows$meta$activeRowI2 = rows[meta === null || meta === void 0 ? void 0 : meta.activeRowIndex]) === null || _rows$meta$activeRowI2 === void 0 ? void 0 : _rows$meta$activeRowI2.toggleExpanded(true);
+          }
+        }
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        if (onRowClick) {
+          onRowClick(rows[meta === null || meta === void 0 ? void 0 : meta.activeRowIndex].original);
+        }
+        return;
+      }
+      if (event.key === ' ') {
+        event.preventDefault();
+        if (table.options.enableRowSelection) {
+          var _rows$meta$activeRowI3;
+          (_rows$meta$activeRowI3 = rows[meta.activeRowIndex]) === null || _rows$meta$activeRowI3 === void 0 ? void 0 : _rows$meta$activeRowI3.toggleSelected();
+        }
+        return;
+      }
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        if (event.key === 'a') {
+          if (table.options.enableRowSelection) {
+            table.toggleAllRowsSelected();
+          }
+        }
+        return;
+      }
+    }
+  };
+  let handleBlur;
+  if (meta.editMode.isEditing) {
+    handleBlur = event => {
+      var _elementGainingFocus, _elementGainingFocus$, _event$currentTarget;
+      let elementGainingFocus = event.relatedTarget;
+      if (elementGainingFocus === undefined) {
+        return;
+      }
+      // we might be focusing on a select or a popover that was triggered from inside the table
+      // so see if the element gaining focus is inside a portal and look up its controller
+      const portalId = (_elementGainingFocus = elementGainingFocus) === null || _elementGainingFocus === void 0 ? void 0 : (_elementGainingFocus$ = _elementGainingFocus.closest('[data-radix-popper-content-wrapper] > :first-child')) === null || _elementGainingFocus$ === void 0 ? void 0 : _elementGainingFocus$.id;
+      if (portalId) {
+        var _event$currentTarget$;
+        elementGainingFocus = (_event$currentTarget$ = event.currentTarget.querySelector(`[aria-controls="${portalId}"]`)) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : event.relatedTarget;
+      }
+      if (!((_event$currentTarget = event.currentTarget) !== null && _event$currentTarget !== void 0 && _event$currentTarget.contains(elementGainingFocus)) && elementGainingFocus !== editButtonRef.current) {
+        // When we call manually blur on control component while navigating to the next cell, then when this
+        // handler is run, the related target is not the next control component and active element is null,
+        // that's why we explictly need to check what's the next focussed element in order to figure out whether
+        // we should disabled the sorting or not.
+        timeoutIdRef.current = setTimeout(() => {
+          const parentRow = event.target.closest('[role="row"]');
+          const isNewFocussedElementInSameRow = parentRow === null || parentRow === void 0 ? void 0 : parentRow.contains(document.activeElement);
+          // When we manually call blur on control component and focus another component then
+          // we have to make sure we
+          if (meta.shouldPauseSortingAndFiltering && !isNewFocussedElementInSameRow) {
+            // if client side - unpause sorting
+            meta.setShouldPauseSortingAndFiltering(false);
+          }
+        });
+      }
+    };
+  }
+  // extract - infinite loading
+  // TODO: this can probably be extracted into a hook
+  // we only show the pinned shadow on display columns when scrolling is active
+  const [scrolled, setScrolled] = React__default.useState(false);
+  // extract - infinite loading
+  const loadingRef = React__default.useRef(false);
+  const handleScroll = function (event) {
+    try {
+      const _temp5 = function () {
+        if (event.currentTarget.scrollLeft > 0 && !scrolled) {
+          setScrolled(true);
+        } else {
+          const _temp4 = function () {
+            if (event.currentTarget.scrollLeft === 0 && scrolled) {
+              setScrolled(false);
+            } else {
+              const _temp3 = function () {
+                if (typeof loadMore === 'function') {
+                  const _temp2 = function () {
+                    if (event.currentTarget.scrollHeight - event.currentTarget.scrollTop - event.currentTarget.clientHeight < 600 && !loadingRef.current) {
+                      const _temp = _finallyRethrows(function () {
+                        const isAllRowsSelected = table.getIsAllRowsSelected();
+                        loadingRef.current = true;
+                        return Promise.resolve(loadMore()).then(function () {
+                          if (isAllRowsSelected) {
+                            table.toggleAllRowsSelected(true);
+                          }
+                        });
+                      }, function (_wasThrown, _result) {
+                        loadingRef.current = false;
+                        if (_wasThrown) throw _result;
+                        return _result;
+                      });
+                      if (_temp && _temp.then) return _temp.then(function () {});
+                    }
+                  }();
+                  if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                }
+              }();
+              if (_temp3 && _temp3.then) return _temp3.then(function () {});
+            }
+          }();
+          if (_temp4 && _temp4.then) return _temp4.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp5 && _temp5.then ? _temp5.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  let handleMouseLeave;
+  if (meta.hoveredRowIndex !== undefined) {
+    // sometimes the row's onMouseLeave doesn't trigger, this adds some extra redundancy
+    handleMouseLeave = () => meta.setHoveredRowIndex(undefined);
+  }
+  const className = cn('bg-white border border-grey-300 focus:yt-focus focus:border-blue-500 grid overflow-auto relative rounded group', props.className);
+  const enableSettingsButton = table.options.enablePinning || table.options.enableHiding || meta.enableColumnReordering;
+  const hasInternalToolbar = enableSettingsButton || meta.editMode.enableEditMode || table.options.enableColumnFilters || meta.enableRowDensity || table.options.enableGlobalFilter;
+  const hasToolbar = !!toolbar || hasInternalToolbar;
+  const hasFooters = React__default.useMemo(() => {
+    const summaryIds = Object.keys(footers);
+    const visibleIds = Object.keys(columnVisibility).filter(c => !columnVisibility[c]);
+    return summaryIds.length && summaryIds.some(v => !visibleIds.includes(v));
+  }, [footers, columnVisibility]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex h-full w-full flex-col gap-4"
+  }, hasToolbar ? /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-wrap gap-2"
+  }, toolbar, hasInternalToolbar ? /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto flex-shrink-0 print:hidden"
+  }, meta.editMode.enableEditMode ? /*#__PURE__*/React__default.createElement(EditModeButton, {
+    ref: editButtonRef,
+    table: table,
+    tableRef: tableRef
+  }) : null, table.options.enableColumnFilters ? /*#__PURE__*/React__default.createElement(FiltersButton, {
+    length: length,
+    table: table
+  }) : null, meta.enableRowDensity ? /*#__PURE__*/React__default.createElement(RowDensityButton, {
+    table: table
+  }) : null, enableSettingsButton ? /*#__PURE__*/React__default.createElement(ColumnSettingsButton, {
+    table: table
+  }) : null, table.options.enableGlobalFilter ? /*#__PURE__*/React__default.createElement(Search$2, {
+    disabled: meta.shouldDisableTableActions,
+    onSearch: table.setGlobalFilter,
+    placeholder: "Search...",
+    value: globalFilter
+  }) : null) : null, /*#__PURE__*/React__default.createElement(ShortcutsGuideButton, {
+    table: table
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onMouseLeave: handleMouseLeave,
+    onScroll: handleScroll,
+    ref: tableRef,
+    role: "table",
+    style: {
+      gridTemplateColumns,
+      gridTemplateRows: rows.length ? undefined : '40px',
+      // create a new stacking context so our internal z-indexes don't effect external components
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+      opacity: 0.999
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "contents",
+    role: "rowgroup"
+  }, table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React__default.createElement("div", {
+    className: "contents",
+    key: headerGroup.id,
+    role: "row"
+  }, headerGroup.headers.map((header, columnIndex) => /*#__PURE__*/React__default.createElement(Header$1, {
+    key: header.id,
+    header: header,
+    index: columnIndex,
+    isLastColumn: columnIndex === headerGroup.headers.length - 1,
+    scrolled: scrolled,
+    table: table,
+    tableRef: tableRef
+  }))))), rows.length ? /*#__PURE__*/React__default.createElement("div", {
+    className: "contents",
+    role: "rowgroup"
+  }, virtualiserOffsets.top ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: virtualiserOffsets.top
+    },
+    className: "col-span-full"
+  }) : null, virtualiser.virtualItems.map(virtualRow => {
+    const row = rows[virtualRow.index];
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: row.id
+    }, /*#__PURE__*/React__default.createElement(Row$1, {
+      className: "group/row contents",
+      row: row,
+      rowIndex: virtualRow.index,
+      table: table
+    }, row.getVisibleCells().map((cell, columnIndex) => /*#__PURE__*/React__default.createElement(Cell, {
+      cell: cell,
+      key: `${cell.id}_${cell.getValue()}`,
+      index: columnIndex,
+      isLastRow: virtualRow.index === rows.length - 1,
+      rows: rows,
+      rowIndex: virtualRow.index,
+      scrolled: scrolled,
+      scrollToIndex: virtualiser.scrollToIndex,
+      scrollToOffset: virtualiser.scrollToOffset,
+      table: table,
+      tableRef: tableRef
+    }))), row.getIsExpanded() && expandedRowRenderer ? /*#__PURE__*/React__default.createElement(ExpandedRow, {
+      index: virtualRow.index,
+      setSize: setExpandedRowSizes
+    }, expandedRowRenderer(row.original)) : null);
+  }), virtualiserOffsets.bottom ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      height: virtualiserOffsets.bottom
+    },
+    className: "col-span-full"
+  }) : null) : /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-full min-h-[theme(spacing.8)]"
+  }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null), hasFooters ? /*#__PURE__*/React__default.createElement("div", {
+    role: "rowgroup",
+    className: "contents"
+  }, table.getFooterGroups().map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
+    key: footerGroup.id,
+    role: "row",
+    className: "contents"
+  }, footerGroup.headers.map((footer, cellIndex) => /*#__PURE__*/React__default.createElement(Footer$2, {
+    key: footer.id,
+    footer: footer,
+    index: cellIndex,
+    scrolled: scrolled,
+    table: table
+  }, footers[footer.id] ? footers[footer.id](rows.map(row => row.original[footer.id])) : null))))) : null), !!_experimentalActionsForTable && table.options.enableRowSelection && (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected()) ? /*#__PURE__*/React__default.createElement(BatchActionsMenu, {
+    className: "fixed-center-x bottom-0 z-50 mb-4 print:hidden",
+    actionsForTable: _experimentalActionsForTable,
+    summary: _experimentalActionsForTableSummary,
+    table: table
+  }) : null);
+});
+Table2.Column = Column$2;
+Table2.Toolbar = Toolbar;
+
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+  const {
+    id,
+    defaultId,
+    children,
+    onChange,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+    'flex w-full': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "tabs",
+    defaultValue: defaultId,
+    dir: "ltr",
+    onValueChange: onChange,
+    orientation: orientation,
+    ref: ref,
+    value: id
+  }), children);
+});
+const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    disabled,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    ref: ref,
+    style: {
+      transition: 'border 0.2s ease-in'
+    },
+    value: id
+  }));
+});
+const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab__panel outline-none', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref,
+    value: id
+  }));
+});
+Tabs.List = TabList;
+Tabs.Trigger = TabTrigger;
+Tabs.Content = TabContent;
+
+const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
+  const {
+    defaultValue: _,
+    highlighted,
+    invalid,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
+  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+  // if it has scroll height then the browser reverts to native scrolling behaviour only
+  // so we manually override it to ensure _our_ desired behaviour remains intact
+  const handleKeyDown = event => {
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      event.currentTarget.setSelectionRange(position, position);
+      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
+    className: classNames,
+    "data-taco": "textarea",
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+
 const Tooltip$1 = ({
   continuous,
   index,
@@ -10615,10 +14011,12 @@ exports.RadioGroup = RadioGroup;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Select2 = Select2;
+exports.Shortcut = Shortcut$1;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.TAG_COLORS = TAG_COLORS;
 exports.Table = Table;
+exports.Table2 = Table2;
 exports.Tabs = Tabs;
 exports.Tag = Tag$1;
 exports.Textarea = Textarea;
@@ -10640,6 +14038,7 @@ exports.getParentRowIndexPath = getParentRowIndexPath;
 exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
 exports.icons = icons;
 exports.insertChildTableRow = insertChildTableRow;
+exports.isWeakEqual = isWeakEqual;
 exports.mergeRefs = mergeRefs;
 exports.parseFromCustomString = parseFromCustomString;
 exports.parseFromISOString = parseFromISOString;