diff --git a/package.json b/package.json
index 708d33a0..03ac1353 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,14 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/pickers": "^3.2.10",
+    "@mui/lab": "^5.0.0-alpha.50",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.15.0",
     "lodash": "^4.17.20",
diff --git a/src/alert.js b/src/alert.js
index e394f2df..6aa8bc44 100644
--- a/src/alert.js
+++ b/src/alert.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import useComponent from './use-component';
 import Component from './component';
-import MuiAlert from '@material-ui/lab/Alert';
+import MuiAlert from '@mui/material/Alert';
 
 export default function Alert(props) {
   const { severity, content } = useComponent(props.component, [
diff --git a/src/app-bar.js b/src/app-bar.js
index 50e7548f..da4effb4 100644
--- a/src/app-bar.js
+++ b/src/app-bar.js
@@ -3,17 +3,17 @@
 //     hides title and allows for search string to be entered.
 
 import React, { Fragment } from 'react';
-import MuiAppBar from '@material-ui/core/AppBar';
-import Tooltip from '@material-ui/core/Tooltip';
-import MuiToolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import MuiAppBar from '@mui/material/AppBar';
+import Tooltip from '@mui/material/Tooltip';
+import MuiToolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 import Icon from './icon';
 import SearchBar from './search-bar';
-import MuiSwitch from '@material-ui/core/Switch';
-import { styled } from '@material-ui/core/styles';
-import { useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import MuiSwitch from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const ResponsiveIconButton = styled(IconButton)(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
@@ -129,6 +129,7 @@ function Toolbar(props) {
             color="inherit"
             aria-label="close search"
             onClick={onToggleShowSearch}
+            size="large"
           >
             <Icon icon="ArrowBack" />
           </IconButton>
@@ -222,7 +223,7 @@ export default function AppBar(props) {
   } = props;
 
   const theme = useTheme();
-  const onMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const onMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   return (
     <StyledMuiAppBar
diff --git a/src/app-container.js b/src/app-container.js
index 08fa1ab6..84f1ad7c 100644
--- a/src/app-container.js
+++ b/src/app-container.js
@@ -1,25 +1,31 @@
 import React from 'react';
 import AppUI from './app';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
-import { createTheme } from '@material-ui/core/styles';
-import blueGrey from '@material-ui/core/colors/blueGrey';
-import lightBlue from '@material-ui/core/colors/lightBlue';
+import CssBaseline from '@mui/material/CssBaseline';
+import {
+  ThemeProvider as MuiThemeProvider,
+  StyledEngineProvider,
+  adaptV4Theme,
+} from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { BrowserRouter, Prompt } from 'react-router-dom';
 import globals from 'mson/lib/globals';
 import attach from './attach';
 
-const theme = createTheme({
-  palette: {
-    primary: blueGrey,
-    // primary: blue,
-    // type: 'dark',
-    // secondary: cyan
-    secondary: lightBlue,
-  },
+import { blueGrey, lightBlue } from '@mui/material/colors';
 
-  // shadows: ['none']
-});
+const theme = createTheme(
+  adaptV4Theme({
+    palette: {
+      primary: blueGrey,
+      // primary: blue,
+      // type: 'dark',
+      // secondary: cyan
+      secondary: lightBlue,
+    },
+
+    // shadows: ['none']
+  })
+);
 
 // Note: BrowserRouter needs to be outside of App so that we can use withRouter
 class AppContainer extends React.Component {
@@ -30,22 +36,24 @@ class AppContainer extends React.Component {
   render() {
     const { component, basename } = this.props;
     return (
-      <MuiThemeProvider theme={theme}>
-        <CssBaseline />
-        <BrowserRouter
-          getUserConfirmation={this.onNavigate}
-          basename={basename}
-        >
-          {/* Wrapping div required by BrowserRouter */}
-          <div>
-            <AppUI component={component} />
+      <StyledEngineProvider injectFirst>
+        <MuiThemeProvider theme={theme}>
+          <CssBaseline />
+          <BrowserRouter
+            getUserConfirmation={this.onNavigate}
+            basename={basename}
+          >
+            {/* Wrapping div required by BrowserRouter */}
+            <div>
+              <AppUI component={component} />
 
-            {/* A Prompt is needed to capture back/forward button events with ReactRouter. message
-            is required, but the value is arbitrary */}
-            <Prompt message="foo" />
-          </div>
-        </BrowserRouter>
-      </MuiThemeProvider>
+              {/* A Prompt is needed to capture back/forward button events with ReactRouter. message
+              is required, but the value is arbitrary */}
+              <Prompt message="foo" />
+            </div>
+          </BrowserRouter>
+        </MuiThemeProvider>
+      </StyledEngineProvider>
     );
   }
 }
diff --git a/src/app.js b/src/app.js
index 9458e30c..bca2e23e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import Menu from './menu';
 import { Switch, Route } from 'react-router-dom';
 import Component from './component';
diff --git a/src/button.js b/src/button.js
index 9d4d292e..58f0bf1a 100644
--- a/src/button.js
+++ b/src/button.js
@@ -29,7 +29,14 @@ const Button = (props) => {
       />
     );
   } else {
-    return <IconButton onClick={onClick} icon={icon} tooltip={tooltip} />;
+    return (
+      <IconButton
+        onClick={onClick}
+        icon={icon}
+        tooltip={tooltip}
+        size="large"
+      />
+    );
   }
 };
 
diff --git a/src/card.js b/src/card.js
index 3e8c7680..5afa11c4 100644
--- a/src/card.js
+++ b/src/card.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
+import withStyles from '@mui/styles/withStyles';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import Component from './component';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 const styles = (theme) => ({
   paper: {
@@ -23,7 +23,7 @@ class Card extends React.PureComponent {
     const title = component.get('title');
 
     return (
-      <Grid container spacing={0} justify="center">
+      <Grid container spacing={0} justifyContent="center">
         <Grid item xs={12} sm={9} md={6} lg={6}>
           <Paper className={classes.paper}>
             <Grid container wrap="nowrap">
diff --git a/src/component.js b/src/component.js
index 244bf93a..9c9de6e8 100644
--- a/src/component.js
+++ b/src/component.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import InnerComponent from './inner-component';
 import compiler from 'mson/lib/compiler';
 import useComponent from './use-component';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const getOrZero = (value) => (value ? value : 0);
 
diff --git a/src/confirmation-dialog.js b/src/confirmation-dialog.js
index 70633590..1bfbc5b2 100644
--- a/src/confirmation-dialog.js
+++ b/src/confirmation-dialog.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
 
 export default class ConfirmationDialog extends React.PureComponent {
   handleClose = (yes) => {
diff --git a/src/demo/components/custom-component-attach.js b/src/demo/components/custom-component-attach.js
index fef181e4..ffb234f3 100644
--- a/src/demo/components/custom-component-attach.js
+++ b/src/demo/components/custom-component-attach.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from '../../attach';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 let ReactCustomComponentAttach = (props) => {
diff --git a/src/demo/components/custom-component-js.js b/src/demo/components/custom-component-js.js
index 8ac8d07b..cd5fb4ed 100644
--- a/src/demo/components/custom-component-js.js
+++ b/src/demo/components/custom-component-js.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from '../../attach';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 import UIComponent from 'mson/lib/ui-component';
 import Form from 'mson/lib/form';
diff --git a/src/demo/components/custom-component-no-props.js b/src/demo/components/custom-component-no-props.js
index 3dd894e9..e6e62748 100644
--- a/src/demo/components/custom-component-no-props.js
+++ b/src/demo/components/custom-component-no-props.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 const ReactCustomComponentNoProps = (/* props */) => {
diff --git a/src/demo/components/custom-component.js b/src/demo/components/custom-component.js
index 4c2efb53..90998e5a 100644
--- a/src/demo/components/custom-component.js
+++ b/src/demo/components/custom-component.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import useComponent from '../../use-component';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import compile from 'mson/lib/compiler/compile';
 
 const CustomComponent = compile({
diff --git a/src/field-editor-form.js b/src/field-editor-form.js
index 5a1f6c71..6f641aa7 100644
--- a/src/field-editor-form.js
+++ b/src/field-editor-form.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 import Form from './form';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import Field from './fields/field';
 import compiler from 'mson/lib/compiler';
 import each from 'lodash/each';
diff --git a/src/fields/autocomplete-select.js b/src/fields/autocomplete-select.js
index 2f3ba3cc..f7472624 100644
--- a/src/fields/autocomplete-select.js
+++ b/src/fields/autocomplete-select.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import Select from 'react-select';
-import { withStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import TextField from '@material-ui/core/TextField';
-import Paper from '@material-ui/core/Paper';
-import Chip from '@material-ui/core/Chip';
-import MenuItem from '@material-ui/core/MenuItem';
+import { emphasize } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Paper from '@mui/material/Paper';
+import Chip from '@mui/material/Chip';
+import MenuItem from '@mui/material/MenuItem';
 import Icon from '../icon';
-import { emphasize } from '@material-ui/core/styles/colorManipulator';
 
 const styles = (theme) => ({
   input: {
@@ -27,18 +27,18 @@ const styles = (theme) => ({
     marginTop: theme.spacing(2) + 5,
   },
   chip: {
-    margin: `${theme.spacing(1)}px ${theme.spacing(0.25)}px`,
+    margin: `${theme.spacing(1)} ${theme.spacing(0.25)}`,
   },
   chipFocused: {
     backgroundColor: emphasize(
-      theme.palette.type === 'light'
+      theme.palette.mode === 'light'
         ? theme.palette.grey[300]
         : theme.palette.grey[700],
       0.08
     ),
   },
   noOptionsMessage: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
   },
   singleValue: {
     fontSize: theme.typography.subtitle1.fontSize,
diff --git a/src/fields/boolean-field.js b/src/fields/boolean-field.js
index f399a34e..1ca9082e 100644
--- a/src/fields/boolean-field.js
+++ b/src/fields/boolean-field.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import Switch from '@material-ui/core/Switch';
+import Switch from '@mui/material/Switch';
 import CommonField from './common-field';
 import attach from '../attach';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import DisplayValueTypography from './display-value-typography';
 
 class BooleanField extends React.PureComponent {
@@ -11,14 +11,8 @@ class BooleanField extends React.PureComponent {
   };
 
   render() {
-    const {
-      value,
-      disabled,
-      component,
-      editable,
-      useDisplayValue,
-      label,
-    } = this.props;
+    const { value, disabled, component, editable, useDisplayValue, label } =
+      this.props;
 
     let hideLabelUI = null;
 
diff --git a/src/fields/collection-field.js b/src/fields/collection-field.js
index 5fa53ce8..440e27b3 100644
--- a/src/fields/collection-field.js
+++ b/src/fields/collection-field.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import FormCard from '../form-card';
 import FormDialog from '../form-dialog';
 import attach from '../attach';
 import Button from '../button';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import ConfirmationDialog from '../confirmation-dialog';
 import access from 'mson/lib/access';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import './collection-field.css';
 import SelectOrder from './select-order';
 import ButtonField from 'mson/lib/fields/button-field';
@@ -20,7 +20,7 @@ const getItemStyle = (isDragging, draggableStyle, theme) => ({
   // some basic styles to make the items look a bit nicer
   userSelect: 'none',
   padding: theme.spacing(0.125),
-  margin: `0 0 ${theme.spacing(0.125)}px 0`,
+  margin: `0 0 ${theme.spacing(0.125)} 0`,
 
   // change background colour if dragging
   background: isDragging ? theme.palette.secondary[400] : undefined,
diff --git a/src/fields/common-field.js b/src/fields/common-field.js
index 313c11e9..40a1eb50 100644
--- a/src/fields/common-field.js
+++ b/src/fields/common-field.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '../form-control';
 import attach from '../attach';
 import HelpToolTip from './help-tool-tip';
diff --git a/src/fields/component-field.js b/src/fields/component-field.js
index ec3b76c1..e584a652 100644
--- a/src/fields/component-field.js
+++ b/src/fields/component-field.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import attach from '../attach';
 import Component from '../component';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   root: {
diff --git a/src/fields/date-field.js b/src/fields/date-field.js
index 7974f4da..60fb22df 100644
--- a/src/fields/date-field.js
+++ b/src/fields/date-field.js
@@ -7,7 +7,7 @@ import {
   DatePicker,
 } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/date-fns';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import DisplayValueTypography from './display-value-typography';
 
 const styles = (theme) => ({
diff --git a/src/fields/display-value-typography.js b/src/fields/display-value-typography.js
index 5aaa431b..94b539e6 100644
--- a/src/fields/display-value-typography.js
+++ b/src/fields/display-value-typography.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import withStyles from '@material-ui/core/styles/withStyles';
+import Typography from '@mui/material/Typography';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   root: {
diff --git a/src/fields/form-field.js b/src/fields/form-field.js
index ea6ff168..3d2cca9f 100644
--- a/src/fields/form-field.js
+++ b/src/fields/form-field.js
@@ -3,7 +3,7 @@ import CommonField from './common-field';
 import Component from '../component';
 import attach from '../attach';
 import FlexBreak from '../flex-break';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   root: {
diff --git a/src/fields/form-label.js b/src/fields/form-label.js
index cf4017c0..ad23a7e2 100644
--- a/src/fields/form-label.js
+++ b/src/fields/form-label.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import FormLabelMui from '@material-ui/core/FormLabel';
-import withStyles from '@material-ui/core/styles/withStyles';
+import FormLabelMui from '@mui/material/FormLabel';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   shrink: {
diff --git a/src/fields/help-tool-tip.js b/src/fields/help-tool-tip.js
index 55eebdbf..a174008a 100644
--- a/src/fields/help-tool-tip.js
+++ b/src/fields/help-tool-tip.js
@@ -1,8 +1,8 @@
 // TODO: make full width of field include right margin if there is help?
 
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import Icon from '../icon';
 
 export default class HelpToolTip extends React.PureComponent {
@@ -14,7 +14,7 @@ export default class HelpToolTip extends React.PureComponent {
     // click the button to view the tooltip.
     return (
       <Tooltip disableTouchListener title={help}>
-        <IconButton aria-label="Help">
+        <IconButton aria-label="Help" size="large">
           <Icon icon="HelpOutline" />
         </IconButton>
       </Tooltip>
diff --git a/src/fields/list-item-field.js b/src/fields/list-item-field.js
index 8161e636..fbf8f353 100644
--- a/src/fields/list-item-field.js
+++ b/src/fields/list-item-field.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Field from './field';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/material/IconButton';
 import Icon from '../icon';
 import FlexBreak from '../flex-break';
 import attach from '../attach';
@@ -22,7 +22,11 @@ class ListItemField extends React.PureComponent {
         <span>
           <Field component={component} block={false} disabled={disabled} />
           {allowDelete && !disabled && editable ? (
-            <IconButton aria-label="Delete" onClick={this.handleDelete}>
+            <IconButton
+              aria-label="Delete"
+              onClick={this.handleDelete}
+              size="large"
+            >
               <Icon icon="DeleteIcon" />
             </IconButton>
           ) : null}
diff --git a/src/fields/re-captcha-field.js b/src/fields/re-captcha-field.js
index 5616c7d1..1bac649b 100644
--- a/src/fields/re-captcha-field.js
+++ b/src/fields/re-captcha-field.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import attach from '../attach';
 import ReCAPTCHA from 'react-google-recaptcha';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import globals from 'mson/lib/globals';
 
 const styles = (theme) => ({
@@ -16,13 +16,8 @@ class ReCAPTCHAField extends React.PureComponent {
   };
 
   render() {
-    const {
-      disabled,
-      editable,
-      accessEditable,
-      classes,
-      useDisplayValue,
-    } = this.props;
+    const { disabled, editable, accessEditable, classes, useDisplayValue } =
+      this.props;
 
     const isEditable = accessEditable !== false && editable && !disabled;
 
diff --git a/src/fields/select-field.js b/src/fields/select-field.js
index f6201544..494ab8cc 100644
--- a/src/fields/select-field.js
+++ b/src/fields/select-field.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import Checkbox from '@material-ui/core/Checkbox';
-import ListItemText from '@material-ui/core/ListItemText';
-import Input from '@material-ui/core/Input';
-import Chip from '@material-ui/core/Chip';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import Input from '@mui/material/Input';
+import Chip from '@mui/material/Chip';
 import CommonField from './common-field';
 import attach from '../attach';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import DisplayValueTypography from './display-value-typography';
 import AutoCompleteSelect from './autocomplete-select';
 
diff --git a/src/fields/select-order.js b/src/fields/select-order.js
index 6c6eb922..11957706 100644
--- a/src/fields/select-order.js
+++ b/src/fields/select-order.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
 import Icon from '../icon';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   formControl: {
@@ -72,6 +72,7 @@ class SelectOrder extends React.PureComponent {
           color="primary"
           aria-label="sort order"
           onClick={this.handleClick}
+          size="large"
         >
           <Icon icon="Sort" className={flipped ? classes.flip : null} />
         </IconButton>
diff --git a/src/fields/text-field.js b/src/fields/text-field.js
index b13349ad..7f86863e 100644
--- a/src/fields/text-field.js
+++ b/src/fields/text-field.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Input from '@material-ui/core/Input';
+import Input from '@mui/material/Input';
 import CommonField from './common-field';
 import attach from '../attach';
 import DisplayValueTypography from './display-value-typography';
diff --git a/src/fields/time-field.js b/src/fields/time-field.js
index cb10c870..f7ebd98a 100644
--- a/src/fields/time-field.js
+++ b/src/fields/time-field.js
@@ -3,7 +3,7 @@ import attach from '../attach';
 import CommonField from './common-field';
 import { MuiPickersUtilsProvider, TimePicker } from '@material-ui/pickers';
 import DateFnsUtils from '@date-io/date-fns';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 import DisplayValueTypography from './display-value-typography';
 
 const styles = (theme) => ({
diff --git a/src/flex-break.js b/src/flex-break.js
index 13ee1adc..2be936ec 100644
--- a/src/flex-break.js
+++ b/src/flex-break.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   // break: {
diff --git a/src/form-card-buttons.js b/src/form-card-buttons.js
index f6b6ef19..5767efc6 100644
--- a/src/form-card-buttons.js
+++ b/src/form-card-buttons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import IconButton from './icon-button';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 
 // FUTURE: support for hamburger menus
 export default class FormCardButtons extends React.PureComponent {
@@ -24,6 +24,7 @@ export default class FormCardButtons extends React.PureComponent {
           icon="Edit"
           tooltip="Edit"
           aria-label={`Edit ${id}`}
+          size="large"
         />
       );
     }
@@ -37,6 +38,7 @@ export default class FormCardButtons extends React.PureComponent {
           icon={title}
           tooltip={title}
           aria-label={`Delete ${id}`}
+          size="large"
         />
       );
     }
diff --git a/src/form-card.js b/src/form-card.js
index 9318fd54..ec146fd1 100644
--- a/src/form-card.js
+++ b/src/form-card.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
+import withStyles from '@mui/styles/withStyles';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import Component from './component';
 import attach from './attach';
 import FormCardButtons from './form-card-buttons';
diff --git a/src/form-control.js b/src/form-control.js
index 776bf51a..2952f781 100644
--- a/src/form-control.js
+++ b/src/form-control.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import FormControlMU from '@material-ui/core/FormControl';
-import withStyles from '@material-ui/core/styles/withStyles';
+import FormControlMU from '@mui/material/FormControl';
+import withStyles from '@mui/styles/withStyles';
 
 const styles = (theme) => ({
   formControl: {
@@ -8,7 +8,7 @@ const styles = (theme) => ({
   },
   fullWidth: {
     // TODO: bug in material ui?
-    width: `calc(100% - ${theme.spacing(2)}px)`,
+    width: `calc(100% - ${theme.spacing(2)})`,
   },
   noMarginBottom: {
     marginBottom: 0,
diff --git a/src/form-dialog.js b/src/form-dialog.js
index 48c6e82f..4a3915e4 100644
--- a/src/form-dialog.js
+++ b/src/form-dialog.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import Button from './button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import { useTheme } from '@material-ui/core/styles';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import DialogContent from '@material-ui/core/DialogContent';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import DialogContent from '@mui/material/DialogContent';
 import Component from './component';
 import useComponent from './use-component';
 import CollectionFieldCore from 'mson/lib/fields/collection-field';
@@ -109,7 +109,7 @@ function FormDialog(props) {
   ]);
 
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
   const prevMode = usePrevious(mode);
 
   // If the mode or err changes then allow the user to click save
diff --git a/src/grid-item.js b/src/grid-item.js
index 98e2a7fa..5f8926f7 100644
--- a/src/grid-item.js
+++ b/src/grid-item.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from './attach';
-import GridMui from '@material-ui/core/Grid';
+import GridMui from '@mui/material/Grid';
 import Component from './component';
 
 class GridItem extends React.PureComponent {
diff --git a/src/grid.js b/src/grid.js
index b8354772..ff4c5048 100644
--- a/src/grid.js
+++ b/src/grid.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import attach from './attach';
-import GridMui from '@material-ui/core/Grid';
+import GridMui from '@mui/material/Grid';
 import GridItem from './grid-item';
 
 class Grid extends React.PureComponent {
diff --git a/src/icon-button.js b/src/icon-button.js
index 7da39dcd..ede5ad81 100644
--- a/src/icon-button.js
+++ b/src/icon-button.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import IconButtonMui from '@material-ui/core/IconButton';
+import IconButtonMui from '@mui/material/IconButton';
 import Icon from './icon';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 
 const IconButton = (props) => {
   const { onClick, icon, tooltip } = props;
diff --git a/src/icon.js b/src/icon.js
index 32891328..a33d7a69 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import IconMui from '@material-ui/core/Icon';
+import IconMui from '@mui/material/Icon';
 import snakeCase from 'lodash/snakeCase';
 
 // Note: we use font icons instead of SVG icons as this allows us to support any icon dynamically
 // without adding all icons to the JS bundle. The MaterialUI icons are about 54KB which is
 // substantially smaller than their SVG counterparts.
 //
-// import * as Icons from '@material-ui/icons';
+// import * as Icons from '@mui/icons-material';
 
 export default class Icon extends React.PureComponent {
   handleClick = (event) => {
diff --git a/src/label-button.js b/src/label-button.js
index bd1fe97d..09eb18a3 100644
--- a/src/label-button.js
+++ b/src/label-button.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import ButtonMui from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import ButtonMui from '@mui/material/Button';
+import makeStyles from '@mui/styles/makeStyles';
 import Icon from './icon';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/src/menu.js b/src/menu.js
index debb1474..8a23ee93 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -1,10 +1,10 @@
 // TODO: when click on another section, close other sections? Requires moving menu state to app?
 
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Drawer from '@material-ui/core/Drawer';
-import Hidden from '@material-ui/core/Hidden';
-import Divider from '@material-ui/core/Divider';
+import withStyles from '@mui/styles/withStyles';
+import Drawer from '@mui/material/Drawer';
+import Hidden from '@mui/material/Hidden';
+import Divider from '@mui/material/Divider';
 import Submenu from './submenu';
 import attach from './attach';
 import registrar from 'mson/lib/compiler/registrar';
@@ -72,13 +72,8 @@ class Menu extends React.PureComponent {
   }
 
   render() {
-    const {
-      classes,
-      theme,
-      mobileOpen,
-      responsive,
-      header /*, roles*/,
-    } = this.props;
+    const { classes, theme, mobileOpen, responsive, header /*, roles*/ } =
+      this.props;
 
     let items = null;
     // if (!roles || (registrar.client && registrar.client.user.hasRole(roles))) {
@@ -130,7 +125,7 @@ class Menu extends React.PureComponent {
       return (
         <div>
           <Hidden mdUp>{temporaryDrawer}</Hidden>
-          <Hidden smDown implementation="css">
+          <Hidden mdDown implementation="css">
             {permanentDrawer}
           </Hidden>
         </div>
diff --git a/src/search-bar.js b/src/search-bar.js
index 0b29c3d6..33f7a841 100644
--- a/src/search-bar.js
+++ b/src/search-bar.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
-import TextField from '@material-ui/core/TextField';
-import IconButton from '@material-ui/core/IconButton';
+import withStyles from '@mui/styles/withStyles';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
 import Icon from './icon';
 import classNames from 'classnames';
 
@@ -71,13 +71,8 @@ class SearchBar extends React.PureComponent {
   };
 
   render() {
-    const {
-      classes,
-      className,
-      searchString,
-      onChange,
-      fullWidth,
-    } = this.props;
+    const { classes, className, searchString, onChange, fullWidth } =
+      this.props;
 
     const { autoFullWidth } = this.state;
 
@@ -106,6 +101,7 @@ class SearchBar extends React.PureComponent {
             aria-label="clear search"
             onClick={this.handleClearSearch}
             className={classes.closeIcon}
+            size="large"
           >
             <Icon icon="Close" />
           </IconButton>
diff --git a/src/snackbar.js b/src/snackbar.js
index fe8d5077..7f49ca5a 100644
--- a/src/snackbar.js
+++ b/src/snackbar.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
-// import Button from '@material-ui/core/Button';
-import SnackbarMUI from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
+import withStyles from '@mui/styles/withStyles';
+// import Button from '@mui/material/Button';
+import SnackbarMUI from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
 import Icon from './icon';
 
 const styles = (theme) => ({
@@ -48,6 +48,7 @@ class Snackbar extends React.PureComponent {
             color="inherit"
             className={classes.close}
             onClick={this.handleClose}
+            size="large"
           >
             <Icon icon="Close" />
           </IconButton>,
diff --git a/src/submenu.js b/src/submenu.js
index e09521cb..e8e35f87 100644
--- a/src/submenu.js
+++ b/src/submenu.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Collapse from '@material-ui/core/Collapse';
-import Typography from '@material-ui/core/Typography';
+import withStyles from '@mui/styles/withStyles';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
 import Icon from './icon';
 import each from 'lodash/each';
 import registrar from 'mson/lib/compiler/registrar';
diff --git a/src/tabs.js b/src/tabs.js
index 0fc9020c..12e4b263 100644
--- a/src/tabs.js
+++ b/src/tabs.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import TabsMui from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import AppBar from '@mui/material/AppBar';
+import TabsMui from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import Icon from './icon';
 import useComponent from './use-component';
 
diff --git a/src/user-menu.js b/src/user-menu.js
index 7aea1190..2d3ae454 100644
--- a/src/user-menu.js
+++ b/src/user-menu.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton from '@mui/material/IconButton';
 import Icon from './icon';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
 
 export default class UserDropDown extends React.PureComponent {
   state = {
@@ -33,6 +33,7 @@ export default class UserDropDown extends React.PureComponent {
           aria-haspopup="true"
           onClick={this.handleMenu}
           color="inherit"
+          size="large"
         >
           <Icon icon="AccountCircle" />
         </IconButton>
diff --git a/yarn.lock b/yarn.lock
index 47da219c..011042e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -627,7 +627,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.14.5":
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
   integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
@@ -1342,7 +1342,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1444,6 +1444,11 @@
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
   integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
 
+"@date-io/core@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.11.0.tgz#28580cda1c8228ab2c7ed6aee673ef0495f913e6"
+  integrity sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw==
+
 "@date-io/date-fns@^1.3.13":
   version "1.3.13"
   resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
@@ -1451,11 +1456,57 @@
   dependencies:
     "@date-io/core" "^1.3.13"
 
+"@date-io/date-fns@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.11.0.tgz#142fbf954eda7ad66514af7a2802d78c4ea40053"
+  integrity sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/dayjs@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.11.0.tgz#41f4b4b9629612e6012accffd848875d1aeffb74"
+  integrity sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/luxon@^2.11.1":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.11.1.tgz#31a72f7b5e163c74e8a3b29d8f16c4c30de6ed43"
+  integrity sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/moment@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.11.0.tgz#850f8dd090d401845b39276d034dbabe20224ef5"
+  integrity sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@emotion/babel-plugin@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -1466,6 +1517,17 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
+"@emotion/cache@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
 "@emotion/core@^10.0.9":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
@@ -1492,11 +1554,36 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
+  integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.4.1":
+  version "11.4.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57"
+  integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -1508,17 +1595,44 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0"
+  integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
+
+"@emotion/styled@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
+  integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+
 "@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1528,7 +1642,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -1972,6 +2091,127 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@mui/core@5.0.0-alpha.50":
+  version "5.0.0-alpha.50"
+  resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.50.tgz#055b7ccf8557f849e8e61a39a8e3943f8abad9b0"
+  integrity sha512-szmmzbyAjEQku17IoEWs7t77n0Kr4zVnT5fREfMd+CnCA4YDifr68ccGJfWaeoGp5Zw/JmfKjQJXLY4GgT6i/g==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/lab@^5.0.0-alpha.50":
+  version "5.0.0-alpha.50"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.50.tgz#4102698b176eba28ef16ee1fcb6b0677f2fb221b"
+  integrity sha512-8DgRjQjjObrHpdFx5HSjw27zQlSf0gc+I911ZSs+YIn7TADQgtg3QzaHqe5o54b+91LhMfugQAtPlRjqXMaEKA==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@date-io/date-fns" "^2.11.0"
+    "@date-io/dayjs" "^2.11.0"
+    "@date-io/luxon" "^2.11.1"
+    "@date-io/moment" "^2.11.0"
+    "@mui/core" "5.0.0-alpha.50"
+    "@mui/system" "^5.0.3"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+    rifm "^0.12.0"
+
+"@mui/material@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.3.tgz#5ac4d9f7d9635efc9cf7347373e49db41f1b065b"
+  integrity sha512-Qj2hwSi63qrYRJuHrUFdN83lCT6HXyLzpCniDTvK7NlqXCnpy4F3Gg0hRJTnO4hNqTTBV+SCOKTSbfuzHl/dnQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/core" "5.0.0-alpha.50"
+    "@mui/system" "^5.0.3"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    "@popperjs/core" "^2.4.4"
+    "@types/react-transition-group" "^4.4.3"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+
+"@mui/private-theming@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986"
+  integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/utils" "^5.0.1"
+    prop-types "^15.7.2"
+
+"@mui/styled-engine@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.1.tgz#401e3e0ff846ad1b1e7e097c8050b36d7b68343e"
+  integrity sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/cache" "^11.4.0"
+    prop-types "^15.7.2"
+
+"@mui/styles@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.0.1.tgz#1634d08d892b5c7e85c9f84e4fc8bc02a5fb0f7a"
+  integrity sha512-hCtR2ZVOkoIhpTan02I4UEShnZxe59WwhKRJqauMs/addXByhAHHCNheTdiV++Irl/fyyFObmzPM0CUD3q6FIA==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/hash" "^0.8.0"
+    "@mui/private-theming" "^5.0.1"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.8.0"
+    jss-plugin-camel-case "^10.8.0"
+    jss-plugin-default-unit "^10.8.0"
+    jss-plugin-global "^10.8.0"
+    jss-plugin-nested "^10.8.0"
+    jss-plugin-props-sort "^10.8.0"
+    jss-plugin-rule-value-function "^10.8.0"
+    jss-plugin-vendor-prefixer "^10.8.0"
+    prop-types "^15.7.2"
+
+"@mui/system@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.3.tgz#6c126be5c2796fe89af93aa0e76d1c3c6dcccf45"
+  integrity sha512-pNkW9p6Dj/ch3YCKjvrXrBhKsAyJ1/l273Q0hh60hhTKHJXgKBVONQ8r7l1fFHtufI0NNz6UGMVJooIXg4JJtA==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/private-theming" "^5.0.1"
+    "@mui/styled-engine" "^5.0.1"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    prop-types "^15.7.2"
+
+"@mui/types@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0.tgz#a7398502bc9c508875aafcbe28aea599b2c3d203"
+  integrity sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==
+
+"@mui/utils@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5"
+  integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -2267,6 +2507,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.20.tgz#111b5db0f501aa89b05076fa31f0ea0e0c292cd3"
   integrity sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q==
 
+"@popperjs/core@^2.4.4":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -2713,7 +2958,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.2.tgz#fc8c2825e4ed2142473b4a81064e6e081463d1b3"
   integrity sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.4":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -2723,6 +2968,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.2.tgz#abc4d910bff5b0bc6b3e1bec57575f6b63fd4e05"
+  integrity sha512-2+L0ilcAEG8udkDnvx8B0upwXFBbNnVwOsSCTxW3SDOkmar9NyEeLG0ZLa3uOEw9zyYf/fQapcnfXAVmDKlyHw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.16":
   version "7.1.18"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.18.tgz#2bf8fd56ebaae679a90ebffe48ff73717c438e04"
@@ -2740,6 +2992,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.3":
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.3.tgz#b0994da0a7023d67dbb4a8910a62112bc00d5688"
+  integrity sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.20.tgz#a4284b184d47975c71658cd69e759b6bd37c3b8c"
@@ -3749,7 +4008,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -4628,7 +4887,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.0.2, clsx@^1.0.4:
+clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -5461,6 +5720,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+csstype@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -7544,7 +7808,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9322,6 +9586,15 @@ jss-plugin-camel-case@^10.5.1:
     hyphenate-style-name "^1.0.3"
     jss "10.7.1"
 
+jss-plugin-camel-case@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.0.tgz#575fd849202d36713a6970796458e375754446c7"
+  integrity sha512-yxlXrXwcCdGw+H4BC187dEu/RFyW8joMcWfj8Rk9UPgWTKu2Xh7Sib4iW3xXjHe/t5phOHF1rBsHleHykWix7g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.8.0"
+
 jss-plugin-default-unit@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz#826270e2ee38d7024a281ac67c30d6944f124786"
@@ -9330,6 +9603,14 @@ jss-plugin-default-unit@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.7.1"
 
+jss-plugin-default-unit@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.0.tgz#98db5962e62abbf43f1cc111e62cb70ffb09db59"
+  integrity sha512-9XJV546cY9zV9OvIE/v/dOaxSi4062VfYQQfwbplRExcsU2a79Yn+qDz/4ciw6P4LV1Naq90U+OffAGRHfNq/Q==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
 jss-plugin-global@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz#9725c46d662aac2e596a0a8741944c060e2b90a1"
@@ -9338,6 +9619,14 @@ jss-plugin-global@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.7.1"
 
+jss-plugin-global@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.0.tgz#0c2b0c056087f5846d600f3332eeb7a1a8b9c9f2"
+  integrity sha512-H/8h/bHd4e7P0MpZ9zaUG8NQSB2ie9rWo/vcCP6bHVerbKLGzj+dsY22IY3+/FNRS8zDmUyqdZx3rD8k4nmH4w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
 jss-plugin-nested@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz#35563a7a710a45307fd6b9742ffada1d72a62eb7"
@@ -9347,6 +9636,15 @@ jss-plugin-nested@^10.5.1:
     jss "10.7.1"
     tiny-warning "^1.0.2"
 
+jss-plugin-nested@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.0.tgz#7ef9a815e9c9fbede41a8f52ce75cffb4c3b86d5"
+  integrity sha512-MhmINZkSxyFILcFBuDoZmP1+wj9fik/b9SsjoaggkGjdvMQCES21mj4K5ZnRGVm448gIXyi9j/eZjtDzhaHUYQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+    tiny-warning "^1.0.2"
+
 jss-plugin-props-sort@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz#1d12b26048541ed3a2ed1b69f7fc231605728362"
@@ -9355,6 +9653,14 @@ jss-plugin-props-sort@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.7.1"
 
+jss-plugin-props-sort@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.0.tgz#2a83e8ca80d72828495bad57b485f7d55a33543b"
+  integrity sha512-VY+Wt5WX5GMsXDmd+Ts8+O16fpiCM81svbox++U3LDbJSM/g9FoMx3HPhwUiDfmgHL9jWdqEuvSl/JAk+mh6mQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+
 jss-plugin-rule-value-function@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz#123eb796eb9982f8efa7a7e362daddd90c0c69fe"
@@ -9364,6 +9670,15 @@ jss-plugin-rule-value-function@^10.5.1:
     jss "10.7.1"
     tiny-warning "^1.0.2"
 
+jss-plugin-rule-value-function@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.0.tgz#e011ed180789229e7ea8f75c222d34810bcab520"
+  integrity sha512-R8N8Ma6Oye1F9HroiUuHhVjpPsVq97uAh+rMI6XwKLqirIu2KFb5x33hPj+vNBMxSHc9jakhf5wG0BbQ7fSDOg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.8.0"
+    tiny-warning "^1.0.2"
+
 jss-plugin-vendor-prefixer@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz#217821be2d6dacee31d2d464886760ba7742e19a"
@@ -9373,6 +9688,15 @@ jss-plugin-vendor-prefixer@^10.5.1:
     css-vendor "^2.0.8"
     jss "10.7.1"
 
+jss-plugin-vendor-prefixer@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.0.tgz#024b6d77be50b68e5dfca2c75f68091d8b722d61"
+  integrity sha512-G1zD0J8dFwKZQ+GaZaay7A/Tg7lhDw0iEkJ/iFFA5UPuvZFpMprCMQttXcTBhLlhhWnyZ8YPn4yqp+amrhQekw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.8.0"
+
 jss@10.7.1, jss@^10.5.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.7.1.tgz#16d846e1a22fb42e857b99f9c6a0c5a27341c804"
@@ -9383,6 +9707,16 @@ jss@10.7.1, jss@^10.5.1:
     is-in-browser "^1.1.3"
     tiny-warning "^1.0.2"
 
+jss@10.8.0, jss@^10.8.0:
+  version "10.8.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.0.tgz#5063ee73aabd9f228ea3849df7962f0d2e213a42"
+  integrity sha512-6fAMLJrVQ8epM5ghghxWqCwRR0ZamP2cKbOAtzPudcCMSNdAqtvmzQvljUZYR8OXJIeb/IpZeOXA1sDXms4R1w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82"
@@ -12599,7 +12933,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1:
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -12753,7 +13087,7 @@ react-text-mask@^5.4.3:
   dependencies:
     prop-types "^15.5.6"
 
-react-transition-group@^4.0.0, react-transition-group@^4.3.0, react-transition-group@^4.4.0:
+react-transition-group@^4.0.0, react-transition-group@^4.3.0, react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -13285,6 +13619,11 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.0.tgz#8d3a9dc0de9c190e0de9bdc8861a91a221dc1341"
+  integrity sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==
+
 rifm@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
@@ -14352,6 +14691,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"