@popmenu/table 0.126.0 → 0.126.1

package/build/index.js

@@ -1,3597 +1,578 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var tslib = require('tslib');
 var React = require('react');
 var core = require('@material-ui/core');
 var lab = require('@material-ui/lab');
+var commonUi = require('@popmenu/common-ui');
 var reactTable = require('@tanstack/react-table');
-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');
-var CommonButtonGroup = require('@material-ui/core/ButtonGroup');
-var Card = require('@material-ui/core/Card');
-require('@material-ui/core/CardActionArea');
-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');
-var MuiChip = require('@material-ui/core/Chip');
-require('@material-ui/core/Collapse');
-var Dialog = require('@material-ui/core/Dialog');
-require('@material-ui/core/DialogActions');
-require('@material-ui/core/DialogContent');
-require('@material-ui/core/DialogTitle');
-require('@material-ui/core/Drawer');
-require('@material-ui/core/FormControl');
-require('@material-ui/core/Grid');
-var MuiIconButton = require('@material-ui/core/IconButton');
-require('@material-ui/core/InputAdornment');
-require('@material-ui/core/LinearProgress');
-require('@material-ui/core/List');
-require('@material-ui/core/ListItem');
-require('@material-ui/core/ListItemAvatar');
-require('@material-ui/core/ListItemIcon');
-require('@material-ui/core/ListItemSecondaryAction');
-require('@material-ui/core/ListItemText');
-var Menu = require('@material-ui/core/Menu');
-var MenuItem = require('@material-ui/core/MenuItem');
-require('@material-ui/core/MenuList');
-var MuiRadio = require('@material-ui/core/Radio');
-require('@material-ui/core/TextField');
-var MuiSwitch = require('@material-ui/core/Switch');
-require('@material-ui/core/Tab');
-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 }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
-                });
-            }
-        });
-    }
-    n['default'] = e;
-    return Object.freeze(n);
-}
-
-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);
-var MuiRadio__default = /*#__PURE__*/_interopDefaultLegacy(MuiRadio);
-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.
-
-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$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$3.apply(this, arguments);
-};
-
-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];
-    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;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || from);
-}
-
-/*! *****************************************************************************
-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$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$2.apply(this, arguments);
-};
-
-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];
-    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 _g$2C$1;
-
-function _extends$4K$1() { _extends$4K$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$4K$1.apply(this, arguments); }
-
-function SvgCheckCircle$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4K$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2C$1 || (_g$2C$1 = /*#__PURE__*/React__namespace.createElement("g", {
-    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"
-  }))));
-}
-
-var _g$2z, _defs$1D;
-
-function _extends$4G() { _extends$4G = 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$4G.apply(this, arguments); }
-
-function SvgXCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4G({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2z || (_g$2z = /*#__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$1D || (_defs$1D = /*#__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$2m$1, _defs$1t$1;
-
-function _extends$4m$1() { _extends$4m$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$4m$1.apply(this, arguments); }
-
-function SvgInfo$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4m$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2m$1 || (_g$2m$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$1t$1 || (_defs$1t$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$1D$1;
-
-function _extends$3H$1() { _extends$3H$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$3H$1.apply(this, arguments); }
-
-function SvgUser$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3H$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1D$1 || (_path$1D$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 _g$20$1, _defs$1f$1;
-
-function _extends$3w$1() { _extends$3w$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$3w$1.apply(this, arguments); }
-
-function SvgError$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3w$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$20$1 || (_g$20$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$1f$1 || (_defs$1f$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$1u$1;
-
-function _extends$3v$1() { _extends$3v$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$3v$1.apply(this, arguments); }
-
-function SvgWarning$1(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3v$1({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1u$1 || (_path$1u$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;
-        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;
-                // @ts-expect-error - todo.
-                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$2 = {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$2));
-
-var classNames = classnames$2.exports;
-
-var iconStaticClassName$1 = 'pop-icon';
-var Icon$1 = function (props) {
-    var icon = props.icon, className = props.className, restProps = __rest$2(props, ["icon", "className"]);
-    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
-    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
-        restProps['aria-hidden'] = true;
-    }
-    var classes = useIconStyles$1(props);
-    var isValid = true;
-    if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
-        isValid = false;
-    }
-    return isValid
-        ? React.createElement(icon, __assign$2({ className: classNames([classes.root, iconStaticClassName$1, className]) }, restProps))
-        : null;
-};
-Icon$1.defaultProps = {
-    size: 'inherit',
-    color: 'inherit',
-};
-Icon$1.displayName = 'Icon';
-
-var LoadingStatus$1;
-(function (LoadingStatus) {
-    LoadingStatus["ERROR"] = "ERROR";
-    LoadingStatus["LOADED"] = "LOADED";
-    LoadingStatus["PENDING"] = "PENDING";
-})(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$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$1 = 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$1 = 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$1 = styles.makeStyles(function (theme) { return ({
-    root: function (props) { return ({
-        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$1(theme, props),
-        strokeWidth: 1,
-    }); },
-}); });
-
-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';
-    var Fallback;
-    if (displayAltTextFallback) {
-        Fallback = null;
-    }
-    else if (displayNoFallback) {
-        Fallback = ' ';
-    }
-    else if (displayCustomFallback) {
-        Fallback = fallback;
-    }
-    else {
-        Fallback = React__default['default'].createElement(Icon$1, { icon: SvgUser$1, className: classes.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$1.defaultProps = {
-    size: 'medium',
-    fit: 'cover',
-    background: '#E0E0E0',
-};
-Avatar$1.displayName = 'Avatar';
-
-styles.makeStyles(function (theme) { return ({
-    circle: {
-        backgroundColor: theme.palette.grey[300],
-        borderRadius: '50%',
-        height: theme.spacing(0.65),
-        width: theme.spacing(0.65),
-        margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
-    },
-    container: {
-        border: "1px solid " + theme.palette.secondary.light,
-        borderRadius: theme.spacing(0.5),
-        flexGrow: 1,
-    },
-    titleBar: {
-        display: 'flex',
-        flexDirection: 'row',
-        borderBottom: "1px solid " + theme.palette.secondary.light,
-        width: '100%',
-    },
-}); });
-
-styles.makeStyles(function () { return ({
-    root: {
-        minWidth: 'unset',
-    },
-    label: {
-        textTransform: function (_a) {
-            var textTransform = _a.textTransform;
-            return textTransform;
-        },
-    },
-}); });
-
-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$1.displayName = 'Checkbox';
-
-var getBackground$2 = 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];
-        // @ts-expect-error - todo.
-        background = theme.palette[color][colorVariant];
-    }
-    return background;
-}; };
-var getColor$2 = 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$1 = 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;
-}; };
-// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
-// any component-specific props
-var useChipStyles = styles.makeStyles(function (theme) { return ({
-    root: {
-        background: getBackground$2(theme),
-        color: getColor$2(theme),
-        borderColor: getBorder$1(theme),
-        borderRadius: theme.spacing(0.5),
-    },
-    icon: {
-        color: 'inherit',
-        height: theme.spacing(2),
-        width: theme.spacing(2),
-    },
-    deleteIcon: {
-        color: theme.palette.grey[500],
-    },
-}); });
-
-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$1 = {
-    regular: 400,
-    medium: 500,
-    'semi-bold': 600,
-    bold: 700,
-};
-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)?/);
-    var isTextColor = color && ['textPrimary', 'textSecondary'].includes(color);
-    switch (true) {
-        case isCommonColor:
-            // @ts-expect-error - todo.
-            return theme.palette.common[color];
-        case Boolean(isGreyColor):
-            var scale = color.split('.')[1];
-            // @ts-expect-error - todo.
-            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;
-            // @ts-expect-error - todo.
-            return theme.palette[paletteKey][variant];
-        case isTextColor:
-            // @ts-expect-error - todo.
-            return theme.palette.text[color.slice(4).toLowerCase()];
-        default:
-            return undefined;
-    }
-};
-var useTypographyStyles$1 = styles.makeStyles(function (theme) {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName$1] = {
-                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$1[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$1(theme, color)) || theme.typography[variant].color;
-            },
-            _a),
-        caption: {
-            display: 'inline',
-        },
-        overline: {
-            display: 'inline',
-        },
-    });
-});
-
-var Typography$1 = function (props) {
-    props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest$2(props, ["weight", "color", "TypographyRef"]);
-    var classes = useTypographyStyles$1(__assign$2({}, props));
-    var variantMapping = { subtitle1: 'p' };
-    return React__default['default'].createElement(core.Typography, __assign$2({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
-};
-Typography$1.displayName = 'Typography';
-Typography$1.defaultProps = defaultTypographyProps$1;
-
-var getFadeStop$1 = function (_a, typographyVariant) {
-    var typography = _a.typography;
-    // @ts-expect-error - todo.
-    return !isNaN(Number(typography[typographyVariant].lineHeight))
-        ? // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight + "rem"
-        : // @ts-expect-error - todo.
-            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$1(theme, props.typographyVariant) + ")"; },
-    },
-}); });
-
-var SemanticColors$1;
-(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$1 || (SemanticColors$1 = {}));
-core.makeStyles(function (theme) { return ({
-    dividerRoot: {
-        gap: theme.spacing(2),
-    },
-    textRoot: {
-        color: function (props) {
-            var textColor = props.textColor;
-            if (Object.values(SemanticColors$1).includes(textColor)) {
-                var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
-                // @ts-expect-error - todo.
-                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$1).includes(dividerColor)) {
-                var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
-                // @ts-expect-error - todo.
-                return theme.palette[semanticColor][shade];
-            }
-            else if (dividerColor) {
-                return dividerColor;
-            }
-            else {
-                return theme.palette.grey[500];
-            }
-        },
-    },
-}); });
-
-var IconButton$1 = React.forwardRef(function (props, ref) {
-    return React__default['default'].createElement(MuiIconButton__default['default'], __assign$2({ ref: ref }, props));
-});
-IconButton$1.displayName = 'IconButton';
-IconButton$1.defaultProps = {
-    color: 'secondary',
-};
-
-var useLinkStyles$1 = styles.makeStyles(function (theme) { return ({
-    root: function (props) {
-        var _a;
-        return (__assign$2(__assign$2({ display: 'flex' }, (props.color === undefined && { color: theme.palette.info.main })), (_a = {}, _a["& ." + iconStaticClassName$1] = {
-            alignSelf: 'center',
-        }, _a)));
-    },
-}); });
-
-// eslint-disable-next-line react/display-name -- false positive
-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$1.defaultProps = {
-    variant: 'body1',
-};
-Link$1.displayName = 'Link';
-
-var useStyles$4$2 = core.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            '&:last-child': {
-                marginBottom: 0,
-            },
-            marginBottom: spacing(4),
-            padding: spacing(4),
-        },
-    });
-});
-var Paper$1 = React.forwardRef(function (props, ref) {
-    var legacyStyles = props.legacyStyles, restProps = __rest$2(props, ["legacyStyles"]);
-    var classes = useStyles$4$2(props);
-    return React__default['default'].createElement(core.Paper, __assign$2({}, ref, { classes: __assign$2({}, (legacyStyles && classes)) }, restProps));
-});
-Paper$1.displayName = 'Paper';
-Paper$1.defaultProps = {
-    legacyStyles: false,
-};
-
-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$1.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$1 = styles.makeStyles(function (theme) { return ({
-    checked: {
-        '& $thumb': {
-            background: theme.palette.success.main,
-        },
-        '&& + $track': {
-            backgroundColor: theme.palette.success.main,
-        },
-    },
-    thumb: {},
-    track: {},
-}); });
-
-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$1.displayName = 'Switch';
-
-var useToggleButtonStyles$1 = 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$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$1.defaultProps = {
-    color: 'primary',
-};
-ToggleButton$1.displayName = 'ToggleButton';
-
-var useToggleButtonGroupStyles$1 = styles.makeStyles(function (theme) { return ({
-    root: {
-        '&&': {
-            backgroundColor: theme.palette.grey[300],
-        },
-    },
-}); });
-
-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$2({ ref: ref, classes: { root: classes.root } }, muiProps), childrenWithProps));
-});
-ToggleButtonGroup$1.displayName = 'ToggleButtonGroup';
-
-var useTooltipStyles$1 = styles.makeStyles(function (_a) {
-    var typography = _a.typography;
-    return ({
-        tooltip: {
-            fontSize: typography.pxToRem(16),
-        },
-    });
-});
-
-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$1.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,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gridGap: 16,
-    },
-}); });
-
-var FollowerAuthenticationDialogContext$1 = React.createContext(null);
-FollowerAuthenticationDialogContext$1.Provider;
-
-core.makeStyles(function () { return ({
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    main: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-}); });
-
-var useTableRowStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        '&:nth-child(even)': {
-            backgroundColor: theme.palette.grey[100],
-        },
-    }); },
+var webIcons = require('@popmenu/web-icons');
+var adminUi = require('@popmenu/admin-ui');
+
+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 TableRow = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var root = useTableRowStyles(props).root;
+    return (React.createElement("tr", tslib.__assign({ "data-table-element": "body-row", className: root }, restProps), children));
 };
 
-var tableConstants = {
-    tableTypography: 'body1',
-    cellPaddingFactor: 2,
-    headerBorder: 2,
-};
+var tableConstants = {
+    tableTypography: 'body1',
+    cellPaddingFactor: 2};
 
-var coercedValueIncludesString = function (row, columnId, value) {
-    if (value === '')
-        return true;
-    var cellValue = row.getValue(columnId);
-    return String(cellValue).toLowerCase().includes(value.toLowerCase());
+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 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 bodyRowHeight = bodyRowNode.getBoundingClientRect().height;
-            minHeight = headerRowHeight + bodyRowHeight * pageSize + defaultFooterHeight;
-        }
-    }
-    return minHeight;
+var getTableMinHeight = function (rootRef, pageSize) {
+    var defaultBodyRowHeight = 56;
+    var defaultHeaderRowHeight = 57;
+    var defaultFooterHeight = 88;
+    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 bodyRowHeight = bodyRowNode.getBoundingClientRect().height;
+            minHeight = headerRowHeight + bodyRowHeight * pageSize + defaultFooterHeight;
+        }
+    }
+    return minHeight;
 };
 
-var useTableCellStyles = core.makeStyles(function (theme) { return ({
-    root: function () { return ({
-        padding: theme.spacing(tableConstants.cellPaddingFactor),
-    }); },
+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 TableCell = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var root = useTableCellStyles(props).root;
+    return (React.createElement("td", tslib.__assign({ 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 TableBody = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return React.createElement("tbody", tslib.__assign({}, 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 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 (tslib.__assign(tslib.__assign({ 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$3(props, ["children"]);
-    return React__default['default'].createElement("thead", __assign$3({}, restProps), children);
+var TableHeader = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return React.createElement("thead", tslib.__assign({}, 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 TableFooter = function (props) {
+    return (React.createElement(commonUi.Box, { display: "flex", justifyContent: "center", alignItems: "end", paddingTop: 3, paddingBottom: 4 }, props.children));
 };
 
-var useStyles$5 = core.makeStyles(function (theme) { return ({
-    buttonBox: {
-        '& > :last-child': {
-            marginLeft: theme.spacing(2),
-        },
-        display: 'flex',
-        justifyContent: 'flex-end',
-        padding: "0px " + theme.spacing(3) + "px " + theme.spacing(3) + "px " + theme.spacing(3) + "px",
-    },
-    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 useStyles$5 = core.makeStyles(function (theme) { return ({
+    buttonBox: {
+        '& > :last-child': {
+            marginLeft: theme.spacing(2),
+        },
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: "0px " + theme.spacing(3) + "px " + theme.spacing(3) + "px " + theme.spacing(3) + "px",
+    },
+    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$2p;
-
-function _extends$5q() { _extends$5q = 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$5q.apply(this, arguments); }
-
-function SvgChevronDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5q({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2p || (_path$2p = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M4 6l4 4 4-4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$2o;
-
-function _extends$5p() { _extends$5p = 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$5p.apply(this, arguments); }
-
-function SvgChevronUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5p({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2o || (_path$2o = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 10L8 6l-4 4",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$2f;
-
-function _extends$59() { _extends$59 = 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$59.apply(this, arguments); }
-
-function SvgSort(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$59({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$2f || (_path$2f = /*#__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$22;
-
-function _extends$4u() { _extends$4u = 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$4u.apply(this, arguments); }
-
-function SvgFilter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4u({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$22 || (_path$22 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M14.667 2H1.333l5.334 6.307v4.36L9.333 14V8.307L14.667 2z",
-    stroke: "currentColor"
-  })));
-}
-
-var _path$1P;
-
-function _extends$45() { _extends$45 = 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$45.apply(this, arguments); }
-
-function SvgMore(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$45({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1P || (_path$1P = /*#__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$1J;
-
-function _extends$3X() { _extends$3X = 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$3X.apply(this, arguments); }
-
-function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3X({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1J || (_path$1J = /*#__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$4 = core.makeStyles(function (theme) { return ({
-    icon: {
-        marginRight: theme.spacing(1.5),
-        marginTop: theme.spacing(0.5),
-        scale: 1.5,
-    },
-    selectContainer: {
-        padding: '8px 0',
-    },
-    selectRoot: {
-        '&:focus': {
-            backgroundColor: 'transparent',
-        },
-    },
-    hidden: {
-        display: 'none',
-    },
+var useStyles$4 = core.makeStyles(function (theme) { return ({
+    icon: {
+        marginRight: theme.spacing(1.5),
+        marginTop: theme.spacing(0.5),
+        scale: 1.5,
+    },
+    selectContainer: {
+        padding: '8px 0',
+    },
+    selectRoot: {
+        '&:focus': {
+            backgroundColor: 'transparent',
+        },
+    },
+    hidden: {
+        display: 'none',
+    },
 }); });
 
 var TableContext = React.createContext({});
 
-var FilterPanelContext = React.createContext(null);
-var useFilterPanelContext = function () {
-    var context = React.useContext(FilterPanelContext);
-    if (!context) {
-        throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>');
-    }
-    return context;
-};
-
-var SelectFilter = function (props) {
-    var _a, _b, _c;
-    var options = props.options, columnId = props.columnId, multiple = props.multiple;
-    var classes = useStyles$4();
-    var _d = React.useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
-    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
-    var _f = useFilterPanelContext().anchorState, setAnchorEl = _f[1];
-    var column = table.getColumn(columnId);
-    var meta = column.columnDef.meta;
-    var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
-    var value = '';
-    if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {
-        value = stagedColumnFilters.get(columnId);
-    }
-    else {
-        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: !stageFilterSelections });
-            }
-        }
-        if (typeof value === 'string' || typeof value === 'number') {
-            if (value === option.value) {
-                return __assign$3(__assign$3({}, option), { hide: !stageFilterSelections });
-            }
-        }
-        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 renderedValue = '';
-    if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {
-        if (typeof value === 'string' || typeof value === 'number') {
-            renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
-        }
-        else if (Array.isArray(value) && value.length > 0) {
-            renderedValue = value.length + " selected";
-        }
-        else {
-            renderedValue = filterName;
-        }
-    }
-    var handleChange = function (event) {
-        event.stopPropagation();
-        if (stageFilterSelections) {
-            stagedColumnFilters.update(columnId, event.target.value);
-        }
-        else {
-            column.setFilterValue(event.target.value);
-            setAnchorEl(null);
-        }
-    };
-    var handleItemClick = function () {
-        if (multiple) {
-            if (!stageFilterSelections && filteredOptionsCount === 1) {
-                setOpen(false);
-            }
-            else {
-                setOpen(false);
-            }
-        }
-    };
-    return (React__default['default'].createElement(core.Box, { className: classes.selectContainer },
-        React__default['default'].createElement(core.FormControl, { variant: "outlined", fullWidth: true },
-            React__default['default'].createElement(core.InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
-            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: stageFilterSelections ? undefined : function () { return React__default['default'].createElement(Typography$1, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: SvgChevronDown, onChange: handleChange, fullWidth: true, classes: {
-                    root: classes.selectRoot,
-                    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 ToggleFilter = function (props) {
-    var table = React.useContext(TableContext).table;
-    var columnId = props.columnId;
-    var column = table.getColumn(columnId);
-    var meta = column.columnDef.meta;
-    var filterName = meta.filter.name;
-    var value = column.getFilterValue();
-    var handleChange = function (event, checked) {
-        event.stopPropagation();
-        column.setFilterValue(checked);
-    };
-    return React__default['default'].createElement(core.FormControlLabel, { control: React__default['default'].createElement(core.Switch, { checked: value, onChange: handleChange }), label: filterName });
-};
-
-var FilterControl = function (props) {
-    var input = props.input, columnFilter = __rest$3(props, ["input"]);
-    var inputDictionary = {
-        text: core.TextField,
-        select: SelectFilter,
-        'multi-select': SelectFilter,
-        toggle: ToggleFilter,
-    };
-    var propsDictionary = {
-        select: { multiple: false },
-        'multi-select': { multiple: true },
-    };
-    // @ts-expect-error - todo.
-    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 useStagedColumnFilters = function (selectedColumnFilters) {
-    var _a = React.useState(function () {
-        return selectedColumnFilters.reduce(function (acc, _a) {
-            var id = _a.id, value = _a.value;
-            if (acc.has(id)) {
-                var existingValue = acc.get(id);
-                // If the existing value is a string, convert it to an array and add the new value
-                if (typeof existingValue === 'string') {
-                    acc.set(id, [existingValue, value]);
-                }
-                else {
-                    existingValue.push(value);
-                }
-            }
-            else {
-                acc.set(id, value);
-            }
-            return acc;
-        }, new Map());
-    }), columnInputValues = _a[0], setColumnInputValues = _a[1];
-    var filterState = {
-        update: function (columnId, value) {
-            return setColumnInputValues(columnInputValues.set(columnId, value));
-        },
-        get: function (columnId) { return columnInputValues.get(columnId); },
-        clear: function () {
-            columnInputValues.clear();
-            setColumnInputValues(columnInputValues);
-        },
-        delete: function (columnFilter) {
-            var values = columnInputValues.get(columnFilter.id);
-            if (values && Array.isArray(values)) {
-                var valueIndex = values.indexOf(columnFilter.value);
-                values.splice(valueIndex, 1);
-                if (values.length > 0) {
-                    columnInputValues.set(columnFilter.id, values);
-                }
-                else {
-                    columnInputValues.delete(columnFilter.id);
-                }
-            }
-            else {
-                columnInputValues.delete(columnFilter.id);
-            }
-            setColumnInputValues(columnInputValues);
-        },
-        exist: function () { return columnInputValues.size > 0; },
-    };
-    return filterState;
+var FilterPanelContext = React.createContext(null);
+var useFilterPanelContext = function () {
+    var context = React.useContext(FilterPanelContext);
+    if (!context) {
+        throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>');
+    }
+    return context;
 };
 
-/*! *****************************************************************************
-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$1D;
-
-function _extends$3H() { _extends$3H = 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$3H.apply(this, arguments); }
-
-function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1D || (_path$1D = /*#__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;
-                // @ts-expect-error - todo.
-                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 hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
-    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
-        restProps['aria-hidden'] = true;
-    }
-    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 SelectFilter = function (props) {
+    var _a, _b, _c;
+    var options = props.options, columnId = props.columnId, multiple = props.multiple;
+    var classes = useStyles$4();
+    var _d = React.useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
+    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useFilterPanelContext().anchorState, setAnchorEl = _f[1];
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
+    var value = '';
+    if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {
+        value = stagedColumnFilters.get(columnId);
+    }
+    else {
+        value = column.getFilterValue();
+    }
+    var fallbackValue = multiple ? [] : '';
+    var filteredOptions = options.map(function (option) {
+        if (Array.isArray(value)) {
+            if (value.includes(option.value)) {
+                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            if (value === option.value) {
+                return tslib.__assign(tslib.__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        return tslib.__assign(tslib.__assign({}, option), { hide: false });
+    });
+    var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
+    var renderedValue = '';
+    if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
+        }
+        else if (Array.isArray(value) && value.length > 0) {
+            renderedValue = value.length + " selected";
+        }
+        else {
+            renderedValue = filterName;
+        }
+    }
+    var handleChange = function (event) {
+        event.stopPropagation();
+        if (stageFilterSelections) {
+            stagedColumnFilters.update(columnId, event.target.value);
+        }
+        else {
+            column.setFilterValue(event.target.value);
+            setAnchorEl(null);
+        }
+    };
+    var handleItemClick = function () {
+        if (multiple) {
+            if (!stageFilterSelections && filteredOptionsCount === 1) {
+                setOpen(false);
+            }
+            else {
+                setOpen(false);
+            }
+        }
+    };
+    return (React.createElement(core.Box, { className: classes.selectContainer },
+        React.createElement(core.FormControl, { variant: "outlined", fullWidth: true },
+            React.createElement(core.InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
+            React.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: stageFilterSelections ? undefined : function () { return React.createElement(commonUi.Typography, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: webIcons.ChevronDown, onChange: handleChange, fullWidth: true, classes: {
+                    root: classes.selectRoot,
+                    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.createElement(commonUi.MenuItem, { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
+            })))));
 };
 
-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';
-
-styles.makeStyles(function (theme) { return ({
-    circle: {
-        backgroundColor: theme.palette.grey[300],
-        borderRadius: '50%',
-        height: theme.spacing(0.65),
-        width: theme.spacing(0.65),
-        margin: theme.spacing(1) + "px 0 " + theme.spacing(1) + "px " + theme.spacing(1) + "px",
-    },
-    container: {
-        border: "1px solid " + theme.palette.secondary.light,
-        borderRadius: theme.spacing(0.5),
-        flexGrow: 1,
-    },
-    titleBar: {
-        display: 'flex',
-        flexDirection: 'row',
-        borderBottom: "1px solid " + theme.palette.secondary.light,
-        width: '100%',
-    },
-}); });
-
-var useButtonStyles$1 = styles.makeStyles(function () { return ({
-    root: {
-        minWidth: 'unset',
-    },
-    label: {
-        textTransform: function (_a) {
-            var textTransform = _a.textTransform;
-            return textTransform;
-        },
-    },
-}); });
-
-var Button$1 = function (props) {
-    props.textTransform; var loading = props.loading, classesOverride = props.classes, className = props.className, ButtonRef = props.ButtonRef, muiProps = __rest(props, ["textTransform", "loading", "classes", "className", "ButtonRef"]);
-    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: ButtonRef, 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];
-        // @ts-expect-error - todo.
-        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;
-}; };
-// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
-// any component-specific props
-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 ToggleFilter = function (props) {
+    var table = React.useContext(TableContext).table;
+    var columnId = props.columnId;
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = meta.filter.name;
+    var value = column.getFilterValue();
+    var handleChange = function (event, checked) {
+        event.stopPropagation();
+        column.setFilterValue(checked);
+    };
+    return React.createElement(core.FormControlLabel, { control: React.createElement(core.Switch, { checked: value, onChange: handleChange }), label: filterName });
 };
 
-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:
-            // @ts-expect-error - todo.
-            return theme.palette.common[color];
-        case Boolean(isGreyColor):
-            var scale = color.split('.')[1];
-            // @ts-expect-error - todo.
-            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;
-            // @ts-expect-error - todo.
-            return theme.palette[paletteKey][variant];
-        case isTextColor:
-            // @ts-expect-error - todo.
-            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 = function (props) {
-    props.weight; props.color; var TypographyRef = props.TypographyRef, restProps = __rest(props, ["weight", "color", "TypographyRef"]);
-    var classes = useTypographyStyles(__assign({}, props));
-    var variantMapping = { subtitle1: 'p' };
-    return React__default['default'].createElement(core.Typography, __assign({ classes: classes, variantMapping: variantMapping, ref: TypographyRef }, restProps));
-};
-Typography.displayName = 'Typography';
-Typography.defaultProps = defaultTypographyProps;
-
-var getFadeStop = function (_a, typographyVariant) {
-    var typography = _a.typography;
-    // @ts-expect-error - todo.
-    return !isNaN(Number(typography[typographyVariant].lineHeight))
-        ? // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight + "rem"
-        : // @ts-expect-error - todo.
-            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];
-                // @ts-expect-error - todo.
-                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];
-                // @ts-expect-error - todo.
-                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 FilterControl = function (props) {
+    var input = props.input, columnFilter = tslib.__rest(props, ["input"]);
+    var inputDictionary = {
+        text: core.TextField,
+        select: SelectFilter,
+        'multi-select': SelectFilter,
+        toggle: ToggleFilter,
+    };
+    var propsDictionary = {
+        select: { multiple: false },
+        'multi-select': { multiple: true },
+    };
+    // @ts-expect-error - todo.
+    return React.createElement("div", null, React.createElement(inputDictionary[input], tslib.__assign(tslib.__assign({}, columnFilter), propsDictionary[input])));
 };
 
-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)));
-    },
-}); });
-
-// eslint-disable-next-line react/display-name -- false positive
-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$4$1 = 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$4$1(props);
-    return React__default['default'].createElement(core.Paper, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
-});
-Paper.displayName = 'Paper';
-Paper.defaultProps = {
-    legacyStyles: false,
+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,
+    };
 };
-
-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,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gridGap: 16,
-    },
-}); });
-
-var FollowerAuthenticationDialogContext = React.createContext(null);
-FollowerAuthenticationDialogContext.Provider;
-
-core.makeStyles(function () { return ({
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100%',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    main: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gridGap: 16,
-    },
-}); });
-
-core.makeStyles(function () { return ({
-    root: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-    },
-}); });
-
-var _g$2C;
-
-function _extends$4K() { _extends$4K = 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$4K.apply(this, arguments); }
-
-function SvgCheckCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4K({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2C || (_g$2C = /*#__PURE__*/React__namespace.createElement("g", {
-    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"
-  }))));
-}
-
-var _path$26;
-
-function _extends$4H() { _extends$4H = 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$4H.apply(this, arguments); }
-
-function SvgX(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4H({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$26 || (_path$26 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M12 4l-8 8m0-8l8 8",
-    stroke: "currentColor"
-  })));
-}
-
-var _g$2p, _defs$1u;
-
-function _extends$4p() { _extends$4p = 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$4p.apply(this, arguments); }
-
-function SvgHelp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4p({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2p || (_g$2p = /*#__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$1u || (_defs$1u = /*#__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"
-  })))));
+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 tslib.__spreadArray(tslib.__spreadArray([], acc), selections);
+    }, []);
+    return selectedColumnFilters;
 }
-
-var _g$2m, _defs$1t;
-
-function _extends$4m() { _extends$4m = 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$4m.apply(this, arguments); }
-
-function SvgInfo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4m({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$2m || (_g$2m = /*#__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$1t || (_defs$1t = /*#__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"
-  })))));
+function getColumnFilters(columns) {
+    return columns
+        .map(function (column) {
+        var meta = column.columnDef.meta;
+        if (meta === null || meta === void 0 ? void 0 : meta.filter) {
+            return tslib.__assign({ columnId: column.id }, meta.filter);
+        }
+    })
+        .filter(Boolean);
 }
-
-var _g$20, _defs$1f;
-
-function _extends$3w() { _extends$3w = 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$3w.apply(this, arguments); }
-
-function SvgError(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3w({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$20 || (_g$20 = /*#__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$1f || (_defs$1f = /*#__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"
-  })))));
+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;
+        });
+    };
 }
-
-var _path$1u;
-
-function _extends$3v() { _extends$3v = 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$3v.apply(this, arguments); }
-
-function SvgWarning(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3v({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _path$1u || (_path$1u = /*#__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"
-  })));
+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 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 getLinkProps = function (link) {
-    if (!link)
-        return null;
-    var href = link.href, onClick = link.onClick, text = link.text;
-    if (!text)
-        return null;
-    var props = { children: text };
-    if (href)
-        return __assign$1(__assign$1({}, props), { href: href });
-    if (onClick)
-        return __assign$1(__assign$1({}, props), { onClick: onClick });
-    return null;
-};
-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 && getLinkProps(link);
-    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, 
-        // @ts-expect-error - todo.
-        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)) {
-        // @ts-expect-error - todo.
-        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)) {
-        // @ts-expect-error - todo.
-        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)) {
-        // @ts-expect-error - todo.
-        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;
-};
-
-// eslint-disable-next-line react/display-name -- false positive
-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 _a = props.cancelButtonText, cancelButtonText = _a === void 0 ? 'cancel' : _a, _b = props.hideCancelButton, hideCancelButton = _b === void 0 ? false : _b, children = props.children, labelId = props.labelId, descriptionId = props.descriptionId, _c = props.severity, severity = _c === void 0 ? 'info' : _c, _d = props.proceedButtonText, proceedButtonText = _d === void 0 ? 'proceed' : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, onClose = props.onClose, onCancel = props.onCancel, onProceed = props.onProceed, DialogProps = __rest$1(props, ["cancelButtonText", "hideCancelButton", "children", "labelId", "descriptionId", "severity", "proceedButtonText", "disabled", "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, disabled: disabled },
-                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 } },
-                !hideCancelButton && (React__default['default'].createElement(Button, { onClick: onCancel, disabled: disabled, variant: "ghost" }, cancelButtonText)),
-                React__default['default'].createElement(Button, { onClick: onProceed, loading: disabled, variant: severity }, proceedButtonText)))));
-});
-AlertDialog.displayName = 'AlertDialog';
-
-var getBorderColor = function (palette, variant) {
-    var borderColor = 'inherit';
-    if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(variant)) {
-        // @ts-expect-error - todo.
-        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 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 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),
-        },
-    },
-}); });
-
-// eslint-disable-next-line react/display-name -- false positive
-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 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,
-    },
-}); });
-
-core.makeStyles(function (theme) { return ({
-    chipRoot: {
-        marginRight: theme.spacing(4),
-        cursor: 'pointer',
-    },
-    body: {
-        paddingTop: '4px',
-    },
-    listItemText: {
-        marginRight: '32px',
-    },
-}); });
-
-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 adminThemeBreakpoints = {
-    values: {
-        xs: 0,
-        sm: 768,
-        md: 992,
-        lg: 1200,
-        xl: 1900,
-    },
-};
-
-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',
-        darker: '#002E6C',
-    },
-    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: {
-        light: '#7B7FA3',
-        main: '#FFFFFF',
-    },
-    surface: {
-        light: '#141414',
-        main: '#222222',
-        dark: '#333333',
-    },
-};
-var dataVizPalette = {
-    data: {
-        blue: {
-            light: '#A5BBFF',
-            main: '#6B82FE',
-            dark: '#5F6FE6',
-        },
-        peach: {
-            light: '#E69999',
-            main: '#FF7061',
-            dark: '#DC5D56',
-        },
-        pink: {
-            light: '#D08CB2',
-            main: '#BC5090',
-            dark: '#A04383',
-        },
-        purple: {
-            light: '#978CCE',
-            main: '#58508D',
-            dark: '#1B1B51',
-        },
-        marigold: {
-            light: '#ECBE70',
-            main: '#ECA33A',
-            dark: '#E28A30',
-        },
-        teal: {
-            light: '#5FCFD2',
-            main: '#1AB0AF',
-            dark: '#1E938F',
-        },
-    },
-};
-
-var props = {
-    MuiSwitch: {
-        color: 'default',
-    },
-    MuiTextField: {
-        variant: 'outlined',
-    },
-};
-
-/**
- * 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.
- *
- * props as imported from './props' are part updated design system.
- */
-var adminThemeDefaultProps = {
-    props: __assign$1(__assign$1({}, props), { 
-        // Legacy below
-        MuiCard: {
-            elevation: 0,
-        }, MuiTooltip: {
-            title: '',
-            placement: 'right',
-        }, MuiPaper: {
-            elevation: 0,
-        }, MuiAppBar: {
-            position: 'static',
-        }, MuiInputBase: {
-            color: 'secondary',
-        }, MuiInputLabel: {
-            color: 'secondary',
-        } }),
-};
-
-var overrides = {
-    MuiCssBaseline: {
-        '@global': {
-            '*::-webkit-scrollbar': {
-                width: '12px',
-            },
-            '*::-webkit-scrollbar-thumb': {
-                backgroundColor: 'rgba(167,167,167,1)',
-                border: '2px solid rgba(245, 245, 245, 1)',
-                borderRadius: '8px',
-            },
-            '*::-webkit-scrollbar-track': {
-                backgroundColor: 'rgba(245, 245, 245, 1)',
-                borderRadius: '0px',
-            },
-        },
-    },
-    MuiSwitch: {
-        checked: {},
-        track: {},
-        switchBase: {
-            '&$checked': {
-                color: basePalette.success.main,
-                '& + $track': {
-                    background: basePalette.success.light,
-                },
-            },
-        },
-    },
+var useStagedColumnFilters = function (selectedColumnFilters) {
+    var _a = React.useState(function () {
+        return selectedColumnFilters.reduce(function (acc, _a) {
+            var id = _a.id, value = _a.value;
+            if (acc.has(id)) {
+                var existingValue = acc.get(id);
+                // If the existing value is a string, convert it to an array and add the new value
+                if (typeof existingValue === 'string') {
+                    acc.set(id, [existingValue, value]);
+                }
+                else {
+                    existingValue.push(value);
+                }
+            }
+            else {
+                acc.set(id, value);
+            }
+            return acc;
+        }, new Map());
+    }), columnInputValues = _a[0], setColumnInputValues = _a[1];
+    var filterState = {
+        update: function (columnId, value) {
+            return setColumnInputValues(columnInputValues.set(columnId, value));
+        },
+        get: function (columnId) { return columnInputValues.get(columnId); },
+        clear: function () {
+            columnInputValues.clear();
+            setColumnInputValues(columnInputValues);
+        },
+        delete: function (columnFilter) {
+            var values = columnInputValues.get(columnFilter.id);
+            if (values && Array.isArray(values)) {
+                var valueIndex = values.indexOf(columnFilter.value);
+                values.splice(valueIndex, 1);
+                if (values.length > 0) {
+                    columnInputValues.set(columnFilter.id, values);
+                }
+                else {
+                    columnInputValues.delete(columnFilter.id);
+                }
+            }
+            else {
+                columnInputValues.delete(columnFilter.id);
+            }
+            setColumnInputValues(columnInputValues);
+        },
+        exist: function () { return columnInputValues.size > 0; },
+    };
+    return filterState;
 };
 
-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, overrides: overrides }, 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, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
-createTheme__default['default'](adminDarkOptions);
-
-var Panel = function (props) {
-    var anchorEl = props.anchorEl, onClose = props.onClose;
-    var classes = useStyles$5();
-    var _a = React.useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
-    var paperRef = React.useRef(null);
-    var _b = useColumnFilters(table), columnFilters = _b.columnFilters, resetColumnFilters = _b.resetColumnFilters;
-    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 handleApplyClick = function () {
-        if (stagedColumnFilters.exist()) {
-            columnFilters.forEach(function (columnFilter) {
-                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
-                if (columnInputValue) {
-                    var column = table.getColumn(columnFilter.columnId);
-                    column.setFilterValue(columnInputValue);
-                }
-            });
-        }
-        else {
-            resetColumnFilters();
-        }
-        onClose();
-    };
-    var handleCancelClick = function () {
-        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 }))); })),
-            stageFilterSelections && (React__default['default'].createElement(core.Box, { className: classes.buttonBox },
-                React__default['default'].createElement(Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
-                React__default['default'].createElement(Button, { onClick: handleApplyClick }, "Apply"))))));
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles$5();
+    var _a = React.useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
+    var paperRef = React.useRef(null);
+    var _b = useColumnFilters(table), columnFilters = _b.columnFilters, resetColumnFilters = _b.resetColumnFilters;
+    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 handleApplyClick = function () {
+        if (stagedColumnFilters.exist()) {
+            columnFilters.forEach(function (columnFilter) {
+                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
+                if (columnInputValue) {
+                    var column = table.getColumn(columnFilter.columnId);
+                    column.setFilterValue(columnInputValue);
+                }
+            });
+        }
+        else {
+            resetColumnFilters();
+        }
+        onClose();
+    };
+    var handleCancelClick = function () {
+        onClose();
+    };
+    var open = Boolean(anchorEl);
+    return (React.createElement(commonUi.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.createElement(commonUi.Paper, { className: classes.filterPopoverContents, elevation: 2 },
+            React.createElement(commonUi.Box, tslib.__assign({}, { ref: paperRef }, { padding: 3 }),
+                React.createElement(commonUi.Typography, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React.createElement(FilterControl, tslib.__assign({}, columnFilter, { key: i }))); })),
+            stageFilterSelections && (React.createElement(commonUi.Box, { className: classes.buttonBox },
+                React.createElement(adminUi.Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
+                React.createElement(adminUi.Button, { onClick: handleApplyClick }, "Apply"))))));
 };
 
-var useStyles$3 = core.makeStyles({
-    root: {
-        justifySelf: 'end',
-        gridArea: 'columnFilter',
-    },
+var useStyles$3 = core.makeStyles({
+    root: {
+        justifySelf: 'end',
+        gridArea: 'columnFilter',
+    },
 });
 
-var Trigger = function (props) {
-    var _a = props.label, label = _a === void 0 ? 'Filter' : _a, onClick = props.onClick;
-    var classes = useStyles$3();
-    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 Trigger = function (props) {
+    var _a = props.label, label = _a === void 0 ? 'Filter' : _a, onClick = props.onClick;
+    var classes = useStyles$3();
+    return (React.createElement(adminUi.Button, { className: classes.root, onClick: onClick, startIcon: React.createElement(commonUi.Icon, { icon: webIcons.Filter }), textTransform: "none", variant: "ghost" }, label));
 };
 
-var FilterPanel = function () {
-    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
-    var _b = React.useContext(TableContext), stageFilterSelections = _b.stageFilterSelections, stagedColumnFilters = _b.stagedColumnFilters;
-    var handleClick = function (event) {
-        setAnchorEl(event.currentTarget);
-    };
-    var handleClose = function () {
-        if (stageFilterSelections)
-            stagedColumnFilters.clear();
-        setAnchorEl(null);
-    };
-    return (React__default['default'].createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
-        React__default['default'].createElement(Trigger, { onClick: handleClick }),
-        React__default['default'].createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
+var FilterPanel = function () {
+    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var _b = React.useContext(TableContext), stageFilterSelections = _b.stageFilterSelections, stagedColumnFilters = _b.stagedColumnFilters;
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        if (stageFilterSelections)
+            stagedColumnFilters.clear();
+        setAnchorEl(null);
+    };
+    return (React.createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
+        React.createElement(Trigger, { onClick: handleClick }),
+        React.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
 };
 
-var useStyles$2 = core.makeStyles({
-    root: {
-        justifySelf: 'start',
-        maxWidth: 300,
-        minWidth: 200,
-        width: '100%',
-        gridArea: 'globalFilter',
-    },
+var useStyles$2 = core.makeStyles({
+    root: {
+        justifySelf: 'start',
+        maxWidth: 300,
+        minWidth: 200,
+        width: '100%',
+        gridArea: 'globalFilter',
+    },
 });
 
-var GlobalFilter = function (props) {
-    var value = props.value, setValue = props.setValue, restProps = __rest$3(props, ["value", "setValue"]);
-    var classes = useStyles$2();
-    var handleChange = function (e) {
-        setValue(e.target.value);
-    };
-    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 GlobalFilter = function (props) {
+    var value = props.value, setValue = props.setValue, restProps = tslib.__rest(props, ["value", "setValue"]);
+    var classes = useStyles$2();
+    var handleChange = function (e) {
+        setValue(e.target.value);
+    };
+    return (React.createElement(core.TextField, tslib.__assign({ className: classes.root, variant: "outlined", value: value, onChange: handleChange, InputProps: {
+            startAdornment: (React.createElement(core.InputAdornment, { position: "start" },
+                React.createElement(commonUi.Icon, { icon: webIcons.Search }))),
+        } }, restProps)));
 };
 
-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));
+var TableHeaderRow = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement("tr", tslib.__assign({ "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$1 = 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');
-        },
-    },
+// 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$1 = 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');
+        },
+    },
 }); });
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -3952,9 +933,6 @@ var Symbol = _Symbol,
     isArray = isArray_1,
     isSymbol = isSymbol_1;
 
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0;
-
 /** Used to convert symbols to primitives and strings. */
 var symbolProto = Symbol ? Symbol.prototype : undefined,
     symbolToString = symbolProto ? symbolProto.toString : undefined;
@@ -3980,7 +958,7 @@ function baseToString$1(value) {
     return symbolToString ? symbolToString.call(value) : '';
   }
   var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+  return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
 }
 
 var _baseToString = baseToString$1;
@@ -4255,201 +1233,201 @@ var kebabCase = createCompounder(function(result, word, index) {
 
 var kebabCase_1 = kebabCase;
 
-var TableHeaderCell = function (props) {
-    var _a;
-    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$1(__assign$3(__assign$3({}, props), { sortable: sortable }));
-    var _b = core.useTheme(), spacing = _b.spacing, palette = _b.palette;
-    var sortIndicators = {
-        asc: SvgChevronUp,
-        desc: SvgChevronDown,
-    };
-    var idBase = (_a = context.table.options.meta) === null || _a === void 0 ? void 0 : _a.idBase;
-    var dataTourIdProps = idBase && sortable ? { 'data-tour-id': kebabCase_1("sort " + idBase + " on " + context.header.column.id) } : {};
-    return (React__default['default'].createElement("th", __assign$3({ className: classes.root }, restProps),
-        React__default['default'].createElement(core.Box, __assign$3({ className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort }, dataTourIdProps),
-            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 TableHeaderCell = function (props) {
+    var _a;
+    var children = props.children, context = props.context, restProps = tslib.__rest(props, ["children", "context"]);
+    var sortable = context.header.column.getCanSort();
+    var sorted = context.header.column.getIsSorted();
+    var handleSort = context.header.column.getToggleSortingHandler();
+    var classes = useStyles$1(tslib.__assign(tslib.__assign({}, props), { sortable: sortable }));
+    var _b = core.useTheme(), spacing = _b.spacing, palette = _b.palette;
+    var sortIndicators = {
+        asc: webIcons.ChevronUp,
+        desc: webIcons.ChevronDown,
+    };
+    var idBase = (_a = context.table.options.meta) === null || _a === void 0 ? void 0 : _a.idBase;
+    var dataTourIdProps = idBase && sortable ? { 'data-tour-id': kebabCase_1("sort " + idBase + " on " + context.header.column.id) } : {};
+    return (React.createElement("th", tslib.__assign({ className: classes.root }, restProps),
+        React.createElement(commonUi.Box, tslib.__assign({ className: classes.box, display: "flex", alignItems: "center", gridGap: spacing(1), onClick: handleSort }, dataTourIdProps),
+            children,
+            sortable && !sorted && React.createElement(commonUi.Icon, { icon: webIcons.Sort, color: palette.grey[500] }),
+            sortable && sorted && React.createElement(commonUi.Icon, { icon: sortIndicators[sorted] }))));
 };
 
-var useStyles = core.makeStyles({
-    chip: {
-        overflow: 'visible',
-        height: 'auto',
-    },
-    label: {
-        whiteSpace: 'normal',
-    },
+var useStyles = core.makeStyles({
+    chip: {
+        overflow: 'visible',
+        height: 'auto',
+    },
+    label: {
+        whiteSpace: 'normal',
+    },
 });
 
-var ColumnFilterChip = function (props) {
-    var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
-    var classes = useStyles();
-    return (React__default['default'].createElement(Chip, { className: classes.chip, onDelete: function () { return onClick(columnFilter); }, label: React__default['default'].createElement(core.Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
-            React__default['default'].createElement(Typography$1, null,
-                label[0],
-                ":"),
-            React__default['default'].createElement(Typography$1, __assign$3({ className: classes.label, weight: "semi-bold" }, { component: 'span' }), label[1])) }));
+var ColumnFilterChip = function (props) {
+    var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
+    var classes = useStyles();
+    return (React.createElement(commonUi.Chip, { className: classes.chip, onDelete: function () { return onClick(columnFilter); }, label: React.createElement(commonUi.Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
+            React.createElement(commonUi.Typography, null,
+                label[0],
+                ":"),
+            React.createElement(commonUi.Typography, tslib.__assign({ className: classes.label, weight: "semi-bold" }, { component: 'span' }), label[1])) }));
 };
 
-var TableControlsContainer = function (props) {
-    var showTitle = props.showTitle, showGlobalSearch = props.showGlobalSearch, showColumnFilter = props.showColumnFilter;
-    var gridTemplateAreas;
-    switch (true) {
-        case showTitle && showGlobalSearch && showColumnFilter:
-            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter columnFilter\"\n      ";
-            break;
-        case showTitle && !showGlobalSearch && showColumnFilter:
-            gridTemplateAreas = "\n        \"title columnFilter\"\n      ";
-            break;
-        case !showTitle && showGlobalSearch && showColumnFilter:
-            gridTemplateAreas = "\n        \"globalFilter columnFilter\"\n      ";
-            break;
-        case showTitle && !showGlobalSearch && !showColumnFilter:
-            gridTemplateAreas = "\n        \"title .\"\n      ";
-            break;
-        case !showTitle && !showGlobalSearch && showColumnFilter:
-            gridTemplateAreas = "\n        \". columnFilter\"\n      ";
-            break;
-        case !showTitle && showGlobalSearch && !showColumnFilter:
-            gridTemplateAreas = "\n        \"globalFilter .\"\n      ";
-            break;
-        case showTitle && showGlobalSearch && !showColumnFilter:
-            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter .\"\n      ";
-            break;
-    }
-    return (React__default['default'].createElement(core.Box, { display: "grid", gridTemplateColumns: "repeat(2, minmax(150px, 1fr))", gridTemplateAreas: gridTemplateAreas, gridGap: 16, marginBottom: 3 }, props.children));
+var TableControlsContainer = function (props) {
+    var showTitle = props.showTitle, showGlobalSearch = props.showGlobalSearch, showColumnFilter = props.showColumnFilter;
+    var gridTemplateAreas;
+    switch (true) {
+        case showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter columnFilter\"\n      ";
+            break;
+        case showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"title columnFilter\"\n      ";
+            break;
+        case !showTitle && showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \"globalFilter columnFilter\"\n      ";
+            break;
+        case showTitle && !showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n      ";
+            break;
+        case !showTitle && !showGlobalSearch && showColumnFilter:
+            gridTemplateAreas = "\n        \". columnFilter\"\n      ";
+            break;
+        case !showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"globalFilter .\"\n      ";
+            break;
+        case showTitle && showGlobalSearch && !showColumnFilter:
+            gridTemplateAreas = "\n        \"title .\"\n        \"globalFilter .\"\n      ";
+            break;
+    }
+    return (React.createElement(core.Box, { display: "grid", gridTemplateColumns: "repeat(2, minmax(150px, 1fr))", gridTemplateAreas: gridTemplateAreas, gridGap: 16, marginBottom: 3 }, props.children));
 };
 
-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));
+var ColumnFilterResetButton = function (props) {
+    var _a = props.children, children = _a === void 0 ? 'Clear All' : _a, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(adminUi.Button, tslib.__assign({ variant: "text", textTransform: "none" }, restProps), children));
 };
 
-var defaultTableProps = {
-    enableSortingRemoval: true,
-    fullWidth: true,
-    paginated: true,
-    sortable: false,
-    searchable: false,
-};
-var Table = function (props) {
-    var title = props.title, data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, paginated = props.paginated, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase, stageFilterSelections = props.stageFilterSelections;
-    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 = externalSortingState || [], sorting = _a[0], setSorting = _a[1];
-    var isControlledColumnSort = Boolean(externalSortingState);
-    var controlledColumnSortOptions = { onSortingChange: setSorting, manualSorting: true };
-    // 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(__assign$3(__assign$3(__assign$3({ data: data, columns: columns, state: __assign$3(__assign$3(__assign$3(__assign$3(__assign$3({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, enableSortingRemoval: enableSortingRemoval, globalFilterFn: coercedValueIncludesString, getCoreRowModel: reactTable.getCoreRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel() }, (paginated && { getPaginationRowModel: reactTable.getPaginationRowModel() })), (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
-    var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
-    // stagedColumnFilters is only used when stageFilterSelections is enabled
-    var stagedColumnFilters = useStagedColumnFilters(selectedColumnFilters);
-    var handlePagination = function (_e, pageNumber) {
-        var pageIndex = pageNumber - 1;
-        table.setPageIndex(pageIndex);
-    };
-    var showTitle = Boolean(title);
-    var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
-    var showColumnFilter = Boolean(hasColumnFilters);
-    var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
-    return (React__default['default'].createElement(TableContext.Provider, { value: { table: table, stagedColumnFilters: stagedColumnFilters, stageFilterSelections: stageFilterSelections } },
-        React__default['default'].createElement(core.Box, __assign$3({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
-            minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
-        })),
-            showControls && (React__default['default'].createElement(core.Box, null,
-                React__default['default'].createElement(TableControlsContainer, { showTitle: showTitle, showGlobalSearch: showGlobalSearch, showColumnFilter: showColumnFilter },
-                    showTitle && (React__default['default'].createElement(core.Typography, { style: { gridArea: 'title', alignSelf: 'center', fontSize: '18px', lineHeight: '27px' } }, title)),
-                    showGlobalSearch && (React__default['default'].createElement(GlobalFilter, __assign$3({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
-                    showColumnFilter && 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: function (columnFilter) {
-                            if (stageFilterSelections) {
-                                stagedColumnFilters.delete(columnFilter);
-                            }
-                            deselectColumnFilter(columnFilter);
-                        } })); }),
-                    selectedColumnFilters.length >= 1 && (React__default['default'].createElement(ColumnFilterResetButton, { onClick: function () {
-                            if (stageFilterSelections) {
-                                stagedColumnFilters.clear();
-                            }
-                            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" }))),
-            paginated && 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 }))))));
-};
+var defaultTableProps = {
+    enableSortingRemoval: true,
+    fullWidth: true,
+    paginated: true,
+    sortable: false,
+    searchable: false,
+};
+var Table = function (props) {
+    var title = props.title, data = props.data, columns = props.columns, enableSortingRemoval = props.enableSortingRemoval, loading = props.loading, searchable = props.searchable, sortable = props.sortable, externalFilterState = props.filterState, externalGlobalFilterState = props.globalFilterState, externalPaginationState = props.paginationState, externalSortingState = props.sortingState, externalVisibilityState = props.visibilityState, paginated = props.paginated, pageCount = props.pageCount, GlobalFilterProps = props.GlobalFilterProps, Empty = props.Empty, idBase = props.idBase, stageFilterSelections = props.stageFilterSelections;
+    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 = externalSortingState || [], sorting = _a[0], setSorting = _a[1];
+    var isControlledColumnSort = Boolean(externalSortingState);
+    var controlledColumnSortOptions = { onSortingChange: setSorting, manualSorting: true };
+    // 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(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ data: data, columns: columns, state: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, (isControlledPagination && { pagination: pagination })), (isControlledGlobalFilter && { globalFilter: globalFilter })), (isControlledColumnFilters && { columnFilters: columnFilters })), (isControlledColumnVisibility && { columnVisibility: columnVisibility })), (isControlledColumnSort && { sorting: sorting })), enableSorting: sortable, enableSortingRemoval: enableSortingRemoval, globalFilterFn: coercedValueIncludesString, getCoreRowModel: reactTable.getCoreRowModel(), getSortedRowModel: reactTable.getSortedRowModel(), getFilteredRowModel: reactTable.getFilteredRowModel() }, (paginated && { getPaginationRowModel: reactTable.getPaginationRowModel() })), (isControlledPagination && controlledPaginationOptions)), (isControlledGlobalFilter && controlledGlobalFilterOptions)), (isControlledColumnFilters && controlledColumnFiltersOptions)), (isControlledColumnSort && controlledColumnSortOptions)), { meta: { idBase: idBase } }));
+    var _f = useColumnFilters(table), selectedColumnFilters = _f.selectedColumnFilters, hasColumnFilters = _f.hasColumnFilters, deselectColumnFilter = _f.deselectColumnFilter, formatSelectedFilterText = _f.formatSelectedFilterText, resetColumnFilters = _f.resetColumnFilters;
+    // stagedColumnFilters is only used when stageFilterSelections is enabled
+    var stagedColumnFilters = useStagedColumnFilters(selectedColumnFilters);
+    var handlePagination = function (_e, pageNumber) {
+        var pageIndex = pageNumber - 1;
+        table.setPageIndex(pageIndex);
+    };
+    var showTitle = Boolean(title);
+    var showGlobalSearch = Boolean(searchable || isControlledGlobalFilter);
+    var showColumnFilter = Boolean(hasColumnFilters);
+    var showControls = Boolean(showTitle || showGlobalSearch || showColumnFilter);
+    return (React.createElement(TableContext.Provider, { value: { table: table, stagedColumnFilters: stagedColumnFilters, stageFilterSelections: stageFilterSelections } },
+        React.createElement(commonUi.Box, tslib.__assign({ className: classes.root }, { ref: rootRef }, { "data-table-element": "root" }, (table.getPageCount() > 1 && {
+            minHeight: getTableMinHeight(rootRef, table.getState().pagination.pageSize),
+        })),
+            showControls && (React.createElement(commonUi.Box, null,
+                React.createElement(TableControlsContainer, { showTitle: showTitle, showGlobalSearch: showGlobalSearch, showColumnFilter: showColumnFilter },
+                    showTitle && (React.createElement(core.Typography, { style: { gridArea: 'title', alignSelf: 'center', fontSize: '18px', lineHeight: '27px' } }, title)),
+                    showGlobalSearch && (React.createElement(GlobalFilter, tslib.__assign({}, GlobalFilterProps, { value: table.getState().globalFilter, setValue: table.setGlobalFilter }))),
+                    showColumnFilter && React.createElement(FilterPanel, null)),
+                React.createElement(commonUi.Box, { display: "flex", flexWrap: "wrap", gridGap: 8 },
+                    selectedColumnFilters.map(function (selectedColumnFilter, i) { return (React.createElement(ColumnFilterChip, { key: "selected-column-filter-chip-" + i, columnFilter: selectedColumnFilter, label: formatSelectedFilterText(selectedColumnFilter), onClick: function (columnFilter) {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.delete(columnFilter);
+                            }
+                            deselectColumnFilter(columnFilter);
+                        } })); }),
+                    selectedColumnFilters.length >= 1 && (React.createElement(ColumnFilterResetButton, { onClick: function () {
+                            if (stageFilterSelections) {
+                                stagedColumnFilters.clear();
+                            }
+                            resetColumnFilters();
+                        } }))))),
+            React.createElement(commonUi.Box, { className: classes.tableContainer, flexGrow: loading || isEmpty ? 0 : 1 },
+                React.createElement("table", { className: classes.table },
+                    React.createElement(TableHeader, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(TableHeaderRow, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(TableHeaderCell, { key: header.id, context: header.getContext() }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))); }))); })),
+                    !loading && (React.createElement(TableBody, null, table.getRowModel().rows.map(function (row) { return (React.createElement(TableRow, { key: row.id }, row.getVisibleCells().map(function (cell) { return (React.createElement(TableCell, { key: cell.id }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))))),
+            isEmpty && isEmptyComponentValid && Empty && !loading && (React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 }, React.createElement(Empty))),
+            loading && (React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", p: 2, flexGrow: 1 },
+                React.createElement(commonUi.CircularProgress, { size: 80, color: "inherit" }))),
+            paginated && table.getPageCount() > 1 && (React.createElement(TableFooter, null,
+                React.createElement(lab.Pagination, { page: table.getState().pagination.pageIndex + 1, count: table.getPageCount(), onChange: handlePagination, disabled: loading }))))));
+};
 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;
+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;
 };
 
-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);
-    };
-    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 (_a) {
-            var label = _a.label, onClick = _a.onClick, icon = _a.icon, restProps = __rest$3(_a, ["label", "onClick", "icon"]);
-            return (React__default['default'].createElement(Tooltip$1, { title: label, key: label },
-                React__default['default'].createElement(IconButton$1, __assign$3({ size: "small", onClick: function () { return onClick(context); } }, restProps),
-                    React__default['default'].createElement(Icon$1, { icon: 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)); }))))));
+var RowActions = function (props) {
+    var context = props.context, actions = props.actions;
+    var validActions = actions.filter(validateAction);
+    var _a = React.useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var openMenu = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    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.createElement(commonUi.Box, { display: "flex" },
+        mainActions.map(function (_a) {
+            var label = _a.label, onClick = _a.onClick, icon = _a.icon, restProps = tslib.__rest(_a, ["label", "onClick", "icon"]);
+            return (React.createElement(commonUi.Tooltip, { title: label, key: label },
+                React.createElement(commonUi.IconButton, tslib.__assign({ size: "small", onClick: function () { return onClick(context); } }, restProps),
+                    React.createElement(commonUi.Icon, { icon: icon }))));
+        }),
+        overflowActions && (React.createElement(React.Fragment, null,
+            React.createElement(commonUi.IconButton, { size: "small", onClick: openMenu },
+                React.createElement(commonUi.Icon, { icon: webIcons.More })),
+            React.createElement(commonUi.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu }, overflowActions.map(function (action) { return (React.createElement(commonUi.MenuItem, { key: action.label, onClick: function () { return action.onClick(context); } }, action.label)); }))))));
 };
 
 exports.GlobalFilter = GlobalFilter;