@popmenu/common-ui 0.18.3-alpha.1 → 0.18.4-alpha.2

package/build/index.es.js

@@ -40,16 +40,13 @@ export { default as ListItem } from '@material-ui/core/ListItem';
 export { default as ListItemIcon } from '@material-ui/core/ListItemIcon';
 export { default as ListItemSecondaryAction } from '@material-ui/core/ListItemSecondaryAction';
 export { default as ListItemText } from '@material-ui/core/ListItemText';
-import Menu from '@material-ui/core/Menu';
 export { default as Menu } from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
 export { default as MenuItem } from '@material-ui/core/MenuItem';
 export { default as MenuList } from '@material-ui/core/MenuList';
 import MuiRadio from '@material-ui/core/Radio';
 import TextField from '@material-ui/core/TextField';
 export { default as TextField } from '@material-ui/core/TextField';
 import MuiSwitch from '@material-ui/core/Switch';
-import { Pagination } from '@material-ui/lab';
 export { default as Tab } from '@material-ui/core/Tab';
 export { default as Tabs } from '@material-ui/core/Tabs';
 import MuiToggleButton from '@material-ui/lab/ToggleButton';
@@ -92,70 +89,6 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || from);
-}
-
-var _path$3K;
-
-function _extends$3$() { _extends$3$ = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3$.apply(this, arguments); }
-
-function SvgMore(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3$({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3K || (_path$3K = /*#__PURE__*/React.createElement("path", {
-    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.333A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z"
-  })));
-}
-
-var _path$2X;
-
-function _extends$3b() { _extends$3b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3b.apply(this, arguments); }
-
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3b({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2X || (_path$2X = /*#__PURE__*/React.createElement("path", {
-    d: "M4 6l4 4 4-4"
-  })));
-}
-
-var _path$2W;
-
-function _extends$3a() { _extends$3a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3a.apply(this, arguments); }
-
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3a({
-    viewBox: "0 0 16 16",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "currentColor",
-    width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$2W || (_path$2W = /*#__PURE__*/React.createElement("path", {
-    d: "M12 10L8 6l-4 4"
-  })));
 }
 
 var _path$1f;
@@ -1057,2249 +990,6 @@ var Switch = forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-let renderErr = 'Renderer Error ☝️';
-
-const actions = {
-  init: 'init',
-};
-
-const defaultRenderer = ({ value = '' }) => value;
-const emptyRenderer = () => <>&nbsp;</>;
-
-const defaultColumn = {
-  Cell: defaultRenderer,
-  width: 150,
-  minWidth: 0,
-  maxWidth: Number.MAX_SAFE_INTEGER,
-};
-
-function mergeProps(...propList) {
-  return propList.reduce((props, next) => {
-    const { style, className, ...rest } = next;
-
-    props = {
-      ...props,
-      ...rest,
-    };
-
-    if (style) {
-      props.style = props.style
-        ? { ...(props.style || {}), ...(style || {}) }
-        : style;
-    }
-
-    if (className) {
-      props.className = props.className
-        ? props.className + ' ' + className
-        : className;
-    }
-
-    if (props.className === '') {
-      delete props.className;
-    }
-
-    return props
-  }, {})
-}
-
-function handlePropGetter(prevProps, userProps, meta) {
-  // Handle a lambda, pass it the previous props
-  if (typeof userProps === 'function') {
-    return handlePropGetter({}, userProps(prevProps, meta))
-  }
-
-  // Handle an array, merge each item as separate props
-  if (Array.isArray(userProps)) {
-    return mergeProps(prevProps, ...userProps)
-  }
-
-  // Handle an object by default, merge the two objects
-  return mergeProps(prevProps, userProps)
-}
-
-const makePropGetter = (hooks, meta = {}) => {
-  return (userProps = {}) =>
-    [...hooks, userProps].reduce(
-      (prev, next) =>
-        handlePropGetter(prev, next, {
-          ...meta,
-          userProps,
-        }),
-      {}
-    )
-};
-
-const reduceHooks = (hooks, initial, meta = {}, allowUndefined) =>
-  hooks.reduce((prev, next) => {
-    const nextValue = next(prev, meta);
-    if (process.env.NODE_ENV !== 'production') {
-      if (!allowUndefined && typeof nextValue === 'undefined') {
-        console.info(next);
-        throw new Error(
-          'React Table: A reducer hook ☝️ just returned undefined! This is not allowed.'
-        )
-      }
-    }
-    return nextValue
-  }, initial);
-
-const loopHooks = (hooks, context, meta = {}) =>
-  hooks.forEach(hook => {
-    const nextValue = hook(context, meta);
-    if (process.env.NODE_ENV !== 'production') {
-      if (typeof nextValue !== 'undefined') {
-        console.info(hook, nextValue);
-        throw new Error(
-          'React Table: A loop-type hook ☝️ just returned a value! This is not allowed.'
-        )
-      }
-    }
-  });
-
-function ensurePluginOrder(plugins, befores, pluginName, afters) {
-  if (process.env.NODE_ENV !== 'production' && afters) {
-    throw new Error(
-      `Defining plugins in the "after" section of ensurePluginOrder is no longer supported (see plugin ${pluginName})`
-    )
-  }
-  const pluginIndex = plugins.findIndex(
-    plugin => plugin.pluginName === pluginName
-  );
-
-  if (pluginIndex === -1) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(`The plugin "${pluginName}" was not found in the plugin list!
-This usually means you need to need to name your plugin hook by setting the 'pluginName' property of the hook function, eg:
-
-  ${pluginName}.pluginName = '${pluginName}'
-`)
-    }
-  }
-
-  befores.forEach(before => {
-    const beforeIndex = plugins.findIndex(
-      plugin => plugin.pluginName === before
-    );
-    if (beforeIndex > -1 && beforeIndex > pluginIndex) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw new Error(
-          `React Table: The ${pluginName} plugin hook must be placed after the ${before} plugin hook!`
-        )
-      }
-    }
-  });
-}
-
-function functionalUpdate(updater, old) {
-  return typeof updater === 'function' ? updater(old) : updater
-}
-
-function useGetLatest(obj) {
-  const ref = React__default.useRef();
-  ref.current = obj;
-
-  return React__default.useCallback(() => ref.current, [])
-}
-
-// SSR has issues with useLayoutEffect still, so use useEffect during SSR
-const safeUseLayoutEffect =
-  typeof document !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
-
-function useMountedLayoutEffect(fn, deps) {
-  const mountedRef = React__default.useRef(false);
-
-  safeUseLayoutEffect(() => {
-    if (mountedRef.current) {
-      fn();
-    }
-    mountedRef.current = true;
-    // eslint-disable-next-line
-  }, deps);
-}
-
-function makeRenderer(instance, column, meta = {}) {
-  return (type, userProps = {}) => {
-    const Comp = typeof type === 'string' ? column[type] : type;
-
-    if (typeof Comp === 'undefined') {
-      console.info(column);
-      throw new Error(renderErr)
-    }
-
-    return flexRender(Comp, { ...instance, column, ...meta, ...userProps })
-  }
-}
-
-function flexRender(Comp, props) {
-  return isReactComponent(Comp) ? <Comp {...props} /> : Comp
-}
-
-function isReactComponent(component) {
-  return (
-    isClassComponent(component) ||
-    typeof component === 'function' ||
-    isExoticComponent(component)
-  )
-}
-
-function isClassComponent(component) {
-  return (
-    typeof component === 'function' &&
-    (() => {
-      const proto = Object.getPrototypeOf(component);
-      return proto.prototype && proto.prototype.isReactComponent
-    })()
-  )
-}
-
-function isExoticComponent(component) {
-  return (
-    typeof component === 'object' &&
-    typeof component.$$typeof === 'symbol' &&
-    ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description)
-  )
-}
-
-// Build the visible columns, headers and flat column list
-function linkColumnStructure(columns, parent, depth = 0) {
-  return columns.map(column => {
-    column = {
-      ...column,
-      parent,
-      depth,
-    };
-
-    assignColumnAccessor(column);
-
-    if (column.columns) {
-      column.columns = linkColumnStructure(column.columns, column, depth + 1);
-    }
-    return column
-  })
-}
-
-function flattenColumns(columns) {
-  return flattenBy(columns, 'columns')
-}
-
-function assignColumnAccessor(column) {
-  // First check for string accessor
-  let { id, accessor, Header } = column;
-
-  if (typeof accessor === 'string') {
-    id = id || accessor;
-    const accessorPath = accessor.split('.');
-    accessor = row => getBy(row, accessorPath);
-  }
-
-  if (!id && typeof Header === 'string' && Header) {
-    id = Header;
-  }
-
-  if (!id && column.columns) {
-    console.error(column);
-    throw new Error('A column ID (or unique "Header" value) is required!')
-  }
-
-  if (!id) {
-    console.error(column);
-    throw new Error('A column ID (or string accessor) is required!')
-  }
-
-  Object.assign(column, {
-    id,
-    accessor,
-  });
-
-  return column
-}
-
-function decorateColumn(column, userDefaultColumn) {
-  if (!userDefaultColumn) {
-    throw new Error()
-  }
-  Object.assign(column, {
-    // Make sure there is a fallback header, just in case
-    Header: emptyRenderer,
-    Footer: emptyRenderer,
-    ...defaultColumn,
-    ...userDefaultColumn,
-    ...column,
-  });
-
-  Object.assign(column, {
-    originalWidth: column.width,
-  });
-
-  return column
-}
-
-// Build the header groups from the bottom up
-function makeHeaderGroups(
-  allColumns,
-  defaultColumn,
-  additionalHeaderProperties = () => ({})
-) {
-  const headerGroups = [];
-
-  let scanColumns = allColumns;
-
-  let uid = 0;
-  const getUID = () => uid++;
-
-  while (scanColumns.length) {
-    // The header group we are creating
-    const headerGroup = {
-      headers: [],
-    };
-
-    // The parent columns we're going to scan next
-    const parentColumns = [];
-
-    const hasParents = scanColumns.some(d => d.parent);
-
-    // Scan each column for parents
-    scanColumns.forEach(column => {
-      // What is the latest (last) parent column?
-      let latestParentColumn = [...parentColumns].reverse()[0];
-
-      let newParent;
-
-      if (hasParents) {
-        // If the column has a parent, add it if necessary
-        if (column.parent) {
-          newParent = {
-            ...column.parent,
-            originalId: column.parent.id,
-            id: `${column.parent.id}_${getUID()}`,
-            headers: [column],
-            ...additionalHeaderProperties(column),
-          };
-        } else {
-          // If other columns have parents, we'll need to add a place holder if necessary
-          const originalId = `${column.id}_placeholder`;
-          newParent = decorateColumn(
-            {
-              originalId,
-              id: `${column.id}_placeholder_${getUID()}`,
-              placeholderOf: column,
-              headers: [column],
-              ...additionalHeaderProperties(column),
-            },
-            defaultColumn
-          );
-        }
-
-        // If the resulting parent columns are the same, just add
-        // the column and increment the header span
-        if (
-          latestParentColumn &&
-          latestParentColumn.originalId === newParent.originalId
-        ) {
-          latestParentColumn.headers.push(column);
-        } else {
-          parentColumns.push(newParent);
-        }
-      }
-
-      headerGroup.headers.push(column);
-    });
-
-    headerGroups.push(headerGroup);
-
-    // Start scanning the parent columns
-    scanColumns = parentColumns;
-  }
-
-  return headerGroups.reverse()
-}
-
-const pathObjCache = new Map();
-
-function getBy(obj, path, def) {
-  if (!path) {
-    return obj
-  }
-  const cacheKey = typeof path === 'function' ? path : JSON.stringify(path);
-
-  const pathObj =
-    pathObjCache.get(cacheKey) ||
-    (() => {
-      const pathObj = makePathArray(path);
-      pathObjCache.set(cacheKey, pathObj);
-      return pathObj
-    })();
-
-  let val;
-
-  try {
-    val = pathObj.reduce((cursor, pathPart) => cursor[pathPart], obj);
-  } catch (e) {
-    // continue regardless of error
-  }
-  return typeof val !== 'undefined' ? val : def
-}
-
-function getFirstDefined(...args) {
-  for (let i = 0; i < args.length; i += 1) {
-    if (typeof args[i] !== 'undefined') {
-      return args[i]
-    }
-  }
-}
-
-function isFunction(a) {
-  if (typeof a === 'function') {
-    return a
-  }
-}
-
-function flattenBy(arr, key) {
-  const flat = [];
-
-  const recurse = arr => {
-    arr.forEach(d => {
-      if (!d[key]) {
-        flat.push(d);
-      } else {
-        recurse(d[key]);
-      }
-    });
-  };
-
-  recurse(arr);
-
-  return flat
-}
-
-function expandRows(
-  rows,
-  { manualExpandedKey, expanded, expandSubRows = true }
-) {
-  const expandedRows = [];
-
-  const handleRow = (row, addToExpandedRows = true) => {
-    row.isExpanded =
-      (row.original && row.original[manualExpandedKey]) || expanded[row.id];
-
-    row.canExpand = row.subRows && !!row.subRows.length;
-
-    if (addToExpandedRows) {
-      expandedRows.push(row);
-    }
-
-    if (row.subRows && row.subRows.length && row.isExpanded) {
-      row.subRows.forEach(row => handleRow(row, expandSubRows));
-    }
-  };
-
-  rows.forEach(row => handleRow(row));
-
-  return expandedRows
-}
-
-function unpreparedAccessWarning() {
-  throw new Error(
-    'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
-  )
-}
-
-//
-
-const reOpenBracket = /\[/g;
-const reCloseBracket = /\]/g;
-
-function makePathArray(obj) {
-  return (
-    flattenDeep(obj)
-      // remove all periods in parts
-      .map(d => String(d).replace('.', '_'))
-      // join parts using period
-      .join('.')
-      // replace brackets with periods
-      .replace(reOpenBracket, '.')
-      .replace(reCloseBracket, '')
-      // split it back out on periods
-      .split('.')
-  )
-}
-
-function flattenDeep(arr, newArr = []) {
-  if (!Array.isArray(arr)) {
-    newArr.push(arr);
-  } else {
-    for (let i = 0; i < arr.length; i += 1) {
-      flattenDeep(arr[i], newArr);
-    }
-  }
-  return newArr
-}
-
-const defaultGetTableProps = props => ({
-  role: 'table',
-  ...props,
-});
-
-const defaultGetTableBodyProps = props => ({
-  role: 'rowgroup',
-  ...props,
-});
-
-const defaultGetHeaderProps = (props, { column }) => ({
-  key: `header_${column.id}`,
-  colSpan: column.totalVisibleHeaderCount,
-  role: 'columnheader',
-  ...props,
-});
-
-const defaultGetFooterProps = (props, { column }) => ({
-  key: `footer_${column.id}`,
-  colSpan: column.totalVisibleHeaderCount,
-  ...props,
-});
-
-const defaultGetHeaderGroupProps = (props, { index }) => ({
-  key: `headerGroup_${index}`,
-  role: 'row',
-  ...props,
-});
-
-const defaultGetFooterGroupProps = (props, { index }) => ({
-  key: `footerGroup_${index}`,
-  ...props,
-});
-
-const defaultGetRowProps = (props, { row }) => ({
-  key: `row_${row.id}`,
-  role: 'row',
-  ...props,
-});
-
-const defaultGetCellProps = (props, { cell }) => ({
-  key: `cell_${cell.row.id}_${cell.column.id}`,
-  role: 'cell',
-  ...props,
-});
-
-function makeDefaultPluginHooks() {
-  return {
-    useOptions: [],
-    stateReducers: [],
-    useControlledState: [],
-    columns: [],
-    columnsDeps: [],
-    allColumns: [],
-    allColumnsDeps: [],
-    accessValue: [],
-    materializedColumns: [],
-    materializedColumnsDeps: [],
-    useInstanceAfterData: [],
-    visibleColumns: [],
-    visibleColumnsDeps: [],
-    headerGroups: [],
-    headerGroupsDeps: [],
-    useInstanceBeforeDimensions: [],
-    useInstance: [],
-    prepareRow: [],
-    getTableProps: [defaultGetTableProps],
-    getTableBodyProps: [defaultGetTableBodyProps],
-    getHeaderGroupProps: [defaultGetHeaderGroupProps],
-    getFooterGroupProps: [defaultGetFooterGroupProps],
-    getHeaderProps: [defaultGetHeaderProps],
-    getFooterProps: [defaultGetFooterProps],
-    getRowProps: [defaultGetRowProps],
-    getCellProps: [defaultGetCellProps],
-    useFinalInstance: [],
-  }
-}
-
-actions.resetHiddenColumns = 'resetHiddenColumns';
-actions.toggleHideColumn = 'toggleHideColumn';
-actions.setHiddenColumns = 'setHiddenColumns';
-actions.toggleHideAllColumns = 'toggleHideAllColumns';
-
-const useColumnVisibility = hooks => {
-  hooks.getToggleHiddenProps = [defaultGetToggleHiddenProps];
-  hooks.getToggleHideAllColumnsProps = [defaultGetToggleHideAllColumnsProps];
-
-  hooks.stateReducers.push(reducer$2);
-  hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
-  hooks.headerGroupsDeps.push((deps, { instance }) => [
-    ...deps,
-    instance.state.hiddenColumns,
-  ]);
-  hooks.useInstance.push(useInstance$2);
-};
-
-useColumnVisibility.pluginName = 'useColumnVisibility';
-
-const defaultGetToggleHiddenProps = (props, { column }) => [
-  props,
-  {
-    onChange: e => {
-      column.toggleHidden(!e.target.checked);
-    },
-    style: {
-      cursor: 'pointer',
-    },
-    checked: column.isVisible,
-    title: 'Toggle Column Visible',
-  },
-];
-
-const defaultGetToggleHideAllColumnsProps = (props, { instance }) => [
-  props,
-  {
-    onChange: e => {
-      instance.toggleHideAllColumns(!e.target.checked);
-    },
-    style: {
-      cursor: 'pointer',
-    },
-    checked: !instance.allColumnsHidden && !instance.state.hiddenColumns.length,
-    title: 'Toggle All Columns Hidden',
-    indeterminate:
-      !instance.allColumnsHidden && instance.state.hiddenColumns.length,
-  },
-];
-
-function reducer$2(state, action, previousState, instance) {
-  if (action.type === actions.init) {
-    return {
-      hiddenColumns: [],
-      ...state,
-    }
-  }
-
-  if (action.type === actions.resetHiddenColumns) {
-    return {
-      ...state,
-      hiddenColumns: instance.initialState.hiddenColumns || [],
-    }
-  }
-
-  if (action.type === actions.toggleHideColumn) {
-    const should =
-      typeof action.value !== 'undefined'
-        ? action.value
-        : !state.hiddenColumns.includes(action.columnId);
-
-    const hiddenColumns = should
-      ? [...state.hiddenColumns, action.columnId]
-      : state.hiddenColumns.filter(d => d !== action.columnId);
-
-    return {
-      ...state,
-      hiddenColumns,
-    }
-  }
-
-  if (action.type === actions.setHiddenColumns) {
-    return {
-      ...state,
-      hiddenColumns: functionalUpdate(action.value, state.hiddenColumns),
-    }
-  }
-
-  if (action.type === actions.toggleHideAllColumns) {
-    const shouldAll =
-      typeof action.value !== 'undefined'
-        ? action.value
-        : !state.hiddenColumns.length;
-
-    return {
-      ...state,
-      hiddenColumns: shouldAll ? instance.allColumns.map(d => d.id) : [],
-    }
-  }
-}
-
-function useInstanceBeforeDimensions(instance) {
-  const {
-    headers,
-    state: { hiddenColumns },
-  } = instance;
-
-  const isMountedRef = React__default.useRef(false);
-
-  if (!isMountedRef.current) ;
-
-  const handleColumn = (column, parentVisible) => {
-    column.isVisible = parentVisible && !hiddenColumns.includes(column.id);
-
-    let totalVisibleHeaderCount = 0;
-
-    if (column.headers && column.headers.length) {
-      column.headers.forEach(
-        subColumn =>
-          (totalVisibleHeaderCount += handleColumn(subColumn, column.isVisible))
-      );
-    } else {
-      totalVisibleHeaderCount = column.isVisible ? 1 : 0;
-    }
-
-    column.totalVisibleHeaderCount = totalVisibleHeaderCount;
-
-    return totalVisibleHeaderCount
-  };
-
-  let totalVisibleHeaderCount = 0;
-
-  headers.forEach(
-    subHeader => (totalVisibleHeaderCount += handleColumn(subHeader, true))
-  );
-}
-
-function useInstance$2(instance) {
-  const {
-    columns,
-    flatHeaders,
-    dispatch,
-    allColumns,
-    getHooks,
-    state: { hiddenColumns },
-    autoResetHiddenColumns = true,
-  } = instance;
-
-  const getInstance = useGetLatest(instance);
-
-  const allColumnsHidden = allColumns.length === hiddenColumns.length;
-
-  const toggleHideColumn = React__default.useCallback(
-    (columnId, value) =>
-      dispatch({ type: actions.toggleHideColumn, columnId, value }),
-    [dispatch]
-  );
-
-  const setHiddenColumns = React__default.useCallback(
-    value => dispatch({ type: actions.setHiddenColumns, value }),
-    [dispatch]
-  );
-
-  const toggleHideAllColumns = React__default.useCallback(
-    value => dispatch({ type: actions.toggleHideAllColumns, value }),
-    [dispatch]
-  );
-
-  const getToggleHideAllColumnsProps = makePropGetter(
-    getHooks().getToggleHideAllColumnsProps,
-    { instance: getInstance() }
-  );
-
-  flatHeaders.forEach(column => {
-    column.toggleHidden = value => {
-      dispatch({
-        type: actions.toggleHideColumn,
-        columnId: column.id,
-        value,
-      });
-    };
-
-    column.getToggleHiddenProps = makePropGetter(
-      getHooks().getToggleHiddenProps,
-      {
-        instance: getInstance(),
-        column,
-      }
-    );
-  });
-
-  const getAutoResetHiddenColumns = useGetLatest(autoResetHiddenColumns);
-
-  useMountedLayoutEffect(() => {
-    if (getAutoResetHiddenColumns()) {
-      dispatch({ type: actions.resetHiddenColumns });
-    }
-  }, [dispatch, columns]);
-
-  Object.assign(instance, {
-    allColumnsHidden,
-    toggleHideColumn,
-    setHiddenColumns,
-    toggleHideAllColumns,
-    getToggleHideAllColumnsProps,
-  });
-}
-
-const defaultInitialState = {};
-const defaultColumnInstance = {};
-const defaultReducer = (state, action, prevState) => state;
-const defaultGetSubRows = (row, index) => row.subRows || [];
-const defaultGetRowId = (row, index, parent) =>
-  `${parent ? [parent.id, index].join('.') : index}`;
-const defaultUseControlledState = d => d;
-
-function applyDefaults(props) {
-  const {
-    initialState = defaultInitialState,
-    defaultColumn = defaultColumnInstance,
-    getSubRows = defaultGetSubRows,
-    getRowId = defaultGetRowId,
-    stateReducer = defaultReducer,
-    useControlledState = defaultUseControlledState,
-    ...rest
-  } = props;
-
-  return {
-    ...rest,
-    initialState,
-    defaultColumn,
-    getSubRows,
-    getRowId,
-    stateReducer,
-    useControlledState,
-  }
-}
-
-const useTable = (props, ...plugins) => {
-  // Apply default props
-  props = applyDefaults(props);
-
-  // Add core plugins
-  plugins = [useColumnVisibility, ...plugins];
-
-  // Create the table instance
-  let instanceRef = React__default.useRef({});
-
-  // Create a getter for the instance (helps avoid a lot of potential memory leaks)
-  const getInstance = useGetLatest(instanceRef.current);
-
-  // Assign the props, plugins and hooks to the instance
-  Object.assign(getInstance(), {
-    ...props,
-    plugins,
-    hooks: makeDefaultPluginHooks(),
-  });
-
-  // Allow plugins to register hooks as early as possible
-  plugins.filter(Boolean).forEach(plugin => {
-    plugin(getInstance().hooks);
-  });
-
-  // Consume all hooks and make a getter for them
-  const getHooks = useGetLatest(getInstance().hooks);
-  getInstance().getHooks = getHooks;
-  delete getInstance().hooks;
-
-  // Allow useOptions hooks to modify the options coming into the table
-  Object.assign(
-    getInstance(),
-    reduceHooks(getHooks().useOptions, applyDefaults(props))
-  );
-
-  const {
-    data,
-    columns: userColumns,
-    initialState,
-    defaultColumn,
-    getSubRows,
-    getRowId,
-    stateReducer,
-    useControlledState,
-  } = getInstance();
-
-  // Setup user reducer ref
-  const getStateReducer = useGetLatest(stateReducer);
-
-  // Build the reducer
-  const reducer = React__default.useCallback(
-    (state, action) => {
-      // Detect invalid actions
-      if (!action.type) {
-        console.info({ action });
-        throw new Error('Unknown Action 👆')
-      }
-
-      // Reduce the state from all plugin reducers
-      return [
-        ...getHooks().stateReducers,
-        // Allow the user to add their own state reducer(s)
-        ...(Array.isArray(getStateReducer())
-          ? getStateReducer()
-          : [getStateReducer()]),
-      ].reduce(
-        (s, handler) => handler(s, action, state, getInstance()) || s,
-        state
-      )
-    },
-    [getHooks, getStateReducer, getInstance]
-  );
-
-  // Start the reducer
-  const [reducerState, dispatch] = React__default.useReducer(reducer, undefined, () =>
-    reducer(initialState, { type: actions.init })
-  );
-
-  // Allow the user to control the final state with hooks
-  const state = reduceHooks(
-    [...getHooks().useControlledState, useControlledState],
-    reducerState,
-    { instance: getInstance() }
-  );
-
-  Object.assign(getInstance(), {
-    state,
-    dispatch,
-  });
-
-  // Decorate All the columns
-  const columns = React__default.useMemo(
-    () =>
-      linkColumnStructure(
-        reduceHooks(getHooks().columns, userColumns, {
-          instance: getInstance(),
-        })
-      ),
-    [
-      getHooks,
-      getInstance,
-      userColumns,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHooks().columnsDeps, [], { instance: getInstance() }),
-    ]
-  );
-  getInstance().columns = columns;
-
-  // Get the flat list of all columns and allow hooks to decorate
-  // those columns (and trigger this memoization via deps)
-  let allColumns = React__default.useMemo(
-    () =>
-      reduceHooks(getHooks().allColumns, flattenColumns(columns), {
-        instance: getInstance(),
-      }).map(assignColumnAccessor),
-    [
-      columns,
-      getHooks,
-      getInstance,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHooks().allColumnsDeps, [], {
-        instance: getInstance(),
-      }),
-    ]
-  );
-  getInstance().allColumns = allColumns;
-
-  // Access the row model using initial columns
-  const [rows, flatRows, rowsById] = React__default.useMemo(() => {
-    let rows = [];
-    let flatRows = [];
-    const rowsById = {};
-
-    const allColumnsQueue = [...allColumns];
-
-    while (allColumnsQueue.length) {
-      const column = allColumnsQueue.shift();
-      accessRowsForColumn({
-        data,
-        rows,
-        flatRows,
-        rowsById,
-        column,
-        getRowId,
-        getSubRows,
-        accessValueHooks: getHooks().accessValue,
-        getInstance,
-      });
-    }
-
-    return [rows, flatRows, rowsById]
-  }, [allColumns, data, getRowId, getSubRows, getHooks, getInstance]);
-
-  Object.assign(getInstance(), {
-    rows,
-    initialRows: [...rows],
-    flatRows,
-    rowsById,
-    // materializedColumns,
-  });
-
-  loopHooks(getHooks().useInstanceAfterData, getInstance());
-
-  // Get the flat list of all columns AFTER the rows
-  // have been access, and allow hooks to decorate
-  // those columns (and trigger this memoization via deps)
-  let visibleColumns = React__default.useMemo(
-    () =>
-      reduceHooks(getHooks().visibleColumns, allColumns, {
-        instance: getInstance(),
-      }).map(d => decorateColumn(d, defaultColumn)),
-    [
-      getHooks,
-      allColumns,
-      getInstance,
-      defaultColumn,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHooks().visibleColumnsDeps, [], {
-        instance: getInstance(),
-      }),
-    ]
-  );
-
-  // Combine new visible columns with all columns
-  allColumns = React__default.useMemo(() => {
-    const columns = [...visibleColumns];
-
-    allColumns.forEach(column => {
-      if (!columns.find(d => d.id === column.id)) {
-        columns.push(column);
-      }
-    });
-
-    return columns
-  }, [allColumns, visibleColumns]);
-  getInstance().allColumns = allColumns;
-
-  if (process.env.NODE_ENV !== 'production') {
-    const duplicateColumns = allColumns.filter((column, i) => {
-      return allColumns.findIndex(d => d.id === column.id) !== i
-    });
-
-    if (duplicateColumns.length) {
-      console.info(allColumns);
-      throw new Error(
-        `Duplicate columns were found with ids: "${duplicateColumns
-          .map(d => d.id)
-          .join(', ')}" in the columns array above`
-      )
-    }
-  }
-
-  // Make the headerGroups
-  const headerGroups = React__default.useMemo(
-    () =>
-      reduceHooks(
-        getHooks().headerGroups,
-        makeHeaderGroups(visibleColumns, defaultColumn),
-        getInstance()
-      ),
-    [
-      getHooks,
-      visibleColumns,
-      defaultColumn,
-      getInstance,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...reduceHooks(getHooks().headerGroupsDeps, [], {
-        instance: getInstance(),
-      }),
-    ]
-  );
-  getInstance().headerGroups = headerGroups;
-
-  // Get the first level of headers
-  const headers = React__default.useMemo(
-    () => (headerGroups.length ? headerGroups[0].headers : []),
-    [headerGroups]
-  );
-  getInstance().headers = headers;
-
-  // Provide a flat header list for utilities
-  getInstance().flatHeaders = headerGroups.reduce(
-    (all, headerGroup) => [...all, ...headerGroup.headers],
-    []
-  );
-
-  loopHooks(getHooks().useInstanceBeforeDimensions, getInstance());
-
-  // Filter columns down to visible ones
-  const visibleColumnsDep = visibleColumns
-    .filter(d => d.isVisible)
-    .map(d => d.id)
-    .sort()
-    .join('_');
-
-  visibleColumns = React__default.useMemo(
-    () => visibleColumns.filter(d => d.isVisible),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [visibleColumns, visibleColumnsDep]
-  );
-  getInstance().visibleColumns = visibleColumns;
-
-  // Header Visibility is needed by this point
-  const [
-    totalColumnsMinWidth,
-    totalColumnsWidth,
-    totalColumnsMaxWidth,
-  ] = calculateHeaderWidths(headers);
-
-  getInstance().totalColumnsMinWidth = totalColumnsMinWidth;
-  getInstance().totalColumnsWidth = totalColumnsWidth;
-  getInstance().totalColumnsMaxWidth = totalColumnsMaxWidth;
-
-  loopHooks(getHooks().useInstance, getInstance())
-
-  // Each materialized header needs to be assigned a render function and other
-  // prop getter properties here.
-  ;[...getInstance().flatHeaders, ...getInstance().allColumns].forEach(
-    column => {
-      // Give columns/headers rendering power
-      column.render = makeRenderer(getInstance(), column);
-
-      // Give columns/headers a default getHeaderProps
-      column.getHeaderProps = makePropGetter(getHooks().getHeaderProps, {
-        instance: getInstance(),
-        column,
-      });
-
-      // Give columns/headers a default getFooterProps
-      column.getFooterProps = makePropGetter(getHooks().getFooterProps, {
-        instance: getInstance(),
-        column,
-      });
-    }
-  );
-
-  getInstance().headerGroups = React__default.useMemo(
-    () =>
-      headerGroups.filter((headerGroup, i) => {
-        // Filter out any headers and headerGroups that don't have visible columns
-        headerGroup.headers = headerGroup.headers.filter(column => {
-          const recurse = headers =>
-            headers.filter(column => {
-              if (column.headers) {
-                return recurse(column.headers)
-              }
-              return column.isVisible
-            }).length;
-          if (column.headers) {
-            return recurse(column.headers)
-          }
-          return column.isVisible
-        });
-
-        // Give headerGroups getRowProps
-        if (headerGroup.headers.length) {
-          headerGroup.getHeaderGroupProps = makePropGetter(
-            getHooks().getHeaderGroupProps,
-            { instance: getInstance(), headerGroup, index: i }
-          );
-
-          headerGroup.getFooterGroupProps = makePropGetter(
-            getHooks().getFooterGroupProps,
-            { instance: getInstance(), headerGroup, index: i }
-          );
-
-          return true
-        }
-
-        return false
-      }),
-    [headerGroups, getInstance, getHooks]
-  );
-
-  getInstance().footerGroups = [...getInstance().headerGroups].reverse();
-
-  // The prepareRow function is absolutely necessary and MUST be called on
-  // any rows the user wishes to be displayed.
-
-  getInstance().prepareRow = React__default.useCallback(
-    row => {
-      row.getRowProps = makePropGetter(getHooks().getRowProps, {
-        instance: getInstance(),
-        row,
-      });
-
-      // Build the visible cells for each row
-      row.allCells = allColumns.map(column => {
-        const value = row.values[column.id];
-
-        const cell = {
-          column,
-          row,
-          value,
-        };
-
-        // Give each cell a getCellProps base
-        cell.getCellProps = makePropGetter(getHooks().getCellProps, {
-          instance: getInstance(),
-          cell,
-        });
-
-        // Give each cell a renderer function (supports multiple renderers)
-        cell.render = makeRenderer(getInstance(), column, {
-          row,
-          cell,
-          value,
-        });
-
-        return cell
-      });
-
-      row.cells = visibleColumns.map(column =>
-        row.allCells.find(cell => cell.column.id === column.id)
-      );
-
-      // need to apply any row specific hooks (useExpanded requires this)
-      loopHooks(getHooks().prepareRow, row, { instance: getInstance() });
-    },
-    [getHooks, getInstance, allColumns, visibleColumns]
-  );
-
-  getInstance().getTableProps = makePropGetter(getHooks().getTableProps, {
-    instance: getInstance(),
-  });
-
-  getInstance().getTableBodyProps = makePropGetter(
-    getHooks().getTableBodyProps,
-    {
-      instance: getInstance(),
-    }
-  );
-
-  loopHooks(getHooks().useFinalInstance, getInstance());
-
-  return getInstance()
-};
-
-function calculateHeaderWidths(headers, left = 0) {
-  let sumTotalMinWidth = 0;
-  let sumTotalWidth = 0;
-  let sumTotalMaxWidth = 0;
-  let sumTotalFlexWidth = 0;
-
-  headers.forEach(header => {
-    let { headers: subHeaders } = header;
-
-    header.totalLeft = left;
-
-    if (subHeaders && subHeaders.length) {
-      const [
-        totalMinWidth,
-        totalWidth,
-        totalMaxWidth,
-        totalFlexWidth,
-      ] = calculateHeaderWidths(subHeaders, left);
-      header.totalMinWidth = totalMinWidth;
-      header.totalWidth = totalWidth;
-      header.totalMaxWidth = totalMaxWidth;
-      header.totalFlexWidth = totalFlexWidth;
-    } else {
-      header.totalMinWidth = header.minWidth;
-      header.totalWidth = Math.min(
-        Math.max(header.minWidth, header.width),
-        header.maxWidth
-      );
-      header.totalMaxWidth = header.maxWidth;
-      header.totalFlexWidth = header.canResize ? header.totalWidth : 0;
-    }
-    if (header.isVisible) {
-      left += header.totalWidth;
-      sumTotalMinWidth += header.totalMinWidth;
-      sumTotalWidth += header.totalWidth;
-      sumTotalMaxWidth += header.totalMaxWidth;
-      sumTotalFlexWidth += header.totalFlexWidth;
-    }
-  });
-
-  return [sumTotalMinWidth, sumTotalWidth, sumTotalMaxWidth, sumTotalFlexWidth]
-}
-
-function accessRowsForColumn({
-  data,
-  rows,
-  flatRows,
-  rowsById,
-  column,
-  getRowId,
-  getSubRows,
-  accessValueHooks,
-  getInstance,
-}) {
-  // Access the row's data column-by-column
-  // We do it this way so we can incrementally add materialized
-  // columns after the first pass and avoid excessive looping
-  const accessRow = (originalRow, rowIndex, depth = 0, parent, parentRows) => {
-    // Keep the original reference around
-    const original = originalRow;
-
-    const id = getRowId(originalRow, rowIndex, parent);
-
-    let row = rowsById[id];
-
-    // If the row hasn't been created, let's make it
-    if (!row) {
-      row = {
-        id,
-        original,
-        index: rowIndex,
-        depth,
-        cells: [{}], // This is a dummy cell
-      };
-
-      // Override common array functions (and the dummy cell's getCellProps function)
-      // to show an error if it is accessed without calling prepareRow
-      row.cells.map = unpreparedAccessWarning;
-      row.cells.filter = unpreparedAccessWarning;
-      row.cells.forEach = unpreparedAccessWarning;
-      row.cells[0].getCellProps = unpreparedAccessWarning;
-
-      // Create the cells and values
-      row.values = {};
-
-      // Push this row into the parentRows array
-      parentRows.push(row);
-      // Keep track of every row in a flat array
-      flatRows.push(row);
-      // Also keep track of every row by its ID
-      rowsById[id] = row;
-
-      // Get the original subrows
-      row.originalSubRows = getSubRows(originalRow, rowIndex);
-
-      // Then recursively access them
-      if (row.originalSubRows) {
-        const subRows = [];
-        row.originalSubRows.forEach((d, i) =>
-          accessRow(d, i, depth + 1, row, subRows)
-        );
-        // Keep the new subRows array on the row
-        row.subRows = subRows;
-      }
-    } else if (row.subRows) {
-      // If the row exists, then it's already been accessed
-      // Keep recursing, but don't worry about passing the
-      // accumlator array (those rows already exist)
-      row.originalSubRows.forEach((d, i) => accessRow(d, i, depth + 1, row));
-    }
-
-    // If the column has an accessor, use it to get a value
-    if (column.accessor) {
-      row.values[column.id] = column.accessor(
-        originalRow,
-        rowIndex,
-        row,
-        parentRows,
-        data
-      );
-    }
-
-    // Allow plugins to manipulate the column value
-    row.values[column.id] = reduceHooks(
-      accessValueHooks,
-      row.values[column.id],
-      {
-        row,
-        column,
-        instance: getInstance(),
-      },
-      true
-    );
-  };
-
-  data.forEach((originalRow, rowIndex) =>
-    accessRow(originalRow, rowIndex, 0, undefined, rows)
-  );
-}
-
-const pluginName = 'usePagination';
-
-// Actions
-actions.resetPage = 'resetPage';
-actions.gotoPage = 'gotoPage';
-actions.setPageSize = 'setPageSize';
-
-const usePagination = hooks => {
-  hooks.stateReducers.push(reducer$1);
-  hooks.useInstance.push(useInstance$1);
-};
-
-usePagination.pluginName = pluginName;
-
-function reducer$1(state, action, previousState, instance) {
-  if (action.type === actions.init) {
-    return {
-      pageSize: 10,
-      pageIndex: 0,
-      ...state,
-    }
-  }
-
-  if (action.type === actions.resetPage) {
-    return {
-      ...state,
-      pageIndex: instance.initialState.pageIndex || 0,
-    }
-  }
-
-  if (action.type === actions.gotoPage) {
-    const { pageCount, page } = instance;
-    const newPageIndex = functionalUpdate(action.pageIndex, state.pageIndex);
-    let canNavigate = false;
-
-    if (newPageIndex > state.pageIndex) {
-      // next page
-      canNavigate =
-        pageCount === -1
-          ? page.length >= state.pageSize
-          : newPageIndex < pageCount;
-    } else if (newPageIndex < state.pageIndex) {
-      // prev page
-      canNavigate = newPageIndex > -1;
-    }
-
-    if (!canNavigate) {
-      return state
-    }
-
-    return {
-      ...state,
-      pageIndex: newPageIndex,
-    }
-  }
-
-  if (action.type === actions.setPageSize) {
-    const { pageSize } = action;
-    const topRowIndex = state.pageSize * state.pageIndex;
-    const pageIndex = Math.floor(topRowIndex / pageSize);
-
-    return {
-      ...state,
-      pageIndex,
-      pageSize,
-    }
-  }
-}
-
-function useInstance$1(instance) {
-  const {
-    rows,
-    autoResetPage = true,
-    manualExpandedKey = 'expanded',
-    plugins,
-    pageCount: userPageCount,
-    paginateExpandedRows = true,
-    expandSubRows = true,
-    state: {
-      pageSize,
-      pageIndex,
-      expanded,
-      globalFilter,
-      filters,
-      groupBy,
-      sortBy,
-    },
-    dispatch,
-    data,
-    manualPagination,
-  } = instance;
-
-  ensurePluginOrder(
-    plugins,
-    ['useGlobalFilter', 'useFilters', 'useGroupBy', 'useSortBy', 'useExpanded'],
-    'usePagination'
-  );
-
-  const getAutoResetPage = useGetLatest(autoResetPage);
-
-  useMountedLayoutEffect(() => {
-    if (getAutoResetPage()) {
-      dispatch({ type: actions.resetPage });
-    }
-  }, [
-    dispatch,
-    manualPagination ? null : data,
-    globalFilter,
-    filters,
-    groupBy,
-    sortBy,
-  ]);
-
-  const pageCount = manualPagination
-    ? userPageCount
-    : Math.ceil(rows.length / pageSize);
-
-  const pageOptions = React__default.useMemo(
-    () =>
-      pageCount > 0
-        ? [...new Array(pageCount)].fill(null).map((d, i) => i)
-        : [],
-    [pageCount]
-  );
-
-  const page = React__default.useMemo(() => {
-    let page;
-
-    if (manualPagination) {
-      page = rows;
-    } else {
-      const pageStart = pageSize * pageIndex;
-      const pageEnd = pageStart + pageSize;
-
-      page = rows.slice(pageStart, pageEnd);
-    }
-
-    if (paginateExpandedRows) {
-      return page
-    }
-
-    return expandRows(page, { manualExpandedKey, expanded, expandSubRows })
-  }, [
-    expandSubRows,
-    expanded,
-    manualExpandedKey,
-    manualPagination,
-    pageIndex,
-    pageSize,
-    paginateExpandedRows,
-    rows,
-  ]);
-
-  const canPreviousPage = pageIndex > 0;
-  const canNextPage =
-    pageCount === -1 ? page.length >= pageSize : pageIndex < pageCount - 1;
-
-  const gotoPage = React__default.useCallback(
-    pageIndex => {
-      dispatch({ type: actions.gotoPage, pageIndex });
-    },
-    [dispatch]
-  );
-
-  const previousPage = React__default.useCallback(() => {
-    return gotoPage(old => old - 1)
-  }, [gotoPage]);
-
-  const nextPage = React__default.useCallback(() => {
-    return gotoPage(old => old + 1)
-  }, [gotoPage]);
-
-  const setPageSize = React__default.useCallback(
-    pageSize => {
-      dispatch({ type: actions.setPageSize, pageSize });
-    },
-    [dispatch]
-  );
-
-  Object.assign(instance, {
-    pageOptions,
-    pageCount,
-    page,
-    canPreviousPage,
-    canNextPage,
-    gotoPage,
-    previousPage,
-    nextPage,
-    setPageSize,
-  });
-}
-
-const reSplitAlphaNumeric = /([0-9]+)/gm;
-
-// Mixed sorting is slow, but very inclusive of many edge cases.
-// It handles numbers, mixed alphanumeric combinations, and even
-// null, undefined, and Infinity
-const alphanumeric = (rowA, rowB, columnId) => {
-  let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
-
-  // Force to strings (or "" for unsupported types)
-  a = toString(a);
-  b = toString(b);
-
-  // Split on number groups, but keep the delimiter
-  // Then remove falsey split values
-  a = a.split(reSplitAlphaNumeric).filter(Boolean);
-  b = b.split(reSplitAlphaNumeric).filter(Boolean);
-
-  // While
-  while (a.length && b.length) {
-    let aa = a.shift();
-    let bb = b.shift();
-
-    const an = parseInt(aa, 10);
-    const bn = parseInt(bb, 10);
-
-    const combo = [an, bn].sort();
-
-    // Both are string
-    if (isNaN(combo[0])) {
-      if (aa > bb) {
-        return 1
-      }
-      if (bb > aa) {
-        return -1
-      }
-      continue
-    }
-
-    // One is a string, one is a number
-    if (isNaN(combo[1])) {
-      return isNaN(an) ? -1 : 1
-    }
-
-    // Both are numbers
-    if (an > bn) {
-      return 1
-    }
-    if (bn > an) {
-      return -1
-    }
-  }
-
-  return a.length - b.length
-};
-function datetime(rowA, rowB, columnId) {
-  let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
-
-  a = a.getTime();
-  b = b.getTime();
-
-  return compareBasic(a, b)
-}
-
-function basic(rowA, rowB, columnId) {
-  let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
-
-  return compareBasic(a, b)
-}
-
-function string(rowA, rowB, columnId) {
-  let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
-
-  a = a.split('').filter(Boolean);
-  b = b.split('').filter(Boolean);
-
-  while (a.length && b.length) {
-    let aa = a.shift();
-    let bb = b.shift();
-
-    let alower = aa.toLowerCase();
-    let blower = bb.toLowerCase();
-
-    // Case insensitive comparison until characters match
-    if (alower > blower) {
-      return 1
-    }
-    if (blower > alower) {
-      return -1
-    }
-    // If lowercase characters are identical
-    if (aa > bb) {
-      return 1
-    }
-    if (bb > aa) {
-      return -1
-    }
-    continue
-  }
-
-  return a.length - b.length
-}
-
-function number(rowA, rowB, columnId) {
-  let [a, b] = getRowValuesByColumnID(rowA, rowB, columnId);
-
-  const replaceNonNumeric = /[^0-9.]/gi;
-
-  a = Number(String(a).replace(replaceNonNumeric, ''));
-  b = Number(String(b).replace(replaceNonNumeric, ''));
-
-  return compareBasic(a, b)
-}
-
-// Utils
-
-function compareBasic(a, b) {
-  return a === b ? 0 : a > b ? 1 : -1
-}
-
-function getRowValuesByColumnID(row1, row2, columnId) {
-  return [row1.values[columnId], row2.values[columnId]]
-}
-
-function toString(a) {
-  if (typeof a === 'number') {
-    if (isNaN(a) || a === Infinity || a === -Infinity) {
-      return ''
-    }
-    return String(a)
-  }
-  if (typeof a === 'string') {
-    return a
-  }
-  return ''
-}
-
-var sortTypes = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    alphanumeric: alphanumeric,
-    datetime: datetime,
-    basic: basic,
-    string: string,
-    number: number
-});
-
-// Actions
-actions.resetSortBy = 'resetSortBy';
-actions.setSortBy = 'setSortBy';
-actions.toggleSortBy = 'toggleSortBy';
-actions.clearSortBy = 'clearSortBy';
-
-defaultColumn.sortType = 'alphanumeric';
-defaultColumn.sortDescFirst = false;
-
-const useSortBy = hooks => {
-  hooks.getSortByToggleProps = [defaultGetSortByToggleProps];
-  hooks.stateReducers.push(reducer);
-  hooks.useInstance.push(useInstance);
-};
-
-useSortBy.pluginName = 'useSortBy';
-
-const defaultGetSortByToggleProps = (props, { instance, column }) => {
-  const { isMultiSortEvent = e => e.shiftKey } = instance;
-
-  return [
-    props,
-    {
-      onClick: column.canSort
-        ? e => {
-            e.persist();
-            column.toggleSortBy(
-              undefined,
-              !instance.disableMultiSort && isMultiSortEvent(e)
-            );
-          }
-        : undefined,
-      style: {
-        cursor: column.canSort ? 'pointer' : undefined,
-      },
-      title: column.canSort ? 'Toggle SortBy' : undefined,
-    },
-  ]
-};
-
-// Reducer
-function reducer(state, action, previousState, instance) {
-  if (action.type === actions.init) {
-    return {
-      sortBy: [],
-      ...state,
-    }
-  }
-
-  if (action.type === actions.resetSortBy) {
-    return {
-      ...state,
-      sortBy: instance.initialState.sortBy || [],
-    }
-  }
-
-  if (action.type === actions.clearSortBy) {
-    const { sortBy } = state;
-    const newSortBy = sortBy.filter(d => d.id !== action.columnId);
-
-    return {
-      ...state,
-      sortBy: newSortBy,
-    }
-  }
-
-  if (action.type === actions.setSortBy) {
-    const { sortBy } = action;
-    return {
-      ...state,
-      sortBy,
-    }
-  }
-
-  if (action.type === actions.toggleSortBy) {
-    const { columnId, desc, multi } = action;
-
-    const {
-      allColumns,
-      disableMultiSort,
-      disableSortRemove,
-      disableMultiRemove,
-      maxMultiSortColCount = Number.MAX_SAFE_INTEGER,
-    } = instance;
-
-    const { sortBy } = state;
-
-    // Find the column for this columnId
-    const column = allColumns.find(d => d.id === columnId);
-    const { sortDescFirst } = column;
-
-    // Find any existing sortBy for this column
-    const existingSortBy = sortBy.find(d => d.id === columnId);
-    const existingIndex = sortBy.findIndex(d => d.id === columnId);
-    const hasDescDefined = typeof desc !== 'undefined' && desc !== null;
-
-    let newSortBy = [];
-
-    // What should we do with this sort action?
-    let sortAction;
-
-    if (!disableMultiSort && multi) {
-      if (existingSortBy) {
-        sortAction = 'toggle';
-      } else {
-        sortAction = 'add';
-      }
-    } else {
-      // Normal mode
-      if (existingIndex !== sortBy.length - 1 || sortBy.length !== 1) {
-        sortAction = 'replace';
-      } else if (existingSortBy) {
-        sortAction = 'toggle';
-      } else {
-        sortAction = 'replace';
-      }
-    }
-
-    // Handle toggle states that will remove the sortBy
-    if (
-      sortAction === 'toggle' && // Must be toggling
-      !disableSortRemove && // If disableSortRemove, disable in general
-      !hasDescDefined && // Must not be setting desc
-      (multi ? !disableMultiRemove : true) && // If multi, don't allow if disableMultiRemove
-      ((existingSortBy && // Finally, detect if it should indeed be removed
-        existingSortBy.desc &&
-        !sortDescFirst) ||
-        (!existingSortBy.desc && sortDescFirst))
-    ) {
-      sortAction = 'remove';
-    }
-
-    if (sortAction === 'replace') {
-      newSortBy = [
-        {
-          id: columnId,
-          desc: hasDescDefined ? desc : sortDescFirst,
-        },
-      ];
-    } else if (sortAction === 'add') {
-      newSortBy = [
-        ...sortBy,
-        {
-          id: columnId,
-          desc: hasDescDefined ? desc : sortDescFirst,
-        },
-      ];
-      // Take latest n columns
-      newSortBy.splice(0, newSortBy.length - maxMultiSortColCount);
-    } else if (sortAction === 'toggle') {
-      // This flips (or sets) the
-      newSortBy = sortBy.map(d => {
-        if (d.id === columnId) {
-          return {
-            ...d,
-            desc: hasDescDefined ? desc : !existingSortBy.desc,
-          }
-        }
-        return d
-      });
-    } else if (sortAction === 'remove') {
-      newSortBy = sortBy.filter(d => d.id !== columnId);
-    }
-
-    return {
-      ...state,
-      sortBy: newSortBy,
-    }
-  }
-}
-
-function useInstance(instance) {
-  const {
-    data,
-    rows,
-    flatRows,
-    allColumns,
-    orderByFn = defaultOrderByFn,
-    sortTypes: userSortTypes,
-    manualSortBy,
-    defaultCanSort,
-    disableSortBy,
-    flatHeaders,
-    state: { sortBy },
-    dispatch,
-    plugins,
-    getHooks,
-    autoResetSortBy = true,
-  } = instance;
-
-  ensurePluginOrder(
-    plugins,
-    ['useFilters', 'useGlobalFilter', 'useGroupBy', 'usePivotColumns'],
-    'useSortBy'
-  );
-
-  const setSortBy = React__default.useCallback(
-    sortBy => {
-      dispatch({ type: actions.setSortBy, sortBy });
-    },
-    [dispatch]
-  );
-
-  // Updates sorting based on a columnId, desc flag and multi flag
-  const toggleSortBy = React__default.useCallback(
-    (columnId, desc, multi) => {
-      dispatch({ type: actions.toggleSortBy, columnId, desc, multi });
-    },
-    [dispatch]
-  );
-
-  // use reference to avoid memory leak in #1608
-  const getInstance = useGetLatest(instance);
-
-  // Add the getSortByToggleProps method to columns and headers
-  flatHeaders.forEach(column => {
-    const {
-      accessor,
-      canSort: defaultColumnCanSort,
-      disableSortBy: columnDisableSortBy,
-      id,
-    } = column;
-
-    const canSort = accessor
-      ? getFirstDefined(
-          columnDisableSortBy === true ? false : undefined,
-          disableSortBy === true ? false : undefined,
-          true
-        )
-      : getFirstDefined(defaultCanSort, defaultColumnCanSort, false);
-
-    column.canSort = canSort;
-
-    if (column.canSort) {
-      column.toggleSortBy = (desc, multi) =>
-        toggleSortBy(column.id, desc, multi);
-
-      column.clearSortBy = () => {
-        dispatch({ type: actions.clearSortBy, columnId: column.id });
-      };
-    }
-
-    column.getSortByToggleProps = makePropGetter(
-      getHooks().getSortByToggleProps,
-      {
-        instance: getInstance(),
-        column,
-      }
-    );
-
-    const columnSort = sortBy.find(d => d.id === id);
-    column.isSorted = !!columnSort;
-    column.sortedIndex = sortBy.findIndex(d => d.id === id);
-    column.isSortedDesc = column.isSorted ? columnSort.desc : undefined;
-  });
-
-  const [sortedRows, sortedFlatRows] = React__default.useMemo(() => {
-    if (manualSortBy || !sortBy.length) {
-      return [rows, flatRows]
-    }
-
-    const sortedFlatRows = [];
-
-    // Filter out sortBys that correspond to non existing columns
-    const availableSortBy = sortBy.filter(sort =>
-      allColumns.find(col => col.id === sort.id)
-    );
-
-    const sortData = rows => {
-      // Use the orderByFn to compose multiple sortBy's together.
-      // This will also perform a stable sorting using the row index
-      // if needed.
-      const sortedData = orderByFn(
-        rows,
-        availableSortBy.map(sort => {
-          // Support custom sorting methods for each column
-          const column = allColumns.find(d => d.id === sort.id);
-
-          if (!column) {
-            throw new Error(
-              `React-Table: Could not find a column with id: ${sort.id} while sorting`
-            )
-          }
-
-          const { sortType } = column;
-
-          // Look up sortBy functions in this order:
-          // column function
-          // column string lookup on user sortType
-          // column string lookup on built-in sortType
-          // default function
-          // default string lookup on user sortType
-          // default string lookup on built-in sortType
-          const sortMethod =
-            isFunction(sortType) ||
-            (userSortTypes || {})[sortType] ||
-            sortTypes[sortType];
-
-          if (!sortMethod) {
-            throw new Error(
-              `React-Table: Could not find a valid sortType of '${sortType}' for column '${sort.id}'.`
-            )
-          }
-
-          // Return the correct sortFn.
-          // This function should always return in ascending order
-          return (a, b) => sortMethod(a, b, sort.id, sort.desc)
-        }),
-        // Map the directions
-        availableSortBy.map(sort => {
-          // Detect and use the sortInverted option
-          const column = allColumns.find(d => d.id === sort.id);
-
-          if (column && column.sortInverted) {
-            return sort.desc
-          }
-
-          return !sort.desc
-        })
-      );
-
-      // If there are sub-rows, sort them
-      sortedData.forEach(row => {
-        sortedFlatRows.push(row);
-        if (!row.subRows || row.subRows.length === 0) {
-          return
-        }
-        row.subRows = sortData(row.subRows);
-      });
-
-      return sortedData
-    };
-
-    return [sortData(rows), sortedFlatRows]
-  }, [
-    manualSortBy,
-    sortBy,
-    rows,
-    flatRows,
-    allColumns,
-    orderByFn,
-    userSortTypes,
-  ]);
-
-  const getAutoResetSortBy = useGetLatest(autoResetSortBy);
-
-  useMountedLayoutEffect(() => {
-    if (getAutoResetSortBy()) {
-      dispatch({ type: actions.resetSortBy });
-    }
-  }, [manualSortBy ? null : data]);
-
-  Object.assign(instance, {
-    preSortedRows: rows,
-    preSortedFlatRows: flatRows,
-    sortedRows,
-    sortedFlatRows,
-    rows: sortedRows,
-    flatRows: sortedFlatRows,
-    setSortBy,
-    toggleSortBy,
-  });
-}
-
-function defaultOrderByFn(arr, funcs, dirs) {
-  return [...arr].sort((rowA, rowB) => {
-    for (let i = 0; i < funcs.length; i += 1) {
-      const sortFn = funcs[i];
-      const desc = dirs[i] === false || dirs[i] === 'desc';
-      const sortInt = sortFn(rowA, rowB);
-      if (sortInt !== 0) {
-        return desc ? -sortInt : sortInt
-      }
-    }
-    return dirs[0] ? rowA.index - rowB.index : rowB.index - rowA.index
-  })
-}
-
-var TableFooter = function (props) {
-    return (React__default.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
-};
-
-var TableHeader = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default.createElement("thead", __assign({}, restProps), children);
-};
-
-var getWidth = function (props) {
-    var isActionColumn = props.column.isActionColumn, fullWidth = props.tableProps.fullWidth;
-    var width;
-    if (fullWidth && isActionColumn) {
-        width = '0.0000000001%';
-    }
-    if (fullWidth && !isActionColumn) {
-        width = '1%';
-    }
-    if (!fullWidth && isActionColumn) {
-        width = 72;
-    }
-    if (!fullWidth && !isActionColumn) {
-        width = undefined;
-    }
-    return width;
-};
-var useTableHeaderCellStyles = makeStyles(function (theme) { return ({
-    root: function (props) {
-        var width = getWidth(props);
-        return {
-            borderBottomStyle: 'solid',
-            borderBottomWidth: 2,
-            borderBottomColor: theme.palette.grey[100],
-            padding: theme.spacing(2),
-            textAlign: 'left',
-            fontWeight: 500,
-            width: width,
-        };
-    },
-}); });
-
-var TableHeaderCell = function (props) {
-    var children = props.children, column = props.column; props.tableProps; var restProps = __rest(props, ["children", "column", "tableProps"]);
-    var root = useTableHeaderCellStyles(props).root;
-    var _a = useTheme(), palette = _a.palette, spacing = _a.spacing;
-    //@ts-expect-error @types/react-table issue
-    var canSort = column.canSort, isSorted = column.isSorted, isSortedDesc = column.isSortedDesc, isActionColumn = column.isActionColumn;
-    var showSortIndicator = canSort && !isActionColumn;
-    return (React__default.createElement("th", __assign({ className: root }, restProps),
-        React__default.createElement(Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
-            children,
-            showSortIndicator && (React__default.createElement(Icon, { icon: isSortedDesc ? SvgChevronDown : SvgChevronUp, color: isSorted ? palette.text.primary : palette.text.disabled, size: "large" })))));
-};
-
-var TableHeaderRow = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default.createElement("tr", __assign({}, restProps), children);
-};
-
-var useTableRowStyles = makeStyles(function (theme) { return ({
-    root: function () { return ({
-        '&:nth-child(even)': {
-            backgroundColor: theme.palette.grey[100],
-        },
-    }); },
-}); });
-
-var TableRow = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    var root = useTableRowStyles(props).root;
-    return (React__default.createElement("tr", __assign({ className: root }, restProps), children));
-};
-
-var TableBody = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    return React__default.createElement("tbody", __assign({}, restProps), children);
-};
-
-var useTableCellStyles = makeStyles(function (theme) { return ({
-    root: function () { return ({
-        padding: theme.spacing(2),
-    }); },
-}); });
-
-var TableCell = function (props) {
-    var children = props.children, restProps = __rest(props, ["children"]);
-    var root = useTableCellStyles(props).root;
-    return (React__default.createElement("td", __assign({ className: root }, restProps), children));
-};
-
-var useTableStyles = makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        root: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return ({
-                display: fullWidth ? 'flex' : 'inline-flex',
-                flexDirection: 'column',
-            });
-        },
-        table: function (_a) {
-            var fullWidth = _a.fullWidth;
-            return (__assign(__assign({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography.body1));
-        },
-        tableWrap: function () { return ({
-            maxWidth: '100%',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-        }); },
-    });
-});
-
-var TableActionsCell = function (props) {
-    var _a = props.actions, primary = _a.primary, secondary = _a.secondary, intermediate = __rest(_a, ["primary", "secondary"]);
-    var tertiary = intermediate.tertiary, restActions = __rest(intermediate, ["tertiary"]);
-    var overflow = Object.keys(props.actions).length > 3;
-    var _b = React__default.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var openMenu = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var closeMenu = function () {
-        setAnchorEl(null);
-    };
-    var handleItemClick = function (action) {
-        action(props.cell);
-        closeMenu();
-    };
-    return (React__default.createElement(Box, { display: "flex" },
-        primary && primary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return primary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: primary.icon }))),
-        secondary && secondary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return secondary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: secondary.icon }))),
-        !overflow && tertiary && tertiary.icon && (React__default.createElement(IconButton, { size: "small", onClick: function () { return tertiary.action(props.cell); } },
-            React__default.createElement(Icon, { icon: tertiary.icon }))),
-        overflow && restActions && (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(IconButton, { size: "small", onClick: openMenu },
-                React__default.createElement(Icon, { icon: SvgMore })),
-            React__default.createElement(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign({ tertiary: tertiary }, restActions))
-                .filter(function (value) { return value; })
-                .map(function (_a, i) {
-                var label = _a.label, action = _a.action;
-                return (React__default.createElement(MenuItem, { key: i, onClick: function () { return handleItemClick(action); } }, label));
-            }))))));
-};
-
-var makeColumns = function (config) {
-    var columns = config.columns, actions = config.actions, actionColumnId = config.actionColumnId;
-    var actionColumn;
-    var memoizedColumns = __spreadArray([], columns);
-    if (actions) {
-        var CellComponent = function (props) { return React__default.createElement(TableActionsCell, __assign({}, props, { actions: actions })); };
-        actionColumn = {
-            id: actionColumnId,
-            Header: function () { return null; },
-            Cell: CellComponent,
-        };
-        memoizedColumns = __spreadArray(__spreadArray([], columns), [actionColumn]);
-    }
-    return memoizedColumns;
-};
-
-/* eslint-disable react/jsx-key */
-var Table = function (props) {
-    var actionColumnId = 'table-actions-column';
-    var rawColumns = props.columns, data = props.data, actions = props.actions, sortable = props.sortable, emptyMessage = props.emptyMessage, EmptyImage = props.EmptyImage, isLoading = props.loading, enableMinHeight = props.enableMinHeight;
-    var classes = useTableStyles(props);
-    var columns = useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    var instance = useTable({ columns: columns, data: data, disableSortBy: !sortable }, useSortBy, usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, state = instance.state, rows = instance.rows;
-    var isPaginated = pageCount > 1;
-    var isEmpty = rows.length === 0;
-    var handlePagination = function (_e, pageNumber) {
-        gotoPage(pageNumber - 1);
-    };
-    return (React__default.createElement(Box, { className: classes.root, minHeight: (isLoading || isEmpty) && enableMinHeight ? 618 : 'unset' },
-        React__default.createElement(Box, { className: classes.tableWrap, minHeight: page.length > 0 && !isLoading && enableMinHeight ? 618 : 'unset' },
-            React__default.createElement("table", __assign({ className: classes.table }, getTableProps()),
-                React__default.createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default.createElement(TableHeaderRow, __assign({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default.createElement(TableHeaderCell, __assign({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign(__assign({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
-                !isEmpty && !isLoading && (React__default.createElement(TableBody, __assign({}, getTableBodyProps()), page.map(function (row) {
-                    prepareRow(row);
-                    return (React__default.createElement(TableRow, __assign({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default.createElement(TableCell, __assign({}, cell.getCellProps()), cell.render('Cell'))); })));
-                }))))),
-        isEmpty && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            EmptyImage && EmptyImage(),
-            React__default.createElement(Typography, null, emptyMessage))),
-        isLoading && (React__default.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            React__default.createElement(CircularProgress, { size: 80, color: "inherit" }))),
-        isPaginated && !isLoading && (React__default.createElement(TableFooter, null,
-            React__default.createElement(Pagination, { count: pageCount, page: state.pageIndex + 1, onChange: handlePagination })))));
-};
-Table.defaultProps = {
-    emptyMessage: 'No results.',
-    enableMinHeight: true,
-};
-
 var useToggleButtonStyles = makeStyles$1(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
@@ -3378,5 +1068,5 @@ var useCollapsibleText = function () {
     };
 };
 
-export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, Paper, PaperContent, Radio, SplitInput, Switch, Table, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
+export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, Paper, PaperContent, Radio, SplitInput, Switch, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
 //# sourceMappingURL=index.es.js.map