@popmenu/admin-ui 0.125.0 → 0.126.1

package/build/index.js

@@ -1,2468 +1,1284 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var tslib = require('tslib');
 var React = require('react');
-var CommonAlert = require('@material-ui/lab/Alert');
-var core = require('@material-ui/core');
-require('@material-ui/core/AppBar');
-var MuiAvatar = require('@material-ui/core/Avatar');
+var commonUi = require('@popmenu/common-ui');
+var webIcons = require('@popmenu/web-icons');
 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');
-var CardActionArea = 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');
-require('@material-ui/core/Chip');
-require('@material-ui/core/Collapse');
-var Dialog = require('@material-ui/core/Dialog');
-var CommonDialogActions = require('@material-ui/core/DialogActions');
-var DialogContent = require('@material-ui/core/DialogContent');
-var DialogTitle = 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');
-require('@material-ui/core/Menu');
-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');
+var core = require('@material-ui/core');
 var MuiAlertTitle = require('@material-ui/lab/AlertTitle');
 var Box = require('@material-ui/core/Box');
+var Dialog = require('@material-ui/core/Dialog');
 var MuiSnackbar = require('@material-ui/core/Snackbar');
+var classNames = require('classnames');
 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 CardActionArea__default = /*#__PURE__*/_interopDefaultLegacy(CardActionArea);
-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 Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
-var CommonDialogActions__default = /*#__PURE__*/_interopDefaultLegacy(CommonDialogActions);
-var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
-var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
-var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
-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 MuiAlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(MuiAlertTitle);
-var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
-var MuiSnackbar__default = /*#__PURE__*/_interopDefaultLegacy(MuiSnackbar);
-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$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;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-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 = 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 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 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 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 severityIcons$1 = {
+    info: webIcons.Info,
+    error: webIcons.Error,
+    warning: webIcons.Warning,
+    success: webIcons.CheckCircle,
 };
-
-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 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 tslib.__assign(tslib.__assign({}, props), { href: href });
+    if (onClick)
+        return tslib.__assign(tslib.__assign({}, 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 = tslib.__rest(props, ["children", "link", "severity", "variant", "onClose"]);
+    var classes = useAlertStyles(props);
+    var validLink = link && getLinkProps(link);
+    var Action = (React.createElement(React.Fragment, null,
+        validLink && React.createElement(commonUi.Link, tslib.__assign({}, validLink)),
+        onClose && (React.createElement(commonUi.IconButton, { onClick: onClose },
+            React.createElement(commonUi.Icon, { icon: webIcons.X })))));
+    return (React.createElement(commonUi.Alert, tslib.__assign({ ref: ref, classes: classes, 
+        // @ts-expect-error - todo.
+        icon: React.createElement(commonUi.Icon, { icon: severityIcons$1[severity], size: "extra-large" }), action: Action, variant: variant, severity: severity }, muiProps), children));
 });
+Alert.displayName = 'Alert';
 
-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 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 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 getColorHover = function (palette, props) {
+    var color;
+    if (props.variant === 'secondary') {
+        color = palette.secondary.contrastText;
+    }
+    return color;
 };
-
-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 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: tslib.__assign(tslib.__assign({}, buttonTypography), { textTransform: function (props) { return props.textTransform; } }),
+        sizeSmall: {
+            padding: spacing(0.5, 2),
+        },
+        sizeLarge: {
+            padding: spacing(1.5, 2),
+        },
+    });
 });
 
-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"
-  })))));
-}
-
-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"
-  })))));
-}
-
-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"
-  })))));
-}
-
-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"
-  })));
-}
-
-var _g$X, _defs$C;
-
-function _extends$1y() { _extends$1y = 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$1y.apply(this, arguments); }
-
-function SvgCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1y({
-    viewBox: "0 0 16 16",
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    width: "1em",
-    height: "1em"
-  }, props), _g$X || (_g$X = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#circle_svg__clip0_8_2293)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333z",
-    stroke: "currentColor"
-  }))), _defs$C || (_defs$C = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "circle_svg__clip0_8_2293"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M0 0h16v16H0z"
-  })))));
-}
-
-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 deriveButtonProps = function (buttonProps) {
+    var variant = buttonProps.variant;
+    var derived = {};
+    switch (variant) {
+        case 'primary':
+            derived.variant = 'contained';
+            derived.color = 'primary';
+            break;
+        case 'secondary':
+            derived.variant = 'outlined';
+            derived.color = 'secondary';
+            break;
+        case 'tertiary':
+            derived.variant = 'contained';
+            derived.color = 'secondary';
+            break;
+        case 'text':
+            derived.variant = 'text';
+        case 'ghost':
+            derived.variant = 'text';
+            break;
+        case 'success':
+            derived.variant = 'contained';
+            break;
+        case 'info':
+            derived.variant = 'contained';
+            break;
+        case 'warning':
+            derived.variant = 'contained';
+            break;
+        case 'error':
+            derived.variant = 'contained';
+            break;
+        default:
+            derived.variant = variant;
+            break;
+    }
+    return derived;
+};
 
-var 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),
-        },
-    });
+// 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 = tslib.__rest(props, ["children", "variant", "classes"]);
+    var classes = useButtonStyles(props);
+    var derivedProps = deriveButtonProps(props);
+    var mergedProps = tslib.__assign(tslib.__assign({}, derivedProps), commonProps);
+    return (React.createElement(commonUi.Button, tslib.__assign({ ref: ref, classes: tslib.__assign(tslib.__assign({}, classes), classesOverride), disableElevation: true }, mergedProps), children));
 });
-
-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;
+Button.defaultProps = {
+    textTransform: 'uppercase',
+    variant: 'primary',
 };
-
-// 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 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)))));
-});
+var severityIcons = {
+    info: webIcons.Info,
+    error: webIcons.Error,
+    warning: webIcons.Warning,
+    success: webIcons.CheckCircle,
+};
+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 = tslib.__rest(props, ["cancelButtonText", "hideCancelButton", "children", "labelId", "descriptionId", "severity", "proceedButtonText", "disabled", "onClose", "onCancel", "onProceed"]);
+    var classes = useAlertDialogStyles(props);
+    return (React.createElement(commonUi.Dialog, tslib.__assign({ ref: ref, classes: { paper: classes.root }, maxWidth: "sm", fullWidth: true }, DialogProps),
+        React.createElement(commonUi.Card, { classes: { root: classes.card }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": labelId, "aria-describedby": descriptionId },
+            React.createElement(commonUi.IconButton, { className: classes.cancelIcon, onClick: onClose, disabled: disabled },
+                React.createElement(commonUi.Icon, { icon: webIcons.X })),
+            React.createElement(commonUi.CardContent, null,
+                React.createElement(commonUi.Box, { display: "flex" },
+                    React.createElement(commonUi.Icon, { className: classes.icon, color: severity, icon: severityIcons[severity] }),
+                    React.createElement(commonUi.Box, { pl: 2, pr: 3 }, children))),
+            React.createElement(commonUi.CardActions, { classes: { root: classes.cardActions } },
+                !hideCancelButton && (React.createElement(Button, { onClick: onCancel, disabled: disabled, variant: "ghost" }, cancelButtonText)),
+                React.createElement(Button, { onClick: onProceed, loading: disabled, variant: severity }, proceedButtonText)))));
+});
 AlertDialog.displayName = 'AlertDialog';
 
-var AlertDialogHeader = function (props) {
-    var children = props.children, muiProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", height: 40, alignItems: "center" }, muiProps),
-        React__default['default'].createElement(Typography, { variant: "h6" }, children)));
-};
+var AlertDialogHeader = function (props) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", height: 40, alignItems: "center" }, muiProps),
+        React.createElement(commonUi.Typography, { variant: "h6" }, children)));
+};
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
-var AlertTitle = function (props) {
-    var children = props.children, muiProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(MuiAlertTitle__default['default'], __assign$1({}, muiProps),
-        React__default['default'].createElement(Typography, { variant: "h6" },
-            " ",
-            children,
-            " ")));
-};
+var AlertTitle = function (props) {
+    var children = props.children, muiProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(MuiAlertTitle, tslib.__assign({}, muiProps),
+        React.createElement(commonUi.Typography, { variant: "h6" },
+            " ",
+            children,
+            " ")));
+};
 AlertTitle.displayName = 'AlertTitle';
 
-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 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));
-});
+var ButtonGroup = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.variant, variant = _a === void 0 ? 'primary' : _a, muiProps = tslib.__rest(props, ["children", "variant"]);
+    var classes = useButtonGroupStyles(props);
+    var derivedProps = deriveButtonProps({ variant: variant });
+    var spacing = styles.useTheme().spacing;
+    var childrenWithProps = React.Children.map(children, function (child, i) {
+        var isFirst = i === 0 && props.orientation === 'vertical';
+        var isLast = i === React.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.isValidElement(child)) {
+            return null;
+        }
+        return React.cloneElement(child, tslib.__assign(tslib.__assign({ variant: variant }, (isFirst && firstStyles)), (isLast && lastStyles)));
+    });
+    return (React.createElement(commonUi.ButtonGroup, tslib.__assign({ ref: ref, classes: classes }, derivedProps, muiProps), childrenWithProps));
+});
 ButtonGroup.displayName = 'ButtonGroup';
 
-var useFeatureIntroStyles = styles.makeStyles(function (_a) {
-    var spacing = _a.spacing;
-    return ({
-        root: {
-            gap: spacing(3),
-        },
-        actions: {
-            gap: spacing(3),
-        },
-        image: {
-            width: '100%',
-            objectFit: 'contain',
-        },
-    });
+var useFeatureIntroStyles = styles.makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            gap: spacing(3),
+        },
+        actions: {
+            gap: spacing(3),
+        },
+        image: {
+            width: '100%',
+            objectFit: 'contain',
+        },
+    });
 });
 
-var FeatureIntro = function (props) {
-    var title = props.title, body = props.body, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, image = props.image;
-    var primaryActionLabel = primaryAction.label, primaryActionProps = __rest$1(primaryAction, ["label"]);
-    var _a = secondaryAction || {}, secondaryActionLabel = _a.label, secondaryActionProps = __rest$1(_a, ["label"]);
-    var classes = useFeatureIntroStyles(props);
-    var validImage = (image === null || image === void 0 ? void 0 : image.src) && (image === null || image === void 0 ? void 0 : image.alt);
-    return (React__default['default'].createElement(core.Box, { className: classes.root, padding: { xs: 4, sm: 8 }, flexDirection: { xs: 'column-reverse', sm: 'row' }, display: "flex", justifyContent: "center", alignItems: "center" },
-        React__default['default'].createElement(core.Box, { display: "flex", flexDirection: "column", width: { xs: '100%', sm: '50%' }, alignItems: { xs: 'center', sm: 'unset' } },
-            React__default['default'].createElement(core.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 2 },
-                React__default['default'].createElement(Typography, { align: "inherit", variant: "h4" }, title)),
-            React__default['default'].createElement(core.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 6 }, body),
-            React__default['default'].createElement(core.Box, { className: classes.actions, display: "flex", flexDirection: "column", width: "fit-content" },
-                primaryAction && React__default['default'].createElement(Button, __assign$1({}, primaryActionProps), primaryActionLabel),
-                secondaryAction && (React__default['default'].createElement(Button, __assign$1({ variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
-        React__default['default'].createElement(core.Box, { display: "flex", width: { xs: '100%', sm: '50%' }, alignItems: "center", justifyContent: "center" },
-            React__default['default'].createElement(core.Box, { display: "flex", maxWidth: 450, maxHeight: 450 }, validImage && React__default['default'].createElement("img", { src: image.src, alt: image.alt, className: classes.image })))));
-};
+var FeatureIntro = function (props) {
+    var title = props.title, body = props.body, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, image = props.image;
+    var primaryActionLabel = primaryAction.label, primaryActionProps = tslib.__rest(primaryAction, ["label"]);
+    var _a = secondaryAction || {}, secondaryActionLabel = _a.label, secondaryActionProps = tslib.__rest(_a, ["label"]);
+    var classes = useFeatureIntroStyles(props);
+    var validImage = (image === null || image === void 0 ? void 0 : image.src) && (image === null || image === void 0 ? void 0 : image.alt);
+    return (React.createElement(commonUi.Box, { className: classes.root, padding: { xs: 4, sm: 8 }, flexDirection: { xs: 'column-reverse', sm: 'row' }, display: "flex", justifyContent: "center", alignItems: "center" },
+        React.createElement(commonUi.Box, { display: "flex", flexDirection: "column", width: { xs: '100%', sm: '50%' }, alignItems: { xs: 'center', sm: 'unset' } },
+            React.createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 2 },
+                React.createElement(commonUi.Typography, { align: "inherit", variant: "h4" }, title)),
+            React.createElement(commonUi.Box, { textAlign: { xs: 'center', sm: 'start' }, marginBottom: 6 }, body),
+            React.createElement(commonUi.Box, { className: classes.actions, display: "flex", flexDirection: "column", width: "fit-content" },
+                primaryAction && React.createElement(Button, tslib.__assign({}, primaryActionProps), primaryActionLabel),
+                secondaryAction && (React.createElement(Button, tslib.__assign({ variant: "tertiary" }, secondaryActionProps), secondaryActionLabel)))),
+        React.createElement(commonUi.Box, { display: "flex", width: { xs: '100%', sm: '50%' }, alignItems: "center", justifyContent: "center" },
+            React.createElement(commonUi.Box, { display: "flex", maxWidth: 450, maxHeight: 450 }, validImage && React.createElement("img", { src: image.src, alt: image.alt, className: classes.image })))));
+};
 FeatureIntro.displayName = 'FeatureIntro';
 
-var useFullScreenStepperActionsStyles = 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),
-        },
-    },
+var useFullScreenStepperActionsStyles = 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),
+        },
+    },
 }); });
 
-var augmentButtonProps = function (internalProps, externalProps, setStepCursor, stepCursor, incrementor) {
-    if (externalProps === void 0) { externalProps = {}; }
-    var mergedProps = __assign$1(__assign$1({}, internalProps), externalProps);
-    mergedProps.onClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(typeof externalProps.onClick === 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, externalProps.onClick({})];
-                case 1:
-                    _a.sent();
-                    setStepCursor(stepCursor + incrementor);
-                    return [3 /*break*/, 3];
-                case 2:
-                    if (typeof internalProps.onClick === 'function') {
-                        internalProps.onClick();
-                    }
-                    _a.label = 3;
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); };
-    return mergedProps;
+var augmentButtonProps = function (internalProps, externalProps, setStepCursor, stepCursor, incrementor) {
+    if (externalProps === void 0) { externalProps = {}; }
+    var mergedProps = tslib.__assign(tslib.__assign({}, internalProps), externalProps);
+    mergedProps.onClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof externalProps.onClick === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, externalProps.onClick({})];
+                case 1:
+                    _a.sent();
+                    setStepCursor(stepCursor + incrementor);
+                    return [3 /*break*/, 3];
+                case 2:
+                    if (typeof internalProps.onClick === 'function') {
+                        internalProps.onClick();
+                    }
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    return mergedProps;
 };
 
-var StepperActionsPreviousButton = function (props) {
-    var previousButtonText = props.previousButtonText, stepCursor = props.stepCursor, handlePreviousClick = props.handlePreviousClick, previousButtonProps = props.previousButtonProps, setStepCursor = props.setStepCursor, displayPreviousButton = props.displayPreviousButton;
-    var augmentedPreviousButtonProps = augmentButtonProps({ onClick: handlePreviousClick }, previousButtonProps, setStepCursor, stepCursor, -1);
-    return displayPreviousButton ? (React__default['default'].createElement(Button, __assign$1({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
+var StepperActionsPreviousButton = function (props) {
+    var previousButtonText = props.previousButtonText, stepCursor = props.stepCursor, handlePreviousClick = props.handlePreviousClick, previousButtonProps = props.previousButtonProps, setStepCursor = props.setStepCursor, displayPreviousButton = props.displayPreviousButton;
+    var augmentedPreviousButtonProps = augmentButtonProps({ onClick: handlePreviousClick }, previousButtonProps, setStepCursor, stepCursor, -1);
+    return displayPreviousButton ? (React.createElement(Button, tslib.__assign({ variant: "tertiary", disabled: stepCursor === 1 }, augmentedPreviousButtonProps), previousButtonText || 'previous')) : null;
 };
 
-var useStyles$4 = styles.makeStyles({
-    root: {
-        fontStyle: 'italic',
-    },
-});
-var StepperActionsStatusText = function (props) {
-    var statusText = props.statusText;
-    var classes = useStyles$4(props);
-    return statusText ? (React__default['default'].createElement(Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
+var useStyles$4 = styles.makeStyles({
+    root: {
+        fontStyle: 'italic',
+    },
+});
+var StepperActionsStatusText = function (props) {
+    var statusText = props.statusText;
+    var classes = useStyles$4(props);
+    return statusText ? (React.createElement(commonUi.Typography, { classes: { root: classes.root }, variant: "body2" }, statusText)) : null;
 };
 
-var StepperActionsNextButton = function (props) {
-    var handleNextClick = props.handleNextClick, nextButtonProps = props.nextButtonProps, setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, stepCount = props.stepCount, finishButtonText = props.finishButtonText, nextButtonText = props.nextButtonText;
-    var augmentedNextButtonProps = augmentButtonProps({ onClick: handleNextClick }, nextButtonProps, setStepCursor, stepCursor, 1);
-    var finalStep = stepCursor / stepCount === 1;
-    var finishText = finishButtonText || 'finish';
-    var nextText = nextButtonText || 'next';
-    var buttonText = finalStep ? finishText : nextText;
-    return React__default['default'].createElement(Button, __assign$1({}, augmentedNextButtonProps), buttonText);
+var StepperActionsNextButton = function (props) {
+    var handleNextClick = props.handleNextClick, nextButtonProps = props.nextButtonProps, setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, stepCount = props.stepCount, finishButtonText = props.finishButtonText, nextButtonText = props.nextButtonText;
+    var augmentedNextButtonProps = augmentButtonProps({ onClick: handleNextClick }, nextButtonProps, setStepCursor, stepCursor, 1);
+    var finalStep = stepCursor / stepCount === 1;
+    var finishText = finishButtonText || 'finish';
+    var nextText = nextButtonText || 'next';
+    var buttonText = finalStep ? finishText : nextText;
+    return React.createElement(Button, tslib.__assign({}, augmentedNextButtonProps), buttonText);
 };
 
-var StepperActionsCancelButton = function (props) {
-    var setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, cancelButtonText = props.cancelButtonText, cancelButtonProps = props.cancelButtonProps, handleCancelClick = props.handleCancelClick, displayCancelButton = props.displayCancelButton;
-    var augmentedCancelButtonProps = augmentButtonProps({ onClick: handleCancelClick }, cancelButtonProps, setStepCursor, stepCursor, 0);
-    return displayCancelButton ? (React__default['default'].createElement(Button, __assign$1({ variant: "ghost" }, augmentedCancelButtonProps), cancelButtonText || 'cancel')) : null;
+var StepperActionsCancelButton = function (props) {
+    var setStepCursor = props.setStepCursor, stepCursor = props.stepCursor, cancelButtonText = props.cancelButtonText, cancelButtonProps = props.cancelButtonProps, handleCancelClick = props.handleCancelClick, displayCancelButton = props.displayCancelButton;
+    var augmentedCancelButtonProps = augmentButtonProps({ onClick: handleCancelClick }, cancelButtonProps, setStepCursor, stepCursor, 0);
+    return displayCancelButton ? (React.createElement(Button, tslib.__assign({ variant: "ghost" }, augmentedCancelButtonProps), cancelButtonText || 'cancel')) : null;
 };
 
-var FullScreenStepperActions = function (props) {
-    var stepCount = props.stepCount, stepCursor = props.stepCursor, setStepCursor = props.setStepCursor, handleNextClick = props.handleNextClick, handlePreviousClick = props.handlePreviousClick, handleCancelClick = props.handleCancelClick, actions = props.actions, callbackArgs = props.callbackArgs, cancelButtonText = props.cancelButtonText, nextButtonText = props.nextButtonText, finishButtonText = props.finishButtonText, nextButtonProps = props.nextButtonProps, previousButtonText = props.previousButtonText, previousButtonProps = props.previousButtonProps, cancelButtonProps = props.cancelButtonProps, statusText = props.statusText, displayPreviousButton = props.displayPreviousButton, displayCancelButton = props.displayCancelButton;
-    var classes = useFullScreenStepperActionsStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classes.root },
-        React__default['default'].createElement(core.Box, { className: classes.inlineStartActions },
-            React__default['default'].createElement(StepperActionsPreviousButton, { displayPreviousButton: displayPreviousButton, previousButtonText: previousButtonText, handlePreviousClick: handlePreviousClick, previousButtonProps: previousButtonProps, stepCursor: stepCursor, setStepCursor: setStepCursor }),
-            React__default['default'].createElement(StepperActionsStatusText, { statusText: statusText })),
-        React__default['default'].createElement(core.Box, { className: classes.inlineEndActions },
-            actions &&
-                actions.map(function (action, i) { return (React__default['default'].createElement(Button, __assign$1({ key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: function (event) { return action.onClick(event, callbackArgs); } }, action.props), action.text)); }),
-            React__default['default'].createElement(StepperActionsCancelButton, { setStepCursor: setStepCursor, stepCursor: stepCursor, cancelButtonText: cancelButtonText, cancelButtonProps: cancelButtonProps, handleCancelClick: handleCancelClick, displayCancelButton: displayCancelButton }),
-            React__default['default'].createElement(StepperActionsNextButton, { handleNextClick: handleNextClick, nextButtonProps: nextButtonProps, setStepCursor: setStepCursor, stepCursor: stepCursor, stepCount: stepCount, finishButtonText: finishButtonText, nextButtonText: nextButtonText }))));
+var FullScreenStepperActions = function (props) {
+    var stepCount = props.stepCount, stepCursor = props.stepCursor, setStepCursor = props.setStepCursor, handleNextClick = props.handleNextClick, handlePreviousClick = props.handlePreviousClick, handleCancelClick = props.handleCancelClick, actions = props.actions, callbackArgs = props.callbackArgs, cancelButtonText = props.cancelButtonText, nextButtonText = props.nextButtonText, finishButtonText = props.finishButtonText, nextButtonProps = props.nextButtonProps, previousButtonText = props.previousButtonText, previousButtonProps = props.previousButtonProps, cancelButtonProps = props.cancelButtonProps, statusText = props.statusText, displayPreviousButton = props.displayPreviousButton, displayCancelButton = props.displayCancelButton;
+    var classes = useFullScreenStepperActionsStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Box, { className: classes.inlineStartActions },
+            React.createElement(StepperActionsPreviousButton, { displayPreviousButton: displayPreviousButton, previousButtonText: previousButtonText, handlePreviousClick: handlePreviousClick, previousButtonProps: previousButtonProps, stepCursor: stepCursor, setStepCursor: setStepCursor }),
+            React.createElement(StepperActionsStatusText, { statusText: statusText })),
+        React.createElement(commonUi.Box, { className: classes.inlineEndActions },
+            actions &&
+                actions.map(function (action, i) { return (React.createElement(Button, tslib.__assign({ key: "custom-action-" + stepCursor + "-" + i, variant: "ghost", onClick: function (event) { return action.onClick(event, callbackArgs); } }, action.props), action.text)); }),
+            React.createElement(StepperActionsCancelButton, { setStepCursor: setStepCursor, stepCursor: stepCursor, cancelButtonText: cancelButtonText, cancelButtonProps: cancelButtonProps, handleCancelClick: handleCancelClick, displayCancelButton: displayCancelButton }),
+            React.createElement(StepperActionsNextButton, { handleNextClick: handleNextClick, nextButtonProps: nextButtonProps, setStepCursor: setStepCursor, stepCursor: stepCursor, stepCount: stepCount, finishButtonText: finishButtonText, nextButtonText: nextButtonText }))));
 };
 
-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);
-    }
-};
-var useFullScreenStepperProgressStyles = 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,
-    },
+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);
+    }
+};
+var useFullScreenStepperProgressStyles = 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,
+    },
 }); });
 
-var FullScreenStepperProgress = function (props) {
-    var classes = useFullScreenStepperProgressStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classes.track },
-        React__default['default'].createElement(core.Box, { className: classes.progress })));
+var FullScreenStepperProgress = function (props) {
+    var classes = useFullScreenStepperProgressStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.track },
+        React.createElement(commonUi.Box, { className: classes.progress })));
 };
 
-var useFullScreenStepperHeaderStyles = 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,
-        },
-    });
+var useFullScreenStepperHeaderStyles = 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,
+        },
+    });
 });
 
-var FullScreenStepperHeader = function (props) {
-    var stepCount = props.stepCount, stepCursor = props.stepCursor, step = props.step, onClose = props.onClose;
-    var classes = useFullScreenStepperHeaderStyles(props);
-    return (React__default['default'].createElement(core.Box, { className: classes.root },
-        React__default['default'].createElement(Typography, { variant: "h6" }, step.title),
-        React__default['default'].createElement(Typography, null,
-            stepCursor,
-            " of ",
-            stepCount),
-        React__default['default'].createElement(IconButton, { className: classes.closeButton, onClick: onClose },
-            React__default['default'].createElement(Icon, { icon: SvgX })),
-        React__default['default'].createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
+var FullScreenStepperHeader = function (props) {
+    var stepCount = props.stepCount, stepCursor = props.stepCursor, step = props.step, onClose = props.onClose;
+    var classes = useFullScreenStepperHeaderStyles(props);
+    return (React.createElement(commonUi.Box, { className: classes.root },
+        React.createElement(commonUi.Typography, { variant: "h6" }, step.title),
+        React.createElement(commonUi.Typography, null,
+            stepCursor,
+            " of ",
+            stepCount),
+        React.createElement(commonUi.IconButton, { className: classes.closeButton, onClick: onClose },
+            React.createElement(commonUi.Icon, { icon: webIcons.X })),
+        React.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
 };
 
 var FullScreenStepperContext = React.createContext({});
 
-/**
- * TODO
- * - i18n?
- * - loading?
- */
-var FullScreenStepper = function (props) {
-    var children = props.children, _a = props.context, context = _a === void 0 ? {} : _a, _b = props.defaultStepCursor, defaultStepCursor = _b === void 0 ? 1 : _b, _c = props.displayActionBar, displayActionBar = _c === void 0 ? true : _c, _d = props.displayCancelButton, displayCancelButton = _d === void 0 ? true : _d, _e = props.displayPreviousButton, displayPreviousButton = _e === void 0 ? true : _e, _f = props.resetStepCursorOnCancel, resetStepCursorOnCancel = _f === void 0 ? true : _f, _g = props.resetStepCursorOnClose, resetStepCursorOnClose = _g === void 0 ? true : _g, steps = props.steps, onClose = props.onClose, onFinish = props.onFinish, onNext = props.onNext, onCancel = props.onCancel, onPrevious = props.onPrevious, DialogProps = __rest$1(props, ["children", "context", "defaultStepCursor", "displayActionBar", "displayCancelButton", "displayPreviousButton", "resetStepCursorOnCancel", "resetStepCursorOnClose", "steps", "onClose", "onFinish", "onNext", "onCancel", "onPrevious"]);
-    var _h = React.useState(defaultStepCursor), stepCursor = _h[0], setStepCursor = _h[1];
-    var stepCount = steps.length;
-    var stepIndex = stepCursor - 1;
-    var step = steps[stepIndex];
-    var _j = step.displayActionBar, displayStepActionBar = _j === void 0 ? true : _j;
-    var isFinalStep = stepCursor / stepCount === 1;
-    var callbackArgs = { setStepCursor: setStepCursor, step: step, stepCount: stepCount, stepIndex: stepIndex, steps: steps };
-    var mergedContext = __assign$1(__assign$1({}, context), callbackArgs);
-    var resetStepCursor = function () { return setTimeout(function () { return setStepCursor(1); }, 600); };
-    var handleClose = function () {
-        if (typeof onClose === 'function') {
-            onClose(callbackArgs);
-        }
-        if (resetStepCursorOnClose) {
-            resetStepCursor();
-        }
-    };
-    var handleNextClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!isFinalStep) return [3 /*break*/, 3];
-                    if (!(typeof onFinish === 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onFinish(callbackArgs)];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    if (typeof onClose === 'function') {
-                        onClose(callbackArgs);
-                    }
-                    resetStepCursor();
-                    return [3 /*break*/, 6];
-                case 3:
-                    if (!(typeof onNext === 'function')) return [3 /*break*/, 5];
-                    return [4 /*yield*/, onNext(callbackArgs)];
-                case 4:
-                    _a.sent();
-                    _a.label = 5;
-                case 5:
-                    setStepCursor(stepCursor + 1);
-                    _a.label = 6;
-                case 6: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handlePreviousClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(typeof onPrevious === 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onPrevious(callbackArgs)];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    setStepCursor(stepCursor - 1);
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleCancelClick = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!(typeof onCancel === 'function')) return [3 /*break*/, 2];
-                    return [4 /*yield*/, onCancel(callbackArgs)];
-                case 1:
-                    _a.sent();
-                    _a.label = 2;
-                case 2:
-                    if (resetStepCursorOnCancel) {
-                        resetStepCursor();
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var content = React__default['default'].Children.toArray(children).find(function (child) { return React__default['default'].isValidElement(child) && child.props.name === step.name; });
-    return (React__default['default'].createElement(Dialog__default['default'], __assign$1({ fullScreen: true }, DialogProps),
-        React__default['default'].createElement(FullScreenStepperContext.Provider, { value: mergedContext },
-            React__default['default'].createElement(Box__default['default'], { display: "flex", flexDirection: "column", flexGrow: 1 },
-                React__default['default'].createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
-                React__default['default'].createElement(Box__default['default'], { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
-                displayActionBar && displayStepActionBar && (React__default['default'].createElement(FullScreenStepperActions, __assign$1({}, step.actionBar, { callbackArgs: callbackArgs, displayCancelButton: displayCancelButton, displayPreviousButton: displayPreviousButton, stepCount: stepCount, stepCursor: stepCursor, setStepCursor: setStepCursor, handleCancelClick: handleCancelClick, handleNextClick: handleNextClick, handlePreviousClick: handlePreviousClick })))))));
-};
+/**
+ * TODO
+ * - i18n?
+ * - loading?
+ */
+var FullScreenStepper = function (props) {
+    var children = props.children, _a = props.context, context = _a === void 0 ? {} : _a, _b = props.defaultStepCursor, defaultStepCursor = _b === void 0 ? 1 : _b, _c = props.displayActionBar, displayActionBar = _c === void 0 ? true : _c, _d = props.displayCancelButton, displayCancelButton = _d === void 0 ? true : _d, _e = props.displayPreviousButton, displayPreviousButton = _e === void 0 ? true : _e, _f = props.resetStepCursorOnCancel, resetStepCursorOnCancel = _f === void 0 ? true : _f, _g = props.resetStepCursorOnClose, resetStepCursorOnClose = _g === void 0 ? true : _g, steps = props.steps, onClose = props.onClose, onFinish = props.onFinish, onNext = props.onNext, onCancel = props.onCancel, onPrevious = props.onPrevious, DialogProps = tslib.__rest(props, ["children", "context", "defaultStepCursor", "displayActionBar", "displayCancelButton", "displayPreviousButton", "resetStepCursorOnCancel", "resetStepCursorOnClose", "steps", "onClose", "onFinish", "onNext", "onCancel", "onPrevious"]);
+    var _h = React.useState(defaultStepCursor), stepCursor = _h[0], setStepCursor = _h[1];
+    var stepCount = steps.length;
+    var stepIndex = stepCursor - 1;
+    var step = steps[stepIndex];
+    var _j = step.displayActionBar, displayStepActionBar = _j === void 0 ? true : _j;
+    var isFinalStep = stepCursor / stepCount === 1;
+    var callbackArgs = { setStepCursor: setStepCursor, step: step, stepCount: stepCount, stepIndex: stepIndex, steps: steps };
+    var mergedContext = tslib.__assign(tslib.__assign({}, context), callbackArgs);
+    var resetStepCursor = function () { return setTimeout(function () { return setStepCursor(1); }, 600); };
+    var handleClose = function () {
+        if (typeof onClose === 'function') {
+            onClose(callbackArgs);
+        }
+        if (resetStepCursorOnClose) {
+            resetStepCursor();
+        }
+    };
+    var handleNextClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isFinalStep) return [3 /*break*/, 3];
+                    if (!(typeof onFinish === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onFinish(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    if (typeof onClose === 'function') {
+                        onClose(callbackArgs);
+                    }
+                    resetStepCursor();
+                    return [3 /*break*/, 6];
+                case 3:
+                    if (!(typeof onNext === 'function')) return [3 /*break*/, 5];
+                    return [4 /*yield*/, onNext(callbackArgs)];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5:
+                    setStepCursor(stepCursor + 1);
+                    _a.label = 6;
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handlePreviousClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof onPrevious === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onPrevious(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    setStepCursor(stepCursor - 1);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleCancelClick = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
+        return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(typeof onCancel === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, onCancel(callbackArgs)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2:
+                    if (resetStepCursorOnCancel) {
+                        resetStepCursor();
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var content = React.Children.toArray(children).find(function (child) { return React.isValidElement(child) && child.props.name === step.name; });
+    return (React.createElement(Dialog, tslib.__assign({ fullScreen: true }, DialogProps),
+        React.createElement(FullScreenStepperContext.Provider, { value: mergedContext },
+            React.createElement(Box, { display: "flex", flexDirection: "column", flexGrow: 1 },
+                React.createElement(FullScreenStepperHeader, { stepCount: stepCount, stepCursor: stepCursor, onClose: handleClose, step: step }),
+                React.createElement(Box, { display: "flex", mx: 6, flexGrow: 1, alignItems: "center", flexDirection: "column" }, content),
+                displayActionBar && displayStepActionBar && (React.createElement(FullScreenStepperActions, tslib.__assign({}, step.actionBar, { callbackArgs: callbackArgs, displayCancelButton: displayCancelButton, displayPreviousButton: displayPreviousButton, stepCount: stepCount, stepCursor: stepCursor, setStepCursor: setStepCursor, handleCancelClick: handleCancelClick, handleNextClick: handleNextClick, handlePreviousClick: handlePreviousClick })))))));
+};
 FullScreenStepper.displayName = 'FullScreenStepper';
 
-var FullScreenStepperContent = function (props) {
-    props.name; var boxProps = __rest$1(props, ["name"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ py: 8 }, boxProps), props.children));
+var FullScreenStepperContent = function (props) {
+    props.name; var boxProps = tslib.__rest(props, ["name"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ py: 8 }, boxProps), props.children));
 };
 
-var useSelectableCardStyles = 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',
-        },
-    };
+var useSelectableCardStyles = 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',
+        },
+    };
 });
 
-var SelectableCard = function (props) {
-    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest$1(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
-    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
-    var classes = useSelectableCardStyles(__assign$1(__assign$1({}, props), { selected: selected }));
-    var handleClick = function () {
-        onClick(value);
-    };
-    return (React__default['default'].createElement(Card__default['default'], __assign$1({ classes: { root: classes.root } }, muiProps),
-        React__default['default'].createElement(CardActionArea__default['default'], __assign$1({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
-            React__default['default'].createElement(Icon, { className: classes.icon, icon: selected ? SvgCheckCircle : SvgCircle, size: "medium" }),
-            React__default['default'].createElement(CardContent__default['default'], { classes: { root: classes.cardContent } }, children))));
-};
+var SelectableCard = function (props) {
+    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = tslib.__rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
+    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
+    var classes = useSelectableCardStyles(tslib.__assign(tslib.__assign({}, props), { selected: selected }));
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root } }, muiProps),
+        React.createElement(commonUi.CardActionArea, tslib.__assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+            React.createElement(commonUi.Icon, { className: classes.icon, icon: selected ? webIcons.CheckCircle : webIcons.Circle, size: "medium" }),
+            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children))));
+};
 SelectableCard.displayName = 'SelectableCard';
 
-var useToastStyles = 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',
-        },
-    },
+var useToastStyles = 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',
+        },
+    },
 }); });
 
-var Toast = function (props) {
-    var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = __rest$1(props, ["children", "AlertProps", "severity"]);
-    var classes = useToastStyles(props);
-    return (React__default['default'].createElement(MuiSnackbar__default['default'], __assign$1({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
-        React__default['default'].createElement(Alert, __assign$1({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
-};
-Toast.defaultProps = {
-    AlertProps: {},
-    autoHideDuration: 5000,
-};
+var Toast = function (props) {
+    var children = props.children, AlertProps = props.AlertProps, severity = props.severity, muiProps = tslib.__rest(props, ["children", "AlertProps", "severity"]);
+    var classes = useToastStyles(props);
+    return (React.createElement(MuiSnackbar, tslib.__assign({ ClickAwayListenerProps: { mouseEvent: false } }, muiProps),
+        React.createElement(Alert, tslib.__assign({ className: classes.root, action: null, severity: severity }, AlertProps), children)));
+};
+Toast.defaultProps = {
+    AlertProps: {},
+    autoHideDuration: 5000,
+};
 Toast.displayName = 'Toast';
 
-var useStyles$3 = core.makeStyles(function (_a) {
-    var palette = _a.palette;
-    return ({
-        root: {
-            background: palette.grey['100'],
-        },
-    });
-});
-var DialogActions = function (props) {
-    var classes = useStyles$3(props);
-    return React__default['default'].createElement(CommonDialogActions__default['default'], __assign$1({ classes: classes }, props));
+var useStyles$3 = core.makeStyles(function (_a) {
+    var palette = _a.palette;
+    return ({
+        root: {
+            background: palette.grey['100'],
+        },
+    });
+});
+var DialogActions = function (props) {
+    var classes = useStyles$3(props);
+    return React.createElement(commonUi.DialogActions, tslib.__assign({ classes: classes }, props));
 };
 
-var Page = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ marginTop: 8, display: "flex", alignItems: "center", flexDirection: "column" }, restProps), children));
+var Page = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ marginTop: 8, display: "flex", alignItems: "center", flexDirection: "column" }, restProps), children));
 };
 
-var PageBody = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
+var PageBody = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
 };
 
-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 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)));
-});
+var PageSection = React.forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = tslib.__rest(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React.createElement(commonUi.Card, tslib.__assign({ classes: { root: classes.root }, ref: ref }, restProps),
+        React.createElement(commonUi.CardContent, { classes: { root: classes.cardContent } }, children)));
+});
 PageSection.displayName = 'PageSection';
 
-var PageSections = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
+var PageSections = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
 };
 
-var PageSectionHead = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    var theme = core.useTheme();
-    return (React__default['default'].createElement(core.Box, __assign$1({ fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between" }, restProps), children));
+var PageSectionHead = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var theme = core.useTheme();
+    return (React.createElement(commonUi.Box, tslib.__assign({ fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between" }, restProps), children));
 };
 
-var useStyles$2 = core.makeStyles(function () { return ({
-    gutterBottom: {
-        marginBottom: '1em',
-    },
+var useStyles$2 = core.makeStyles(function () { return ({
+    gutterBottom: {
+        marginBottom: '1em',
+    },
 }); });
 
-var PageSectionTitle = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    var classes = useStyles$2();
-    return (React__default['default'].createElement(Typography, __assign$1({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
+var PageSectionTitle = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    var classes = useStyles$2();
+    return (React.createElement(commonUi.Typography, tslib.__assign({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
 };
 
-var SettingsIndexCardGroup = function (props) {
-    var children = props.children, restProps = __rest$1(props, ["children"]);
-    return (React__default['default'].createElement(core.Box, __assign$1({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
+var SettingsIndexCardGroup = function (props) {
+    var children = props.children, restProps = tslib.__rest(props, ["children"]);
+    return (React.createElement(commonUi.Box, tslib.__assign({ display: "grid", gridGap: 16, gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))" }, restProps), children));
 };
 
-var useSettingsIndexCardStyles = styles.makeStyles(function (theme) { return ({
-    cardRoot: {
-        border: "1px solid " + theme.palette.grey[300],
-        alignSelf: 'stretch',
-        flexGrow: 1,
-        '&:hover': {
-            backgroundColor: '#52B7FF1A',
-        },
-    },
-    cardContentRoot: {
-        padding: theme.spacing(4),
-        '&:last-child': {
-            paddingBottom: theme.spacing(4),
-        },
-    },
+var 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))))));
-});
+// eslint-disable-next-line react/display-name -- false positive
+var SettingsIndexCard = React.forwardRef(function (props, ref) {
+    var title = props.title, description = props.description, Icon = props.Icon, onClick = props.onClick, statusLabel = props.statusLabel, restProps = tslib.__rest(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.createElement(commonUi.ButtonBase, tslib.__assign({ onClick: onClick, ref: ref }, restProps),
+        React.createElement(commonUi.Card, { classes: { root: classes.cardRoot } },
+            React.createElement(commonUi.CardContent, { classes: { root: classes.cardContentRoot } },
+                React.createElement(commonUi.Box, { fontSize: "32px", display: "flex", justifyContent: 'space-between', alignItems: "center", paddingBottom: 2 },
+                    React.createElement(commonUi.Icon, { icon: Icon || webIcons.Help, size: "inherit" }),
+                    showStatusLabel && (React.createElement(commonUi.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.createElement(commonUi.Typography, { align: "left", variant: "h6", gutterBottom: true }, title),
+                description && (React.createElement(commonUi.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));
-
-var classNames = classnames.exports;
-
-var useStyles$1 = core.makeStyles(function (theme) { return ({
-    root: {
-        '&$uncontained > li > *:first-child': {
-            background: theme.palette.background.paper,
-            borderRadius: theme.spacing(1),
-        },
-        '& > li > *:first-child': {
-            borderBottom: "1px solid " + theme.palette.grey[300],
-        },
-        '& > li:last-child > *:first-child': {
-            borderBottom: 'none',
-        },
-    },
-    uncontained: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16,
-    },
+var useStyles$1 = core.makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
+        },
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
+        },
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
+        },
+    },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
 }); });
 
-var List = function (props) {
-    var _a;
-    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = __rest$1(props, ["children", "uncontained", "className"]);
-    var classes = useStyles$1(props);
-    return (React__default['default'].createElement(core.List, __assign$1({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = tslib.__rest(props, ["children", "uncontained", "className"]);
+    var classes = useStyles$1(props);
+    return (React.createElement(core.List, tslib.__assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
 };
 
-var useStyles = core.makeStyles(function (theme) { return ({
-    chipRoot: {
-        marginRight: theme.spacing(4),
-        cursor: 'pointer',
-    },
-    body: {
-        paddingTop: '4px',
-    },
-    listItemText: {
-        marginRight: '32px',
-    },
-}); });
-/**
- * TODO
- * - clean props util
- * - Avatar size and shape
- */
-var StandardListItem = function (props) {
-    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = __rest$1(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
-    var classes = useStyles(props);
-    return (React__default['default'].createElement(core.ListItem, __assign$1({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
-        image && (React__default['default'].createElement(core.ListItemAvatar, null,
-            React__default['default'].createElement(Avatar, { src: image.src, alt: image.alt }, image.Icon && React__default['default'].createElement(Icon, { icon: image.Icon })))),
-        React__default['default'].createElement(core.ListItemText, { disableTypography: true, className: classes.listItemText },
-            React__default['default'].createElement(Typography, { variant: "h6" }, title),
-            meta && (React__default['default'].createElement(Typography, { variant: "body2", color: "secondary.light" }, meta)),
-            body && (React__default['default'].createElement(Typography, { variant: "body2", color: "grey.700", className: classes.body }, body))),
-        status && (React__default['default'].createElement(core.Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React__default['default'].createElement(Icon, { icon: status.Icon }), label: status.text })),
-        secondaryAction && (React__default['default'].createElement(core.ListItemSecondaryAction, null,
-            React__default['default'].createElement(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
-                React__default['default'].createElement(Icon, { icon: secondaryAction.Icon }))))));
+var useStyles = core.makeStyles(function (theme) { return ({
+    chipRoot: {
+        marginRight: theme.spacing(4),
+        cursor: 'pointer',
+    },
+    body: {
+        paddingTop: '4px',
+    },
+    listItemText: {
+        marginRight: '32px',
+    },
+}); });
+/**
+ * TODO
+ * - clean props util
+ * - Avatar size and shape
+ */
+var StandardListItem = function (props) {
+    props.itemId; var title = props.title, meta = props.meta, body = props.body, image = props.image, status = props.status, secondaryAction = props.secondaryAction, onClick = props.onClick, restProps = tslib.__rest(props, ["itemId", "title", "meta", "body", "image", "status", "secondaryAction", "onClick"]);
+    var classes = useStyles(props);
+    return (React.createElement(core.ListItem, tslib.__assign({ button: Boolean(onClick), onClick: function (e) { return onClick && onClick(e, props); } }, restProps),
+        image && (React.createElement(core.ListItemAvatar, null,
+            React.createElement(commonUi.Avatar, { src: image.src, alt: image.alt }, image.Icon && React.createElement(commonUi.Icon, { icon: image.Icon })))),
+        React.createElement(core.ListItemText, { disableTypography: true, className: classes.listItemText },
+            React.createElement(commonUi.Typography, { variant: "h6" }, title),
+            meta && (React.createElement(commonUi.Typography, { variant: "body2", color: "secondary.light" }, meta)),
+            body && (React.createElement(commonUi.Typography, { variant: "body2", color: "grey.700", className: classes.body }, body))),
+        status && (React.createElement(core.Chip, { classes: { root: classes.chipRoot }, icon: status.Icon && React.createElement(commonUi.Icon, { icon: status.Icon }), label: status.text })),
+        secondaryAction && (React.createElement(core.ListItemSecondaryAction, null,
+            React.createElement(core.IconButton, { style: { color: 'black' }, "aria-label": secondaryAction['aria-label'], onClick: function (e) { return secondaryAction.onClick(e, props); } },
+                React.createElement(commonUi.Icon, { icon: secondaryAction.Icon }))))));
 };
 
 var useFullScreenStepperContext = function () { return React.useContext(FullScreenStepperContext); };
 
-/**
- * Manages state for SelectableCards.
- * @param {Config} config - Configures the hook behavior.
- * @param {string|string[]} [config.defaultSelected = []] - Initializes state with the provided value.
- * @param {string} [config.selectionMode = 'single'] - Determines selection behavior. 'single' provides radio style
- * selection. 'multi' provides checkbox style selection.
- * @param {number} [config.maxSelectionCount] - A number to determine the maximum amount of cards to be selected.
- * @returns {HookResult} An object with click handler and current state. Spread into a SelectableCard to use.
- */
-var useSelectableCard = function (config) {
-    if (config === void 0) { config = {}; }
-    var _a = config.defaultSelected, defaultSelected = _a === void 0 ? [] : _a, _b = config.selectionMode, selectionMode = _b === void 0 ? 'single' : _b, maxSelectionCount = config.maxSelectionCount;
-    var initialState = Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected];
-    var _c = React.useState(initialState), selection = _c[0], setSelection = _c[1];
-    var onClick;
-    var handleSingleSelectionMode = function (value) {
-        setSelection([value]);
-    };
-    var handleMultiSelectionMode = function (value) {
-        var newSelection = __spreadArray([], selection);
-        if (!selection.includes(value)) {
-            if (selection.length === maxSelectionCount) {
-                newSelection.shift();
-            }
-            newSelection = __spreadArray(__spreadArray([], newSelection), [value]);
-            setSelection(newSelection);
-        }
-        else {
-            newSelection = newSelection.filter(function (selected) { return selected !== value; });
-            setSelection(newSelection);
-        }
-    };
-    switch (selectionMode) {
-        case 'single':
-            onClick = handleSingleSelectionMode;
-            break;
-        case 'multi':
-            onClick = handleMultiSelectionMode;
-            break;
-        default:
-            onClick = handleSingleSelectionMode;
-    }
-    return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
+/**
+ * Manages state for SelectableCards.
+ * @param {Config} config - Configures the hook behavior.
+ * @param {string|string[]} [config.defaultSelected = []] - Initializes state with the provided value.
+ * @param {string} [config.selectionMode = 'single'] - Determines selection behavior. 'single' provides radio style
+ * selection. 'multi' provides checkbox style selection.
+ * @param {number} [config.maxSelectionCount] - A number to determine the maximum amount of cards to be selected.
+ * @returns {HookResult} An object with click handler and current state. Spread into a SelectableCard to use.
+ */
+var useSelectableCard = function (config) {
+    if (config === void 0) { config = {}; }
+    var _a = config.defaultSelected, defaultSelected = _a === void 0 ? [] : _a, _b = config.selectionMode, selectionMode = _b === void 0 ? 'single' : _b, maxSelectionCount = config.maxSelectionCount;
+    var initialState = Array.isArray(defaultSelected) ? defaultSelected : [defaultSelected];
+    var _c = React.useState(initialState), selection = _c[0], setSelection = _c[1];
+    var onClick;
+    var handleSingleSelectionMode = function (value) {
+        setSelection([value]);
+    };
+    var handleMultiSelectionMode = function (value) {
+        var newSelection = tslib.__spreadArray([], selection);
+        if (!selection.includes(value)) {
+            if (selection.length === maxSelectionCount) {
+                newSelection.shift();
+            }
+            newSelection = tslib.__spreadArray(tslib.__spreadArray([], newSelection), [value]);
+            setSelection(newSelection);
+        }
+        else {
+            newSelection = newSelection.filter(function (selected) { return selected !== value; });
+            setSelection(newSelection);
+        }
+    };
+    switch (selectionMode) {
+        case 'single':
+            onClick = handleSingleSelectionMode;
+            break;
+        case 'multi':
+            onClick = handleMultiSelectionMode;
+            break;
+        default:
+            onClick = handleSingleSelectionMode;
+    }
+    return { card: { onClick: onClick, selection: selection }, selection: selection, setSelection: setSelection };
 };
 
-var useDialog = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var toggle = function () { return setOpen(function (current) { return !current; }); };
-    var close = function () { return setOpen(false); };
-    var triggerProps = { onClick: toggle };
-    var dialogProps = { open: open, onClose: close };
-    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
+var useDialog = function () {
+    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
+    var toggle = function () { return setOpen(function (current) { return !current; }); };
+    var close = function () { return setOpen(false); };
+    var triggerProps = { onClick: toggle };
+    var dialogProps = { open: open, onClose: close };
+    return [triggerProps, dialogProps, { open: open, setOpen: setOpen, toggle: toggle, close: close }];
 };
 
-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 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 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 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',
-    },
+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',
-        } }),
+/**
+ * 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: tslib.__assign(tslib.__assign({}, 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 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 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);
-var adminLight = createTheme__default['default'](adminLightOptions);
+var adminLightOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Light', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminLightPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminLightPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+var adminLight = createTheme(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);
-var adminDark = createTheme__default['default'](adminDarkOptions);
+var adminDarkOptions = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({ themeName: 'Admin Dark', palette: tslib.__assign(tslib.__assign(tslib.__assign({}, basePalette), adminDarkPalette), dataVizPalette), breakpoints: adminThemeBreakpoints, typography: adminThemeTypography, overrides: overrides }, adminDarkPlaceholder), adminThemeZIndex), adminThemeStatus), adminThemeDefaultProps);
+var adminDark = createTheme(adminDarkOptions);
 
-Object.defineProperty(exports, 'CircularProgress', {
+Object.defineProperty(exports, "Dialog", {
     enumerable: true,
-    get: function () {
-        return core.CircularProgress;
-    }
+    get: function () { return commonUi.Dialog; }
 });
-Object.defineProperty(exports, 'MenuItem', {
+Object.defineProperty(exports, "DialogContent", {
     enumerable: true,
-    get: function () {
-        return core.MenuItem;
-    }
+    get: function () { return commonUi.DialogContent; }
 });
-Object.defineProperty(exports, 'Switch', {
+Object.defineProperty(exports, "DialogTitle", {
     enumerable: true,
-    get: function () {
-        return core.Switch;
-    }
+    get: function () { return commonUi.DialogTitle; }
 });
-Object.defineProperty(exports, 'TextField', {
+Object.defineProperty(exports, "CircularProgress", {
     enumerable: true,
-    get: function () {
-        return core.TextField;
-    }
+    get: function () { return core.CircularProgress; }
 });
-Object.defineProperty(exports, 'Dialog', {
+Object.defineProperty(exports, "MenuItem", {
     enumerable: true,
-    get: function () {
-        return Dialog__default['default'];
-    }
+    get: function () { return core.MenuItem; }
 });
-Object.defineProperty(exports, 'DialogContent', {
+Object.defineProperty(exports, "Switch", {
     enumerable: true,
-    get: function () {
-        return DialogContent__default['default'];
-    }
+    get: function () { return core.Switch; }
 });
-Object.defineProperty(exports, 'DialogTitle', {
+Object.defineProperty(exports, "TextField", {
     enumerable: true,
-    get: function () {
-        return DialogTitle__default['default'];
-    }
+    get: function () { return core.TextField; }
 });
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;