@superdispatch/ui 0.21.0 → 0.21.5-alpha.1

package/dist-web/index.js

@@ -1,43 +1,41 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-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, 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 { 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, 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 { 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, ThemeProvider as ThemeProvider$2 } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { useEventHandler, useDeepEqualValue, useValueObserver, useDeepEqualMemo, useConstant } from '@superdispatch/hooks';
-import clsx from 'clsx';
+import { makeStyles, StylesProvider, createGenerateClassName } from '@mui/styles';
 import flattenChildren from 'react-keyed-flatten-children';
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
+import clsx from 'clsx';
+import { createBreakpoints } from '@mui/system';
 
-var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
+var _excluded = ["size", "children", "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(Button$1, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     size: size,
     "data-color": color,
-    "aria-busy": isLoading,
+    loading: isLoading,
     "aria-expanded": isActive,
-    disabled: disabled || isLoading,
-    color: color === 'primary' ? color : 'default',
-    children: !isLoading ? children : /*#__PURE__*/jsxs(Fragment, {
-      children: [children, /*#__PURE__*/jsx(CircularProgress, {
-        size: "1em",
-        color: "inherit"
-      })]
-    })
+    color: color === 'primary' ? color : 'inherit',
+    loadingIndicator: /*#__PURE__*/jsx(CircularProgress, {
+      size: "1em",
+      color: "inherit"
+    }),
+    children: children
   }));
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
@@ -164,12 +162,12 @@ function useResizeObserver(node, observer) {
 }
 
 var _excluded$2 = ["items"];
-var useStyles = /*#__PURE__*/makeStyles({
-  actions: {
-    overflow: 'hidden'
-  }
-}, {
+var GridActionsItem = /*#__PURE__*/styled$1(Grid, {
   name: 'SD-AdaptiveToolbar'
+})(() => {
+  return {
+    overflow: 'hidden'
+  };
 });
 var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -177,7 +175,6 @@ 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);
@@ -219,9 +216,8 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
       container: true,
       spacing: 1,
       ref: setRootNode,
-      children: [/*#__PURE__*/jsx(Grid, {
+      children: [/*#__PURE__*/jsx(GridActionsItem, {
         item: true,
-        className: styles.actions,
         children: /*#__PURE__*/jsx(Grid, {
           container: true,
           spacing: 1,
@@ -243,6 +239,8 @@ 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, {
@@ -259,6 +257,7 @@ var AdaptiveToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
         component: "div",
         children: [/*#__PURE__*/jsx(Button, {
           type: "button",
+          variant: "outlined",
           onClick: _ref2 => {
             var {
               currentTarget
@@ -324,7 +323,7 @@ function assignRef(ref, value) {
   }
 }
 
-var useStyles$1 = /*#__PURE__*/makeStyles({
+var useStyles = /*#__PURE__*/makeStyles({
   root: {
     overflow: 'hidden',
     height: '100%'
@@ -346,7 +345,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     renderItem = item => item.label,
     renderMenuItem = item => item.label
   } = _ref;
-  var styles = useStyles$1();
+  var styles = useStyles();
   var itemNodes = useRef([]);
   var optionsButtonRef = useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = useState(-1);
@@ -509,66 +508,81 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(Color, name);
 }
 
-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 _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 {
-    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
-          }
-        }
+    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)
       }
-    },
-    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)
-        }
+    }
+  };
+});
+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 sm = theme.breakpoints.up('sm');
+  return {
+    borderRadius: '50%',
+    '&[disabled], &[aria-busy="true"]': {
+      ["& > ".concat(Overlay.toString())]: {
+        backgroundColor: Color.White50
       }
     },
-    progress: {
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      fontSize: theme.spacing(5),
-      [sm]: {
-        fontSize: theme.spacing(4)
+    '&: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
+        }
       }
     },
-    withIcon: {},
-    sizeLarge: {
-      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+    '&[data-size-large="true"]': {
+      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
         width: theme.spacing(7),
         height: theme.spacing(7),
         [sm]: {
@@ -576,8 +590,8 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
           height: theme.spacing(8)
         }
       }),
-      '& > $overlay': {
-        '& > $progress': {
+      ["& > ".concat(Overlay.toString())]: {
+        ["& > ".concat(StyledProgress.toString())]: {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -590,27 +604,16 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
           }
         }
       }
-    },
-    root: {},
-    colorDefault: {},
-    circular: {},
-    rounded: {},
-    square: {},
-    img: {},
-    fallback: {}
+    }
   };
-}, {
-  name: 'SD-AvatarButton'
 });
-var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+var AvatarButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var {
     size,
     icon,
     isLoading = false,
-    classes,
     disabled = false,
     avatarRef,
-    className,
     alt,
     imgProps,
     sizes,
@@ -618,30 +621,18 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     srcSet,
     variant,
     children
-  } = _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);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$3);
 
-  return /*#__PURE__*/jsxs(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
+    "data-with-icon": !!icon,
+    "data-size-large": size === 'large',
     children: [/*#__PURE__*/jsx(Avatar, {
       ref: avatarRef,
-      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -649,11 +640,9 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/jsxs("div", {
-      className: overlayClassName,
-      children: [icon, isLoading && /*#__PURE__*/jsx(CircularProgress, {
+    }), /*#__PURE__*/jsxs(Overlay, {
+      children: [icon, isLoading && /*#__PURE__*/jsx(StyledProgress, {
         size: "1em",
-        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]
@@ -662,8 +651,11 @@ var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
 var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
-  root: {
+var StyledButton$1 = /*#__PURE__*/styled$1(ButtonBase)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -674,66 +666,74 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
     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'])
-  },
-  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
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
+    '&[data-disabled="true"]': {
+      color: Color.Dark200,
+      borderColor: Color.Silver500,
+      backgroundColor: Color.Silver100
     },
-    '&:hover, &:active': {
-      borderColor: Color.Blue300,
-      backgroundColor: Color.Blue50
+    '&[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)
+    },
+    '&[data-size="large"]': {
+      minHeight: theme.spacing(17.5)
     }
-  },
-  sizeSmall: {
-    minHeight: theme.spacing(6)
-  },
-  sizeLarge: {
-    minHeight: theme.spacing(17.5)
-  },
-  label: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  icon: {
+  };
+});
+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 {
     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((_ref, ref) => {
+var CardButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
   var {
     hint,
     size,
@@ -744,39 +744,33 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     endIcon,
     startIcon,
     disabled
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded$4);
 
-  var styles = useStyles$3({
-    classes
-  });
-  return /*#__PURE__*/jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(StyledButton$1, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    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, {
+    "data-size": size,
+    "data-disabled": !!disabled,
+    "data-error": !disabled && !!error,
+    "data-primary": !disabled && !error,
+    children: error ? /*#__PURE__*/jsx(Label, {
       variant: "h4",
       color: "inherit",
-      className: styles.label,
       children: error
     }) : /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsxs(Typography, {
+      children: [/*#__PURE__*/jsxs(Label, {
         variant: "h4",
         color: "inherit",
-        className: styles.label,
-        children: [!!startIcon && /*#__PURE__*/jsx("span", {
-          className: clsx(styles.icon, styles.startIcon),
+        children: [!!startIcon && /*#__PURE__*/jsx(Icon, {
+          "data-placement": "start",
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/jsx("span", {
-          className: clsx(styles.icon, styles.endIcon),
+        }), children, !!endIcon && /*#__PURE__*/jsx(Icon, {
+          "data-placement": "end",
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/jsx(Typography, {
+      }), !!hint && /*#__PURE__*/jsx(Hint, {
         color: "textSecondary",
-        className: styles.hint,
         children: hint
       })]
     })
@@ -1116,48 +1110,52 @@ function VisibilityObserver(_ref2) {
 }
 
 var _excluded$8 = ["title", "enterDelay"],
-    _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-var useStyles$4 = /*#__PURE__*/makeStyles(theme => ({
-  root: {
+    _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({
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
-    transition: theme.transitions.create('border'),
-    '&$truncated': {
-      cursor: 'pointer',
-      borderBottomColor: Color.Silver500
-    }
-  },
-  truncated: {},
-  sentinel: {
-    width: 1,
-    height: '100%',
-    display: 'inline-block'
-  }
-}), {
-  name: 'SD-OverflowText'
+    transition: theme.transitions.create('border')
+  }, truncated && {
+    cursor: 'pointer',
+    borderBottomColor: Color.Silver500
+  });
 });
-var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
+var Sential = /*#__PURE__*/styled$1('span', {
+  name: 'SD-OverflowText',
+  slot: 'Sential'
+})({
+  width: 1,
+  height: '100%',
+  display: 'inline-block'
+});
+var OverflowText = /*#__PURE__*/forwardRef((_ref2, rootRef) => {
   var {
     onClick: _onClick,
     children,
-    className,
     disableUnderline,
     TooltipProps: {
       title = children,
       enterDelay = 1000
     } = {}
-  } = _ref,
-      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
-      props = _objectWithoutProperties(_ref, _excluded2$1);
+  } = _ref2,
+      tooltipProps = _objectWithoutProperties(_ref2.TooltipProps, _excluded$8),
+      props = _objectWithoutProperties(_ref2, _excluded2);
 
   var [isOpen, setIsOpen] = useState(false);
-  var styles = useStyles$4();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref3 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref3;
       var isTooltipEnabled = !!children && visibility === 'invisible';
       return /*#__PURE__*/jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         enterDelay: 1000,
@@ -1170,17 +1168,16 @@ var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
         onClose: () => {
           setIsOpen(false);
         },
-        children: /*#__PURE__*/jsxs(Typography, _objectSpread(_objectSpread({}, props), {}, {
+        children: /*#__PURE__*/jsxs(Root, _objectSpread(_objectSpread({}, props), {}, {
           ref: rootRef,
           noWrap: true,
+          truncated: !disableUnderline && visibility === 'invisible',
           onClick: event => {
             setIsOpen(true);
             _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
           },
-          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
-          children: [children, !!children && /*#__PURE__*/jsx("span", {
-            ref: ref,
-            className: styles.sentinel
+          children: [children, !!children && /*#__PURE__*/jsx(Sential, {
+            ref: ref
           })]
         }))
       }));
@@ -1200,29 +1197,18 @@ function useUID(defaultID) {
 }
 
 var _excluded$9 = ["size"];
-
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
+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;
   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': {
@@ -1232,33 +1218,11 @@ var useStyles$5 = /*#__PURE__*/makeStyles(theme => ({
         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;
 
@@ -1271,15 +1235,12 @@ 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("div", {
+  return /*#__PURE__*/jsxs(DescriptionListItemRoot, {
     ref: ref,
-    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/jsx("div", {
-      className: styles.icon,
+    children: [!!icon && /*#__PURE__*/jsx(DescriptionListItemIcon, {
       children: icon
     }), /*#__PURE__*/jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -1296,26 +1257,72 @@ 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)
+  });
+});
 
-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
+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)
+        }
       }
     }
-  },
-  appBarSticky: {},
-  toolbar: {
+  };
+}
+
+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 {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1324,31 +1331,26 @@ var useStyles$6 = /*#__PURE__*/makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  }
-}), {
-  name: 'SD-DrawerActions'
+  };
 });
-var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+var DrawerActions = /*#__PURE__*/forwardRef((_ref3, appBarRef) => {
   var {
-    children,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+    children
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$a);
 
-  var styles = useStyles$6();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref4 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar, {
-            className: styles.toolbar,
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/jsx(StyledToolbar, {
             children: children
           })
         })), /*#__PURE__*/jsx("div", {
@@ -1360,33 +1362,20 @@ var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var _excluded$b = ["className"];
-var useStyles$7 = /*#__PURE__*/makeStyles(theme => ({
-  root: {
+var DrawerContent = /*#__PURE__*/styled$1('div', {
+  name: 'SD-DrawerContent'
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
     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 {
@@ -1406,46 +1395,38 @@ function listItemMixins(theme, space) {
   };
 }
 
-var useStyles$8 = /*#__PURE__*/makeStyles(theme => ({
-  root: _objectSpread(_objectSpread({
+var DrawerList = /*#__PURE__*/styled$1(List)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
     [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
-  })
-}), {
-  name: 'SD-DrawerList'
-});
-var DrawerList = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    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)
-  }));
+  });
 });
-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
-      }
+var _excluded$b = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
+var StyledAppBar$1 = /*#__PURE__*/styled$1(AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderBottomColor: Color.Transparent
     }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
+  };
+});
+var StyledToolbar$1 = /*#__PURE__*/styled$1(Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
       [theme.breakpoints.up('md')]: {
@@ -1453,56 +1434,60 @@ var useStyles$9 = /*#__PURE__*/makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  },
-  startAction: {
+  };
+});
+var StartAction = /*#__PURE__*/styled$1(Grid)(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  },
-  endAction: {
+  };
+});
+var EndAction = /*#__PURE__*/styled$1(Grid)(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  }
-}), {
-  name: 'SD-DrawerTitle'
+  };
 });
-var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
+var DrawerTitle = /*#__PURE__*/forwardRef((_ref5, appBarRef) => {
   var {
     title,
     titleTypographyProps,
     subtitle,
     subtitleTypographyProps,
     startAction,
-    endAction,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+    endAction
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded$b);
 
-  var styles = useStyles$9();
   return /*#__PURE__*/jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref6 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref6;
       return /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("div", {
           ref: ref
-        }), /*#__PURE__*/jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/jsx(StyledAppBar$1, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsx(Toolbar, {
-            className: styles.toolbar,
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/jsx(StyledToolbar$1, {
             children: /*#__PURE__*/jsxs(Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/jsx(Grid, {
+              children: [!!startAction && /*#__PURE__*/jsx(StartAction, {
                 item: true,
-                className: styles.startAction,
                 children: startAction
               }), /*#__PURE__*/jsxs(Grid, {
                 item: true,
@@ -1519,9 +1504,8 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/jsx(Grid, {
+              }), !!endAction && /*#__PURE__*/jsx(EndAction, {
                 item: true,
-                className: styles.endAction,
                 children: endAction
               })]
             })
@@ -1533,7 +1517,7 @@ var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
 
-var _excluded$e = ["children", "alignItems"];
+var _excluded$c = ["children", "alignItems"];
 
 /**
  * @deprecated in favor of `Stack`.
@@ -1543,7 +1527,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
@@ -1562,7 +1546,7 @@ var GridStack = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";
 
-var _excluded$f = ["children", "wrap", "justify", "alignItems"];
+var _excluded$d = ["children", "wrap", "justify", "alignItems"];
 
 /**
  * @deprecated in favor of `Inline` component.
@@ -1574,14 +1558,14 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var items = Children.toArray(children);
   return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
     container: true,
-    justify: justify,
+    justifyContent: justify,
     alignItems: alignItems,
     children: items.map((item, idx) => /*#__PURE__*/jsx(Grid, {
       item: true,
@@ -1592,30 +1576,33 @@ var InlineGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
-    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
-var useStyles$a = /*#__PURE__*/makeStyles(theme => ({
-  root: {
-    '&$fullWidth': {
+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"]': {
       borderRadius: 0,
       borderLeftWidth: 0,
       borderRightWidth: 0
-    }
-  },
-  fullWidth: {},
-  sizeLarge: {},
-  content: {
-    padding: theme.spacing(2),
-    '$sizeLarge > &': {
+    },
+    ["&[data-size=\"large\"] > ".concat(StyledCardContent.toString())]: {
       [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(3)
       }
     }
-  }
-}), {
-  name: 'SD-InfoCard'
+  };
 });
-var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
+var InfoCard = /*#__PURE__*/forwardRef((_ref3, _ref4) => {
   var {
     size,
     square,
@@ -1623,31 +1610,20 @@ var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
     children,
     className,
     CardContentProps: cardContentProps = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
-
-  var _useStyles = useStyles$a({
-    classes
-  }),
-      {
-    content: contentClassName,
-    sizeLarge: sizeLargeClassName,
-    fullWidth: fullWidthClassName
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded$e);
 
   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(Card, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsx(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
-      assignRef(_ref2, node);
+      assignRef(_ref4, node);
       setRootNode(node);
     },
-    classes: styles,
-    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
-    children: /*#__PURE__*/jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
-      className: clsx(cardContentProps.className, contentClassName),
+    "data-size": size,
+    "data-full-width": isFullWidth,
+    children: /*#__PURE__*/jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
       children: children
     }))
   }));
@@ -1703,7 +1679,7 @@ var Inline = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$h = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$f = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     label,
@@ -1714,7 +1690,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   return /*#__PURE__*/jsxs(FormControl, {
     error: error,
@@ -1734,7 +1710,7 @@ var RadioField = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$i = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$g = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
     name,
@@ -1747,7 +1723,7 @@ var RadioGroupField = /*#__PURE__*/forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$i);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$g);
 
   return /*#__PURE__*/jsxs(FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -1797,9 +1773,9 @@ function useMinBreakpoint(minBreakpoint) {
   return minBreakpointIDX < breakpointIDX;
 }
 
-var _excluded$j = ["action", "children", "onClose", "className", "classes", "variant"],
-    _excluded2$3 = ["icon", "closeButton", "variantError", "variantSuccess"];
-var useStyles$b = /*#__PURE__*/makeStyles(theme => ({
+var _excluded$h = ["action", "children", "onClose", "className", "classes", "variant"],
+    _excluded2$1 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var useStyles$1 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     color: Color.White,
     backgroundColor: Color.Dark500,
@@ -1842,9 +1818,9 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
-  var _useStyles = useStyles$b({
+  var _useStyles = useStyles$1({
     classes
   }),
       {
@@ -1853,7 +1829,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     variantError,
     variantSuccess
   } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$3);
+      styles = _objectWithoutProperties(_useStyles, _excluded2$1);
 
   var Icon = variant === 'error' ? Warning : variant === 'success' ? CheckCircle : undefined;
   return /*#__PURE__*/jsx(SnackbarContent$1, _objectSpread(_objectSpread({}, props), {}, {
@@ -1892,7 +1868,7 @@ var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$k = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$i = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
   return /*#__PURE__*/jsx(Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -1911,7 +1887,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$k);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -1940,7 +1916,7 @@ var Snackbar = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$l = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$j = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -1986,7 +1962,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$l);
+        props = _objectWithoutProperties(_ref3, _excluded$j);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2083,8 +2059,8 @@ var Stack = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$m = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-var useStyles$c = /*#__PURE__*/makeStyles(theme => ({
+var _excluded$k = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var useStyles$2 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     alignItems: 'center',
@@ -2167,9 +2143,9 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
-  var styles = useStyles$c({
+  var styles = useStyles$2({
     classes
   });
   return /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({}, props), {}, {
@@ -2195,29 +2171,28 @@ var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Tag.displayName = "Tag";
 
 function overrideAppBar(theme) {
-  theme.props.MuiAppBar = {
-    elevation: 0,
-    color: 'inherit',
-    position: 'static'
+  theme.components.MuiAppBar = {
+    defaultProps: {
+      elevation: 0,
+      color: 'inherit',
+      position: 'static'
+    }
   };
 }
 
 function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm'); // Remove `Object.assign` after official release of `Autocomplete`.
-
-  Object.assign(theme.props, {
-    MuiAutocomplete: {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiAutocomplete = {
+    defaultProps: {
       popupIcon: /*#__PURE__*/jsx(SvgIcon, {
         children: /*#__PURE__*/jsx("path", {
           d: "M12 16.5L6 9h12l-6 7.5z",
           fill: "currentColor"
         })
       })
-    }
-  });
-  Object.assign(theme.overrides, {
-    MuiAutocomplete: {
-      paper: _objectSpread({}, theme.typography.body2),
+    },
+    styleOverrides: {
+      // paper: { ...theme.typography.body2 },
       tag: {
         margin: '4px',
         [sm]: {
@@ -2241,45 +2216,47 @@ function overrideAutocomplete(theme) {
       inputRoot: {
         '&[class*="MuiOutlinedInput-root"]': {
           padding: '6px 8px',
-          '& $input': {
+          ["& .".concat(autocompleteClasses.input)]: {
             width: '144px',
             padding: '4px'
           },
-          '& $input:first-child': {
-            paddingLeft: undefined
+          ["& .".concat(autocompleteClasses.input, ":first-child")]: {
+            paddingLeft: 'unset'
           },
-          '& $endAdornment': {
+          ["& .".concat(autocompleteClasses.endAdornment)]: {
             right: '12px'
           },
           [sm]: {
             padding: theme.spacing(0.5, 0.75),
-            '& $input': {
+            ["& .".concat(autocompleteClasses.input)]: {
               padding: '2px'
             },
-            '& $endAdornment': {
+            ["& .".concat(autocompleteClasses.endAdornment)]: {
               right: '8px'
             }
           }
         }
       }
     }
-  });
+  };
 }
 
 function overrideAvatar(theme) {
-  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)
+  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
       }
-    }),
-    colorDefault: {
-      color: Color.Dark300,
-      backgroundColor: Color.Silver300
     }
   };
 }
@@ -2292,9 +2269,11 @@ 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
     },
@@ -2305,13 +2284,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: Color.Transparent
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      backgroundColor: Color.Transparent,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -2325,11 +2304,11 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
   return {
     backgroundColor,
     color: staleText,
-    border: undefined,
+    border: 0,
     boxShadow: outlinedBorder(staleBorder),
     '&:hover': {
       color: activeText,
-      border: undefined,
+      border: 0,
       backgroundColor: activeBackground,
       boxShadow: outlinedBorder(activeBorder)
     },
@@ -2341,13 +2320,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder)
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      boxShadow: outlinedBorder(disabledBorder),
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -2366,229 +2345,236 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    '&$disabled': {
+    ["&.".concat(buttonClasses.disabled)]: {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground
+      backgroundColor: disabledBackground,
+      ["& .".concat(loadingButtonClasses.loadingIndicator)]: {
+        color: disabledText
+      }
     }
   };
 }
 
+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.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.MuiLoadingButton = {
+    defaultProps: {
+      variant: 'outlined'
+    },
+    styleOverrides: {
+      loadingIndicator: {
+        color: 'inherit',
+        fontSize: theme.spacing(2),
+        [".".concat(buttonClasses.sizeLarge, " &")]: {
+          fontSize: theme.spacing(3)
         }
       }
-    },
-    label: {
-      '& > .MuiSvgIcon-root': {
-        fontSize: '24px',
+    }
+  };
+  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),
         [sm]: {
-          fontSize: '20px'
+          padding: theme.spacing(0.75, 2)
         },
-        '$sizeLarge &': {
-          fontSize: '28px',
-          [sm]: {
-            fontSize: '24px'
+        '&:hover': {
+          backgroundColor: 'initial',
+          ["&.".concat(buttonClasses.disabled)]: {
+            backgroundColor: 'initial'
+          },
+          '@media (hover: none)': {
+            backgroundColor: 'initial'
           }
-        }
-      }
-    },
-    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
+        ["&.".concat(buttonClasses.disabled)]: {
+          color: 'initial'
+        },
+        '& > .MuiSvgIcon-root': {
+          fontSize: '24px',
+          [sm]: {
+            fontSize: '20px'
+          },
+          [".".concat(buttonClasses.sizeLarge, "&")]: {
+            fontSize: '28px',
+            [sm]: {
+              fontSize: '24px'
+            }
+          }
         }
       },
-      '&:active': {
-        boxShadow: 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)
       },
-      '&$focusVisible': {
-        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)
       },
-      '&$disabled': {
-        color: undefined,
-        boxShadow: undefined,
-        backgroundColor: 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)
       },
-      '&[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
+      containedPrimary: containedVariant(Color.White, Color.Blue300, Color.Blue100, Color.Blue500, Color.White, Color.Blue100),
+      containedSizeSmall: sizeSmall(theme),
+      containedSizeLarge: sizeLarge(theme)
     }
   };
 }
 
 function overrideCard(theme) {
-  theme.props.MuiCard = {
-    variant: 'outlined'
+  theme.components.MuiCard = {
+    defaultProps: {
+      variant: 'outlined'
+    }
   };
-  theme.overrides.MuiCardContent = {
-    root: {
-      '&:last-child': {
-        paddingBottom: undefined
+  theme.components.MuiCardContent = {
+    styleOverrides: {
+      root: {
+        '&:last-child': {
+          paddingBottom: '16px'
+        }
       }
     }
   };
 }
 
 function overrideCheckbox(theme) {
-  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"
+  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"
+        })]
       })
-    }),
-    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)
     },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color.Silver500
+    styleOverrides: {
+      root: {
+        color: Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
       },
-      '&:hover:not($checked)': {
-        color: Color.Dark100
+      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
+        }
       }
     }
   };
@@ -2596,197 +2582,223 @@ function overrideCheckbox(theme) {
 
 function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
-  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.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.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
-    },
-    labelSmall: {
-      paddingLeft: 6,
-      paddingRight: 6,
-      [sm]: {
-        paddingLeft: 4,
-        paddingRight: 4
-      }
     },
-    clickable: {
-      '&:hover, &:focus': {
-        backgroundColor: 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'
       },
-      '&:active': {
-        boxShadow: undefined
+      labelSmall: {
+        paddingLeft: 6,
+        paddingRight: 6,
+        [sm]: {
+          paddingLeft: 4,
+          paddingRight: 4
+        }
       },
-      '&:focus': {
-        boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+      clickable: {
+        '&:hover, &:focus': {
+          backgroundColor: Color.Silver200
+        },
+        '&:active': {
+          boxShadow: 'unset'
+        },
+        '&:focus': {
+          boxShadow: "0 0 0 2px ".concat(Color.Silver300)
+        },
+        '&:active, &:hover': {
+          backgroundColor: Color.Silver300
+        }
       },
-      '&: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': {
+      deletable: {
+        '&:focus': {
+          backgroundColor: Color.Silver200,
+          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
+          }
+        },
         '& > svg': {
-          backgroundColor: Color.Silver400
+          borderRadius: '50%',
+          color: Color.Dark200,
+          fontSize: '1em'
         }
       },
-      '& > 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
+      deleteIconSmall: {
+        width: 'unset',
+        height: 'unset',
+        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: 'unset'
+      },
+      iconSmall: {
+        width: 'unset',
+        height: 'unset',
+        marginLeft: 8,
+        marginRight: 'unset',
+        [sm]: {
+          marginLeft: 4
+        }
       }
     }
   };
 }
 
 function overrideDialog(theme) {
-  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.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.overrides.MuiDialogTitle = {
-    root: _objectSpread({}, theme.typography.h3)
+  theme.components.MuiDialogTitle = {
+    defaultProps: {
+      // @ts-expect-error DialogTitleProps has missing type def
+      variant: 'h3'
+    }
   };
-  theme.overrides.MuiDialogContent = {
-    root: {
-      padding: theme.spacing(0, 3)
+  theme.components.MuiDialogContent = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(0, 3)
+      }
     }
   };
-  theme.overrides.MuiDialogActions = {
-    root: {
-      padding: theme.spacing(3)
-    },
-    spacing: {
-      '& > :not(:first-child)': {
-        marginLeft: theme.spacing(2)
+  theme.components.MuiDialogActions = {
+    styleOverrides: {
+      root: {
+        padding: theme.spacing(3)
+      },
+      spacing: {
+        '& > :not(:first-child)': {
+          marginLeft: theme.spacing(2)
+        }
       }
     }
   };
 }
 
 function overrideDrawer(theme) {
-  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
+  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
+        }
       }
     }
   };
 }
 
 function overrideIconButton(theme) {
-  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
+  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
+        }
       },
-      '&:active': {
-        color: Color.Dark500
+      colorPrimary: {
+        '&:active': {
+          color: Color.Blue500
+        },
+        '&:hover ': {
+          color: Color.Blue300
+        },
+        '&:focus': {
+          backgroundColor: Color.Blue50
+        }
       },
-      '&:hover ': {
-        color: Color.Dark300
+      edgeEnd: {
+        marginRight: theme.spacing(-1)
       },
-      '&:focus': {
-        backgroundColor: Color.Silver400
+      edgeStart: {
+        marginLeft: theme.spacing(-1)
       },
-      '&$disabled': {
-        color: Color.Silver500
-      }
-    },
-    colorPrimary: {
-      '&:active': {
-        color: Color.Blue500
+      sizeSmall: {
+        padding: 3,
+        fontSize: theme.typography.pxToRem(18)
       },
-      '&:hover ': {
-        color: Color.Blue300
+      sizeMedium: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(24)
       },
-      '&:focus': {
-        backgroundColor: Color.Blue50
+      sizeLarge: {// todo declare large size
       }
-    },
-    edgeEnd: {
-      marginRight: theme.spacing(-1)
-    },
-    edgeStart: {
-      marginLeft: theme.spacing(-1)
     }
   };
 }
@@ -2796,344 +2808,383 @@ function line(color) {
 }
 
 function overrideLink(theme) {
-  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')
+  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')
+        }
       },
-      '&.MuiTypography-colorTextPrimary': {
+      // @ts-expect-error type def need in patch-package
+      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.overrides.MuiListItem = {
-    root: {
-      '&$selected, &$selected:hover': {
-        backgroundColor: Color.Blue50
-      },
-      '& .MuiTouchRipple-root': {
-        color: Color.Blue100
+  theme.components.MuiListItem = {
+    styleOverrides: {
+      root: {
+        ["&.".concat(listItemClasses.selected, ", &.").concat(listItemClasses.selected, ":hover")]: {
+          backgroundColor: Color.Blue50
+        },
+        '& .MuiTouchRipple-root': {
+          color: Color.Blue100
+        }
       }
     }
   };
 }
 
 function overrideMenu(theme) {
-  theme.props.MuiMenu = {
-    getContentAnchorEl: null,
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'left'
+  theme.components.MuiMenu = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      }
     }
   };
-  theme.overrides.MuiMenuItem = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1)
-    })
+  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
+          }
+        }
+      })
+    }
   };
 }
 
 function overridePagination(theme) {
-  var props = {};
-  var overrides = {
-    root: {
-      color: Color.Dark400
-    },
-    page: {
-      '&:hover': {
-        backgroundColor: Color.Silver200
-      },
-      '&$focusVisible': {
-        borderRadius: 4,
-        backgroundColor: Color.White,
-        border: "1px solid ".concat(Color.Blue100)
+  theme.components.MuiPaginationItem = {
+    styleOverrides: {
+      root: {
+        color: Color.Dark400
       },
-      '&$selected': {
-        backgroundColor: Color.Silver400,
-        '&:hover, &$focusVisible': {
-          backgroundColor: Color.Silver400
+      page: {
+        '&:hover': {
+          backgroundColor: Color.Silver200
         },
-        '&$disabled': {
-          color: Color.Dark100,
-          backgroundColor: Color.Silver400
+        ["&.".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
+          }
+        },
+        ["&.".concat(paginationItemClasses.disabled)]: {
+          opacity: 1,
+          color: Color.Dark100
         }
-      },
-      '&$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.props.MuiPaper = {
-    elevation: 0
-  };
-  theme.overrides.MuiPaper = {
-    elevation0: {
-      border: "1px solid ".concat(Color.Silver400)
+  theme.components.MuiPaper = {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      elevation0: {
+        border: "1px solid ".concat(Color.Silver400)
+      }
     }
   };
 }
 
 function overrideRadio(theme) {
-  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"
+  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
+        })]
       })
-    }),
-    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)
     },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color.Silver500
+    styleOverrides: {
+      root: {
+        color: Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
       },
-      '&:hover:not($checked)': {
-        color: Color.Dark100
+      colorPrimary: {
+        ["&.".concat(radioClasses.disabled, ".").concat(radioClasses.checked)]: {
+          color: Color.Silver500
+        },
+        ["&:hover:not(.".concat(radioClasses.checked, ")")]: {
+          color: Color.Dark100
+        }
       }
     }
   };
 }
 
 function overrideSnackbar(theme) {
-  theme.overrides.MuiSnackbar = {
-    anchorOriginBottomCenter: {
-      left: 0,
-      right: 0,
-      bottom: 0
+  theme.components.MuiSnackbar = {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      }
+    },
+    styleOverrides: {
+      anchorOriginBottomCenter: {
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
     }
   };
-  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)
+  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'
       }
-    },
-    message: {
-      flex: 1,
-      display: 'flex'
     }
   };
 }
 
 function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
-  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)'
+  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
       }
-    },
-    fontSizeLarge: {
-      fontSize: 'var(--mui-svg-icon-size, 32px)'
-    },
-    colorAction: {
-      color: Color.Dark100
     }
   };
 }
 
 function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
-  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)
+  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)
+        }
       },
-      '&$checked': {
-        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
+      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),
         [sm]: {
-          transform: "translateX(".concat(theme.spacing(2), "px)")
+          borderRadius: theme.spacing(1.625)
         }
       },
-      '&$checked + $track': {
-        opacity: undefined
+      thumb: {
+        color: Color.White,
+        boxShadow: 'none',
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        [sm]: {
+          width: theme.spacing(2),
+          height: theme.spacing(2)
+        }
       },
-      '&$disabled + $track': {
-        opacity: undefined
-      }
-    },
-    colorPrimary: {
-      '&$checked': {
-        color: undefined,
-        '&:hover': {
-          backgroundColor: undefined,
-          '& + $track': {
-            backgroundColor: Color.Blue400
+      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), ")")
           }
+        },
+        ["&.".concat(switchClasses.checked, " + .").concat(switchClasses.track)]: {
+          opacity: 1
+        },
+        ["&.".concat(switchClasses.disabled, " + .").concat(switchClasses.track)]: {
+          opacity: 1
         }
       },
-      '& + $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)
+      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)
+        }
       }
     }
   };
 }
 
 function overrideTabs(theme) {
-  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.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.overrides.MuiTab = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      minHeight: theme.spacing(6),
-      transition: theme.transitions.create(['color'], {
-        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.breakpoints.up('sm')]: {
-        minWidth: undefined,
-        fontSize: undefined,
-        padding: theme.spacing(0.75, 3)
-      }
-    }),
-    textColorPrimary: {
-      color: Color.Dark500,
-      '&:hover, &:focus': {
-        color: Color.Blue300
+      textColorPrimary: {
+        color: Color.Dark500,
+        '&:hover, &:focus': {
+          color: Color.Blue300
+        }
       }
     }
   };
@@ -3150,223 +3201,248 @@ 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.props.MuiTextField = {
-    minRows: 4,
-    maxRows: 4,
-    variant: 'outlined'
+  theme.components.MuiTextField = {
+    defaultProps: {
+      minRows: 4,
+      maxRows: 4,
+      variant: 'outlined'
+    }
   };
-  theme.overrides.MuiFormLabel = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      color: Color.Dark400,
-      '&$error': {
-        color: undefined
-      },
-      '&$focused': {
-        color: undefined
-      },
-      '&$disabled': {
-        color: undefined
-      }
-    })
+  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.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)
+  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)
+        }
+      },
+      inputMultiline: {
+        resize: 'vertical'
       }
-    },
-    inputMultiline: {
-      resize: 'vertical'
     }
   };
-  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.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.MuiOutlinedInput = {
-    notched: false
-  };
-  theme.overrides.MuiOutlinedInput = {
-    root: {
-      '&:hover $notchedOutline': {
-        borderColor: undefined
-      }
-    },
-    input: {
-      padding: theme.spacing(1.25, 1.5),
-      [sm]: {
+  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: {
         padding: theme.spacing(0.75, 1)
-      }
-    },
-    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'
+      },
+      adornedStart: {
+        paddingLeft: theme.spacing(1)
+      },
+      adornedEnd: {
+        paddingRight: theme.spacing(1)
+      },
+      notchedOutline: {
+        top: 0,
+        borderColor: Color.Silver500,
+        '& legend': {
+          display: 'none'
+        }
       }
     }
   };
-  theme.props.MuiSelect = {
-    IconComponent: SelectIcon
-  };
-  theme.overrides.MuiSelect = {
-    icon: {
-      top: 'calc(50% - 0.5em)',
-      '$disabled &': {
-        color: Color.Dark100
+  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)
+        }
       },
-      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: {
-      '&&': {
+      iconOutlined: {
+        right: theme.spacing(1.5),
+        [sm]: {
+          right: theme.spacing(1)
+        }
+      },
+      select: {
         paddingRight: theme.spacing(4.5),
         [sm]: {
           right: theme.spacing(4)
+        },
+        '&:focus': {
+          backgroundColor: 'unset'
         }
       }
     }
   };
-  theme.overrides.MuiInputAdornment = {
-    root: {
-      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2.5)
+  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)
         }
       },
-      '& .MuiIconButton-root': {
-        padding: theme.spacing(1)
-      }
-    },
-    positionStart: {
-      '& .MuiIconButton-root': {
-        marginLeft: theme.spacing(-0.5),
-        [sm]: {
-          marginLeft: theme.spacing(-0.75)
+      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.overrides.MuiFormHelperText = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      marginTop: theme.spacing(0.5)
-    }),
-    contained: {
-      marginLeft: undefined,
-      marginRight: undefined
+  theme.components.MuiFormHelperText = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        marginTop: theme.spacing(0.5)
+      }),
+      contained: {
+        marginLeft: 'unset',
+        marginRight: 'unset'
+      }
     }
   };
 }
 
 function overrideToolbar(theme) {
-  theme.overrides.MuiToolbar = {
-    regular: {
-      minHeight: theme.spacing(8)
-    },
-    gutters: {
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2)
+  theme.components.MuiToolbar = {
+    styleOverrides: {
+      regular: {
+        minHeight: theme.spacing(8)
+      },
+      gutters: {
+        [theme.breakpoints.up('sm')]: {
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(2)
+        }
       }
     }
   };
 }
 
 function overrideTooltip(theme) {
-  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
+  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
+          }
         }
       },
-      '&[x-placement*="bottom"] $arrow': {
-        '&::before': {
-          borderTopLeftRadius: 2
-        }
+      arrow: {
+        color: Color.Dark400,
+        fontSize: theme.spacing(1)
       }
-    },
-    arrow: {
-      color: Color.Dark400,
-      fontSize: theme.spacing(1)
     }
   };
 }
@@ -3476,8 +3552,18 @@ function createTypographyOptions(breakpoints) {
   };
 }
 function overrideTypography(theme) {
-  theme.props.MuiTypography = {
-    variant: 'body2'
+  theme.components.MuiTypography = {
+    defaultProps: {
+      variant: 'body2'
+    }
+  };
+}
+
+function overrideCssBaseline(theme) {
+  theme.components.MuiCssBaseline = {
+    styleOverrides: {
+      body: _objectSpread({}, theme.typography.body2)
+    }
   };
 }
 
@@ -3500,39 +3586,39 @@ function createSuperDispatchTheme() {
       text: {
         primary: Color.Dark500,
         secondary: Color.Dark200,
-        hint: Color.Dark100,
+        // hint: Color.Dark100, todo
         disabled: Color.Dark100
       },
       divider: Color.Silver400
     },
     typography: createTypographyOptions(breakpoints),
-    props: {},
-    overrides: {}
+    components: {}
   });
+  overrideCard(theme);
+  overrideButton(theme);
   overrideAppBar(theme);
-  overrideAutocomplete(theme);
+  overridePaper(theme);
+  overrideTooltip(theme);
+  overrideSvgIcon(theme);
+  overrideToolbar(theme);
+  overrideIconButton(theme);
+  overrideTypography(theme);
+  overrideMenu(theme);
   overrideAvatar(theme);
-  overrideButton(theme);
-  overrideCard(theme);
+  overrideTextField(theme);
+  overrideAutocomplete(theme);
+  overrideCssBaseline(theme);
   overrideCheckbox(theme);
+  overrideRadio(theme);
+  overrideSwitch(theme);
   overrideChip(theme);
   overrideDialog(theme);
   overrideDrawer(theme);
-  overrideIconButton(theme);
-  overrideLink(theme);
+  overridePagination(theme);
   overrideList(theme);
-  overrideMenu(theme);
-  overridePaper(theme);
-  overrideRadio(theme);
+  overrideLink(theme);
   overrideSnackbar(theme);
-  overrideSvgIcon(theme);
-  overrideSwitch(theme);
   overrideTabs(theme);
-  overrideTextField(theme);
-  overrideToolbar(theme);
-  overrideTooltip(theme);
-  overrideTypography(theme);
-  overridePagination(theme);
   return theme;
 }
 
@@ -3580,12 +3666,9 @@ function ThemeProvider(_ref) {
     generateClassName: generateClassName,
     children: /*#__PURE__*/jsxs(ThemeProvider$1, {
       theme: theme,
-      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ThemeProvider$2, {
-        theme: theme,
-        children: /*#__PURE__*/jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/jsx(SnackbarStackProvider, {
-            children: children
-          })
+      children: [/*#__PURE__*/jsx(CssBaseline, {}), /*#__PURE__*/jsx(ResponsiveContextProvider, {
+        children: /*#__PURE__*/jsx(SnackbarStackProvider, {
+          children: children
         })
       })]
     })
@@ -3596,12 +3679,13 @@ var PREVENT_COLLAPSE = 1;
 
 function spaceVariant(theme, space) {
   var gap = theme.spacing(space);
+  var parsedGap = parseInt(gap);
   return {
     '&:before': {
-      marginTop: -gap - PREVENT_COLLAPSE
+      marginTop: -parsedGap - PREVENT_COLLAPSE
     },
     '& > $container': {
-      marginLeft: -gap,
+      marginLeft: -parsedGap,
       '& > $child > $childContainer': {
         marginTop: gap,
         marginLeft: gap
@@ -3616,7 +3700,7 @@ function columnVariant(columns) {
   };
 }
 
-var useStyles$d = /*#__PURE__*/makeStyles(theme => ({
+var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,
     '&:before': {
@@ -3660,7 +3744,7 @@ var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
     space: spaceProp = 1,
     columns: columnsProp = 1
   } = _ref;
-  var styles = useStyles$d({});
+  var styles = useStyles$3({});
   var space = useResponsivePropRecord(spaceProp);
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsx("div", {