@superdispatch/ui 0.21.5-alpha.4 → 0.21.8

package/dist-node/index.js

@@ -6,44 +6,46 @@ 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 iconsMaterial = require('@mui/icons-material');
-var material = require('@mui/material');
+var core = require('@material-ui/core');
+var icons = require('@material-ui/icons');
+var styles = require('@material-ui/styles');
 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 styles = require('@mui/styles');
+var clsx = _interopDefault(require('clsx'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
 var NumberFormat = _interopDefault(require('react-number-format'));
-var clsx = _interopDefault(require('clsx'));
-var system = require('@mui/system');
+var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
 
-var _excluded = ["size", "children", "isActive", "isLoading", "color"];
+var _excluded = ["size", "children", "disabled", "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(lab.LoadingButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Button, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     size: size,
     "data-color": color,
-    loading: isLoading,
+    "aria-busy": isLoading,
     "aria-expanded": isActive,
-    color: color === 'primary' ? color : 'inherit',
-    loadingIndicator: /*#__PURE__*/jsxRuntime.jsx(material.CircularProgress, {
-      size: "1em",
-      color: "inherit"
-    }),
-    children: children
+    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"
+      })]
+    })
   }));
 });
 if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
@@ -106,7 +108,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }
 
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(material.ButtonGroup, _objectSpread(_objectSpread({}, ButtonGroupProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.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({
@@ -126,7 +128,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         "aria-expanded": open ? 'true' : undefined,
         children: /*#__PURE__*/jsxRuntime.jsx(CaretDownIcon, {})
       })]
-    })), /*#__PURE__*/jsxRuntime.jsx(material.Popover, {
+    })), /*#__PURE__*/jsxRuntime.jsx(core.Popover, {
       open: open,
       onClose: handleClose,
       anchorEl: anchorRef.current,
@@ -138,7 +140,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(material.MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(core.MenuList, _objectSpread(_objectSpread({}, MenuListProps), {}, {
           id: uid,
           onClick: () => {
             setOpen(false);
@@ -170,12 +172,12 @@ function useResizeObserver(node, observer) {
 }
 
 var _excluded$2 = ["items"];
-var GridActionsItem = /*#__PURE__*/material.styled(material.Grid, {
-  name: 'SD-AdaptiveToolbar'
-})(() => {
-  return {
+var useStyles = /*#__PURE__*/styles.makeStyles({
+  actions: {
     overflow: 'hidden'
-  };
+  }
+}, {
+  name: 'SD-AdaptiveToolbar'
 });
 var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
@@ -183,6 +185,7 @@ 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);
@@ -218,20 +221,21 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     setFirstHiddenIdx(hiddenIdx);
   });
-  return /*#__PURE__*/jsxRuntime.jsx(material.Toolbar, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
       container: true,
       spacing: 1,
       ref: setRootNode,
-      children: [/*#__PURE__*/jsxRuntime.jsx(GridActionsItem, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Grid, {
         item: true,
-        children: /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+        className: styles.actions,
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
           container: true,
           spacing: 1,
           wrap: "nowrap",
           component: "div",
-          children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+          children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
             item: true,
             ref: node => {
               itemNodes.current[idx] = node;
@@ -241,17 +245,15 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               onClick: item.onClick,
               label: item.label
             }, item.ButtonProps), {}, {
-              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
+              children: item.dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.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(material.Typography, {
+              children: /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
                 noWrap: true,
                 variant: "inherit",
                 children: item.label
@@ -259,21 +261,20 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             }))
           }, item.key))
         })
-      }), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+      }), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.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(iconsMaterial.MoreHoriz, {})
-        }), /*#__PURE__*/jsxRuntime.jsx(material.Menu, {
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.MoreHoriz, {})
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
           open: !!menuButtonNode,
           anchorEl: menuButtonNode,
           onClose: () => {
@@ -284,7 +285,7 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
             var next = arr[index + 1];
             return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
                 onClick: event => {
                   var _item$onClick;
 
@@ -292,7 +293,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(material.MenuItem, {
+              }, item.key), (_item$dropdown = item.dropdown) === null || _item$dropdown === void 0 ? void 0 : _item$dropdown.map(dropdownItem => /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
                 onClick: event => {
                   var _dropdownItem$onClick;
 
@@ -300,7 +301,7 @@ var AdaptiveToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
                   setMenuButtonRef(undefined);
                 },
                 children: dropdownItem.label
-              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/jsxRuntime.jsx(material.Divider, {})]
+              }, dropdownItem.key)), next && item.groupKey !== next.groupKey && /*#__PURE__*/jsxRuntime.jsx(core.Divider, {})]
             });
           })
         })]
@@ -331,7 +332,7 @@ function assignRef(ref, value) {
   }
 }
 
-var useStyles = /*#__PURE__*/styles.makeStyles({
+var useStyles$1 = /*#__PURE__*/styles.makeStyles({
   root: {
     overflow: 'hidden',
     height: '100%'
@@ -342,7 +343,7 @@ var useStyles = /*#__PURE__*/styles.makeStyles({
 
 var defaultMoreElement = /*#__PURE__*/jsxRuntime.jsx(Button, {
   type: "button",
-  children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.MoreHoriz, {})
+  children: /*#__PURE__*/jsxRuntime.jsx(icons.MoreHoriz, {})
 });
 
 var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -353,7 +354,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     renderItem = item => item.label,
     renderMenuItem = item => item.label
   } = _ref;
-  var styles = useStyles();
+  var styles = useStyles$1();
   var itemNodes = React.useRef([]);
   var optionsButtonRef = React.useRef(null);
   var [firstHiddenIdx, setFirstHiddenIdx] = React.useState(-1);
@@ -388,7 +389,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     setFirstHiddenIdx(hiddenIdx);
   });
-  return /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
     direction: "column",
     container: true,
     wrap: "nowrap",
@@ -397,13 +398,13 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: mergeRefs(ref, node => {
       setRootNode(node);
     }),
-    children: [items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+    children: [items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
       item: true,
       ref: node => {
         itemNodes.current[idx] = node;
       },
       children: renderItem(item)
-    }, item.key)), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+    }, item.key)), menuItems.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
       item: true,
       ref: optionsButtonRef,
       component: "div",
@@ -414,7 +415,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           } = _ref2;
           setMenuButtonRef(currentTarget);
         }
-      }), /*#__PURE__*/jsxRuntime.jsx(material.Menu, {
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
         open: !!menuButtonNode,
         anchorEl: menuButtonNode,
         onClose: () => {
@@ -422,7 +423,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         },
         children: menuItems.flatMap((item, index, arr) => {
           var next = arr[index + 1];
-          return [/*#__PURE__*/jsxRuntime.jsx(material.MenuItem, {
+          return [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
             onClick: event => {
               var _item$onClick;
 
@@ -430,7 +431,7 @@ var AdaptiveVerticalToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               setMenuButtonRef(undefined);
             },
             children: renderMenuItem(item)
-          }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/jsxRuntime.jsx(material.Divider, {}, "".concat(item.key, "-divider"))];
+          }, item.key), next && next.menuGroupKey !== item.menuGroupKey && /*#__PURE__*/jsxRuntime.jsx(core.Divider, {}, "".concat(item.key, "-divider"))];
         })
       })]
     })]
@@ -514,81 +515,66 @@ function isColorProp(name) {
   return typeof name == 'string' && Object.prototype.hasOwnProperty.call(exports.Color, name);
 }
 
-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 {
-    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 _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 sm = theme.breakpoints.up('sm');
   return {
-    borderRadius: '50%',
-    '&[disabled], &[aria-busy="true"]': {
-      ["& > ".concat(Overlay.toString())]: {
-        backgroundColor: exports.Color.White50
+    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
+          }
+        }
       }
     },
-    '&: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
+    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)
         }
       }
     },
-    '&[data-size-large="true"]': {
-      '& > .MuiAvatar-root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
+    progress: {
+      top: 0,
+      left: 0,
+      position: 'absolute',
+      fontSize: theme.spacing(5),
+      [sm]: {
+        fontSize: theme.spacing(4)
+      }
+    },
+    withIcon: {},
+    sizeLarge: {
+      '& > $root': _objectSpread(_objectSpread({}, theme.typography.h2), {}, {
         width: theme.spacing(7),
         height: theme.spacing(7),
         [sm]: {
@@ -596,8 +582,8 @@ var StyledButton = /*#__PURE__*/material.styled(material.ButtonBase, {
           height: theme.spacing(8)
         }
       }),
-      ["& > ".concat(Overlay.toString())]: {
-        ["& > ".concat(StyledProgress.toString())]: {
+      '& > $overlay': {
+        '& > $progress': {
           fontSize: theme.spacing(7),
           [sm]: {
             fontSize: theme.spacing(8)
@@ -610,16 +596,27 @@ var StyledButton = /*#__PURE__*/material.styled(material.ButtonBase, {
           }
         }
       }
-    }
+    },
+    root: {},
+    colorDefault: {},
+    circular: {},
+    rounded: {},
+    square: {},
+    img: {},
+    fallback: {}
   };
+}, {
+  name: 'SD-AvatarButton'
 });
-var AvatarButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+var AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     size,
     icon,
     isLoading = false,
+    classes,
     disabled = false,
     avatarRef,
+    className,
     alt,
     imgProps,
     sizes,
@@ -627,18 +624,30 @@ var AvatarButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     srcSet,
     variant,
     children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$3);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$3);
+
+  var _useStyles = useStyles$2({
+    classes
+  }),
+      {
+    button: buttonClassName,
+    overlay: overlayClassName,
+    progress: progressClassName,
+    withIcon: withIconClassName,
+    sizeLarge: sizeLargeClassName
+  } = _useStyles,
+      avatarClasses = _objectWithoutProperties(_useStyles, _excluded2);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledButton, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     "aria-busy": isLoading,
     "aria-disabled": disabled,
     disabled: disabled || isLoading,
-    "data-with-icon": !!icon,
-    "data-size-large": size === 'large',
-    children: [/*#__PURE__*/jsxRuntime.jsx(material.Avatar, {
+    className: clsx(className, buttonClassName, !!icon && withIconClassName, size === 'large' && sizeLargeClassName),
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
       ref: avatarRef,
+      classes: avatarClasses,
       variant: variant,
       alt: alt,
       src: src,
@@ -646,9 +655,11 @@ var AvatarButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       srcSet: srcSet,
       imgProps: imgProps,
       children: children
-    }), /*#__PURE__*/jsxRuntime.jsxs(Overlay, {
-      children: [icon, isLoading && /*#__PURE__*/jsxRuntime.jsx(StyledProgress, {
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: overlayClassName,
+      children: [icon, isLoading && /*#__PURE__*/jsxRuntime.jsx(core.CircularProgress, {
         size: "1em",
+        className: progressClassName,
         thickness: size === 'large' ? 2.5 : 1.5
       })]
     })]
@@ -657,11 +668,8 @@ var AvatarButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
 if (process.env.NODE_ENV !== "production") AvatarButton.displayName = "AvatarButton";
 
 var _excluded$4 = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
-var StyledButton$1 = /*#__PURE__*/material.styled(material.ButtonBase)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+var useStyles$3 = /*#__PURE__*/styles.makeStyles(theme => ({
+  root: {
     width: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -672,74 +680,66 @@ var StyledButton$1 = /*#__PURE__*/material.styled(material.ButtonBase)(_ref => {
     borderRadius: theme.spacing(0.5),
     padding: theme.spacing(1.5),
     minHeight: theme.spacing(13),
-    transition: theme.transitions.create(['color', 'box-shadow', 'border-color', 'background-color']),
-    '&[data-disabled="true"]': {
-      color: exports.Color.Dark200,
-      borderColor: exports.Color.Silver500,
-      backgroundColor: exports.Color.Silver100
-    },
-    '&[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)
+    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
     },
-    '&[data-size="large"]': {
-      minHeight: theme.spacing(17.5)
+    '&:hover, &:active': {
+      borderColor: exports.Color.Blue300,
+      backgroundColor: exports.Color.Blue50
     }
-  };
-});
-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 {
+  },
+  sizeSmall: {
+    minHeight: theme.spacing(6)
+  },
+  sizeLarge: {
+    minHeight: theme.spacing(17.5)
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  icon: {
     display: 'flex',
     '& svg': {
       fontSize: theme.spacing(3),
       [theme.breakpoints.up('sm')]: {
         fontSize: theme.spacing(2.5)
       }
-    },
-    '&[data-placement="start"]': {
-      marginRight: theme.spacing(1),
-      marginLeft: theme.spacing(-0.5)
-    },
-    '&[data-placement="end"]': {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(-0.5)
     }
-  };
+  },
+  startIcon: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(-0.5)
+  },
+  endIcon: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(-0.5)
+  },
+  hint: {
+    marginTop: theme.spacing(0.5)
+  }
+}), {
+  name: 'SD-CardButton'
 });
-var CardButton = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+var CardButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     hint,
     size,
@@ -750,33 +750,39 @@ var CardButton = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     endIcon,
     startIcon,
     disabled
-  } = _ref4,
-      props = _objectWithoutProperties(_ref4, _excluded$4);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
-  return /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, _objectSpread(_objectSpread({}, props), {}, {
+  var styles = useStyles$3({
+    classes
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(core.ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     disabled: disabled,
-    "data-size": size,
-    "data-disabled": !!disabled,
-    "data-error": !disabled && !!error,
-    "data-primary": !disabled && !error,
-    children: error ? /*#__PURE__*/jsxRuntime.jsx(Label, {
+    className: clsx(styles.root, className, disabled ? styles.disabled : error ? styles.error : styles.primary, {
+      'small': styles.sizeSmall,
+      'large': styles.sizeLarge
+    }[size]),
+    children: error ? /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
       variant: "h4",
       color: "inherit",
+      className: styles.label,
       children: error
     }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsxs(Label, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Typography, {
         variant: "h4",
         color: "inherit",
-        children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
-          "data-placement": "start",
+        className: styles.label,
+        children: [!!startIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: clsx(styles.icon, styles.startIcon),
           children: startIcon
-        }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
-          "data-placement": "end",
+        }), children, !!endIcon && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: clsx(styles.icon, styles.endIcon),
           children: endIcon
         })]
-      }), !!hint && /*#__PURE__*/jsxRuntime.jsx(Hint, {
+      }), !!hint && /*#__PURE__*/jsxRuntime.jsx(core.Typography, {
         color: "textSecondary",
+        className: styles.hint,
         children: hint
       })]
     })
@@ -797,19 +803,19 @@ var CheckboxField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$5);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
       onChange: onChange,
-      control: /*#__PURE__*/jsxRuntime.jsx(material.Checkbox, _objectSpread({
+      control: /*#__PURE__*/jsxRuntime.jsx(core.Checkbox, _objectSpread({
         ref: ref,
         color: "primary",
         disableRipple: true
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
       children: helperText
     })]
   });
@@ -828,15 +834,15 @@ var CheckboxGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   } = _ref,
       formControlProps = _objectWithoutProperties(_ref, _excluded$6);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(material.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
-    })), /*#__PURE__*/jsxRuntime.jsx(material.FormGroup, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/jsxRuntime.jsx(core.FormGroup, _objectSpread(_objectSpread({
       ref: ref
     }, formGroupProps), {}, {
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -846,7 +852,7 @@ if (process.env.NODE_ENV !== "production") CheckboxGroupField.displayName = "Che
 var Context = /*#__PURE__*/React.createContext({});
 
 function useBreakpoint(breakpoint) {
-  return material.useMediaQuery(theme => theme.breakpoints.only(breakpoint));
+  return core.useMediaQuery(theme => theme.breakpoints.only(breakpoint));
 }
 
 function ResponsiveContextProvider(_ref) {
@@ -1116,54 +1122,50 @@ function VisibilityObserver(_ref2) {
 }
 
 var _excluded$8 = ["title", "enterDelay"],
-    _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({
+    _excluded2$1 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
+var useStyles$4 = /*#__PURE__*/styles.makeStyles(theme => ({
+  root: {
     marginBottom: -1,
     borderBottom: '1px dashed transparent',
-    transition: theme.transitions.create('border')
-  }, truncated && {
-    cursor: 'pointer',
-    borderBottomColor: exports.Color.Silver500
-  });
-});
-var Sential = /*#__PURE__*/material.styled('span', {
-  name: 'SD-OverflowText',
-  slot: 'Sential'
-})({
-  width: 1,
-  height: '100%',
-  display: 'inline-block'
+    transition: theme.transitions.create('border'),
+    '&$truncated': {
+      cursor: 'pointer',
+      borderBottomColor: exports.Color.Silver500
+    }
+  },
+  truncated: {},
+  sentinel: {
+    width: 1,
+    height: '100%',
+    display: 'inline-block'
+  }
+}), {
+  name: 'SD-OverflowText'
 });
-var OverflowText = /*#__PURE__*/React.forwardRef((_ref2, rootRef) => {
+var OverflowText = /*#__PURE__*/React.forwardRef((_ref, rootRef) => {
   var {
     onClick: _onClick,
     children,
+    className,
     disableUnderline,
     TooltipProps: {
       title = children,
       enterDelay = 1000
     } = {}
-  } = _ref2,
-      tooltipProps = _objectWithoutProperties(_ref2.TooltipProps, _excluded$8),
-      props = _objectWithoutProperties(_ref2, _excluded2);
+  } = _ref,
+      tooltipProps = _objectWithoutProperties(_ref.TooltipProps, _excluded$8),
+      props = _objectWithoutProperties(_ref, _excluded2$1);
 
   var [isOpen, setIsOpen] = React.useState(false);
+  var styles = useStyles$4();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref3 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref3;
+      } = _ref2;
       var isTooltipEnabled = !!children && visibility === 'invisible';
-      return /*#__PURE__*/jsxRuntime.jsx(material.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+      return /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, _objectSpread(_objectSpread({}, tooltipProps), {}, {
         enterDelay: 1000,
         title: title || '',
         disableFocusListener: true,
@@ -1174,16 +1176,17 @@ var OverflowText = /*#__PURE__*/React.forwardRef((_ref2, rootRef) => {
         onClose: () => {
           setIsOpen(false);
         },
-        children: /*#__PURE__*/jsxRuntime.jsxs(Root, _objectSpread(_objectSpread({}, props), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Typography, _objectSpread(_objectSpread({}, props), {}, {
           ref: rootRef,
           noWrap: true,
-          truncated: !disableUnderline && visibility === 'invisible',
           onClick: event => {
             setIsOpen(true);
             _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
           },
-          children: [children, !!children && /*#__PURE__*/jsxRuntime.jsx(Sential, {
-            ref: ref
+          className: clsx(styles.root, className, !disableUnderline && visibility === 'invisible' && styles.truncated),
+          children: [children, !!children && /*#__PURE__*/jsxRuntime.jsx("span", {
+            ref: ref,
+            className: styles.sentinel
           })]
         }))
       }));
@@ -1203,18 +1206,29 @@ function useUID(defaultID) {
 }
 
 var _excluded$9 = ["size"];
-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;
+
+function sizeVariant(theme, mobileSpacing, desktopSpacing) {
   return {
+    '& > $list, & > $item': {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing)
+        }
+      }
+    }
+  };
+}
+
+var useStyles$5 = /*#__PURE__*/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': {
@@ -1224,29 +1238,54 @@ var DescriptionListItemIcon = /*#__PURE__*/material.styled('div')(_ref => {
         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(material.SvgIcon, {}) : null,
+    icon = inset ? /*#__PURE__*/jsxRuntime.jsx(core.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(DescriptionListItemRoot, {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: ref,
+    className: styles.item,
     "aria-labelledby": label != null ? labelID : undefined,
-    children: [!!icon && /*#__PURE__*/jsxRuntime.jsx(DescriptionListItemIcon, {
+    children: [!!icon && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: styles.icon,
       children: icon
     }), /*#__PURE__*/jsxRuntime.jsxs(OverflowText, _objectSpread(_objectSpread({}, contentTypographyProps), {}, {
       component: "span",
@@ -1254,7 +1293,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(material.Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
+      children: [label != null && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, labelTypographyProps), {}, {
         id: labelID,
         variant: "body2",
         component: "span",
@@ -1263,72 +1302,26 @@ 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)
-  });
 });
+if (process.env.NODE_ENV !== "production") DescriptionListItem.displayName = "DescriptionListItem";
 
-function sizeVariant(theme, mobileSpacing, desktopSpacing) {
-  return {
-    ["& > ".concat(DescriptionListRoot.toString(), ", & > ").concat(DescriptionListItemRoot.toString())]: {
-      '&:not(:last-child)': {
-        paddingBottom: theme.spacing(mobileSpacing),
-        [theme.breakpoints.up('sm')]: {
-          paddingBottom: theme.spacing(desktopSpacing)
-        }
+var _excluded$a = ["children", "className"];
+var useStyles$6 = /*#__PURE__*/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
       }
     }
-  };
-}
-
-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 {
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1337,26 +1330,31 @@ var StyledToolbar = /*#__PURE__*/material.styled(material.Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerActions'
 });
-var DrawerActions = /*#__PURE__*/React.forwardRef((_ref3, appBarRef) => {
+var DrawerActions = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
   var {
-    children
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$a);
+    children,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
+  var styles = useStyles$6();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref4 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref4;
+      } = _ref2;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/jsxRuntime.jsx(StyledAppBar, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/jsxRuntime.jsx(StyledToolbar, {
+          className: clsx(className, styles.appBar, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
+            className: styles.toolbar,
             children: children
           })
         })), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1368,20 +1366,33 @@ var DrawerActions = /*#__PURE__*/React.forwardRef((_ref3, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerActions.displayName = "DrawerActions";
 
-var DrawerContent = /*#__PURE__*/material.styled('div', {
-  name: 'SD-DrawerContent'
-})(_ref => {
-  var {
-    theme
-  } = _ref;
-  return {
+var _excluded$b = ["className"];
+var useStyles$7 = /*#__PURE__*/styles.makeStyles(theme => ({
+  root: {
     maxWidth: '100%',
     padding: theme.spacing(2, 3),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(2, 4)
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerContent'
+});
+var DrawerContent = /*#__PURE__*/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 {
@@ -1401,37 +1412,45 @@ function listItemMixins(theme, space) {
   };
 }
 
-var DrawerList = /*#__PURE__*/material.styled(material.List)(_ref => {
-  var {
-    theme
-  } = _ref;
-  return _objectSpread(_objectSpread({
+var useStyles$8 = /*#__PURE__*/styles.makeStyles(theme => ({
+  root: _objectSpread(_objectSpread({
     maxWidth: '100%'
   }, listItemMixins(theme, 3)), {}, {
     [theme.breakpoints.up('md')]: _objectSpread({}, listItemMixins(theme, 4))
-  });
+  })
+}), {
+  name: 'SD-DrawerList'
 });
-
-var _excluded$b = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction"];
-var StyledAppBar$1 = /*#__PURE__*/material.styled(material.AppBar)(_ref => {
+var DrawerList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
-    theme
-  } = _ref;
-  return {
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderRight: 'none',
-    transition: theme.transitions.create(['border-color']),
-    '&[data-sticky="false"]': {
-      borderBottomColor: exports.Color.Transparent
-    }
-  };
+    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)
+  }));
 });
-var StyledToolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)(_ref2 => {
-  var {
-    theme
-  } = _ref2;
-  return {
+if (process.env.NODE_ENV !== "production") DrawerList.displayName = "DrawerList";
+
+var _excluded$d = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
+var useStyles$9 = /*#__PURE__*/styles.makeStyles(theme => ({
+  appBar: {
+    '&&': {
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderRight: 'none',
+      transition: theme.transitions.create(['border-color']),
+      '&:not($appBarSticky)': {
+        borderBottomColor: exports.Color.Transparent
+      }
+    }
+  },
+  appBarSticky: {},
+  toolbar: {
     '&.MuiToolbar-gutters': {
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3),
@@ -1440,78 +1459,75 @@ var StyledToolbar$1 = /*#__PURE__*/material.styled(material.Toolbar)(_ref2 => {
         paddingRight: theme.spacing(4)
       }
     }
-  };
-});
-var StartAction = /*#__PURE__*/material.styled(material.Grid)(_ref3 => {
-  var {
-    theme
-  } = _ref3;
-  return {
+  },
+  startAction: {
     marginRight: theme.spacing(0.5),
     '& .MuiIconButton-edgeStart': {
       marginLeft: theme.spacing(-2)
     }
-  };
-});
-var EndAction = /*#__PURE__*/material.styled(material.Grid)(_ref4 => {
-  var {
-    theme
-  } = _ref4;
-  return {
+  },
+  endAction: {
     marginLeft: theme.spacing(0.5),
     '& .MuiIconButton-edgeEnd': {
       marginRight: theme.spacing(-2)
     }
-  };
+  }
+}), {
+  name: 'SD-DrawerTitle'
 });
-var DrawerTitle = /*#__PURE__*/React.forwardRef((_ref5, appBarRef) => {
+var DrawerTitle = /*#__PURE__*/React.forwardRef((_ref, appBarRef) => {
   var {
     title,
     titleTypographyProps,
     subtitle,
     subtitleTypographyProps,
     startAction,
-    endAction
-  } = _ref5,
-      props = _objectWithoutProperties(_ref5, _excluded$b);
+    endAction,
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$d);
 
+  var styles = useStyles$9();
   return /*#__PURE__*/jsxRuntime.jsx(VisibilityObserver, {
-    render: _ref6 => {
+    render: _ref2 => {
       var {
         ref,
         visibility
-      } = _ref6;
+      } = _ref2;
       return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           ref: ref
-        }), /*#__PURE__*/jsxRuntime.jsx(StyledAppBar$1, _objectSpread(_objectSpread({}, props), {}, {
+        }), /*#__PURE__*/jsxRuntime.jsx(core.AppBar, _objectSpread(_objectSpread({}, props), {}, {
           ref: appBarRef,
           position: "sticky",
-          "data-sticky": visibility === 'invisible',
-          children: /*#__PURE__*/jsxRuntime.jsx(StyledToolbar$1, {
-            children: /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+          className: clsx(styles.appBar, className, visibility === 'invisible' && styles.appBarSticky),
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Toolbar, {
+            className: styles.toolbar,
+            children: /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
               container: true,
               alignItems: "center",
-              children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(StartAction, {
+              children: [!!startAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
                 item: true,
+                className: styles.startAction,
                 children: startAction
-              }), /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+              }), /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
                 item: true,
                 xs: true,
                 zeroMinWidth: true,
-                children: [/*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
                   variant: "h3",
                   noWrap: true
                 }, titleTypographyProps), {}, {
                   children: title
-                })), !!subtitle && /*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({
+                })), !!subtitle && /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({
                   variant: "body2",
                   noWrap: true
                 }, subtitleTypographyProps), {}, {
                   children: subtitle
                 }))]
-              }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(EndAction, {
+              }), !!endAction && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
                 item: true,
+                className: styles.endAction,
                 children: endAction
               })]
             })
@@ -1523,7 +1539,7 @@ var DrawerTitle = /*#__PURE__*/React.forwardRef((_ref5, appBarRef) => {
 });
 if (process.env.NODE_ENV !== "production") DrawerTitle.displayName = "DrawerTitle";
 
-var _excluded$c = ["children", "alignItems"];
+var _excluded$e = ["children", "alignItems"];
 /**
  * @deprecated in favor of `Stack`.
  */
@@ -1533,16 +1549,16 @@ var GridStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     alignItems = 'stretch'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$e);
 
   var items = React.Children.toArray(children);
-  return /*#__PURE__*/jsxRuntime.jsx(material.Grid, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     container: true,
     wrap: "nowrap",
     direction: "column",
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
       item: true,
       zeroMinWidth: true,
       xs: alignItems === 'stretch' ? 12 : undefined,
@@ -1552,7 +1568,7 @@ var GridStack = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") GridStack.displayName = "GridStack";
 
-var _excluded$d = ["children", "wrap", "justify", "alignItems"];
+var _excluded$f = ["children", "wrap", "justify", "alignItems"];
 /**
  * @deprecated in favor of `Inline` component.
  */
@@ -1564,16 +1580,16 @@ var InlineGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     justify = 'flex-start',
     alignItems = 'flex-start'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$d);
+      props = _objectWithoutProperties(_ref, _excluded$f);
 
   var items = React.Children.toArray(children);
-  return /*#__PURE__*/jsxRuntime.jsx(material.Grid, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Grid, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     wrap: wrap,
     container: true,
-    justifyContent: justify,
+    justify: justify,
     alignItems: alignItems,
-    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+    children: items.map((item, idx) => /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
       item: true,
       zeroMinWidth: true,
       children: item
@@ -1582,33 +1598,30 @@ var InlineGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") InlineGrid.displayName = "InlineGrid";
 
-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"]': {
+var _excluded$g = ["size", "square", "classes", "children", "className", "CardContentProps"],
+    _excluded2$2 = ["content", "sizeLarge", "fullWidth"];
+var useStyles$a = /*#__PURE__*/styles.makeStyles(theme => ({
+  root: {
+    '&$fullWidth': {
       borderRadius: 0,
       borderLeftWidth: 0,
       borderRightWidth: 0
-    },
-    ["&[data-size=\"large\"] > ".concat(StyledCardContent.toString())]: {
+    }
+  },
+  fullWidth: {},
+  sizeLarge: {},
+  content: {
+    padding: theme.spacing(2),
+    '$sizeLarge > &': {
       [theme.breakpoints.up('sm')]: {
         padding: theme.spacing(3)
       }
     }
-  };
+  }
+}), {
+  name: 'SD-InfoCard'
 });
-var InfoCard = /*#__PURE__*/React.forwardRef((_ref3, _ref4) => {
+var InfoCard = /*#__PURE__*/React.forwardRef((_ref, _ref2) => {
   var {
     size,
     square,
@@ -1616,20 +1629,31 @@ var InfoCard = /*#__PURE__*/React.forwardRef((_ref3, _ref4) => {
     children,
     className,
     CardContentProps: cardContentProps = {}
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded$e);
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$g);
+
+  var _useStyles = useStyles$a({
+    classes
+  }),
+      {
+    content: contentClassName,
+    sizeLarge: sizeLargeClassName,
+    fullWidth: fullWidthClassName
+  } = _useStyles,
+      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
 
   var [rootNode, setRootNode] = 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(StyledCard, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Card, _objectSpread(_objectSpread({}, props), {}, {
     ref: node => {
-      assignRef(_ref4, node);
+      assignRef(_ref2, node);
       setRootNode(node);
     },
-    "data-size": size,
-    "data-full-width": isFullWidth,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+    classes: styles,
+    className: clsx(className, isFullWidth && fullWidthClassName, size === 'large' && sizeLargeClassName),
+    children: /*#__PURE__*/jsxRuntime.jsx(core.CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
+      className: clsx(cardContentProps.className, contentClassName),
       children: children
     }))
   }));
@@ -1685,8 +1709,8 @@ var Inline = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$f = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
-    _excluded2$1 = ["id", "InputProps"];
+var _excluded$h = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
+    _excluded2$3 = ["id", "InputProps"];
 
 function NumberInputComponent(_ref) {
   var {
@@ -1697,7 +1721,7 @@ function NumberInputComponent(_ref) {
     thousandSeparator = true,
     disableValueParsing
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$f);
+      props = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/jsxRuntime.jsx(NumberFormat, _objectSpread(_objectSpread({}, props), {}, {
     value: value !== null && value !== void 0 ? value : '',
@@ -1718,15 +1742,16 @@ function NumberInputComponent(_ref) {
   }));
 }
 
-var NumberField = /*#__PURE__*/React.forwardRef(_ref2 => {
+var NumberField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var {
     id,
     InputProps
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2$1);
+      props = _objectWithoutProperties(_ref2, _excluded2$3);
 
   var uid = useUID(id);
-  return /*#__PURE__*/jsxRuntime.jsx(material.TextField, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.TextField, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
     id: uid,
     InputProps: _objectSpread(_objectSpread({}, InputProps), {}, {
       inputComponent: NumberInputComponent
@@ -1736,7 +1761,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(_ref2 => {
 if (process.env.NODE_ENV !== "production") NumberField.displayName = "NumberField";
 NumberField.displayName = 'NumberField';
 
-var _excluded$g = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$i = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     label,
@@ -1747,27 +1772,27 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$g);
+      props = _objectWithoutProperties(_ref, _excluded$i);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, {
     error: error,
-    children: [/*#__PURE__*/jsxRuntime.jsx(material.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.FormControlLabel, _objectSpread(_objectSpread({}, formControlLabelProps), {}, {
       label: label,
       checked: checked,
       onBlur: onBlur,
       onChange: onChange,
-      control: /*#__PURE__*/jsxRuntime.jsx(material.Radio, _objectSpread({
+      control: /*#__PURE__*/jsxRuntime.jsx(core.Radio, _objectSpread({
         ref: ref,
         color: "primary"
       }, props))
-    })), helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, {
+    })), helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, {
       children: helperText
     })]
   });
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$h = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$j = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   var {
     name,
@@ -1780,20 +1805,20 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$h);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$j);
 
-  return /*#__PURE__*/jsxRuntime.jsxs(material.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
-    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(material.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
+    children: [!!label && /*#__PURE__*/jsxRuntime.jsx(core.FormLabel, _objectSpread(_objectSpread({}, formLabelProps), {}, {
       children: label
-    })), /*#__PURE__*/jsxRuntime.jsx(material.RadioGroup, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/jsxRuntime.jsx(core.RadioGroup, _objectSpread(_objectSpread({
       ref: ref
     }, radioGroupProps), {}, {
       name: name,
       value: value,
       onChange: onChange,
       children: children
-    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(material.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
+    })), !!helperText && /*#__PURE__*/jsxRuntime.jsx(core.FormHelperText, _objectSpread(_objectSpread({}, formHelperTextProps), {}, {
       children: helperText
     }))]
   }));
@@ -1830,9 +1855,9 @@ function useMinBreakpoint(minBreakpoint) {
   return minBreakpointIDX < breakpointIDX;
 }
 
-var _excluded$i = ["action", "children", "onClose", "className", "classes", "variant"],
-    _excluded2$2 = ["icon", "closeButton", "variantError", "variantSuccess"];
-var useStyles$1 = /*#__PURE__*/styles.makeStyles(theme => ({
+var _excluded$k = ["action", "children", "onClose", "className", "classes", "variant"],
+    _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
+var useStyles$b = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     color: exports.Color.White,
     backgroundColor: exports.Color.Dark500,
@@ -1875,9 +1900,9 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$i);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
-  var _useStyles = useStyles$1({
+  var _useStyles = useStyles$b({
     classes
   }),
       {
@@ -1886,10 +1911,10 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variantError,
     variantSuccess
   } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2$2);
+      styles = _objectWithoutProperties(_useStyles, _excluded2$4);
 
-  var Icon = variant === 'error' ? iconsMaterial.Warning : variant === 'success' ? iconsMaterial.CheckCircle : undefined;
-  return /*#__PURE__*/jsxRuntime.jsx(material.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
+  var Icon = variant === 'error' ? icons.Warning : variant === 'success' ? icons.CheckCircle : undefined;
+  return /*#__PURE__*/jsxRuntime.jsx(core.SnackbarContent, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     classes: styles,
     className: clsx(className, {
@@ -1901,21 +1926,21 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         className: icon
       }), children]
     }),
-    action: !action && !onClose ? null : /*#__PURE__*/jsxRuntime.jsxs(material.Grid, {
+    action: !action && !onClose ? null : /*#__PURE__*/jsxRuntime.jsxs(core.Grid, {
       container: true,
       spacing: 1,
       alignItems: "center",
       wrap: "nowrap",
-      children: [!!action && /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      children: [!!action && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
         item: true,
         children: action
-      }), onClose && /*#__PURE__*/jsxRuntime.jsx(material.Grid, {
+      }), onClose && /*#__PURE__*/jsxRuntime.jsx(core.Grid, {
         item: true,
-        children: /*#__PURE__*/jsxRuntime.jsx(material.IconButton, {
+        children: /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
           "aria-label": "close",
           onClick: onClose,
           className: closeButton,
-          children: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Close, {
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.Close, {
             fontSize: "small"
           })
         })
@@ -1925,10 +1950,10 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$j = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$l = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(material.Slide, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Slide, _objectSpread(_objectSpread({}, props), {}, {
     direction: "up"
   }));
 }
@@ -1944,7 +1969,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$l);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -1952,8 +1977,8 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   }
 
-  return /*#__PURE__*/jsxRuntime.jsx(material.Portal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(material.Snackbar, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Portal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Snackbar, _objectSpread(_objectSpread({}, props), {}, {
       ref: ref,
       open: open,
       TransitionComponent: TransitionComponent,
@@ -1973,7 +1998,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$k = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$m = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -2019,7 +2044,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$k);
+        props = _objectWithoutProperties(_ref3, _excluded$m);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2116,8 +2141,8 @@ var Stack = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$l = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
-var useStyles$2 = /*#__PURE__*/styles.makeStyles(theme => ({
+var _excluded$n = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
     alignItems: 'center',
@@ -2200,12 +2225,12 @@ var Tag = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
-  var styles = useStyles$2({
+  var styles = useStyles$c({
     classes
   });
-  return /*#__PURE__*/jsxRuntime.jsx(material.Typography, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(core.Typography, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     noWrap: noWrap,
     component: component,
@@ -2228,28 +2253,29 @@ var Tag = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") Tag.displayName = "Tag";
 
 function overrideAppBar(theme) {
-  theme.components.MuiAppBar = {
-    defaultProps: {
-      elevation: 0,
-      color: 'inherit',
-      position: 'static'
-    }
+  theme.props.MuiAppBar = {
+    elevation: 0,
+    color: 'inherit',
+    position: 'static'
   };
 }
 
 function overrideAutocomplete(theme) {
-  var sm = theme.breakpoints.up('sm');
-  theme.components.MuiAutocomplete = {
-    defaultProps: {
-      popupIcon: /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, {
+  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, {
         children: /*#__PURE__*/jsxRuntime.jsx("path", {
           d: "M12 16.5L6 9h12l-6 7.5z",
           fill: "currentColor"
         })
       })
-    },
-    styleOverrides: {
-      // paper: { ...theme.typography.body2 },
+    }
+  });
+  Object.assign(theme.overrides, {
+    MuiAutocomplete: {
+      paper: _objectSpread({}, theme.typography.body2),
       tag: {
         margin: '4px',
         [sm]: {
@@ -2273,47 +2299,45 @@ function overrideAutocomplete(theme) {
       inputRoot: {
         '&[class*="MuiOutlinedInput-root"]': {
           padding: '6px 8px',
-          ["& .".concat(material.autocompleteClasses.input)]: {
+          '& $input': {
             width: '144px',
             padding: '4px'
           },
-          ["& .".concat(material.autocompleteClasses.input, ":first-child")]: {
-            paddingLeft: 'unset'
+          '& $input:first-child': {
+            paddingLeft: undefined
           },
-          ["& .".concat(material.autocompleteClasses.endAdornment)]: {
+          '& $endAdornment': {
             right: '12px'
           },
           [sm]: {
             padding: theme.spacing(0.5, 0.75),
-            ["& .".concat(material.autocompleteClasses.input)]: {
+            '& $input': {
               padding: '2px'
             },
-            ["& .".concat(material.autocompleteClasses.endAdornment)]: {
+            '& $endAdornment': {
               right: '8px'
             }
           }
         }
       }
     }
-  };
+  });
 }
 
 function overrideAvatar(theme) {
-  theme.components.MuiAvatar = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
-        textTransform: 'uppercase',
-        width: theme.spacing(5),
-        height: theme.spacing(5),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(4),
-          height: theme.spacing(4)
-        }
-      }),
-      colorDefault: {
-        color: exports.Color.Dark300,
-        backgroundColor: exports.Color.Silver300
+  theme.overrides.MuiAvatar = {
+    root: _objectSpread(_objectSpread({}, theme.typography.h5), {}, {
+      textTransform: 'uppercase',
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(4),
+        height: theme.spacing(4)
       }
+    }),
+    colorDefault: {
+      color: exports.Color.Dark300,
+      backgroundColor: exports.Color.Silver300
     }
   };
 }
@@ -2326,11 +2350,9 @@ 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
     },
@@ -2341,13 +2363,13 @@ function textVariant(text, outline, background, progress) {
       backgroundColor: background,
       boxShadow: outlineShadow(2, outline)
     },
-    ["&.".concat(material.buttonClasses.disabled)]: {
+    '&$disabled': {
       color: outline,
       boxShadow: outlineShadow(),
-      backgroundColor: exports.Color.Transparent,
-      ["& .".concat(lab.loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      backgroundColor: exports.Color.Transparent
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -2361,11 +2383,11 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
   return {
     backgroundColor,
     color: staleText,
-    border: 0,
+    border: undefined,
     boxShadow: outlinedBorder(staleBorder),
     '&:hover': {
       color: activeText,
-      border: 0,
+      border: undefined,
       backgroundColor: activeBackground,
       boxShadow: outlinedBorder(activeBorder)
     },
@@ -2377,13 +2399,13 @@ function outlinedVariant(staleText, staleBorder, disabledText, disabledBorder, a
     '&:focus': {
       boxShadow: outlinedBorder(activeBorder, activeOutline)
     },
-    ["&.".concat(material.buttonClasses.disabled)]: {
+    '&$disabled': {
       backgroundColor,
       color: disabledText,
-      boxShadow: outlinedBorder(disabledBorder),
-      ["& .".concat(lab.loadingButtonClasses.loadingIndicator)]: {
-        color: progress
-      }
+      boxShadow: outlinedBorder(disabledBorder)
+    },
+    '&$disabled[aria-busy="true"]': {
+      color: progress
     }
   };
 }
@@ -2402,236 +2424,229 @@ function containedVariant(text, backgroundColor, outline, active, disabledText,
     '&:focus': {
       boxShadow: outlineShadow(3, outline)
     },
-    ["&.".concat(material.buttonClasses.disabled)]: {
+    '&$disabled': {
       color: disabledText,
       boxShadow: outlineShadow(),
-      backgroundColor: disabledBackground,
-      ["& .".concat(lab.loadingButtonClasses.loadingIndicator)]: {
-        color: disabledText
-      }
+      backgroundColor: disabledBackground
     }
   };
 }
 
-function sizeSmall(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    padding: theme.spacing(0.5, 3),
-    [sm]: {
-      padding: theme.spacing(0.25, 2)
-    }
-  });
-}
-
-function sizeLarge(theme) {
-  var sm = theme.breakpoints.up('sm');
-  return _objectSpread(_objectSpread({}, theme.typography.button), {}, {
-    fontSize: '18px',
-    lineHeight: '28px',
-    padding: theme.spacing(1.75, 8),
-    [sm]: {
-      fontSize: '16px',
-      lineHeight: '24px',
-      padding: theme.spacing(1, 4)
-    }
-  });
-}
-
 function overrideButton(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiLoadingButton = {
-    defaultProps: {
-      variant: 'outlined'
-    },
-    styleOverrides: {
-      loadingIndicator: {
-        color: 'inherit',
-        fontSize: theme.spacing(2),
-        [".".concat(material.buttonClasses.sizeLarge, " &")]: {
-          fontSize: theme.spacing(3)
+  theme.props.MuiButton = {
+    color: 'primary',
+    variant: 'outlined',
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiButton = {
+    root: {
+      color: undefined,
+      minWidth: theme.spacing(6),
+      transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
+      padding: theme.spacing(1.25, 3),
+      [sm]: {
+        padding: theme.spacing(0.75, 2)
+      },
+      '&:hover': {
+        backgroundColor: undefined,
+        '&$disabled': {
+          backgroundColor: undefined
+        },
+        '@media (hover: none)': {
+          backgroundColor: undefined
+        }
+      },
+      '&$disabled': {
+        color: undefined
+      },
+      '&[aria-busy="true"]': {
+        '& $label': {
+          visibility: 'hidden',
+          '& > [role="progressbar"]': {
+            position: 'absolute',
+            visibility: 'visible',
+            top: 'calc(50% - 0.5em)',
+            left: 'calc(50% - 0.5em)',
+            fontSize: theme.spacing(2),
+            '$sizeLarge &': {
+              fontSize: theme.spacing(3)
+            }
+          }
         }
       }
-    }
-  };
-  theme.components.MuiButton = {
-    defaultProps: {
-      color: 'primary',
-      variant: 'outlined',
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        minWidth: theme.spacing(6),
-        transition: theme.transitions.create(['color', 'border', 'box-shadow', 'background-color']),
-        padding: theme.spacing(1.25, 3),
+    },
+    label: {
+      '& > .MuiSvgIcon-root': {
+        fontSize: '24px',
         [sm]: {
-          padding: theme.spacing(0.75, 2)
-        },
-        '&:hover': {
-          backgroundColor: 'initial',
-          ["&.".concat(material.buttonClasses.disabled)]: {
-            backgroundColor: 'initial'
-          },
-          '@media (hover: none)': {
-            backgroundColor: 'initial'
-          }
-        },
-        ["&.".concat(material.buttonClasses.disabled)]: {
-          color: 'initial'
+          fontSize: '20px'
         },
-        '& > .MuiSvgIcon-root': {
-          fontSize: '24px',
+        '$sizeLarge &': {
+          fontSize: '28px',
           [sm]: {
-            fontSize: '20px'
-          },
-          [".".concat(material.buttonClasses.sizeLarge, "&")]: {
-            fontSize: '28px',
-            [sm]: {
-              fontSize: '24px'
-            }
+            fontSize: '24px'
           }
         }
+      }
+    },
+    sizeSmall: {
+      padding: theme.spacing(0.5, 3),
+      [sm]: {
+        padding: theme.spacing(0.25, 2)
+      }
+    },
+    sizeLarge: {
+      fontSize: '18px',
+      lineHeight: '28px',
+      padding: theme.spacing(1.75, 8),
+      [sm]: {
+        fontSize: '16px',
+        lineHeight: '24px',
+        padding: theme.spacing(1, 4)
+      }
+    },
+    text: {
+      padding: undefined,
+      '&[data-color="error"]': textVariant(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
+        }
       },
-      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)
+      '&:active': {
+        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)
+      '&$focusVisible': {
+        boxShadow: 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)
+      '&$disabled': {
+        color: undefined,
+        boxShadow: undefined,
+        backgroundColor: 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)
+      '&[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
     }
   };
 }
 
 function overrideCard(theme) {
-  theme.components.MuiCard = {
-    defaultProps: {
-      variant: 'outlined'
-    }
+  theme.props.MuiCard = {
+    variant: 'outlined'
   };
-  theme.components.MuiCardContent = {
-    styleOverrides: {
-      root: {
-        '&:last-child': {
-          paddingBottom: '16px'
-        }
+  theme.overrides.MuiCardContent = {
+    root: {
+      '&:last-child': {
+        paddingBottom: undefined
       }
     }
   };
 }
 
 function overrideCheckbox(theme) {
-  theme.components.MuiCheckbox = {
-    defaultProps: {
-      color: 'primary',
-      icon: /*#__PURE__*/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"
-        })]
+  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"
       })
+    }),
+    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)
     },
-    styleOverrides: {
-      root: {
-        color: exports.Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: exports.Color.Silver500
       },
-      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
-        }
+      '&:hover:not($checked)': {
+        color: exports.Color.Dark100
       }
     }
   };
@@ -2639,223 +2654,197 @@ function overrideCheckbox(theme) {
 
 function overrideChip(theme) {
   var sm = theme.breakpoints.up('sm');
-  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.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.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
     },
-    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'
-      },
-      labelSmall: {
-        paddingLeft: 6,
-        paddingRight: 6,
-        [sm]: {
-          paddingLeft: 4,
-          paddingRight: 4
-        }
+    labelSmall: {
+      paddingLeft: 6,
+      paddingRight: 6,
+      [sm]: {
+        paddingLeft: 4,
+        paddingRight: 4
+      }
+    },
+    clickable: {
+      '&:hover, &:focus': {
+        backgroundColor: undefined
       },
-      clickable: {
-        '&:hover, &:focus': {
-          backgroundColor: exports.Color.Silver200
-        },
-        '&:active': {
-          boxShadow: 'unset'
-        },
-        '&:focus': {
-          boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
-        },
-        '&:active, &:hover': {
-          backgroundColor: exports.Color.Silver300
-        }
+      '&:active': {
+        boxShadow: undefined
       },
-      deletable: {
-        '&:focus': {
-          backgroundColor: exports.Color.Silver200,
-          boxShadow: "0 0 0 2px ".concat(exports.Color.Silver300)
-        }
+      '&:focus': {
+        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
-          }
-        },
+      '&: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': {
         '& > svg': {
-          borderRadius: '50%',
-          color: exports.Color.Dark200,
-          fontSize: '1em'
-        }
-      },
-      deleteIconSmall: {
-        width: 'unset',
-        height: 'unset',
-        padding: theme.spacing(0.5),
-        marginLeft: theme.spacing(-0.5),
-        marginRight: theme.spacing(0.25),
-        [sm]: {
-          marginRight: 0
+          backgroundColor: exports.Color.Silver400
         }
       },
-      icon: {
-        color: exports.Color.Dark100,
-        fontSize: '1em',
-        marginRight: 'unset'
-      },
-      iconSmall: {
-        width: 'unset',
-        height: 'unset',
-        marginLeft: 8,
-        marginRight: 'unset',
-        [sm]: {
-          marginLeft: 4
-        }
+      '& > 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
       }
     }
   };
 }
 
 function overrideDialog(theme) {
-  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.props.MuiDialogTitle = {
+    disableTypography: true
+  };
+  theme.overrides.MuiDialog = {
+    paper: {
+      margin: theme.spacing(3)
+    },
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 360) + 32 * 2)]: {
+          maxWidth: 'calc(100% - 64px)'
         }
       }
     }
   };
-  theme.components.MuiDialogTitle = {
-    defaultProps: {
-      // @ts-expect-error DialogTitleProps has missing type def
-      variant: 'h3'
-    }
+  theme.overrides.MuiDialogTitle = {
+    root: _objectSpread({}, theme.typography.h3)
   };
-  theme.components.MuiDialogContent = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(0, 3)
-      }
+  theme.overrides.MuiDialogContent = {
+    root: {
+      padding: theme.spacing(0, 3)
     }
   };
-  theme.components.MuiDialogActions = {
-    styleOverrides: {
-      root: {
-        padding: theme.spacing(3)
-      },
-      spacing: {
-        '& > :not(:first-child)': {
-          marginLeft: theme.spacing(2)
-        }
+  theme.overrides.MuiDialogActions = {
+    root: {
+      padding: theme.spacing(3)
+    },
+    spacing: {
+      '& > :not(:first-child)': {
+        marginLeft: theme.spacing(2)
       }
     }
   };
 }
 
 function overrideDrawer(theme) {
-  theme.components.MuiDrawer = {
-    defaultProps: {
-      anchor: 'right'
-    },
-    styleOverrides: {
-      paper: {
-        maxWidth: '100%',
-        minWidth: '100%',
-        [theme.breakpoints.up('sm')]: {
-          minWidth: theme.spacing(54),
-          maxWidth: theme.breakpoints.values.sm
-        }
+  theme.props.MuiDrawer = {
+    anchor: 'right'
+  };
+  theme.overrides.MuiDrawer = {
+    paper: {
+      maxWidth: '100%',
+      minWidth: '100%',
+      [theme.breakpoints.up('sm')]: {
+        minWidth: theme.spacing(54),
+        maxWidth: theme.breakpoints.values.sm
       }
     }
   };
 }
 
 function overrideIconButton(theme) {
-  theme.components.MuiIconButton = {
-    styleOverrides: {
-      root: {
-        // no selector for default color
-        ["&:not(.".concat(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
-        }
+  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
       },
-      colorPrimary: {
-        '&:active': {
-          color: exports.Color.Blue500
-        },
-        '&:hover ': {
-          color: exports.Color.Blue300
-        },
-        '&:focus': {
-          backgroundColor: exports.Color.Blue50
-        }
+      '&:active': {
+        color: exports.Color.Dark500
       },
-      edgeEnd: {
-        marginRight: theme.spacing(-1)
+      '&:hover ': {
+        color: exports.Color.Dark300
       },
-      edgeStart: {
-        marginLeft: theme.spacing(-1)
+      '&:focus': {
+        backgroundColor: exports.Color.Silver400
       },
-      sizeSmall: {
-        padding: 3,
-        fontSize: theme.typography.pxToRem(18)
+      '&$disabled': {
+        color: exports.Color.Silver500
+      }
+    },
+    colorPrimary: {
+      '&:active': {
+        color: exports.Color.Blue500
       },
-      sizeMedium: {
-        padding: 12,
-        fontSize: theme.typography.pxToRem(24)
+      '&:hover ': {
+        color: exports.Color.Blue300
       },
-      sizeLarge: {// todo declare large size
+      '&:focus': {
+        backgroundColor: exports.Color.Blue50
       }
+    },
+    edgeEnd: {
+      marginRight: theme.spacing(-1)
+    },
+    edgeStart: {
+      marginLeft: theme.spacing(-1)
     }
   };
 }
@@ -2865,389 +2854,350 @@ function line(color) {
 }
 
 function overrideLink(theme) {
-  theme.components.MuiLink = {
-    defaultProps: {
-      underline: 'none',
-      color: 'textPrimary'
-    },
-    styleOverrides: {
-      root: {
-        backgroundSize: '100% 1px',
-        backgroundRepeat: 'repeat-x',
-        backgroundPosition: '0 100%',
-        backgroundColor: exports.Color.Transparent,
-        '&:focus': {
-          outline: 'none'
-        },
-        '&:hover, &:active': {
-          backgroundImage: line('currentColor')
-        }
+  theme.props.MuiLink = {
+    underline: 'none',
+    color: 'textPrimary'
+  };
+  theme.overrides.MuiLink = {
+    root: {
+      backgroundSize: '100% 1px',
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: '0 100%',
+      backgroundColor: exports.Color.Transparent,
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:hover, &:active': {
+        backgroundImage: line('currentColor')
       },
-      // @ts-expect-error type def need in patch-package
-      colorTextPrimary: {
+      '&.MuiTypography-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.components.MuiListItem = {
-    styleOverrides: {
-      root: {
-        ["&.".concat(material.listItemClasses.selected, ", &.").concat(material.listItemClasses.selected, ":hover")]: {
-          backgroundColor: exports.Color.Blue50
-        },
-        '& .MuiTouchRipple-root': {
-          color: exports.Color.Blue100
-        }
+  theme.overrides.MuiListItem = {
+    root: {
+      '&$selected, &$selected:hover': {
+        backgroundColor: exports.Color.Blue50
+      },
+      '& .MuiTouchRipple-root': {
+        color: exports.Color.Blue100
       }
     }
   };
 }
 
 function overrideMenu(theme) {
-  theme.components.MuiMenu = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      }
+  theme.props.MuiMenu = {
+    getContentAnchorEl: null,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'left'
     }
   };
-  theme.components.MuiMenuItem = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-        '& .MuiTouchRipple-root': {
-          color: exports.Color.Blue100
-        },
-        ["&.".concat(material.menuItemClasses.selected, ", &.").concat(material.menuItemClasses.selected, ":hover")]: {
-          backgroundColor: exports.Color.Blue50,
-          ["&.".concat(material.menuItemClasses.focusVisible)]: {
-            backgroundColor: exports.Color.Blue50
-          }
-        }
-      })
-    }
+  theme.overrides.MuiMenuItem = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1)
+    })
   };
 }
 
 function overridePagination(theme) {
-  theme.components.MuiPaginationItem = {
-    styleOverrides: {
-      root: {
-        color: exports.Color.Dark400
+  var props = {};
+  var overrides = {
+    root: {
+      color: exports.Color.Dark400
+    },
+    page: {
+      '&:hover': {
+        backgroundColor: exports.Color.Silver200
       },
-      page: {
-        '&:hover': {
-          backgroundColor: exports.Color.Silver200
-        },
-        ["&.".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
-          }
+      '&$focusVisible': {
+        borderRadius: 4,
+        backgroundColor: exports.Color.White,
+        border: "1px solid ".concat(exports.Color.Blue100)
+      },
+      '&$selected': {
+        backgroundColor: exports.Color.Silver400,
+        '&:hover, &$focusVisible': {
+          backgroundColor: exports.Color.Silver400
         },
-        ["&.".concat(material.paginationItemClasses.disabled)]: {
-          opacity: 1,
-          color: exports.Color.Dark100
+        '&$disabled': {
+          color: exports.Color.Dark100,
+          backgroundColor: exports.Color.Silver400
         }
+      },
+      '&$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.components.MuiPaper = {
-    defaultProps: {
-      elevation: 0
-    },
-    styleOverrides: {
-      elevation0: {
-        border: "1px solid ".concat(exports.Color.Silver400)
-      }
+  theme.props.MuiPaper = {
+    elevation: 0
+  };
+  theme.overrides.MuiPaper = {
+    elevation0: {
+      border: "1px solid ".concat(exports.Color.Silver400)
     }
   };
 }
 
 function overrideRadio(theme) {
-  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
-        })]
+  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"
       })
+    }),
+    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)
     },
-    styleOverrides: {
-      root: {
-        color: exports.Color.Dark100,
-        marginTop: theme.spacing(-0.625),
-        marginBottom: theme.spacing(-0.625)
+    colorPrimary: {
+      '&$checked$disabled': {
+        color: exports.Color.Silver500
       },
-      colorPrimary: {
-        ["&.".concat(material.radioClasses.disabled, ".").concat(material.radioClasses.checked)]: {
-          color: exports.Color.Silver500
-        },
-        ["&:hover:not(.".concat(material.radioClasses.checked, ")")]: {
-          color: exports.Color.Dark100
-        }
+      '&:hover:not($checked)': {
+        color: exports.Color.Dark100
       }
     }
   };
 }
 
 function overrideSnackbar(theme) {
-  theme.components.MuiSnackbar = {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      }
-    },
-    styleOverrides: {
-      anchorOriginBottomCenter: {
-        left: 0,
-        right: 0,
-        bottom: 0
-      }
+  theme.overrides.MuiSnackbar = {
+    anchorOriginBottomCenter: {
+      left: 0,
+      right: 0,
+      bottom: 0
     }
   };
-  theme.components.MuiSnackbarContent = {
-    styleOverrides: {
-      root: {
-        width: '100%',
-        borderRadius: 0,
-        minHeight: theme.spacing(7.5),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(54),
-          maxWidth: theme.spacing(54),
-          borderRadius: theme.spacing(0.5)
-        }
-      },
-      message: {
-        flex: 1,
-        display: 'flex'
+  theme.overrides.MuiSnackbarContent = {
+    root: {
+      width: '100%',
+      borderRadius: 0,
+      minHeight: theme.spacing(7.5),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(54),
+        maxWidth: theme.spacing(54),
+        borderRadius: theme.spacing(0.5)
       }
+    },
+    message: {
+      flex: 1,
+      display: 'flex'
     }
   };
 }
 
 function overrideSvgIcon(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiSvgIcon = {
-    styleOverrides: {
-      root: {
-        display: 'inherit',
-        fontSize: 'var(--mui-svg-icon-size, 32px)',
-        [sm]: {
-          fontSize: 'var(--mui-svg-icon-size, 24px)'
-        }
-      },
-      fontSizeInherit: {
-        fontSize: 'inherit',
-        [sm]: {
-          fontSize: 'inherit'
-        }
-      },
-      fontSizeSmall: {
-        fontSize: 'var(--mui-svg-icon-size, 24px)',
-        [sm]: {
-          fontSize: 'var(--mui-svg-icon-size, 16px)'
-        }
-      },
-      fontSizeLarge: {
-        '&': {
-          fontSize: 'var(--mui-svg-icon-size, 32px)'
-        }
-      },
-      colorAction: {
-        color: exports.Color.Dark100
+  theme.overrides.MuiSvgIcon = {
+    root: {
+      display: 'inherit',
+      fontSize: 'var(--mui-svg-icon-size, 32px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)'
       }
+    },
+    fontSizeSmall: {
+      fontSize: 'var(--mui-svg-icon-size, 24px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 16px)'
+      }
+    },
+    fontSizeLarge: {
+      fontSize: 'var(--mui-svg-icon-size, 32px)'
+    },
+    colorAction: {
+      color: exports.Color.Dark100
     }
   };
 }
 
 function overrideSwitch(theme) {
   var sm = theme.breakpoints.up('sm');
-  theme.components.MuiSwitch = {
-    defaultProps: {
-      color: 'primary',
-      disableRipple: true,
-      disableFocusRipple: true
-    },
-    styleOverrides: {
-      root: {
-        width: theme.spacing(9.5),
-        height: theme.spacing(5.5),
-        padding: theme.spacing(0.75, 1.5),
-        [sm]: {
-          width: theme.spacing(8),
-          height: theme.spacing(4),
-          padding: theme.spacing(0.5, 1.5)
-        }
+  theme.props.MuiSwitch = {
+    color: 'primary',
+    disableRipple: true,
+    disableFocusRipple: true
+  };
+  theme.overrides.MuiSwitch = {
+    root: {
+      width: theme.spacing(9.5),
+      height: theme.spacing(5.5),
+      padding: theme.spacing(0.75, 1.5),
+      [sm]: {
+        width: theme.spacing(8),
+        height: theme.spacing(4),
+        padding: theme.spacing(0.5, 1.5)
+      }
+    },
+    track: {
+      opacity: undefined,
+      boxShadow: "0 0 0 0 ".concat(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)
       },
-      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),
+      '&$checked': {
+        transform: "translateX(".concat(theme.spacing(2.5), "px)"),
         [sm]: {
-          borderRadius: theme.spacing(1.625)
+          transform: "translateX(".concat(theme.spacing(2), "px)")
         }
       },
-      thumb: {
-        color: exports.Color.White,
-        boxShadow: 'none',
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        [sm]: {
-          width: theme.spacing(2),
-          height: theme.spacing(2)
-        }
+      '&$checked + $track': {
+        opacity: undefined
       },
-      switchBase: {
-        left: theme.spacing(1),
-        padding: theme.spacing(1.25, 1),
-        [sm]: {
-          padding: theme.spacing(1)
-        },
-        ["&.".concat(material.switchClasses.checked)]: {
-          transform: "translateX(".concat(theme.spacing(2.5), ")"),
-          [sm]: {
-            transform: "translateX(".concat(theme.spacing(2), ")")
+      '&$disabled + $track': {
+        opacity: undefined
+      }
+    },
+    colorPrimary: {
+      '&$checked': {
+        color: undefined,
+        '&:hover': {
+          backgroundColor: undefined,
+          '& + $track': {
+            backgroundColor: exports.Color.Blue400
           }
-        },
-        ["&.".concat(material.switchClasses.checked, " + .").concat(material.switchClasses.track)]: {
-          opacity: 1
-        },
-        ["&.".concat(material.switchClasses.disabled, " + .").concat(material.switchClasses.track)]: {
-          opacity: 1
         }
       },
-      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)
-        }
+      '& + $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)
       }
     }
   };
 }
 
 function overrideTabs(theme) {
-  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.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.MuiTab = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        minHeight: theme.spacing(6),
-        transition: theme.transitions.create(['color'], {
-          duration: theme.transitions.duration.short
-        }),
-        [theme.breakpoints.up('sm')]: {
-          minWidth: 'unset',
-          fontSize: 'unset',
-          padding: theme.spacing(0.75, 3)
-        }
+  theme.overrides.MuiTab = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      minHeight: theme.spacing(6),
+      transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short
       }),
-      textColorPrimary: {
-        color: exports.Color.Dark500,
-        '&:hover, &:focus': {
-          color: exports.Color.Blue300
-        }
+      [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
       }
     }
   };
 }
 
-var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(material.SvgIcon, _objectSpread(_objectSpread({
+var SelectIcon = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(core.SvgIcon, _objectSpread(_objectSpread({
   ref: ref
 }, props), {}, {
   children: /*#__PURE__*/jsxRuntime.jsx("path", {
@@ -3258,248 +3208,223 @@ 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.components.MuiTextField = {
-    defaultProps: {
-      minRows: 4,
-      maxRows: 4,
-      variant: 'outlined'
-    }
+  theme.props.MuiTextField = {
+    minRows: 4,
+    maxRows: 4,
+    variant: 'outlined'
   };
-  theme.components.MuiFormLabel = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        color: 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.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)
-        }
+  theme.overrides.MuiFormLabel = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      color: exports.Color.Dark400,
+      '&$error': {
+        color: undefined
       },
-      inputMultiline: {
-        resize: 'vertical'
+      '&$focused': {
+        color: undefined
+      },
+      '&$disabled': {
+        color: undefined
       }
+    })
+  };
+  theme.overrides.MuiInputBase = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      '&$disabled': {
+        backgroundColor: exports.Color.Silver100
+      }
+    }),
+    input: {
+      textOverflow: 'ellipsis',
+      height: theme.spacing(3),
+      [sm]: {
+        height: theme.spacing(2.5)
+      }
+    },
+    inputMultiline: {
+      resize: 'vertical'
     }
   };
-  theme.components.MuiInputLabel = {
-    defaultProps: {
-      shrink: true
-    },
-    styleOverrides: {
-      root: {
-        marginBottom: theme.spacing(0.5),
-        transformOrigin: 'unset'
-      },
-      formControl: {
-        top: 'unset',
-        left: 'unset',
-        position: 'unset',
-        transform: 'unset'
-      },
-      shrink: {
-        transform: 'unset',
-        transformOrigin: 'unset'
-      },
-      outlined: {
-        zIndex: 'unset',
-        transform: 'unset',
-        pointerEvents: 'unset'
+  theme.props.MuiInputLabel = {
+    shrink: true
+  };
+  theme.overrides.MuiInputLabel = {
+    root: {
+      marginBottom: theme.spacing(0.5),
+      transformOrigin: undefined
+    },
+    formControl: {
+      top: undefined,
+      left: undefined,
+      position: undefined,
+      transform: undefined
+    },
+    shrink: {
+      transform: undefined,
+      transformOrigin: undefined
+    },
+    outlined: {
+      zIndex: undefined,
+      transform: undefined,
+      pointerEvents: undefined,
+      '&$shrink': {
+        transform: undefined
       }
     }
   };
-  theme.components.MuiOutlinedInput = {
-    defaultProps: {
-      notched: false
-    },
-    styleOverrides: {
-      root: {
-        ["&:hover .".concat(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: {
+  theme.props.MuiOutlinedInput = {
+    notched: false
+  };
+  theme.overrides.MuiOutlinedInput = {
+    root: {
+      '&:hover $notchedOutline': {
+        borderColor: undefined
+      }
+    },
+    input: {
+      padding: theme.spacing(1.25, 1.5),
+      [sm]: {
         padding: theme.spacing(0.75, 1)
-      },
-      adornedStart: {
-        paddingLeft: theme.spacing(1)
-      },
-      adornedEnd: {
-        paddingRight: theme.spacing(1)
-      },
-      notchedOutline: {
-        top: 0,
-        borderColor: exports.Color.Silver500,
-        '& legend': {
-          display: 'none'
-        }
+      }
+    },
+    multiline: {
+      padding: theme.spacing(0.75, 1)
+    },
+    adornedStart: {
+      paddingLeft: theme.spacing(1)
+    },
+    adornedEnd: {
+      paddingRight: theme.spacing(1)
+    },
+    notchedOutline: {
+      top: 0,
+      borderColor: exports.Color.Silver500,
+      '& legend': {
+        display: 'none'
       }
     }
   };
-  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)
-        }
-      },
-      iconOutlined: {
-        right: theme.spacing(1.5),
-        [sm]: {
-          right: theme.spacing(1)
-        }
+  theme.props.MuiSelect = {
+    IconComponent: SelectIcon
+  };
+  theme.overrides.MuiSelect = {
+    icon: {
+      top: 'calc(50% - 0.5em)',
+      '$disabled &': {
+        color: exports.Color.Dark100
       },
-      select: {
+      fontSize: theme.spacing(3),
+      [sm]: {
+        fontSize: theme.spacing(2)
+      }
+    },
+    iconOutlined: {
+      right: theme.spacing(1.5),
+      [sm]: {
+        right: theme.spacing(1)
+      }
+    },
+    select: {
+      '&:focus': {
+        backgroundColor: undefined
+      }
+    },
+    selectMenu: {
+      '&&': {
         paddingRight: theme.spacing(4.5),
         [sm]: {
           right: theme.spacing(4)
-        },
-        '&:focus': {
-          backgroundColor: 'unset'
         }
       }
     }
   };
-  theme.components.MuiInputAdornment = {
-    styleOverrides: {
-      root: {
-        '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-          fontSize: theme.spacing(3),
-          [sm]: {
-            fontSize: theme.spacing(2.5)
-          }
-        },
-        '& .MuiIconButton-root': {
-          padding: theme.spacing(1)
+  theme.overrides.MuiInputAdornment = {
+    root: {
+      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
+        fontSize: theme.spacing(3),
+        [sm]: {
+          fontSize: theme.spacing(2.5)
         }
       },
-      positionStart: {
-        '& .MuiIconButton-root': {
-          marginLeft: theme.spacing(-0.5),
-          [sm]: {
-            marginLeft: theme.spacing(-0.75)
-          }
+      '& .MuiIconButton-root': {
+        padding: theme.spacing(1)
+      }
+    },
+    positionStart: {
+      '& .MuiIconButton-root': {
+        marginLeft: theme.spacing(-0.5),
+        [sm]: {
+          marginLeft: theme.spacing(-0.75)
         }
-      },
-      positionEnd: {
-        '& .MuiIconButton-root': {
-          marginRight: theme.spacing(-0.5),
-          [sm]: {
-            marginRight: theme.spacing(-0.75)
-          }
+      }
+    },
+    positionEnd: {
+      '& .MuiIconButton-root': {
+        marginRight: theme.spacing(-0.5),
+        [sm]: {
+          marginRight: theme.spacing(-0.75)
         }
       }
     }
   };
-  theme.components.MuiFormHelperText = {
-    styleOverrides: {
-      root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        marginTop: theme.spacing(0.5)
-      }),
-      contained: {
-        marginLeft: 'unset',
-        marginRight: 'unset'
-      }
+  theme.overrides.MuiFormHelperText = {
+    root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
+      marginTop: theme.spacing(0.5)
+    }),
+    contained: {
+      marginLeft: undefined,
+      marginRight: undefined
     }
   };
 }
 
 function overrideToolbar(theme) {
-  theme.components.MuiToolbar = {
-    styleOverrides: {
-      regular: {
-        minHeight: theme.spacing(8)
-      },
-      gutters: {
-        [theme.breakpoints.up('sm')]: {
-          paddingLeft: theme.spacing(2),
-          paddingRight: theme.spacing(2)
-        }
+  theme.overrides.MuiToolbar = {
+    regular: {
+      minHeight: theme.spacing(8)
+    },
+    gutters: {
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2)
       }
     }
   };
 }
 
 function overrideTooltip(theme) {
-  theme.components.MuiTooltip = {
-    defaultProps: {
-      arrow: true
-    },
-    styleOverrides: {
-      tooltip: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
-        padding: theme.spacing(1, 1.5),
-        backgroundColor: 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
-          }
+  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
         }
       },
-      arrow: {
-        color: exports.Color.Dark400,
-        fontSize: theme.spacing(1)
+      '&[x-placement*="bottom"] $arrow': {
+        '&::before': {
+          borderTopLeftRadius: 2
+        }
       }
+    },
+    arrow: {
+      color: exports.Color.Dark400,
+      fontSize: theme.spacing(1)
     }
   };
 }
@@ -3609,24 +3534,14 @@ function createTypographyOptions(breakpoints) {
   };
 }
 function overrideTypography(theme) {
-  theme.components.MuiTypography = {
-    defaultProps: {
-      variant: 'body2'
-    }
-  };
-}
-
-function overrideCssBaseline(theme) {
-  theme.components.MuiCssBaseline = {
-    styleOverrides: {
-      body: _objectSpread({}, theme.typography.body2)
-    }
+  theme.props.MuiTypography = {
+    variant: 'body2'
   };
 }
 
 function createSuperDispatchTheme() {
-  var breakpoints = system.createBreakpoints({});
-  var theme = material.createTheme({
+  var breakpoints = createBreakpoints({});
+  var theme = core.createTheme({
     breakpoints,
     palette: {
       primary: {
@@ -3643,43 +3558,43 @@ function createSuperDispatchTheme() {
       text: {
         primary: exports.Color.Dark500,
         secondary: exports.Color.Dark200,
-        // hint: Color.Dark100, todo
+        hint: exports.Color.Dark100,
         disabled: exports.Color.Dark100
       },
       divider: exports.Color.Silver400
     },
     typography: createTypographyOptions(breakpoints),
-    components: {}
+    props: {},
+    overrides: {}
   });
-  overrideCard(theme);
-  overrideButton(theme);
   overrideAppBar(theme);
-  overridePaper(theme);
-  overrideTooltip(theme);
-  overrideSvgIcon(theme);
-  overrideToolbar(theme);
-  overrideIconButton(theme);
-  overrideTypography(theme);
-  overrideMenu(theme);
-  overrideAvatar(theme);
-  overrideTextField(theme);
   overrideAutocomplete(theme);
-  overrideCssBaseline(theme);
+  overrideAvatar(theme);
+  overrideButton(theme);
+  overrideCard(theme);
   overrideCheckbox(theme);
-  overrideRadio(theme);
-  overrideSwitch(theme);
   overrideChip(theme);
   overrideDialog(theme);
   overrideDrawer(theme);
-  overridePagination(theme);
-  overrideList(theme);
+  overrideIconButton(theme);
   overrideLink(theme);
+  overrideList(theme);
+  overrideMenu(theme);
+  overridePaper(theme);
+  overrideRadio(theme);
   overrideSnackbar(theme);
+  overrideSvgIcon(theme);
+  overrideSwitch(theme);
   overrideTabs(theme);
+  overrideTextField(theme);
+  overrideToolbar(theme);
+  overrideTooltip(theme);
+  overrideTypography(theme);
+  overridePagination(theme);
   return theme;
 }
 
-var generateMaterialClassName = /*#__PURE__*/styles.createGenerateClassName();
+var generateMaterialClassName = /*#__PURE__*/core.createGenerateClassName();
 
 function generateClassName(rule, sheet) {
   var {
@@ -3721,11 +3636,14 @@ function ThemeProvider(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(styles.StylesProvider, {
     injectFirst: injectFirst,
     generateClassName: generateClassName,
-    children: /*#__PURE__*/jsxRuntime.jsxs(material.ThemeProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(styles.ThemeProvider, {
       theme: theme,
-      children: [/*#__PURE__*/jsxRuntime.jsx(material.CssBaseline, {}), /*#__PURE__*/jsxRuntime.jsx(ResponsiveContextProvider, {
-        children: /*#__PURE__*/jsxRuntime.jsx(SnackbarStackProvider, {
-          children: children
+      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
+          })
         })
       })]
     })
@@ -3736,13 +3654,12 @@ var PREVENT_COLLAPSE = 1;
 
 function spaceVariant(theme, space) {
   var gap = theme.spacing(space);
-  var parsedGap = parseInt(gap);
   return {
     '&:before': {
-      marginTop: -parsedGap - PREVENT_COLLAPSE
+      marginTop: -gap - PREVENT_COLLAPSE
     },
     '& > $container': {
-      marginLeft: -parsedGap,
+      marginLeft: -gap,
       '& > $child > $childContainer': {
         marginTop: gap,
         marginLeft: gap
@@ -3757,7 +3674,7 @@ function columnVariant(columns) {
   };
 }
 
-var useStyles$3 = /*#__PURE__*/styles.makeStyles(theme => ({
+var useStyles$d = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     paddingTop: PREVENT_COLLAPSE,
     '&:before': {
@@ -3801,7 +3718,7 @@ var Tiles = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     space: spaceProp = 1,
     columns: columnsProp = 1
   } = _ref;
-  var styles = useStyles$3({});
+  var styles = useStyles$d({});
   var space = useResponsivePropRecord(spaceProp);
   var columns = useResponsivePropRecord(columnsProp);
   return /*#__PURE__*/jsxRuntime.jsx("div", {