@popmenu/table 0.46.0 → 0.47.1

package/build/index.js

@@ -3,31 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useTable_js = require('react-table/src/hooks/useTable.js');
-var usePagination_js = require('react-table/src/plugin-hooks/usePagination.js');
-var useSortBy_js = require('react-table/src/plugin-hooks/useSortBy.js');
-var useGlobalFilter_js = require('react-table/src/plugin-hooks/useGlobalFilter.js');
 var lab = require('@material-ui/lab');
-require('@material-ui/lab/Alert');
+var reactTable = require('@tanstack/react-table');
 var core = require('@material-ui/core');
+var CommonAlert = require('@material-ui/lab/Alert');
 require('@material-ui/core/AppBar');
 var MuiAvatar = require('@material-ui/core/Avatar');
 var styles = require('@material-ui/core/styles');
 require('@material-ui/core/Badge');
 var MuiButton = require('@material-ui/core/Button');
 var CircularProgress = require('@material-ui/core/CircularProgress');
-require('@material-ui/core/ButtonGroup');
-require('@material-ui/core/Card');
+var CommonButtonGroup = require('@material-ui/core/ButtonGroup');
+var Card = require('@material-ui/core/Card');
 require('@material-ui/core/CardActionArea');
-require('@material-ui/core/CardActions');
-require('@material-ui/core/CardContent');
+var CardActions = require('@material-ui/core/CardActions');
+var CardContent = require('@material-ui/core/CardContent');
 require('@material-ui/core/CardHeader');
 require('@material-ui/core/CardMedia');
 var MuiCheckbox = require('@material-ui/core/Checkbox');
 var FormControlLabel = require('@material-ui/core/FormControlLabel');
-require('@material-ui/core/Chip');
+var MuiChip = require('@material-ui/core/Chip');
 require('@material-ui/core/Collapse');
-require('@material-ui/core/Dialog');
+var Dialog = require('@material-ui/core/Dialog');
 require('@material-ui/core/DialogActions');
 require('@material-ui/core/DialogContent');
 require('@material-ui/core/DialogTitle');
@@ -54,6 +51,10 @@ require('@material-ui/core/Tabs');
 var MuiToggleButton = require('@material-ui/lab/ToggleButton');
 var MuiToggleButtonGroup = require('@material-ui/lab/ToggleButtonGroup');
 var MuiTooltip = require('@material-ui/core/Tooltip');
+require('@material-ui/lab/AlertTitle');
+require('@material-ui/core/Box');
+require('@material-ui/core/Snackbar');
+var createTheme = require('@material-ui/core/styles/createTheme');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -79,11 +80,18 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var CommonAlert__default = /*#__PURE__*/_interopDefaultLegacy(CommonAlert);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
 var MuiButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiButton);
 var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
+var CommonButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(CommonButtonGroup);
+var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card);
+var CardActions__default = /*#__PURE__*/_interopDefaultLegacy(CardActions);
+var CardContent__default = /*#__PURE__*/_interopDefaultLegacy(CardContent);
 var MuiCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(MuiCheckbox);
 var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
+var MuiChip__default = /*#__PURE__*/_interopDefaultLegacy(MuiChip);
+var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
@@ -92,6 +100,7 @@ var MuiSwitch__default = /*#__PURE__*/_interopDefaultLegacy(MuiSwitch);
 var MuiToggleButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButton);
 var MuiToggleButtonGroup__default = /*#__PURE__*/_interopDefaultLegacy(MuiToggleButtonGroup);
 var MuiTooltip__default = /*#__PURE__*/_interopDefaultLegacy(MuiTooltip);
+var createTheme__default = /*#__PURE__*/_interopDefaultLegacy(createTheme);
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -108,18 +117,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign$3 = function() {
+    __assign$3 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign$3.apply(this, arguments);
 };
 
-function __rest$1(s, e) {
+function __rest$3(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -156,18 +165,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
+var __assign$2 = function() {
+    __assign$2 = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign.apply(this, arguments);
+    return __assign$2.apply(this, arguments);
 };
 
-function __rest(s, e) {
+function __rest$2(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -179,25 +188,145 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$D;
+var _g$1d$1, _defs$I$1;
 
-function _extends$1u() { _extends$1u = 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$1u.apply(this, arguments); }
+function _extends$27$1() { _extends$27$1 = 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$27$1.apply(this, arguments); }
 
-function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1u({
+function SvgCheckCircle$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$27$1({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _g$1d$1 || (_g$1d$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#check-circle_svg__clip0_8_5831)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  }))), _defs$I$1 || (_defs$I$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "check-circle_svg__clip0_8_5831"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$1b, _defs$G;
+
+function _extends$24() { _extends$24 = 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$24.apply(this, arguments); }
+
+function SvgXCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$24({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1b || (_g$1b = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#x-circle_svg__clip0_8_6136)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM10 6l-4 4m0-4l4 4"
+  }))), _defs$G || (_defs$G = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "x-circle_svg__clip0_8_6136"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$13$1, _defs$A$1;
+
+function _extends$1V$1() { _extends$1V$1 = 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$1V$1.apply(this, arguments); }
+
+function SvgInfo$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1V$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$13$1 || (_g$13$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#info_svg__clip0_8_5377)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+  }))), _defs$A$1 || (_defs$A$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "info_svg__clip0_8_5377"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$D$1;
+
+function _extends$1u$1() { _extends$1u$1 = 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$1u$1.apply(this, arguments); }
+
+function SvgUser$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1u$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$D$1 || (_path$D$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
 }
 
-var useIconStyles = core.makeStyles(function (_a) {
+var _g$Q$1, _defs$r$1;
+
+function _extends$1q$1() { _extends$1q$1 = 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$1q$1.apply(this, arguments); }
+
+function SvgError$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1q$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$Q$1 || (_g$Q$1 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#error_svg__clip0_8_5411)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
+  }))), _defs$r$1 || (_defs$r$1 = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "error_svg__clip0_8_5411"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$A$1;
+
+function _extends$1p$1() { _extends$1p$1 = 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$1p$1.apply(this, arguments); }
+
+function SvgWarning$1(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$A$1 || (_path$A$1 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
+var useIconStyles$1 = core.makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
     var getFontSize = function (_a) {
         var size = _a.size;
@@ -233,7 +362,7 @@ var useIconStyles = core.makeStyles(function (_a) {
     };
 });
 
-var classnames = {exports: {}};
+var classnames$2 = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -289,45 +418,45 @@ var classnames = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames));
+}(classnames$2));
 
-var classNames = classnames.exports;
+var classNames = classnames$2.exports;
 
-var iconStaticClassName = 'pop-icon';
-var Icon = function (props) {
-    var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
-    var classes = useIconStyles(props);
+var iconStaticClassName$1 = 'pop-icon';
+var Icon$1 = function (props) {
+    var icon = props.icon, className = props.className, restProps = __rest$2(props, ["icon", "className"]);
+    var classes = useIconStyles$1(props);
     var isValid = true;
     if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
         isValid = false;
     }
     return isValid
-        ? React.createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        ? React.createElement(icon, __assign$2({ className: classNames([classes.root, iconStaticClassName$1, className]) }, restProps))
         : null;
 };
-Icon.defaultProps = {
+Icon$1.defaultProps = {
     size: 'inherit',
     color: 'inherit',
 };
-Icon.displayName = 'Icon';
+Icon$1.displayName = 'Icon';
 
-var LoadingStatus;
+var LoadingStatus$1;
 (function (LoadingStatus) {
     LoadingStatus["ERROR"] = "ERROR";
     LoadingStatus["LOADED"] = "LOADED";
     LoadingStatus["PENDING"] = "PENDING";
-})(LoadingStatus || (LoadingStatus = {}));
-var useImgProps = function (avatarProps) {
-    var _a = React__default['default'].useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
-    var imgProps = __assign(__assign({}, avatarProps.imgProps), { onLoad: function (event) {
+})(LoadingStatus$1 || (LoadingStatus$1 = {}));
+var useImgProps$1 = function (avatarProps) {
+    var _a = React__default['default'].useState(LoadingStatus$1.PENDING), loaded = _a[0], setLoaded = _a[1];
+    var imgProps = __assign$2(__assign$2({}, avatarProps.imgProps), { onLoad: function (event) {
             var _a, _b;
-            setLoaded(LoadingStatus.LOADED);
+            setLoaded(LoadingStatus$1.LOADED);
             (_b = (_a = avatarProps.imgProps) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         } });
     return { imgProps: imgProps, loaded: loaded };
 };
 
-var getAvatarDimensions = function (theme, props) {
+var getAvatarDimensions$1 = function (theme, props) {
     var factors = {
         'extra-small': 3,
         small: 4,
@@ -338,7 +467,7 @@ var getAvatarDimensions = function (theme, props) {
     var sizeFactor = factors[props.size || 'medium'];
     return theme.spacing(sizeFactor);
 };
-var getAvatarFontSize = function (props) {
+var getAvatarFontSize$1 = function (props) {
     var fontSizes = {
         'extra-small': '0.75rem',
         small: '1rem',
@@ -348,25 +477,25 @@ var getAvatarFontSize = function (props) {
     };
     return fontSizes[props.size];
 };
-var useAvatarStyles = styles.makeStyles(function (theme) { return ({
+var useAvatarStyles$1 = styles.makeStyles(function (theme) { return ({
     root: function (props) { return ({
-        width: getAvatarDimensions(theme, props),
-        height: getAvatarDimensions(theme, props),
-        fontSize: getAvatarFontSize(props),
-        backgroundColor: props.loaded === LoadingStatus.LOADED ? 'transparent' : props.background,
+        width: getAvatarDimensions$1(theme, props),
+        height: getAvatarDimensions$1(theme, props),
+        fontSize: getAvatarFontSize$1(props),
+        backgroundColor: props.loaded === LoadingStatus$1.LOADED ? 'transparent' : props.background,
         color: theme.palette.getContrastText(props.background),
         objectFit: props.fit,
     }); },
     fallback: function (props) { return ({
-        fontSize: getAvatarDimensions(theme, props),
+        fontSize: getAvatarDimensions$1(theme, props),
         strokeWidth: 1,
     }); },
 }); });
 
-var Avatar = React.forwardRef(function (props, ref) {
-    var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = __rest(props, ["children", "src", "alt", "fallback"]);
-    var _a = useImgProps(props), imgProps = _a.imgProps, loaded = _a.loaded;
-    var classes = useAvatarStyles(__assign(__assign({}, props), { loaded: loaded }));
+var Avatar$1 = React.forwardRef(function (props, ref) {
+    var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = __rest$2(props, ["children", "src", "alt", "fallback"]);
+    var _a = useImgProps$1(props), imgProps = _a.imgProps, loaded = _a.loaded;
+    var classes = useAvatarStyles$1(__assign$2(__assign$2({}, props), { loaded: loaded }));
     var displayAltTextFallback = src && alt;
     var displayNoFallback = fallback === 'none';
     var displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
@@ -381,18 +510,18 @@ var Avatar = React.forwardRef(function (props, ref) {
         Fallback = fallback;
     }
     else {
-        Fallback = React__default['default'].createElement(Icon, { icon: SvgUser, className: classes.fallback });
+        Fallback = React__default['default'].createElement(Icon$1, { icon: SvgUser$1, className: classes.fallback });
     }
-    return (React__default['default'].createElement(MuiAvatar__default['default'], __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
+    return (React__default['default'].createElement(MuiAvatar__default['default'], __assign$2({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
 });
-Avatar.defaultProps = {
+Avatar$1.defaultProps = {
     size: 'medium',
     fit: 'cover',
     background: '#E0E0E0',
 };
-Avatar.displayName = 'Avatar';
+Avatar$1.displayName = 'Avatar';
 
-var useButtonStyles = styles.makeStyles(function () { return ({
+var useButtonStyles$2 = styles.makeStyles(function () { return ({
     root: {
         minWidth: 'unset',
     },
@@ -404,29 +533,29 @@ var useButtonStyles = styles.makeStyles(function () { return ({
     },
 }); });
 
-var Button = React.forwardRef(function (props, ref) {
-    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
-    props.classes; var styleProps = __rest(props, ["classes"]);
-    var classes = useButtonStyles(styleProps);
+var Button$2 = React.forwardRef(function (props, ref) {
+    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest$2(props, ["textTransform", "loading", "classes", "className"]);
+    props.classes; var styleProps = __rest$2(props, ["classes"]);
+    var classes = useButtonStyles$2(styleProps);
     var typography = styles.useTheme().typography;
     var loadingIndicator = {
         startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
         disabled: true,
     };
-    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+    return (React__default['default'].createElement(MuiButton__default['default'], __assign$2({ ref: ref, classes: __assign$2(__assign$2({}, classes), classesOverride), className: classNames([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
 });
-Button.displayName = 'Button';
+Button$2.displayName = 'Button';
 
-var Checkbox = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+var Checkbox$1 = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest$2(props, ["label", "disabled", "LabelProps"]);
+    var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign$2({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign$2({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Checkbox.displayName = 'Checkbox';
+Checkbox$1.displayName = 'Checkbox';
 
-var getBackground = function (theme) { return function (props) {
+var getBackground$2 = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
-    var background;
+    var background = theme.palette.grey[100];
     var backgrounds = {
         outlined: 'none',
         error: 'error.main',
@@ -443,7 +572,7 @@ var getBackground = function (theme) { return function (props) {
     }
     return background;
 }; };
-var getColor = function (theme) { return function (props) {
+var getColor$2 = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var textColor;
     if (variant === 'outlined' && severity) {
@@ -469,7 +598,7 @@ var getColor = function (theme) { return function (props) {
     }
     return textColor;
 }; };
-var getBorder = function (theme) { return function (props) {
+var getBorder$1 = function (theme) { return function (props) {
     var variant = props.variant, severity = props.severity;
     var borderColor;
     if (variant === 'outlined' && severity) {
@@ -483,11 +612,11 @@ var getBorder = function (theme) { return function (props) {
     }
     return borderColor;
 }; };
-styles.makeStyles(function (theme) { return ({
+var useChipStyles = styles.makeStyles(function (theme) { return ({
     root: {
-        background: getBackground(theme),
-        color: getColor(theme),
-        borderColor: getBorder(theme),
+        background: getBackground$2(theme),
+        color: getColor$2(theme),
+        borderColor: getBorder$1(theme),
         borderRadius: theme.spacing(0.5),
     },
     icon: {
@@ -495,19 +624,37 @@ styles.makeStyles(function (theme) { return ({
         height: theme.spacing(2),
         width: theme.spacing(2),
     },
+    deleteIcon: {
+        color: theme.palette.grey[500],
+    },
 }); });
 
-var defaultTypographyProps = {
+var IconDictionary = {
+    error: SvgError$1,
+    info: SvgInfo$1,
+    success: SvgCheckCircle$1,
+    warning: SvgWarning$1,
+};
+var Chip = function (props) {
+    var severity = props.severity, restProps = __rest$2(props, ["severity"]);
+    var classes = useChipStyles(props);
+    var icon = severity ? React__default['default'].createElement(IconDictionary[severity]) : undefined;
+    var deleteIcon = React__default['default'].createElement(SvgXCircle);
+    return React__default['default'].createElement(MuiChip__default['default'], __assign$2({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
+};
+Chip.displayName = 'Chip';
+
+var defaultTypographyProps$1 = {
     variant: 'body1',
 };
 
-var weights = {
+var weights$1 = {
     regular: 400,
     medium: 500,
     'semi-bold': 600,
     bold: 700,
 };
-var getCustomColor = function (theme, color) {
+var getCustomColor$1 = function (theme, color) {
     var isCommonColor = color && ['white', 'black'].includes(color);
     var isGreyColor = color && color.match(/^grey\.\d{3}/);
     var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
@@ -527,11 +674,11 @@ var getCustomColor = function (theme, color) {
             return undefined;
     }
 };
-var useTypographyStyles = styles.makeStyles(function (theme) {
+var useTypographyStyles$1 = styles.makeStyles(function (theme) {
     var _a;
     return ({
         root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
+            _a["& ." + iconStaticClassName$1] = {
                 position: 'relative',
                 top: '0.125em',
                 padding: '0 0.125em',
@@ -540,7 +687,7 @@ var useTypographyStyles = styles.makeStyles(function (theme) {
             _a.fontFamily = theme.typography.fontFamily,
             _a.fontWeight = function (_a) {
                 var variant = _a.variant, weight = _a.weight;
-                return (weight ? weights[weight] : theme.typography[variant].fontWeight);
+                return (weight ? weights$1[weight] : theme.typography[variant].fontWeight);
             },
             _a.fontSize = function (_a) {
                 var variant = _a.variant;
@@ -556,7 +703,7 @@ var useTypographyStyles = styles.makeStyles(function (theme) {
             },
             _a.color = function (_a) {
                 var color = _a.color, variant = _a.variant;
-                return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
+                return (color && getCustomColor$1(theme, color)) || theme.typography[variant].color;
             },
             _a),
         caption: {
@@ -568,16 +715,16 @@ var useTypographyStyles = styles.makeStyles(function (theme) {
     });
 });
 
-var Typography = React.forwardRef(function (props, ref) {
-    props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
-    var classes = useTypographyStyles(__assign({}, props));
+var Typography$1 = React.forwardRef(function (props, ref) {
+    props.weight; props.color; var restProps = __rest$2(props, ["weight", "color"]);
+    var classes = useTypographyStyles$1(__assign$2({}, props));
     var variantMapping = { subtitle1: 'p' };
-    return React__default['default'].createElement(core.Typography, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
+    return React__default['default'].createElement(core.Typography, __assign$2({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
 });
-Typography.displayName = 'Typography';
-Typography.defaultProps = defaultTypographyProps;
+Typography$1.displayName = 'Typography';
+Typography$1.defaultProps = defaultTypographyProps$1;
 
-var getFadeStop = function (_a, typographyVariant) {
+var getFadeStop$1 = function (_a, typographyVariant) {
     var typography = _a.typography;
     return !isNaN(Number(typography[typographyVariant].lineHeight))
         ? typography[typographyVariant].lineHeight + "rem"
@@ -590,11 +737,11 @@ core.makeStyles(function (theme) { return ({
         left: 0,
         height: '100%',
         width: '100%',
-        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
+        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop$1(theme, props.typographyVariant) + ")"; },
     },
 }); });
 
-var SemanticColors;
+var SemanticColors$1;
 (function (SemanticColors) {
     SemanticColors["PRIMARY_MAIN"] = "primary.main";
     SemanticColors["PRIMARY_DARK"] = "primary.dark";
@@ -602,7 +749,7 @@ var SemanticColors;
     SemanticColors["SECONDARY_MAIN"] = "secondary.main";
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
-})(SemanticColors || (SemanticColors = {}));
+})(SemanticColors$1 || (SemanticColors$1 = {}));
 core.makeStyles(function (theme) { return ({
     dividerRoot: {
         gap: theme.spacing(2),
@@ -610,7 +757,7 @@ core.makeStyles(function (theme) { return ({
     textRoot: {
         color: function (props) {
             var textColor = props.textColor;
-            if (Object.values(SemanticColors).includes(textColor)) {
+            if (Object.values(SemanticColors$1).includes(textColor)) {
                 var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
                 return theme.palette[semanticColor][shade];
             }
@@ -626,7 +773,7 @@ core.makeStyles(function (theme) { return ({
     dividerLine: {
         backgroundColor: function (props) {
             var dividerColor = props.dividerColor;
-            if (Object.values(SemanticColors).includes(dividerColor)) {
+            if (Object.values(SemanticColors$1).includes(dividerColor)) {
                 var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
                 return theme.palette[semanticColor][shade];
             }
@@ -640,34 +787,34 @@ core.makeStyles(function (theme) { return ({
     },
 }); });
 
-var IconButton = React.forwardRef(function (props, ref) {
-    return React__default['default'].createElement(MuiIconButton__default['default'], __assign({ ref: ref }, props));
+var IconButton$1 = React.forwardRef(function (props, ref) {
+    return React__default['default'].createElement(MuiIconButton__default['default'], __assign$2({ ref: ref }, props));
 });
-IconButton.displayName = 'IconButton';
-IconButton.defaultProps = {
+IconButton$1.displayName = 'IconButton';
+IconButton$1.defaultProps = {
     color: 'secondary',
 };
 
-var useLinkStyles = styles.makeStyles(function (theme) { return ({
+var useLinkStyles$1 = styles.makeStyles(function (theme) { return ({
     root: function (props) {
         var _a;
-        return (__assign(__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
+        return (__assign$2(__assign$2({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName$1] = {
             alignSelf: 'center',
         }, _a)));
     },
 }); });
 
-var Link = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useLinkStyles(props);
-    return (React__default['default'].createElement(core.Link, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
+var Link$1 = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = __rest$2(props, ["children"]);
+    var classes = useLinkStyles$1(props);
+    return (React__default['default'].createElement(core.Link, __assign$2({ ref: ref, classes: { root: classes.root } }, muiProps), children));
 });
-Link.defaultProps = {
+Link$1.defaultProps = {
     variant: 'body1',
 };
-Link.displayName = 'Link';
+Link$1.displayName = 'Link';
 
-var useStyles = core.makeStyles(function (_a) {
+var useStyles$7 = core.makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -679,22 +826,22 @@ var useStyles = core.makeStyles(function (_a) {
         },
     });
 });
-var Paper = React.forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
-    return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
+var Paper$1 = React.forwardRef(function (props, ref) {
+    var legacyStyles = props.legacyStyles, restProps = __rest$2(props, ["legacyStyles"]);
+    var classes = useStyles$7(props);
+    return React__default['default'].createElement(core.Paper, __assign$2({}, ref, { classes: __assign$2({}, (legacyStyles && classes)) }, restProps));
 });
-Paper.displayName = 'Paper';
-Paper.defaultProps = {
+Paper$1.displayName = 'Paper';
+Paper$1.defaultProps = {
     legacyStyles: false,
 };
 
-var Radio = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React__default['default'].createElement(MuiRadio__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+var Radio$1 = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest$2(props, ["label", "disabled", "LabelProps"]);
+    var control = React__default['default'].createElement(MuiRadio__default['default'], __assign$2({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign$2({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Radio.displayName = 'Radio';
+Radio$1.displayName = 'Radio';
 
 styles.makeStyles(function () { return ({
     textfield: {
@@ -721,7 +868,7 @@ styles.makeStyles(function () { return ({
     focused: {},
 }); });
 
-var useSwitchStyles = styles.makeStyles(function (theme) { return ({
+var useSwitchStyles$1 = styles.makeStyles(function (theme) { return ({
     checked: {
         '& $thumb': {
             background: theme.palette.success.main,
@@ -734,15 +881,15 @@ var useSwitchStyles = styles.makeStyles(function (theme) { return ({
     track: {},
 }); });
 
-var Switch = React.forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var classes = useSwitchStyles(props);
-    var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+var Switch$1 = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest$2(props, ["label", "disabled", "LabelProps"]);
+    var classes = useSwitchStyles$1(props);
+    var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign$2({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign$2({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
 });
-Switch.displayName = 'Switch';
+Switch$1.displayName = 'Switch';
 
-var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
+var useToggleButtonStyles$1 = styles.makeStyles(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
     },
@@ -757,20 +904,20 @@ var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var ToggleButton = React.forwardRef(function (props, ref) {
-    var children = props.children, muiProps = __rest(props, ["children"]);
-    var classes = useToggleButtonStyles(props);
-    return (React__default['default'].createElement(MuiToggleButton__default['default'], __assign({ ref: ref, classes: {
+var ToggleButton$1 = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = __rest$2(props, ["children"]);
+    var classes = useToggleButtonStyles$1(props);
+    return (React__default['default'].createElement(MuiToggleButton__default['default'], __assign$2({ ref: ref, classes: {
             root: classes.root,
             selected: classes.selected,
         } }, muiProps), children));
 });
-ToggleButton.defaultProps = {
+ToggleButton$1.defaultProps = {
     color: 'primary',
 };
-ToggleButton.displayName = 'ToggleButton';
+ToggleButton$1.displayName = 'ToggleButton';
 
-var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
+var useToggleButtonGroupStyles$1 = styles.makeStyles(function (theme) { return ({
     root: {
         '&&': {
             backgroundColor: theme.palette.grey[300],
@@ -778,20 +925,20 @@ var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
     },
 }); });
 
-var ToggleButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "color"]);
-    var classes = useToggleButtonGroupStyles(props);
+var ToggleButtonGroup$1 = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest$2(props, ["children", "color"]);
+    var classes = useToggleButtonGroupStyles$1(props);
     var childrenWithProps = React__default['default'].Children.map(children, function (child) {
         if (!React__default['default'].isValidElement(child)) {
             return null;
         }
         return React__default['default'].cloneElement(child, { color: color });
     });
-    return (React__default['default'].createElement(MuiToggleButtonGroup__default['default'], __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
+    return (React__default['default'].createElement(MuiToggleButtonGroup__default['default'], __assign$2({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
 });
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+ToggleButtonGroup$1.displayName = 'ToggleButtonGroup';
 
-var useTooltipStyles = styles.makeStyles(function (_a) {
+var useTooltipStyles$1 = styles.makeStyles(function (_a) {
     var typography = _a.typography;
     return ({
         tooltip: {
@@ -800,11 +947,11 @@ var useTooltipStyles = styles.makeStyles(function (_a) {
     });
 });
 
-var Tooltip = React.forwardRef(function (props, ref) {
-    var classes = useTooltipStyles(props);
-    return React__default['default'].createElement(MuiTooltip__default['default'], __assign({ ref: ref, classes: classes }, props));
+var Tooltip$1 = React.forwardRef(function (props, ref) {
+    var classes = useTooltipStyles$1(props);
+    return React__default['default'].createElement(MuiTooltip__default['default'], __assign$2({ ref: ref, classes: classes }, props));
 });
-Tooltip.displayName = 'Tooltip';
+Tooltip$1.displayName = 'Tooltip';
 
 core.makeStyles(function () { return ({
     root: {
@@ -834,15 +981,147 @@ core.makeStyles(function (theme) { return ({
     },
 }); });
 
-var TableFooter = function (props) {
-    return (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4, flexGrow: 1 }, props.children));
+var useTableRowStyles = core.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$3(props, ["children"]);
+    var root = useTableRowStyles(props).root;
+    return (React__default['default'].createElement("tr", __assign$3({ "data-table-element": "body-row", className: root }, restProps), children));
+};
+
+var tableConstants = {
+    tableTypography: 'body1',
+    cellPaddingFactor: 2,
+    headerBorder: 2,
+};
+
+var coercedValueIncludesString = function (row, columnId, value) {
+    if (value === '')
+        return true;
+    var cellValue = row.getValue(columnId);
+    return String(cellValue).toLowerCase().includes(value.toLowerCase());
+};
+
+var getTableMinHeight = function (rootRef, pageSize) {
+    var defaultBodyRowHeight = 56;
+    var defaultHeaderRowHeight = 57;
+    var defaultFooterHeight = 88;
+    var borderOffset = 1;
+    var minHeight = defaultBodyRowHeight * pageSize + defaultHeaderRowHeight + defaultFooterHeight;
+    if (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) {
+        var rootTableNode = rootRef.current;
+        var headerRowNode = rootTableNode.querySelector("[data-table-element=\"header-row\"]");
+        var bodyRowNode = rootTableNode.querySelector("[data-table-element=\"body-row\"]");
+        if (headerRowNode && bodyRowNode) {
+            var headerRowHeight = headerRowNode.getBoundingClientRect().height;
+            var firstBodyRowHeight = bodyRowNode.getBoundingClientRect().height;
+            var restBodyRowHeight = firstBodyRowHeight - borderOffset;
+            minHeight = headerRowHeight + firstBodyRowHeight + restBodyRowHeight * (pageSize - 1) + defaultFooterHeight;
+        }
+    }
+    return minHeight;
+};
+
+var useTableCellStyles = core.makeStyles(function (theme) { return ({
+    root: function () { return ({
+        padding: theme.spacing(tableConstants.cellPaddingFactor),
+    }); },
+}); });
+
+var TableCell = function (props) {
+    var children = props.children, restProps = __rest$3(props, ["children"]);
+    var root = useTableCellStyles(props).root;
+    return (React__default['default'].createElement("td", __assign$3({ className: root }, restProps), children));
+};
+
+var TableBody = function (props) {
+    var children = props.children, restProps = __rest$3(props, ["children"]);
+    return React__default['default'].createElement("tbody", __assign$3({}, restProps), children);
 };
 
+var useStyles$6 = core.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$3(__assign$3({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
+        },
+        tableContainer: function () { return ({
+            maxWidth: '100%',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+        }); },
+    });
+});
+
 var TableHeader = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return React__default['default'].createElement("thead", __assign$1({}, restProps), children);
+    var children = props.children, restProps = __rest$3(props, ["children"]);
+    return React__default['default'].createElement("thead", __assign$3({}, restProps), children);
+};
+
+var TableFooter = function (props) {
+    return (React__default['default'].createElement(core.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
 };
 
+var useStyles$4 = core.makeStyles(function (theme) { return ({
+    buttonLabel: {
+        fontWeight: 400,
+    },
+    filterPopoverContents: {
+        backgroundColor: 'white',
+        borderRadius: theme.spacing(1),
+        position: 'relative',
+        margin: '10px',
+        marginTop: theme.spacing(2),
+        width: '323px',
+        '&::before': {
+            backgroundColor: 'white',
+            borderRadius: theme.spacing(0.5),
+            content: '""',
+            display: 'block',
+            filter: 'drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.12))',
+            position: 'absolute',
+            width: theme.spacing(2.5),
+            height: theme.spacing(2.5),
+            top: -7,
+            transform: 'rotate(45deg)',
+            left: 'calc(90% - 12px)',
+            zIndex: 0,
+        },
+        '&::after': {
+            backgroundColor: 'white',
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            top: 0,
+            left: 'calc(80%)',
+            width: theme.spacing(6),
+            height: theme.spacing(4),
+        },
+    },
+    menuTitle: {
+        fontWeight: 400,
+        fontSize: '20px',
+        paddingBottom: theme.spacing(2),
+    },
+    selectInput: {
+        margin: '8px 0',
+    },
+}); });
+
 var _path$15;
 
 function _extends$2s() { _extends$2s = 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$2s.apply(this, arguments); }
@@ -879,315 +1158,2213 @@ function SvgChevronUp(props) {
   })));
 }
 
-var _path$K;
+var _path$_;
 
-function _extends$1K() { _extends$1K = 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$1K.apply(this, arguments); }
+function _extends$2g() { _extends$2g = 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$2g.apply(this, arguments); }
 
-function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1K({
+function SvgSort(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2g({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.334A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z",
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M11.333 6L8 2.667 4.667 6m6.666 4L8 13.334 4.667 10",
     stroke: "currentColor"
   })));
 }
 
-var _path$H;
+var _path$S;
+
+function _extends$1_() { _extends$1_ = 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$1_.apply(this, arguments); }
+
+function SvgFilter(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1_({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 2H1.333l5.334 6.307v4.36L9.333 14V8.307L14.667 2z",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$K;
+
+function _extends$1K() { _extends$1K = 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$1K.apply(this, arguments); }
+
+function SvgMore(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1K({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$K || (_path$K = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 8.667a.667.667 0 100-1.334.667.667 0 000 1.334zM8 4a.667.667 0 100-1.334A.667.667 0 008 4zm0 9.333A.667.667 0 108 12a.667.667 0 000 1.333z",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$H;
 
 function _extends$1F() { _extends$1F = 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$1F.apply(this, arguments); }
 
-function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1F({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9",
-    stroke: "currentColor"
-  })));
-}
+function SvgSearch(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1F({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M7.333 12.667A5.333 5.333 0 107.333 2a5.333 5.333 0 000 10.667zM14 14l-2.9-2.9",
+    stroke: "currentColor"
+  })));
+}
+
+var useStyles$3 = core.makeStyles(function (theme) { return ({
+    icon: {
+        marginRight: theme.spacing(1.5),
+        marginTop: theme.spacing(0.5),
+        scale: 1.5,
+    },
+    placeholder: {
+        opacity: 0.5,
+    },
+    selectContainer: {
+        padding: '8px 0',
+    },
+    hidden: {
+        display: 'none',
+    },
+}); });
+
+var TableContext = React.createContext({});
+
+var SelectFilter = function (props) {
+    var options = props.options, columnId = props.columnId, multiple = props.multiple;
+    var classes = useStyles$3();
+    var table = React.useContext(TableContext);
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var value = column.getFilterValue();
+    var fallbackValue = multiple ? [] : '';
+    var filteredOptions = options.map(function (option) {
+        if (Array.isArray(value)) {
+            if (value.includes(option.value)) {
+                return __assign$3(__assign$3({}, option), { hide: true });
+            }
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            if (value === option.value) {
+                return __assign$3(__assign$3({}, option), { hide: true });
+            }
+        }
+        return __assign$3(__assign$3({}, option), { hide: false });
+    });
+    var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
+    var handleChange = function (event) {
+        event.stopPropagation();
+        column.setFilterValue(event.target.value);
+    };
+    var handleItemClick = function () {
+        if (multiple) {
+            if (filteredOptionsCount === 1) {
+                setOpen(false);
+            }
+        }
+    };
+    return (React__default['default'].createElement(core.Box, { className: classes.selectContainer },
+        React__default['default'].createElement(core.Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: function () { return React__default['default'].createElement(Typography$1, { className: classes.placeholder }, meta === null || meta === void 0 ? void 0 : meta.filter.name); }, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
+                root: classes.selectInput,
+                icon: classes.icon,
+            }, MenuProps: {
+                disablePortal: true,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                },
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                },
+                getContentAnchorEl: null,
+            } }, filteredOptions.map(function (option, index) {
+            return (React__default['default'].createElement(MenuItem__default['default'], { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
+        }))));
+};
+
+var FilterControl = function (props) {
+    var input = props.input, columnFilter = __rest$3(props, ["input"]);
+    var inputDictionary = {
+        text: core.TextField,
+        select: SelectFilter,
+        'multi-select': SelectFilter,
+    };
+    var propsDictionary = {
+        select: { multiple: false },
+        'multi-select': { multiple: true },
+    };
+    return React__default['default'].createElement("div", null, React.createElement(inputDictionary[input], __assign$3(__assign$3({}, columnFilter), propsDictionary[input])));
+};
+
+var useColumnFilters = function (table) {
+    var selectedColumnFilters = getSelectedColumnFilters(table.getState());
+    var columnFilters = getColumnFilters(table.getAllFlatColumns());
+    var hasColumnFilters = columnFilters.length > 0;
+    var deselectColumnFilter = makeDeselectColumnFilter(table);
+    var formatSelectedFilterText = makeFormatSelectedFilterText(table);
+    var resetColumnFilters = table.resetColumnFilters;
+    return {
+        selectedColumnFilters: selectedColumnFilters,
+        columnFilters: columnFilters,
+        hasColumnFilters: hasColumnFilters,
+        deselectColumnFilter: deselectColumnFilter,
+        formatSelectedFilterText: formatSelectedFilterText,
+        resetColumnFilters: resetColumnFilters,
+    };
+};
+function getSelectedColumnFilters(state) {
+    var columnFilters = state.columnFilters;
+    var selectedColumnFilters = columnFilters.reduce(function (acc, columnFilter) {
+        var id = columnFilter.id, value = columnFilter.value;
+        var selections = [];
+        if (value) {
+            if (Array.isArray(value)) {
+                value.forEach(function (innerValue) {
+                    selections.push({ id: id, value: innerValue });
+                });
+            }
+            else if (typeof value === 'string' || typeof value === 'number') {
+                selections.push({ id: id, value: value });
+            }
+        }
+        return __spreadArray(__spreadArray([], acc), selections);
+    }, []);
+    return selectedColumnFilters;
+}
+function getColumnFilters(columns) {
+    return columns
+        .map(function (column) {
+        var meta = column.columnDef.meta;
+        if (meta === null || meta === void 0 ? void 0 : meta.filter) {
+            return __assign$3({ columnId: column.id }, meta.filter);
+        }
+    })
+        .filter(Boolean);
+}
+function makeDeselectColumnFilter(table) {
+    return function (columnFilter) {
+        var column = table.getColumn(columnFilter.id);
+        column.setFilterValue(function (prev) {
+            if (Array.isArray(prev)) {
+                return prev.filter(function (value) { return value !== columnFilter.value; });
+            }
+            else if (typeof prev === 'string' || typeof prev === 'number') {
+                return null;
+            }
+            return prev;
+        });
+    };
+}
+function makeFormatSelectedFilterText(table) {
+    return function (columnFilter) {
+        var column = table.getColumn(columnFilter.id);
+        var meta = column.columnDef.meta;
+        var name = (meta === null || meta === void 0 ? void 0 : meta.filter.name) || '';
+        var optionMatch = meta === null || meta === void 0 ? void 0 : meta.filter.options.find(function (option) { return option.value === columnFilter.value; });
+        var label = optionMatch === null || optionMatch === void 0 ? void 0 : optionMatch.label;
+        return [name, label];
+    };
+}
+
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles$4();
+    var table = React.useContext(TableContext);
+    var paperRef = React.useRef(null);
+    var columnFilters = useColumnFilters(table).columnFilters;
+    var handleClick = function (e) {
+        var _a;
+        var rect = (_a = paperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var buffer = 10;
+            var mouseX = e.nativeEvent.x;
+            var mouseY = e.nativeEvent.y;
+            var xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
+            var yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
+            if (!xHit || !yHit) {
+                onClose();
+            }
+        }
+    };
+    var open = Boolean(anchorEl);
+    return (React__default['default'].createElement(core.Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+        }, className: classes.filterPopover, onClose: onClose, open: open, PaperProps: {
+            style: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                borderRadius: 0,
+            },
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right',
+        } },
+        React__default['default'].createElement(Paper$1, { className: classes.filterPopoverContents, elevation: 2 },
+            React__default['default'].createElement(core.Box, __assign$3({}, { ref: paperRef }, { padding: 3 }),
+                React__default['default'].createElement(Typography$1, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React__default['default'].createElement(FilterControl, __assign$3({}, columnFilter, { key: i }))); })))));
+};
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var _path$D;
+
+function _extends$1u() { _extends$1u = 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$1u.apply(this, arguments); }
+
+function SvgUser(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1u({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
+    stroke: "currentColor"
+  })));
+}
+
+var useIconStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing, palette = _a.palette;
+    var getFontSize = function (_a) {
+        var size = _a.size;
+        var sizes = {
+            inherit: 'inherit',
+            small: spacing(1.5),
+            medium: spacing(2),
+            large: spacing(2.5),
+            'extra-large': spacing(3),
+        };
+        return size ? sizes[size] : 'inherit';
+    };
+    var getColor = function (props) {
+        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
+        var value = 'inherit';
+        if (props.color) {
+            if (semanticColors.includes(props.color.split('.')[0])) {
+                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+                value = palette[color][variant];
+            }
+            else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
+                value = props.color;
+            }
+        }
+        return value;
+    };
+    return {
+        root: {
+            color: getColor,
+            fontSize: getFontSize,
+            strokeWidth: '1.3px',
+        },
+    };
+});
+
+var classnames$1 = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames$1));
+
+var classNames$1 = classnames$1.exports;
+
+var iconStaticClassName = 'pop-icon';
+var Icon = function (props) {
+    var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
+    var classes = useIconStyles(props);
+    var isValid = true;
+    if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
+        isValid = false;
+    }
+    return isValid
+        ? React.createElement(icon, __assign({ className: classNames$1([classes.root, iconStaticClassName, className]) }, restProps))
+        : null;
+};
+Icon.defaultProps = {
+    size: 'inherit',
+    color: 'inherit',
+};
+Icon.displayName = 'Icon';
+
+var LoadingStatus;
+(function (LoadingStatus) {
+    LoadingStatus["ERROR"] = "ERROR";
+    LoadingStatus["LOADED"] = "LOADED";
+    LoadingStatus["PENDING"] = "PENDING";
+})(LoadingStatus || (LoadingStatus = {}));
+var useImgProps = function (avatarProps) {
+    var _a = React__default['default'].useState(LoadingStatus.PENDING), loaded = _a[0], setLoaded = _a[1];
+    var imgProps = __assign(__assign({}, avatarProps.imgProps), { onLoad: function (event) {
+            var _a, _b;
+            setLoaded(LoadingStatus.LOADED);
+            (_b = (_a = avatarProps.imgProps) === null || _a === void 0 ? void 0 : _a.onLoad) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        } });
+    return { imgProps: imgProps, loaded: loaded };
+};
+
+var getAvatarDimensions = function (theme, props) {
+    var factors = {
+        'extra-small': 3,
+        small: 4,
+        medium: 5,
+        large: 6,
+        'extra-large': 12.5,
+    };
+    var sizeFactor = factors[props.size || 'medium'];
+    return theme.spacing(sizeFactor);
+};
+var getAvatarFontSize = function (props) {
+    var fontSizes = {
+        'extra-small': '0.75rem',
+        small: '1rem',
+        medium: '1rem',
+        large: '1.25rem',
+        'extra-large': '3.5rem',
+    };
+    return fontSizes[props.size];
+};
+var useAvatarStyles = styles.makeStyles(function (theme) { return ({
+    root: function (props) { return ({
+        width: getAvatarDimensions(theme, props),
+        height: getAvatarDimensions(theme, props),
+        fontSize: getAvatarFontSize(props),
+        backgroundColor: props.loaded === LoadingStatus.LOADED ? 'transparent' : props.background,
+        color: theme.palette.getContrastText(props.background),
+        objectFit: props.fit,
+    }); },
+    fallback: function (props) { return ({
+        fontSize: getAvatarDimensions(theme, props),
+        strokeWidth: 1,
+    }); },
+}); });
+
+var Avatar = React.forwardRef(function (props, ref) {
+    var children = props.children, src = props.src, alt = props.alt, fallback = props.fallback, muiProps = __rest(props, ["children", "src", "alt", "fallback"]);
+    var _a = useImgProps(props), imgProps = _a.imgProps, loaded = _a.loaded;
+    var classes = useAvatarStyles(__assign(__assign({}, props), { loaded: loaded }));
+    var displayAltTextFallback = src && alt;
+    var displayNoFallback = fallback === 'none';
+    var displayCustomFallback = fallback !== 'none' && typeof fallback !== 'undefined';
+    var Fallback;
+    if (displayAltTextFallback) {
+        Fallback = null;
+    }
+    else if (displayNoFallback) {
+        Fallback = ' ';
+    }
+    else if (displayCustomFallback) {
+        Fallback = fallback;
+    }
+    else {
+        Fallback = React__default['default'].createElement(Icon, { icon: SvgUser, className: classes.fallback });
+    }
+    return (React__default['default'].createElement(MuiAvatar__default['default'], __assign({ ref: ref, classes: { root: classes.root }, src: src, alt: alt }, muiProps, { imgProps: imgProps }), children || Fallback));
+});
+Avatar.defaultProps = {
+    size: 'medium',
+    fit: 'cover',
+    background: '#E0E0E0',
+};
+Avatar.displayName = 'Avatar';
+
+var useButtonStyles$1 = styles.makeStyles(function () { return ({
+    root: {
+        minWidth: 'unset',
+    },
+    label: {
+        textTransform: function (_a) {
+            var textTransform = _a.textTransform;
+            return textTransform;
+        },
+    },
+}); });
+
+var Button$1 = React.forwardRef(function (props, ref) {
+    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, muiProps = __rest(props, ["textTransform", "loading", "classes", "className"]);
+    props.classes; var styleProps = __rest(props, ["classes"]);
+    var classes = useButtonStyles$1(styleProps);
+    var typography = styles.useTheme().typography;
+    var loadingIndicator = {
+        startIcon: React__default['default'].createElement(CircularProgress__default['default'], { color: "inherit", size: typography.button.fontSize }),
+        disabled: true,
+    };
+    return (React__default['default'].createElement(MuiButton__default['default'], __assign({ ref: ref, classes: __assign(__assign({}, classes), classesOverride), className: classNames$1([className, 'pm-button']) }, muiProps, (loading && loadingIndicator))));
+});
+Button$1.displayName = 'Button';
+
+var Checkbox = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
+    var control = React__default['default'].createElement(MuiCheckbox__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+});
+Checkbox.displayName = 'Checkbox';
+
+var getBackground$1 = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var background = theme.palette.grey[100];
+    var backgrounds = {
+        outlined: 'none',
+        error: 'error.main',
+        warning: 'warning.main',
+        info: 'info.light',
+        success: 'success.light',
+    };
+    if (variant === 'outlined') {
+        background = backgrounds[variant];
+    }
+    else if (severity) {
+        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
+        background = theme.palette[color][colorVariant];
+    }
+    return background;
+}; };
+var getColor$1 = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var textColor;
+    if (variant === 'outlined' && severity) {
+        var textColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        textColor = textColors[severity];
+    }
+    else if (variant === 'outlined' && !severity) {
+        textColor = theme.palette.grey[700];
+    }
+    else if ((variant === 'default' || variant === undefined) && severity) {
+        var textColors = {
+            error: theme.palette.common.white,
+            info: theme.palette.secondary.main,
+            warning: theme.palette.secondary.main,
+            success: theme.palette.secondary.main,
+        };
+        textColor = textColors[severity];
+    }
+    return textColor;
+}; };
+var getBorder = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var borderColor;
+    if (variant === 'outlined' && severity) {
+        var borderColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        borderColor = borderColors[severity];
+    }
+    return borderColor;
+}; };
+styles.makeStyles(function (theme) { return ({
+    root: {
+        background: getBackground$1(theme),
+        color: getColor$1(theme),
+        borderColor: getBorder(theme),
+        borderRadius: theme.spacing(0.5),
+    },
+    icon: {
+        color: 'inherit',
+        height: theme.spacing(2),
+        width: theme.spacing(2),
+    },
+    deleteIcon: {
+        color: theme.palette.grey[500],
+    },
+}); });
+
+var defaultTypographyProps = {
+    variant: 'body1',
+};
+
+var weights = {
+    regular: 400,
+    medium: 500,
+    'semi-bold': 600,
+    bold: 700,
+};
+var getCustomColor = function (theme, color) {
+    var isCommonColor = color && ['white', 'black'].includes(color);
+    var isGreyColor = color && color.match(/^grey\.\d{3}/);
+    var isSemanticColor = color && color.match(/(primary|secondary|info|success|error|warning).?(light|dark)?/);
+    var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
+    switch (true) {
+        case isCommonColor:
+            return theme.palette.common[color];
+        case Boolean(isGreyColor):
+            var scale = color.split('.')[1];
+            return theme.palette.grey[scale] || theme.palette.grey[900];
+        case Boolean(isSemanticColor):
+            var _a = color.split('.'), paletteKey = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+            return theme.palette[paletteKey][variant];
+        case isTextColor:
+            return theme.palette.text[color.slice(4).toLowerCase()];
+        default:
+            return undefined;
+    }
+};
+var useTypographyStyles = styles.makeStyles(function (theme) {
+    var _a;
+    return ({
+        root: (_a = {},
+            _a["& ." + iconStaticClassName] = {
+                position: 'relative',
+                top: '0.125em',
+                padding: '0 0.125em',
+                boxSizing: 'content-box',
+            },
+            _a.fontFamily = theme.typography.fontFamily,
+            _a.fontWeight = function (_a) {
+                var variant = _a.variant, weight = _a.weight;
+                return (weight ? weights[weight] : theme.typography[variant].fontWeight);
+            },
+            _a.fontSize = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant].fontSize;
+            },
+            _a.lineHeight = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant].lineHeight;
+            },
+            _a.textTransform = function (_a) {
+                var variant = _a.variant;
+                return theme.typography[variant].textTransform;
+            },
+            _a.color = function (_a) {
+                var color = _a.color, variant = _a.variant;
+                return (color && getCustomColor(theme, color)) || theme.typography[variant].color;
+            },
+            _a),
+        caption: {
+            display: 'inline',
+        },
+        overline: {
+            display: 'inline',
+        },
+    });
+});
+
+var Typography = React.forwardRef(function (props, ref) {
+    props.weight; props.color; var restProps = __rest(props, ["weight", "color"]);
+    var classes = useTypographyStyles(__assign({}, props));
+    var variantMapping = { subtitle1: 'p' };
+    return React__default['default'].createElement(core.Typography, __assign({ ref: ref, classes: classes, variantMapping: variantMapping }, restProps));
+});
+Typography.displayName = 'Typography';
+Typography.defaultProps = defaultTypographyProps;
+
+var getFadeStop = function (_a, typographyVariant) {
+    var typography = _a.typography;
+    return !isNaN(Number(typography[typographyVariant].lineHeight))
+        ? typography[typographyVariant].lineHeight + "rem"
+        : typography[typographyVariant].lineHeight;
+};
+core.makeStyles(function (theme) { return ({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '100%',
+        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
+    },
+}); });
+
+var SemanticColors;
+(function (SemanticColors) {
+    SemanticColors["PRIMARY_MAIN"] = "primary.main";
+    SemanticColors["PRIMARY_DARK"] = "primary.dark";
+    SemanticColors["PRIMARY_LIGHT"] = "primary.light";
+    SemanticColors["SECONDARY_MAIN"] = "secondary.main";
+    SemanticColors["SECONDARY_DARK"] = "secondary.dark";
+    SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
+})(SemanticColors || (SemanticColors = {}));
+core.makeStyles(function (theme) { return ({
+    dividerRoot: {
+        gap: theme.spacing(2),
+    },
+    textRoot: {
+        color: function (props) {
+            var textColor = props.textColor;
+            if (Object.values(SemanticColors).includes(textColor)) {
+                var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
+                return theme.palette[semanticColor][shade];
+            }
+            else if (textColor) {
+                return textColor;
+            }
+            else {
+                return 'black';
+            }
+        },
+        textTransform: function (props) { return props.textTransform; },
+    },
+    dividerLine: {
+        backgroundColor: function (props) {
+            var dividerColor = props.dividerColor;
+            if (Object.values(SemanticColors).includes(dividerColor)) {
+                var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
+                return theme.palette[semanticColor][shade];
+            }
+            else if (dividerColor) {
+                return dividerColor;
+            }
+            else {
+                return theme.palette.grey[500];
+            }
+        },
+    },
+}); });
+
+var IconButton = React.forwardRef(function (props, ref) {
+    return React__default['default'].createElement(MuiIconButton__default['default'], __assign({ ref: ref }, props));
+});
+IconButton.displayName = 'IconButton';
+IconButton.defaultProps = {
+    color: 'secondary',
+};
+
+var useLinkStyles = styles.makeStyles(function (theme) { return ({
+    root: function (props) {
+        var _a;
+        return (__assign(__assign({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName] = {
+            alignSelf: 'center',
+        }, _a)));
+    },
+}); });
+
+var Link = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = __rest(props, ["children"]);
+    var classes = useLinkStyles(props);
+    return (React__default['default'].createElement(core.Link, __assign({ ref: ref, classes: { root: classes.root } }, muiProps), children));
+});
+Link.defaultProps = {
+    variant: 'body1',
+};
+Link.displayName = 'Link';
+
+var useStyles$5 = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            '&:last-child': {
+                marginBottom: 0,
+            },
+            marginBottom: spacing(4),
+            padding: spacing(4),
+        },
+    });
+});
+var Paper = React.forwardRef(function (props, ref) {
+    var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
+    var classes = useStyles$5(props);
+    return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
+});
+Paper.displayName = 'Paper';
+Paper.defaultProps = {
+    legacyStyles: false,
+};
+
+var Radio = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
+    var control = React__default['default'].createElement(MuiRadio__default['default'], __assign({ disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+});
+Radio.displayName = 'Radio';
+
+styles.makeStyles(function () { return ({
+    textfield: {
+        background: function (props) { return (props.backgroundTransparency ? '#FFFFFF44' : 'none'); },
+        borderTopLeftRadius: 4,
+        borderBottomLeftRadius: 4,
+        '& fieldset': {
+            borderRight: 'none',
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0,
+        },
+    },
+    button: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        alignSelf: 'stretch',
+    },
+    input: {
+        color: function (props) { return props.inputTextColor || 'inherit'; },
+        '&$focused fieldset': {
+            top: -4,
+        },
+    },
+    focused: {},
+}); });
+
+var useSwitchStyles = styles.makeStyles(function (theme) { return ({
+    checked: {
+        '& $thumb': {
+            background: theme.palette.success.main,
+        },
+        '&& + $track': {
+            backgroundColor: theme.palette.success.main,
+        },
+    },
+    thumb: {},
+    track: {},
+}); });
+
+var Switch = React.forwardRef(function (props, ref) {
+    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
+    var classes = useSwitchStyles(props);
+    var control = React__default['default'].createElement(MuiSwitch__default['default'], __assign({ classes: classes, disabled: label ? undefined : disabled }, muiProps));
+    return label ? (React__default['default'].createElement(FormControlLabel__default['default'], __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+});
+Switch.displayName = 'Switch';
+
+var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+    },
+    selected: {
+        '&&': {
+            '&:hover': {
+                backgroundColor: function (props) { return theme.palette[props.color || 'primary'].dark; },
+            },
+            backgroundColor: function (props) { return theme.palette[props.color || 'primary'].main; },
+            color: 'white',
+        },
+    },
+}); });
+
+var ToggleButton = React.forwardRef(function (props, ref) {
+    var children = props.children, muiProps = __rest(props, ["children"]);
+    var classes = useToggleButtonStyles(props);
+    return (React__default['default'].createElement(MuiToggleButton__default['default'], __assign({ ref: ref, classes: {
+            root: classes.root,
+            selected: classes.selected,
+        } }, muiProps), children));
+});
+ToggleButton.defaultProps = {
+    color: 'primary',
+};
+ToggleButton.displayName = 'ToggleButton';
+
+var useToggleButtonGroupStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        '&&': {
+            backgroundColor: theme.palette.grey[300],
+        },
+    },
+}); });
+
+var ToggleButtonGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'primary' : _a, muiProps = __rest(props, ["children", "color"]);
+    var classes = useToggleButtonGroupStyles(props);
+    var childrenWithProps = React__default['default'].Children.map(children, function (child) {
+        if (!React__default['default'].isValidElement(child)) {
+            return null;
+        }
+        return React__default['default'].cloneElement(child, { color: color });
+    });
+    return (React__default['default'].createElement(MuiToggleButtonGroup__default['default'], __assign({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
+});
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+var useTooltipStyles = styles.makeStyles(function (_a) {
+    var typography = _a.typography;
+    return ({
+        tooltip: {
+            fontSize: typography.pxToRem(16),
+        },
+    });
+});
+
+var Tooltip = React.forwardRef(function (props, ref) {
+    var classes = useTooltipStyles(props);
+    return React__default['default'].createElement(MuiTooltip__default['default'], __assign({ ref: ref, classes: classes }, props));
+});
+Tooltip.displayName = 'Tooltip';
+
+core.makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+core.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(1),
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        minWidth: 40,
+        padding: 0,
+        textAlign: 'center',
+    },
+    adornedStart: {
+        padding: 0,
+    },
+    adornedEnd: {
+        padding: 0,
+    },
+}); });
+
+var _g$1d, _defs$I;
+
+function _extends$27() { _extends$27 = 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$27.apply(this, arguments); }
+
+function SvgCheckCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$27({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$1d || (_g$1d = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#check-circle_svg__clip0_8_5831)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  }))), _defs$I || (_defs$I = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "check-circle_svg__clip0_8_5831"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$U;
+
+function _extends$25() { _extends$25 = 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$25.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$25({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$U || (_path$U = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
+var _g$15, _defs$B;
+
+function _extends$1X() { _extends$1X = 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$1X.apply(this, arguments); }
+
+function SvgHelp(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1X({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$15 || (_g$15 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#help_svg__clip0_8_5446)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.06 6a2 2 0 013.887.667c0 1.333-2 2-2 2M8 11.334h.007"
+  }))), _defs$B || (_defs$B = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "help_svg__clip0_8_5446"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$13, _defs$A;
+
+function _extends$1V() { _extends$1V = 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$1V.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1V({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$13 || (_g$13 = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#info_svg__clip0_8_5377)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007"
+  }))), _defs$A || (_defs$A = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "info_svg__clip0_8_5377"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _g$Q, _defs$r;
+
+function _extends$1q() { _extends$1q = 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$1q.apply(this, arguments); }
+
+function SvgError(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1q({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g$Q || (_g$Q = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#error_svg__clip0_8_5411)",
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008"
+  }))), _defs$r || (_defs$r = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+    id: "error_svg__clip0_8_5411"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 0h16v16H0z"
+  })))));
+}
+
+var _path$A;
+
+function _extends$1p() { _extends$1p = 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$1p.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
+var useAlertStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        alignItems: 'center',
+        width: function (_a) {
+            var fullWidth = _a.fullWidth;
+            return (fullWidth ? '100%' : 'unset');
+        },
+        background: 'white',
+        borderColor: function (props) { return theme.palette[props.severity || 'error'].main; },
+        borderLeft: theme.spacing(1) + "px solid",
+        color: theme.palette.text.primary,
+    },
+    icon: {
+        alignSelf: 'start',
+    },
+}); });
+
+var severityIcons$1 = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
+var Alert = React.forwardRef(function (props, ref) {
+    var children = props.children, link = props.link, _a = props.severity, severity = _a === void 0 ? 'error' : _a, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, onClose = props.onClose, muiProps = __rest$1(props, ["children", "link", "severity", "variant", "onClose"]);
+    var classes = useAlertStyles(props);
+    var validLink = link && link.href && link.text && { href: link.href, children: link.text };
+    var Action = (React__default['default'].createElement(React__default['default'].Fragment, null,
+        validLink && React__default['default'].createElement(Link, __assign$1({}, validLink)),
+        onClose && (React__default['default'].createElement(IconButton, { onClick: onClose },
+            React__default['default'].createElement(Icon, { icon: SvgX })))));
+    return (React__default['default'].createElement(CommonAlert__default['default'], __assign$1({ ref: ref, classes: classes, icon: React__default['default'].createElement(Icon, { icon: severityIcons$1[severity], size: "extra-large" }), action: Action, variant: variant, severity: severity }, muiProps), children));
+});
+Alert.displayName = 'Alert';
+
+var borderWidth = 1;
+var getColor = function (palette, props) {
+    var variant = props.variant;
+    var color = 'inherit';
+    if (['primary', 'info', 'success', 'warning', 'error'].includes(variant)) {
+        color = palette[variant].contrastText;
+    }
+    if (variant === 'secondary') {
+        color = palette[variant].main;
+        /**
+         * Temporary fix for dark theme buttons.
+         * Dark theme will be addressed in ch-11596 and the following if block should be removed
+         */
+        if (palette.type === 'dark') {
+            color = 'black';
+        }
+    }
+    if (variant === 'tertiary') {
+        color = palette.secondary.contrastText;
+    }
+    if (variant === 'text') {
+        color = palette.info.main;
+    }
+    return color;
+};
+var getColorHover = function (palette, props) {
+    var color;
+    if (props.variant === 'secondary') {
+        color = palette.secondary.contrastText;
+    }
+    return color;
+};
+var getBackground = function (palette, props) {
+    var backgroundColor = 'inherit';
+    if (['info', 'success', 'warning', 'error'].includes(props.variant)) {
+        backgroundColor = palette[props.variant].main;
+    }
+    if (props.variant === 'primary') {
+        // @ts-expect-error gradient colors are included in the extended palette.
+        backgroundColor = "linear-gradient(97.36deg, " + palette.primary.gradientStart + " 17.03%, " + palette.primary.gradientEnd + " 72.96%)";
+    }
+    if (props.variant === 'secondary') {
+        backgroundColor = 'white';
+    }
+    if (props.variant === 'tertiary') {
+        backgroundColor = palette.secondary.main;
+    }
+    return backgroundColor;
+};
+var getBackgroundHover = function (palette, props) {
+    var backgroundHoverColor = 'inherit';
+    if (['primary', 'info', 'success', 'warning', 'error'].includes(props.variant)) {
+        backgroundHoverColor = palette[props.variant].dark;
+    }
+    if (props.variant === 'secondary') {
+        backgroundHoverColor = palette.secondary.main;
+    }
+    if (props.variant === 'tertiary') {
+        backgroundHoverColor = palette.secondary.light;
+    }
+    if (props.variant === 'text' || props.variant === 'ghost') {
+        backgroundHoverColor = palette.action.hover;
+    }
+    return backgroundHoverColor;
+};
+var buttonTypography = {
+    fontWeight: 500,
+    fontSize: '0.875rem',
+    lineHeight: '1.25rem',
+};
+var useButtonStyles = core.makeStyles(function (_a) {
+    var palette = _a.palette, spacing = _a.spacing;
+    return ({
+        root: function (props) { return ({
+            minWidth: 'unset',
+            color: getColor(palette, props),
+            background: getBackground(palette, props),
+            backgroundColor: props.variant === 'primary' ? palette.primary.dark : getBackground(palette, props),
+            borderRadius: spacing(6),
+            transition: 'all 200ms ease-in-out',
+            '&:hover': {
+                color: getColorHover(palette, props),
+                background: getBackgroundHover(palette, props),
+            },
+        }); },
+        disabled: {
+            '&$root': {
+                background: palette.action.disabled,
+            },
+        },
+        contained: {
+            padding: spacing(1, 2),
+        },
+        outlined: {
+            padding: "calc(" + spacing(1) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            '&$sizeSmall': {
+                padding: "calc(" + spacing(0.5) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            },
+            '&$sizeLarge': {
+                padding: "calc(" + spacing(1.5) + "px - " + borderWidth + "px) calc(" + spacing(2) + "px - " + borderWidth + "px)",
+            },
+        },
+        text: {
+            padding: spacing(1, 2),
+        },
+        label: __assign$1(__assign$1({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }),
+        sizeSmall: {
+            padding: spacing(0.5, 2),
+        },
+        sizeLarge: {
+            padding: spacing(1.5, 2),
+        },
+    });
+});
+
+var deriveButtonProps = function (buttonProps) {
+    var variant = buttonProps.variant;
+    var derived = {};
+    switch (variant) {
+        case 'primary':
+            derived.variant = 'contained';
+            derived.color = 'primary';
+            break;
+        case 'secondary':
+            derived.variant = 'outlined';
+            derived.color = 'secondary';
+            break;
+        case 'tertiary':
+            derived.variant = 'contained';
+            derived.color = 'secondary';
+            break;
+        case 'text':
+            derived.variant = 'text';
+        case 'ghost':
+            derived.variant = 'text';
+            break;
+        case 'success':
+            derived.variant = 'contained';
+            break;
+        case 'info':
+            derived.variant = 'contained';
+            break;
+        case 'warning':
+            derived.variant = 'contained';
+            break;
+        case 'error':
+            derived.variant = 'contained';
+            break;
+        default:
+            derived.variant = variant;
+            break;
+    }
+    return derived;
+};
+
+var Button = React.forwardRef(function (props, ref) {
+    var children = props.children; props.variant; var classesOverride = props.classes, commonProps = __rest$1(props, ["children", "variant", "classes"]);
+    var classes = useButtonStyles(props);
+    var derivedProps = deriveButtonProps(props);
+    var mergedProps = __assign$1(__assign$1({}, derivedProps), commonProps);
+    return (React__default['default'].createElement(Button$1, __assign$1({ ref: ref, classes: __assign$1(__assign$1({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
+});
+Button.defaultProps = {
+    textTransform: 'uppercase',
+    variant: 'primary',
+};
+Button.displayName = 'Button';
+
+var useAlertDialogStyles = styles.makeStyles(function (theme) { return ({
+    cancelButton: {
+        color: theme.palette.grey[700],
+    },
+    cancelIcon: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(2),
+    },
+    card: {
+        borderRadius: theme.spacing(0.75),
+        borderTop: function (props) { return theme.spacing(1.25) + "px solid " + theme.palette[props.severity || 'info'].main; },
+    },
+    cardActions: {
+        background: theme.palette.grey[100],
+        justifyContent: 'flex-end',
+    },
+    icon: {
+        fontSize: theme.spacing(5),
+    },
+    root: {
+        borderRadius: theme.spacing(0.75),
+    },
+}); });
+
+var severityIcons = {
+    info: SvgInfo,
+    error: SvgError,
+    warning: SvgWarning,
+    success: SvgCheckCircle,
+};
+var AlertDialog = React.forwardRef(function (props, ref) {
+    var children = props.children, labelId = props.labelId, descriptionId = props.descriptionId, _a = props.severity, severity = _a === void 0 ? 'info' : _a, _b = props.proceedButtonText, proceedButtonText = _b === void 0 ? 'proceed' : _b, onClose = props.onClose, onCancel = props.onCancel, onProceed = props.onProceed, DialogProps = __rest$1(props, ["children", "labelId", "descriptionId", "severity", "proceedButtonText", "onClose", "onCancel", "onProceed"]);
+    var classes = useAlertDialogStyles(props);
+    return (React__default['default'].createElement(Dialog__default['default'], __assign$1({ ref: ref, classes: { paper: classes.root }, maxWidth: "sm", fullWidth: true }, DialogProps),
+        React__default['default'].createElement(Card__default['default'], { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
+            React__default['default'].createElement(IconButton, { className: classes.cancelIcon, onClick: onClose },
+                React__default['default'].createElement(Icon, { icon: SvgX })),
+            React__default['default'].createElement(CardContent__default['default'], null,
+                React__default['default'].createElement(core.Box, { display: "flex" },
+                    React__default['default'].createElement(Icon, { className: classes.icon, color: severity, icon: severityIcons[severity] }),
+                    React__default['default'].createElement(core.Box, { pl: 2, pr: 3 }, children))),
+            React__default['default'].createElement(CardActions__default['default'], { classes: { root: classes.cardActions } },
+                React__default['default'].createElement(Button, { onClick: onCancel, variant: "ghost" }, "Cancel"),
+                React__default['default'].createElement(Button, { onClick: onProceed, variant: severity }, proceedButtonText)))));
+});
+AlertDialog.displayName = 'AlertDialog';
+
+var getBorderColor = function (palette, variant) {
+    var borderColor = 'inherit';
+    if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(variant)) {
+        borderColor = palette[variant].light;
+    }
+    return borderColor;
+};
+var useButtonGroupStyles = styles.makeStyles(function (theme) { return ({
+    root: {
+        boxShadow: 'none',
+    },
+    groupedContained: {
+        '&&': {
+            borderColor: function (props) { return getBorderColor(theme.palette, props.variant); },
+        },
+    },
+    groupedText: {
+        '&&': {
+            borderColor: theme.palette.info.main,
+        },
+    },
+}); });
+
+var ButtonGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = __rest$1(props, ["children", "variant"]);
+    var classes = useButtonGroupStyles(props);
+    var derivedProps = deriveButtonProps({ variant: variant });
+    var spacing = styles.useTheme().spacing;
+    var childrenWithProps = React__default['default'].Children.map(children, function (child, i) {
+        var isFirst = i === 0 && props.orientation === 'vertical';
+        var isLast = i === React__default['default'].Children.toArray(children).length - 1 && props.orientation === 'vertical';
+        var firstStyles = { style: { borderTopLeftRadius: spacing(2), borderTopRightRadius: spacing(2) } };
+        var lastStyles = { style: { borderBottomLeftRadius: spacing(2), borderBottomRightRadius: spacing(2) } };
+        if (!React__default['default'].isValidElement(child)) {
+            return null;
+        }
+        return React__default['default'].cloneElement(child, __assign$1(__assign$1({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles)));
+    });
+    return (React__default['default'].createElement(CommonButtonGroup__default['default'], __assign$1({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
+});
+ButtonGroup.displayName = 'ButtonGroup';
+
+styles.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            gap: spacing(3),
+        },
+        actions: {
+            gap: spacing(3),
+        },
+        image: {
+            width: '100%',
+            objectFit: 'contain',
+        },
+    });
+});
+
+styles.makeStyles(function (theme) { return ({
+    root: {
+        position: 'sticky',
+        background: 'white',
+        bottom: 0,
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: theme.spacing(1.5) + "px " + theme.spacing(3) + "px",
+        borderTop: theme.spacing(0.5) + "px solid " + theme.palette.grey[100],
+        zIndex: 3,
+    },
+    inlineEndActions: {
+        '& > *': {
+            marginInlineStart: theme.spacing(2),
+        },
+    },
+    inlineStartActions: {
+        display: 'flex',
+        alignItems: 'center',
+        '& > *': {
+            marginInlineEnd: theme.spacing(2),
+        },
+    },
+}); });
+
+styles.makeStyles({
+    root: {
+        fontStyle: 'italic',
+    },
+});
+
+var getBorderRadius = function (theme, props) {
+    var stepCursor = props.stepCursor, stepCount = props.stepCount;
+    var isFinalStep = stepCursor / stepCount === 1;
+    if (isFinalStep) {
+        return 0;
+    }
+    else {
+        return theme.spacing(0.5);
+    }
+};
+styles.makeStyles(function (theme) { return ({
+    progress: {
+        width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
+        transition: 'all 500ms',
+        height: theme.spacing(1),
+        // @ts-expect-error: Theme includes extended properties
+        background: "linear-gradient(45deg, " + theme.palette.primary.gradientStart + ", " + theme.palette.primary.gradientEnd + ")",
+        borderEndEndRadius: function (props) { return getBorderRadius(theme, props); },
+        borderStartEndRadius: function (props) { return getBorderRadius(theme, props); },
+    },
+    track: {
+        position: 'absolute',
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: theme.spacing(0.5),
+        background: theme.palette.grey[100],
+        zIndex: 2,
+    },
+}); });
+
+styles.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        closeButton: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+        },
+        root: {
+            alignItems: 'center',
+            background: 'white',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            padding: spacing(1.5, 0),
+            position: 'sticky',
+            top: 0,
+            zIndex: 3,
+        },
+    });
+});
+
+React.createContext({});
+
+styles.makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
+    var selectedBackgroundColor = styles.lighten(theme.palette.info.light, 0.9);
+    var backgroundColor = theme.palette.surface.light;
+    return {
+        root: {
+            position: 'relative',
+            border: function (_a) {
+                var selected = _a.selected;
+                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
+            },
+            backgroundColor: function (_a) {
+                var selected = _a.selected;
+                return (selected ? selectedBackgroundColor : backgroundColor);
+            },
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
+            },
+            transition: 'none',
+        },
+        cardContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: spacing(2.5),
+        },
+        icon: {
+            position: 'absolute',
+            top: spacing(2),
+            left: spacing(2),
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? info.main : grey[700]);
+            },
+        },
+        focusHighlight: {
+            backgroundColor: 'inherit',
+        },
+    };
+});
+
+styles.makeStyles(function (theme) { return ({
+    root: {
+        boxSizing: 'border-box',
+        padding: theme.spacing(0, 1.5),
+        /** TODO: design to define responsive width value. */
+        width: '350px',
+        '& > div:first-child': {
+            alignItems: 'center',
+        },
+    },
+}); });
+
+core.makeStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        root: {
+            background: palette.grey['100'],
+        },
+    });
+});
+
+var usePageSectionStyles = core.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            background: function (_a) {
+                var uncontained = _a.uncontained;
+                return (uncontained ? 'transparent' : undefined);
+            },
+        },
+        cardContent: {
+            padding: spacing(4),
+        },
+    });
+});
 
-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 = core.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 PageSection = React.forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = __rest$1(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React__default['default'].createElement(Card__default['default'], __assign$1({ classes: { root: classes.root }, ref: ref }, restProps),
+        React__default['default'].createElement(CardContent__default['default'], { classes: { root: classes.cardContent } }, children)));
+});
+PageSection.displayName = 'PageSection';
+
+core.makeStyles(function () { return ({
+    gutterBottom: {
+        marginBottom: '1em',
     },
 }); });
 
-var TableHeaderCell = function (props) {
-    var children = props.children, column = props.column; props.tableProps; var restProps = __rest$1(props, ["children", "column", "tableProps"]);
-    var root = useTableHeaderCellStyles(props).root;
-    var _a = core.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['default'].createElement("th", __assign$1({ className: root }, restProps),
-        React__default['default'].createElement(core.Box, { display: "flex", alignItems: "center", gridGap: spacing(1) },
-            children,
-            showSortIndicator && (React__default['default'].createElement(Icon, { icon: isSortedDesc ? SvgChevronDown : SvgChevronUp, color: isSorted ? palette.text.primary : palette.text.disabled, size: "large" })))));
-};
+var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
+    cardRoot: {
+        border: "1px solid " + theme.palette.grey[300],
+        alignSelf: 'stretch',
+        flexGrow: 1,
+        '&:hover': {
+            backgroundColor: '#52B7FF1A',
+        },
+    },
+    cardContentRoot: {
+        padding: theme.spacing(4),
+        '&:last-child': {
+            paddingBottom: theme.spacing(4),
+        },
+    },
+}); });
 
-var TableHeaderRow = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return React__default['default'].createElement("tr", __assign$1({}, restProps), children);
-};
+var SettingsIndexCard = React.forwardRef(function (props, ref) {
+    var title = props.title, description = props.description, Icon$1 = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = __rest$1(props, ["title", "description", "Icon", "onClick", "statusLabel"]);
+    var classes = useSettingsIndexCardStyles(props);
+    var showStatusLabel = (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text) && (statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color);
+    return (React__default['default'].createElement(core.ButtonBase, __assign$1({ onClick: onClick, ref: ref }, restProps),
+        React__default['default'].createElement(Card__default['default'], { classes: { root: classes.cardRoot } },
+            React__default['default'].createElement(CardContent__default['default'], { classes: { root: classes.cardContentRoot } },
+                React__default['default'].createElement(core.Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
+                    React__default['default'].createElement(Icon, { icon: Icon$1 || SvgHelp, size: "inherit" }),
+                    showStatusLabel && (React__default['default'].createElement(Typography, { weight: "semi-bold", variant: "body2", color: statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.color }, statusLabel === null || statusLabel === void 0 ? void 0 : statusLabel.text))),
+                React__default['default'].createElement(Typography, { align: "left", variant: "h6", gutterBottom: true }, title),
+                description && (React__default['default'].createElement(Typography, { align: "left", variant: "body2", color: "grey.700" }, description))))));
+});
+SettingsIndexCard.displayName = 'SettingsIndexCard';
 
-var useTableRowStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        '&:nth-child(even)': {
-            backgroundColor: theme.palette.grey[100],
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+classnames.exports;
+
+core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
         },
-    }); },
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
+        },
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
+        },
+    },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
 }); });
 
-var TableRow = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    var root = useTableRowStyles(props).root;
-    return (React__default['default'].createElement("tr", __assign$1({ className: root }, restProps), children));
+core.makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+}); });
+
+var fonts = ['"Poppins"', '"sans-serif"'];
+var adminThemeTypography = {
+    htmlFontSize: 16,
+    fontFamily: fonts.join(', '),
+    h1: {
+        fontWeight: 400,
+        fontSize: '6rem',
+        lineHeight: '9rem',
+    },
+    h2: {
+        fontWeight: 400,
+        fontSize: '3.75rem',
+        lineHeight: '5.625rem',
+    },
+    h3: {
+        fontWeight: 400,
+        fontSize: '3rem',
+        lineHeight: '4.5rem',
+    },
+    h4: {
+        fontWeight: 400,
+        fontSize: '2.125rem',
+        lineHeight: '3.25rem',
+    },
+    h5: {
+        fontWeight: 500,
+        fontSize: '1.5rem',
+        lineHeight: '2.25rem',
+    },
+    h6: {
+        fontWeight: 500,
+        fontSize: '1.25rem',
+        lineHeight: '1.875rem',
+    },
+    h7: {
+        fontWeight: 400,
+        fontSize: '1.125rem',
+        lineHeight: '1.75rem',
+    },
+    body1: {
+        fontWeight: 400,
+        fontSize: '1rem',
+        lineHeight: '1.5rem',
+    },
+    body2: {
+        fontWeight: 400,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+    },
+    subtitle1: {
+        fontWeight: 400,
+        fontSize: '0.75rem',
+        lineHeight: '1.125rem',
+        color: '#9E9E9E',
+    },
+    button: {
+        fontWeight: 500,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
+        textTransform: 'capitalize',
+    },
 };
 
-var TableBody = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return React__default['default'].createElement("tbody", __assign$1({}, restProps), children);
+var adminThemeBreakpoints = {
+    values: {
+        xs: 0,
+        sm: 768,
+        md: 992,
+        lg: 1200,
+        xl: 1900,
+    },
 };
 
-var tableConstants = {
-    tableTypography: 'body1',
-    cellPaddingFactor: 2,
-    headerBorder: 2,
+var basePalette = {
+    /** Semantic Colors */
+    primary: {
+        light: '#DA777E',
+        main: '#F04649',
+        dark: '#B3212B',
+        contrastText: '#FFFFFF',
+        gradientStart: '#ED4A67',
+        gradientEnd: '#F04649',
+    },
+    info: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    success: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+        contrastText: '#FFFFFF',
+    },
+    error: {
+        light: '#DA777E',
+        main: '#E52021',
+        dark: '#A80005',
+    },
+    warning: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+    /** Colors */
+    blue: {
+        light: '#52B7FF',
+        main: '#0076CB',
+        dark: '#164B54',
+    },
+    green: {
+        light: '#48D3AB',
+        main: '#00B485',
+        dark: '#00663E',
+    },
+    purple: {
+        light: '#7B7FA3',
+        main: '#2E3042',
+        dark: '#1A1D20',
+    },
+    red: {
+        light: '#DA777E',
+        main: '#F04649',
+        dark: '#B3212B',
+    },
+    yellow: {
+        light: '#F0DFBA',
+        main: '#F5C364',
+        dark: '#E57E45',
+    },
+    gray: {
+        light: '#E9E9E9',
+        main: '#D9D9D9',
+        dark: '#9D9D9D',
+    },
+    white: {
+        main: '#FFFFFF',
+    },
+};
+var adminLightPalette = {
+    type: 'light',
+    /** Semantic Colors */
+    secondary: {
+        light: '#7B7FA3',
+        main: '#2E3042',
+        dark: '#1A1D20',
+    },
+    surface: {
+        light: '#FEFEFE',
+        main: '#ECF0F1',
+        dark: '#2E3042',
+    },
+};
+var adminDarkPalette = {
+    type: 'dark',
+    /** Semantic Colors */
+    secondary: {
+        main: '#FFFFFF',
+    },
+    surface: {
+        light: '#141414',
+        main: '#222222',
+        dark: '#333333',
+    },
+};
+var dataVizPalette = {
+    data: {
+        blue: {
+            main: '#6B82FE',
+        },
+        peach: {
+            main: '#FF7061',
+        },
+    },
 };
 
-var useTableCellStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        padding: theme.spacing(tableConstants.cellPaddingFactor),
-    }); },
-}); });
+/**
+ * These theme properties should be considered legacy. Make efforts to avoid new usage as well as refactor out existing
+ * usage.
+ */
+var adminLightPlaceholder = { placeholder: 'rgba(0, 0, 0, 1)' };
+var adminDarkPlaceholder = { placeholder: 'rgba(255, 255, 255, 0.37)' };
+var adminThemeStatus = {
+    status: {
+        disabled: {
+            opacity: 0.55,
+        },
+    },
+};
+var BASE_Z_INDEX = 1100000;
+var adminThemeZIndex = {
+    zIndex: {
+        mobileStepper: BASE_Z_INDEX + 1000,
+        appBar: BASE_Z_INDEX + 1100,
+        drawer: BASE_Z_INDEX + 1200,
+        modal: BASE_Z_INDEX + 1300,
+        snackbar: BASE_Z_INDEX + 1400,
+        tooltip: BASE_Z_INDEX + 9100,
+    },
+};
+/** The defaults for MuiInputBase and MuiInputLabel can be removed once the BasicForm & 'shared' inputs have either:
+ * 1. been refactored to use secondary color.
+ * 2. been replaced with new common components.
+ */
+var adminThemeDefaultProps = {
+    props: {
+        MuiCard: {
+            elevation: 0,
+        },
+        MuiTooltip: {
+            title: '',
+            placement: 'right',
+        },
+        MuiPaper: {
+            elevation: 0,
+        },
+        MuiAppBar: {
+            position: 'static',
+        },
+        MuiInputBase: {
+            color: 'secondary',
+        },
+        MuiInputLabel: {
+            color: 'secondary',
+        },
+    },
+};
 
-var TableCell = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    var root = useTableCellStyles(props).root;
-    return (React__default['default'].createElement("td", __assign$1({ className: root }, restProps), children));
+var adminLightOptions = __assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Light', palette: __assign$1(__assign$1(__assign$1({}, basePalette), adminLightPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+createTheme__default['default'](adminLightOptions);
+
+var adminDarkOptions = __assign$1(__assign$1(__assign$1(__assign$1({ themeName: 'Admin Dark', palette: __assign$1(__assign$1(__assign$1({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+createTheme__default['default'](adminDarkOptions);
+
+var useStyles$2 = core.makeStyles({
+    root: {
+        justifySelf: 'end',
+    },
+});
+
+var Trigger = function (props) {
+    var _a = props.label, label = _a === void 0 ? 'Filter' : _a, onClick = props.onClick;
+    var classes = useStyles$2();
+    return (React__default['default'].createElement(Button, { className: classes.root, onClick: onClick, startIcon: React__default['default'].createElement(Icon$1, { icon: SvgFilter }), textTransform: "none", variant: "ghost" }, label));
 };
 
-var filterProps = function (props) {
-    props.icon; props.action; var filteredProps = __rest$1(props, ["icon", "action"]);
-    return filteredProps;
-};
-var TableActionsCell = function (props) {
-    var _a = props.actions, primary = _a.primary, secondary = _a.secondary, intermediate = __rest$1(_a, ["primary", "secondary"]);
-    var tertiary = intermediate.tertiary, restActions = __rest$1(intermediate, ["tertiary"]);
-    var overflow = Object.keys(props.actions).length > 3;
-    var _b = React__default['default'].useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
-    var openMenu = function (event) {
+var FilterPanel = function () {
+    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var handleClick = function (event) {
         setAnchorEl(event.currentTarget);
     };
-    var closeMenu = function () {
+    var handleClose = function () {
         setAnchorEl(null);
     };
-    var handleItemClick = function (action) {
-        action(props.cell);
-        closeMenu();
-    };
-    return (React__default['default'].createElement(core.Box, { display: "flex" },
-        primary && primary.icon && (React__default['default'].createElement(Tooltip, { title: primary.label },
-            React__default['default'].createElement(IconButton, __assign$1({ size: "small", onClick: function () { return primary.action(props.cell); } }, filterProps(primary)),
-                React__default['default'].createElement(Icon, { icon: primary.icon })))),
-        secondary && secondary.icon && (React__default['default'].createElement(Tooltip, { title: secondary.label },
-            React__default['default'].createElement(IconButton, __assign$1({ size: "small", onClick: function () { return secondary.action(props.cell); } }, filterProps(secondary)),
-                React__default['default'].createElement(Icon, { icon: secondary.icon })))),
-        !overflow && tertiary && tertiary.icon && (React__default['default'].createElement(Tooltip, { title: tertiary.label },
-            React__default['default'].createElement(IconButton, __assign$1({ size: "small", onClick: function () { return tertiary.action(props.cell); } }, filterProps(tertiary)),
-                React__default['default'].createElement(Icon, { icon: tertiary.icon })))),
-        overflow && restActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(IconButton, { size: "small", onClick: openMenu },
-                React__default['default'].createElement(Icon, { icon: SvgMore })),
-            React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, Object.values(__assign$1({ tertiary: tertiary }, restActions))
-                .filter(function (value) { return value; })
-                .map(function (_a, i) {
-                var label = _a.label, action = _a.action, restProps = __rest$1(_a, ["label", "action"]);
-                return (React__default['default'].createElement(MenuItem__default['default'], __assign$1({ key: i, onClick: function () { return handleItemClick(action); } }, restProps), label));
-            }))))));
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Trigger, { onClick: handleClick }),
+        React__default['default'].createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
 
-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['default'].createElement(TableActionsCell, __assign$1({}, props, { actions: actions })); };
-        actionColumn = {
-            id: actionColumnId,
-            Header: function () { return null; },
-            Cell: CellComponent,
-        };
-        memoizedColumns = __spreadArray(__spreadArray([], columns), [actionColumn]);
-    }
-    return memoizedColumns;
-};
+var useStyles$1 = core.makeStyles({
+    root: {
+        justifySelf: 'start',
+        width: 300,
+    },
+});
 
 var GlobalFilter = function (props) {
-    var value = props.value, setValue = props.setValue, restProps = __rest$1(props, ["value", "setValue"]);
-    var onChange = restProps.onChange, InputProps = restProps.InputProps, cleanRestProps = __rest$1(restProps, ["onChange", "InputProps"]);
+    var value = props.value, setValue = props.setValue, restProps = __rest$3(props, ["value", "setValue"]);
+    var classes = useStyles$1();
     var handleChange = function (e) {
         setValue(e.target.value);
-        if (onChange) {
-            onChange(e);
-        }
     };
-    return (React__default['default'].createElement(core.TextField, __assign$1({ variant: "outlined", value: value, onChange: handleChange, InputProps: __assign$1({ startAdornment: (React__default['default'].createElement(core.InputAdornment, { position: "start" },
-                React__default['default'].createElement(Icon, { icon: SvgSearch }))) }, InputProps) }, cleanRestProps)));
+    return (React__default['default'].createElement(core.TextField, __assign$3({ className: classes.root, variant: "outlined", value: value, onChange: handleChange, InputProps: {
+            startAdornment: (React__default['default'].createElement(core.InputAdornment, { position: "start" },
+                React__default['default'].createElement(Icon$1, { icon: SvgSearch }))),
+        } }, restProps)));
 };
 
-var useTableStyles = core.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$1(__assign$1({ borderCollapse: 'collapse' }, (fullWidth && { width: '100%' })), typography[tableConstants.tableTypography]));
+var TableHeaderRow = function (props) {
+    var children = props.children, restProps = __rest$3(props, ["children"]);
+    return (React__default['default'].createElement("tr", __assign$3({ "data-table-element": 'header-row' }, restProps), children));
+};
+
+// const getWidth = (props: TableHeaderCellProps) => {
+//   const {
+//     column: { isActionColumn },
+//     tableProps: { fullWidth },
+//   } = props
+//   let 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 useStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 2,
+        borderBottomColor: theme.palette.grey[100],
+        padding: theme.spacing(2),
+        textAlign: 'left',
+        fontWeight: 500,
+    },
+    box: {
+        cursor: function (_a) {
+            var sortable = _a.sortable;
+            return (sortable ? 'pointer' : 'default');
         },
-        tableWrap: function () { return ({
-            maxWidth: '100%',
-            overflowX: 'auto',
-            overflowY: 'hidden',
-        }); },
-    });
-});
+    },
+}); });
+
+var TableHeaderCell = function (props) {
+    var children = props.children, context = props.context, restProps = __rest$3(props, ["children", "context"]);
+    var sortable = context.header.column.getCanSort();
+    var sorted = context.header.column.getIsSorted();
+    var handleSort = context.header.column.getToggleSortingHandler();
+    var classes = useStyles(__assign$3(__assign$3({}, props), { sortable: sortable }));
+    var _a = core.useTheme(), spacing = _a.spacing, palette = _a.palette;
+    var sortIndicators = {
+        asc: SvgChevronUp,
+        desc: SvgChevronDown,
+    };
+    return (React__default['default'].createElement("th", __assign$3({ className: classes.root }, restProps),
+        React__default['default'].createElement(core.Box, { className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort },
+            children,
+            sortable && !sorted && React__default['default'].createElement(Icon$1, { icon: SvgSort, color: palette.grey[500] }),
+            sortable && sorted && React__default['default'].createElement(Icon$1, { icon: sortIndicators[sorted] }))));
+};
+
+var ColumnFilterChip = function (props) {
+    var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
+    return (React__default['default'].createElement(Chip, { onDelete: function () { return onClick(columnFilter); }, label: React__default['default'].createElement(core.Box, { display: "flex", gridGap: 4 },
+            React__default['default'].createElement(Typography$1, null,
+                label[0],
+                ":"),
+            React__default['default'].createElement(Typography$1, __assign$3({ weight: "semi-bold" }, { component: 'span' }), label[1])) }));
+};
+
+var ColumnFilterResetButton = function (props) {
+    var _a = props.children, children = _a === void 0 ? 'Clear All' : _a, restProps = __rest$3(props, ["children"]);
+    return (React__default['default'].createElement(Button, __assign$3({ variant: "text", textTransform: "none" }, restProps), children));
+};
 
-/* eslint-disable react/jsx-key */
+var defaultTableProps = {
+    fullWidth: true,
+    sortable: false,
+    searchable: false,
+};
 var Table = function (props) {
-    // Setup
-    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, fullHeight = props.fullHeight, GlobalFilterProps = props.GlobalFilterProps, _a = props.paginationOptions, paginationOptions = _a === void 0 ? {} : _a, _b = props.tableOptions, tableOptions = _b === void 0 ? {} : _b, searchable = props.searchable, onPaginate = props.onPaginate;
-    var theme = core.useTheme();
-    var classes = useTableStyles(props);
-    var columns = React.useMemo(function () { return makeColumns({ columns: rawColumns, actions: actions, actionColumnId: actionColumnId }); }, [rawColumns, actions]);
-    var initialPaginationState = paginationOptions.initialState, restPaginationOptions = __rest$1(paginationOptions, ["initialState"]);
-    var initialState = __assign$1({}, initialPaginationState);
-    var instance = useTable_js.useTable(__assign$1(__assign$1({ columns: columns, data: data, disableSortBy: !sortable, initialState: initialState }, restPaginationOptions), tableOptions), useGlobalFilter_js.useGlobalFilter, useSortBy_js.useSortBy, usePagination_js.usePagination);
-    var getTableProps = instance.getTableProps, getTableBodyProps = instance.getTableBodyProps, headerGroups = instance.headerGroups, page = instance.page, prepareRow = instance.prepareRow, pageCount = instance.pageCount, gotoPage = instance.gotoPage, rows = instance.rows, state = instance.state, setGlobalFilter = instance.setGlobalFilter;
-    // Aliases
-    var isPaginated = pageCount > 1;
-    var isEmpty = rows.length === 0;
-    var lineHeightRem = parseFloat(theme.typography[tableConstants.tableTypography].lineHeight);
-    var documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    var typographyHeight = lineHeightRem * documentFontSize;
-    var cellHeight = typographyHeight + theme.spacing(tableConstants.cellPaddingFactor * 2);
-    var headerHeight = cellHeight + tableConstants.headerBorder;
-    var bodyHeight = instance.state.pageSize * cellHeight;
-    var footerHeight = 88;
-    var minHeight = headerHeight + bodyHeight + footerHeight;
-    // Handlers
+    var data = props.data, columns = props.columns, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalVisibilityState = props.visibilityState, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty;
+    var classes = useStyles$6(props);
+    var rootRef = React.useRef(null);
+    // Prepare Empty State
+    var isEmpty = data.length === 0;
+    var isEmptyComponentValid = Empty && React.isValidElement(React.createElement(Empty));
+    // Prepare Sorting
+    var _a = React.useState([]), sorting = _a[0], setSorting = _a[1];
+    // Prepare Global Filtering
+    var _b = externalGlobalFilterState || [], globalFilter = _b[0], setGlobalFilter = _b[1];
+    var isControlledGlobalFilter = Boolean(externalGlobalFilterState);
+    var controlledGlobalFilterOptions = { onGlobalFilterChange: setGlobalFilter, manualFiltering: true };
+    // Prepare ColumnFiltering
+    var _c = externalFilterState || [], columnFilters = _c[0], setColumnFilters = _c[1];
+    var isControlledColumnFilters = Boolean(externalFilterState);
+    var controlledColumnFiltersOptions = { onColumnFiltersChange: setColumnFilters, manualFiltering: true };
+    // Prepare Pagination
+    var _d = externalPaginationState || [], pagination = _d[0], setPagination = _d[1];
+    var isControlledPagination = Boolean(externalPaginationState && pageCount);
+    var controlledPaginationOptions = { manualPagination: true, onPaginationChange: setPagination, pageCount: pageCount };
+    // Prepare Column Visibility
+    var columnVisibility = (externalVisibilityState || [])[0];
+    var isControlledColumnVisibility = Boolean(externalVisibilityState);
+    // Init table instance
+    var table = reactTable.useReactTable(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3({ sorting: sorting }, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), enableSorting: sortable, globalFilterFn: coercedValueIncludesString, onSortingChange: setSorting, getCoreRowModel: reactTable.getCoreRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel(), getPaginationRowModel: reactTable.getPaginationRowModel() }, (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)));
+    var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
     var handlePagination = function (_e, pageNumber) {
         var pageIndex = pageNumber - 1;
-        if (onPaginate) {
-            onPaginate(pageIndex, instance);
-        }
-        else {
-            gotoPage(pageIndex);
-        }
+        table.setPageIndex(pageIndex);
     };
-    return (React__default['default'].createElement(core.Box, { className: classes.root, minHeight: fullHeight ? minHeight : 'unset' },
-        searchable && (React__default['default'].createElement(core.Box, null,
-            React__default['default'].createElement(GlobalFilter, __assign$1({ value: state.globalFilter, setValue: setGlobalFilter }, GlobalFilterProps)))),
-        React__default['default'].createElement(core.Box, { className: classes.tableWrap },
-            React__default['default'].createElement("table", __assign$1({ className: classes.table }, getTableProps()),
-                React__default['default'].createElement(TableHeader, null, headerGroups.map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, __assign$1({}, headerGroup.getHeaderGroupProps()), headerGroup.headers.map(function (column) { return (React__default['default'].createElement(TableHeaderCell, __assign$1({}, column.getHeaderProps(column.getSortByToggleProps()), { column: __assign$1(__assign$1({}, column), { isActionColumn: column.id === actionColumnId }), tableProps: props }), column.render('Header'))); }))); })),
-                !isEmpty && !isLoading && (React__default['default'].createElement(TableBody, __assign$1({}, getTableBodyProps()), page.map(function (row) {
-                    prepareRow(row);
-                    return (React__default['default'].createElement(TableRow, __assign$1({}, row.getRowProps()), row.cells.map(function (cell) { return (React__default['default'].createElement(TableCell, __assign$1({}, cell.getCellProps()), cell.render('Cell'))); })));
-                }))))),
-        isEmpty && !isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            EmptyImage && EmptyImage(),
-            React__default['default'].createElement(Typography, null, emptyMessage))),
-        isLoading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
-            React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
-        isPaginated && (React__default['default'].createElement(TableFooter, null,
-            React__default['default'].createElement(lab.Pagination, { count: pageCount, page: instance.state.pageIndex + 1, onChange: handlePagination })))));
+    return (React__default['default'].createElement(TableContext.Provider, { value: table },
+        React__default['default'].createElement(core.Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root", minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize) }),
+            React__default['default'].createElement(core.Box, null,
+                React__default['default'].createElement(core.Box, { display: "grid", gridAutoFlow: "column", marginBottom: 3 },
+                    (searchable || isControlledGlobalFilter) && (React__default['default'].createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
+                    hasColumnFilters && React__default['default'].createElement(FilterPanel, null)),
+                React__default['default'].createElement(core.Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
+                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React__default['default'].createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: deselectColumnFilter })); }),
+                    selectedColumnFilters.length >= 1 && React__default['default'].createElement(ColumnFilterResetButton, { onClick: function () { return resetColumnFilters(); } }))),
+            React__default['default'].createElement(core.Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
+                React__default['default'].createElement("table", { className: classes.table },
+                    React__default['default'].createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React__default['default'].createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React__default['default'].createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))); }))); })),
+                    !loading && (React__default['default'].createElement(TableBody, null, table.getRowModel().rows.map(function (row) { return (React__default['default'].createElement(TableRow, { key: row.id }, row.getVisibleCells().map(function (cell) { return (React__default['default'].createElement(TableCell, { key: cell.id }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))))),
+            isEmpty && isEmptyComponentValid && Empty && !loading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 }, React.createElement(Empty))),
+            loading && (React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
+                React__default['default'].createElement(CircularProgress__default['default'], { size: 80, color: "inherit" }))),
+            table.getPageCount() > 1 && (React__default['default'].createElement(TableFooter, null,
+                React__default['default'].createElement(lab.Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
 };
-Table.defaultProps = {
-    emptyMessage: 'No results.',
+Table.defaultProps = defaultTableProps;
+
+var validateAction = function (action) {
+    var icon = action.icon, label = action.label, onClick = action.onClick;
+    var onClickIsValid = typeof onClick === 'function';
+    var labelIsValid = typeof label === 'string';
+    var iconIsValid = icon && React.isValidElement(React.createElement(icon));
+    return onClickIsValid && labelIsValid && iconIsValid;
 };
 
-/**
- * Makes props for the Table component that will enable manual pagination and also provides page state.
- */
-var useManualPagination = function (config) {
-    var _a = config.initialPageIndex, initialPageIndex = _a === void 0 ? 0 : _a, _b = config.initialPageSize, initialPageSize = _b === void 0 ? 10 : _b, total = config.total, onPaginate = config.onPaginate;
-    var _c = React.useState(0), pageIndex = _c[0], setPageIndex = _c[1];
-    var _d = React.useState(initialPageSize), pageSize = _d[0], setPageSize = _d[1];
-    var handlePagination = function (index, instance) {
-        if (onPaginate) {
-            onPaginate({ index: index, instance: instance }, setPageIndex);
-        }
-        else {
-            setPageIndex(index);
-        }
-    };
-    var manualPaginationProps = {
-        onPaginate: handlePagination,
-        tableOptions: {
-            useControlledState: function (state) {
-                return React.useMemo(function () { return (__assign$1(__assign$1({}, state), { pageIndex: pageIndex, pageSize: pageSize })); }, [pageIndex, pageSize]);
-            },
-        },
-        paginationOptions: {
-            initialState: { pageIndex: initialPageIndex, pageSize: pageSize },
-            manualPagination: true,
-            pageCount: Math.ceil(total / pageSize),
-        },
-    };
-    var pageState = {
-        pageIndex: pageIndex,
-        pageSize: pageSize,
-        setPageIndex: setPageIndex,
-        setPageSize: setPageSize,
+var RowActions = function (props) {
+    var context = props.context, actions = props.actions;
+    var validActions = actions.filter(validateAction);
+    var _a = React__default['default'].useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var openMenu = function (event) {
+        setAnchorEl(event.currentTarget);
     };
-    return {
-        manualPaginationProps: manualPaginationProps,
-        pageState: pageState,
+    var closeMenu = function () {
+        setAnchorEl(null);
     };
+    var actionsCount = validActions.length;
+    var mainActions;
+    var overflowActions;
+    if (actionsCount <= 3) {
+        mainActions = validActions;
+    }
+    else {
+        var firstAction = validActions[0], secondAction = validActions[1], restActions = validActions.slice(2);
+        mainActions = [firstAction, secondAction];
+        overflowActions = restActions;
+    }
+    return (React__default['default'].createElement(core.Box, { display: "flex" },
+        mainActions.map(function (action) { return (React__default['default'].createElement(Tooltip$1, { title: action.label, key: action.label },
+            React__default['default'].createElement(IconButton$1, { size: "small", onClick: function () { return action.onClick(context); } },
+                React__default['default'].createElement(Icon$1, { icon: action.icon })))); }),
+        overflowActions && (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(IconButton$1, { size: "small", onClick: openMenu },
+                React__default['default'].createElement(Icon$1, { icon: SvgMore })),
+            React__default['default'].createElement(Menu__default['default'], { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, overflowActions.map(function (action) { return (React__default['default'].createElement(MenuItem__default['default'], { key: action.label, onClick: function () { return action.onClick(context); } }, action.label)); }))))));
 };
 
+exports.GlobalFilter = GlobalFilter;
+exports.RowActions = RowActions;
 exports.Table = Table;
-exports.useManualPagination = useManualPagination;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
+exports.TableHeader = TableHeader;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableHeaderRow = TableHeaderRow;
+exports.TableRow = TableRow;
 //# sourceMappingURL=index.js.map