@superdispatch/ui 0.21.0 → 0.21.5-alpha.1

package/dist-node/index.js

@@ -6,45 +6,43 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var _objectSpread = _interopDefault(require('@babel/runtime/helpers/objectSpread2'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var core = require('@material-ui/core');
-var icons = require('@material-ui/icons');
-var styles = require('@material-ui/styles');
+var iconsMaterial = require('@mui/icons-material');
+var material = require('@mui/material');
 var React = require('react');
+var lab = require('@mui/lab');
 var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var resizeObserver = require('@juggle/resize-observer');
 var hooks = require('@superdispatch/hooks');
-var clsx = _interopDefault(require('clsx'));
+var styles = require('@mui/styles');
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
+var clsx = _interopDefault(require('clsx'));
+var system = require('@mui/system');
 
-var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
+var _excluded = ["size", "children", "isActive", "isLoading", "color"];
 var Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     size,
     children,
-    disabled,
     isActive,
     isLoading,
     color = 'primary'
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/jsxRuntime.jsx(core.Button, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(lab.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [children, /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
-        size: "1em",
-        color: "inherit"
-      })]
-    })
+    color: color === 'primary' ? color : 'inherit',
+    loadingIndicator: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
+      size: "1em",
+      color: "inherit"
+    }),
+    children: children
   }));
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
@@ -107,7 +105,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(core.ButtonGroup, _objectSpread(_objectSpread({}, ButtonGroupProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(material.ButtonGroup, _objectSpread(_objectSpread({}, ButtonGroupProps), {}, {
       ref: mergeRefs(ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.ref, anchorRef),
       fullWidth: (ButtonGroupProps === null || ButtonGroupProps === void 0 ? void 0 : ButtonGroupProps.fullWidth) || buttonProps.fullWidth,
       children: [/*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
@@ -127,7 +125,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         "aria-expanded": open ? 'true' : undefined,
         children: /*#__PURE__*/jsxRuntime.jsx(CaretDownIcon, {})
       })]
-    })), /*#__PURE__*/jsxRuntime.jsx(core.Popover, {
+    })), /*#__PURE__*/jsxRuntime.jsx(material.Popover, {
       open: open,
       onClose: handleClose,
       anchorEl: anchorRef.current,
@@ -139,7 +137,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         style: {
           minWidth: (_anchorRef$current2 = anchorRef.current) === null || _anchorRef$current2 === void 0 ? void 0 : _anchorRef$current2.clientWidth
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(core.MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
           id: uid,
           onClick: () => {
             setOpen(false);
@@ -171,12 +169,12 @@ function useResizeObserver(node, observer) {
 }
 
 var _excluded$2 = ["items"];
-var useStyles = /*#__PURE__*/styles.makeStyles({
-  actions: {
-    overflow: 'hidden'
-  }
-}, {
+var GridActionsItem = /*#__PURE__*/material.styled(material.Grid, {
   name: 'SD-AdaptiveToolbar'
+})(() => {
+  return {
+    overflow: 'hidden'
+  };
 });
 var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
@@ -184,7 +182,6 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$2);
 
-  var styles = useStyles();
   var itemNodes = React.useRef([]);
   var optionsButtonRef = React.useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = React.useState(-1);
@@ -220,21 +217,20 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     setFirstHiddenIdx(hiddenIdx);
   });
-  return /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Toolbar, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
       spacing: 1,
       ref: setRootNode,
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(GridActionsItem, {
         item: true,
-        className: styles.actions,
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
           container: true,
           spacing: 1,
           wrap: "nowrap",
           component: "div",
-          children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+          children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
             item: true,
             ref: node => {
               itemNodes.current[idx] = node;
@@ -244,15 +240,17 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               onClick: item.onClick,
               label: item.label
             }, item.ButtonProps), {}, {
-              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
                 onClick: dropdownItem.onClick,
                 children: dropdownItem.label
               }, dropdownItem.key))
             })) : /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({
               type: "button",
+              color: "primary",
+              variant: "outlined",
               onClick: item.onClick
             }, item.ButtonProps), {}, {
-              children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+              children: /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
                 noWrap: true,
                 variant: "inherit",
                 children: item.label
@@ -260,20 +258,21 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             }))
           }, item.key))
         })
-      }), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+      }), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
         item: true,
         ref: optionsButtonRef,
         component: "div",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
           type: "button",
+          variant: "outlined",
           onClick: _ref2 => {
             var {
               currentTarget
             } = _ref2;
             setMenuButtonRef(currentTarget);
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.MoreHoriz, {})
-        }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+          children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {})
+        }), /*#__PURE__*/jsxRuntime.jsx(material.Menu, {
           open: !!menuButtonNode,
           anchorEl: menuButtonNode,
           onClose: () => {
@@ -284,7 +283,7 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
             var next = arr[index + 1];
             return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
                 onClick: event => {
                   var _item$onClick;
 
@@ -292,7 +291,7 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   setMenuButtonRef(undefined);
                 },
                 children: item.label
-              }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+              }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
                 onClick: event => {
                   var _dropdownItem$onClick;
 
@@ -300,7 +299,7 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   setMenuButtonRef(undefined);
                 },
                 children: dropdownItem.label
-              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/jsxRuntime.jsx(core.Divider, {})]
+              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/jsxRuntime.jsx(material.Divider, {})]
             });
           })
         })]
@@ -331,7 +330,7 @@ function assignRef(ref, value) {
   }
 }
 
-var useStyles$1 = /*#__PURE__*/styles.makeStyles({
+var useStyles = /*#__PURE__*/styles.makeStyles({
   root: {
     overflow: 'hidden',
     height: '100%'
@@ -342,7 +341,7 @@ var useStyles$1 = /*#__PURE__*/styles.makeStyles({
 
 var defaultMoreElement = /*#__PURE__*/jsxRuntime.jsx(Button, {
   type: "button",
-  children: /*#__PURE__*/jsxRuntime.jsx(icons.MoreHoriz, {})
+  children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {})
 });
 
 var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -353,7 +352,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     renderItem = item => item.label,
     renderMenuItem = item => item.label
   } = _ref;
-  var styles = useStyles$1();
+  var styles = useStyles();
   var itemNodes = React.useRef([]);
   var optionsButtonRef = React.useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = React.useState(-1);
@@ -388,7 +387,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     setFirstHiddenIdx(hiddenIdx);
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
     direction: "column",
     container: true,
     wrap: "nowrap",
@@ -397,13 +396,13 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: mergeRefs(ref, node => {
       setRootNode(node);
     }),
-    children: [items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+    children: [items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       item: true,
       ref: node => {
         itemNodes.current[idx] = node;
       },
       children: renderItem(item)
-    }, item.key)), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+    }, item.key)), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       item: true,
       ref: optionsButtonRef,
       component: "div",
@@ -414,7 +413,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           } = _ref2;
           setMenuButtonRef(currentTarget);
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+      }), /*#__PURE__*/jsxRuntime.jsx(material.Menu, {
         open: !!menuButtonNode,
         anchorEl: menuButtonNode,
         onClose: () => {
@@ -422,7 +421,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         },
         children: menuItems.flatMap((item, index, arr) => {
           var next = arr[index + 1];
-          return [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+          return [/*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
             onClick: event => {
               var _item$onClick;
 
@@ -430,7 +429,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               setMenuButtonRef(undefined);
             },
             children: renderMenuItem(item)
-          }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}, "".concat(item.key, "-divider"))];
+          }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/jsxRuntime.jsx(material.Divider, {}, "".concat(item.key, "-divider"))];
         })
       })]
     })]
@@ -514,66 +513,81 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.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__*/styles.makeStyles(theme => {
+var _excluded$3 = ["size", "icon", "isLoading", "disabled", "avatarRef", "alt", "imgProps", "sizes", "src", "srcSet", "variant", "children"];
+var Overlay = /*#__PURE__*/material.styled('div')(_ref => {
+  var {
+    theme
+  } = _ref;
   var sm = theme.breakpoints.up('sm');
   return {
-    button: {
-      borderRadius: '50%',
-      '&[disabled], &[aria-busy="true"]': {
-        '& > $overlay': {
-          backgroundColor: exports.Color.White50
-        }
-      },
-      '&:not([disabled])[aria-busy="false"]': {
-        '&:hover, &:focus': {
-          '&$withIcon > $overlay': {
-            backgroundColor: exports.Color.Black50,
-            '& > svg': {
-              opacity: 1
-            }
-          },
-          '&:not($withIcon) > $overlay': {
-            backgroundColor: exports.Color.Black20
-          }
-        }
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    backgroundColor: exports.Color.Transparent,
+    transition: theme.transitions.create('background-color'),
+    '& > svg': {
+      opacity: 0,
+      color: exports.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: exports.Color.Transparent,
-      transition: theme.transitions.create('background-color'),
-      '& > svg': {
-        opacity: 0,
-        color: exports.Color.White,
-        transition: theme.transitions.create('opacity'),
-        fontSize: theme.spacing(3),
-        [sm]: {
-          fontSize: theme.spacing(2)
-        }
+    }
+  };
+});
+var StyledProgress = /*#__PURE__*/material.styled(material.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__*/material.styled(material.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: exports.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: exports.Color.Black50,
+          '& > svg': {
+            opacity: 1
+          }
+        },
+        ["&:not([data-with-icon=\"true\"]) > ".concat(Overlay.toString())]: {
+          backgroundColor: exports.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]: {
@@ -581,8 +595,8 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => {
           height: theme.spacing(8)
         }
       }),
-      '& > $overlay': {
-        '& > $progress': {
+      ["& > ".concat(Overlay.toString())]: {
+        ["& > ".concat(StyledProgress.toString())]: {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -595,27 +609,16 @@ var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => {
           }
         }
       }
-    },
-    root: {},
-    colorDefault: {},
-    circular: {},
-    rounded: {},
-    square: {},
-    img: {},
-    fallback: {}
+    }
   };
-}, {
-  name: 'SD-AvatarButton'
 });
-var AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+var AvatarButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   var {
     size,
     icon,
     isLoading = false,
-    classes,
     disabled = false,
     avatarRef,
-    className,
     alt,
     imgProps,
     sizes,
@@ -623,30 +626,18 @@ var AvatarButton = /*#__PURE__*/React.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__*/jsxRuntime.jsxs(core.ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.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),
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+    "data-with-icon": !!icon,
+    "data-size-large": size === 'large',
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
       ref: avatarRef,
-      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -654,11 +645,9 @@ var AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: overlayClassName,
-      children: [icon, isLoading && /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
+    }), /*#__PURE__*/jsxRuntime.jsxs(Overlay, {
+      children: [icon, isLoading && /*#__PURE__*/jsxRuntime.jsx(StyledProgress, {
         size: "1em",
-        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]
@@ -667,8 +656,11 @@ var AvatarButton = /*#__PURE__*/React.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__*/styles.makeStyles(theme => ({
-  root: {
+var StyledButton$1 = /*#__PURE__*/material.styled(material.ButtonBase)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -679,66 +671,74 @@ var useStyles$3 = /*#__PURE__*/styles.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: exports.Color.Dark200,
-    borderColor: exports.Color.Silver500,
-    backgroundColor: exports.Color.Silver100
-  },
-  error: {
-    color: exports.Color.Red300,
-    borderColor: exports.Color.Red300,
-    backgroundColor: exports.Color.Red50,
-    '&:focus': {
-      backgroundColor: exports.Color.Red75
-    }
-  },
-  primary: {
-    color: exports.Color.Blue300,
-    borderColor: exports.Color.Silver500,
-    '&:focus': {
-      backgroundColor: exports.Color.Blue50
+    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
+    '&[data-disabled="true"]': {
+      color: exports.Color.Dark200,
+      borderColor: exports.Color.Silver500,
+      backgroundColor: exports.Color.Silver100
     },
-    '&:hover, &:active': {
-      borderColor: exports.Color.Blue300,
-      backgroundColor: exports.Color.Blue50
+    '&[data-primary="true"]': {
+      color: exports.Color.Blue300,
+      borderColor: exports.Color.Silver500,
+      '&:focus': {
+        backgroundColor: exports.Color.Blue50
+      },
+      '&:hover, &:active': {
+        borderColor: exports.Color.Blue300,
+        backgroundColor: exports.Color.Blue50
+      }
+    },
+    '&[data-error="true"]': {
+      color: exports.Color.Red300,
+      borderColor: exports.Color.Red300,
+      backgroundColor: exports.Color.Red50,
+      '&:focus': {
+        backgroundColor: exports.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__*/material.styled(material.Typography)({
+  display: 'flex',
+  alignItems: 'center'
+});
+var Hint = /*#__PURE__*/material.styled(material.Typography)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    marginTop: theme.spacing(0.5)
+  };
+});
+var Icon = /*#__PURE__*/material.styled('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__*/React.forwardRef((_ref, ref) => {
+var CardButton = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   var {
     hint,
     size,
@@ -749,39 +749,33 @@ var CardButton = /*#__PURE__*/React.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__*/jsxRuntime.jsx(core.ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(core.Typography, {
+    "data-size": size,
+    "data-disabled": !!disabled,
+    "data-error": !disabled && !!error,
+    "data-primary": !disabled && !error,
+    children: error ? /*#__PURE__*/jsxRuntime.jsx(Label, {
       variant: "h4",
       color: "inherit",
-      className: styles.label,
       children: error
     }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Typography, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
         variant: "h4",
         color: "inherit",
-        className: styles.label,
-        children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx(styles.icon, styles.startIcon),
+        children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          "data-placement": "start",
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: clsx(styles.icon, styles.endIcon),
+        }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+          "data-placement": "end",
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
+      }), !!hint && /*#__PURE__*/jsxRuntime.jsx(Hint, {
         color: "textSecondary",
-        className: styles.hint,
         children: hint
       })]
     })
@@ -802,19 +796,19 @@ var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
       onChange: onChange,
-      control: /*#__PURE__*/jsxRuntime.jsx(core.Checkbox, _objectSpread({
+      control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, _objectSpread({
         ref: ref,
         color: "primary",
         disableRipple: true
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, {
       children: helperText
     })]
   });
@@ -833,15 +827,15 @@ var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       formControlProps = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(material.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
-    })), /*#__PURE__*/jsxRuntime.jsx(core.FormGroup, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/jsxRuntime.jsx(material.FormGroup, _objectSpread(_objectSpread({
       ref: ref
     }, formGroupProps), {}, {
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -851,7 +845,7 @@ if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "Che
 var Context = /*#__PURE__*/React.createContext({});
 
 function useBreakpoint(breakpoint) {
-  return core.useMediaQuery(theme => theme.breakpoints.only(breakpoint));
+  return material.useMediaQuery(theme => theme.breakpoints.only(breakpoint));
 }
 
 function ResponsiveContextProvider(_ref) {
@@ -1121,50 +1115,54 @@ function VisibilityObserver(_ref2) {
 }
 
 var _excluded$8 = ["title", "enterDelay"],
-    _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
-var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
-  root: {
+    _excluded2 = ["onClick", "children", "disableUnderline", "TooltipProps"];
+var Root = /*#__PURE__*/material.styled(material.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: exports.Color.Silver500
-    }
-  },
-  truncated: {},
-  sentinel: {
-    width: 1,
-    height: '100%',
-    display: 'inline-block'
-  }
-}), {
-  name: 'SD-OverflowText'
+    transition: theme.transitions.create('border')
+  }, truncated && {
+    cursor: 'pointer',
+    borderBottomColor: exports.Color.Silver500
+  });
 });
-var OverflowText = /*#__PURE__*/React.forwardRef((_ref, rootRef) => {
+var Sential = /*#__PURE__*/material.styled('span', {
+  name: 'SD-OverflowText',
+  slot: 'Sential'
+})({
+  width: 1,
+  height: '100%',
+  display: 'inline-block'
+});
+var OverflowText = /*#__PURE__*/React.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] = React.useState(false);
-  var styles = useStyles$4();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref3 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref3;
       var isTooltipEnabled = !!children && visibility === 'invisible';
-      return /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+      return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         enterDelay: 1000,
         title: title || '',
         disableFocusListener: true,
@@ -1175,17 +1173,16 @@ var OverflowText = /*#__PURE__*/React.forwardRef((_ref, rootRef) => {
         onClose: () => {
           setIsOpen(false);
         },
-        children: /*#__PURE__*/jsxRuntime.jsxs(core.Typography, _objectSpread(_objectSpread({}, props), {}, {
+        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("span", {
-            ref: ref,
-            className: styles.sentinel
+          children: [children, !!children && /*#__PURE__*/jsxRuntime.jsx(Sential, {
+            ref: ref
           })]
         }))
       }));
@@ -1205,29 +1202,18 @@ function useUID(defaultID) {
 }
 
 var _excluded$9 = ["size"];
-
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
+var DescriptionListItemRoot = /*#__PURE__*/material.styled('div', {
+  name: 'SD-DescriptionListItem',
+  slot: 'Root'
+})({
+  display: 'flex',
+  alignItems: 'center'
+});
+var DescriptionListItemIcon = /*#__PURE__*/material.styled('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__*/styles.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': {
@@ -1237,54 +1223,29 @@ var useStyles$5 = /*#__PURE__*/styles.makeStyles(theme => ({
         fontSize: theme.spacing(2)
       }
     }
-  }
-}), {
-  name: 'SD-DescriptionList'
-}); //
-// DescriptionList
-//
-
-var DescriptionList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var {
-    size
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-
-  var styles = useStyles$5();
-  return /*#__PURE__*/jsxRuntime.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__*/React.forwardRef((_ref2, ref) => {
   var _ref3, _contentTypographyPro, _contentTypographyPro2;
 
   var {
     inset,
-    icon = inset ? /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {}) : null,
+    icon = inset ? /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {}) : null,
     label,
     labelTypographyProps,
     content,
     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__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(DescriptionListItemRoot, {
     ref: ref,
-    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles.icon,
+    children: [!!icon && /*#__PURE__*/jsxRuntime.jsx(DescriptionListItemIcon, {
       children: icon
     }), /*#__PURE__*/jsxRuntime.jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -1292,7 +1253,7 @@ var DescriptionListItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       TooltipProps: _objectSpread(_objectSpread({}, contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : contentTypographyProps.TooltipProps), {}, {
         title: (_ref3 = (_contentTypographyPro = contentTypographyProps === null || contentTypographyProps === void 0 ? void 0 : (_contentTypographyPro2 = contentTypographyProps.TooltipProps) === null || _contentTypographyPro2 === void 0 ? void 0 : _contentTypographyPro2.title) !== null && _contentTypographyPro !== void 0 ? _contentTypographyPro : content) !== null && _ref3 !== void 0 ? _ref3 : undefined
       }),
-      children: [label != null && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
+      children: [label != null && /*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
         id: labelID,
         variant: "body2",
         component: "span",
@@ -1301,26 +1262,72 @@ var DescriptionListItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       })), label != null && ' ', !shouldRenderFallback ? content : fallback]
     }))]
   });
-});
+}); //
+// DescriptionList
+//
+
 if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
+var DescriptionListRoot = /*#__PURE__*/material.styled('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__*/styles.makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      bottom: 0,
-      top: 'auto',
-      borderLeft: 'none',
-      borderRight: 'none',
-      borderBottom: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderTopColor: exports.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__*/React.forwardRef((_ref5, ref) => {
+  var {
+    size
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded$9);
+
+  return /*#__PURE__*/jsxRuntime.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__*/material.styled(material.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: exports.Color.Transparent
+    }
+  };
+});
+var StyledToolbar = /*#__PURE__*/material.styled(material.Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1329,31 +1336,26 @@ var useStyles$6 = /*#__PURE__*/styles.makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  }
-}), {
-  name: 'SD-DrawerActions'
+  };
 });
-var DrawerActions = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
+var DrawerActions = /*#__PURE__*/React.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__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref4 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref4;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
-            className: styles.toolbar,
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/jsxRuntime.jsx(StyledToolbar, {
             children: children
           })
         })), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1365,33 +1367,20 @@ var DrawerActions = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var _excluded$b = ["className"];
-var useStyles$7 = /*#__PURE__*/styles.makeStyles(theme => ({
-  root: {
+var DrawerContent = /*#__PURE__*/material.styled('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__*/React.forwardRef((_ref, ref) => {
-  var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$b);
-
-  var styles = useStyles$7();
-  return /*#__PURE__*/jsxRuntime.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 {
@@ -1411,46 +1400,38 @@ function listItemMixins(theme, space) {
   };
 }
 
-var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
-  root: _objectSpread(_objectSpread({
+var DrawerList = /*#__PURE__*/material.styled(material.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__*/React.forwardRef((_ref, ref) => {
-  var {
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
-
-  var styles = useStyles$8();
-  return /*#__PURE__*/jsxRuntime.jsx(core.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__*/styles.makeStyles(theme => ({
-  appBar: {
-    '&&': {
-      borderTop: 'none',
-      borderLeft: 'none',
-      borderRight: 'none',
-      transition: theme.transitions.create(['border-color']),
-      '&:not($appBarSticky)': {
-        borderBottomColor: exports.Color.Transparent
-      }
+var _excluded$b = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
+var StyledAppBar$1 = /*#__PURE__*/material.styled(material.AppBar)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    transition: theme.transitions.create(['border-color']),
+    '&[data-sticky="false"]': {
+      borderBottomColor: exports.Color.Transparent
     }
-  },
-  appBarSticky: {},
-  toolbar: {
-    '&.MuiToolbar-gutters': {
+  };
+});
+var StyledToolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)(_ref2 => {
+  var {
+    theme
+  } = _ref2;
+  return {
+    '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
       [theme.breakpoints.up('md')]: {
@@ -1458,75 +1439,78 @@ var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
         paddingRight: theme.spacing(4)
       }
     }
-  },
-  startAction: {
+  };
+});
+var StartAction = /*#__PURE__*/material.styled(material.Grid)(_ref3 => {
+  var {
+    theme
+  } = _ref3;
+  return {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  },
-  endAction: {
+  };
+});
+var EndAction = /*#__PURE__*/material.styled(material.Grid)(_ref4 => {
+  var {
+    theme
+  } = _ref4;
+  return {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  }
-}), {
-  name: 'SD-DrawerTitle'
+  };
 });
-var DrawerTitle = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
+var DrawerTitle = /*#__PURE__*/React.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__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref2 => {
+    render: _ref6 => {
       var {
         ref,
         visibility
-      } = _ref2;
+      } = _ref6;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           ref: ref
-        }), /*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/jsxRuntime.jsx(StyledAppBar$1, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
-          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
-            className: styles.toolbar,
-            children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+          "data-sticky": visibility === 'invisible',
+          children: /*#__PURE__*/jsxRuntime.jsx(StyledToolbar$1, {
+            children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+              children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(StartAction, {
                 item: true,
-                className: styles.startAction,
                 children: startAction
-              }), /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+              }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
                 item: true,
                 xs: true,
                 zeroMinWidth: true,
-                children: [/*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
+                children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({
                   variant: "h3",
                   noWrap: true
                 }, titleTypographyProps), {}, {
                   children: title
-                })), !!subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
+                })), !!subtitle && /*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({
                   variant: "body2",
                   noWrap: true
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+              }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(EndAction, {
                 item: true,
-                className: styles.endAction,
                 children: endAction
               })]
             })
@@ -1538,7 +1522,7 @@ var DrawerTitle = /*#__PURE__*/React.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`.
  */
@@ -1548,16 +1532,16 @@ var GridStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$e);
+      props = _objectWithoutProperties(_ref, _excluded$c);
 
   var items = React.Children.toArray(children);
-  return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     container: true,
     wrap: "nowrap",
     direction: "column",
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       item: true,
       zeroMinWidth: true,
       xs: alignItems === 'stretch' ? 12 : undefined,
@@ -1567,7 +1551,7 @@ var GridStack = /*#__PURE__*/React.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.
  */
@@ -1579,16 +1563,16 @@ var InlineGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
   var items = React.Children.toArray(children);
-  return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
     container: true,
-    justify: justify,
+    justifyContent: justify,
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
       item: true,
       zeroMinWidth: true,
       children: item
@@ -1597,30 +1581,33 @@ var InlineGrid = /*#__PURE__*/React.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__*/styles.makeStyles(theme => ({
-  root: {
-    '&$fullWidth': {
+var _excluded$e = ["size", "square", "classes", "children", "className", "CardContentProps"];
+var StyledCardContent = /*#__PURE__*/material.styled(material.CardContent)(_ref => {
+  var {
+    theme
+  } = _ref;
+  return {
+    padding: theme.spacing(2)
+  };
+});
+var StyledCard = /*#__PURE__*/material.styled(material.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__*/React.forwardRef((_ref, _ref2) => {
+var InfoCard = /*#__PURE__*/React.forwardRef((_ref3, _ref4) => {
   var {
     size,
     square,
@@ -1628,31 +1615,20 @@ var InfoCard = /*#__PURE__*/React.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] = React.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__*/jsxRuntime.jsx(core.Card, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(core.CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
-      className: clsx(cardContentProps.className, contentClassName),
+    "data-size": size,
+    "data-full-width": isFullWidth,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
       children: children
     }))
   }));
@@ -1708,7 +1684,7 @@ var Inline = /*#__PURE__*/React.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__*/React.forwardRef((_ref, ref) => {
   var {
     label,
@@ -1719,27 +1695,27 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$h);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
       onChange: onChange,
-      control: /*#__PURE__*/jsxRuntime.jsx(core.Radio, _objectSpread({
+      control: /*#__PURE__*/jsxRuntime.jsx(material.Radio, _objectSpread({
         ref: ref,
         color: "primary"
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, {
       children: helperText
     })]
   });
 });
 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__*/React.forwardRef((_ref, ref) => {
   var {
     name,
@@ -1752,20 +1728,20 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$i);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$g);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(material.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
-    })), /*#__PURE__*/jsxRuntime.jsx(core.RadioGroup, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/jsxRuntime.jsx(material.RadioGroup, _objectSpread(_objectSpread({
       ref: ref
     }, radioGroupProps), {}, {
       name: name,
       value: value,
       onChange: onChange,
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -1802,9 +1778,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__*/styles.makeStyles(theme => ({
+var _excluded$h = ["action", "children", "onClose", "className", "classes", "variant"],
+    _excluded2$1 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var useStyles$1 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     color: exports.Color.White,
     backgroundColor: exports.Color.Dark500,
@@ -1847,9 +1823,9 @@ var SnackbarContent = /*#__PURE__*/React.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
   }),
       {
@@ -1858,10 +1834,10 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variantError,
     variantSuccess
   } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$3);
+      styles = _objectWithoutProperties(_useStyles, _excluded2$1);
 
-  var Icon = variant === 'error' ? icons.Warning : variant === 'success' ? icons.CheckCircle : undefined;
-  return /*#__PURE__*/jsxRuntime.jsx(core.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
+  var Icon = variant === 'error' ? iconsMaterial.Warning : variant === 'success' ? iconsMaterial.CheckCircle : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(material.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
     className: clsx(className, {
@@ -1873,21 +1849,21 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         className: icon
       }), children]
     }),
-    action: !action && !onClose ? null : /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
+    action: !action && !onClose ? null : /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
       container: true,
       spacing: 1,
       alignItems: "center",
       wrap: "nowrap",
-      children: [!!action && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+      children: [!!action && /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
         children: action
-      }), onClose && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
+      }), onClose && /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
         item: true,
-        children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
           "aria-label": "close",
           onClick: onClose,
           className: closeButton,
-          children: /*#__PURE__*/jsxRuntime.jsx(icons.Close, {
+          children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Close, {
             fontSize: "small"
           })
         })
@@ -1897,10 +1873,10 @@ var SnackbarContent = /*#__PURE__*/React.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__*/jsxRuntime.jsx(core.Slide, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Slide, _objectSpread(_objectSpread({}, props), {}, {
     direction: "up"
   }));
 }
@@ -1916,7 +1892,7 @@ var Snackbar = /*#__PURE__*/React.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') {
@@ -1924,8 +1900,8 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(core.Snackbar, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(material.Snackbar, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       open: open,
       TransitionComponent: TransitionComponent,
@@ -1945,7 +1921,7 @@ var Snackbar = /*#__PURE__*/React.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
@@ -1991,7 +1967,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$l);
+        props = _objectWithoutProperties(_ref3, _excluded$j);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2088,8 +2064,8 @@ var Stack = /*#__PURE__*/React.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__*/styles.makeStyles(theme => ({
+var _excluded$k = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     alignItems: 'center',
@@ -2172,12 +2148,12 @@ var Tag = /*#__PURE__*/React.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__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     noWrap: noWrap,
     component: component,
@@ -2200,29 +2176,28 @@ var Tag = /*#__PURE__*/React.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: {
-      popupIcon: /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
+  var sm = theme.breakpoints.up('sm');
+  theme.components.MuiAutocomplete = {
+    defaultProps: {
+      popupIcon: /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
         children: /*#__PURE__*/jsxRuntime.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]: {
@@ -2246,45 +2221,47 @@ function overrideAutocomplete(theme) {
       inputRoot: {
         '&[class*="MuiOutlinedInput-root"]': {
           padding: '6px 8px',
-          '& $input': {
+          ["& .".concat(material.autocompleteClasses.input)]: {
             width: '144px',
             padding: '4px'
           },
-          '& $input:first-child': {
-            paddingLeft: undefined
+          ["& .".concat(material.autocompleteClasses.input, ":first-child")]: {
+            paddingLeft: 'unset'
           },
-          '& $endAdornment': {
+          ["& .".concat(material.autocompleteClasses.endAdornment)]: {
             right: '12px'
           },
           [sm]: {
             padding: theme.spacing(0.5, 0.75),
-            '& $input': {
+            ["& .".concat(material.autocompleteClasses.input)]: {
               padding: '2px'
             },
-            '& $endAdornment': {
+            ["& .".concat(material.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: exports.Color.Dark300,
+        backgroundColor: exports.Color.Silver300
       }
-    }),
-    colorDefault: {
-      color: exports.Color.Dark300,
-      backgroundColor: exports.Color.Silver300
     }
   };
 }
@@ -2297,9 +2274,11 @@ function outlineShadow() {
 
 function textVariant(text, outline, background, progress) {
   return {
-    color: text,
-    boxShadow: outlineShadow(),
-    backgroundColor: exports.Color.Transparent,
+    '&': {
+      color: text,
+      boxShadow: outlineShadow(),
+      backgroundColor: exports.Color.Transparent
+    },
     '&:hover': {
       backgroundColor: background
     },
@@ -2310,13 +2289,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    '&$disabled': {
+    ["&.".concat(material.buttonClasses.disabled)]: {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: exports.Color.Transparent
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      backgroundColor: exports.Color.Transparent,
+      ["& .".concat(lab.loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -2330,11 +2309,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)
     },
@@ -2346,13 +2325,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    '&$disabled': {
+    ["&.".concat(material.buttonClasses.disabled)]: {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder)
-    },
-    '&$disabled[aria-busy="true"]': {
-      color: progress
+      boxShadow: outlinedBorder(disabledBorder),
+      ["& .".concat(lab.loadingButtonClasses.loadingIndicator)]: {
+        color: progress
+      }
     }
   };
 }
@@ -2371,229 +2350,236 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    '&$disabled': {
+    ["&.".concat(material.buttonClasses.disabled)]: {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground
+      backgroundColor: disabledBackground,
+      ["& .".concat(lab.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(material.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(material.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(exports.Color.Red300, exports.Color.Red100, exports.Color.Red50, exports.Color.Red200),
-      '&[data-color="success"]': textVariant(exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green200),
-      '&[data-color="white"]': textVariant(exports.Color.White, exports.Color.White50, exports.Color.White10, exports.Color.White50)
-    },
-    textPrimary: textVariant(exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Blue200),
-    textSizeSmall: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    textSizeLarge: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    outlined: {
-      border: undefined,
-      padding: undefined,
-      '&$disabled': {
-        border: undefined
-      },
-      '&[data-color="error"]': outlinedVariant(exports.Color.Red300, exports.Color.Red300, exports.Color.Red100, exports.Color.Red100, exports.Color.Red300, exports.Color.Red300, exports.Color.Red100, exports.Color.Red50, exports.Color.Red300, exports.Color.White),
-      '&[data-color="success"]': outlinedVariant(exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green100, exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green300, exports.Color.White),
-      '&[data-color="white"]': outlinedVariant(exports.Color.White, exports.Color.White50, exports.Color.White50, exports.Color.White40, exports.Color.White, exports.Color.White50, exports.Color.White40, exports.Color.White10, exports.Color.White50, exports.Color.Transparent)
-    },
-    outlinedPrimary: outlinedVariant(exports.Color.Dark500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Dark200, exports.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(material.buttonClasses.disabled)]: {
+          color: 'initial'
+        },
+        '& > .MuiSvgIcon-root': {
+          fontSize: '24px',
+          [sm]: {
+            fontSize: '20px'
+          },
+          [".".concat(material.buttonClasses.sizeLarge, "&")]: {
+            fontSize: '28px',
+            [sm]: {
+              fontSize: '24px'
+            }
+          }
         }
       },
-      '&:active': {
-        boxShadow: undefined
+      sizeSmall: sizeSmall(theme),
+      sizeLarge: sizeLarge(theme),
+      text: {
+        padding: 'initial',
+        '&[data-color="error"]': textVariant(exports.Color.Red300, exports.Color.Red100, exports.Color.Red50, exports.Color.Red200),
+        '&[data-color="success"]': textVariant(exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green200),
+        '&[data-color="white"]': textVariant(exports.Color.White, exports.Color.White50, exports.Color.White10, exports.Color.White50)
       },
-      '&$focusVisible': {
-        boxShadow: undefined
+      textPrimary: textVariant(exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Blue200),
+      textSizeSmall: sizeSmall(theme),
+      textSizeLarge: sizeLarge(theme),
+      outlined: {
+        border: 'none',
+        padding: 'initial',
+        ["&.".concat(material.buttonClasses.disabled)]: {
+          border: 'none'
+        },
+        '&[data-color="error"]': outlinedVariant(exports.Color.Red300, exports.Color.Red300, exports.Color.Red100, exports.Color.Red100, exports.Color.Red300, exports.Color.Red300, exports.Color.Red100, exports.Color.Red50, exports.Color.Red300, exports.Color.White),
+        '&[data-color="success"]': outlinedVariant(exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green100, exports.Color.Green300, exports.Color.Green300, exports.Color.Green100, exports.Color.Green50, exports.Color.Green300, exports.Color.White),
+        '&[data-color="white"]': outlinedVariant(exports.Color.White, exports.Color.White50, exports.Color.White50, exports.Color.White40, exports.Color.White, exports.Color.White50, exports.Color.White40, exports.Color.White10, exports.Color.White50, exports.Color.Transparent)
       },
-      '&$disabled': {
-        color: undefined,
-        boxShadow: undefined,
-        backgroundColor: undefined
+      outlinedPrimary: outlinedVariant(exports.Color.Dark500, exports.Color.Silver500, exports.Color.Silver500, exports.Color.Silver400, exports.Color.Blue300, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue50, exports.Color.Dark200, exports.Color.White),
+      outlinedSizeSmall: sizeSmall(theme),
+      outlinedSizeLarge: sizeLarge(theme),
+      contained: {
+        boxShadow: 'none',
+        backgroundColor: 'initial',
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: 'initial',
+          ["&.".concat(material.buttonClasses.disabled)]: {
+            backgroundColor: 'none'
+          },
+          '@media (hover: none)': {
+            boxShadow: 'none',
+            backgroundColor: 'none'
+          }
+        },
+        '&:active': {
+          boxShadow: 'none'
+        },
+        ["&.".concat(material.buttonClasses.focusVisible)]: {
+          boxShadow: 'none'
+        },
+        ["&.".concat(material.buttonClasses.disabled)]: {
+          color: 'initial',
+          boxShadow: 'none',
+          backgroundColor: 'initial'
+        },
+        '&[data-color="error"]': containedVariant(exports.Color.White, exports.Color.Red300, exports.Color.Red100, exports.Color.Red500, exports.Color.White, exports.Color.Red100),
+        '&[data-color="success"]': containedVariant(exports.Color.White, exports.Color.Green300, exports.Color.Green100, exports.Color.Green500, exports.Color.White, exports.Color.Green100),
+        '&[data-color="white"]': containedVariant(exports.Color.White, exports.Color.White20, exports.Color.White40, exports.Color.White40, exports.Color.White50, exports.Color.White08)
       },
-      '&[data-color="error"]': containedVariant(exports.Color.White, exports.Color.Red300, exports.Color.Red100, exports.Color.Red500, exports.Color.White, exports.Color.Red100),
-      '&[data-color="success"]': containedVariant(exports.Color.White, exports.Color.Green300, exports.Color.Green100, exports.Color.Green500, exports.Color.White, exports.Color.Green100),
-      '&[data-color="white"]': containedVariant(exports.Color.White, exports.Color.White20, exports.Color.White40, exports.Color.White40, exports.Color.White50, exports.Color.White08)
-    },
-    containedPrimary: containedVariant(exports.Color.White, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue500, exports.Color.White, exports.Color.Blue100),
-    containedSizeSmall: {
-      padding: undefined,
-      fontSize: undefined
-    },
-    containedSizeLarge: {
-      padding: undefined,
-      fontSize: undefined
+      containedPrimary: containedVariant(exports.Color.White, exports.Color.Blue300, exports.Color.Blue100, exports.Color.Blue500, exports.Color.White, exports.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__*/jsxRuntime.jsx(core.SvgIcon, {
-      children: /*#__PURE__*/jsxRuntime.jsx("rect", {
-        width: "17",
-        height: "17",
-        x: "3.5",
-        y: "3.5",
-        fill: exports.Color.White,
-        stroke: "currentColor",
-        rx: "1.5"
+  theme.components.MuiCheckbox = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
+        children: /*#__PURE__*/jsxRuntime.jsx("rect", {
+          width: "17",
+          height: "17",
+          x: "3.5",
+          y: "3.5",
+          fill: exports.Color.White,
+          stroke: "currentColor",
+          rx: "1.5"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/jsxRuntime.jsxs(material.SvgIcon, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentColor",
+          rx: "2"
+        }), /*#__PURE__*/jsxRuntime.jsx("path", {
+          fill: exports.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__*/jsxRuntime.jsxs(material.SvgIcon, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
+          width: "18",
+          height: "18",
+          x: "3",
+          y: "3",
+          fill: "currentIcon",
+          rx: "2"
+        }), /*#__PURE__*/jsxRuntime.jsx("path", {
+          fill: exports.Color.White,
+          d: "M7 11h10v2H7v-2z"
+        })]
       })
-    }),
-    checkedIcon: /*#__PURE__*/jsxRuntime.jsxs(core.SvgIcon, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        width: "18",
-        height: "18",
-        x: "3",
-        y: "3",
-        fill: "currentColor",
-        rx: "2"
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: exports.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__*/jsxRuntime.jsxs(core.SvgIcon, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-        width: "18",
-        height: "18",
-        x: "3",
-        y: "3",
-        fill: "currentIcon",
-        rx: "2"
-      }), /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: exports.Color.White,
-        d: "M7 11h10v2H7v-2z"
-      })]
-    })
-  };
-  theme.overrides.MuiCheckbox = {
-    root: {
-      color: exports.Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
     },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: exports.Color.Silver500
+    styleOverrides: {
+      root: {
+        color: exports.Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
       },
-      '&:hover:not($checked)': {
-        color: exports.Color.Dark100
+      indeterminate: {
+        ["&:not(.".concat(material.checkboxClasses.checked, ")")]: {
+          color: exports.Color.Dark100
+        },
+        ["&.".concat(material.checkboxClasses.disabled)]: {
+          color: exports.Color.Silver400
+        }
+      },
+      colorPrimary: {
+        ["&.".concat(material.checkboxClasses.checked, ".").concat(material.checkboxClasses.disabled)]: {
+          color: exports.Color.Silver500
+        },
+        ["&:hover:not(.".concat(material.checkboxClasses.checked, ")")]: {
+          color: exports.Color.Dark100
+        }
       }
     }
   };
@@ -2601,197 +2587,223 @@ function overrideCheckbox(theme) {
 
 function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.props.MuiChip = {
-    size: 'small',
-    deleteIcon: /*#__PURE__*/jsxRuntime.jsx("div", {
-      children: /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
-        children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
+          children: /*#__PURE__*/jsxRuntime.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: exports.Color.Silver200,
-      '&$disabled': {
-        opacity: undefined,
-        color: exports.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: exports.Color.Silver200,
+        ["&.".concat(material.chipClasses.disabled)]: {
+          opacity: 1,
+          color: exports.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(exports.Color.Silver300)
+      clickable: {
+        '&:hover, &:focus': {
+          backgroundColor: exports.Color.Silver200
+        },
+        '&:active': {
+          boxShadow: 'unset'
+        },
+        '&:focus': {
+          boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
+        },
+        '&:active, &:hover': {
+          backgroundColor: exports.Color.Silver300
+        }
       },
-      '&:active, &:hover': {
-        backgroundColor: exports.Color.Silver300
-      }
-    },
-    deletable: {
-      '&:focus': {
-        backgroundColor: undefined,
-        boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
-      }
-    },
-    deleteIcon: {
-      width: undefined,
-      height: undefined,
-      display: 'flex',
-      transition: theme.transitions.create('background-color'),
-      '&:active, &:hover, &:focus': {
+      deletable: {
+        '&:focus': {
+          backgroundColor: exports.Color.Silver200,
+          boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
+        }
+      },
+      deleteIcon: {
+        width: 'unset',
+        height: 'unset',
+        display: 'flex',
+        fontSize: 14,
+        transition: theme.transitions.create('background-color'),
+        '&:active, &:hover, &:focus': {
+          '& > svg': {
+            backgroundColor: exports.Color.Silver400
+          }
+        },
         '& > svg': {
-          backgroundColor: exports.Color.Silver400
+          borderRadius: '50%',
+          color: exports.Color.Dark200,
+          fontSize: '1em'
         }
       },
-      '& > svg': {
-        borderRadius: '50%',
-        color: exports.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: exports.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: exports.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(material.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: exports.Color.Dark100,
-      backgroundColor: exports.Color.Transparent,
-      transition: theme.transitions.create(['color', 'background-color'], {
-        duration: theme.transitions.duration.short
-      }),
-      '&:hover': {
-        backgroundColor: exports.Color.Transparent
+  theme.components.MuiIconButton = {
+    styleOverrides: {
+      root: {
+        // no selector for default color
+        ["&:not(.".concat(material.iconButtonClasses.colorInherit, "):not(.").concat(material.iconButtonClasses.colorPrimary, "):not(.").concat(material.iconButtonClasses.colorSecondary, "):not(.").concat(material.iconButtonClasses.disabled, ")")]: {
+          color: exports.Color.Dark100
+        },
+        backgroundColor: exports.Color.Transparent,
+        transition: theme.transitions.create(['color', 'background-color'], {
+          duration: theme.transitions.duration.short
+        }),
+        '&:hover': {
+          backgroundColor: exports.Color.Transparent
+        },
+        '&:active': {
+          color: exports.Color.Dark500
+        },
+        '&:hover ': {
+          color: exports.Color.Dark300
+        },
+        '&:focus': {
+          backgroundColor: exports.Color.Silver400
+        },
+        ["&.".concat(material.iconButtonClasses.disabled)]: {
+          color: exports.Color.Silver500
+        }
       },
-      '&:active': {
-        color: exports.Color.Dark500
+      colorPrimary: {
+        '&:active': {
+          color: exports.Color.Blue500
+        },
+        '&:hover ': {
+          color: exports.Color.Blue300
+        },
+        '&:focus': {
+          backgroundColor: exports.Color.Blue50
+        }
       },
-      '&:hover ': {
-        color: exports.Color.Dark300
+      edgeEnd: {
+        marginRight: theme.spacing(-1)
       },
-      '&:focus': {
-        backgroundColor: exports.Color.Silver400
+      edgeStart: {
+        marginLeft: theme.spacing(-1)
       },
-      '&$disabled': {
-        color: exports.Color.Silver500
-      }
-    },
-    colorPrimary: {
-      '&:active': {
-        color: exports.Color.Blue500
+      sizeSmall: {
+        padding: 3,
+        fontSize: theme.typography.pxToRem(18)
       },
-      '&:hover ': {
-        color: exports.Color.Blue300
+      sizeMedium: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(24)
       },
-      '&:focus': {
-        backgroundColor: exports.Color.Blue50
+      sizeLarge: {// todo declare large size
       }
-    },
-    edgeEnd: {
-      marginRight: theme.spacing(-1)
-    },
-    edgeStart: {
-      marginLeft: theme.spacing(-1)
     }
   };
 }
@@ -2801,350 +2813,389 @@ 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: exports.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: exports.Color.Transparent,
+        '&:focus': {
+          outline: 'none'
+        },
+        '&:hover, &:active': {
+          backgroundImage: line('currentColor')
+        }
       },
-      '&.MuiTypography-colorTextPrimary': {
+      // @ts-expect-error type def need in patch-package
+      colorTextPrimary: {
         backgroundImage: line(exports.Color.Silver500),
         '&:focus, &:hover, &:active': {
           color: exports.Color.Blue300,
           backgroundImage: line(exports.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: exports.Color.Blue50
-      },
-      '& .MuiTouchRipple-root': {
-        color: exports.Color.Blue100
+  theme.components.MuiListItem = {
+    styleOverrides: {
+      root: {
+        ["&.".concat(material.listItemClasses.selected, ", &.").concat(material.listItemClasses.selected, ":hover")]: {
+          backgroundColor: exports.Color.Blue50
+        },
+        '& .MuiTouchRipple-root': {
+          color: exports.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: exports.Color.Blue100
+        },
+        ["&.".concat(material.menuItemClasses.selected, ", &.").concat(material.menuItemClasses.selected, ":hover")]: {
+          backgroundColor: exports.Color.Blue50,
+          ["&.".concat(material.menuItemClasses.focusVisible)]: {
+            backgroundColor: exports.Color.Blue50
+          }
+        }
+      })
+    }
   };
 }
 
 function overridePagination(theme) {
-  var props = {};
-  var overrides = {
-    root: {
-      color: exports.Color.Dark400
-    },
-    page: {
-      '&:hover': {
-        backgroundColor: exports.Color.Silver200
-      },
-      '&$focusVisible': {
-        borderRadius: 4,
-        backgroundColor: exports.Color.White,
-        border: "1px solid ".concat(exports.Color.Blue100)
+  theme.components.MuiPaginationItem = {
+    styleOverrides: {
+      root: {
+        color: exports.Color.Dark400
       },
-      '&$selected': {
-        backgroundColor: exports.Color.Silver400,
-        '&:hover, &$focusVisible': {
-          backgroundColor: exports.Color.Silver400
+      page: {
+        '&:hover': {
+          backgroundColor: exports.Color.Silver200
         },
-        '&$disabled': {
-          color: exports.Color.Dark100,
-          backgroundColor: exports.Color.Silver400
+        ["&.".concat(material.paginationItemClasses.focusVisible)]: {
+          borderRadius: 4,
+          backgroundColor: exports.Color.White,
+          border: "1px solid ".concat(exports.Color.Blue100)
+        },
+        ["&.".concat(material.paginationItemClasses.selected)]: {
+          backgroundColor: exports.Color.Silver400,
+          ["&:hover, &.".concat(material.paginationItemClasses.focusVisible)]: {
+            backgroundColor: exports.Color.Silver400
+          },
+          ["&.".concat(material.paginationItemClasses.disabled)]: {
+            color: exports.Color.Dark100,
+            backgroundColor: exports.Color.Silver400
+          }
+        },
+        ["&.".concat(material.paginationItemClasses.disabled)]: {
+          opacity: 1,
+          color: exports.Color.Dark100
         }
-      },
-      '&$disabled': {
-        opacity: undefined,
-        color: exports.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(exports.Color.Silver400)
+  theme.components.MuiPaper = {
+    defaultProps: {
+      elevation: 0
+    },
+    styleOverrides: {
+      elevation0: {
+        border: "1px solid ".concat(exports.Color.Silver400)
+      }
     }
   };
 }
 
 function overrideRadio(theme) {
-  theme.props.MuiRadio = {
-    color: 'primary',
-    icon: /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, {
-      children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: exports.Color.White,
-        stroke: "currentColor"
+  theme.components.MuiRadio = {
+    defaultProps: {
+      color: 'primary',
+      icon: /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
+        children: /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: exports.Color.White,
+          stroke: "currentColor"
+        })
+      }),
+      checkedIcon: /*#__PURE__*/jsxRuntime.jsxs(material.SvgIcon, {
+        children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "8.5",
+          fill: "currentColor",
+          stroke: "currentColor"
+        }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: "12",
+          cy: "12",
+          r: "4",
+          fill: exports.Color.White
+        })]
       })
-    }),
-    checkedIcon: /*#__PURE__*/jsxRuntime.jsxs(core.SvgIcon, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "8.5",
-        fill: "currentColor",
-        stroke: "currentColor"
-      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
-        cx: "12",
-        cy: "12",
-        r: "4",
-        fill: exports.Color.White
-      })]
-    })
-  };
-  theme.overrides.MuiRadio = {
-    root: {
-      color: exports.Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625)
     },
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: exports.Color.Silver500
+    styleOverrides: {
+      root: {
+        color: exports.Color.Dark100,
+        marginTop: theme.spacing(-0.625),
+        marginBottom: theme.spacing(-0.625)
       },
-      '&:hover:not($checked)': {
-        color: exports.Color.Dark100
+      colorPrimary: {
+        ["&.".concat(material.radioClasses.disabled, ".").concat(material.radioClasses.checked)]: {
+          color: exports.Color.Silver500
+        },
+        ["&:hover:not(.".concat(material.radioClasses.checked, ")")]: {
+          color: exports.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: exports.Color.Dark100
       }
-    },
-    fontSizeLarge: {
-      fontSize: 'var(--mui-svg-icon-size, 32px)'
-    },
-    colorAction: {
-      color: exports.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(exports.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: exports.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(exports.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: exports.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: exports.Color.Blue400
+      switchBase: {
+        left: theme.spacing(1),
+        padding: theme.spacing(1.25, 1),
+        [sm]: {
+          padding: theme.spacing(1)
+        },
+        ["&.".concat(material.switchClasses.checked)]: {
+          transform: "translateX(".concat(theme.spacing(2.5), ")"),
+          [sm]: {
+            transform: "translateX(".concat(theme.spacing(2), ")")
           }
+        },
+        ["&.".concat(material.switchClasses.checked, " + .").concat(material.switchClasses.track)]: {
+          opacity: 1
+        },
+        ["&.".concat(material.switchClasses.disabled, " + .").concat(material.switchClasses.track)]: {
+          opacity: 1
         }
       },
-      '& + $track': {
-        backgroundColor: exports.Color.Silver500
-      },
-      '&$disabled + $track': {
-        backgroundColor: exports.Color.Silver300
-      },
-      '&$checked$disabled + $track': {
-        backgroundColor: exports.Color.Blue100
-      },
-      '&:hover + $track': {
-        backgroundColor: exports.Color.Dark100
-      },
-      '&.Mui-focusVisible + $track': {
-        boxShadow: "0 0 0 3px ".concat(exports.Color.Blue100)
+      colorPrimary: {
+        ["&.".concat(material.switchClasses.checked)]: {
+          '&:hover': {
+            ["& + .".concat(material.switchClasses.track)]: {
+              backgroundColor: exports.Color.Blue400
+            }
+          }
+        },
+        ["& + .".concat(material.switchClasses.track)]: {
+          backgroundColor: exports.Color.Silver500
+        },
+        ["&.".concat(material.switchClasses.disabled, " + .").concat(material.switchClasses.track)]: {
+          backgroundColor: exports.Color.Silver300
+        },
+        ["&.".concat(material.switchClasses.checked, ".").concat(material.switchClasses.disabled, " + .").concat(material.switchClasses.track)]: {
+          backgroundColor: exports.Color.Blue100
+        },
+        ["&:hover + .".concat(material.switchClasses.track)]: {
+          backgroundColor: exports.Color.Dark100
+        },
+        ["&.Mui-focusVisible + .".concat(material.switchClasses.track)]: {
+          boxShadow: "0 0 0 3px ".concat(exports.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: exports.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: exports.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: exports.Color.Dark500,
-      '&:hover, &:focus': {
-        color: exports.Color.Blue300
+      textColorPrimary: {
+        color: exports.Color.Dark500,
+        '&:hover, &:focus': {
+          color: exports.Color.Blue300
+        }
       }
     }
   };
 }
 
-var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({
+var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({
   ref: ref
 }, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -3155,223 +3206,248 @@ var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxR
 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: exports.Color.Dark400,
-      '&$error': {
-        color: undefined
-      },
-      '&$focused': {
-        color: undefined
-      },
-      '&$disabled': {
-        color: undefined
-      }
-    })
+  theme.components.MuiFormLabel = {
+    styleOverrides: {
+      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+        color: exports.Color.Dark400,
+        ["&.".concat(material.formLabelClasses.error)]: {
+          color: exports.Color.Dark400
+        },
+        ["&.".concat(material.formLabelClasses.focused)]: {
+          color: exports.Color.Dark400
+        },
+        ["&.".concat(material.formLabelClasses.disabled)]: {
+          color: exports.Color.Dark400
+        }
+      })
+    }
   };
-  theme.overrides.MuiInputBase = {
-    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-      '&$disabled': {
-        backgroundColor: exports.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(material.inputBaseClasses.disabled)]: {
+          backgroundColor: exports.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(material.outlinedInputClasses.notchedOutline)]: {
+          borderColor: exports.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: exports.Color.Silver500,
-      '& legend': {
-        display: 'none'
+      },
+      adornedStart: {
+        paddingLeft: theme.spacing(1)
+      },
+      adornedEnd: {
+        paddingRight: theme.spacing(1)
+      },
+      notchedOutline: {
+        top: 0,
+        borderColor: exports.Color.Silver500,
+        '& legend': {
+          display: 'none'
+        }
       }
     }
   };
-  theme.props.MuiSelect = {
-    IconComponent: SelectIcon
-  };
-  theme.overrides.MuiSelect = {
-    icon: {
-      top: 'calc(50% - 0.5em)',
-      '$disabled &': {
-        color: exports.Color.Dark100
+  theme.components.MuiSelect = {
+    defaultProps: {
+      IconComponent: SelectIcon
+    },
+    styleOverrides: {
+      icon: {
+        top: 'calc(50% - 0.5em)',
+        '$disabled &': {
+          color: exports.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: exports.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: exports.Color.Dark400
+      }),
+      popperArrow: {
+        ["&[data-popper-placement*=\"top\"] .".concat(material.tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"left\"] .".concat(material.tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopRightRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"right\"] .".concat(material.tooltipClasses.arrow)]: {
+          '&::before': {
+            borderBottomLeftRadius: 2
+          }
+        },
+        ["&[data-popper-placement*=\"bottom\"] .".concat(material.tooltipClasses.arrow)]: {
+          '&::before': {
+            borderTopLeftRadius: 2
+          }
         }
       },
-      '&[x-placement*="bottom"] $arrow': {
-        '&::before': {
-          borderTopLeftRadius: 2
-        }
+      arrow: {
+        color: exports.Color.Dark400,
+        fontSize: theme.spacing(1)
       }
-    },
-    arrow: {
-      color: exports.Color.Dark400,
-      fontSize: theme.spacing(1)
     }
   };
 }
@@ -3481,14 +3557,24 @@ 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)
+    }
   };
 }
 
 function createSuperDispatchTheme() {
-  var breakpoints = createBreakpoints({});
-  var theme = core.createTheme({
+  var breakpoints = system.createBreakpoints({});
+  var theme = material.createTheme({
     breakpoints,
     palette: {
       primary: {
@@ -3505,43 +3591,43 @@ function createSuperDispatchTheme() {
       text: {
         primary: exports.Color.Dark500,
         secondary: exports.Color.Dark200,
-        hint: exports.Color.Dark100,
+        // hint: Color.Dark100, todo
         disabled: exports.Color.Dark100
       },
       divider: exports.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;
 }
 
-var generateMaterialClassName = /*#__PURE__*/core.createGenerateClassName();
+var generateMaterialClassName = /*#__PURE__*/styles.createGenerateClassName();
 
 function generateClassName(rule, sheet) {
   var {
@@ -3583,14 +3669,11 @@ function ThemeProvider(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styles.StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/jsxRuntime.jsxs(styles.ThemeProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(material.ThemeProvider, {
       theme: theme,
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.CssBaseline, {}), /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
-        theme: theme,
-        children: /*#__PURE__*/jsxRuntime.jsx(ResponsiveContextProvider, {
-          children: /*#__PURE__*/jsxRuntime.jsx(SnackbarStackProvider, {
-            children: children
-          })
+      children: [/*#__PURE__*/jsxRuntime.jsx(material.CssBaseline, {}), /*#__PURE__*/jsxRuntime.jsx(ResponsiveContextProvider, {
+        children: /*#__PURE__*/jsxRuntime.jsx(SnackbarStackProvider, {
+          children: children
         })
       })]
     })
@@ -3601,12 +3684,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
@@ -3621,7 +3705,7 @@ function columnVariant(columns) {
   };
 }
 
-var useStyles$d = /*#__PURE__*/styles.makeStyles(theme => ({
+var useStyles$3 = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,
     '&:before': {
@@ -3665,7 +3749,7 @@ var Tiles = /*#__PURE__*/React.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__*/jsxRuntime.jsx("div", {