@redsift/design-system-legacy 6.0.0-alpha.9 → 6.1.0-alpha.0

package/esm/_internal/Table2.js

@@ -1,1252 +0,0 @@
-import { _ as _taggedTemplateLiteral, c as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import React, { useState, useEffect, forwardRef, Fragment, useMemo, createRef } from 'react';
-import { useTable, useFilters, useSortBy, useExpanded, usePagination } from 'react-table';
-import styled, { css } from 'styled-components';
-import SimpleBarReact from 'simplebar-react';
-import { ArrowDown } from './icons/ArrowDown.js';
-import { ArrowUp } from './icons/ArrowUp.js';
-import { I as Input } from './Input2.js';
-import { ChevronRight } from './icons/ChevronRight.js';
-import { B as Button } from './Button2.js';
-import { EditOutline } from './icons/EditOutline.js';
-import { DeleteIcon } from './icons/DeleteIcon.js';
-import { ArrowIcon } from './icons/ArrowIcon.js';
-import { ClearIcon } from './icons/ClearIcon.js';
-import { T as Typography } from './Typography2.js';
-import { matchSorter } from 'match-sorter';
-import { CSVLink } from 'react-csv';
-import { ExportIcon } from './icons/ExportIcon.js';
-import { FilterList } from './icons/FilterList.js';
-import { SearchIcon } from './icons/SearchIcon.js';
-import { P as Pagination } from './Pagination2.js';
-import { Cross } from './icons/Cross.js';
-import { C as Checkbox } from './Checkbox2.js';
-
-const useIsMobile = () => {
-  const [state, setState] = useState(false);
-  useEffect(() => {
-    const check = window.matchMedia("(max-width: 767px)");
-
-    const checkIsMobile = () => {
-      if (state !== check.matches) {
-        setState(check.matches);
-      }
-    };
-
-    check.addListener(checkIsMobile);
-    checkIsMobile();
-    return () => {
-      check.removeListener(checkIsMobile);
-    };
-  }, []);
-  return {
-    isMobile: state
-  };
-}; // Use: Place this with your other hooks:
-//  const { isMobile } = useIsMobile();
-
-const DEBOUNCE_TIME = 100;
-const useDebouncedValue = function (value) {
-  let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEBOUNCE_TIME;
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value]);
-  return [debouncedValue];
-};
-
-const _excluded$3 = ["icon", "label", "disabled", "flatIcon", "outlined", "color"],
-      _excluded2 = ["children"],
-      _excluded3 = ["children"],
-      _excluded4 = ["children", "header"],
-      _excluded5 = ["children", "ellipsisOverflow"];
-
-var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
-// - for valid DOM nesting with custom scrollbar (simplebar), we need to use divs unfortunately
-// - aria roles used as recommended here:
-// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role
-// https://github.com/redsift/design-system/commit/8d1d84c2c74d76cbb0996e39b28974f5b8c871c1
-
-const StyledSimpleBar = styled(SimpleBarReact)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  overflow-y: hidden;\n  .simplebar-track.simplebar-horizontal {\n    height: 8px;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.125);\n    ", "\n  }\n  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {\n    height: 8px;\n    top: 0;\n  }\n  .simplebar-scrollbar,\n  .simplebar-scrollbar:before,\n  .simplebar-track.simplebar-horizontal {\n    border-radius: 4px;\n  }\n  .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {\n    background: rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    left: 0;\n  }\n  .simplebar-content:after {\n    content: none;\n  }\n  ", ";\n"])), _ref => {
-  let {
-    xoverflow
-  } = _ref;
-  return xoverflow && "left: ".concat(xoverflow + 2, "px;");
-}, _ref2 => {
-  let {
-    xoverflow,
-    placeholderHeight
-  } = _ref2;
-  return xoverflow && "\n    .simplebar-track.simplebar-vertical {\n      display: none;\n      visibility: hidden;\n    }\n    .simplebar-content {\n      box-sizing: border-box;\n    }\n    .simplebar-placeholder {\n      height: ".concat(placeholderHeight, "px !important;\n    }\n    .simplebar-scrollbar:before {\n      top: 0;\n      bottom: 0;\n    }\n  ");
-});
-const TableContent = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    children,
-    xOverflow,
-    placeholderHeight
-  } = _ref3;
-  return xOverflow ? /*#__PURE__*/React.createElement(StyledSimpleBar, {
-    autoHide: false,
-    forceVisible: "x",
-    ref: ref,
-    xoverflow: xOverflow,
-    placeholderHeight: placeholderHeight
-  }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
-});
-const ExpandIcon = styled(ChevronRight)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  vertical-align: middle;\n  transform: ", ";\n"])), _ref4 => {
-  let {
-    expanded
-  } = _ref4;
-  return expanded ? "rotate(90deg)" : "unset";
-});
-const Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-const sortIconStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 18px;\n  width: 18px;\n  position: relative;\n  top: 5px;\n"])));
-const SortDownIcon = styled(ArrowDown)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n"])), sortIconStyles);
-const SortUpIcon = styled(ArrowUp)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n"])), sortIconStyles);
-const CenteredActionButton = styled(Button)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 40px;\n  white-space: nowrap;\n  ", "\n\n  ", "\n  ", "\n  ", "\n"])), props => props.useMobileLayout ? "\n    flex: 1;\n    justify-content: center;\n    * + && {\n      span {\n        display: none;\n      }\n      svg {\n        margin-right: 0;\n      }\n    }\n  " : "", props => props.hoverColor ? "&:hover { background-color: ".concat(props.hoverColor, "; }") : "", props => props.activeColor ? "&:active { background-color: ".concat(props.activeColor, "; }") : "", props => props.unPadded ? "" : "\n          padding: 8px 16px;\n          svg {\n            margin-right: 14px;\n          }\n          && + && {\n            margin-left: 8px;\n          }\n        ");
-
-const ActionIcon = _ref5 => {
-  let {
-    icon: Icon,
-    label,
-    disabled,
-    flatIcon = true,
-    outlined = false,
-    color
-  } = _ref5,
-      rest = _objectWithoutProperties(_ref5, _excluded$3);
-
-  const iconColor = flatIcon || outlined ? color : "#FFF";
-  return /*#__PURE__*/React.createElement(CenteredActionButton, _extends({
-    disabled: disabled,
-    flatIcon: flatIcon,
-    outlined: outlined,
-    color: color
-  }, rest), /*#__PURE__*/React.createElement(Icon, {
-    disabled: disabled,
-    color: iconColor,
-    fill: iconColor
-  }), /*#__PURE__*/React.createElement("span", null, label));
-};
-
-const Search = styled(Input)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: ", ";\n  max-width: 100%;\n  margin-left: 0;\n"])), props => props.expand ? "100%" : "360px");
-const Header = styled.header(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  flex-wrap: wrap;\n"])));
-const HeaderPrimaryContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  flex: 1 1 360px;\n"])));
-const ActionBar = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  ", "\n\n  ", " {\n    flex: 1;\n  }\n"])), props => props.spaced ? "margin-left: 32px;" : "", Button);
-const TableElement = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: block;\n  border-radius: 4px;\n  width: 100%;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n  overflow: hidden;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.12);\n  border-width: ", ";\n  ", ";\n"])), _ref6 => {
-  let {
-    bordered
-  } = _ref6;
-  return bordered ? "1px 1px 0px 1px" : "0px";
-}, _ref7 => {
-  let {
-    xOverflow
-  } = _ref7;
-  return xOverflow && "overflow-x: scroll; overflow-y: hidden";
-});
-
-const StyledTable = _ref8 => {
-  let {
-    children
-  } = _ref8,
-      props = _objectWithoutProperties(_ref8, _excluded2);
-
-  return /*#__PURE__*/React.createElement(TableElement, _extends({}, props, {
-    role: "table"
-  }), children);
-};
-
-const TableHeaderSection = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n"])), _ref9 => {
-  let {
-    xOverflow
-  } = _ref9;
-  return xOverflow ? "width: auto; display: table;" : "display: flex;";
-}); // last cell style for xOverflow only
-// - last column has width: 100% and max-width: 100%
-
-const ThTdStyles = css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  color: rgba(0, 0, 0, 0.87);\n  font-family: Raleway, sans-serif;\n  font-size: 0.875rem;\n  line-height: 1.375rem;\n  letter-spacing: 0.0071428571em;\n  margin: 0;\n  padding: ", ";\n\n  ", "\n  ", ";\n  width: 100px;\n  min-width: 100px;\n  ", ";\n  ", "\n  ", "\n  ", "\n"])), _ref10 => {
-  let {
-    noPadding
-  } = _ref10;
-  return noPadding ? "0px" : "10px";
-}, _ref11 => {
-  let {
-    stickyCell,
-    xOverflowBg
-  } = _ref11;
-  return stickyCell && "\n    box-shadow: 4px 4px 6px -4px rgba(0, 0, 0, 0.4);\n    background: ".concat(xOverflowBg ? xOverflowBg : "white", ";\n    position: sticky;\n    left: 0;\n    z-index: 1;\n  ");
-}, _ref12 => {
-  let {
-    stickyCellNext
-  } = _ref12;
-  return stickyCellNext && "padding-left: 20px";
-}, _ref13 => {
-  let {
-    enableFlex,
-    size
-  } = _ref13;
-  return enableFlex && "flex: ".concat(size || 100, "px");
-}, _ref14 => {
-  let {
-    size
-  } = _ref14;
-  return size && "\n    width: ".concat(parseInt(size) ? "".concat(size, "px") : size, ";\n    min-width: ").concat(parseInt(size) ? "".concat(size, "px") : size, ";\n    max-width: ").concat(parseInt(size) ? "".concat(size, "px") : size, ";\n  ");
-}, _ref15 => {
-  let {
-    lastCell
-  } = _ref15;
-  return lastCell && "\n    width: 100%;\n    min-width: 100px;\n    max-width: 100%;\n  ";
-}, _ref16 => {
-  let {
-    xOverflow
-  } = _ref16;
-  return xOverflow && "word-wrap: break-word;";
-});
-const TableHeaderTh = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: 600;\n  text-align: left;\n  flex-direction: column;\n  justify-content: ", ";\n  align-items: flex-start;\n  border-bottom: solid 1px rgba(0, 0, 0, 0.42);\n  ", "\n  .sort-icon {\n    transition: opacity 0.2s ease;\n    opacity: ", ";\n  }\n\n  &:hover {\n    .sort-icon {\n      opacity: ", ";\n    }\n  }\n"])), ThTdStyles, _ref17 => {
-  let {
-    justifyStart
-  } = _ref17;
-  return justifyStart ? "flex-start" : "center";
-}, _ref18 => {
-  let {
-    checkbox
-  } = _ref18;
-  return checkbox && "\n    margin: 0px;\n    padding: 0px 20px;\n  ";
-}, _ref19 => {
-  let {
-    sortIconVisible
-  } = _ref19;
-  return sortIconVisible ? "1" : "0";
-}, _ref20 => {
-  let {
-    sortIconVisible
-  } = _ref20;
-  return sortIconVisible ? "1" : "0.3";
-});
-
-const TableHeaderCell = _ref21 => {
-  let {
-    children
-  } = _ref21,
-      props = _objectWithoutProperties(_ref21, _excluded3);
-
-  return /*#__PURE__*/React.createElement(TableHeaderTh, _extends({}, props, {
-    role: "columnheader"
-  }), children);
-};
-
-const rowStyles = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  display: flex;\n  height: auto;\n  min-height: 55px;\n  width: 100%;\n  border-style: solid;\n  border-color: rgba(0, 0, 0, 0.12);\n  border-width: ", ";\n  ", ";\n"])), _ref22 => {
-  let {
-    isFooter,
-    bordered
-  } = _ref22;
-  return isFooter ? "2px 1px 1px 1px" : bordered ? "0px 1px 1px 1px" : "0px 0px 1px 0px";
-}, _ref23 => {
-  let {
-    rowSpacing
-  } = _ref23;
-  return rowSpacing && "\n  border: 1px solid #D8D9D9;\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-top: ".concat(Number.isInteger(rowSpacing) ? "".concat(rowSpacing, "px") : "10px", ";\n");
-});
-const leftBorder = css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  div:not(:first-child) {\n    border-left: solid 1px rgba(0, 0, 0, 0.12);\n  }\n"])));
-const HeaderRow = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", "\n"])), rowStyles, _ref24 => {
-  let {
-    bordered
-  } = _ref24;
-  return bordered && leftBorder;
-}, _ref25 => {
-  let {
-    xOverflow
-  } = _ref25;
-  return xOverflow && " border: 0;";
-});
-const BodyRow = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n"])), rowStyles, _ref26 => {
-  let {
-    bordered
-  } = _ref26;
-  return bordered && leftBorder;
-}, _ref27 => {
-  let {
-    rowColor,
-    selected,
-    selectHighlight
-  } = _ref27;
-  return rowColor || selected && selectHighlight || "unset";
-}, _ref28 => {
-  let {
-    isFooter,
-    isEmpty,
-    rowColor,
-    selected,
-    selectHighlight
-  } = _ref28;
-  return rowColor ? rowColor : selected && selectHighlight ? selectHighlight : isFooter || isEmpty ? "unset" : "rgba(0, 0, 0, 0.04)";
-});
-
-const Row = _ref29 => {
-  let {
-    children,
-    header
-  } = _ref29,
-      props = _objectWithoutProperties(_ref29, _excluded4);
-
-  if (!header) {
-    return /*#__PURE__*/React.createElement(BodyRow, _extends({}, props, {
-      role: "row"
-    }), children);
-  }
-
-  return /*#__PURE__*/React.createElement(HeaderRow, _extends({}, props, {
-    role: "row"
-  }), children);
-};
-
-const TableBody = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), _ref30 => {
-  let {
-    xOverflow
-  } = _ref30;
-  return !xOverflow && "\n  display: flex;\n  flex-direction: column;\n  ";
-}, _ref31 => {
-  let {
-    xOverflow
-  } = _ref31;
-  return xOverflow && "display: table;";
-});
-const CellElement = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  ", ";\n  border-bottom-color: rgba(0, 0, 0, 0.42);\n  border-bottom-color: ", ";\n  text-align: ", ";\n  justify-content: ", ";\n  ", "\n  ", "\n"])), ThTdStyles, _ref32 => {
-  let {
-    rowSpacing
-  } = _ref32;
-  return rowSpacing ? "transparent" : "rgba(0, 0, 0, 0.42)";
-}, _ref33 => {
-  let {
-    isNumber
-  } = _ref33;
-  return isNumber ? "right" : "left";
-}, _ref34 => {
-  let {
-    isNumber
-  } = _ref34;
-  return isNumber ? "flex-end" : "flex-start";
-}, _ref35 => {
-  let {
-    checkbox
-  } = _ref35;
-  return checkbox && "\n    margin: 0px;\n    padding: 0px 20px;\n  ";
-}, _ref36 => {
-  let {
-    onClick
-  } = _ref36;
-  return onClick && "cursor: pointer;";
-});
-const CellElementEllipsis = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-
-const Cell = _ref37 => {
-  let {
-    children,
-    ellipsisOverflow
-  } = _ref37,
-      props = _objectWithoutProperties(_ref37, _excluded5);
-
-  return /*#__PURE__*/React.createElement(CellElement, _extends({}, props, {
-    role: "cell"
-  }), ellipsisOverflow ? /*#__PURE__*/React.createElement(CellElementEllipsis, null, children) : children);
-};
-
-const SortCell = styled(Cell)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: column;\n  padding: 0px !important;\n  width: 25px;\n  height: unset;\n"])));
-const DeleteConfirmButton = styled.button(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  font-family: Raleway, sans-serif;\n  font-weight: 700;\n  color: ", ";\n  border: none;\n  font-size: 0.8125rem;\n  background-color: transparent;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  outline: 0;\n"])), _ref38 => {
-  let {
-    confirm
-  } = _ref38;
-  return confirm ? "#d1462f" : "";
-});
-const GreyButton = styled.button(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  border: 0;\n  padding: ", ";\n  background: #f7f7f7;\n  border: 1px solid #c0c0c2;\n  ", ";\n  ", ";\n  transition: 0.2s;\n  svg {\n    transform: ", ";\n  }\n  svg > path {\n    stroke: #c0c0c2;\n    transition: 0.2s;\n  }\n  cursor: pointer;\n  &:hover,\n  &:focus,\n  &:active {\n    background: #e2e6ea;\n    svg > path {\n      stroke: #333;\n    }\n    outline: none;\n  }\n"])), _ref39 => {
-  let {
-    rowSpacing,
-    action
-  } = _ref39;
-  return rowSpacing && action ? "10px 5px" : "10px 4px";
-}, _ref40 => {
-  let {
-    rowSpacing,
-    action
-  } = _ref40;
-  return rowSpacing && action === "increment" && "\n    border-top-left-radius: 4px;\n    margin-left: -1px;\n    margin-top: -1px;\n    ";
-}, _ref41 => {
-  let {
-    rowSpacing,
-    action
-  } = _ref41;
-  return rowSpacing && action === "decrement" && "\n    border-bottom-left-radius: 4px;\n    margin-left: -1px;\n    margin-bottom: -1px;\n    ";
-}, _ref42 => {
-  let {
-    action
-  } = _ref42;
-  return action === "increment" ? "rotate(-90deg)" : "rotate(90deg)";
-});
-const AddComponentContainer = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  border: 1px solid #ebedf4;\n  border-radius: 5px;\n  background-color: #fafbff;\n  padding: 16px 20px;\n"])));
-
-var _templateObject$1, _templateObject2;
-
-const _excluded$2 = ["title"];
-
-const BlankRows = _ref => {
-  let {
-    onDelete,
-    showDeleteColumn,
-    onSelectionChange,
-    staticPageSize,
-    noPagination,
-    headerGroups,
-    rowSubComponent,
-    editRowEnabled,
-    bordered,
-    rows,
-    page
-  } = _ref;
-  const brows = staticPageSize && staticPageSize - (noPagination ? rows.length : page.length) > 0 ? [...Array(staticPageSize - (noPagination ? rows.length : page.length)).keys()] : (noPagination ? rows.length : page.length) < 1 ? ["0"] : [];
-  return /*#__PURE__*/React.createElement(Fragment, null, brows.map(id => {
-    return /*#__PURE__*/React.createElement(Row, {
-      bordered: bordered,
-      key: "emptyrow-".concat(id),
-      isEmpty: true
-    }, onSelectionChange && /*#__PURE__*/React.createElement(Cell, null), headerGroups[headerGroups.length - 1].headers.map((header, idx) => {
-      return /*#__PURE__*/React.createElement(Cell, {
-        key: "emptycell-".concat(idx)
-      });
-    }), editRowEnabled || onDelete && showDeleteColumn ? /*#__PURE__*/React.createElement(Cell, {
-      size: editRowEnabled && onDelete && showDeleteColumn ? 90 : 80
-    }) : null, rowSubComponent && !editRowEnabled && /*#__PURE__*/React.createElement(Cell, {
-      size: 50
-    }));
-  }));
-};
-
-const ClearSearchButton = _ref2 => {
-  let {
-    title,
-    handleClearSearch
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(Button, {
-    "aria-label": title,
-    onClick: handleClearSearch,
-    flatIcon: true
-  }, /*#__PURE__*/React.createElement(ClearIcon, {
-    alt: title
-  }));
-};
-
-const EditButton = _ref3 => {
-  let {
-    title
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$2);
-
-  let onClick = props.onClick;
-
-  if (props.customOnEdit) {
-    onClick = () => {
-      props.customOnEdit(props.row);
-    };
-  }
-
-  return /*#__PURE__*/React.createElement(ActionIcon, _extends({
-    title: title,
-    "aria-label": title,
-    icon: EditOutline,
-    unPadded: true
-  }, props, {
-    onClick: onClick
-  }));
-};
-
-const ButtonsRowContainer = _ref4 => {
-  let {
-    size = 80,
-    children
-  } = _ref4;
-  return /*#__PURE__*/React.createElement(Cell, {
-    size: size
-  }, children);
-};
-
-const ActionButtons = _ref5 => {
-  let {
-    row,
-    disabled,
-    onDelete,
-    editButtonProps,
-    customOnEdit,
-    locales
-  } = _ref5;
-  const [confirm, setConfirm] = useState(false);
-
-  const handleOnDelete = row => {
-    if (!("_id" in row.original)) {
-      return;
-    }
-
-    const {
-      _id
-    } = row.original;
-    onDelete([_id]);
-    setConfirm(false);
-  };
-
-  const ConfirmButtons = () => {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center"
-      }
-    }, /*#__PURE__*/React.createElement(DeleteConfirmButton, {
-      confirm: true,
-      onClick: () => handleOnDelete(row)
-    }, locales["remove"] || "Remove"), /*#__PURE__*/React.createElement(DeleteConfirmButton, {
-      flat: true,
-      onClick: () => setConfirm(false)
-    }, locales["cancel"] || "Cancel"));
-  };
-
-  if (confirm) {
-    return /*#__PURE__*/React.createElement(ConfirmButtons, null);
-  }
-
-  if (editButtonProps) {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(EditButton, _extends({
-      row: row,
-      customOnEdit: customOnEdit
-    }, editButtonProps)), /*#__PURE__*/React.createElement(ActionIcon, {
-      title: locales["delete"] || "Delete",
-      "aria-label": locales["delete"] || "Delete",
-      onClick: () => setConfirm(true),
-      icon: DeleteIcon,
-      disabled: disabled,
-      unPadded: true,
-      style: {
-        opacity: !disabled ? "1" : "0.2"
-      }
-    }));
-  }
-
-  return /*#__PURE__*/React.createElement(ActionIcon, {
-    title: locales["delete"] || "Delete",
-    "aria-label": locales["delete"] || "Delete",
-    onClick: () => setConfirm(true),
-    icon: DeleteIcon,
-    disabled: disabled,
-    style: {
-      opacity: !disabled ? "1" : "0.2"
-    }
-  });
-};
-
-const DeleteConfirmBanner = _ref6 => {
-  let {
-    onDelete,
-    onCancel,
-    locales
-  } = _ref6;
-  const Banner = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n    display: flex;\n    background: rgb(255, 227, 224);\n    justify-content: space-between;\n    align-items: center;\n    margin-top: 10px;\n    border: 1px solid rgb(235, 237, 244);\n    border-style: solid;\n    border-color: rgb(235, 237, 244);\n    border-radius: 5px;\n    padding: 20px;\n    @media (max-width:480px) {\n      flex-direction: column;\n      span {\n        margin-bottom: 16px;\n      }\n    }\n  "])));
-  const ButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    button:first-child {\n      margin-right: 10px;\n    }\n    @media (max-width:480px) {\n      width: 100%;\n      justify-content: center;\n      button {\n        padding: 6px 32px;\n      }\n    }\n  "])));
-  return /*#__PURE__*/React.createElement(Banner, null, /*#__PURE__*/React.createElement(Typography, {
-    component: "span"
-  }, locales["delete-select-are-you-sure"] || "Are you sure you wish to delete all selected items?"), /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
-    outlined: true,
-    color: "#333",
-    onClick: onCancel
-  }, locales["cancel"] || "Cancel"), /*#__PURE__*/React.createElement(Button, {
-    danger: true,
-    onClick: onDelete
-  }, locales["confirm"] || "Confirm")));
-};
-
-const SortButton = _ref7 => {
-  let {
-    onSort,
-    action,
-    row,
-    rowSpacing
-  } = _ref7;
-  return /*#__PURE__*/React.createElement(GreyButton, {
-    action: action,
-    title: action,
-    "aria-label": action,
-    rowSpacing: rowSpacing,
-    onClick: () => onSort(action, row)
-  }, /*#__PURE__*/React.createElement(ArrowIcon, {
-    title: action
-  }));
-};
-
-const DefaultColumnFilter = _ref => {
-  let {
-    column: {
-      filterValue,
-      setFilter
-    }
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Input, {
-    value: filterValue || "",
-    onChange: e => {
-      setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
-    },
-    showClear: true
-  });
-};
-
-const fuzzyTextFilterFn = (rows, id, filterValue) => {
-  return matchSorter(rows, filterValue, {
-    keys: [row => row.values[id]]
-  });
-}; // Let the table remove the filter if the string is empty
-
-
-fuzzyTextFilterFn.autoRemove = val => !val;
-
-const _excluded$1 = ["locale", "data", "filename", "headers", "hoverColor", "activeColor"];
-
-var _templateObject;
-const StyledCSVLink = styled(CSVLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &,\n  &:hover {\n    text-decoration: none;\n  }\n"])));
-const ExportCSVButton = _ref => {
-  let {
-    locale,
-    data,
-    filename,
-    headers,
-    hoverColor,
-    activeColor
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded$1);
-
-  return /*#__PURE__*/React.createElement(StyledCSVLink, _extends({
-    data: data,
-    filename: filename,
-    headers: headers
-  }, rest), /*#__PURE__*/React.createElement(ActionIcon, {
-    label: locale("export", "Export"),
-    icon: () => /*#__PURE__*/React.createElement(ExportIcon, {
-      width: 18
-    }),
-    hoverColor: hoverColor,
-    activeColor: activeColor
-  }));
-};
-
-const _excluded = ["columns", "data", "footerRow", "title", "bordered", "rowSpacing", "sortableRows", "onSelectionChange", "onSearchChange", "onRowsLengthChange", "onPageSizeChange", "onPageChange", "onDelete", "onSort", "showDeleteColumn", "export", "defaultSorted", "defaultPageSize", "searchID", "searchLabel", "checkboxProps", "inputProps", "selectHighlight", "staticPageSize", "noPagination", "color", "iconButtonsHoverColor", "iconButtonsActiveColor", "primaryButtonsHoverColor", "primaryButtonsActiveColor", "filterable", "CustomFilterButton", "sortable", "CustomActions", "AddComponent", "customOnEdit", "CustomSelectedActions", "CustomPrimaryActions", "CustomHeaderComponent", "rowSubComponent", "rowSubComponentEditMode", "xOverflow", "xOverflowBg", "locales", "smallTableButtonDesign", "onPreviousPage", "onNextPage", "gotoPageIndex", "onVisibleRowsChange", "onVisibleRowsChangeDebounceTime", "onChangeSortBy"];
-const Table = _ref => {
-  let {
-    columns,
-    data,
-    footerRow,
-    title,
-    bordered,
-    rowSpacing,
-    sortableRows,
-    onSelectionChange,
-    onSearchChange = () => {},
-    onRowsLengthChange = () => {},
-    onPageSizeChange = () => {},
-    onPageChange = () => {},
-    onDelete,
-    onSort,
-    showDeleteColumn,
-    export: exportSettings,
-    defaultSorted,
-    defaultPageSize = 10,
-    searchID,
-    searchLabel,
-    checkboxProps,
-    inputProps,
-    selectHighlight,
-    staticPageSize,
-    noPagination,
-    color = "#000",
-    iconButtonsHoverColor = "#00000019",
-    iconButtonsActiveColor = "#00000032",
-    primaryButtonsHoverColor = "#222222",
-    primaryButtonsActiveColor = "#111111",
-    filterable,
-    CustomFilterButton,
-    sortable = true,
-    CustomActions,
-    AddComponent,
-    customOnEdit,
-    CustomSelectedActions,
-    CustomPrimaryActions,
-    CustomHeaderComponent,
-    rowSubComponent,
-    rowSubComponentEditMode,
-    xOverflow,
-    xOverflowBg,
-    locales = {},
-    smallTableButtonDesign = false,
-    onPreviousPage = () => {},
-    onNextPage = () => {},
-    gotoPageIndex = null,
-    onVisibleRowsChange = null,
-    onVisibleRowsChangeDebounceTime = null,
-    onChangeSortBy = null
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const [selected, setSelected] = useState({});
-  const [selectAll, setSelectAll] = useState(false);
-  const [showFilter, setShowFilter] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const [showAddComponent, setShowAddComponent] = useState(false);
-  const [search, setSearch] = useState("");
-  const [currentData, setCurrentData] = useState([]);
-  const [transformedFooterRow, setTransformedFooterRow] = useState();
-  const [placeholderHeight, setPlaceholderHeight] = useState();
-
-  const locale = (key, fallback) => locales[key] || fallback;
-
-  const {
-    isMobile
-  } = useIsMobile();
-  const displayCustomActionsBelowSearch = isMobile || smallTableButtonDesign; // recalculate height of simplebar wrapper
-  // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react#accessing-simplebar-instance
-
-  const ref = /*#__PURE__*/createRef();
-  useEffect(() => {
-    if (xOverflow && ref && ref.current) {
-      ref.current.recalculate();
-    }
-  }, [ref, xOverflow]);
-  useEffect(() => {
-    if (xOverflow && currentData.length) {
-      const content = document.querySelector(".simplebar-content");
-      setPlaceholderHeight(content.offsetHeight);
-    }
-  }, [currentData, xOverflow]);
-  const defaultColumn = useMemo(() => ({
-    Filter: DefaultColumnFilter
-  }), []);
-  const filterTypes = useMemo(() => ({
-    // Add a new fuzzyTextFilterFn filter type.
-    fuzzyText: fuzzyTextFilterFn,
-    // override the default text filter to use "startWith"
-    text: (rows, id, filterValue) => {
-      return rows.filter(row => {
-        const rowValue = row.values[id];
-        return rowValue !== undefined ? String(rowValue).toLowerCase().startsWith(String(filterValue).toLowerCase()) : true;
-      });
-    }
-  }), []); // for xOverflow:
-
-  const isFirstCell = (itemSize, idx, xOverflow) => {
-    if (idx === 0 && xOverflow) {
-      return xOverflow;
-    }
-
-    return itemSize;
-  };
-
-  const isLastCell = (itemCount, idx, xOverflow) => {
-    if (itemCount - 1 === idx && xOverflow) {
-      return true;
-    }
-  };
-
-  useEffect(() => {
-    onSearchChange(search);
-  }, [search]);
-  useEffect(() => {
-    if (!searchID || !search) {
-      return setCurrentData(data);
-    }
-
-    const newData = data.filter(item => item[searchID] && item[searchID].toLowerCase().includes(search.toLowerCase()));
-    setCurrentData(newData);
-  }, [data, searchID, search]);
-  useEffect(() => {
-    if (!footerRow) {
-      return setTransformedFooterRow(null);
-    }
-
-    setTransformedFooterRow({
-      values: footerRow,
-      original: {
-        _isFooter: true,
-        _noSelect: true,
-        CustomNoSelect: () => null
-      }
-    });
-  }, [footerRow]);
-  const useTableData = {
-    columns,
-    data: currentData,
-    defaultColumn,
-    filterTypes,
-    initialState: {
-      pageSize: defaultPageSize
-    }
-  };
-
-  if (defaultSorted) {
-    useTableData.initialState = _objectSpread2(_objectSpread2({}, useTableData.initialState), {}, {
-      sortBy: defaultSorted
-    });
-  }
-
-  const instance = useTable(useTableData, useFilters, useSortBy, useExpanded, usePagination);
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    prepareRow,
-    rows,
-    state: {
-      pageIndex,
-      pageSize
-    },
-    canPreviousPage,
-    canNextPage,
-    gotoPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    page,
-    pageOptions
-  } = instance;
-  const [debouncedRows] = useDebouncedValue(noPagination ? rows : page, onVisibleRowsChangeDebounceTime);
-  useEffect(() => {
-    if (onVisibleRowsChange !== null) {
-      onVisibleRowsChange(debouncedRows);
-    }
-  }, [debouncedRows]);
-  useEffect(() => {
-    if (gotoPageIndex !== null) {
-      gotoPage(gotoPageIndex);
-    }
-  }, [gotoPageIndex, pageIndex]);
-  useEffect(() => {
-    if (staticPageSize) {
-      setPageSize(staticPageSize);
-    }
-  }, [staticPageSize, setPageSize]);
-  useEffect(() => {
-    onPageSizeChange(pageSize);
-  }, [pageSize]);
-  useEffect(() => {
-    onPageChange(pageIndex);
-  }, [pageIndex]);
-  useEffect(() => {
-    if (xOverflow) {
-      const content = document.querySelector(".simplebar-content");
-      setPlaceholderHeight(content.offsetHeight);
-    }
-  }, [xOverflow, pageSize]);
-  useEffect(() => {
-    onRowsLengthChange(rows.length);
-  }, [rows.length, onRowsLengthChange]);
-
-  const getSelectedList = function () {
-    let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selected;
-    const list = [];
-    Object.keys(state).forEach(key => {
-      if (state[key]) {
-        list.push(key);
-      }
-    });
-    return list;
-  };
-
-  const handleDeleteSelected = () => {
-    onDelete(getSelectedList());
-    setDeleteConfirm(false);
-    setSelectAll(false);
-    setSelected({});
-  };
-
-  const handleSortGeneric = (action, row) => {
-    const newData = [...currentData];
-    const index = parseInt(row.id);
-
-    if (action === "increment" && index > 0) {
-      const firstRow = newData[index];
-      const lastRow = newData[index - 1];
-      newData.splice(index - 1, 2, firstRow, lastRow);
-    }
-
-    if (action === "decrement" && index < newData.length - 1) {
-      const firstRow = newData[index];
-      const lastRow = newData[index + 1];
-      newData.splice(index, 2, lastRow, firstRow);
-    }
-
-    setCurrentData(newData);
-  };
-
-  const returnSelectedList = newState => {
-    onSelectionChange(getSelectedList(newState));
-  };
-
-  const handleSelectAll = () => {
-    const newState = {};
-    page.forEach(row => {
-      if ("_id" in row.original && !row.original._noSelect) {
-        const {
-          _id
-        } = row.original;
-        newState[_id] = !selectAll;
-      }
-    });
-    setSelected(newState);
-    setSelectAll(!selectAll);
-    returnSelectedList(newState);
-  };
-
-  const handleOnSelectionChange = row => {
-    if (!("_id" in row.original)) {
-      return;
-    }
-
-    const {
-      _id
-    } = row.original;
-
-    const newState = _objectSpread2(_objectSpread2({}, selected), {}, {
-      [_id]: !selected[_id]
-    });
-
-    if (selected[_id] && selectAll) {
-      setSelectAll(false);
-    } else {
-      let allSelected = true;
-      page.forEach(row => {
-        if ("_id" in row.original && !row.original._noSelect) {
-          const {
-            _id
-          } = row.original;
-
-          if (!newState[_id]) {
-            allSelected = false;
-            return;
-          }
-        }
-      });
-
-      if (allSelected) {
-        setSelectAll(true);
-      }
-    }
-
-    setSelected(newState);
-    returnSelectedList(newState);
-  };
-
-  const selectedList = getSelectedList();
-
-  const handleClearSearch = () => {
-    setSearch("");
-  };
-
-  const itemsSelected = Boolean(selectedList.length);
-  useEffect(() => {
-    if (itemsSelected && showAddComponent) {
-      setShowAddComponent(false);
-    }
-  }, [selected.length]); // if data gets updated, check if every selected item is still on the data set
-
-  useEffect(() => {
-    const newSelected = _objectSpread2({}, selected);
-
-    for (const selectedListElement of selectedList) {
-      const doesItemStillExists = currentData.find(item => "_id" in item && !item._noSelect && item._id.toString() === selectedListElement);
-
-      if (!doesItemStillExists) {
-        newSelected[selectedListElement] = false;
-      }
-    }
-
-    setSelected(newSelected);
-  }, [currentData]);
-  useEffect(() => {
-    const existingIds = [];
-
-    for (const row of page) {
-      if ("_id" in row.original && !row.original._noSelect) {
-        existingIds.push(row.original._id);
-      }
-    }
-
-    if (existingIds.length) {
-      let shouldSelectAll = true;
-
-      for (const id of existingIds) {
-        if (!selected[id]) {
-          shouldSelectAll = false;
-          break;
-        }
-      }
-
-      setSelectAll(shouldSelectAll);
-    }
-  }, [page]);
-  const editRowEnabled = rowSubComponentEditMode && rowSubComponent;
-  return /*#__PURE__*/React.createElement(Container, null, (title || filterable || exportSettings || CustomActions) && /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderPrimaryContent, null, /*#__PURE__*/React.createElement(Typography, {
-    size: "h3",
-    component: "h3"
-  }, title)), /*#__PURE__*/React.createElement(ActionBar, null, filterable && (CustomFilterButton ? /*#__PURE__*/React.createElement(CustomFilterButton, {
-    onClick: () => setShowFilter(!showFilter)
-  }) : /*#__PURE__*/React.createElement(ActionIcon, {
-    title: locale("filter-rows", "Filter rows"),
-    "aria-label": locale("filter-rows", "Filter rows"),
-    label: locale("filter-rows", "Filter rows"),
-    onClick: () => setShowFilter(!showFilter),
-    hoverColor: iconButtonsHoverColor,
-    activeColor: iconButtonsActiveColor,
-    icon: FilterList
-  })), exportSettings && /*#__PURE__*/React.createElement(ExportCSVButton, _extends({
-    locale: locale,
-    data: data,
-    filename: exportSettings.filename,
-    headers: exportSettings.headers,
-    hoverColor: iconButtonsHoverColor,
-    activeColor: iconButtonsActiveColor
-  }, exportSettings)), CustomActions && /*#__PURE__*/React.createElement(CustomActions, null))), (searchID || CustomPrimaryActions || AddComponent || itemsSelected && (CustomSelectedActions || onDelete)) && /*#__PURE__*/React.createElement(Header, null, searchID && /*#__PURE__*/React.createElement(Search, _extends({
-    expand: displayCustomActionsBelowSearch,
-    color: color
-  }, inputProps, {
-    leftIcon: /*#__PURE__*/React.createElement(SearchIcon, {
-      title: locale("search", "Search")
-    }),
-    rightIcon: search && search.length && /*#__PURE__*/React.createElement(ClearSearchButton, {
-      handleClearSearch: handleClearSearch
-    }),
-    label: searchLabel || locale("search", "Search"),
-    value: search,
-    onChange: ev => setSearch(ev.target.value)
-  })), (CustomPrimaryActions || !itemsSelected && AddComponent && !showAddComponent || itemsSelected && (CustomSelectedActions || onDelete)) && /*#__PURE__*/React.createElement(ActionBar, null, CustomPrimaryActions && /*#__PURE__*/React.createElement(CustomPrimaryActions, null), itemsSelected && [CustomSelectedActions && /*#__PURE__*/React.createElement(CustomSelectedActions, null), onDelete && /*#__PURE__*/React.createElement(ActionIcon, {
-    title: locale("delete", "Deletex"),
-    "aria-label": locale("delete", "Delete"),
-    label: locale("delete", "Delete"),
-    onClick: () => setDeleteConfirm(true),
-    flatIcon: false,
-    hoverColor: iconButtonsHoverColor,
-    activeColor: iconButtonsActiveColor,
-    outlined: true,
-    color: color,
-    icon: DeleteIcon,
-    useMobileLayout: isMobile
-  })], AddComponent && !showAddComponent && !itemsSelected && /*#__PURE__*/React.createElement(ActionIcon, {
-    title: locale("add", "Add"),
-    "aria-label": locale("add", "Add"),
-    label: locale("add", "Add"),
-    onClick: () => setShowAddComponent(!showAddComponent),
-    icon: props => /*#__PURE__*/React.createElement(Cross, _extends({
-      rotation: "45deg",
-      width: 13
-    }, props)),
-    flatIcon: false,
-    hoverColor: primaryButtonsHoverColor,
-    activeColor: primaryButtonsActiveColor,
-    color: color,
-    flexed: isMobile
-  }))), CustomHeaderComponent && /*#__PURE__*/React.createElement(CustomHeaderComponent, null), showAddComponent && AddComponent && /*#__PURE__*/React.createElement(AddComponentContainer, null, /*#__PURE__*/React.createElement(AddComponent, {
-    closeAddComponent: () => setShowAddComponent(false)
-  })), deleteConfirm && /*#__PURE__*/React.createElement(DeleteConfirmBanner, {
-    locales: locales,
-    color: color,
-    onDelete: handleDeleteSelected,
-    onCancel: () => setDeleteConfirm(false)
-  }), /*#__PURE__*/React.createElement(StyledTable, _extends({
-    selectHighlight: selectHighlight,
-    xOverflow: xOverflow,
-    bordered: bordered
-  }, getTableProps(), rest), /*#__PURE__*/React.createElement(TableContent, {
-    ref: ref,
-    xOverflow: xOverflow,
-    placeholderHeight: placeholderHeight
-  }, /*#__PURE__*/React.createElement(TableHeaderSection, {
-    role: "rowgroup",
-    bordered: bordered,
-    xOverflow: xOverflow
-  }, headerGroups.map((headerGroup, i) => /*#__PURE__*/React.createElement(Row, _extends({
-    role: "row",
-    key: "header-row-".concat(i),
-    header: true,
-    bordered: bordered,
-    xOverflow: xOverflow
-  }, headerGroup.getHeaderGroupProps()), onSelectionChange && /*#__PURE__*/React.createElement(TableHeaderCell, {
-    role: "columnheader",
-    checkbox: true,
-    size: 50
-  }, /*#__PURE__*/React.createElement(Checkbox, _extends({
-    dashed: !selectAll && selectedList.length
-  }, checkboxProps, {
-    hideLabel: true,
-    checked: selectAll || selectedList.length,
-    onChange: handleSelectAll
-  }), "Select all")), headerGroup.headers.map((column, idx) => {
-    return /*#__PURE__*/React.createElement(TableHeaderCell, _extends({
-      role: "columnheader",
-      key: "header-row-".concat(i, "-content-").concat(idx),
-      enableFlex: !xOverflow,
-      stickyCell: idx === 0 && xOverflow,
-      stickyCellNext: idx === 1 && xOverflow,
-      size: isFirstCell(column.size, idx, xOverflow),
-      lastCell: isLastCell(headerGroup.headers.length, idx, xOverflow),
-      sortIconVisible: column.isSorted,
-      justifyStart: column.disableFilters && showFilter,
-      xOverflowBg: xOverflowBg
-    }, column.getHeaderProps()), sortable ? /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, column.getSortByToggleProps()), {}, {
-      onClick: function () {
-        onChangeSortBy && onChangeSortBy({
-          isSorted: column.isSorted,
-          isSortedDesc: column.isSortedDesc,
-          columnId: column.id
-        });
-        column.getSortByToggleProps().onClick(...arguments);
-      },
-      title: "".concat(locale("sort-by", "Sort by"), " ").concat((typeof column.Header == "string" ? column.Header : column.id || column.accessor).toLowerCase())
-    }), column.render("Header"), column.canSort && /*#__PURE__*/React.createElement("span", {
-      className: "sort-icon"
-    }, column.isSorted ? column.isSortedDesc ? /*#__PURE__*/React.createElement(SortDownIcon, null) : /*#__PURE__*/React.createElement(SortUpIcon, null) : /*#__PURE__*/React.createElement(SortUpIcon, null))) : column.render("Header"), showFilter && column.canFilter && /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: "100%",
-        marginBottom: "10px"
-      }
-    }, column.render("Filter")));
-  }), editRowEnabled || onDelete && showDeleteColumn ? /*#__PURE__*/React.createElement(TableHeaderCell, {
-    role: "columnheader",
-    size: rowSubComponentEditMode && rowSubComponent && showDeleteColumn && onDelete ? 90 : 80
-  }, "Actions") : null, rowSubComponent && !editRowEnabled && /*#__PURE__*/React.createElement(TableHeaderCell, {
-    role: "columnheader",
-    noPadding: true,
-    size: 40
-  })))), /*#__PURE__*/React.createElement(TableBody, _extends({
-    role: "rowgroup"
-  }, getTableBodyProps(), {
-    xOverflow: xOverflow
-  }), [...(noPagination ? rows : page), ...(transformedFooterRow ? [transformedFooterRow] : [])].map((row, rowIdx) => {
-    const {
-      original: {
-        _noSelect,
-        _customRowColor,
-        _id,
-        _isFooter,
-        _onClick,
-        CustomNoSelect
-      }
-    } = row;
-    return prepareRow(row) || /*#__PURE__*/React.createElement(Fragment, {
-      key: "row-".concat(rowIdx)
-    }, /*#__PURE__*/React.createElement(Row, _extends({
-      role: "row",
-      bordered: bordered,
-      rowSpacing: rowSpacing,
-      selected: selected[row.original._id],
-      selectHighlight: selectHighlight,
-      rowColor: _isFooter ? undefined : _customRowColor,
-      isFooter: _isFooter,
-      xOverflow: xOverflow
-    }, row.getRowProps()), sortableRows && /*#__PURE__*/React.createElement(SortCell, {
-      role: "cell",
-      size: 25
-    }, /*#__PURE__*/React.createElement(SortButton, {
-      action: "increment",
-      onSort: onSort ? onSort : handleSortGeneric,
-      row: row,
-      rowSpacing: rowSpacing
-    }), /*#__PURE__*/React.createElement(SortButton, {
-      action: "decrement",
-      onSort: onSort ? onSort : handleSortGeneric,
-      row: row,
-      rowSpacing: rowSpacing
-    })), onSelectionChange && /*#__PURE__*/React.createElement(Cell, {
-      role: "cell",
-      rowSpacing: rowSpacing,
-      checkbox: true,
-      size: 50
-    }, CustomNoSelect && _noSelect ? /*#__PURE__*/React.createElement(CustomNoSelect, null) : /*#__PURE__*/React.createElement(Checkbox, _extends({}, checkboxProps, {
-      hideLabel: true,
-      checked: selected[_id],
-      disabled: _noSelect,
-      onChange: () => handleOnSelectionChange(row)
-    }), locales["select"] || "Select")), row.cells.map((cell, cellIdx) => {
-      const cellSize = isFirstCell(cell.column.size, cellIdx, xOverflow);
-      const lastCell = isLastCell(row.cells.length, cellIdx, xOverflow);
-      return /*#__PURE__*/React.createElement(Cell, _extends({
-        role: "cell",
-        onClick: _onClick,
-        key: cell.value,
-        enableFlex: !xOverflow,
-        stickyCell: cellIdx === 0 && xOverflow,
-        stickyCellNext: cellIdx === 1 && xOverflow,
-        xOverflow: xOverflow,
-        size: cellSize,
-        lastCell: lastCell,
-        isNumber: cell.column.isNumber,
-        xOverflowBg: xOverflowBg,
-        ellipsisOverflow: ["string", "number"].includes(typeof cell.value)
-      }, cell.getCellProps()), cell.value || cell.column.isNumber ? cell.render(_isFooter ? "Footer" : "Cell") : "");
-    }), (editRowEnabled || showDeleteColumn && onDelete) && /*#__PURE__*/React.createElement(ButtonsRowContainer, {
-      size: editRowEnabled && showDeleteColumn && onDelete ? 90 : 80
-    }, !_noSelect && showDeleteColumn && onDelete ? /*#__PURE__*/React.createElement(ActionButtons, {
-      locales: locales,
-      onDelete: onDelete,
-      disabled: _noSelect,
-      row: row,
-      customOnEdit: customOnEdit,
-      hoverColor: iconButtonsHoverColor,
-      activeColor: iconButtonsActiveColor,
-      editButtonProps: editRowEnabled && row.getToggleRowExpandedProps()
-    }) : !_noSelect && editRowEnabled && /*#__PURE__*/React.createElement(EditButton, _extends({
-      title: locales["edit"] || "Edit",
-      row: row,
-      customOnEdit: customOnEdit
-    }, row.getToggleRowExpandedProps()))), rowSubComponent && !editRowEnabled && /*#__PURE__*/React.createElement(Cell, _extends({
-      role: "cell",
-      noPadding: true,
-      size: 40
-    }, row.getToggleRowExpandedProps()), /*#__PURE__*/React.createElement(ExpandIcon, {
-      expanded: row.isExpanded || undefined
-    }))), row.isExpanded ? /*#__PURE__*/React.createElement("div", null, rowSubComponent({
-      row
-    })) : null);
-  }), /*#__PURE__*/React.createElement(BlankRows, {
-    onDelete: onDelete,
-    showDeleteColumn: showDeleteColumn,
-    onSelectionChange: onSelectionChange,
-    staticPageSize: staticPageSize,
-    noPagination: noPagination,
-    rows: rows,
-    page: page,
-    bordered: bordered,
-    headerGroups: headerGroups,
-    editRowEnabled: editRowEnabled,
-    rowSubComponent: rowSubComponent
-  })))), !noPagination && /*#__PURE__*/React.createElement(Pagination, {
-    totalEntries: rows.length,
-    gotoPage: gotoPage,
-    nextPage: () => {
-      onNextPage(pageIndex + 1);
-      nextPage();
-    },
-    previousPage: () => {
-      onPreviousPage(pageIndex - 1);
-      previousPage();
-    },
-    pageCount: pageOptions.length,
-    staticPageSize: staticPageSize,
-    setPageSize: setPageSize,
-    pageSize: pageSize,
-    pageIndex: pageIndex,
-    canNextPage: canNextPage,
-    color: color,
-    canPreviousPage: canPreviousPage,
-    pageSizeOptions: [10, 20, 30, 40, 50],
-    locales: locales
-  }));
-};
-
-export { Table as T, useDebouncedValue as a, useIsMobile as u };
-//# sourceMappingURL=Table2.js.map