@elliemae/ds-data-table 1.61.0 → 2.0.0-alpha.12

package/esm/styled-f76a0cd1.js

@@ -1,3396 +0,0 @@
-import styled from 'styled-components';
-import Grid, { Grid as Grid$2 } from '@elliemae/ds-grid';
-import { ArrowheadDown, ArrowheadRight, ArrowShortReturn, DatePicker2, SearchXsmall, GripperVertical, EditPencil } from '@elliemae/ds-icons';
-import { sizeToCss } from './helpers/sizeToCss.js';
-import { DATA_TESTID, momentFormat, ColsLayoutStyle } from './configs/constants.js';
-import { columnPadding, cellPadding } from './helpers/cellPadding.js';
-import React, { useMemo, useCallback, useRef, useState, useContext, useLayoutEffect, memo, useEffect, createContext, cloneElement } from 'react';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import 'react-virtual';
-import './configs/useRowFlattenization.js';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { DSCheckbox, DSRadio, ComboBoxFreeSolo, DSInputMask, MASK_TYPES } from '@elliemae/ds-form';
-import _extends from '@babel/runtime/helpers/esm/extends';
-import { connect } from 'react-redux';
-import DataTableContext from './DataTableContext.js';
-import { Pagination } from './addons/Pagination/Pagination.js';
-import DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';
-import '@elliemae/ds-circular-progress-indicator';
-import EmptyContent from './parts/EmptyContent.js';
-import PropTypes from 'prop-types';
-import { setMultipleRefs } from './helpers/refs-helpers.js';
-import { SortableItemContext, DropIndicatorPosition } from './parts/HoC/SortableItemContext.js';
-import { withDnDSortableRowContext } from './parts/HoC/withDnDSortableRowContext.js';
-import DSButton from '@elliemae/ds-button';
-import { DSPopperJS } from '@elliemae/ds-popperjs';
-import './redux/reducers/index.js';
-import Footer from './parts/Footer.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import { ROW_VARIANTS } from './exported-related/RowVariants.js';
-import { singleSelectFilterFn } from './exported-related/Filters/singleSelectFilterFn.js';
-import { multiSelectFilterFn } from './exported-related/Filters/multiSelectFilterFn.js';
-import { textFilterFn } from './exported-related/Filters/textFilterFn.js';
-import moment from 'moment';
-import { numberRangeFilterFn } from './exported-related/Filters/numberRangeFilterFn.js';
-import { currencyRangeFilterFn } from './exported-related/Filters/currencyRangeFilterFn.js';
-import { FILTER_TYPES } from './exported-related/FilterTypes.js';
-import './addons/Columns/ColumnAction/ColumnAction.js';
-import { useRecoverFocusRow } from './hooks/useRecoverFocusRow.js';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { editableCellPropType } from './prop-types.js';
-import { useCellStyle } from './parts/Cells/useCellStyle.js';
-import { useDispatchRowsActions } from './redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import { useRowRendererProperties } from './exported-related/RowRenderer/useRowRendererProperties.js';
-import DropIndicator from './parts/DropIndicator.js';
-import { withConditionalDnDRowContext, DnDTreeContext } from './parts/HoC/withConditionalDnDRowContext.js';
-import { addCellData } from './helpers/addCellData.js';
-import { KeyboardCode, getViewRect, closestCorners, LayoutMeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, DragOverlay } from '@dnd-kit/core';
-import { arrayMove, useSortable } from '@dnd-kit/sortable';
-import { DragOverlayContext } from './parts/HoC/DragOverlayContext.js';
-import { useHierarchyActionHandlers } from './helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import { useHierarchyAnnouncements } from './helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import { SortByCaret } from './parts/SortByCaret.js';
-import { DSControlledDateRangePicker, DSControlledCheckbox, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
-import { useDispatchHeadersActions } from './redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';
-import { Grid as Grid$1 } from '@elliemae/ds-grid/';
-import { DSComboBox } from '@elliemae/ds-form/ComboBox';
-import { columnsToGrid } from './helpers/columnsToGrid.js';
-import { useHeaderCellHandlers } from './parts/Headers/useHeaderCellHandlers.js';
-import { useHeaderCellConfig } from './parts/Headers/useHeaderCellConfig.js';
-import { useRecoverFocusCol } from './hooks/useRecoverFocusCol.js';
-import { RequiredDot } from './parts/Headers/RequiredDot.js';
-import { SortableHeaderCell } from './parts/SortableHeaderCell.js';
-import { EmptyChildrenGroup } from './parts/Headers/EmptyChildrenGroup.js';
-import { FIXED_SIZES } from './configs/fixedSizes.js';
-import Loader from './parts/Loader.js';
-import { ZIndexDataTable } from './configs/zIndexInternalConfig.js';
-
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var StyledSpan = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
-var expandRowColumn = {
-  // Build our expander column
-  id: 'expander',
-  // Make sure it has an ID
-  accessor: 'expandRowColumn',
-  Header: function Header(_ref) {
-    var ctx = _ref.ctx;
-    var _ctx$tableProps = ctx.tableProps,
-        expandedRows = _ctx$tableProps.expandedRows,
-        onRowExpand = _ctx$tableProps.onRowExpand,
-        allDataFlattened = ctx.allDataFlattened;
-    var allExpandable = useMemo(function () {
-      var expandable = {};
-      allDataFlattened.forEach(function (row) {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
-      });
-      return expandable;
-    }, [allDataFlattened]);
-    var isAllRowsExpanded = useMemo(function () {
-      return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
-    }, [allExpandable, expandedRows]);
-    var onExpandedAllHandler = useCallback(function () {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$c({}, allExpandable), 'All');
-    }, [allExpandable, isAllRowsExpanded, onRowExpand]);
-    var GlobalExpandIcon = useMemo(function () {
-      if (isAllRowsExpanded) return /*#__PURE__*/React.createElement(ArrowheadDown, {
-        size: "s",
-        color: ['brand-primary', '600'],
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      }); // Mixed
-
-      if (Object.keys(expandedRows).length) {
-        return /*#__PURE__*/React.createElement(ArrowheadRight, {
-          size: "s",
-          color: ['brand-primary', '600'],
-          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
-          style: {
-            transform: 'rotate(45deg)'
-          }
-        });
-      }
-
-      return /*#__PURE__*/React.createElement(ArrowheadRight, {
-        size: "s",
-        color: ['brand-primary', '600'],
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
-      });
-    }, [expandedRows, isAllRowsExpanded]);
-    return /*#__PURE__*/React.createElement(StyledFocusWithin, null, /*#__PURE__*/React.createElement(StyledSpan, {
-      role: "button",
-      tabIndex: 0,
-      title: "Toggle All Rows Expanded",
-      onClick: onExpandedAllHandler,
-      onKeyDown: function onKeyDown(e) {
-        if (['Enter', 'Space'].includes(e.code)) {
-          onExpandedAllHandler();
-          e.preventDefault();
-        }
-      },
-      "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
-      "aria-expanded": isAllRowsExpanded,
-      style: {
-        width: '24px',
-        height: '24px'
-      }
-    }, GlobalExpandIcon));
-  },
-  Cell: function Cell(_ref2) {
-    var _row$original$subRows;
-
-    var cell = _ref2.cell,
-        row = _ref2.row,
-        isRowSelected = _ref2.isRowSelected,
-        ctx = _ref2.ctx,
-        draggableProps = _ref2.draggableProps;
-    var _ctx$tableProps2 = ctx.tableProps,
-        dragAndDropRows = _ctx$tableProps2.dragAndDropRows,
-        expandedRows = _ctx$tableProps2.expandedRows,
-        onRowExpand = _ctx$tableProps2.onRowExpand;
-    var uniqueId = row.uid;
-    var isExpanded = expandedRows[uniqueId];
-    var shouldPrintCaret = ((_row$original$subRows = row.original.subRows) === null || _row$original$subRows === void 0 ? void 0 : _row$original$subRows.length) && row.depth === 0 || // only allows 1 level of expands
-    row.original.tableRowDetails || row.original.dimsumHeaderValue;
-    var onRowExpandHandler = useCallback(function (e) {
-      e.stopPropagation();
-
-      if (expandedRows[uniqueId]) {
-        delete expandedRows[uniqueId];
-      } else {
-        expandedRows[uniqueId] = true;
-      }
-
-      onRowExpand(_objectSpread$c({}, expandedRows), uniqueId);
-    }, [expandedRows, uniqueId, onRowExpand]);
-    var isDragging = draggableProps ? draggableProps.isDragging : false;
-    var isDragOverlay = dragAndDropRows && !draggableProps;
-    var indentStyle = useMemo(function () {
-      return {
-        marginLeft: "".concat(row.depth * 32, "px"),
-        marginRight: '18px',
-        paddingLeft: '2px',
-        paddingRight: '2px',
-        position: 'relative',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center'
-      };
-    }, [row.depth]);
-    var rowProps = useMemo(function () {
-      return {
-        role: 'button',
-        key: "".concat(row.uid, "-expand-button"),
-        title: 'Toggle Row Expanded',
-        onClick: onRowExpandHandler,
-        onKeyDown: function onKeyDown(e) {
-          if (['Enter', 'Space'].includes(e.code)) {
-            e.preventDefault();
-            onRowExpandHandler(e);
-          }
-        },
-        ref: cell.ref,
-        tabIndex: isRowSelected ? 0 : -1,
-        'data-testid': 'data-table-row-expand-cell',
-        'aria-expanded': isExpanded,
-        isRightArrow: !isExpanded || isDragging || isDragOverlay
-      };
-    }, [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
-    var PureCaretIcon = useMemo(function () {
-      return isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/React.createElement(ArrowheadDown, {
-        "data-is-col-expanded": isExpanded,
-        "data-role": "row-expander-col",
-        size: "s",
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      }) : /*#__PURE__*/React.createElement(ArrowheadRight, {
-        "data-is-col-expanded": isExpanded,
-        "data-role": "row-expander-col",
-        size: "s",
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
-      });
-    }, [isExpanded, isDragging, isDragOverlay]);
-    var ChildIcon = useMemo(function () {
-      return /*#__PURE__*/React.createElement(ArrowShortReturn, {
-        size: "s",
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_CHILD,
-        style: {
-          transform: 'rotate(90deg) scaleY(-1)'
-        },
-        color: ['brand-primary', '600']
-      });
-    }, []);
-    if (shouldPrintCaret) return /*#__PURE__*/React.createElement(StyledFocusWithin, {
-      style: indentStyle
-    }, /*#__PURE__*/React.createElement(StyledSpan, rowProps, PureCaretIcon));
-    if (row.depth !== 0) return /*#__PURE__*/React.createElement("span", {
-      style: indentStyle
-    }, ChildIcon);
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '36px'
-      }
-    });
-  },
-  textWrap: 'wrap',
-  canResize: false,
-  width: 25,
-  padding: 0,
-  isFocuseable: false,
-  disableDnD: true
-};
-
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var multiSelectColumn = {
-  // Build our multiSelecter column
-  id: 'multiSelecter',
-  // Make sure it has an ID
-  Header: function Header(_ref) {
-    var ctx = _ref.ctx;
-    var _ctx$tableProps = ctx.tableProps,
-        onSelectionChange = _ctx$tableProps.onSelectionChange,
-        selection = _ctx$tableProps.selection,
-        data = _ctx$tableProps.data,
-        disabledRows = _ctx$tableProps.disabledRows,
-        allDataFlattened = ctx.allDataFlattened;
-    var selectionKeyCount = Object.keys(selection).length;
-    var currentGlobalState = useMemo(function () {
-      return selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0;
-    }, [selectionKeyCount, data]);
-    var newGlobalStateAfterToggle = useMemo(function () {
-      // false -- toggles into --> true
-      // mixed  -- toggles into --> true
-      // true  -- toggles into --> false
-      var newState = false;
-      if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;
-      return newState;
-    }, [currentGlobalState]);
-    var newSelection = useMemo(function () {
-      if (newGlobalStateAfterToggle) {
-        var nextSelection = {};
-        allDataFlattened.forEach(function (datum) {
-          nextSelection[datum.uid] = !disabledRows[datum.uid];
-        });
-        return nextSelection;
-      }
-
-      return {};
-    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    var onChangeHandler = useCallback(function (e) {
-      onSelectionChange(newSelection, 'All', e);
-    }, [newSelection, onSelectionChange]);
-    var PureHeaderCheckbox = useMemo(function () {
-      return /*#__PURE__*/React.createElement(DSCheckbox, {
-        "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
-        title: "Toggle All Rows Selected",
-        checked: currentGlobalState,
-        onChange: onChangeHandler,
-        tabIndex: "0",
-        style: {
-          cursor: 'pointer'
-        }
-      });
-    }, [currentGlobalState, onChangeHandler]);
-    return PureHeaderCheckbox;
-  },
-  Cell: function Cell(_ref2) {
-    var cell = _ref2.cell,
-        row = _ref2.row,
-        isRowSelected = _ref2.isRowSelected,
-        ctx = _ref2.ctx;
-    var _ctx$tableProps2 = ctx.tableProps,
-        onSelectionChange = _ctx$tableProps2.onSelectionChange,
-        selection = _ctx$tableProps2.selection,
-        disabledRows = _ctx$tableProps2.disabledRows;
-    var uid = row.uid;
-    var selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    var PureCheckboxCell = useMemo(function () {
-      return /*#__PURE__*/React.createElement(DSCheckbox, {
-        "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
-        title: "Toggle Row Selected",
-        "aria-checked": selectedState,
-        "aria-disabled": false,
-        checked: selectedState,
-        onChange: function onChange(e) {
-          var newState = !selectedState;
-
-          var newSelection = _objectSpread$b(_objectSpread$b({}, selection), {}, _defineProperty({}, uid, newState)); // we only want true and mixed values
-
-
-          if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
-
-          onSelectionChange(newSelection, uid, e);
-        },
-        disabled: disabledRows[row.uid],
-        innerRef: cell.ref,
-        tabIndex: isRowSelected ? 0 : -1,
-        style: {
-          cursor: 'pointer'
-        }
-      });
-    }, [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
-    return PureCheckboxCell;
-  },
-  textWrap: 'wrap',
-  width: 32,
-  padding: 7,
-  canResize: false,
-  isFocuseable: false,
-  disableDnD: true
-};
-
-var CenteredContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1u47u8g-0"
-})(["display:flex;height:100%;width:100%;justify-content:center;align-items:center;"]);
-var StyledDSRadio = /*#__PURE__*/styled(DSRadio).withConfig({
-  componentId: "sc-1u47u8g-1"
-})(["padding-bottom:0;cursor:pointer;"]);
-var singleSelectColumn = {
-  // Build our singleSelecter column
-  id: 'singleSelecter',
-  // Make sure it has an ID
-  // The header doesn't need anything for single selection
-  Header: function Header() {
-    return /*#__PURE__*/React.createElement("div", null);
-  },
-  Cell: function Cell(_ref) {
-    var cell = _ref.cell,
-        row = _ref.row,
-        isRowSelected = _ref.isRowSelected,
-        ctx = _ref.ctx;
-    var _ctx$tableProps = ctx.tableProps,
-        onSelectionChange = _ctx$tableProps.onSelectionChange,
-        selection = _ctx$tableProps.selection,
-        disabledRows = _ctx$tableProps.disabledRows;
-    var uid = row.uid;
-    var selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    var PureCheckBox = useMemo(function () {
-      return /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(StyledDSRadio // eslint-disable-next-line react/prop-types
-      , {
-        containerProps: {
-          'aria-checked': selectedState,
-          'aria-disabled': false,
-          title: 'Toggle Row Selected'
-        },
-        checked: selectedState,
-        onChange: function onChange() {
-          // in single select we only allow one item to be selected
-          onSelectionChange(!selectedState ? _defineProperty({}, uid, !selectedState) : {});
-        },
-        "data-testid": DATA_TESTID.DATA_TABLE_RADIO,
-        disabled: disabledRows[row.uid],
-        innerRef: cell.ref,
-        value: "",
-        tabIndex: isRowSelected ? 0 : -1
-      }));
-    }, [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid]);
-    return PureCheckBox;
-  },
-  textWrap: 'wrap',
-  width: 32,
-  padding: 4,
-  canResize: false,
-  isFocuseable: false,
-  disableDnD: true
-};
-
-var StyledRowLoadingContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1jmutz9-0"
-})(["position:absolute;bottom:-40px;left:0;width:100%;place-items:center;background-color:white;"]);
-
-var RowLoading = function RowLoading() {
-  var PureLoading = useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledRowLoadingContainer, {
-      role: "row",
-      "data-testid": DATA_TESTID.DATA_TABLE_ROW
-    }, /*#__PURE__*/React.createElement(DSIndeterminateProgressIndicator, {
-      processing: true,
-      title: "Loading"
-    }));
-  }, []);
-  return PureLoading;
-};
-
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var FilterButton = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-16i88ut-0"
-})(["display:inline-grid;", ""], function (props) {
-  return props.hide ? 'opacity: 0; display: none; width: 0;' : '';
-});
-var Button = /*#__PURE__*/styled(DSButton).withConfig({
-  componentId: "sc-16i88ut-1"
-})(["position:relative;justify-self:flex-end;"]);
-var FilterPopover = function FilterPopover(_ref2) {
-  var _column$ref$current$o, _column$ref, _column$ref$current;
-
-  var column = _ref2.column,
-      columnId = _ref2.columnId,
-      triggerIcon = _ref2.triggerIcon,
-      menuContent = _ref2.menuContent,
-      _ref2$onTriggerClick = _ref2.onTriggerClick,
-      onTriggerClick = _ref2$onTriggerClick === void 0 ? function () {
-    return null;
-  } : _ref2$onTriggerClick,
-      _ref2$onClickOutsideM = _ref2.onClickOutsideMenu,
-      onClickOutsideMenu = _ref2$onClickOutsideM === void 0 ? function () {
-    return null;
-  } : _ref2$onClickOutsideM,
-      reduxHeader = _ref2.reduxHeader,
-      _innerRef = _ref2.innerRef,
-      ariaLabel = _ref2.ariaLabel,
-      customStyles = _ref2.customStyles;
-
-  var _ref3 = reduxHeader || {
-    hideFilterButton: true,
-    hideFilterMenu: true
-  },
-      hideFilterButton = _ref3.hideFilterButton,
-      hideFilterMenu = _ref3.hideFilterMenu;
-
-  var popperRef = useRef(null);
-
-  var _useDispatchHeadersAc = useDispatchHeadersActions(),
-      patchHeaderFilterButtonAndMenu = _useDispatchHeadersAc.patchHeaderFilterButtonAndMenu,
-      patchHeader = _useDispatchHeadersAc.patchHeader;
-
-  var isIconVisible = !hideFilterButton || !hideFilterMenu;
-  var isMenuOpen = !hideFilterMenu;
-
-  var handleClickOutsideMenu = function handleClickOutsideMenu(e) {
-    onClickOutsideMenu(columnId, e);
-    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
-  };
-
-  var handleTriggerClick = function handleTriggerClick(e) {
-    onTriggerClick(columnId, e);
-    patchHeaderFilterButtonAndMenu(columnId, false);
-    e.stopPropagation();
-  };
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      referenceElement = _useState2[0],
-      setReferenceElement = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    // This is here to prevent propagation, and not trigger the sort functionality
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    onKeyDown: function onKeyDown(e) {
-      e.stopPropagation();
-
-      if (e.code === 'Escape') {
-        patchHeader(columnId, {
-          hideFilterMenu: true,
-          hideFilterButton: false
-        });
-        referenceElement.focus();
-      } // Stop propagation for some reason is not enough to prevent scrolling of the datatable
-      // so we just prevent default behaviour in this case
-
-
-      if (['ArrowUp', 'ArrowDown'].includes(e.code)) {
-        e.preventDefault();
-      }
-    },
-    style: {
-      display: 'flex'
-    },
-    onBlur: function onBlur(e) {
-      if (e.target !== referenceElement && !popperRef.current.contains(e.relatedTarget)) {
-        referenceElement.focus();
-      }
-    }
-  }, /*#__PURE__*/React.createElement(FilterButton, {
-    hide: !isIconVisible,
-    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_BUTTON
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: handleTriggerClick,
-    buttonType: "text",
-    "aria-label": ariaLabel,
-    "aria-hidden": "true",
-    size: "s",
-    leftIcon: triggerIcon // implement treeview mergerefs
-    ,
-    innerRef: function innerRef(_ref) {
-      if (isIconVisible) setReferenceElement(_ref);
-      _innerRef.current = _ref;
-    },
-    tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/React.createElement(DSPopperJS, {
-    referenceElement: referenceElement,
-    showPopover: isMenuOpen,
-    closeContextMenu: handleClickOutsideMenu,
-    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
-    startPlacementPreference: "bottom-end",
-    customOffset: [5, 4],
-    withoutArrow: true,
-    zIndex: 10,
-    withoutAnimation: true,
-    extraPopperStyles: _objectSpread$a(_objectSpread$a({}, customStyles), {}, {
-      minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
-    }),
-    placementOrderPreference: ['bottom-end']
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: '#fff'
-    },
-    ref: popperRef
-  }, menuContent)));
-};
-
-var EditableCell = function EditableCell(props) {
-  var StandardRender = props.StandardRender,
-      EditableRenderer = props.EditableRenderer,
-      cell = props.cell,
-      isRowSelected = props.isRowSelected;
-
-  var _useContext = useContext(DataTableContext),
-      virtualListHelpers = _useContext.virtualListHelpers;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isEditing = _useState2[0],
-      setIsEditing = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      lastIsEditing = _useState4[0],
-      setLastIsEditing = _useState4[1]; // When an editable cell is switched on-off, we recalculate the height of the rows
-
-
-  useLayoutEffect(function () {
-    if (isEditing !== lastIsEditing) {
-      virtualListHelpers.measure();
-      setLastIsEditing(isEditing);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isEditing]);
-  var handleCellClick = useCallback(function (e) {
-    if (!isEditing) {
-      e.stopPropagation();
-      setIsEditing(true);
-    }
-  }, [isEditing]);
-  var handleOnKeyDown = useCallback(function (e) {
-    if (isEditing) e.stopPropagation();
-
-    if (['Enter', 'Space'].includes(e.code)) {
-      handleCellClick(e);
-    }
-  }, [isEditing, handleCellClick]);
-  var handleOnBlur = useCallback(function (event) {
-    if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
-      // Not triggered when swapping focus between children
-      setIsEditing(false);
-    }
-  }, [isEditing]);
-  return /*#__PURE__*/React.createElement(StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
-    tabIndex: isRowSelected && !isEditing ? 0 : -1,
-    ref: cell.ref,
-    onClick: handleCellClick,
-    onKeyDown: handleOnKeyDown,
-    onBlur: handleOnBlur,
-    shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
-    role: "cell",
-    "aria-describedby": isEditing ? undefined : cell.id
-  }, !isEditing ? StandardRender : EditableRenderer, !isEditing && /*#__PURE__*/React.createElement(StyledPencilIcon, null), /*#__PURE__*/React.createElement("span", {
-    id: cell.id,
-    style: {
-      display: 'none'
-    },
-    "aria-hidden": "true"
-  }, "Editable cell. To edit the content's of this cell, press the Enter key"));
-};
-EditableCell.propTypes = {
-  StandardRender: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  EditableRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-  cell: PropTypes.object.isRequired
-};
-
-// use file instead of index to avoid circular imports!
-
-var singleDateFilterFn = function singleDateFilterFn(unfilteredData, filterKey, filterValue) {
-  return unfilteredData.filter(function (datum) {
-    return moment(filterValue, momentFormat).isSame(datum[filterKey], 'day');
-  });
-};
-
-// use file instead of index to avoid circular imports!
-
-var dateRangeFilterFn = function dateRangeFilterFn(unfilteredData, filterKey, filterValue) {
-  return unfilteredData.filter(function (datum) {
-    return !(filterValue !== null && filterValue !== void 0 && filterValue.startDate && filterValue !== null && filterValue !== void 0 && filterValue.endDate) || moment(filterValue === null || filterValue === void 0 ? void 0 : filterValue.startDate, momentFormat).isSameOrBefore(datum[filterKey], 'day') && moment(filterValue === null || filterValue === void 0 ? void 0 : filterValue.endDate, momentFormat).isSameOrAfter(datum[filterKey], 'day');
-  });
-};
-
-// use file instead of index to avoid circular imports!
-
-var dateSwitcherFilterFn = function dateSwitcherFilterFn(unfilteredData, filterKey, filterValue) {
-  return filterValue.isDateRange ? dateRangeFilterFn(unfilteredData, filterKey, filterValue) : singleDateFilterFn(unfilteredData, filterKey, filterValue.startDate);
-};
-
-var _filterMapper;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var filterMapper = (_filterMapper = {}, _defineProperty(_filterMapper, FILTER_TYPES.SELECT, singleSelectFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.MULTI_SELECT, multiSelectFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.TEXT, textFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.SINGLE_DATE, singleDateFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.DATE_RANGE, dateRangeFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.DATE_SWITCHER, dateSwitcherFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.NUMBER_RANGE, numberRangeFilterFn), _defineProperty(_filterMapper, FILTER_TYPES.CURRENCY_RANGE, currencyRangeFilterFn), _filterMapper);
-var applyOutOfTheBoxFilters = function applyOutOfTheBoxFilters(data, filters) {
-  var filteredData = data;
-  filters.forEach(function (filter) {
-    if (filter.type in filterMapper) {
-      filteredData = filterMapper[filter.type](filteredData, filter.id, filter.value);
-    }
-  });
-  return filteredData;
-};
-
-var StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-15pvvoa-0"
-})(["outline:none;:focus{border:2px solid ", ";}max-width:100%;"], function (props) {
-  return props.theme.colors.brand[700];
-});
-var TextEditableCell = function TextEditableCell(props) {
-  var cell = props.cell,
-      DefaultCellRender = props.DefaultCellRender,
-      isRowSelected = props.isRowSelected;
-
-  var _useContext = useContext(DataTableContext),
-      onCellValueChange = _useContext.tableProps.onCellValueChange;
-
-  var _useState = useState(cell.value),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var handleOnChange = useCallback(function (e) {
-    var tValue = e.target.value;
-    setValue(tValue);
-  }, []);
-  var handleOnBlur = useCallback(function () {
-    var property = cell.column.id;
-    var rowIndex = cell.row.index;
-    onCellValueChange({
-      value: value,
-      property: property,
-      rowIndex: rowIndex
-    });
-  }, [value, onCellValueChange, cell.column.id, cell.row.index]);
-  return /*#__PURE__*/React.createElement(EditableCell, {
-    StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/React.createElement(StyledInput, {
-      value: value,
-      onChange: handleOnChange,
-      onBlur: handleOnBlur,
-      autoFocus: true
-    }),
-    cell: cell,
-    isRowSelected: isRowSelected
-  });
-};
-TextEditableCell.propTypes = editableCellPropType;
-
-var ComboboxEditableCell = function ComboboxEditableCell(props) {
-  var cell = props.cell,
-      DefaultCellRender = props.DefaultCellRender,
-      isRowSelected = props.isRowSelected;
-
-  var _useContext = useContext(DataTableContext),
-      onCellValueChange = _useContext.tableProps.onCellValueChange,
-      flattenedData = _useContext.flattenedData;
-
-  var cellValue = useMemo(function () {
-    return cell.value;
-  }, [cell.value]);
-  var columnId = useMemo(function () {
-    return cell.column.id;
-  }, [cell.column.id]);
-
-  var _useState = useState({
-    value: cellValue,
-    label: cellValue
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  var uniqueOptions = useMemo(function () {
-    var uniqueValuesMap = {};
-    return flattenedData.reduce(function (optionsSoFar, currRow) {
-      var currValue = currRow.original[columnId];
-
-      if (!uniqueValuesMap[currValue]) {
-        optionsSoFar.push({
-          value: currValue,
-          label: currValue
-        });
-        uniqueValuesMap[currValue] = true;
-      }
-
-      return optionsSoFar;
-    }, []);
-  }, [flattenedData, columnId]);
-  var handleOnBlur = useCallback(function () {
-    var property = columnId;
-    onCellValueChange({
-      value: value === null || value === void 0 ? void 0 : value.value,
-      property: property,
-      rowIndex: cell.row.index
-    });
-  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
-  return /*#__PURE__*/React.createElement(EditableCell, {
-    StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/React.createElement(ComboBoxFreeSolo, {
-      value: value,
-      autoFocus: true,
-      onBlur: handleOnBlur,
-      onChange: setValue,
-      options: uniqueOptions
-    }),
-    cell: cell,
-    isRowSelected: isRowSelected
-  });
-};
-ComboboxEditableCell.propTypes = editableCellPropType;
-
-var outOfTheBoxEditables = {
-  'ds-edit-text': {
-    EditableComponent: TextEditableCell
-  },
-  'ds-edit-combobox': {
-    EditableComponent: ComboboxEditableCell
-  }
-};
-
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var PureStandardCell = /*#__PURE__*/memo(function (_ref) {
-  var cellStyle = _ref.cellStyle,
-      children = _ref.children,
-      column = _ref.column;
-  return /*#__PURE__*/React.createElement(StyledCell, {
-    column: column,
-    style: cellStyle,
-    role: "cell",
-    "data-testid": DATA_TESTID.DATA_TABLE_CELL
-  }, children);
-});
-
-var Cell = function Cell(_ref2) {
-  var cell = _ref2.cell,
-      column = _ref2.column,
-      row = _ref2.row,
-      isRowSelected = _ref2.isRowSelected,
-      shouldAddExpandCell = _ref2.shouldAddExpandCell,
-      isDragOverlay = _ref2.isDragOverlay;
-  var ctx = useContext(DataTableContext);
-  var cellRendererProps = ctx.tableProps.cellRendererProps;
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var _useCellStyle = useCellStyle(column, shouldAddExpandCell),
-      _useCellStyle2 = _slicedToArray(_useCellStyle, 2),
-      appliedTextWrap = _useCellStyle2[0],
-      cellStyle = _useCellStyle2[1];
-
-  var cellProps = useMemo(function () {
-    return _objectSpread$9(_objectSpread$9({}, cellRendererProps), {}, {
-      cell: cell,
-      row: row,
-      isRowSelected: isRowSelected,
-      ctx: ctx,
-      draggableProps: draggableProps,
-      isDragOverlay: isDragOverlay,
-      role: 'cell',
-      cellStyle: cellStyle,
-      column: column
-    });
-  }, [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]);
-  var CellComponent = cell.render;
-  var pureCellContent = useMemo(function () {
-    if (shouldAddExpandCell) {
-      return /*#__PURE__*/React.createElement(Grid, {
-        cols: ['min-content', 'auto'],
-        alignItems: "center",
-        height: "100%"
-      }, shouldAddExpandCell && /*#__PURE__*/React.createElement(expandRowColumn.Cell, cellProps), /*#__PURE__*/React.createElement(CellComponent, cellProps));
-    }
-
-    return /*#__PURE__*/React.createElement(CellComponent, cellProps);
-  }, [CellComponent, cellProps, shouldAddExpandCell]);
-  var DefaultCellContentJSX = useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledCellContent, null, appliedTextWrap === 'truncate' ? /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
-      value: pureCellContent
-    }) : pureCellContent);
-  }, [appliedTextWrap, pureCellContent]);
-  var EditableContentJSX = useMemo(function () {
-    if (typeof column.editable === 'string') {
-      var _outOfTheBoxEditables = outOfTheBoxEditables === null || outOfTheBoxEditables === void 0 ? void 0 : outOfTheBoxEditables[column.editable],
-          EditableComponent = _outOfTheBoxEditables.EditableComponent;
-
-      if (EditableComponent) return /*#__PURE__*/React.createElement(EditableComponent, _extends({}, cellProps, {
-        DefaultCellRender: DefaultCellContentJSX
-      }));
-    }
-
-    if (typeof column.editable === 'function') return column.editable(_objectSpread$9({
-      DefaultCellRender: DefaultCellContentJSX
-    }, cellProps));
-    return null;
-  }, [DefaultCellContentJSX, cellProps, column]);
-  return /*#__PURE__*/React.createElement(PureStandardCell, cellProps, column.editable ? EditableContentJSX : DefaultCellContentJSX);
-};
-
-/* eslint-disable react/prop-types */
-
-var Cells = function Cells(props) {
-  var row = props.row,
-      isRowSelected = props.isRowSelected,
-      isDragOverlay = props.isDragOverlay;
-  var ctx = useContext(DataTableContext); // we won't print sub-rows more nested than the first level
-
-  if (row.depth <= 1) {
-    var shouldAddExpandCell = false;
-    var userCellsProcessed = 0;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, row.cells.map(function (cell) {
-      var column = cell.column;
-      var isUserCell = !INTERNAL_COLUMNS.includes(column.id);
-      var jsx = null;
-
-      if (column.id === 'rowActions') {
-        var ActionComponent = cell.render;
-        jsx = /*#__PURE__*/React.createElement(StyledActionCell, {
-          role: "cell",
-          key: cell.id
-        }, /*#__PURE__*/React.createElement(ActionComponent, {
-          row: row,
-          cell: cell,
-          column: column,
-          isRowSelected: isRowSelected,
-          ctx: ctx
-        }));
-      } else if (column.id === 'expander') {
-        // Next user's cell will have the expand cell
-        shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay
-      } else {
-        jsx = /*#__PURE__*/React.createElement(Cell, {
-          cell: cell,
-          column: column,
-          row: row,
-          isRowSelected: isRowSelected,
-          shouldAddExpandCell: isUserCell && shouldAddExpandCell,
-          isDragOverlay: isDragOverlay,
-          key: cell.id
-        });
-      } // Drag overlay only need to print the DnD handle and the first user's cell
-
-
-      if (isDragOverlay) {
-        if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;
-      } // Reset expand cell
-
-
-      if (isUserCell) {
-        shouldAddExpandCell = false;
-        userCellsProcessed += 1;
-      }
-
-      return jsx;
-    }));
-  }
-
-  return null;
-};
-
-var DetailsWrapper = function DetailsWrapper(props) {
-  return (
-    /*#__PURE__*/
-    // This can be further customized
-    // eslint-disable-next-line react/prop-types
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React.createElement("div", {
-      "data-role": "detail-view",
-      style: {
-        borderTop: '1px solid #EBEDF0',
-        borderBottom: '1px solid #EBEDF0'
-      },
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      },
-      onKeyDown: function onKeyDown(e) {
-        return e.stopPropagation();
-      }
-    }, props.children)
-  );
-};
-
-var ariaLabelMessage = function ariaLabelMessage(row, selected) {
-  return "Row number ".concat(row.realIndex + 1).concat(row.parentIndex !== null ? ", child of row number ".concat(row.parentIndex + 1) : '', ". ").concat(selected ? 'Selected. ' : '', "To interact with the cells press enter");
-};
-
-var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
-  var row = props.row,
-      _props$ctx = props.ctx,
-      _props$ctx$tableProps = _props$ctx.tableProps,
-      isExpandable = _props$ctx$tableProps.isExpandable,
-      colsLayoutStyle = _props$ctx$tableProps.colsLayoutStyle,
-      selection = _props$ctx$tableProps.selection,
-      noSelectionColumn = _props$ctx$tableProps.noSelectionColumn,
-      expandedRows = _props$ctx$tableProps.expandedRows,
-      disabledRows = _props$ctx$tableProps.disabledRows,
-      gridLayout = _props$ctx.layoutHelpers.gridLayout,
-      visibleColumns = _props$ctx.visibleColumns,
-      draggableProps = props.draggableProps,
-      isDragOverlay = props.isDragOverlay,
-      _props$backgroundColo = props.backgroundColor,
-      backgroundColor = _props$backgroundColo === void 0 ? 'white' : _props$backgroundColo,
-      dropIndicatorPosition = props.dropIndicatorPosition,
-      focusedRowId = props.focusedRowId,
-      selectedRowId = props.selectedRowId,
-      compact = props.compact;
-  var rowRef = useRef(null);
-  var isDndActive = draggableProps && draggableProps.active;
-  var isDragging = draggableProps && draggableProps.isDragging;
-  useLayoutEffect(function () {
-    if (row.uid === focusedRowId) {
-      rowRef.current.focus({
-        preventScroll: true
-      });
-    }
-  }, [focusedRowId, row.uid]);
-  var gridTemplateColProps = useMemo(function () {
-    return {
-      cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,
-      isExpandable: isExpandable,
-      colLayoutStyle: colsLayoutStyle
-    };
-  }, [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable]);
-  var detailsIndent = useMemo(function () {
-    var padding = 0;
-
-    for (var i = 0; i < visibleColumns.length; i += 1) {
-      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {
-        padding += visibleColumns[i].width;
-      } else {
-        padding += row.depth * 32 + 15;
-        break;
-      }
-    }
-
-    return padding;
-  }, [row.depth, visibleColumns]);
-  var PureRowContent = useMemo(function () {
-    var DetailsView = row.original.tableRowDetails;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCellContainer, _extends({
-      ref: rowRef,
-      key: row.uid,
-      tabIndex: 0,
-      role: "row",
-      "aria-rowindex": row.realIndex + 1,
-      "aria-label": ariaLabelMessage(row, (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true),
-      "aria-level": row.depth + 1,
-      "aria-selected": (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
-      "aria-expanded": isExpandable ? expandedRows[row.uid] === true : undefined,
-      "aria-disabled": disabledRows[row.uid]
-    }, gridTemplateColProps, {
-      backgroundColor: backgroundColor,
-      height: compact ? '24px' : 'auto',
-      minHeight: compact ? '24px' : '36px',
-      isDropIndicatorPositionInside: dropIndicatorPosition === DropIndicatorPosition.Inside,
-      shouldDisplayHover: !isDndActive && !isDragging && !isDragOverlay,
-      isDragOverlay: isDragOverlay,
-      isDragging: isDragging,
-      selected: noSelectionColumn && (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
-      disabled: disabledRows[row.uid],
-      "data-testid": DATA_TESTID.DATA_TABLE_ROW_CONTENT
-    }), /*#__PURE__*/React.createElement(Cells, {
-      row: row,
-      isRowSelected: selectedRowId === row.uid,
-      isDragOverlay: isDragOverlay,
-      key: row.uid
-    })), isExpandable && row.isExpanded && DetailsView && /*#__PURE__*/React.createElement(DetailsWrapper, null, /*#__PURE__*/React.createElement(DetailsView, {
-      row: row,
-      detailsIndent: detailsIndent
-    })));
-  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
-  return PureRowContent;
-};
-
-var useRowRendererHandlers = function useRowRendererHandlers(_ref) {
-  var row = _ref.row,
-      itemIndex = _ref.itemIndex,
-      items = _ref.items,
-      draggableProps = _ref.draggableProps,
-      isDragOverlay = _ref.isDragOverlay,
-      selectedRowId = _ref.selectedRowId;
-
-  var _useContext = useContext(DataTableContext),
-      _useContext$tableProp = _useContext.tableProps,
-      onRowClick = _useContext$tableProp.onRowClick,
-      onRowFocus = _useContext$tableProp.onRowFocus,
-      scrollToIndex = _useContext.virtualListHelpers.scrollToIndex;
-
-  var _useDispatchRowsActio = useDispatchRowsActions(),
-      setSelectedRowId = _useDispatchRowsActio.setSelectedRowId,
-      setFocusedRowId = _useDispatchRowsActio.setFocusedRowId;
-
-  var handleItemClick = useCallback(function (e) {
-    var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : row,
-        original = _ref2.original,
-        uid = _ref2.uid;
-
-    // setSelectedRowId(null);
-    onRowClick(original, e, uid);
-    onRowFocus({
-      itemIndex: itemIndex,
-      scrollToItem: function scrollToItem() {
-        var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          align: 'start'
-        };
-        return scrollToIndex(itemIndex, opts);
-      },
-      original: original
-    }, e);
-  }, [row, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
-  var isActive = draggableProps && draggableProps.active;
-  var handleKeyDown = useCallback(function (e) {
-    if (isDragOverlay || isActive) {
-      e.preventDefault();
-      return;
-    }
-
-    if (e.code === 'Enter') {
-      e.preventDefault();
-
-      if (selectedRowId !== row.uid) {
-        setSelectedRowId(row.uid);
-        setTimeout(function () {
-          var focuseableCell = row.cells.find(function (cell) {
-            return cell.ref.current !== null;
-          });
-          if (focuseableCell) focuseableCell.ref.current.focus();
-        });
-      }
-    }
-
-    if (e.code === 'Space') {
-      e.preventDefault();
-      handleItemClick(e, row);
-    }
-
-    if (e.code === 'ArrowDown') {
-      e.preventDefault();
-      if (itemIndex + 1 < items.length) setFocusedRowId(items[itemIndex + 1].uid);
-    }
-
-    if (e.code === 'ArrowUp') {
-      e.preventDefault();
-      if (itemIndex - 1 >= 0) setFocusedRowId(items[itemIndex - 1].uid);
-    }
-  }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, itemIndex, items, setFocusedRowId]);
-  var handleOnBlur = useCallback(function (e) {
-    var _e$relatedTarget;
-
-    if (((_e$relatedTarget = e.relatedTarget) === null || _e$relatedTarget === void 0 ? void 0 : _e$relatedTarget.getAttribute('data-testid')) === 'data-table-row-content') {
-      setSelectedRowId(null);
-    }
-  }, [setSelectedRowId]);
-  var handleOnFocus = useCallback(function (e) {
-    if (e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
-      setFocusedRowId(row.uid);
-    }
-  }, [row.uid, setFocusedRowId]);
-  return {
-    handleItemClick: handleItemClick,
-    handleKeyDown: handleKeyDown,
-    handleOnBlur: handleOnBlur,
-    handleOnFocus: handleOnFocus
-  };
-};
-
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// CSS don't let us modify the spacing between the dots, so one solution is to use SVG
-var magicDottedBorder = /*#__PURE__*/React.createElement("svg", {
-  width: "100%",
-  height: "1px"
-}, /*#__PURE__*/React.createElement("line", {
-  x1: "0",
-  y1: "0",
-  x2: "100%",
-  y2: "0",
-  stroke: "#B0B9C8FF",
-  strokeWidth: "1.5",
-  strokeDasharray: "0, 5",
-  strokeDashoffset: "0",
-  strokeLinecap: "round"
-}));
-
-var RowRenderer = function RowRenderer(props) {
-  var row = props.row,
-      itemIndex = props.itemIndex,
-      _props$minHeight = props.minHeight,
-      minHeight = _props$minHeight === void 0 ? '36px' : _props$minHeight,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 'auto' : _props$height,
-      _props$rowsLayout = props.rowsLayout,
-      rowsLayout = _props$rowsLayout === void 0 ? [1] : _props$rowsLayout,
-      CustomRowContentRenderer = props.CustomRowContentRenderer,
-      focusedRowId = props.focusedRowId,
-      selectedRowId = props.selectedRowId,
-      isDragOverlay = props.isDragOverlay;
-  var ctx = useContext(DataTableContext);
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var flattenedData = ctx.flattenedData; // ===========================================================================
-  // Properties for the row
-  // ===========================================================================
-
-  var _useRowRendererProper = useRowRendererProperties({
-    row: row
-  }),
-      userDataProperties = _useRowRendererProper.userDataProperties,
-      colsLayoutStyle = _useRowRendererProper.colsLayoutStyle,
-      totalColumnsWidth = _useRowRendererProper.totalColumnsWidth,
-      rowStyle = _useRowRendererProper.rowStyle,
-      shouldAppendDottedBorder = _useRowRendererProper.shouldAppendDottedBorder,
-      dropIndicatorPosition = _useRowRendererProper.dropIndicatorPosition; // ===========================================================================
-  // Handlers
-  // ===========================================================================
-
-
-  var _useRowRendererHandle = useRowRendererHandlers({
-    row: row,
-    itemIndex: itemIndex,
-    items: flattenedData,
-    draggableProps: draggableProps,
-    isDragOverlay: isDragOverlay,
-    selectedRowId: selectedRowId
-  }),
-      handleItemClick = _useRowRendererHandle.handleItemClick,
-      handleKeyDown = _useRowRendererHandle.handleKeyDown,
-      handleOnBlur = _useRowRendererHandle.handleOnBlur,
-      handleOnFocus = _useRowRendererHandle.handleOnFocus;
-
-  var rowContentProps = _objectSpread$8(_objectSpread$8({}, props), {}, {
-    ctx: ctx,
-    focusedRowId: focusedRowId,
-    selectedRowId: selectedRowId,
-    draggableProps: draggableProps,
-    dropIndicatorPosition: dropIndicatorPosition
-  });
-
-  return /*#__PURE__*/React.createElement(StyledFullsizeGrid, _extends({
-    "data-testid": DATA_TESTID.DATA_TABLE_ROW,
-    key: row.uid,
-    colsLayoutStyle: colsLayoutStyle
-  }, userDataProperties, {
-    totalColumnsWidth: totalColumnsWidth,
-    style: rowStyle,
-    onClick: handleItemClick,
-    onKeyDown: handleKeyDown,
-    onBlur: handleOnBlur,
-    onFocus: handleOnFocus,
-    "data-expandable": Boolean(row.original.tableRowDetails),
-    "data-is-row-expanded": row.isExpanded,
-    rows: rowsLayout,
-    minHeight: minHeight,
-    height: height
-  }), CustomRowContentRenderer ? /*#__PURE__*/React.createElement(CustomRowContentRenderer, rowContentProps) : /*#__PURE__*/React.createElement(DefaultRowContentRenderer, _extends({}, rowContentProps, {
-    key: row.uid
-  })), shouldAppendDottedBorder && magicDottedBorder, /*#__PURE__*/React.createElement(DropIndicator, {
-    vertical: false,
-    dropIndicatorPosition: dropIndicatorPosition,
-    isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
-  }));
-};
-
-/* eslint-disable react/prop-types */
-
-var RowContent = function RowContent(props) {
-  var row = props.row,
-      ctx = props.ctx,
-      groupedRowsRenderHeader = props.ctx.tableProps.groupedRowsRenderHeader,
-      _props$backgroundColo = props.backgroundColor,
-      backgroundColor = _props$backgroundColo === void 0 ? 'white' : _props$backgroundColo,
-      focusedRowId = props.focusedRowId,
-      selectedRowId = props.selectedRowId;
-  var rowRef = useRef(null);
-  var hasExpandCell = useMemo(function () {
-    return row.original.subRows && row.cells.find(function (cell) {
-      return cell.column.accessor === 'expandRowColumn';
-    });
-  }, [row]);
-  var titleContent = useMemo(function () {
-    if (typeof groupedRowsRenderHeader === 'function') {
-      return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);
-    }
-
-    return row.original.dimsumHeaderValue;
-  }, [groupedRowsRenderHeader, row]);
-  useLayoutEffect(function () {
-    if (row.uid === focusedRowId) {
-      rowRef.current.focus();
-    }
-  }, [focusedRowId, row.uid]);
-  return /*#__PURE__*/React.createElement(StyledCellContainer, {
-    ref: rowRef,
-    minHeight: "0px",
-    tabIndex: 0,
-    backgroundColor: backgroundColor,
-    "data-testid": DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT
-  }, /*#__PURE__*/React.createElement(GroupHeaderContainer, {
-    "data-testid": DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER,
-    cols: hasExpandCell ? ['min-content', 'auto'] : ['auto'],
-    padding: hasExpandCell ? '4px' : '16px'
-  }, hasExpandCell ? /*#__PURE__*/React.createElement(expandRowColumn.Cell, {
-    row: row,
-    cell: row.cells[0],
-    isRowSelected: selectedRowId === row.uid,
-    ctx: ctx,
-    draggableProps: {}
-  }) : /*#__PURE__*/React.createElement(Grid, {
-    width: "16px"
-  }), /*#__PURE__*/React.createElement(GroupHeaderTitle, null, titleContent)));
-};
-
-var RowVariantHeader = function RowVariantHeader(_ref) {
-  var row = _ref.row,
-      itemIndex = _ref.itemIndex,
-      isDragOverlay = _ref.isDragOverlay,
-      focusedRowId = _ref.focusedRowId,
-      selectedRowId = _ref.selectedRowId;
-  return /*#__PURE__*/React.createElement(RowRenderer, {
-    row: row,
-    itemIndex: itemIndex,
-    isDragOverlay: isDragOverlay,
-    minHeight: "0px",
-    height: "24px",
-    CustomRowContentRenderer: RowContent,
-    focusedRowId: focusedRowId,
-    selectedRowId: selectedRowId
-  });
-};
-
-/* eslint-disable react/prop-types */
-var RowVariantPrimary = function RowVariantPrimary(_ref) {
-  var row = _ref.row,
-      itemIndex = _ref.itemIndex,
-      isDragOverlay = _ref.isDragOverlay,
-      ctx = _ref.ctx,
-      focusedRowId = _ref.focusedRowId,
-      selectedRowId = _ref.selectedRowId,
-      compact = _ref.compact;
-  var gridLayout = ctx.layoutHelpers.gridLayout;
-  return /*#__PURE__*/React.createElement(RowRenderer, {
-    row: row,
-    itemIndex: itemIndex,
-    isDragOverlay: isDragOverlay,
-    compact: compact,
-    height: compact ? '24px' : 'auto',
-    minHeight: compact ? '24px' : '36px',
-    colsLayout: row.isExpanded ? undefined : gridLayout,
-    rowsLayout: row.isExpanded ? ['auto', 'auto'] : [1],
-    focusedRowId: focusedRowId,
-    selectedRowId: selectedRowId
-  });
-};
-
-/* eslint-disable react/prop-types */
-var RowVariantSecondary = function RowVariantSecondary(_ref) {
-  var row = _ref.row,
-      itemIndex = _ref.itemIndex,
-      isDragOverlay = _ref.isDragOverlay,
-      ctx = _ref.ctx,
-      focusedRowId = _ref.focusedRowId,
-      selectedRowId = _ref.selectedRowId,
-      compact = _ref.compact;
-  var gridLayout = ctx.layoutHelpers.gridLayout;
-  return /*#__PURE__*/React.createElement(RowRenderer, {
-    row: row,
-    itemIndex: itemIndex,
-    isDragOverlay: isDragOverlay,
-    compact: compact,
-    height: compact ? '24px' : 'auto',
-    minHeight: compact ? '24px' : '36px',
-    colsLayout: row.isExpanded ? undefined : gridLayout,
-    rowsLayout: row.isExpanded ? ['auto', 'auto'] : [1],
-    backgroundColor: "#F6F7F9",
-    focusedRowId: focusedRowId,
-    selectedRowId: selectedRowId
-  });
-};
-
-var _RowVariantMapper;
-var RowVariantMapper = (_RowVariantMapper = {}, _defineProperty(_RowVariantMapper, ROW_VARIANTS.HEADER_GROUP, RowVariantHeader), _defineProperty(_RowVariantMapper, ROW_VARIANTS.PRIMARY, RowVariantPrimary), _defineProperty(_RowVariantMapper, ROW_VARIANTS.SECONDARY, RowVariantSecondary), _defineProperty(_RowVariantMapper, ROW_VARIANTS.COMPACT_PRIMARY, function (props) {
-  return /*#__PURE__*/React.createElement(RowVariantPrimary, _extends({
-    compact: true
-  }, props));
-}), _defineProperty(_RowVariantMapper, ROW_VARIANTS.COMPACT_SECONDARY, function (props) {
-  return /*#__PURE__*/React.createElement(RowVariantSecondary, _extends({
-    compact: true
-  }, props));
-}), _RowVariantMapper);
-var RowVariantMapItem = function RowVariantMapItem(props) {
-  var row = props.row,
-      getRowVariant = props.ctx.tableProps.getRowVariant;
-  var variant = getRowVariant(row, Cells);
-  var Component;
-
-  if (typeof variant === 'string') {
-    if (!(variant in RowVariantMapper)) {
-      throw new Error("".concat(variant, " is not an out-of-the-box row variant"));
-    }
-
-    Component = RowVariantMapper[variant];
-  } else {
-    Component = variant;
-  }
-
-  return /*#__PURE__*/React.createElement(Component, props);
-};
-
-//   - the virtual list ref (for react-virtual requirement)
-//   - (conditionally) draggableProps.setNodeRef for drag and drop of rows
-
-var setItemRefs = function setItemRefs(measureRef, draggableRef, ref) {
-  var refsToSet = [measureRef];
-  if (draggableRef) refsToSet.push(draggableRef);
-  setMultipleRefs.apply(void 0, refsToSet)(ref);
-};
-
-var Row = function Row(props) {
-  var row = props.row,
-      measureRef = props.measureRef,
-      itemWrapperStyle = props.itemWrapperStyle,
-      itemIndex = props.itemIndex,
-      isDragOverlay = props.isDragOverlay,
-      focusedRowId = props.focusedRowId,
-      selectedRowId = props.selectedRowId;
-  var ctx = useContext(DataTableContext);
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var draggableRef = draggableProps && draggableProps.setNodeRef;
-  return /*#__PURE__*/React.createElement("div", {
-    style: !isDragOverlay ? itemWrapperStyle : {},
-    ref: function ref(_ref) {
-      return setItemRefs(measureRef, draggableRef, _ref);
-    }
-  }, /*#__PURE__*/React.createElement(RowVariantMapItem, {
-    row: row,
-    itemIndex: itemIndex,
-    isDragOverlay: isDragOverlay,
-    ctx: ctx,
-    focusedRowId: focusedRowId,
-    selectedRowId: selectedRowId
-  }));
-};
-
-Row.propTypes = {
-  row: PropTypes.object.isRequired,
-  itemIndex: PropTypes.number.isRequired,
-  measureRef: PropTypes.func.isRequired,
-  itemWrapperStyle: PropTypes.object,
-  isDragOverlay: PropTypes.bool,
-  focusedRowId: PropTypes.string,
-  selectedRowId: PropTypes.string
-};
-Row.defaultProps = {
-  itemWrapperStyle: {}
-};
-
-var mapStateToProps$3 = function mapStateToProps(state) {
-  return {
-    focusedRowId: state.rows.focusedRowId,
-    selectedRowId: state.rows.selectedRowId
-  };
-};
-
-var Row$1 = withDnDSortableRowContext(connect(mapStateToProps$3)(Row));
-
-/* eslint-disable no-underscore-dangle */
-
-var Rows = function Rows() {
-  var _useContext = useContext(DataTableContext),
-      virtualItems = _useContext.virtualListHelpers.virtualItems,
-      totalColumnsWidth = _useContext.layoutHelpers.totalColumnsWidth,
-      flattenedData = _useContext.flattenedData,
-      visibleColumns = _useContext.visibleColumns;
-
-  var _useContext2 = useContext(DnDTreeContext),
-      visibleItems = _useContext2.visibleItems;
-
-  var items = visibleItems || flattenedData;
-  var PureVirtualizedRows = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, virtualItems.map(function (virtualItem) {
-      var index = virtualItem.index,
-          measureRef = virtualItem.measureRef,
-          start = virtualItem.start;
-      var row = items[index];
-      if (!row) return null;
-      addCellData(row, visibleColumns);
-      var style = {
-        position: 'absolute',
-        top: "".concat(start, "px"),
-        left: 0,
-        width: totalColumnsWidth
-      };
-      var rowProps = {
-        key: "ds-table-row-".concat(row.uid),
-        row: row,
-        measureRef: measureRef,
-        index: index,
-        // this is consumed by the DnD HOC
-        itemIndex: index,
-        itemWrapperStyle: style
-      };
-      return /*#__PURE__*/React.createElement(Row$1, rowProps);
-    }));
-  }, [virtualItems, items, visibleColumns, totalColumnsWidth]);
-  return PureVirtualizedRows;
-};
-
-Rows.propTypes = {};
-var Rows$1 = withConditionalDnDRowContext(Rows);
-
-var useHierarchyPreviewHandlers = function useHierarchyPreviewHandlers(_ref) {
-  var setOverId = _ref.setOverId,
-      setActiveId = _ref.setActiveId;
-  var resetState = useCallback(function () {
-    setOverId(null);
-    setActiveId(null);
-    document.body.style.setProperty('cursor', '');
-    var el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
-
-    el.onscroll = function () {
-      return null;
-    };
-  }, [setOverId, setActiveId]);
-  var handlePreviewDragStart = useCallback(function (_ref2) {
-    var id = _ref2.active.id;
-    setActiveId(id);
-    setOverId(id);
-    document.body.style.setProperty('cursor', 'grabbing');
-    var el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
-    var y = el.scrollTop;
-
-    el.onscroll = function () {
-      return el.scrollTo(0, y);
-    };
-  }, [setActiveId, setOverId]);
-  var handlePreviewDragMove = useCallback(function () {
-    return null;
-  }, []);
-  var handlePreviewDragOver = useCallback(function (_ref3) {
-    var _over$id;
-
-    var over = _ref3.over;
-    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
-  }, [setOverId]);
-  var handlePreviewDragEnd = useCallback(function () {
-    resetState();
-  }, [resetState]);
-  var handlePreviewDragCancel = useCallback(function () {
-    resetState();
-  }, [resetState]);
-  return {
-    handlePreviewDragStart: handlePreviewDragStart,
-    handlePreviewDragMove: handlePreviewDragMove,
-    handlePreviewDragOver: handlePreviewDragOver,
-    handlePreviewDragEnd: handlePreviewDragEnd,
-    handlePreviewDragCancel: handlePreviewDragCancel
-  };
-};
-
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
-var vertical = [KeyboardCode.Up, KeyboardCode.Down];
-
-var getHorizontalKeyboardCoordinates = function getHorizontalKeyboardCoordinates(_ref) {
-  var _document$querySelect, _document$querySelect2;
-
-  var items = _ref.items,
-      active = _ref.active,
-      over = _ref.over,
-      event = _ref.event,
-      currentCoordinates = _ref.currentCoordinates,
-      droppableContainers = _ref.droppableContainers,
-      translatedRect = _ref.translatedRect;
-  if (vertical.includes(event.code)) return undefined;
-  var activeItem = items.find(function (item) {
-    return item.id === active;
-  });
-  var overRect = over.rect;
-  var layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
-
-  Object.entries(droppableContainers).forEach(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-        id = _ref3[0],
-        container = _ref3[1];
-
-    if (container !== null && container !== void 0 && container.disabled || !overRect) {
-      return;
-    }
-
-    var node = container === null || container === void 0 ? void 0 : container.node.current;
-
-    if (!node) {
-      return;
-    }
-
-    var itemParent = items.find(function (item) {
-      return item.id === id;
-    }).parentId;
-    if (itemParent !== activeItem.parentId) return;
-    var rect = getViewRect(node);
-
-    if (event.code === KeyboardCode.Left && translatedRect.left > rect.right - 10) {
-      layoutRects.push([id, rect]);
-    } else if (event.code === KeyboardCode.Right && translatedRect.left < rect.left) {
-      layoutRects.push([id, rect]);
-    }
-  });
-  var dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
-    width: 150,
-    left: 0
-  };
-  var closestId = closestCorners(layoutRects, translatedRect);
-  if (!closestId) return undefined;
-  var closestRect = getViewRect(droppableContainers[closestId].node.current);
-  var activeRect = getViewRect(droppableContainers[active].node.current);
-  return _objectSpread$7(_objectSpread$7({}, currentCoordinates), {}, {
-    x: closestRect.left + (closestRect.width - dragOverlayRect.width) / 2 + (closestRect.offsetLeft < activeRect.left ? -1 : 1)
-  });
-};
-
-var getHierarchyKeyboardCoordinates = function getHierarchyKeyboardCoordinates(context, isHorizontalDnD) {
-  return function (event, _ref4) {
-    var active = _ref4.active,
-        currentCoordinates = _ref4.currentCoordinates,
-        _ref4$context = _ref4.context,
-        over = _ref4$context.over,
-        translatedRect = _ref4$context.translatedRect,
-        droppableContainers = _ref4$context.droppableContainers;
-
-    if (directions.includes(event.code)) {
-      event.preventDefault();
-
-      if (!translatedRect) {
-        return undefined;
-      }
-
-      var items = context.current.items;
-      var args = {
-        items: items,
-        active: active,
-        over: over,
-        event: event,
-        currentCoordinates: currentCoordinates,
-        droppableContainers: droppableContainers,
-        translatedRect: translatedRect
-      };
-      if (isHorizontalDnD) return getHorizontalKeyboardCoordinates(args);
-      return undefined;
-    }
-
-    return undefined;
-  };
-};
-
-var customCollisionDetection = function customCollisionDetection(activeId, activeParent, dndItems) {
-  return function (entries, target) {
-    var _document$querySelect, _document$querySelect2;
-
-    var entriesWithSameParent = entries.filter(function (_ref) {
-      var _dndItems$find;
-
-      var _ref2 = _slicedToArray(_ref, 1),
-          id = _ref2[0];
-
-      return ((_dndItems$find = dndItems.find(function (item) {
-        return item.id === id;
-      })) === null || _dndItems$find === void 0 ? void 0 : _dndItems$find.parentId) === activeParent;
-    });
-    var dragOverlayRect = (_document$querySelect = (_document$querySelect2 = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY, "\"]"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.getBoundingClientRect()) !== null && _document$querySelect !== void 0 ? _document$querySelect : {
-      width: 150
-    };
-    var originalRect = entriesWithSameParent.find(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-          id = _ref4[0];
-
-      return id === activeId;
-    });
-
-    if (originalRect[1].offsetLeft <= target.offsetLeft && target.offsetLeft <= originalRect[1].offsetLeft + originalRect[1].width) {
-      return originalRect[0];
-    }
-
-    var isLeft = target.offsetLeft <= originalRect[1].offsetLeft + dragOverlayRect.width / 2 + 5;
-    var match = null; // If going to the left, search the closest offset left
-    // Otherwise, get the closest offset right
-
-    var collisionPoint = target.offsetLeft + dragOverlayRect.width / 2;
-    entriesWithSameParent.forEach(function (entry) {
-      var _entry = _slicedToArray(entry, 2),
-          rect = _entry[1];
-
-      var offsetRight = rect.offsetLeft + rect.width;
-      if (!match) match = entry;else if (isLeft && Math.abs(collisionPoint - rect.offsetLeft) <= Math.abs(collisionPoint - match[1].offsetLeft)) {
-        match = entry;
-      } else if (!isLeft && Math.abs(collisionPoint - offsetRight) <= Math.abs(collisionPoint - match[1].offsetLeft - match[1].width)) {
-        match = entry;
-      }
-    });
-    return match === null ? null : match[0];
-  };
-};
-
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-// if second parameter is true, the space will be done on the horizontal axis
-
-var adjustTranslate = function adjustTranslate(_ref) {
-  var transform = _ref.transform;
-  var isHorizontalDnD = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-  var newTransform = _objectSpread$6({}, transform);
-
-  if (isHorizontalDnD) {
-    newTransform.y = transform.y + 15;
-  } else {
-    newTransform.y = transform.y - 35;
-  }
-
-  return newTransform;
-};
-
-var layoutMeasuring = {
-  strategy: LayoutMeasuringStrategy.Always
-};
-
-var useHierarchyDndkitConfig = function useHierarchyDndkitConfig(_ref2) {
-  var flattenedItems = _ref2.flattenedItems,
-      _ref2$isHorizontalDnD = _ref2.isHorizontalDnD,
-      isHorizontalDnD = _ref2$isHorizontalDnD === void 0 ? false : _ref2$isHorizontalDnD,
-      onReorder = _ref2.onReorder;
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeId = _useState2[0],
-      setActiveId = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      overId = _useState4[0],
-      setOverId = _useState4[1];
-
-  var dndItems = useMemo(function () {
-    return flattenedItems.map(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-          item = _ref4[0];
-
-      return item;
-    });
-  }, [flattenedItems]);
-  var activeItem = useMemo(function () {
-    return dndItems.find(function (item) {
-      return item.id === activeId;
-    });
-  }, [activeId, dndItems]);
-  var itemsDictionary = useMemo(function () {
-    var dictionary = {};
-    dndItems.forEach(function (item) {
-      dictionary[item.id] = item;
-    });
-    return dictionary;
-  }, [dndItems]);
-  var modifiers = useMemo(function () {
-    return [function (options) {
-      return adjustTranslate(options, isHorizontalDnD);
-    }];
-  }, [isHorizontalDnD]);
-  var sensorContext = useRef({
-    items: dndItems
-  });
-  useEffect(function () {
-    sensorContext.current = {
-      items: dndItems
-    };
-  }, [dndItems]);
-  var coordinateGetter = useMemo(function () {
-    return getHierarchyKeyboardCoordinates(sensorContext, isHorizontalDnD);
-  }, [isHorizontalDnD]);
-  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-    coordinateGetter: coordinateGetter
-  }));
-  var dragPreviewHandlers = useHierarchyPreviewHandlers({
-    setActiveId: setActiveId,
-    setOverId: setOverId
-  });
-  var dragActionHandlers = useHierarchyActionHandlers(_objectSpread$6(_objectSpread$6({}, dragPreviewHandlers), {}, {
-    dndItems: dndItems,
-    onReorder: onReorder
-  }));
-  var announcements = useHierarchyAnnouncements(itemsDictionary);
-  var dndContextProps = useMemo(function () {
-    return _objectSpread$6({
-      announcements: announcements,
-      modifiers: modifiers,
-      sensors: sensors,
-      layoutMeasuring: layoutMeasuring,
-      collisionDetection: customCollisionDetection(activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems)
-    }, dragActionHandlers);
-  }, [announcements, modifiers, sensors, activeId, activeItem === null || activeItem === void 0 ? void 0 : activeItem.parentId, dndItems, dragActionHandlers]);
-  return {
-    dndContextProps: dndContextProps,
-    activeId: activeId,
-    overId: overId,
-    activeIndex: activeId ? activeItem.index : -1
-  };
-};
-
-var DnDGroupContext = /*#__PURE__*/createContext({
-  activeIndex: undefined
-});
-
-var flattenColumns = function flattenColumns(cols) {
-  var flattened = [];
-
-  var flatten = function flatten(col, index) {
-    var parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var id = col.Header;
-    flattened.push([{
-      id: id,
-      parentId: parentId,
-      index: index
-    }, col]);
-    if (col.columns) col.columns.forEach(function (subColumn, childIndex) {
-      return flatten(subColumn, childIndex, id);
-    });
-  };
-
-  cols.forEach(function (col, index) {
-    return flatten(col, index);
-  });
-  return flattened;
-}; // only wraps in "DnDContext" and "DnDGroupContext" if any Drag and Drop functionality is requested
-
-
-var withConditionalDnDColumnContext = function withConditionalDnDColumnContext(Component) {
-  return function (props) {
-    var _React$useContext = React.useContext(DataTableContext),
-        _React$useContext$tab = _React$useContext.tableProps,
-        dragAndDropColumns = _React$useContext$tab.dragAndDropColumns,
-        columns = _React$useContext$tab.columns,
-        onColumnsReorder = _React$useContext$tab.onColumnsReorder;
-
-    var _React$useState = React.useState(null),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        PureDraggedJSX = _React$useState2[0],
-        setPureDraggedJSX = _React$useState2[1]; // todo: check if this can be done via portal
-
-
-    var flattenedItems = useMemo(function () {
-      return flattenColumns(columns);
-    }, [columns]);
-    var onReorder = useCallback(function (movedItem, indexes) {
-      // Send from index to target index
-      var newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex); // Pull the cols's data into an object
-
-      var nodes = {};
-      newFlattenedData.forEach(function (_ref) {
-        var _ref2 = _slicedToArray(_ref, 2),
-            dndData = _ref2[0],
-            colData = _ref2[1];
-
-        delete colData.columns;
-        nodes[dndData.id] = colData;
-      });
-      var newData = [];
-      newFlattenedData.forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            dndData = _ref4[0],
-            colData = _ref4[1];
-
-        // If row has parent, insert it to it's subrows
-        // otherwise append it to the new user data
-        if (dndData.parentId) {
-          var parentNode = nodes[dndData.parentId];
-          if (parentNode.columns) parentNode.columns.push(colData);else parentNode.columns = [colData];
-        } else newData.push(colData);
-      });
-      onColumnsReorder(newData, indexes);
-    }, [flattenedItems, onColumnsReorder]);
-
-    var _useHierarchyDndkitCo = useHierarchyDndkitConfig({
-      flattenedItems: flattenedItems,
-      isHorizontalDnD: true,
-      onReorder: onReorder
-    }),
-        dndContextProps = _useHierarchyDndkitCo.dndContextProps,
-        activeId = _useHierarchyDndkitCo.activeId,
-        activeIndex = _useHierarchyDndkitCo.activeIndex;
-
-    if (dragAndDropColumns) return /*#__PURE__*/React.createElement(DndContext, dndContextProps, /*#__PURE__*/React.createElement(DragOverlayContext.Provider, {
-      value: {
-        setPureDraggedJSX: setPureDraggedJSX
-      }
-    }, /*#__PURE__*/React.createElement(DnDGroupContext.Provider, {
-      value: {
-        activeIndex: activeIndex
-      }
-    }, /*#__PURE__*/React.createElement(Component, props))), /*#__PURE__*/React.createElement(DragOverlay, null, activeId ? PureDraggedJSX : null));
-    return /*#__PURE__*/React.createElement(Component, props);
-  };
-};
-
-var emptyFilterValue$1 = {
-  startDate: null,
-  endDate: null
-};
-var DateRangeFilter = function DateRangeFilter(props) {
-  var column = props.column,
-      id = props.column.id,
-      _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? emptyFilterValue$1 : _props$filterValue,
-      onValueChange = props.onValueChange,
-      patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
-      reduxHeader = props.reduxHeader,
-      innerRef = props.innerRef;
-  var dateRange = filterValue;
-
-  var _useState = useState(dateRange.startDate || ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = useState(dateRange.endDate || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1];
-
-  useEffect(function () {
-    setStartDate(dateRange.startDate || '');
-    setEndDate(dateRange.endDate || '');
-  }, [dateRange]);
-  useEffect(function () {
-    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
-      onValueChange(FILTER_TYPES.DATE_RANGE, {
-        startDate: startDate,
-        endDate: endDate
-      });
-    } // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [startDate, endDate]);
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: id,
-    menuContent: /*#__PURE__*/React.createElement(Grid, {
-      width: "260px",
-      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
-    }, /*#__PURE__*/React.createElement(Grid, {
-      p: "xxs"
-    }, /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
-      fromDate: startDate,
-      onFromDateChange: setStartDate,
-      toDate: endDate,
-      onToDateChange: setEndDate,
-      type: "date-range-inputs",
-      autoFocus: true
-    })), /*#__PURE__*/React.createElement(Grid, {
-      onKeyDown: function onKeyDown(e) {
-        return e.code === 'Enter' && setTimeout(function () {
-          return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate));
-        }, 0);
-      }
-    }, /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
-      fromDate: startDate,
-      onFromDateChange: setStartDate,
-      toDate: endDate,
-      onToDateChange: setEndDate,
-      type: "date-range-picker-controller-only"
-    }))),
-    triggerIcon: /*#__PURE__*/React.createElement(DatePicker2, null),
-    innerRef: innerRef,
-    ariaLabel: "Open Date Range Filter"
-  });
-};
-
-var emptyFilterValue = {
-  startDate: null,
-  endDate: null
-};
-var DateSwitcherFilter = function DateSwitcherFilter(props) {
-  var column = props.column,
-      id = props.column.id,
-      _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? emptyFilterValue : _props$filterValue,
-      onValueChange = props.onValueChange,
-      patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
-      reduxHeader = props.reduxHeader,
-      innerRef = props.innerRef;
-  var dateRange = filterValue;
-
-  var _useState = useState(dateRange.startDate || ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      startDate = _useState2[0],
-      setStartDate = _useState2[1];
-
-  var _useState3 = useState(dateRange.endDate || ''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      endDate = _useState4[0],
-      setEndDate = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      isDateRange = _useState6[0],
-      setIsDateRange = _useState6[1];
-
-  useEffect(function () {
-    setStartDate(dateRange.startDate || '');
-    setEndDate(dateRange.endDate || '');
-  }, [dateRange]);
-  useEffect(function () {
-    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
-      onValueChange(FILTER_TYPES.DATE_SWITCHER, {
-        startDate: startDate,
-        endDate: endDate,
-        isDateRange: isDateRange
-      });
-    } // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [startDate, endDate, isDateRange]);
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: id,
-    menuContent: /*#__PURE__*/React.createElement(Grid, {
-      width: "260px",
-      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
-    }, /*#__PURE__*/React.createElement(Grid, {
-      p: "xxs",
-      gutter: "xxs"
-    }, /*#__PURE__*/React.createElement(DSControlledCheckbox, {
-      checked: isDateRange,
-      name: "Date range",
-      label: "Date Range",
-      id: "date-range-switcher-id-internal",
-      onChange: function onChange() {
-        setIsDateRange(!isDateRange);
-        setStartDate('');
-        setEndDate('');
-      },
-      autoFocus: true
-    }), isDateRange ? /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
-      fromDate: startDate,
-      onFromDateChange: setStartDate,
-      toDate: endDate,
-      onToDateChange: setEndDate,
-      type: "date-range-inputs"
-    }) : /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
-      date: startDate,
-      onDateChange: function onDateChange(_date) {
-        setStartDate(_date);
-        setEndDate(_date);
-      },
-      type: "date-inputs"
-    })), /*#__PURE__*/React.createElement(Grid, {
-      onKeyDown: function onKeyDown(e) {
-        return e.code === 'Enter' && setTimeout(function () {
-          return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate));
-        }, 0);
-      }
-    }, isDateRange ? /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
-      fromDate: startDate,
-      onFromDateChange: setStartDate,
-      toDate: endDate,
-      onToDateChange: setEndDate,
-      type: "date-range-picker-controller-only"
-    }) : /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
-      date: startDate,
-      onDateChange: function onDateChange(_date) {
-        setStartDate(_date);
-        setEndDate(_date);
-      },
-      type: "date-picker-controller-only"
-    }))),
-    triggerIcon: /*#__PURE__*/React.createElement(DatePicker2, null),
-    innerRef: innerRef,
-    ariaLabel: "Open Date Range Filter"
-  });
-};
-
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var opts$1 = {
-  prefix: '',
-  suffix: '',
-  allowDecimal: false,
-  includeThousandsSeparator: false,
-  requireDecimal: false,
-  allowNegative: true
-};
-var NumberRangeFilter = function NumberRangeFilter(props) {
-  var _filterValue$from, _filterValue$to, _column$ref$current$o, _column$ref, _column$ref$current;
-
-  var column = props.column,
-      _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? {
-    from: null,
-    to: null
-  } : _props$filterValue,
-      reduxHeader = props.reduxHeader,
-      onValueChange = props.onValueChange,
-      innerRef = props.innerRef;
-
-  var handleFromChange = function handleFromChange(e) {
-    var from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';
-
-    var nextValue = _objectSpread$5(_objectSpread$5({}, filterValue), {}, {
-      from: from
-    });
-
-    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-
-  var handleToChange = function handleToChange(e) {
-    var to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';
-
-    var nextValue = _objectSpread$5(_objectSpread$5({}, filterValue), {}, {
-      to: to
-    });
-
-    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-
-  var idPreffix = 'datatable-number-range';
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: column.id,
-    menuContent: /*#__PURE__*/React.createElement(Grid, {
-      "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
-      gutter: "xxxs",
-      padding: "xxs",
-      cols: ['auto', 'auto']
-    }, /*#__PURE__*/React.createElement(DSFormLayoutBlockItem, {
-      label: "Low",
-      inputID: "".concat(idPreffix, "-low-").concat(column.id)
-    }, /*#__PURE__*/React.createElement(DSInputMask, {
-      containerProps: {
-        style: {
-          textAlign: 'right'
-        }
-      },
-      id: "".concat(idPreffix, "-low-").concat(column.id),
-      value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
-      onChange: handleFromChange,
-      placeholder: "0",
-      mask: function mask(number) {
-        return MASK_TYPES.NUMBER(opts$1)(number);
-      },
-      autoFocus: true
-    })), /*#__PURE__*/React.createElement(DSFormLayoutBlockItem, {
-      label: "High",
-      inputID: "".concat(idPreffix, "-high-").concat(column.id)
-    }, /*#__PURE__*/React.createElement(DSInputMask, {
-      containerProps: {
-        style: {
-          textAlign: 'right'
-        }
-      },
-      id: "".concat(idPreffix, "-high-").concat(column.id),
-      value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
-      onChange: handleToChange,
-      placeholder: "0",
-      mask: function mask(number) {
-        return MASK_TYPES.NUMBER(opts$1)(number);
-      }
-    }))),
-    triggerIcon: /*#__PURE__*/React.createElement(SearchXsmall, null),
-    customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
-    },
-    innerRef: innerRef,
-    ariaLabel: "Open Number Range Filter"
-  });
-};
-
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var opts = {
-  prefix: '',
-  suffix: '',
-  allowDecimal: true,
-  decimalLimit: 2,
-  includeThousandsSeparator: false,
-  requireDecimal: true,
-  allowNegative: true
-};
-var CurrencyRangeFilter = function CurrencyRangeFilter(props) {
-  var _filterValue$from, _filterValue$to, _column$ref$current$o, _column$ref, _column$ref$current;
-
-  var column = props.column,
-      _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? {
-    from: null,
-    to: null
-  } : _props$filterValue,
-      reduxHeader = props.reduxHeader,
-      onValueChange = props.onValueChange,
-      innerRef = props.innerRef;
-
-  var handleFromChange = function handleFromChange(e) {
-    var nextValue = _objectSpread$4(_objectSpread$4({}, filterValue), {}, {
-      from: e.target.value
-    });
-
-    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-
-  var handleToChange = function handleToChange(e) {
-    var nextValue = _objectSpread$4(_objectSpread$4({}, filterValue), {}, {
-      to: e.target.value
-    });
-
-    onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
-  };
-
-  var idPreffix = 'datatable-currency-range';
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: column.id,
-    menuContent: /*#__PURE__*/React.createElement(Grid, {
-      "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
-      gutter: "xxxs",
-      padding: "xxs",
-      cols: ['auto', 'auto']
-    }, /*#__PURE__*/React.createElement(DSFormLayoutBlockItem, {
-      label: "Min",
-      inputID: "".concat(idPreffix, "-min-").concat(column.id)
-    }, /*#__PURE__*/React.createElement(DSInputMask, {
-      containerProps: {
-        style: {
-          textAlign: 'right'
-        }
-      },
-      id: "".concat(idPreffix, "-min-").concat(column.id),
-      value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
-      onChange: handleFromChange,
-      placeholder: "0.00",
-      mask: function mask(number) {
-        return MASK_TYPES.NUMBER(opts)(number);
-      },
-      autoFocus: true
-    })), /*#__PURE__*/React.createElement(DSFormLayoutBlockItem, {
-      label: "Max",
-      inputID: "".concat(idPreffix, "-max-").concat(column.id)
-    }, /*#__PURE__*/React.createElement(DSInputMask, {
-      containerProps: {
-        style: {
-          textAlign: 'right'
-        }
-      },
-      id: "".concat(idPreffix, "-max-").concat(column.id),
-      value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
-      onChange: handleToChange,
-      placeholder: "0.00",
-      mask: function mask(number) {
-        return MASK_TYPES.NUMBER(opts)(number);
-      }
-    }))),
-    triggerIcon: /*#__PURE__*/React.createElement(SearchXsmall, null),
-    customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
-    },
-    innerRef: innerRef,
-    ariaLabel: "Open Currency Range Filter"
-  });
-};
-
-var BaseSelectFilter = function BaseSelectFilter(props) {
-  var _column$ref$current$o, _column$ref, _column$ref$current;
-
-  var _props$isMulti = props.isMulti,
-      isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
-      selectedItems = props.selectedItems,
-      column = props.column,
-      type = props.type,
-      _props$column = props.column,
-      id = _props$column.id,
-      userFilterOptions = _props$column.filterOptions,
-      data = props.ctx.tableProps.data,
-      reduxHeader = props.reduxHeader,
-      innerRef = props.innerRef,
-      onValueChange = props.onValueChange;
-  var filterOptions = useMemo(function () {
-    // If the user didn't provide options, use the available ones
-    if (!userFilterOptions) {
-      var automaticFilters = _toConsumableArray(new Set(data.map(function (datum) {
-        return datum[id].toString();
-      }))).map(function (item) {
-        return {
-          type: 'option',
-          dsId: item,
-          value: item,
-          label: item
-        };
-      });
-
-      return automaticFilters;
-    } // If user provided the array itself, use it
-
-
-    if (Array.isArray(userFilterOptions)) return userFilterOptions; // Otherwise, it is a function
-
-    return userFilterOptions();
-  }, [data, id, userFilterOptions]);
-
-  var handleOnChange = function handleOnChange(value) {
-    if (isMulti) {
-      var multiSelectedItem = selectedItems;
-      var isFound = multiSelectedItem.find(function (item) {
-        return item.dsId === value.dsId;
-      });
-
-      if (isFound) {
-        onValueChange(type, multiSelectedItem.filter(function (item) {
-          return item.dsId !== value.dsId;
-        }));
-      } else {
-        onValueChange(type, [].concat(_toConsumableArray(multiSelectedItem), [value]));
-      }
-    } else {
-      var singleSelectedItem = selectedItems;
-      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
-    }
-  };
-
-  var _useState = useState(filterOptions),
-      _useState2 = _slicedToArray(_useState, 2),
-      filters = _useState2[0],
-      setFilteredOptions = _useState2[1];
-
-  useEffect(function () {
-    setFilteredOptions(filterOptions);
-  }, [filterOptions]);
-  var filteredOptions = useCallback(function (filter) {
-    return filterOptions.filter(function (option) {
-      return option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase());
-    });
-  }, [filterOptions]);
-  var handleOnFilter = useCallback(function (newFilter) {
-    setFilteredOptions(filteredOptions(newFilter));
-  }, [filteredOptions]);
-  var Select = /*#__PURE__*/React.createElement(Grid$1, {
-    "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
-    style: {
-      background: '#fff',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement(DSComboBox, {
-    inline: true,
-    autoFocus: true,
-    options: filters,
-    onChange: handleOnChange,
-    selectedValues: selectedItems,
-    onFilter: handleOnFilter
-  }));
-
-  var handleOnClickOutside = function handleOnClickOutside() {
-    setFilteredOptions(filteredOptions(''));
-  };
-
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: column.id,
-    menuContent: Select,
-    triggerIcon: /*#__PURE__*/React.createElement(SearchXsmall, null),
-    innerRef: innerRef,
-    ariaLabel: "Open Selection Filter",
-    onClickOutsideMenu: handleOnClickOutside,
-    customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px',
-      maxHeight: '300px'
-    }
-  });
-};
-
-/* eslint-disable react/prop-types */
-var SingleSelectFilter = function SingleSelectFilter(_ref) {
-  var column = _ref.column,
-      ctx = _ref.ctx,
-      patchHeaderFilterButtonAndMenu = _ref.patchHeaderFilterButtonAndMenu,
-      patchHeader = _ref.patchHeader,
-      onValueChange = _ref.onValueChange,
-      filterValue = _ref.filterValue,
-      reduxHeader = _ref.reduxHeader,
-      innerRef = _ref.innerRef;
-  return /*#__PURE__*/React.createElement(BaseSelectFilter, {
-    reduxHeader: reduxHeader,
-    "data-testid": DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
-    isSingle: true,
-    column: column,
-    ctx: ctx,
-    selectedItems: filterValue,
-    type: FILTER_TYPES.SELECT,
-    onValueChange: onValueChange,
-    patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
-    patchHeader: patchHeader,
-    innerRef: innerRef
-  });
-};
-
-/* eslint-disable react/prop-types */
-var MultiSelectFilter = function MultiSelectFilter(_ref) {
-  var column = _ref.column,
-      ctx = _ref.ctx,
-      onValueChange = _ref.onValueChange,
-      patchHeaderFilterButtonAndMenu = _ref.patchHeaderFilterButtonAndMenu,
-      patchHeader = _ref.patchHeader,
-      reduxHeader = _ref.reduxHeader,
-      filterValue = _ref.filterValue,
-      innerRef = _ref.innerRef;
-  return /*#__PURE__*/React.createElement(BaseSelectFilter, {
-    reduxHeader: reduxHeader,
-    "data-testid": DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER,
-    isMulti: true,
-    column: column,
-    ctx: ctx,
-    selectedItems: filterValue !== null && filterValue !== void 0 ? filterValue : [],
-    type: FILTER_TYPES.MULTI_SELECT,
-    onValueChange: onValueChange,
-    patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu,
-    patchHeader: patchHeader,
-    innerRef: innerRef
-  });
-};
-
-var SingleDateFilter = function SingleDateFilter(props) {
-  var column = props.column,
-      id = props.column.id,
-      filterValue = props.filterValue,
-      reduxHeader = props.reduxHeader,
-      onValueChange = props.onValueChange,
-      patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
-      innerRef = props.innerRef;
-
-  var _useState = useState(filterValue || ''),
-      _useState2 = _slicedToArray(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
-  useEffect(function () {
-    setDate(filterValue || '');
-  }, [filterValue]);
-  useEffect(function () {
-    if (!date.includes('_')) onValueChange(FILTER_TYPES.SINGLE_DATE, date || undefined); // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date]);
-  var commitDateChange = useCallback(function () {
-    patchHeaderFilterButtonAndMenu(id, true);
-  }, [id, patchHeaderFilterButtonAndMenu]);
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: column.id,
-    menuContent: /*#__PURE__*/React.createElement(Grid, {
-      "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
-      width: "260px"
-    }, /*#__PURE__*/React.createElement(Grid, {
-      p: "xxs"
-    }, /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
-      date: date,
-      onDateChange: setDate,
-      type: "date-inputs",
-      isClearable: true,
-      autoFocus: true
-    })), /*#__PURE__*/React.createElement(Grid, {
-      onKeyDown: function onKeyDown(e) {
-        return e.code === 'Enter' && setTimeout(commitDateChange, 0);
-      }
-    }, /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
-      date: date,
-      onDateChange: setDate,
-      type: "date-picker-controller-only"
-    }))),
-    triggerIcon: /*#__PURE__*/React.createElement(DatePicker2, null),
-    innerRef: innerRef,
-    ariaLabel: "Open Single Date Filter"
-  });
-};
-
-/* eslint-disable react/prop-types */
-var TextInputFilter = function TextInputFilter(props) {
-  var column = props.column,
-      _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? '' : _props$filterValue,
-      reduxHeader = props.reduxHeader,
-      onValueChange = props.onValueChange,
-      data = props.ctx.tableProps.data,
-      innerRef = props.innerRef;
-  var count = data.length;
-
-  var handleChange = function handleChange(event) {
-    var _event$target;
-
-    var newText = (event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '';
-    onValueChange(FILTER_TYPES.TEXT, newText);
-  };
-
-  return /*#__PURE__*/React.createElement(FilterPopover, {
-    reduxHeader: reduxHeader,
-    column: column,
-    columnId: column.id,
-    menuContent:
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    React.createElement("input", {
-      value: filterValue,
-      onChange: handleChange,
-      placeholder: "Search ".concat(count, " records..."),
-      autoFocus: true
-    }),
-    triggerIcon: /*#__PURE__*/React.createElement(SearchXsmall, null),
-    removeWrapperStyles: true,
-    innerRef: innerRef,
-    ariaLabel: "Open Text Input Filter",
-    "data-testid": "filter-popover"
-  });
-};
-
-var _FilterMapper;
-
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var FilterMapper = (_FilterMapper = {}, _defineProperty(_FilterMapper, FILTER_TYPES.SELECT, SingleSelectFilter), _defineProperty(_FilterMapper, FILTER_TYPES.MULTI_SELECT, MultiSelectFilter), _defineProperty(_FilterMapper, FILTER_TYPES.TEXT, TextInputFilter), _defineProperty(_FilterMapper, FILTER_TYPES.SINGLE_DATE, SingleDateFilter), _defineProperty(_FilterMapper, FILTER_TYPES.DATE_RANGE, DateRangeFilter), _defineProperty(_FilterMapper, FILTER_TYPES.DATE_SWITCHER, DateSwitcherFilter), _defineProperty(_FilterMapper, FILTER_TYPES.NUMBER_RANGE, NumberRangeFilter), _defineProperty(_FilterMapper, FILTER_TYPES.CURRENCY_RANGE, CurrencyRangeFilter), _FilterMapper);
-var FilterMapItem = function FilterMapItem(props) {
-  var column = props.column,
-      filters = props.filterValue,
-      onFiltersChange = props.onFiltersChange;
-
-  var _useDispatchHeadersAc = useDispatchHeadersActions(),
-      patchHeaderFilterButtonAndMenu = _useDispatchHeadersAc.patchHeaderFilterButtonAndMenu,
-      patchHeader = _useDispatchHeadersAc.patchHeader;
-
-  var filterValue = filters.find(function (filter) {
-    return filter.id === column.id;
-  });
-  var onValueChange = useCallback(function (type, newValue) {
-    var filterIndex = filters.findIndex(function (filter) {
-      return filter.id === column.id;
-    });
-
-    if (newValue === undefined) {
-      var newFilters = filters.filter(function (filter) {
-        return filter.id !== column.id;
-      });
-      onFiltersChange(newFilters);
-    } else if (filterIndex === -1) {
-      onFiltersChange([].concat(_toConsumableArray(filters), [{
-        id: column.id,
-        type: type,
-        value: newValue
-      }]));
-    } else {
-      var _newFilters = _toConsumableArray(filters);
-
-      _newFilters[filterIndex].type = type;
-      _newFilters[filterIndex].value = newValue;
-      onFiltersChange(_newFilters);
-    }
-  }, [column.id, filters, onFiltersChange]);
-
-  var filterProps = _objectSpread$3(_objectSpread$3({}, props), {}, {
-    filterValue: filterValue === null || filterValue === void 0 ? void 0 : filterValue.value,
-    onValueChange: onValueChange,
-    patchHeader: patchHeader,
-    patchHeaderFilterButtonAndMenu: patchHeaderFilterButtonAndMenu
-  });
-
-  if (typeof column.filter === 'string') {
-    if (!(column.filter in FilterMapper)) {
-      throw new Error("column.filter must be a supported out-of-the-box filter in ".concat(column));
-    }
-
-    var FilterComp = FilterMapper[column.filter];
-    return /*#__PURE__*/React.createElement(FilterComp, filterProps);
-  }
-
-  if (column.Filter) {
-    if (typeof column.Filter !== 'function') {
-      throw new Error("column.Filter must be a component");
-    }
-
-    var _FilterComp = column.Filter;
-    return /*#__PURE__*/React.createElement(_FilterComp, filterProps);
-  } // Column doesn't have any filters
-
-
-  return null;
-};
-
-function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var narrow = function narrow(value, min, max) {
-  return Math.min(Math.max(value, min !== null && min !== void 0 ? min : 30), max !== null && max !== void 0 ? max : Infinity);
-};
-
-var HeaderResizer = function HeaderResizer(_ref) {
-  var _column$width;
-
-  var column = _ref.column;
-
-  var _useContext = useContext(DataTableContext),
-      setGridLayout = _useContext.layoutHelpers.setGridLayout,
-      visibleColumns = _useContext.visibleColumns,
-      onColumnResize = _useContext.tableProps.onColumnResize;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isResizing = _useState2[0],
-      setIsResizing = _useState2[1];
-
-  var _useState3 = useState((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 150),
-      _useState4 = _slicedToArray(_useState3, 2),
-      nextWidth = _useState4[0],
-      setNextWidth = _useState4[1];
-
-  var visibleColumnsCopy = useMemo(function () {
-    return visibleColumns.map(function (col) {
-      return _objectSpread$2({}, col);
-    });
-  }, [visibleColumns]);
-  useEffect(function () {
-    var realColumnIndex = visibleColumnsCopy.findIndex(function (visibleColumn) {
-      return visibleColumn.id === column.id;
-    });
-    visibleColumnsCopy[realColumnIndex].width = nextWidth;
-    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
-  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
-  var ref = useRef(null);
-  var onResizeStart = useCallback(function () {
-    setIsResizing(true);
-  }, []);
-  var onResizeHandler = useCallback(function (e) {
-    var delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
-
-    var realColumnIndex = visibleColumnsCopy.findIndex(function (visibleColumn) {
-      return visibleColumn.id === column.id;
-    });
-    var widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
-    setNextWidth(widthWithDelta); // To prevent text selection
-
-    e.preventDefault();
-    e.stopPropagation();
-  }, [column.id, nextWidth, visibleColumnsCopy]);
-  var onResizeEnd = useCallback(function () {
-    setIsResizing(false);
-    onColumnResize(column.id, nextWidth);
-    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
-  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
-  useEffect(function () {
-    var debouncedResizeHandler = onResizeHandler;
-    var debouncedResizeEnd = onResizeEnd;
-
-    var addEvents = function addEvents() {
-      document.addEventListener('mousemove', debouncedResizeHandler);
-      document.addEventListener('touchmove', debouncedResizeHandler);
-      document.addEventListener('mouseup', debouncedResizeEnd);
-      document.addEventListener('touchend', debouncedResizeEnd);
-    };
-
-    var removeEvents = function removeEvents() {
-      document.removeEventListener('mousemove', debouncedResizeHandler);
-      document.removeEventListener('touchmove', debouncedResizeHandler);
-      document.removeEventListener('mouseup', debouncedResizeEnd);
-      document.removeEventListener('touchend', debouncedResizeEnd);
-    };
-
-    if (isResizing) addEvents();else removeEvents(); // just in case the component is unmounted
-
-    return removeEvents;
-  }, [isResizing, onResizeHandler, onResizeEnd]);
-  return /*#__PURE__*/React.createElement(StyledResizer, {
-    ref: ref,
-    role: "separator",
-    draggable: false,
-    isResizing: isResizing,
-    onMouseDown: onResizeStart,
-    onTouchStart: onResizeStart,
-    onMouseUp: onResizeEnd,
-    onTouchEnd: onResizeEnd
-  });
-};
-
-/* eslint-disable react/prop-types */
-
-var StringTitle = function StringTitle(_ref) {
-  var column = _ref.column,
-      textWrap = _ref.textWrap;
-  return (column.textWrap || textWrap) === 'truncate' ? /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
-    value: column.Header
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, column.Header);
-};
-
-var HeaderCellTitle = function HeaderCellTitle(_ref2) {
-  var column = _ref2.column,
-      ctx = _ref2.ctx,
-      draggableProps = _ref2.draggableProps,
-      textWrap = _ref2.textWrap;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    },
-    "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE
-  }, typeof column.Header === 'string' ? /*#__PURE__*/React.createElement(StringTitle, {
-    column: column,
-    textWrap: textWrap
-  }) : /*#__PURE__*/React.createElement(column.Header, {
-    column: column,
-    ctx: ctx,
-    draggableProps: draggableProps
-  }), column.required && /*#__PURE__*/React.createElement(RequiredDot, null));
-};
-
-var buildScreenReaderInstructions = function buildScreenReaderInstructions(colSpan, draggable, filterable, sortable) {
-  var preffix = colSpan === 1 ? '' : 'Column Group. ';
-  if (!draggable && !filterable && !sortable) return preffix;
-  var message = sortable ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so' : '';
-
-  if (draggable && filterable) {
-    message = "This column is draggable and filterable. To enable these interactions press the enter key. ".concat(message);
-  } else if (draggable || filterable) {
-    message = "This column is ".concat(draggable ? 'draggable' : 'filterable', ". To enable this interaction press the enter key. ").concat(message);
-  }
-
-  return "".concat(preffix).concat(message);
-};
-
-function mapStateToProps$2(state, ownProps) {
-  var _state$headers;
-
-  return {
-    reduxHeader: (_state$headers = state.headers) === null || _state$headers === void 0 ? void 0 : _state$headers[ownProps.column.id]
-  };
-}
-
-var connector = connect(mapStateToProps$2);
-
-var HeaderCellComp = function HeaderCellComp(props) {
-  var _flattenedData$, _flattenedData$$origi;
-
-  var reduxHeader = props.reduxHeader,
-      column = props.column,
-      isDragOverlay = props.isDragOverlay,
-      colSpan = props.colSpan;
-  var ctx = useContext(DataTableContext);
-  var _ctx$tableProps = ctx.tableProps,
-      isResizeable = _ctx$tableProps.isResizeable,
-      onColumnSortChange = _ctx$tableProps.onColumnSortChange,
-      dragAndDropColumns = _ctx$tableProps.dragAndDropColumns,
-      onFiltersChange = _ctx$tableProps.onFiltersChange,
-      filters = _ctx$tableProps.filters,
-      textWrap = _ctx$tableProps.textWrap,
-      flattenedData = ctx.flattenedData;
-
-  var _useDispatchHeadersAc = useDispatchHeadersActions(),
-      patchHeader = _useDispatchHeadersAc.patchHeader;
-
-  var dragHandleRef = useRef(null);
-  var filterIconRef = useRef(null);
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var _useHeaderCellConfig = useHeaderCellConfig({
-    column: column,
-    dragAndDropColumns: dragAndDropColumns,
-    draggableProps: draggableProps,
-    reduxHeader: reduxHeader,
-    isDragOverlay: isDragOverlay
-  }),
-      hasFilter = _useHeaderCellConfig.hasFilter,
-      hasDnD = _useHeaderCellConfig.hasDnD,
-      hasSortingCaret = _useHeaderCellConfig.hasSortingCaret,
-      hasRightIcons = _useHeaderCellConfig.hasRightIcons,
-      shouldShowDnD = _useHeaderCellConfig.shouldShowDnD,
-      hCols = _useHeaderCellConfig.hCols,
-      isDragging = _useHeaderCellConfig.isDragging;
-
-  useRecoverFocusCol(isDragging, dragHandleRef);
-  var rightIcons = useMemo(function () {
-    if (!hasRightIcons) return null;
-    return /*#__PURE__*/React.createElement(StyledHeaderRightIconsWrapper, null, /*#__PURE__*/React.createElement(FilterMapItem, {
-      column: column,
-      ctx: ctx,
-      onFiltersChange: onFiltersChange,
-      reduxHeader: reduxHeader,
-      filterValue: filters,
-      innerRef: filterIconRef
-    }), hasSortingCaret && /*#__PURE__*/React.createElement(SortByCaret, {
-      isSortedDesc: column.isSortedDesc
-    }));
-  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
-  var DnDHandleComponent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Grid, {
-      mr: "2px",
-      alignItems: "center",
-      style: {
-        position: 'relative'
-      }
-    }, /*#__PURE__*/React.createElement(StyledFocusWithin, {
-      hideFocus: isDragging
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      key: column.id,
-      innerRef: dragHandleRef,
-      isReachable: reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops,
-      id: column.id,
-      isDragOverlay: isDragOverlay
-    })));
-  }, [column.id, isDragOverlay, isDragging, reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops]);
-  var handlers = useHeaderCellHandlers({
-    hasFilter: hasFilter,
-    patchHeader: patchHeader,
-    column: column,
-    reduxHeader: reduxHeader,
-    hasDnD: hasDnD,
-    onColumnSortChange: onColumnSortChange,
-    dragHandleRef: dragHandleRef,
-    filterIconRef: filterIconRef,
-    headerRef: column.ref
-  });
-  return /*#__PURE__*/React.createElement(StyledHeadTh, _extends({
-    column: column
-  }, handlers, {
-    role: colSpan === 1 ? 'columnheader' : 'group',
-    colSpan: colSpan,
-    "aria-describedby": "".concat(column.id, "-instructions") // eslint-disable-next-line no-nested-ternary
-    ,
-    "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
-    "data-testid": DATA_TESTID.DATA_TABLE_HEADER,
-    isFirstRowGroup: !!((_flattenedData$ = flattenedData[0]) !== null && _flattenedData$ !== void 0 && (_flattenedData$$origi = _flattenedData$.original) !== null && _flattenedData$$origi !== void 0 && _flattenedData$$origi.dimsumHeaderValue),
-    tabIndex: column.isFocuseable === false ? -1 : 0,
-    isDragOverlay: isDragOverlay,
-    isDraggingActive: draggableProps && draggableProps.active,
-    shouldShowDnD: shouldShowDnD,
-    ref: column.ref
-  }), /*#__PURE__*/React.createElement(Grid, {
-    width: "100%",
-    cols: hCols
-  }, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/React.createElement(HeaderCellTitle, {
-    column: column,
-    ctx: ctx,
-    draggableProps: draggableProps,
-    textWrap: textWrap
-  }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/React.createElement(HeaderResizer, {
-    column: column
-  })), /*#__PURE__*/React.createElement("span", {
-    id: "".concat(column.id, "-instructions"),
-    style: {
-      display: 'none'
-    },
-    "aria-hidden": "false"
-  }, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort)));
-};
-
-var HeaderCell = connector(HeaderCellComp);
-
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var withDnDSortableColumnContext = function withDnDSortableColumnContext(Component) {
-  return function (props) {
-    var _useContext = useContext(DataTableContext),
-        dragAndDropColumns = _useContext.tableProps.dragAndDropColumns;
-
-    var _useContext2 = useContext(DragOverlayContext),
-        setPureDraggedJSX = _useContext2.setPureDraggedJSX;
-
-    var _useContext3 = useContext(DnDGroupContext),
-        activeIndex = _useContext3.activeIndex; // onMount generate unique options, so everyting is only ran once
-
-
-    var draggableOptions = useMemo(function () {
-      return {
-        id: props.header.Header
-      };
-    }, [props.header.Header]);
-    var useSortableHelpers = useSortable(draggableOptions);
-    var PureComponentJSX = useMemo(function () {
-      return /*#__PURE__*/React.createElement(Component, props);
-    }, [props]); // calculate all the "useSortable" values as per required
-
-    var draggableProps = useMemo(function () {
-      if (!dragAndDropColumns) return false;
-      var index = useSortableHelpers.index,
-          overIndex = useSortableHelpers.overIndex;
-      return _objectSpread$1(_objectSpread$1({}, useSortableHelpers), {}, {
-        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
-        dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before
-      });
-    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
-    useEffect(function () {
-      // We assume the structure of the inner element WON'T change during DnD
-      // This is a huge performance boost
-      if (useSortableHelpers.isDragging) {
-        setPureDraggedJSX( /*#__PURE__*/cloneElement(PureComponentJSX, {
-          isDragOverlay: true
-        }));
-      }
-    }, [useSortableHelpers.isDragging, setPureDraggedJSX]); // we use a context so we can easly access information wherever without bubbling down
-    // this context is all Memoized so as long as component is not re-mounted,
-    // the context won't trigger un-required renders per-se...
-
-    var ctx = useMemo(function () {
-      return {
-        draggableProps: draggableProps
-      };
-    }, [draggableProps]); // we always add the context, if draggableProps===false we don't have the DnD enabled.
-
-    return /*#__PURE__*/React.createElement(SortableItemContext.Provider, {
-      value: ctx
-    }, PureComponentJSX);
-  };
-};
-
-/* eslint-disable complexity */
-var StyledWrapper = /*#__PURE__*/styled(Grid$2).withConfig({
-  componentId: "sc-1dqaj8a-0"
-})(["position:relative;width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";"], function (props) {
-  return props.isDragOverlay ? 'fit-content' : '100%';
-}, function (props) {
-  return props.gridColumn;
-}, function (props) {
-  return props.isDragging ? props.theme.colors.neutral['080'] : 'white';
-}, function (props) {
-  return props.isDragging ? 0.8 : 1;
-}, function (props) {
-  return props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent';
-});
-
-var HeaderCellGroupComp = function HeaderCellGroupComp(_ref) {
-  var _children$length;
-
-  var header = _ref.header,
-      isDragOverlay = _ref.isDragOverlay,
-      isDraggingParent = _ref.isDraggingParent,
-      isLast = _ref.isLast;
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var children = header.columns;
-  var isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
-  var dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  var ChildGroup = isDragOverlay ? NotSortableHeaderCellGroup : HeaderCellGroup;
-  var colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
-  return /*#__PURE__*/React.createElement(StyledWrapper, {
-    ref: draggableProps ? draggableProps.setNodeRef : null,
-    gridColumn: isDragOverlay ? 'auto' : "span ".concat(colSpan),
-    isDragOverlay: isDragOverlay,
-    isDragging: isDragging,
-    cols: ['auto'],
-    "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined
-  }, /*#__PURE__*/React.createElement(HeaderCell, {
-    column: header,
-    isDragOverlay: isDragOverlay,
-    colSpan: colSpan
-  }), !!(children !== null && children !== void 0 && children.length) && !isDragOverlay && /*#__PURE__*/React.createElement(SortableHeaderCell, {
-    items: children,
-    isDragOverlay: isDragOverlay
-  }, children.map(function (h, index) {
-    return /*#__PURE__*/React.createElement(ChildGroup, {
-      key: h.id,
-      header: h,
-      isDragOverlay: isDragOverlay,
-      isDraggingParent: isDragging,
-      isLast: index === children.length - 1
-    });
-  })), (children === null || children === void 0 ? void 0 : children.length) && isDragOverlay && /*#__PURE__*/React.createElement(EmptyChildrenGroup, null), /*#__PURE__*/React.createElement(DropIndicator, {
-    vertical: true,
-    dropIndicatorPosition: dropIndicatorPosition,
-    isLast: isLast && isDragging
-  }));
-};
-
-HeaderCellGroupComp.propTypes = {
-  header: PropTypes.any,
-  isDragOverlay: PropTypes.bool,
-  isDraggingParent: PropTypes.bool,
-  isLast: PropTypes.bool
-}; // We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function
-
-var NotSortableHeaderCellGroup = HeaderCellGroupComp;
-var HeaderCellGroup = withDnDSortableColumnContext(HeaderCellGroupComp);
-
-var HeadersComp = function HeadersComp() {
-  var _useContext = useContext(DataTableContext),
-      _useContext$tableProp = _useContext.tableProps,
-      isExpandable = _useContext$tableProp.isExpandable,
-      colsLayoutStyle = _useContext$tableProp.colsLayoutStyle,
-      _useContext$layoutHel = _useContext.layoutHelpers,
-      gridLayout = _useContext$layoutHel.gridLayout,
-      totalColumnsWidth = _useContext$layoutHel.totalColumnsWidth,
-      columnHeaderRef = _useContext.columnHeaderRef,
-      visibleColumns = _useContext.visibleColumns;
-
-  var HeadersCells = useMemo(function () {
-    return /*#__PURE__*/React.createElement(SortableHeaderCell, {
-      items: visibleColumns
-    }, /*#__PURE__*/React.createElement(StyledHeadTr, {
-      role: "row",
-      cols: gridLayout,
-      colsLayoutStyle: colsLayoutStyle,
-      isExpandable: isExpandable
-    }, visibleColumns.map(function (h, index) {
-      return /*#__PURE__*/React.createElement(HeaderCellGroup, {
-        header: h,
-        key: h.id,
-        isLast: index === visibleColumns.length - 1
-      });
-    })));
-  }, [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]);
-  var PureHeaders = useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledHeadWrapper, {
-      totalColumnsWidth: totalColumnsWidth,
-      colsLayoutStyle: colsLayoutStyle,
-      ref: columnHeaderRef
-    }, HeadersCells);
-  }, [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells]);
-  return PureHeaders;
-};
-
-var Headers = withConditionalDnDColumnContext(HeadersComp);
-
-function mapStateToProps$1(state) {
-  return {
-    relativeRowMouseCord: state.rows.relativeRowMouseCord
-  };
-}
-
-var VirtualRowsListComponent = function VirtualRowsListComponent() {
-  var _useContext = useContext(DataTableContext),
-      virtualListRef = _useContext.virtualListRef,
-      _useContext$tableProp = _useContext.tableProps,
-      height = _useContext$tableProp.height,
-      width = _useContext$tableProp.width,
-      isLoading = _useContext$tableProp.isLoading,
-      isLoadingAppended = _useContext$tableProp.isLoadingAppended,
-      virtualListHelpers = _useContext.virtualListHelpers,
-      totalColumnsWidth = _useContext.layoutHelpers.totalColumnsWidth,
-      flattenedData = _useContext.flattenedData;
-
-  var totalSize = virtualListHelpers.totalSize,
-      scrollToIndex = virtualListHelpers.scrollToIndex;
-
-  var _useDispatchRowsActio = useDispatchRowsActions(),
-      setFocusedRowId = _useDispatchRowsActio.setFocusedRowId;
-
-  var isEmptyContent = useMemo(function () {
-    return !isLoading && flattenedData.length === 0;
-  }, [isLoading, flattenedData.length]);
-  var tableHeight = useMemo(function () {
-    if (typeof height === 'string') return height.includes('%') ? height : Number.parseInt(height, 10) - FIXED_SIZES.PAGINATION_HEIGHT;
-    return height;
-  }, [height]);
-  var onKeyDown = useCallback(function (e) {
-    if (e.ctrlKey && e.code === 'End') {
-      scrollToIndex(flattenedData.length - 1);
-      setFocusedRowId(flattenedData[flattenedData.length - 1].uid);
-    } else if (e.ctrlKey && e.code === 'Home') {
-      scrollToIndex(0, {
-        align: 'center'
-      });
-      setFocusedRowId(flattenedData[0].uid);
-    }
-  }, [scrollToIndex, setFocusedRowId, flattenedData]);
-  return /*#__PURE__*/React.createElement(StyledVirtualListWrapper, {
-    ref: virtualListRef,
-    height: tableHeight,
-    width: width,
-    "data-testid": DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER,
-    onKeyDown: onKeyDown,
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(StyledTableContentWrapper, {
-    role: "rowgroup",
-    height: totalSize || '100%'
-  }, /*#__PURE__*/React.createElement(Headers, null), isEmptyContent && /*#__PURE__*/React.createElement(EmptyContent, {
-    width: totalColumnsWidth
-  }), isLoading ? /*#__PURE__*/React.createElement(Loader, null) : null, !isLoading && !isEmptyContent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Rows$1, null), /*#__PURE__*/React.createElement(Footer, null), isLoadingAppended && /*#__PURE__*/React.createElement(RowLoading, null))));
-};
-
-var VirtualRowsList = connect(mapStateToProps$1)(VirtualRowsListComponent);
-
-var mapStateToProps = function mapStateToProps(state) {
-  return {
-    reduxFilters: state.filters
-  };
-}; // must manually declare typescript types for mapStateToProps props
-// because react-redux is not smart enough
-
-
-var TableContentComponent = function TableContentComponent(props) {
-  var forwardedRef = props.forwardedRef;
-
-  var _useContext = useContext(DataTableContext),
-      _useContext$tableProp = _useContext.tableProps,
-      height = _useContext$tableProp.height,
-      width = _useContext$tableProp.width,
-      pagination = _useContext$tableProp.pagination,
-      allDataFlattened = _useContext.allDataFlattened,
-      visibleColumns = _useContext.visibleColumns;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      shiftKeyPressed = _useState2[0],
-      setShiftKeyPressed = _useState2[1];
-
-  var PureTableContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(StyledDataTableWrapper, {
-      "data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
-      height: height,
-      width: width,
-      ref: forwardedRef,
-      noSelectionAllowed: shiftKeyPressed,
-      onKeyDown: function onKeyDown(e) {
-        return setShiftKeyPressed(function (prevShiftKeyPressed) {
-          return prevShiftKeyPressed || e.shiftKey;
-        });
-      },
-      onKeyUp: function onKeyUp(e) {
-        return setShiftKeyPressed(function (prevShiftKeyPressed) {
-          return prevShiftKeyPressed && e.code !== 'Shift';
-        });
-      }
-    }, /*#__PURE__*/React.createElement(StyledTableWrapper, {
-      role: "table",
-      "aria-rowcount": allDataFlattened.length,
-      "aria-colcount": visibleColumns.length,
-      "data-testid": DATA_TESTID.DATA_TABLE_TABLE,
-      height: height,
-      width: width
-    }, /*#__PURE__*/React.createElement(VirtualRowsList, null)), pagination ? /*#__PURE__*/React.createElement(Pagination, null) : null);
-  }, [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
-  return PureTableContent;
-};
-
-var ConnectedTableContent = connect(mapStateToProps)(TableContentComponent);
-var TableContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(ConnectedTableContent, _extends({}, props, {
-    forwardedRef: ref
-  }));
-});
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var StyledGripperButton = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-fj20bf-0"
-})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], function (_ref) {
-  var isActive = _ref.isActive,
-      isDragOverlay = _ref.isDragOverlay;
-  return isActive || isDragOverlay ? 'grabbing' : 'grab';
-});
-
-var DragHandle = function DragHandle(_ref2) {
-  var id = _ref2.id,
-      isReachable = _ref2.isReachable,
-      isDragOverlay = _ref2.isDragOverlay,
-      innerRef = _ref2.innerRef;
-
-  var _useContext = useContext(SortableItemContext),
-      draggableProps = _useContext.draggableProps;
-
-  var isActive = draggableProps && !!draggableProps.active;
-  var isDragging = draggableProps && draggableProps.isDragging;
-  return /*#__PURE__*/React.createElement(StyledGripperButton, _extends({
-    role: "button"
-  }, draggableProps && _objectSpread(_objectSpread({}, draggableProps.listeners), draggableProps.attributes), {
-    isActive: isActive,
-    isDragOverlay: isDragOverlay,
-    ref: innerRef,
-    tabIndex: isReachable ? 0 : -1,
-    "data-testid": DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
-    id: "".concat(id, "-drag-handle"),
-    key: "".concat(id, "-drag-handle")
-  }), /*#__PURE__*/React.createElement(GripperVertical, {
-    size: "s",
-    color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']
-  }));
-};
-
-/* eslint-disable react/prop-types */
-var dragHandleColumn = {
-  // Build our singleSelecter column
-  id: 'dragHandleColumn',
-  // Make sure it has an ID
-  // The header doesn't need anything for single selection
-  Header: function Header() {
-    return /*#__PURE__*/React.createElement("div", null);
-  },
-  Cell: function Cell(_ref2) {
-    var row = _ref2.row,
-        isRowSelected = _ref2.isRowSelected,
-        cell = _ref2.cell,
-        isDragOverlay = _ref2.isDragOverlay,
-        draggableProps = _ref2.draggableProps;
-    useRecoverFocusRow(row, cell, isDragOverlay, draggableProps);
-    return /*#__PURE__*/React.createElement(StyledFocusWithin, {
-      style: {
-        width: '100%',
-        height: '100%'
-      },
-      hideFocus: draggableProps && draggableProps.isDragging
-    }, /*#__PURE__*/React.createElement(DragHandle, {
-      id: row.uid,
-      key: row.uid,
-      isReachable: isRowSelected,
-      innerRef: function innerRef(_ref) {
-        if (!isDragOverlay) cell.ref.current = _ref;
-      },
-      isDragOverlay: isDragOverlay
-    }));
-  },
-  textWrap: 'wrap-all',
-  width: 24,
-  padding: 4,
-  canResize: false,
-  disableDnD: true,
-  isFocuseable: false
-};
-
-var INTERNAL_COLUMNS = ['rowActions', 'expander', 'multiSelecter', 'singleSelecter', 'dragHandleColumn'];
-
-/* eslint-disable max-lines */
-
-var styledFocusCss = function styledFocusCss(_ref) {
-  var theme = _ref.theme;
-  return "\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: ").concat(ZIndexDataTable.FOCUS_BORDER, ";\n}");
-};
-
-var StyledFocusWithin = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-0"
-})([":focus-within{", "}"], function (props) {
-  return props.hideFocus ? '' : styledFocusCss(props);
-});
-var StyledDataTableWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-1"
-})(["width:", ";height:", ";user-select:", ";"], function (props) {
-  var _props$width;
-
-  return sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
-}, function (props) {
-  var _props$height;
-
-  return sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
-}, function (_ref2) {
-  var noSelectionAllowed = _ref2.noSelectionAllowed;
-  return noSelectionAllowed ? 'none' : 'auto';
-});
-var StyledTableWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-2"
-})(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], function (_ref3) {
-  var _ref3$width = _ref3.width,
-      width = _ref3$width === void 0 ? '100%' : _ref3$width,
-      _ref3$height = _ref3.height,
-      height = _ref3$height === void 0 ? '100%' : _ref3$height;
-  return "\n  width: ".concat(sizeToCss(width), ";\n  height: ").concat(sizeToCss(height), ";\n  ");
-});
-var StyledTableContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-3"
-})(["position:relative;", ""], function (_ref4) {
-  var _ref4$height = _ref4.height,
-      height = _ref4$height === void 0 ? 'auto' : _ref4$height;
-  return "\n  height: ".concat(sizeToCss(height), ";\n  ");
-});
-var StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-4"
-})(["overflow:auto;", ""], function (_ref5) {
-  var _ref5$height = _ref5.height,
-      height = _ref5$height === void 0 ? 'auto' : _ref5$height,
-      _ref5$width = _ref5.width,
-      width = _ref5$width === void 0 ? '100%' : _ref5$width;
-  return "\n  height: ".concat(sizeToCss(height), ";\n  width: ").concat(sizeToCss(width), ";\n  ");
-});
-/**
- * HEADER
- */
-
-var getGridTemplateColumnsStyle = function getGridTemplateColumnsStyle(_ref6) {
-  var cols = _ref6.cols,
-      _ref6$colsLayoutStyle = _ref6.colsLayoutStyle,
-      colsLayoutStyle = _ref6$colsLayoutStyle === void 0 ? ColsLayoutStyle.Auto : _ref6$colsLayoutStyle;
-  if (!cols) return '';
-
-  if (colsLayoutStyle === 'fixed') {
-    var widthAttr = cols.map(function (col) {
-      return "minmax(0, ".concat(col, ")");
-    }).join(' ');
-    return "grid-template-columns: ".concat(widthAttr);
-  }
-
-  return "grid-template-columns: ".concat(cols.map(function (col) {
-    return "minmax(0, ".concat(col, ")");
-  }).join(' '));
-};
-
-var StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-5"
-})(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], function (props) {
-  return props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%';
-});
-var StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-6"
-})(["", ";", ";"], function (props) {
-  return props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '';
-}, function (props) {
-  return getGridTemplateColumnsStyle({
-    cols: props.cols,
-    isExpandable: props.isExpandable,
-    colsLayoutStyle: props.colsLayoutStyle
-  });
-});
-
-var getStyledHeadTHBorderColor = function getStyledHeadTHBorderColor(props) {
-  if (props.dragOverlay) return 'transparent';
-  if (props.isFirstRowGroup) return 'transparent';
-  return props.theme.colors.neutral['080'];
-};
-
-var StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-7"
-})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], columnPadding, ZIndexDataTable.HEADER_ROW, function (props) {
-  return props.theme.colors.neutral['080'];
-}, getStyledHeadTHBorderColor, function (props) {
-  return props.theme.colors.brand[700];
-}, ZIndexDataTable.FOCUS_BORDER, function (props) {
-  return props.isDraggingActive ? '' : ":hover {\n    border-bottom: 1px solid ".concat(props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800], ";\n    cursor: pointer;\n  }");
-});
-var StyledHeaderRightIconsWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-8"
-})(["height:100%;display:flex;align-items:center;max-height:24px;"]);
-var StyledResizer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-9"
-})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], function (_ref7) {
-  var isResizing = _ref7.isResizing,
-      theme = _ref7.theme;
-  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
-}); // CELL ***********************************************************************/
-
-var StyledActionCell = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-10"
-})(["position:relative;position:sticky;display:inline-block;right:0;background:white;"]);
-var StyledCell = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-11"
-})(["", " display:flex;align-items:center;width:100%;position:relative;"], cellPadding);
-var StyledCellContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-12"
-})(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
-var StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
-  componentId: "sc-38sgfo-13"
-})([""]);
-var StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, function (props) {
-  return props.shouldDisplayEditIcon ? 'block' : 'none';
-}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
-
-var StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-15"
-})(["position:relative;z-index:", ";min-height:", ";height:", ";"], ZIndexDataTable.ROW, function (props) {
-  return props.minHeight || '36px';
-}, function (props) {
-  return props.height || 'auto';
-});
-var GroupHeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.colors.brand[200];
-}, function (props) {
-  return props.padding;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colors.brand[300];
-});
-var GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-38sgfo-17"
-})(["font-weight:", ";font-size:12px;color:", ";"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.neutral[700];
-});
-var StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-18"
-})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], function (props) {
-  return props.minHeight || '36px';
-}, function (props) {
-  return props.height || 'auto';
-}, function (props) {
-  return props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%';
-}, function (props) {
-  return getGridTemplateColumnsStyle({
-    cols: props.cols,
-    colsLayoutStyle: props.colLayoutStyle,
-    isExpandable: props.isExpandable
-  });
-}, function (_ref10) {
-  var backgroundColor = _ref10.backgroundColor,
-      isDragging = _ref10.isDragging,
-      theme = _ref10.theme;
-  return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, function (props) {
-  return props.isDragOverlay ? '' : styledFocusCss(props);
-}, function (_ref11) {
-  var isDropIndicatorPositionInside = _ref11.isDropIndicatorPositionInside,
-      theme = _ref11.theme;
-  if (!isDropIndicatorPositionInside) return '';
-  return styledFocusCss({
-    theme: theme
-  });
-}, function (_ref12) {
-  var shouldDisplayHover = _ref12.shouldDisplayHover,
-      theme = _ref12.theme;
-  return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
-}, function (props) {
-  return props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent';
-}, function (props) {
-  return props.isDragging ? 0.8 : 1;
-}, function (props) {
-  return !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[300], ";\n    ");
-}, function (props) {
-  return props.disabled ? props.theme.colors.neutral['500'] : '#333333';
-});
-
-export { StyledTableWrapper as $, useHierarchyPreviewHandlers as A, getHierarchyKeyboardCoordinates as B, CurrencyRangeFilter as C, DragHandle as D, EditableCell as E, FilterPopover as F, customCollisionDetection as G, useHierarchyDndkitConfig as H, DnDGroupContext as I, withConditionalDnDColumnContext as J, BaseSelectFilter as K, FilterMapItem as L, MultiSelectFilter as M, NumberRangeFilter as N, HeaderResizer as O, HeaderCellTitle as P, HeaderCell as Q, Row$1 as R, SingleSelectFilter as S, TableContent as T, withDnDSortableColumnContext as U, HeaderCellGroup as V, Headers as W, VirtualRowsList as X, INTERNAL_COLUMNS as Y, StyledFocusWithin as Z, StyledDataTableWrapper as _, applyOutOfTheBoxFilters as a, StyledTableContentWrapper as a0, StyledVirtualListWrapper as a1, StyledHeadWrapper as a2, StyledHeadTr as a3, StyledHeadTh as a4, StyledHeaderRightIconsWrapper as a5, StyledResizer as a6, StyledActionCell as a7, StyledCell as a8, StyledCellContent as a9, StyledPencilIcon as aa, StyledEditableContainer as ab, StyledFullsizeGrid as ac, GroupHeaderContainer as ad, GroupHeaderTitle as ae, StyledCellContainer as af, singleSelectColumn as b, dragHandleColumn as c, dateRangeFilterFn as d, expandRowColumn as e, DateRangeFilter as f, DateSwitcherFilter as g, SingleDateFilter as h, TextInputFilter as i, RowLoading as j, dateSwitcherFilterFn as k, TextEditableCell as l, multiSelectColumn as m, ComboboxEditableCell as n, outOfTheBoxEditables as o, Cell as p, Cells as q, DefaultRowContentRenderer as r, singleDateFilterFn as s, RowRenderer as t, useRowRendererHandlers as u, RowVariantHeader as v, RowVariantPrimary as w, RowVariantSecondary as x, RowVariantMapItem as y, Rows$1 as z };
-//# sourceMappingURL=styled-f76a0cd1.js.map