@superdispatch/ui 0.21.5-alpha.4 → 0.21.8

package/dist-web/index.js

@@ -1,42 +1,44 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { MoreHoriz, Close, Warning, CheckCircle } from '@mui/icons-material';
-import { CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, styled as styled$1, Avatar, ButtonBase, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, CardContent, Card, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, autocompleteClasses, buttonClasses, checkboxClasses, chipClasses, dialogClasses, iconButtonClasses, listItemClasses, menuItemClasses, paginationItemClasses, radioClasses, switchClasses, formLabelClasses, inputBaseClasses, outlinedInputClasses, tooltipClasses, ThemeProvider as ThemeProvider$1, CssBaseline, createTheme } from '@mui/material';
+import { Button as Button$1, CircularProgress, ButtonGroup, Popover, MenuList, Toolbar, Grid, MenuItem, Typography, Menu, Divider, ButtonBase, Avatar, FormControl, FormControlLabel, Checkbox, FormHelperText, FormLabel, FormGroup, useMediaQuery, Tooltip, SvgIcon, AppBar, List, Card, CardContent, TextField, Radio, RadioGroup, SnackbarContent as SnackbarContent$1, IconButton, Portal, Snackbar as Snackbar$1, Slide, CssBaseline, createTheme, createGenerateClassName } from '@material-ui/core';
+import { MoreHoriz, Close, Warning, CheckCircle } from '@material-ui/icons';
+import { makeStyles, StylesProvider, ThemeProvider as ThemeProvider$1 } from '@material-ui/styles';
 import { forwardRef, useState, useRef, useLayoutEffect, cloneElement, useMemo, useContext, createContext, Children, useCallback, useEffect } from 'react';
-import { LoadingButton, loadingButtonClasses } from '@mui/lab';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled, { css } from 'styled-components';
+import styled, { css, ThemeProvider as ThemeProvider$2 } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
-import { makeStyles, StylesProvider, createGenerateClassName } from '@mui/styles';
+import clsx from 'clsx';
 import flattenChildren from 'react-keyed-flatten-children';
 import NumberFormat from 'react-number-format';
-import clsx from 'clsx';
-import { createBreakpoints } from '@mui/system';
+import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
 
-var _excluded = ["size", "children", "isActive", "isLoading", "color"];
+var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     size,
     children,
+    disabled,
     isActive,
     isLoading,
     color = 'primary'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/jsx(LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(Button$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     size: size,
     "data-color": color,
-    loading: isLoading,
+    "aria-busy": isLoading,
     "aria-expanded": isActive,
-    color: color === 'primary' ? color : 'inherit',
-    loadingIndicator: /*#__PURE__*/jsx(CircularProgress, {
-      size: "1em",
-      color: "inherit"
-    }),
-    children: children
+    disabled: disabled || isLoading,
+    color: color === 'primary' ? color : 'default',
+    children: !isLoading ? children : /*#__PURE__*/jsxs(Fragment, {
+      children: [children, /*#__PURE__*/jsx(CircularProgress, {
+        size: "1em",
+        color: "inherit"
+      })]
+    })
   }));
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
@@ -163,12 +165,12 @@ function useResizeObserver(node, observer) {
 }
 
 var _excluded$2 = ["items"];
-var GridActionsItem = /*#__PURE__*/styled$1(Grid, {
-  name: 'SD-AdaptiveToolbar'
-})(() => {
-  return {
+var useStyles = /*#__PURE__*/makeStyles({
+  actions: {
     overflow: 'hidden'
-  };
+  }
+}, {
+  name: 'SD-AdaptiveToolbar'
 });
 var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -176,6 +178,7 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
+  var styles = useStyles();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
@@ -217,8 +220,9 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
       container: true,
       spacing: 1,
       ref: setRootNode,
-      children: [/*#__PURE__*/jsx(GridActionsItem, {
+      children: [/*#__PURE__*/jsx(Grid, {
         item: true,
+        className: styles.actions,
         children: /*#__PURE__*/jsx(Grid, {
           container: true,
           spacing: 1,
@@ -240,8 +244,6 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
               }, dropdownItem.key))
             })) : /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
               type: "button",
-              color: "primary",
-              variant: "outlined",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
               children: /*#__PURE__*/jsx(Typography, {
@@ -258,7 +260,6 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         component: "div",
         children: [/*#__PURE__*/jsx(Button, {
           type: "button",
-          variant: "outlined",
           onClick: _ref2 => {
             var {
               currentTarget
@@ -324,7 +325,7 @@ function assignRef(ref, value) {
   }
 }
 
-var useStyles = /*#__PURE__*/makeStyles({
+var useStyles$1 = /*#__PURE__*/makeStyles({
   root: {
     overflow: 'hidden',
     height: '100%'
@@ -346,7 +347,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     renderItem = item => item.label,
     renderMenuItem = item => item.label
   } = _ref;
-  var styles = useStyles();
+  var styles = useStyles$1();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
@@ -509,81 +510,66 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
 
-var _excluded$3 = ["size", "icon", "isLoading", "disabled", "avatarRef", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"];
-var Overlay = /*#__PURE__*/styled$1('div')(_ref => {
-  var {
-    theme
-  } = _ref;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    position: 'absolute',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '50%',
-    backgroundColor: Color.Transparent,
-    transition: theme.transitions.create('background-color'),
-    '& > svg': {
-      opacity: 0,
-      color: Color.White,
-      transition: theme.transitions.create('opacity'),
-      fontSize: theme.spacing(3),
-      [sm]: {
-        fontSize: theme.spacing(2)
-      }
-    }
-  };
-});
-var StyledProgress = /*#__PURE__*/styled$1(CircularProgress)(props => {
-  var {
-    theme
-  } = props;
-  var sm = theme.breakpoints.up('sm');
-  return {
-    top: 0,
-    left: 0,
-    position: 'absolute',
-    fontSize: theme.spacing(5),
-    [sm]: {
-      fontSize: theme.spacing(4)
-    }
-  };
-}); // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-var StyledButton = /*#__PURE__*/styled$1(ButtonBase, {
-  name: 'SD-AvatarButton'
-})(_ref2 => {
-  var {
-    theme
-  } = _ref2;
+var _excluded$3 = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef", "className", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"],
+    _excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
+var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
   var sm = theme.breakpoints.up('sm');
   return {
-    borderRadius: '50%',
-    '&[disabled], &[aria-busy="true"]': {
-      ["& > ".concat(Overlay.toString())]: {
-        backgroundColor: Color.White50
+    button: {
+      borderRadius: '50%',
+      '&[disabled], &[aria-busy="true"]': {
+        '& > $overlay': {
+          backgroundColor: Color.White50
+        }
+      },
+      '&:not([disabled])[aria-busy="false"]': {
+        '&:hover, &:focus': {
+          '&$withIcon > $overlay': {
+            backgroundColor: Color.Black50,
+            '& > svg': {
+              opacity: 1
+            }
+          },
+          '&:not($withIcon) > $overlay': {
+            backgroundColor: Color.Black20
+          }
+        }
       }
     },
-    '&:not([disabled])[aria-busy="false"]': {
-      '&:hover, &:focus': {
-        ["&[data-with-icon=\"true\"] > ".concat(Overlay.toString())]: {
-          backgroundColor: Color.Black50,
-          '& > svg': {
-            opacity: 1
-          }
-        },
-        ["&:not([data-with-icon=\"true\"]) > ".concat(Overlay.toString())]: {
-          backgroundColor: Color.Black20
+    overlay: {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      position: 'absolute',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: '50%',
+      backgroundColor: Color.Transparent,
+      transition: theme.transitions.create('background-color'),
+      '& > svg': {
+        opacity: 0,
+        color: Color.White,
+        transition: theme.transitions.create('opacity'),
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2)
         }
       }
     },
-    '&[data-size-large="true"]': {
-      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+    progress: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      fontSize: theme.spacing(5),
+      [sm]: {
+        fontSize: theme.spacing(4)
+      }
+    },
+    withIcon: {},
+    sizeLarge: {
+      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
         width: theme.spacing(7),
         height: theme.spacing(7),
         [sm]: {
@@ -591,8 +577,8 @@ var StyledButton = /*#__PURE__*/styled$1(ButtonBase, {
           height: theme.spacing(8)
         }
       }),
-      ["& > ".concat(Overlay.toString())]: {
-        ["& > ".concat(StyledProgress.toString())]: {
+      '& > $overlay': {
+        '& > $progress': {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -605,16 +591,27 @@ var StyledButton = /*#__PURE__*/styled$1(ButtonBase, {
           }
         }
       }
-    }
+    },
+    root: {},
+    colorDefault: {},
+    circular: {},
+    rounded: {},
+    square: {},
+    img: {},
+    fallback: {}
   };
+}, {
+  name: 'SD-AvatarButton'
 });
-var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     size,
     icon,
     isLoading = false,
+    classes,
     disabled = false,
     avatarRef,
+    className,
     alt,
     imgProps,
     sizes,
@@ -622,18 +619,30 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     srcSet,
     variant,
     children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$3);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  var _useStyles = useStyles$2({
+    classes
+  }),
+      {
+    button: buttonClassName,
+    overlay: overlayClassName,
+    progress: progressClassName,
+    withIcon: withIconClassName,
+    sizeLarge: sizeLargeClassName
+  } = _useStyles,
+      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
 
-  return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    "data-with-icon": !!icon,
-    "data-size-large": size === 'large',
+    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
     children: [/*#__PURE__*/jsx(Avatar, {
       ref: avatarRef,
+      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -641,9 +650,11 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/jsxs(Overlay, {
-      children: [icon, isLoading && /*#__PURE__*/jsx(StyledProgress, {
+    }), /*#__PURE__*/jsxs("div", {
+      className: overlayClassName,
+      children: [icon, isLoading && /*#__PURE__*/jsx(CircularProgress, {
         size: "1em",
+        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]
@@ -652,11 +663,8 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
 var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var StyledButton$1 = /*#__PURE__*/styled$1(ButtonBase)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
+  root: {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -667,74 +675,66 @@ var StyledButton$1 = /*#__PURE__*/styled$1(ButtonBase)(_ref => {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
     minHeight: theme.spacing(13),
-    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
-    '&[data-disabled="true"]': {
-      color: Color.Dark200,
-      borderColor: Color.Silver500,
-      backgroundColor: Color.Silver100
-    },
-    '&[data-primary="true"]': {
-      color: Color.Blue300,
-      borderColor: Color.Silver500,
-      '&:focus': {
-        backgroundColor: Color.Blue50
-      },
-      '&:hover, &:active': {
-        borderColor: Color.Blue300,
-        backgroundColor: Color.Blue50
-      }
-    },
-    '&[data-error="true"]': {
-      color: Color.Red300,
-      borderColor: Color.Red300,
-      backgroundColor: Color.Red50,
-      '&:focus': {
-        backgroundColor: Color.Red75
-      }
-    },
-    '&[data-size="small"]': {
-      minHeight: theme.spacing(6)
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color'])
+  },
+  disabled: {
+    color: Color.Dark200,
+    borderColor: Color.Silver500,
+    backgroundColor: Color.Silver100
+  },
+  error: {
+    color: Color.Red300,
+    borderColor: Color.Red300,
+    backgroundColor: Color.Red50,
+    '&:focus': {
+      backgroundColor: Color.Red75
+    }
+  },
+  primary: {
+    color: Color.Blue300,
+    borderColor: Color.Silver500,
+    '&:focus': {
+      backgroundColor: Color.Blue50
     },
-    '&[data-size="large"]': {
-      minHeight: theme.spacing(17.5)
+    '&:hover, &:active': {
+      borderColor: Color.Blue300,
+      backgroundColor: Color.Blue50
     }
-  };
-});
-var Label = /*#__PURE__*/styled$1(Typography)({
-  display: 'flex',
-  alignItems: 'center'
-});
-var Hint = /*#__PURE__*/styled$1(Typography)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
-    marginTop: theme.spacing(0.5)
-  };
-});
-var Icon = /*#__PURE__*/styled$1('span')(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  return {
+  },
+  sizeSmall: {
+    minHeight: theme.spacing(6)
+  },
+  sizeLarge: {
+    minHeight: theme.spacing(17.5)
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
     display: 'flex',
     '& svg': {
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2.5)
       }
-    },
-    '&[data-placement="start"]': {
-      marginRight: theme.spacing(1),
-      marginLeft: theme.spacing(-0.5)
-    },
-    '&[data-placement="end"]': {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(-0.5)
     }
-  };
+  },
+  startIcon: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(-0.5)
+  },
+  endIcon: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(-0.5)
+  },
+  hint: {
+    marginTop: theme.spacing(0.5)
+  }
+}), {
+  name: 'SD-CardButton'
 });
-var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     hint,
     size,
@@ -745,33 +745,39 @@ var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
     endIcon,
     startIcon,
     disabled
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded$4);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
-  return /*#__PURE__*/jsx(StyledButton$1, _objectSpread(_objectSpread({}, props), {}, {
+  var styles = useStyles$3({
+    classes
+  });
+  return /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    "data-size": size,
-    "data-disabled": !!disabled,
-    "data-error": !disabled && !!error,
-    "data-primary": !disabled && !error,
-    children: error ? /*#__PURE__*/jsx(Label, {
+    className: clsx(styles.root, className, disabled ? styles.disabled : error ? styles.error : styles.primary, {
+      'small': styles.sizeSmall,
+      'large': styles.sizeLarge
+    }[size]),
+    children: error ? /*#__PURE__*/jsx(Typography, {
       variant: "h4",
       color: "inherit",
+      className: styles.label,
       children: error
     }) : /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs(Label, {
+      children: [/*#__PURE__*/jsxs(Typography, {
         variant: "h4",
         color: "inherit",
-        children: [!!startIcon && /*#__PURE__*/jsx(Icon, {
-          "data-placement": "start",
+        className: styles.label,
+        children: [!!startIcon && /*#__PURE__*/jsx("span", {
+          className: clsx(styles.icon, styles.startIcon),
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/jsx(Icon, {
-          "data-placement": "end",
+        }), children, !!endIcon && /*#__PURE__*/jsx("span", {
+          className: clsx(styles.icon, styles.endIcon),
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/jsx(Hint, {
+      }), !!hint && /*#__PURE__*/jsx(Typography, {
         color: "textSecondary",
+        className: styles.hint,
         children: hint
       })]
     })
@@ -1111,52 +1117,48 @@ function VisibilityObserver(_ref2) {
 }
 
 var _excluded$8 = ["title", "enterDelay"],
-    _excluded2 = ["onClick", "children", "disableUnderline", "TooltipProps"];
-var Root = /*#__PURE__*/styled$1(Typography, {
-  name: 'SD-OverflowText',
-  shouldForwardProp: prop => prop !== 'truncated'
-})(_ref => {
-  var {
-    truncated,
-    theme
-  } = _ref;
-  return _objectSpread({
+    _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
+var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
+  root: {
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
-    transition: theme.transitions.create('border')
-  }, truncated && {
-    cursor: 'pointer',
-    borderBottomColor: Color.Silver500
-  });
-});
-var Sential = /*#__PURE__*/styled$1('span', {
-  name: 'SD-OverflowText',
-  slot: 'Sential'
-})({
-  width: 1,
-  height: '100%',
-  display: 'inline-block'
+    transition: theme.transitions.create('border'),
+    '&$truncated': {
+      cursor: 'pointer',
+      borderBottomColor: Color.Silver500
+    }
+  },
+  truncated: {},
+  sentinel: {
+    width: 1,
+    height: '100%',
+    display: 'inline-block'
+  }
+}), {
+  name: 'SD-OverflowText'
 });
-var OverflowText = /*#__PURE__*/forwardRef((_ref2, rootRef) => {
+var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
   var {
     onClick: _onClick,
     children,
+    className,
     disableUnderline,
     TooltipProps: {
       title = children,
       enterDelay = 1000
     } = {}
-  } = _ref2,
-      tooltipProps = _objectWithoutProperties(_ref2.TooltipProps, _excluded$8),
-      props = _objectWithoutProperties(_ref2, _excluded2);
+  } = _ref,
+      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
+      props = _objectWithoutProperties(_ref, _excluded2$1);
 
   var [isOpen, setIsOpen] = useState(false);
+  var styles = useStyles$4();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref3 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref3;
+      } = _ref2;
       var isTooltipEnabled = !!children && visibility === 'invisible';
       return /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         enterDelay: 1000,
@@ -1169,16 +1171,17 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref2, rootRef) => {
         onClose: () => {
           setIsOpen(false);
         },
-        children: /*#__PURE__*/jsxs(Root, _objectSpread(_objectSpread({}, props), {}, {
+        children: /*#__PURE__*/jsxs(Typography, _objectSpread(_objectSpread({}, props), {}, {
           ref: rootRef,
           noWrap: true,
-          truncated: !disableUnderline && visibility === 'invisible',
           onClick: event => {
             setIsOpen(true);
             _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
           },
-          children: [children, !!children && /*#__PURE__*/jsx(Sential, {
-            ref: ref
+          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
+          children: [children, !!children && /*#__PURE__*/jsx("span", {
+            ref: ref,
+            className: styles.sentinel
           })]
         }))
       }));
@@ -1198,18 +1201,29 @@ function useUID(defaultID) {
 }
 
 var _excluded$9 = ["size"];
-var DescriptionListItemRoot = /*#__PURE__*/styled$1('div', {
-  name: 'SD-DescriptionListItem',
-  slot: 'Root'
-})({
-  display: 'flex',
-  alignItems: 'center'
-});
-var DescriptionListItemIcon = /*#__PURE__*/styled$1('div')(_ref => {
-  var {
-    theme
-  } = _ref;
+
+function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
+    '& > $list, & > $item': {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing)
+        }
+      }
+    }
+  };
+}
+
+var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
+  list: sizeVariant(theme, 2, 1),
+  listSmall: sizeVariant(theme, 1, 0.5),
+  listLarge: sizeVariant(theme, 3, 2),
+  item: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
     display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& > .MuiSvgIcon-root': {
@@ -1219,11 +1233,33 @@ var DescriptionListItemIcon = /*#__PURE__*/styled$1('div')(_ref => {
         fontSize: theme.spacing(2)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-DescriptionList'
+}); //
+// DescriptionList
+//
+
+var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    size
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$9);
+
+  var styles = useStyles$5();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    "data-size": size,
+    className: clsx(styles.list, {
+      'small': styles.listSmall,
+      'large': styles.listLarge
+    }[size])
+  }));
 }); //
 // DescriptionListItem
 //
 
+if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
 var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _ref3, _contentTypographyPro, _contentTypographyPro2;
 
@@ -1236,12 +1272,15 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
     contentTypographyProps,
     fallback
   } = _ref2;
+  var styles = useStyles$5();
   var labelID = useUID(labelTypographyProps === null || labelTypographyProps === void 0 ? void 0 : labelTypographyProps.id);
   var shouldRenderFallback = isEmptyReactNode(content);
-  return /*#__PURE__*/jsxs(DescriptionListItemRoot, {
+  return /*#__PURE__*/jsxs("div", {
     ref: ref,
+    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/jsx(DescriptionListItemIcon, {
+    children: [!!icon && /*#__PURE__*/jsx("div", {
+      className: styles.icon,
       children: icon
     }), /*#__PURE__*/jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -1258,72 +1297,26 @@ var DescriptionListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
       })), label != null && ' ', !shouldRenderFallback ? content : fallback]
     }))]
   });
-}); //
-// DescriptionList
-//
-
-if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
-var DescriptionListRoot = /*#__PURE__*/styled$1('div', {
-  name: 'SD-DescriptionList',
-  slot: 'Root'
-})(_ref4 => {
-  var {
-    theme
-  } = _ref4;
-  return _objectSpread(_objectSpread({}, sizeVariant(theme, 2, 1)), {}, {
-    '&[data-size="small"]': sizeVariant(theme, 1, 0.5),
-    '&[data-size="large"]': sizeVariant(theme, 3, 2)
-  });
 });
+if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
-  return {
-    ["& > ".concat(DescriptionListRoot.toString(), ", & > ").concat(DescriptionListItemRoot.toString())]: {
-      '&:not(:last-child)': {
-        paddingBottom: theme.spacing(mobileSpacing),
-        [theme.breakpoints.up('sm')]: {
-          paddingBottom: theme.spacing(desktopSpacing)
-        }
+var _excluded$a = ["children", "className"];
+var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      bottom: 0,
+      top: 'auto',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderBottom: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderTopColor: Color.Transparent
       }
     }
-  };
-}
-
-var DescriptionList = /*#__PURE__*/forwardRef((_ref5, ref) => {
-  var {
-    size
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded$9);
-
-  return /*#__PURE__*/jsx(DescriptionListRoot, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    "data-size": size
-  }));
-});
-if (process.env.NODE_ENV !== "production") DescriptionList.displayName = "DescriptionList";
-
-var _excluded$a = ["children"];
-var StyledAppBar = /*#__PURE__*/styled$1(AppBar)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    bottom: 0,
-    top: 'auto',
-    borderLeft: 'none',
-    borderRight: 'none',
-    borderBottom: 'none',
-    transition: theme.transitions.create(['border-color']),
-    '&[data-sticky="false"]': {
-      borderTopColor: Color.Transparent
-    }
-  };
-});
-var StyledToolbar = /*#__PURE__*/styled$1(Toolbar)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1332,26 +1325,31 @@ var StyledToolbar = /*#__PURE__*/styled$1(Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerActions'
 });
-var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
+var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
-    children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$a);
+    children,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
+  var styles = useStyles$6();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref4 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref4;
+      } = _ref2;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/jsx(StyledToolbar, {
+          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/jsx(Toolbar, {
+            className: styles.toolbar,
             children: children
           })
         })), /*#__PURE__*/jsx("div", {
@@ -1363,20 +1361,33 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var DrawerContent = /*#__PURE__*/styled$1('div', {
-  name: 'SD-DrawerContent'
-})(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+var _excluded$b = ["className"];
+var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
+  root: {
     maxWidth: '100%',
     padding: theme.spacing(2, 3),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(2, 4)
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerContent'
+});
+var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$b);
+
+  var styles = useStyles$7();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: clsx(styles.root, className)
+  }));
 });
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";
+
+var _excluded$c = ["className"];
 
 function listItemMixins(theme, space) {
   return {
@@ -1396,37 +1407,45 @@ function listItemMixins(theme, space) {
   };
 }
 
-var DrawerList = /*#__PURE__*/styled$1(List)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return _objectSpread(_objectSpread({
+var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
+  root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
     [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
-  });
+  })
+}), {
+  name: 'SD-DrawerList'
 });
-
-var _excluded$b = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
-var StyledAppBar$1 = /*#__PURE__*/styled$1(AppBar)(_ref => {
+var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
-    theme
-  } = _ref;
-  return {
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderRight: 'none',
-    transition: theme.transitions.create(['border-color']),
-    '&[data-sticky="false"]': {
-      borderBottomColor: Color.Transparent
-    }
-  };
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$c);
+
+  var styles = useStyles$8();
+  return /*#__PURE__*/jsx(List, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    component: "div",
+    className: clsx(className, styles.root)
+  }));
 });
-var StyledToolbar$1 = /*#__PURE__*/styled$1(Toolbar)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
+if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
+
+var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
+var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderRight: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderBottomColor: Color.Transparent
+      }
+    }
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1435,60 +1454,56 @@ var StyledToolbar$1 = /*#__PURE__*/styled$1(Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
-});
-var StartAction = /*#__PURE__*/styled$1(Grid)(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  return {
+  },
+  startAction: {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  };
-});
-var EndAction = /*#__PURE__*/styled$1(Grid)(_ref4 => {
-  var {
-    theme
-  } = _ref4;
-  return {
+  },
+  endAction: {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerTitle'
 });
-var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
+var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
   var {
     title,
     titleTypographyProps,
     subtitle,
     subtitleTypographyProps,
     startAction,
-    endAction
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded$b);
+    endAction,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
+  var styles = useStyles$9();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref6 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref6;
+      } = _ref2;
       return /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("div", {
           ref: ref
-        }), /*#__PURE__*/jsx(StyledAppBar$1, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/jsx(StyledToolbar$1, {
+          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/jsx(Toolbar, {
+            className: styles.toolbar,
             children: /*#__PURE__*/jsxs(Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/jsx(StartAction, {
+              children: [!!startAction && /*#__PURE__*/jsx(Grid, {
                 item: true,
+                className: styles.startAction,
                 children: startAction
               }), /*#__PURE__*/jsxs(Grid, {
                 item: true,
@@ -1505,8 +1520,9 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/jsx(EndAction, {
+              }), !!endAction && /*#__PURE__*/jsx(Grid, {
                 item: true,
+                className: styles.endAction,
                 children: endAction
               })]
             })
@@ -1518,7 +1534,7 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
 
-var _excluded$c = ["children", "alignItems"];
+var _excluded$e = ["children", "alignItems"];
 
 /**
  * @deprecated in favor of `Stack`.
@@ -1528,7 +1544,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
@@ -1547,7 +1563,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";
 
-var _excluded$d = ["children", "wrap", "justify", "alignItems"];
+var _excluded$f = ["children", "wrap", "justify", "alignItems"];
 
 /**
  * @deprecated in favor of `Inline` component.
@@ -1559,14 +1575,14 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
     container: true,
-    justifyContent: justify,
+    justify: justify,
     alignItems: alignItems,
     children: items.map((item, idx) => /*#__PURE__*/jsx(Grid, {
       item: true,
@@ -1577,33 +1593,30 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-var _excluded$e = ["size", "square", "classes", "children", "className", "CardContentProps"];
-var StyledCardContent = /*#__PURE__*/styled$1(CardContent)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
-    padding: theme.spacing(2)
-  };
-});
-var StyledCard = /*#__PURE__*/styled$1(Card)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
-    '&[data-full-width="true"]': {
+var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
+    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
+var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
+  root: {
+    '&$fullWidth': {
       borderRadius: 0,
       borderLeftWidth: 0,
       borderRightWidth: 0
-    },
-    ["&[data-size=\"large\"] > ".concat(StyledCardContent.toString())]: {
+    }
+  },
+  fullWidth: {},
+  sizeLarge: {},
+  content: {
+    padding: theme.spacing(2),
+    '$sizeLarge > &': {
       [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(3)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-InfoCard'
 });
-var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
+var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
   var {
     size,
     square,
@@ -1611,20 +1624,31 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
     children,
     className,
     CardContentProps: cardContentProps = {}
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$e);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$g);
+
+  var _useStyles = useStyles$a({
+    classes
+  }),
+      {
+    content: contentClassName,
+    sizeLarge: sizeLargeClassName,
+    fullWidth: fullWidthClassName
+  } = _useStyles,
+      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
 
   var [rootNode, setRootNode] = useState(null);
   var clientRect = rootNode === null || rootNode === void 0 ? void 0 : rootNode.getBoundingClientRect();
   var isFullWidth = (clientRect === null || clientRect === void 0 ? void 0 : clientRect.width) === window.innerWidth;
-  return /*#__PURE__*/jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(Card, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
-      assignRef(_ref4, node);
+      assignRef(_ref2, node);
       setRootNode(node);
     },
-    "data-size": size,
-    "data-full-width": isFullWidth,
-    children: /*#__PURE__*/jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+    classes: styles,
+    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
+    children: /*#__PURE__*/jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+      className: clsx(cardContentProps.className, contentClassName),
       children: children
     }))
   }));
@@ -1680,8 +1704,8 @@ var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$f = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
-    _excluded2$1 = ["id", "InputProps"];
+var _excluded$h = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
+    _excluded2$3 = ["id", "InputProps"];
 
 function NumberInputComponent(_ref) {
   var {
@@ -1692,7 +1716,7 @@ function NumberInputComponent(_ref) {
     thousandSeparator = true,
     disableValueParsing
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/jsx(NumberFormat, _objectSpread(_objectSpread({}, props), {}, {
     value: value !== null && value !== void 0 ? value : '',
@@ -1713,15 +1737,16 @@ function NumberInputComponent(_ref) {
   }));
 }
 
-var NumberField = /*#__PURE__*/forwardRef(_ref2 => {
+var NumberField = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     id,
     InputProps
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   var uid = useUID(id);
   return /*#__PURE__*/jsx(TextField, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     id: uid,
     InputProps: _objectSpread(_objectSpread({}, InputProps), {}, {
       inputComponent: NumberInputComponent
@@ -1731,7 +1756,7 @@ var NumberField = /*#__PURE__*/forwardRef(_ref2 => {
 if (process.env.NODE_ENV !== "production") NumberField.displayName = "NumberField";
 NumberField.displayName = 'NumberField';
 
-var _excluded$g = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$i = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -1742,7 +1767,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
@@ -1762,7 +1787,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$h = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$j = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     name,
@@ -1775,7 +1800,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$h);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$j);
 
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1825,9 +1850,9 @@ function useMinBreakpoint(minBreakpoint) {
   return minBreakpointIDX < breakpointIDX;
 }
 
-var _excluded$i = ["action", "children", "onClose", "className", "classes", "variant"],
-    _excluded2$2 = ["icon", "closeButton", "variantError", "variantSuccess"];
-var useStyles$1 = /*#__PURE__*/makeStyles(theme => ({
+var _excluded$k = ["action", "children", "onClose", "className", "classes", "variant"],
+    _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
     backgroundColor: Color.Dark500,
@@ -1870,9 +1895,9 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
-  var _useStyles = useStyles$1({
+  var _useStyles = useStyles$b({
     classes
   }),
       {
@@ -1881,7 +1906,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     variantError,
     variantSuccess
   } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
+      styles = _objectWithoutProperties(_useStyles, _excluded2$4);
 
   var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
   return /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, props), {}, {
@@ -1920,7 +1945,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$j = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$l = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
   return /*#__PURE__*/jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -1939,7 +1964,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -1968,7 +1993,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$k = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$m = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -2014,7 +2039,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$k);
+        props = _objectWithoutProperties(_ref3, _excluded$m);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2111,8 +2136,8 @@ var Stack = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$l = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-var useStyles$2 = /*#__PURE__*/makeStyles(theme => ({
+var _excluded$n = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     alignItems: 'center',
@@ -2195,9 +2220,9 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
-  var styles = useStyles$2({
+  var styles = useStyles$c({
     classes
   });
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, props), {}, {
@@ -2223,28 +2248,29 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Tag.displayName = "Tag";
 
 function overrideAppBar(theme) {
-  theme.components.MuiAppBar = {
-    defaultProps: {
-      elevation: 0,
-      color: 'inherit',
-      position: 'static'
-    }
+  theme.props.MuiAppBar = {
+    elevation: 0,
+    color: 'inherit',
+    position: 'static'
   };
 }
 
 function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.components.MuiAutocomplete = {
-    defaultProps: {
+  var sm = theme.breakpoints.up('sm'); // Remove `Object.assign` after official release of `Autocomplete`.
+
+  Object.assign(theme.props, {
+    MuiAutocomplete: {
       popupIcon: /*#__PURE__*/jsx(SvgIcon, {
         children: /*#__PURE__*/jsx("path", {
           d: "M12 16.5L6 9h12l-6 7.5z",
           fill: "currentColor"
         })
       })
-    },
-    styleOverrides: {
-      // paper: { ...theme.typography.body2 },
+    }
+  });
+  Object.assign(theme.overrides, {
+    MuiAutocomplete: {
+      paper: _objectSpread({}, theme.typography.body2),
       tag: {
         margin: '4px',
         [sm]: {
@@ -2268,47 +2294,45 @@ function overrideAutocomplete(theme) {
       inputRoot: {
         '&[class*="MuiOutlinedInput-root"]': {
           padding: '6px 8px',
-          ["& .".concat(autocompleteClasses.input)]: {
+          '& $input': {
             width: '144px',
             padding: '4px'
           },
-          ["& .".concat(autocompleteClasses.input, ":first-child")]: {
-            paddingLeft: 'unset'
+          '& $input:first-child': {
+            paddingLeft: undefined
           },
-          ["& .".concat(autocompleteClasses.endAdornment)]: {
+          '& $endAdornment': {
             right: '12px'
           },
           [sm]: {
             padding: theme.spacing(0.5, 0.75),
-            ["& .".concat(autocompleteClasses.input)]: {
+            '& $input': {
               padding: '2px'
             },
-            ["& .".concat(autocompleteClasses.endAdornment)]: {
+            '& $endAdornment': {
               right: '8px'
             }
           }
         }
       }
     }
-  };
+  });
 }
 
 function overrideAvatar(theme) {
-  theme.components.MuiAvatar = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
-        textTransform: 'uppercase',
-        width: theme.spacing(5),
-        height: theme.spacing(5),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(4),
-          height: theme.spacing(4)
-        }
-      }),
-      colorDefault: {
-        color: Color.Dark300,
-        backgroundColor: Color.Silver300
+  theme.overrides.MuiAvatar = {
+    root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
+      textTransform: 'uppercase',
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(4),
+        height: theme.spacing(4)
       }
+    }),
+    colorDefault: {
+      color: Color.Dark300,
+      backgroundColor: Color.Silver300
     }
   };
 }
@@ -2321,11 +2345,9 @@ function outlineShadow() {
 
 function textVariant(text, outline, background, progress) {
   return {
-    '&': {
-      color: text,
-      boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
-    },
+    color: text,
+    boxShadow: outlineShadow(),
+    backgroundColor: Color.Transparent,
     '&:hover': {
       backgroundColor: background
     },
@@ -2336,13 +2358,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      backgroundColor: Color.Transparent
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -2356,11 +2378,11 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
   return {
     backgroundColor,
     color: staleText,
-    border: 0,
+    border: undefined,
     boxShadow: outlinedBorder(staleBorder),
     '&:hover': {
       color: activeText,
-      border: 0,
+      border: undefined,
       backgroundColor: activeBackground,
       boxShadow: outlinedBorder(activeBorder)
     },
@@ -2372,13 +2394,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder),
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      boxShadow: outlinedBorder(disabledBorder)
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -2397,236 +2419,229 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    ["&.".concat(buttonClasses.disabled)]: {
+    '&$disabled': {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground,
-      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
-        color: disabledText
-      }
+      backgroundColor: disabledBackground
     }
   };
 }
 
-function sizeSmall(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    padding: theme.spacing(0.5, 3),
-    [sm]: {
-      padding: theme.spacing(0.25, 2)
-    }
-  });
-}
-
-function sizeLarge(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    fontSize: '18px',
-    lineHeight: '28px',
-    padding: theme.spacing(1.75, 8),
-    [sm]: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      padding: theme.spacing(1, 4)
-    }
-  });
-}
-
 function overrideButton(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiLoadingButton = {
-    defaultProps: {
-      variant: 'outlined'
-    },
-    styleOverrides: {
-      loadingIndicator: {
-        color: 'inherit',
-        fontSize: theme.spacing(2),
-        [".".concat(buttonClasses.sizeLarge, " &")]: {
-          fontSize: theme.spacing(3)
+  theme.props.MuiButton = {
+    color: 'primary',
+    variant: 'outlined',
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiButton = {
+    root: {
+      color: undefined,
+      minWidth: theme.spacing(6),
+      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
+      padding: theme.spacing(1.25, 3),
+      [sm]: {
+        padding: theme.spacing(0.75, 2)
+      },
+      '&:hover': {
+        backgroundColor: undefined,
+        '&$disabled': {
+          backgroundColor: undefined
+        },
+        '@media (hover: none)': {
+          backgroundColor: undefined
+        }
+      },
+      '&$disabled': {
+        color: undefined
+      },
+      '&[aria-busy="true"]': {
+        '& $label': {
+          visibility: 'hidden',
+          '& > [role="progressbar"]': {
+            position: 'absolute',
+            visibility: 'visible',
+            top: 'calc(50% - 0.5em)',
+            left: 'calc(50% - 0.5em)',
+            fontSize: theme.spacing(2),
+            '$sizeLarge &': {
+              fontSize: theme.spacing(3)
+            }
+          }
         }
       }
-    }
-  };
-  theme.components.MuiButton = {
-    defaultProps: {
-      color: 'primary',
-      variant: 'outlined',
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        minWidth: theme.spacing(6),
-        transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
-        padding: theme.spacing(1.25, 3),
+    },
+    label: {
+      '& > .MuiSvgIcon-root': {
+        fontSize: '24px',
         [sm]: {
-          padding: theme.spacing(0.75, 2)
-        },
-        '&:hover': {
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'initial'
-          },
-          '@media (hover: none)': {
-            backgroundColor: 'initial'
-          }
-        },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial'
+          fontSize: '20px'
         },
-        '& > .MuiSvgIcon-root': {
-          fontSize: '24px',
+        '$sizeLarge &': {
+          fontSize: '28px',
           [sm]: {
-            fontSize: '20px'
-          },
-          [".".concat(buttonClasses.sizeLarge, "&")]: {
-            fontSize: '28px',
-            [sm]: {
-              fontSize: '24px'
-            }
+            fontSize: '24px'
           }
         }
+      }
+    },
+    sizeSmall: {
+      padding: theme.spacing(0.5, 3),
+      [sm]: {
+        padding: theme.spacing(0.25, 2)
+      }
+    },
+    sizeLarge: {
+      fontSize: '18px',
+      lineHeight: '28px',
+      padding: theme.spacing(1.75, 8),
+      [sm]: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        padding: theme.spacing(1, 4)
+      }
+    },
+    text: {
+      padding: undefined,
+      '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
+      '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
+      '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
+    },
+    textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
+    textSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    textSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    outlined: {
+      border: undefined,
+      padding: undefined,
+      '&$disabled': {
+        border: undefined
+      },
+      '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
+      '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
+      '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
+    },
+    outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
+    outlinedSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    outlinedSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    contained: {
+      boxShadow: undefined,
+      backgroundColor: undefined,
+      '&:hover': {
+        boxShadow: undefined,
+        backgroundColor: undefined,
+        '&$disabled': {
+          backgroundColor: undefined
+        },
+        '@media (hover: none)': {
+          boxShadow: undefined,
+          backgroundColor: undefined
+        }
       },
-      sizeSmall: sizeSmall(theme),
-      sizeLarge: sizeLarge(theme),
-      text: {
-        padding: 'initial',
-        '&[data-color="error"]': textVariant(Color.Red300, Color.Red100, Color.Red50, Color.Red200),
-        '&[data-color="success"]': textVariant(Color.Green300, Color.Green100, Color.Green50, Color.Green200),
-        '&[data-color="white"]': textVariant(Color.White, Color.White50, Color.White10, Color.White50)
+      '&:active': {
+        boxShadow: undefined
       },
-      textPrimary: textVariant(Color.Blue300, Color.Blue100, Color.Blue50, Color.Blue200),
-      textSizeSmall: sizeSmall(theme),
-      textSizeLarge: sizeLarge(theme),
-      outlined: {
-        border: 'none',
-        padding: 'initial',
-        ["&.".concat(buttonClasses.disabled)]: {
-          border: 'none'
-        },
-        '&[data-color="error"]': outlinedVariant(Color.Red300, Color.Red300, Color.Red100, Color.Red100, Color.Red300, Color.Red300, Color.Red100, Color.Red50, Color.Red300, Color.White),
-        '&[data-color="success"]': outlinedVariant(Color.Green300, Color.Green300, Color.Green100, Color.Green100, Color.Green300, Color.Green300, Color.Green100, Color.Green50, Color.Green300, Color.White),
-        '&[data-color="white"]': outlinedVariant(Color.White, Color.White50, Color.White50, Color.White40, Color.White, Color.White50, Color.White40, Color.White10, Color.White50, Color.Transparent)
+      '&$focusVisible': {
+        boxShadow: undefined
       },
-      outlinedPrimary: outlinedVariant(Color.Dark500, Color.Silver500, Color.Silver500, Color.Silver400, Color.Blue300, Color.Blue300, Color.Blue100, Color.Blue50, Color.Dark200, Color.White),
-      outlinedSizeSmall: sizeSmall(theme),
-      outlinedSizeLarge: sizeLarge(theme),
-      contained: {
-        boxShadow: 'none',
-        backgroundColor: 'initial',
-        '&:hover': {
-          boxShadow: 'none',
-          backgroundColor: 'initial',
-          ["&.".concat(buttonClasses.disabled)]: {
-            backgroundColor: 'none'
-          },
-          '@media (hover: none)': {
-            boxShadow: 'none',
-            backgroundColor: 'none'
-          }
-        },
-        '&:active': {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.focusVisible)]: {
-          boxShadow: 'none'
-        },
-        ["&.".concat(buttonClasses.disabled)]: {
-          color: 'initial',
-          boxShadow: 'none',
-          backgroundColor: 'initial'
-        },
-        '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
-        '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
-        '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+      '&$disabled': {
+        color: undefined,
+        boxShadow: undefined,
+        backgroundColor: undefined
       },
-      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
-      containedSizeSmall: sizeSmall(theme),
-      containedSizeLarge: sizeLarge(theme)
+      '&[data-color="error"]': containedVariant(Color.White, Color.Red300, Color.Red100, Color.Red500, Color.White, Color.Red100),
+      '&[data-color="success"]': containedVariant(Color.White, Color.Green300, Color.Green100, Color.Green500, Color.White, Color.Green100),
+      '&[data-color="white"]': containedVariant(Color.White, Color.White20, Color.White40, Color.White40, Color.White50, Color.White08)
+    },
+    containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+    containedSizeSmall: {
+      padding: undefined,
+      fontSize: undefined
+    },
+    containedSizeLarge: {
+      padding: undefined,
+      fontSize: undefined
     }
   };
 }
 
 function overrideCard(theme) {
-  theme.components.MuiCard = {
-    defaultProps: {
-      variant: 'outlined'
-    }
+  theme.props.MuiCard = {
+    variant: 'outlined'
   };
-  theme.components.MuiCardContent = {
-    styleOverrides: {
-      root: {
-        '&:last-child': {
-          paddingBottom: '16px'
-        }
+  theme.overrides.MuiCardContent = {
+    root: {
+      '&:last-child': {
+        paddingBottom: undefined
       }
     }
   };
 }
 
 function overrideCheckbox(theme) {
-  theme.components.MuiCheckbox = {
-    defaultProps: {
-      color: 'primary',
-      icon: /*#__PURE__*/jsx(SvgIcon, {
-        children: /*#__PURE__*/jsx("rect", {
-          width: "17",
-          height: "17",
-          x: "3.5",
-          y: "3.5",
-          fill: Color.White,
-          stroke: "currentColor",
-          rx: "1.5"
-        })
-      }),
-      checkedIcon: /*#__PURE__*/jsxs(SvgIcon, {
-        children: [/*#__PURE__*/jsx("rect", {
-          width: "18",
-          height: "18",
-          x: "3",
-          y: "3",
-          fill: "currentColor",
-          rx: "2"
-        }), /*#__PURE__*/jsx("path", {
-          fill: Color.White,
-          d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
-        })]
-      }),
-      indeterminateIcon: /*#__PURE__*/jsxs(SvgIcon, {
-        children: [/*#__PURE__*/jsx("rect", {
-          width: "18",
-          height: "18",
-          x: "3",
-          y: "3",
-          fill: "currentIcon",
-          rx: "2"
-        }), /*#__PURE__*/jsx("path", {
-          fill: Color.White,
-          d: "M7 11h10v2H7v-2z"
-        })]
+  theme.props.MuiCheckbox = {
+    color: 'primary',
+    icon: /*#__PURE__*/jsx(SvgIcon, {
+      children: /*#__PURE__*/jsx("rect", {
+        width: "17",
+        height: "17",
+        x: "3.5",
+        y: "3.5",
+        fill: Color.White,
+        stroke: "currentColor",
+        rx: "1.5"
       })
+    }),
+    checkedIcon: /*#__PURE__*/jsxs(SvgIcon, {
+      children: [/*#__PURE__*/jsx("rect", {
+        width: "18",
+        height: "18",
+        x: "3",
+        y: "3",
+        fill: "currentColor",
+        rx: "2"
+      }), /*#__PURE__*/jsx("path", {
+        fill: Color.White,
+        d: "M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
+      })]
+    }),
+    indeterminateIcon: /*#__PURE__*/jsxs(SvgIcon, {
+      children: [/*#__PURE__*/jsx("rect", {
+        width: "18",
+        height: "18",
+        x: "3",
+        y: "3",
+        fill: "currentIcon",
+        rx: "2"
+      }), /*#__PURE__*/jsx("path", {
+        fill: Color.White,
+        d: "M7 11h10v2H7v-2z"
+      })]
+    })
+  };
+  theme.overrides.MuiCheckbox = {
+    root: {
+      color: Color.Dark100,
+      marginTop: theme.spacing(-0.625),
+      marginBottom: theme.spacing(-0.625)
     },
-    styleOverrides: {
-      root: {
-        color: Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: Color.Silver500
       },
-      indeterminate: {
-        ["&:not(.".concat(checkboxClasses.checked, ")")]: {
-          color: Color.Dark100
-        },
-        ["&.".concat(checkboxClasses.disabled)]: {
-          color: Color.Silver400
-        }
-      },
-      colorPrimary: {
-        ["&.".concat(checkboxClasses.checked, ".").concat(checkboxClasses.disabled)]: {
-          color: Color.Silver500
-        },
-        ["&:hover:not(.".concat(checkboxClasses.checked, ")")]: {
-          color: Color.Dark100
-        }
+      '&:hover:not($checked)': {
+        color: Color.Dark100
       }
     }
   };
@@ -2634,223 +2649,197 @@ function overrideCheckbox(theme) {
 
 function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiChip = {
-    defaultProps: {
-      size: 'small',
-      deleteIcon: /*#__PURE__*/jsx("div", {
-        children: /*#__PURE__*/jsx(SvgIcon, {
-          children: /*#__PURE__*/jsx("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
-            fill: "currentColor"
-          })
+  theme.props.MuiChip = {
+    size: 'small',
+    deleteIcon: /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(SvgIcon, {
+        children: /*#__PURE__*/jsx("path", {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z",
+          fill: "currentColor"
         })
       })
+    })
+  };
+  theme.overrides.MuiChip = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      color: undefined,
+      height: undefined,
+      borderRadius: 4,
+      backgroundColor: Color.Silver200,
+      '&$disabled': {
+        opacity: undefined,
+        color: Color.Dark100
+      }
+    }),
+    sizeSmall: {
+      height: undefined
     },
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        color: 'unset',
-        height: 'unset',
-        borderRadius: 4,
-        backgroundColor: Color.Silver200,
-        ["&.".concat(chipClasses.disabled)]: {
-          opacity: 1,
-          color: Color.Dark100
-        }
-      }),
-      sizeSmall: {
-        height: 'unset'
-      },
-      labelSmall: {
-        paddingLeft: 6,
-        paddingRight: 6,
-        [sm]: {
-          paddingLeft: 4,
-          paddingRight: 4
-        }
+    labelSmall: {
+      paddingLeft: 6,
+      paddingRight: 6,
+      [sm]: {
+        paddingLeft: 4,
+        paddingRight: 4
+      }
+    },
+    clickable: {
+      '&:hover, &:focus': {
+        backgroundColor: undefined
       },
-      clickable: {
-        '&:hover, &:focus': {
-          backgroundColor: Color.Silver200
-        },
-        '&:active': {
-          boxShadow: 'unset'
-        },
-        '&:focus': {
-          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
-        },
-        '&:active, &:hover': {
-          backgroundColor: Color.Silver300
-        }
+      '&:active': {
+        boxShadow: undefined
       },
-      deletable: {
-        '&:focus': {
-          backgroundColor: Color.Silver200,
-          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
-        }
+      '&:focus': {
+        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
       },
-      deleteIcon: {
-        width: 'unset',
-        height: 'unset',
-        display: 'flex',
-        fontSize: 14,
-        transition: theme.transitions.create('background-color'),
-        '&:active, &:hover, &:focus': {
-          '& > svg': {
-            backgroundColor: Color.Silver400
-          }
-        },
+      '&:active, &:hover': {
+        backgroundColor: Color.Silver300
+      }
+    },
+    deletable: {
+      '&:focus': {
+        backgroundColor: undefined,
+        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+      }
+    },
+    deleteIcon: {
+      width: undefined,
+      height: undefined,
+      display: 'flex',
+      transition: theme.transitions.create('background-color'),
+      '&:active, &:hover, &:focus': {
         '& > svg': {
-          borderRadius: '50%',
-          color: Color.Dark200,
-          fontSize: '1em'
-        }
-      },
-      deleteIconSmall: {
-        width: 'unset',
-        height: 'unset',
-        padding: theme.spacing(0.5),
-        marginLeft: theme.spacing(-0.5),
-        marginRight: theme.spacing(0.25),
-        [sm]: {
-          marginRight: 0
+          backgroundColor: Color.Silver400
         }
       },
-      icon: {
-        color: Color.Dark100,
-        fontSize: '1em',
-        marginRight: 'unset'
-      },
-      iconSmall: {
-        width: 'unset',
-        height: 'unset',
-        marginLeft: 8,
-        marginRight: 'unset',
-        [sm]: {
-          marginLeft: 4
-        }
+      '& > svg': {
+        borderRadius: '50%',
+        color: Color.Dark200,
+        fontSize: '1em'
+      }
+    },
+    deleteIconSmall: {
+      width: undefined,
+      height: undefined,
+      padding: theme.spacing(0.5),
+      marginLeft: theme.spacing(-0.5),
+      marginRight: theme.spacing(0.25),
+      [sm]: {
+        marginRight: 0
+      }
+    },
+    icon: {
+      color: Color.Dark100,
+      fontSize: '1em',
+      marginRight: undefined
+    },
+    iconSmall: {
+      width: undefined,
+      height: undefined,
+      marginLeft: 8,
+      marginRight: undefined,
+      [sm]: {
+        marginLeft: 4
       }
     }
   };
 }
 
 function overrideDialog(theme) {
-  theme.components.MuiDialog = {
-    styleOverrides: {
-      paper: {
-        margin: theme.spacing(3)
-      },
-      paperWidthXs: {
-        maxWidth: Math.max(theme.breakpoints.values.xs, 360),
-        ["&.".concat(dialogClasses.paperScrollBody)]: {
-          [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
-            maxWidth: 'calc(100% - 64px)'
-          }
+  theme.props.MuiDialogTitle = {
+    disableTypography: true
+  };
+  theme.overrides.MuiDialog = {
+    paper: {
+      margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
         }
       }
     }
   };
-  theme.components.MuiDialogTitle = {
-    defaultProps: {
-      // @ts-expect-error DialogTitleProps has missing type def
-      variant: 'h3'
-    }
+  theme.overrides.MuiDialogTitle = {
+    root: _objectSpread({}, theme.typography.h3)
   };
-  theme.components.MuiDialogContent = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(0, 3)
-      }
+  theme.overrides.MuiDialogContent = {
+    root: {
+      padding: theme.spacing(0, 3)
     }
   };
-  theme.components.MuiDialogActions = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(3)
-      },
-      spacing: {
-        '& > :not(:first-child)': {
-          marginLeft: theme.spacing(2)
-        }
+  theme.overrides.MuiDialogActions = {
+    root: {
+      padding: theme.spacing(3)
+    },
+    spacing: {
+      '& > :not(:first-child)': {
+        marginLeft: theme.spacing(2)
       }
     }
   };
 }
 
 function overrideDrawer(theme) {
-  theme.components.MuiDrawer = {
-    defaultProps: {
-      anchor: 'right'
-    },
-    styleOverrides: {
-      paper: {
-        maxWidth: '100%',
-        minWidth: '100%',
-        [theme.breakpoints.up('sm')]: {
-          minWidth: theme.spacing(54),
-          maxWidth: theme.breakpoints.values.sm
-        }
+  theme.props.MuiDrawer = {
+    anchor: 'right'
+  };
+  theme.overrides.MuiDrawer = {
+    paper: {
+      maxWidth: '100%',
+      minWidth: '100%',
+      [theme.breakpoints.up('sm')]: {
+        minWidth: theme.spacing(54),
+        maxWidth: theme.breakpoints.values.sm
       }
     }
   };
 }
 
 function overrideIconButton(theme) {
-  theme.components.MuiIconButton = {
-    styleOverrides: {
-      root: {
-        // no selector for default color
-        ["&:not(.".concat(iconButtonClasses.colorInherit, "):not(.").concat(iconButtonClasses.colorPrimary, "):not(.").concat(iconButtonClasses.colorSecondary, "):not(.").concat(iconButtonClasses.disabled, ")")]: {
-          color: Color.Dark100
-        },
-        backgroundColor: Color.Transparent,
-        transition: theme.transitions.create(['color', 'background-color'], {
-          duration: theme.transitions.duration.short
-        }),
-        '&:hover': {
-          backgroundColor: Color.Transparent
-        },
-        '&:active': {
-          color: Color.Dark500
-        },
-        '&:hover ': {
-          color: Color.Dark300
-        },
-        '&:focus': {
-          backgroundColor: Color.Silver400
-        },
-        ["&.".concat(iconButtonClasses.disabled)]: {
-          color: Color.Silver500
-        }
+  theme.overrides.MuiIconButton = {
+    root: {
+      color: Color.Dark100,
+      backgroundColor: Color.Transparent,
+      transition: theme.transitions.create(['color', 'background-color'], {
+        duration: theme.transitions.duration.short
+      }),
+      '&:hover': {
+        backgroundColor: Color.Transparent
       },
-      colorPrimary: {
-        '&:active': {
-          color: Color.Blue500
-        },
-        '&:hover ': {
-          color: Color.Blue300
-        },
-        '&:focus': {
-          backgroundColor: Color.Blue50
-        }
+      '&:active': {
+        color: Color.Dark500
       },
-      edgeEnd: {
-        marginRight: theme.spacing(-1)
+      '&:hover ': {
+        color: Color.Dark300
       },
-      edgeStart: {
-        marginLeft: theme.spacing(-1)
+      '&:focus': {
+        backgroundColor: Color.Silver400
       },
-      sizeSmall: {
-        padding: 3,
-        fontSize: theme.typography.pxToRem(18)
+      '&$disabled': {
+        color: Color.Silver500
+      }
+    },
+    colorPrimary: {
+      '&:active': {
+        color: Color.Blue500
       },
-      sizeMedium: {
-        padding: 12,
-        fontSize: theme.typography.pxToRem(24)
+      '&:hover ': {
+        color: Color.Blue300
       },
-      sizeLarge: {// todo declare large size
+      '&:focus': {
+        backgroundColor: Color.Blue50
       }
+    },
+    edgeEnd: {
+      marginRight: theme.spacing(-1)
+    },
+    edgeStart: {
+      marginLeft: theme.spacing(-1)
     }
   };
 }
@@ -2860,383 +2849,344 @@ function line(color) {
 }
 
 function overrideLink(theme) {
-  theme.components.MuiLink = {
-    defaultProps: {
-      underline: 'none',
-      color: 'textPrimary'
-    },
-    styleOverrides: {
-      root: {
-        backgroundSize: '100% 1px',
-        backgroundRepeat: 'repeat-x',
-        backgroundPosition: '0 100%',
-        backgroundColor: Color.Transparent,
-        '&:focus': {
-          outline: 'none'
-        },
-        '&:hover, &:active': {
-          backgroundImage: line('currentColor')
-        }
+  theme.props.MuiLink = {
+    underline: 'none',
+    color: 'textPrimary'
+  };
+  theme.overrides.MuiLink = {
+    root: {
+      backgroundSize: '100% 1px',
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: '0 100%',
+      backgroundColor: Color.Transparent,
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:hover, &:active': {
+        backgroundImage: line('currentColor')
       },
-      // @ts-expect-error type def need in patch-package
-      colorTextPrimary: {
+      '&.MuiTypography-colorTextPrimary': {
         backgroundImage: line(Color.Silver500),
         '&:focus, &:hover, &:active': {
           color: Color.Blue300,
           backgroundImage: line(Color.Blue300)
         }
-      },
-      button: {
-        // Reset button styles.
-        backgroundColor: 'unset',
-        // Override browser defaults.
-        fontSize: 'inherit',
-        textAlign: 'inherit',
-        lineHeight: 'inherit',
-        userSelect: 'inherit',
-        verticalAlign: 'inherit'
       }
+    },
+    button: {
+      // Reset button styles.
+      backgroundColor: undefined,
+      // Override browser defaults.
+      fontSize: 'inherit',
+      textAlign: 'inherit',
+      lineHeight: 'inherit',
+      userSelect: 'inherit',
+      verticalAlign: 'inherit'
     }
   };
 }
 
 function overrideList(theme) {
-  theme.components.MuiListItem = {
-    styleOverrides: {
-      root: {
-        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
-          backgroundColor: Color.Blue50
-        },
-        '& .MuiTouchRipple-root': {
-          color: Color.Blue100
-        }
+  theme.overrides.MuiListItem = {
+    root: {
+      '&$selected, &$selected:hover': {
+        backgroundColor: Color.Blue50
+      },
+      '& .MuiTouchRipple-root': {
+        color: Color.Blue100
       }
     }
   };
 }
 
 function overrideMenu(theme) {
-  theme.components.MuiMenu = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      }
+  theme.props.MuiMenu = {
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
     }
   };
-  theme.components.MuiMenuItem = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-        '& .MuiTouchRipple-root': {
-          color: Color.Blue100
-        },
-        ["&.".concat(menuItemClasses.selected, ", &.").concat(menuItemClasses.selected, ":hover")]: {
-          backgroundColor: Color.Blue50,
-          ["&.".concat(menuItemClasses.focusVisible)]: {
-            backgroundColor: Color.Blue50
-          }
-        }
-      })
-    }
+  theme.overrides.MuiMenuItem = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    })
   };
 }
 
 function overridePagination(theme) {
-  theme.components.MuiPaginationItem = {
-    styleOverrides: {
-      root: {
-        color: Color.Dark400
+  var props = {};
+  var overrides = {
+    root: {
+      color: Color.Dark400
+    },
+    page: {
+      '&:hover': {
+        backgroundColor: Color.Silver200
       },
-      page: {
-        '&:hover': {
-          backgroundColor: Color.Silver200
-        },
-        ["&.".concat(paginationItemClasses.focusVisible)]: {
-          borderRadius: 4,
-          backgroundColor: Color.White,
-          border: "1px solid ".concat(Color.Blue100)
-        },
-        ["&.".concat(paginationItemClasses.selected)]: {
-          backgroundColor: Color.Silver400,
-          ["&:hover, &.".concat(paginationItemClasses.focusVisible)]: {
-            backgroundColor: Color.Silver400
-          },
-          ["&.".concat(paginationItemClasses.disabled)]: {
-            color: Color.Dark100,
-            backgroundColor: Color.Silver400
-          }
+      '&$focusVisible': {
+        borderRadius: 4,
+        backgroundColor: Color.White,
+        border: "1px solid ".concat(Color.Blue100)
+      },
+      '&$selected': {
+        backgroundColor: Color.Silver400,
+        '&:hover, &$focusVisible': {
+          backgroundColor: Color.Silver400
         },
-        ["&.".concat(paginationItemClasses.disabled)]: {
-          opacity: 1,
-          color: Color.Dark100
+        '&$disabled': {
+          color: Color.Dark100,
+          backgroundColor: Color.Silver400
         }
+      },
+      '&$disabled': {
+        opacity: undefined,
+        color: Color.Dark100
       }
     }
-  };
+  }; // Remove `Object.assign` after official release of `PaginationItem`.
+
+  Object.assign(theme.props, {
+    MuiPaginationItem: props
+  });
+  Object.assign(theme.overrides, {
+    MuiPaginationItem: overrides
+  });
 }
 
 function overridePaper(theme) {
-  theme.components.MuiPaper = {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      elevation0: {
-        border: "1px solid ".concat(Color.Silver400)
-      }
+  theme.props.MuiPaper = {
+    elevation: 0
+  };
+  theme.overrides.MuiPaper = {
+    elevation0: {
+      border: "1px solid ".concat(Color.Silver400)
     }
   };
 }
 
 function overrideRadio(theme) {
-  theme.components.MuiRadio = {
-    defaultProps: {
-      color: 'primary',
-      icon: /*#__PURE__*/jsx(SvgIcon, {
-        children: /*#__PURE__*/jsx("circle", {
-          cx: "12",
-          cy: "12",
-          r: "8.5",
-          fill: Color.White,
-          stroke: "currentColor"
-        })
-      }),
-      checkedIcon: /*#__PURE__*/jsxs(SvgIcon, {
-        children: [/*#__PURE__*/jsx("circle", {
-          cx: "12",
-          cy: "12",
-          r: "8.5",
-          fill: "currentColor",
-          stroke: "currentColor"
-        }), /*#__PURE__*/jsx("circle", {
-          cx: "12",
-          cy: "12",
-          r: "4",
-          fill: Color.White
-        })]
+  theme.props.MuiRadio = {
+    color: 'primary',
+    icon: /*#__PURE__*/jsx(SvgIcon, {
+      children: /*#__PURE__*/jsx("circle", {
+        cx: "12",
+        cy: "12",
+        r: "8.5",
+        fill: Color.White,
+        stroke: "currentColor"
       })
+    }),
+    checkedIcon: /*#__PURE__*/jsxs(SvgIcon, {
+      children: [/*#__PURE__*/jsx("circle", {
+        cx: "12",
+        cy: "12",
+        r: "8.5",
+        fill: "currentColor",
+        stroke: "currentColor"
+      }), /*#__PURE__*/jsx("circle", {
+        cx: "12",
+        cy: "12",
+        r: "4",
+        fill: Color.White
+      })]
+    })
+  };
+  theme.overrides.MuiRadio = {
+    root: {
+      color: Color.Dark100,
+      marginTop: theme.spacing(-0.625),
+      marginBottom: theme.spacing(-0.625)
     },
-    styleOverrides: {
-      root: {
-        color: Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: Color.Silver500
       },
-      colorPrimary: {
-        ["&.".concat(radioClasses.disabled, ".").concat(radioClasses.checked)]: {
-          color: Color.Silver500
-        },
-        ["&:hover:not(.".concat(radioClasses.checked, ")")]: {
-          color: Color.Dark100
-        }
+      '&:hover:not($checked)': {
+        color: Color.Dark100
       }
     }
   };
 }
 
 function overrideSnackbar(theme) {
-  theme.components.MuiSnackbar = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      }
-    },
-    styleOverrides: {
-      anchorOriginBottomCenter: {
-        left: 0,
-        right: 0,
-        bottom: 0
-      }
+  theme.overrides.MuiSnackbar = {
+    anchorOriginBottomCenter: {
+      left: 0,
+      right: 0,
+      bottom: 0
     }
   };
-  theme.components.MuiSnackbarContent = {
-    styleOverrides: {
-      root: {
-        width: '100%',
-        borderRadius: 0,
-        minHeight: theme.spacing(7.5),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(54),
-          maxWidth: theme.spacing(54),
-          borderRadius: theme.spacing(0.5)
-        }
-      },
-      message: {
-        flex: 1,
-        display: 'flex'
+  theme.overrides.MuiSnackbarContent = {
+    root: {
+      width: '100%',
+      borderRadius: 0,
+      minHeight: theme.spacing(7.5),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(54),
+        maxWidth: theme.spacing(54),
+        borderRadius: theme.spacing(0.5)
       }
+    },
+    message: {
+      flex: 1,
+      display: 'flex'
     }
   };
 }
 
 function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiSvgIcon = {
-    styleOverrides: {
-      root: {
-        display: 'inherit',
-        fontSize: 'var(--mui-svg-icon-size, 32px)',
-        [sm]: {
-          fontSize: 'var(--mui-svg-icon-size, 24px)'
-        }
-      },
-      fontSizeInherit: {
-        fontSize: 'inherit',
-        [sm]: {
-          fontSize: 'inherit'
-        }
-      },
-      fontSizeSmall: {
-        fontSize: 'var(--mui-svg-icon-size, 24px)',
-        [sm]: {
-          fontSize: 'var(--mui-svg-icon-size, 16px)'
-        }
-      },
-      fontSizeLarge: {
-        '&': {
-          fontSize: 'var(--mui-svg-icon-size, 32px)'
-        }
-      },
-      colorAction: {
-        color: Color.Dark100
+  theme.overrides.MuiSvgIcon = {
+    root: {
+      display: 'inherit',
+      fontSize: 'var(--mui-svg-icon-size, 32px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)'
       }
+    },
+    fontSizeSmall: {
+      fontSize: 'var(--mui-svg-icon-size, 24px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 16px)'
+      }
+    },
+    fontSizeLarge: {
+      fontSize: 'var(--mui-svg-icon-size, 32px)'
+    },
+    colorAction: {
+      color: Color.Dark100
     }
   };
 }
 
 function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiSwitch = {
-    defaultProps: {
-      color: 'primary',
-      disableRipple: true,
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        width: theme.spacing(9.5),
-        height: theme.spacing(5.5),
-        padding: theme.spacing(0.75, 1.5),
-        [sm]: {
-          width: theme.spacing(8),
-          height: theme.spacing(4),
-          padding: theme.spacing(0.5, 1.5)
-        }
+  theme.props.MuiSwitch = {
+    color: 'primary',
+    disableRipple: true,
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiSwitch = {
+    root: {
+      width: theme.spacing(9.5),
+      height: theme.spacing(5.5),
+      padding: theme.spacing(0.75, 1.5),
+      [sm]: {
+        width: theme.spacing(8),
+        height: theme.spacing(4),
+        padding: theme.spacing(0.5, 1.5)
+      }
+    },
+    track: {
+      opacity: undefined,
+      boxShadow: "0 0 0 0 ".concat(Color.Transparent),
+      transition: theme.transitions.create(['box-shadow', 'background-color'], {
+        duration: theme.transitions.duration.shortest
+      }),
+      borderRadius: theme.spacing(2),
+      [sm]: {
+        borderRadius: theme.spacing(1.625)
+      }
+    },
+    thumb: {
+      color: Color.White,
+      boxShadow: undefined,
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+      [sm]: {
+        width: theme.spacing(2),
+        height: theme.spacing(2)
+      }
+    },
+    switchBase: {
+      left: theme.spacing(1),
+      padding: theme.spacing(1.25, 1),
+      [sm]: {
+        padding: theme.spacing(1)
       },
-      track: {
-        opacity: 1,
-        boxShadow: "0 0 0 0 ".concat(Color.Transparent),
-        transition: theme.transitions.create(['box-shadow', 'background-color'], {
-          duration: theme.transitions.duration.shortest
-        }),
-        borderRadius: theme.spacing(2),
+      '&$checked': {
+        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
         [sm]: {
-          borderRadius: theme.spacing(1.625)
+          transform: "translateX(".concat(theme.spacing(2), "px)")
         }
       },
-      thumb: {
-        color: Color.White,
-        boxShadow: 'none',
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        [sm]: {
-          width: theme.spacing(2),
-          height: theme.spacing(2)
-        }
+      '&$checked + $track': {
+        opacity: undefined
       },
-      switchBase: {
-        left: theme.spacing(1),
-        padding: theme.spacing(1.25, 1),
-        [sm]: {
-          padding: theme.spacing(1)
-        },
-        ["&.".concat(switchClasses.checked)]: {
-          transform: "translateX(".concat(theme.spacing(2.5), ")"),
-          [sm]: {
-            transform: "translateX(".concat(theme.spacing(2), ")")
+      '&$disabled + $track': {
+        opacity: undefined
+      }
+    },
+    colorPrimary: {
+      '&$checked': {
+        color: undefined,
+        '&:hover': {
+          backgroundColor: undefined,
+          '& + $track': {
+            backgroundColor: Color.Blue400
           }
-        },
-        ["&.".concat(switchClasses.checked, " + .").concat(switchClasses.track)]: {
-          opacity: 1
-        },
-        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
-          opacity: 1
         }
       },
-      colorPrimary: {
-        ["&.".concat(switchClasses.checked)]: {
-          '&:hover': {
-            ["& + .".concat(switchClasses.track)]: {
-              backgroundColor: Color.Blue400
-            }
-          }
-        },
-        ["& + .".concat(switchClasses.track)]: {
-          backgroundColor: Color.Silver500
-        },
-        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
-          backgroundColor: Color.Silver300
-        },
-        ["&.".concat(switchClasses.checked, ".").concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
-          backgroundColor: Color.Blue100
-        },
-        ["&:hover + .".concat(switchClasses.track)]: {
-          backgroundColor: Color.Dark100
-        },
-        ["&.Mui-focusVisible + .".concat(switchClasses.track)]: {
-          boxShadow: "0 0 0 3px ".concat(Color.Blue100)
-        }
+      '& + $track': {
+        backgroundColor: Color.Silver500
+      },
+      '&$disabled + $track': {
+        backgroundColor: Color.Silver300
+      },
+      '&$checked$disabled + $track': {
+        backgroundColor: Color.Blue100
+      },
+      '&:hover + $track': {
+        backgroundColor: Color.Dark100
+      },
+      '&.Mui-focusVisible + $track': {
+        boxShadow: "0 0 0 3px ".concat(Color.Blue100)
       }
     }
   };
 }
 
 function overrideTabs(theme) {
-  theme.components.MuiTabs = {
-    defaultProps: {
-      variant: 'scrollable',
-      textColor: 'primary',
-      indicatorColor: 'primary'
-    },
-    styleOverrides: {
-      root: {
-        minHeight: theme.spacing(6)
-      },
-      scrollButtons: {
-        opacity: 1,
-        color: Color.Dark100,
-        width: theme.spacing(4),
-        transition: theme.transitions.create('opacity', {
-          duration: theme.transitions.duration.short
-        })
-      }
+  theme.props.MuiTabs = {
+    variant: 'scrollable',
+    textColor: 'primary',
+    indicatorColor: 'primary'
+  };
+  theme.overrides.MuiTabs = {
+    root: {
+      minHeight: theme.spacing(6)
+    },
+    scrollButtons: {
+      opacity: 1,
+      color: Color.Dark100,
+      width: theme.spacing(4),
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short
+      })
     }
   };
-  theme.components.MuiTab = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        minHeight: theme.spacing(6),
-        transition: theme.transitions.create(['color'], {
-          duration: theme.transitions.duration.short
-        }),
-        [theme.breakpoints.up('sm')]: {
-          minWidth: 'unset',
-          fontSize: 'unset',
-          padding: theme.spacing(0.75, 3)
-        }
+  theme.overrides.MuiTab = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      minHeight: theme.spacing(6),
+      transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short
       }),
-      textColorPrimary: {
-        color: Color.Dark500,
-        '&:hover, &:focus': {
-          color: Color.Blue300
-        }
+      [theme.breakpoints.up('sm')]: {
+        minWidth: undefined,
+        fontSize: undefined,
+        padding: theme.spacing(0.75, 3)
+      }
+    }),
+    textColorPrimary: {
+      color: Color.Dark500,
+      '&:hover, &:focus': {
+        color: Color.Blue300
       }
     }
   };
@@ -3253,248 +3203,223 @@ var SelectIcon = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/jsx(SvgIco
 if (process.env.NODE_ENV !== "production") SelectIcon.displayName = "SelectIcon";
 function overrideTextField(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiTextField = {
-    defaultProps: {
-      minRows: 4,
-      maxRows: 4,
-      variant: 'outlined'
-    }
+  theme.props.MuiTextField = {
+    minRows: 4,
+    maxRows: 4,
+    variant: 'outlined'
   };
-  theme.components.MuiFormLabel = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        color: Color.Dark400,
-        ["&.".concat(formLabelClasses.error)]: {
-          color: Color.Dark400
-        },
-        ["&.".concat(formLabelClasses.focused)]: {
-          color: Color.Dark400
-        },
-        ["&.".concat(formLabelClasses.disabled)]: {
-          color: Color.Dark400
-        }
-      })
-    }
-  };
-  theme.components.MuiInputBase = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        ["&.".concat(inputBaseClasses.disabled)]: {
-          backgroundColor: Color.Silver100
-        }
-      }),
-      input: {
-        textOverflow: 'ellipsis',
-        height: theme.spacing(3),
-        [sm]: {
-          height: theme.spacing(2.5)
-        }
+  theme.overrides.MuiFormLabel = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      color: Color.Dark400,
+      '&$error': {
+        color: undefined
       },
-      inputMultiline: {
-        resize: 'vertical'
+      '&$focused': {
+        color: undefined
+      },
+      '&$disabled': {
+        color: undefined
       }
+    })
+  };
+  theme.overrides.MuiInputBase = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      '&$disabled': {
+        backgroundColor: Color.Silver100
+      }
+    }),
+    input: {
+      textOverflow: 'ellipsis',
+      height: theme.spacing(3),
+      [sm]: {
+        height: theme.spacing(2.5)
+      }
+    },
+    inputMultiline: {
+      resize: 'vertical'
     }
   };
-  theme.components.MuiInputLabel = {
-    defaultProps: {
-      shrink: true
-    },
-    styleOverrides: {
-      root: {
-        marginBottom: theme.spacing(0.5),
-        transformOrigin: 'unset'
-      },
-      formControl: {
-        top: 'unset',
-        left: 'unset',
-        position: 'unset',
-        transform: 'unset'
-      },
-      shrink: {
-        transform: 'unset',
-        transformOrigin: 'unset'
-      },
-      outlined: {
-        zIndex: 'unset',
-        transform: 'unset',
-        pointerEvents: 'unset'
+  theme.props.MuiInputLabel = {
+    shrink: true
+  };
+  theme.overrides.MuiInputLabel = {
+    root: {
+      marginBottom: theme.spacing(0.5),
+      transformOrigin: undefined
+    },
+    formControl: {
+      top: undefined,
+      left: undefined,
+      position: undefined,
+      transform: undefined
+    },
+    shrink: {
+      transform: undefined,
+      transformOrigin: undefined
+    },
+    outlined: {
+      zIndex: undefined,
+      transform: undefined,
+      pointerEvents: undefined,
+      '&$shrink': {
+        transform: undefined
       }
     }
   };
-  theme.components.MuiOutlinedInput = {
-    defaultProps: {
-      notched: false
-    },
-    styleOverrides: {
-      root: {
-        ["&:hover .".concat(outlinedInputClasses.notchedOutline)]: {
-          borderColor: Color.Silver500
-        }
-      },
-      input: {
-        padding: theme.spacing(1.25, 1.5),
-        [sm]: {
-          padding: theme.spacing(0.75, 1)
-        },
-        '&.MuiInputBase-inputAdornedStart': {
-          paddingLeft: 0
-        },
-        '&.MuiInputBase-inputAdornedEnd': {
-          paddingRight: 0
-        }
-      },
-      inputMultiline: {
-        padding: 0,
-        [sm]: {
-          padding: 0
-        }
-      },
-      multiline: {
+  theme.props.MuiOutlinedInput = {
+    notched: false
+  };
+  theme.overrides.MuiOutlinedInput = {
+    root: {
+      '&:hover $notchedOutline': {
+        borderColor: undefined
+      }
+    },
+    input: {
+      padding: theme.spacing(1.25, 1.5),
+      [sm]: {
         padding: theme.spacing(0.75, 1)
-      },
-      adornedStart: {
-        paddingLeft: theme.spacing(1)
-      },
-      adornedEnd: {
-        paddingRight: theme.spacing(1)
-      },
-      notchedOutline: {
-        top: 0,
-        borderColor: Color.Silver500,
-        '& legend': {
-          display: 'none'
-        }
+      }
+    },
+    multiline: {
+      padding: theme.spacing(0.75, 1)
+    },
+    adornedStart: {
+      paddingLeft: theme.spacing(1)
+    },
+    adornedEnd: {
+      paddingRight: theme.spacing(1)
+    },
+    notchedOutline: {
+      top: 0,
+      borderColor: Color.Silver500,
+      '& legend': {
+        display: 'none'
       }
     }
   };
-  theme.components.MuiSelect = {
-    defaultProps: {
-      IconComponent: SelectIcon
-    },
-    styleOverrides: {
-      icon: {
-        top: 'calc(50% - 0.5em)',
-        '$disabled &': {
-          color: Color.Dark100
-        },
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2)
-        }
-      },
-      iconOutlined: {
-        right: theme.spacing(1.5),
-        [sm]: {
-          right: theme.spacing(1)
-        }
+  theme.props.MuiSelect = {
+    IconComponent: SelectIcon
+  };
+  theme.overrides.MuiSelect = {
+    icon: {
+      top: 'calc(50% - 0.5em)',
+      '$disabled &': {
+        color: Color.Dark100
       },
-      select: {
+      fontSize: theme.spacing(3),
+      [sm]: {
+        fontSize: theme.spacing(2)
+      }
+    },
+    iconOutlined: {
+      right: theme.spacing(1.5),
+      [sm]: {
+        right: theme.spacing(1)
+      }
+    },
+    select: {
+      '&:focus': {
+        backgroundColor: undefined
+      }
+    },
+    selectMenu: {
+      '&&': {
         paddingRight: theme.spacing(4.5),
         [sm]: {
           right: theme.spacing(4)
-        },
-        '&:focus': {
-          backgroundColor: 'unset'
         }
       }
     }
   };
-  theme.components.MuiInputAdornment = {
-    styleOverrides: {
-      root: {
-        '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-          fontSize: theme.spacing(3),
-          [sm]: {
-            fontSize: theme.spacing(2.5)
-          }
-        },
-        '& .MuiIconButton-root': {
-          padding: theme.spacing(1)
+  theme.overrides.MuiInputAdornment = {
+    root: {
+      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2.5)
         }
       },
-      positionStart: {
-        '& .MuiIconButton-root': {
-          marginLeft: theme.spacing(-0.5),
-          [sm]: {
-            marginLeft: theme.spacing(-0.75)
-          }
+      '& .MuiIconButton-root': {
+        padding: theme.spacing(1)
+      }
+    },
+    positionStart: {
+      '& .MuiIconButton-root': {
+        marginLeft: theme.spacing(-0.5),
+        [sm]: {
+          marginLeft: theme.spacing(-0.75)
         }
-      },
-      positionEnd: {
-        '& .MuiIconButton-root': {
-          marginRight: theme.spacing(-0.5),
-          [sm]: {
-            marginRight: theme.spacing(-0.75)
-          }
+      }
+    },
+    positionEnd: {
+      '& .MuiIconButton-root': {
+        marginRight: theme.spacing(-0.5),
+        [sm]: {
+          marginRight: theme.spacing(-0.75)
         }
       }
     }
   };
-  theme.components.MuiFormHelperText = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        marginTop: theme.spacing(0.5)
-      }),
-      contained: {
-        marginLeft: 'unset',
-        marginRight: 'unset'
-      }
+  theme.overrides.MuiFormHelperText = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      marginTop: theme.spacing(0.5)
+    }),
+    contained: {
+      marginLeft: undefined,
+      marginRight: undefined
     }
   };
 }
 
 function overrideToolbar(theme) {
-  theme.components.MuiToolbar = {
-    styleOverrides: {
-      regular: {
-        minHeight: theme.spacing(8)
-      },
-      gutters: {
-        [theme.breakpoints.up('sm')]: {
-          paddingLeft: theme.spacing(2),
-          paddingRight: theme.spacing(2)
-        }
+  theme.overrides.MuiToolbar = {
+    regular: {
+      minHeight: theme.spacing(8)
+    },
+    gutters: {
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
       }
     }
   };
 }
 
 function overrideTooltip(theme) {
-  theme.components.MuiTooltip = {
-    defaultProps: {
-      arrow: true
-    },
-    styleOverrides: {
-      tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        padding: theme.spacing(1, 1.5),
-        backgroundColor: Color.Dark400
-      }),
-      popperArrow: {
-        ["&[data-popper-placement*=\"top\"] .".concat(tooltipClasses.arrow)]: {
-          '&::before': {
-            borderBottomRightRadius: 2
-          }
-        },
-        ["&[data-popper-placement*=\"left\"] .".concat(tooltipClasses.arrow)]: {
-          '&::before': {
-            borderTopRightRadius: 2
-          }
-        },
-        ["&[data-popper-placement*=\"right\"] .".concat(tooltipClasses.arrow)]: {
-          '&::before': {
-            borderBottomLeftRadius: 2
-          }
-        },
-        ["&[data-popper-placement*=\"bottom\"] .".concat(tooltipClasses.arrow)]: {
-          '&::before': {
-            borderTopLeftRadius: 2
-          }
+  theme.props.MuiTooltip = {
+    arrow: true
+  };
+  theme.overrides.MuiTooltip = {
+    tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      padding: theme.spacing(1, 1.5),
+      backgroundColor: Color.Dark400
+    }),
+    popperArrow: {
+      '&[x-placement*="top"] $arrow': {
+        '&::before': {
+          borderBottomRightRadius: 2
+        }
+      },
+      '&[x-placement*="left"] $arrow': {
+        '&::before': {
+          borderTopRightRadius: 2
+        }
+      },
+      '&[x-placement*="right"] $arrow': {
+        '&::before': {
+          borderBottomLeftRadius: 2
         }
       },
-      arrow: {
-        color: Color.Dark400,
-        fontSize: theme.spacing(1)
+      '&[x-placement*="bottom"] $arrow': {
+        '&::before': {
+          borderTopLeftRadius: 2
+        }
       }
+    },
+    arrow: {
+      color: Color.Dark400,
+      fontSize: theme.spacing(1)
     }
   };
 }
@@ -3604,18 +3529,8 @@ function createTypographyOptions(breakpoints) {
   };
 }
 function overrideTypography(theme) {
-  theme.components.MuiTypography = {
-    defaultProps: {
-      variant: 'body2'
-    }
-  };
-}
-
-function overrideCssBaseline(theme) {
-  theme.components.MuiCssBaseline = {
-    styleOverrides: {
-      body: _objectSpread({}, theme.typography.body2)
-    }
+  theme.props.MuiTypography = {
+    variant: 'body2'
   };
 }
 
@@ -3638,39 +3553,39 @@ function createSuperDispatchTheme() {
       text: {
         primary: Color.Dark500,
         secondary: Color.Dark200,
-        // hint: Color.Dark100, todo
+        hint: Color.Dark100,
         disabled: Color.Dark100
       },
       divider: Color.Silver400
     },
     typography: createTypographyOptions(breakpoints),
-    components: {}
+    props: {},
+    overrides: {}
   });
-  overrideCard(theme);
-  overrideButton(theme);
   overrideAppBar(theme);
-  overridePaper(theme);
-  overrideTooltip(theme);
-  overrideSvgIcon(theme);
-  overrideToolbar(theme);
-  overrideIconButton(theme);
-  overrideTypography(theme);
-  overrideMenu(theme);
-  overrideAvatar(theme);
-  overrideTextField(theme);
   overrideAutocomplete(theme);
-  overrideCssBaseline(theme);
+  overrideAvatar(theme);
+  overrideButton(theme);
+  overrideCard(theme);
   overrideCheckbox(theme);
-  overrideRadio(theme);
-  overrideSwitch(theme);
   overrideChip(theme);
   overrideDialog(theme);
   overrideDrawer(theme);
-  overridePagination(theme);
-  overrideList(theme);
+  overrideIconButton(theme);
   overrideLink(theme);
+  overrideList(theme);
+  overrideMenu(theme);
+  overridePaper(theme);
+  overrideRadio(theme);
   overrideSnackbar(theme);
+  overrideSvgIcon(theme);
+  overrideSwitch(theme);
   overrideTabs(theme);
+  overrideTextField(theme);
+  overrideToolbar(theme);
+  overrideTooltip(theme);
+  overrideTypography(theme);
+  overridePagination(theme);
   return theme;
 }
 
@@ -3718,9 +3633,12 @@ function ThemeProvider(_ref) {
     generateClassName: generateClassName,
     children: /*#__PURE__*/jsxs(ThemeProvider$1, {
       theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
-        children: /*#__PURE__*/jsx(SnackbarStackProvider, {
-          children: children
+      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ThemeProvider$2, {
+        theme: theme,
+        children: /*#__PURE__*/jsx(ResponsiveContextProvider, {
+          children: /*#__PURE__*/jsx(SnackbarStackProvider, {
+            children: children
+          })
         })
       })]
     })
@@ -3731,13 +3649,12 @@ var PREVENT_COLLAPSE = 1;
 
 function spaceVariant(theme, space) {
   var gap = theme.spacing(space);
-  var parsedGap = parseInt(gap);
   return {
     '&:before': {
-      marginTop: -parsedGap - PREVENT_COLLAPSE
+      marginTop: -gap - PREVENT_COLLAPSE
     },
     '& > $container': {
-      marginLeft: -parsedGap,
+      marginLeft: -gap,
       '& > $child > $childContainer': {
         marginTop: gap,
         marginLeft: gap
@@ -3752,7 +3669,7 @@ function columnVariant(columns) {
   };
 }
 
-var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$d = /*#__PURE__*/makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,
     '&:before': {
@@ -3796,7 +3713,7 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
     space: spaceProp = 1,
     columns: columnsProp = 1
   } = _ref;
-  var styles = useStyles$3({});
+  var styles = useStyles$d({});
   var space = useResponsivePropRecord(spaceProp);
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsx("div", {