Repository: noosenergy/dash-material-components (language: python)

Issue:
NOOS-486/upgrade-react-v18
# Description

<!--- Add JIRA reference here -->
**JIRA Reference**: [NOOS-486](https://noosenergy.atlassian.net/browse/NOOS-486)


[NOOS-486]: https://noosenergy.atlassian.net/browse/NOOS-486?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Discussion / hints:

Fix patch:
diff --git a/.circleci/config.yml b/.circleci/config.yml
index a1825cf..1e87ec6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -30,7 +30,7 @@ jobs:
       - checkout
       - run:
           name: Lint JavaScript library
-          command: yarn install && yarn lint
+          command: yarn install --frozen-lockfile && yarn lint
 
   test_library:
     executor: noos-ci/default
@@ -38,7 +38,7 @@ jobs:
       - checkout
       - run:
           name: Run JavaScript tests
-          command: yarn install && yarn test
+          command: yarn install --frozen-lockfile && yarn test
 
   build_library:
     executor: noos-ci/default
@@ -48,7 +48,7 @@ jobs:
           <<: *poetry_install
       - run:
           name: Build JavaScript library
-          command: yarn install && yarn build
+          command: yarn install --frozen-lockfile && yarn build
       - persist_to_workspace:
           root: .
           paths:
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 703ff9d..818409b 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -25,7 +25,8 @@
         "ms-python.mypy-type-checker",
         "ms-toolsai.jupyter",
         "ms-toolsai.jupyter-keymap",
-        "ms-toolsai.jupyter-renderers"
+        "ms-toolsai.jupyter-renderers",
+        "esbenp.prettier-vscode"
       ],
       "settings": {
         "python.defaultInterpreterPath": "${containerWorkspaceFolder}/.venv/bin/python"
diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh
index 8de7391..c0bd12f 100644
--- a/.devcontainer/post-create.sh
+++ b/.devcontainer/post-create.sh
@@ -6,7 +6,7 @@ set -e
 # Install js libs
 # ---------------
 echo "$(date) - installing javascript libraries"
-yarn install
+yarn install --frozen-lockfile
 
 # Install py libs
 # ---------------
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..6aab9b4
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1,1 @@
+v18.18.0
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ff848ed..494627d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,11 +1,20 @@
 {
   "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "npm.packageManager": "yarn",
   "[python]": {
     "editor.codeActionsOnSave": {
       "source.fixAll": "explicit",
       "source.organizeImports": "explicit"
-    },
+    }
   },
   "python.testing.pytestEnabled": true,
   "python.terminal.activateEnvironment": false,
@@ -14,4 +23,4 @@
   "black-formatter.importStrategy": "fromEnvironment",
   "flake8.importStrategy": "fromEnvironment",
   "mypy-type-checker.importStrategy": "fromEnvironment"
-}
\ No newline at end of file
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f91ed4..40a3a5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -152,3 +152,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Keep Slider label always visible when inputText is disabled
+
+## [1.2.0] - 2024-01-23
+
+### Changed
+
+- Upgrade react to react@^18.2.0
+- Migrate material-ui from v4 to v5 (@mui)
+- Install dependencies using yarn.lock file
+- Add .nvmrc file for local development
diff --git a/README.md b/README.md
index 6d903e5..8287f84 100644
--- a/README.md
+++ b/README.md
@@ -99,7 +99,7 @@ app.run_server(mode='jupyterlab', host="0.0.0.0", port=8001)
 The project is shipped with off-the-shelf scripts to manage node packages as well as a set of utilities for local development. If the `yarn` node package manager is installed globally, install all javascript dependencies,
 
 ```shell
-~$ yarn install
+~$ yarn install --frozen-lockfile
 ```
 
 > :warning: the Dash material components has only been tested against Node.js v18.
diff --git a/package.json b/package.json
index bb211ef..9da6b64 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git://github.com/noosenergy/dash-material-components.git"
   },
-  "version": "1.1.8",
+  "version": "1.2.0",
   "engines": {
     "node": ">=18"
   },
@@ -25,19 +25,19 @@
     "build:js": "webpack --mode production",
     "build:py": "poetry run dash-generate-components ./src/components dash_material_components -p package-info.json",
     "build": "yarn run build:js && yarn run build:py",
-    "postbuild": "es-check es6 dash_material_components/*.js",
+    "postbuild": "es-check es7 dash_material_components/*.js",
     "watch": "webpack --watch --mode development",
     "test": "jest ./src"
   },
   "dependencies": {
-    "@date-io/core": "^1.0",
-    "@date-io/date-fns": "^1.0",
-    "@material-ui/core": "^4.0",
-    "@material-ui/icons": "^4.0",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/pickers": "^3.0",
-    "@material-ui/styles": "^4.0",
-    "date-fns": "^2.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/lab": "^5.0.0-alpha.159",
+    "@mui/material": "^5.15.3",
+    "@mui/styles": "^5.15.3",
+    "@mui/x-date-pickers": "^6.18.7",
+    "date-fns": "^2.25.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
@@ -48,8 +48,9 @@
     "@babel/preset-react": "^7.14.5",
     "@plotly/dash-component-plugins": "^1.2.0",
     "@plotly/webpack-dash-dynamic-import": "^1.2.0",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "12.x",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "babel-loader": "^8.2.2",
     "es-check": "^5.2.4",
     "eslint": "^8.3.0",
@@ -59,15 +60,14 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^2.3.2",
-    "react": "^16.0",
+    "react": "^18.2.0",
     "react-docgen": "^4.1.1",
-    "react-dom": "^16.0",
+    "react-dom": "^18.2.0",
     "styled-jsx": "^3.4.4",
     "webpack": "^5.43.0",
     "webpack-cli": "^4.7.2"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.0",
     "react": "^16.0",
     "react-dom": "^16.0"
   }
diff --git a/pyproject.toml b/pyproject.toml
index 40eb449..df54961 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -5,7 +5,7 @@ build-backend = "poetry.masonry.api"
 [tool.poetry]
 # Description
 name = "dash-material-components"
-version = "1.1.8"
+version = "1.2.0"
 description = "Dash Material Design components for the Noos platform."
 # Credentials
 license = "MIT"
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index 8ebed1d..fe41802 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Box} from '@material-ui/core';
+import {Box} from '@mui/material';
 
 import ThemeProvider from '../utils/ThemeProvider';
 
diff --git a/src/components/display/Alert.jsx b/src/components/display/Alert.jsx
index 3c22fe0..0187be0 100644
--- a/src/components/display/Alert.jsx
+++ b/src/components/display/Alert.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box, Snackbar} from '@material-ui/core';
-import {Alert as MuiAlert} from '@material-ui/lab';
+import {Box, Snackbar} from '@mui/material';
+import {Alert as MuiAlert} from '@mui/material';
 
 /**
  * Alert component
diff --git a/src/components/display/Box.jsx b/src/components/display/Box.jsx
index d9f3cd1..8c18ac1 100644
--- a/src/components/display/Box.jsx
+++ b/src/components/display/Box.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box as MuiBox} from '@material-ui/core';
+import {Box as MuiBox} from '@mui/material';
 
 /**
  * Box component from Material UI
diff --git a/src/components/display/Table.jsx b/src/components/display/Table.jsx
index 1978756..1cb7aec 100644
--- a/src/components/display/Table.jsx
+++ b/src/components/display/Table.jsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {Box, Table as MuiTable, TableContainer, TablePagination} from '@material-ui/core';
+import {Box, Table as MuiTable, TableContainer, TablePagination} from '@mui/material';
 import {TableBody, TableHead} from '../../fragments/TableContent';
 
 /**
diff --git a/src/components/display/Typography.jsx b/src/components/display/Typography.jsx
index 739d47d..91fc7da 100644
--- a/src/components/display/Typography.jsx
+++ b/src/components/display/Typography.jsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {Box, Typography as MuiTypography} from '@material-ui/core';
+import {Box, Typography as MuiTypography} from '@mui/material';
 
 /**
  * Typography component from Material UI
diff --git a/src/components/inputs/Autocomplete.jsx b/src/components/inputs/Autocomplete.jsx
index 227ffb4..26f5682 100644
--- a/src/components/inputs/Autocomplete.jsx
+++ b/src/components/inputs/Autocomplete.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {TextField, Box} from '@material-ui/core';
-import {Autocomplete as MuiAutocomplete} from '@material-ui/lab';
-import {createFilterOptions} from '@material-ui/lab/Autocomplete';
+import {TextField, Box} from '@mui/material';
+import {Autocomplete as MuiAutocomplete} from '@mui/material';
+import {createFilterOptions} from '@mui/material/Autocomplete';
 
 const filter = createFilterOptions();
 
@@ -58,7 +58,6 @@ const Autocomplete = (props) => {
         value={multiple ? selected : selected[0] || null}
         options={options}
         getOptionLabel={(option) => option.label || option}
-        renderOption={(option) => option.label}
         freeSolo={freeSolo}
         groupBy={groupByField ? (option) => option[groupByField] : undefined}
         multiple={multiple}
diff --git a/src/components/inputs/Button.jsx b/src/components/inputs/Button.jsx
index de1384a..2f3a5cd 100644
--- a/src/components/inputs/Button.jsx
+++ b/src/components/inputs/Button.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button as MuiButton, Icon, Box} from '@material-ui/core';
+import {Button as MuiButton, Icon, Box} from '@mui/material';
 
 /**
  * Button component
@@ -64,7 +64,15 @@ Button.propTypes = {
   variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
 
   /** MUI button color */
-  color: PropTypes.oneOf(['primary', 'secondary', 'inherit', 'default']),
+  color: PropTypes.oneOf([
+    'inherit',
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'info',
+    'warning'
+  ]),
 
   /** Icon color */
   iconColor: PropTypes.oneOf(['primary', 'secondary', 'action', 'error', 'disabled']),
diff --git a/src/components/inputs/Calendar.jsx b/src/components/inputs/Calendar.jsx
index f528d68..90af2e9 100644
--- a/src/components/inputs/Calendar.jsx
+++ b/src/components/inputs/Calendar.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box} from '@material-ui/core';
-import {DatePicker} from '@material-ui/pickers';
+import {Box} from '@mui/material';
+import {DatePicker} from '@mui/x-date-pickers/DatePicker';
 
 // Accepted format for parsing calendar dates
 const dateFormat = 'yyyy-MM-dd';
 
+import {parseISO} from 'date-fns';
+
 /**
  * Calendar component
  */
@@ -29,18 +31,19 @@ const Calendar = (props) => {
   const handleCalendarChange = (value) => {
     // Fire Dash-assigned callback
     if (value) {
-      setProps({selected: value.toISOString().split('T')[0]});
+      const selected = value.toISOString().split('T')[0];
+      setProps({selected});
     }
   };
 
   const calendarControls = {
     autoOk: true,
     disableToolbar: disableToolbar,
-    value: selected,
+    value: parseISO(selected),
     onChange: handleCalendarChange,
     format: dateFormat,
-    maxDate: maxDate ? new Date(maxDate) : undefined,
-    minDate: minDate ? new Date(minDate) : undefined,
+    maxDate: maxDate ? parseISO(maxDate) : undefined,
+    minDate: minDate ? parseISO(minDate) : undefined,
     disableFuture: disableFuture,
     disablePast: disablePast
   };
diff --git a/src/components/inputs/Dropdown.jsx b/src/components/inputs/Dropdown.jsx
index dea19e9..32bc89e 100644
--- a/src/components/inputs/Dropdown.jsx
+++ b/src/components/inputs/Dropdown.jsx
@@ -1,14 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Box,
-  Chip,
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  MenuItem,
-  Select
-} from '@material-ui/core';
+import {Box, Chip, FormControl, FormHelperText, InputLabel, MenuItem, Select} from '@mui/material';
 
 /**
  * Dropdown component
diff --git a/src/components/inputs/InputText.jsx b/src/components/inputs/InputText.jsx
index 953fcf7..bf1e043 100644
--- a/src/components/inputs/InputText.jsx
+++ b/src/components/inputs/InputText.jsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
-import {TextField, InputAdornment, Box} from '@material-ui/core';
+import {TextField, InputAdornment, Box} from '@mui/material';
 
 const validInput = (value, inputType, minValue, maxValue, precision, length) => {
   if (inputType === 'integer') {
diff --git a/src/components/inputs/Slider.jsx b/src/components/inputs/Slider.jsx
index ec4100e..5396ce1 100644
--- a/src/components/inputs/Slider.jsx
+++ b/src/components/inputs/Slider.jsx
@@ -7,8 +7,8 @@ import {
   Slider as MuiSlider,
   TextField,
   InputAdornment
-} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles({
   // remove updown arrow buttons from TextField
diff --git a/src/components/inputs/Toggle.jsx b/src/components/inputs/Toggle.jsx
index 2f71e56..2a800a9 100644
--- a/src/components/inputs/Toggle.jsx
+++ b/src/components/inputs/Toggle.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box} from '@material-ui/core';
-import {ToggleButton, ToggleButtonGroup} from '@material-ui/lab';
+import {Box} from '@mui/material';
+import {ToggleButton, ToggleButtonGroup} from '@mui/material';
 
 /**
  * Toggle component
diff --git a/src/components/layout/NavBar.jsx b/src/components/layout/NavBar.jsx
index 09bff1d..53637fa 100644
--- a/src/components/layout/NavBar.jsx
+++ b/src/components/layout/NavBar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box, AppBar, IconButton, Toolbar, Typography} from '@material-ui/core';
+import {Box, AppBar, IconButton, Toolbar, Typography} from '@mui/material';
 import NoosIcon from '../../fragments/NoosIcon';
 
 /**
@@ -14,7 +14,7 @@ const NavBar = (props) => {
     <Box id={id}>
       <AppBar position="static" elevation={4}>
         <Toolbar>
-          <IconButton edge="start" color="inherit" aria-label="menu">
+          <IconButton edge="start" color="inherit" aria-label="menu" size="large">
             <NoosIcon viewBox="0 0 50 20" />
           </IconButton>
           <Typography variant="h1" component="h1">
diff --git a/src/components/layout/Page.jsx b/src/components/layout/Page.jsx
index 84035bc..3cd6585 100644
--- a/src/components/layout/Page.jsx
+++ b/src/components/layout/Page.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Box, Grid} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
+import {Box, Grid} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import Error from '../../fragments/Error';
 
 const useStyles = makeStyles((theme) => ({
   pageLayout: {
     // Contain the entire page
     width: '100%',
-    height: '100%',
-    // Reset page element negative margins
-    margin: 0
+    height: '100%'
   }
 }));
 
@@ -31,7 +29,13 @@ const Page = (props) => {
 
   return (
     <Box id={id} sx={{flexGrow: 1}}>
-      <Grid container spacing={2} direction={pageDirection} className={classes.pageLayout}>
+      <Grid
+        container
+        rowSpacing={2}
+        columnSpacing={2}
+        direction={pageDirection}
+        className={classes.pageLayout}
+      >
         {elements}
       </Grid>
     </Box>
diff --git a/src/components/layout/SideBar.jsx b/src/components/layout/SideBar.jsx
index 75370da..0b67519 100644
--- a/src/components/layout/SideBar.jsx
+++ b/src/components/layout/SideBar.jsx
@@ -11,9 +11,9 @@ import {
   ListItemText,
   Tooltip,
   Typography
-} from '@material-ui/core';
-import {ChevronLeft, Settings} from '@material-ui/icons';
-import {makeStyles} from '@material-ui/core/styles';
+} from '@mui/material';
+import {ChevronLeft, Settings} from '@mui/icons-material';
+import makeStyles from '@mui/styles/makeStyles';
 
 const drawerWidth = 360;
 
@@ -96,7 +96,12 @@ const Sidebar = (props) => {
           {title}
         </Typography>
         <Tooltip title="Close sidebar">
-          <IconButton id="close-sidebar-chevron" color="inherit" onClick={handleDrawerClose}>
+          <IconButton
+            id="close-sidebar-chevron"
+            color="inherit"
+            onClick={handleDrawerClose}
+            size="large"
+          >
             <ChevronLeft />
           </IconButton>
         </Tooltip>
diff --git a/src/components/layout/Tab.jsx b/src/components/layout/Tab.jsx
index dbd0ed4..d81144f 100644
--- a/src/components/layout/Tab.jsx
+++ b/src/components/layout/Tab.jsx
@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
-import {Grid, Tab as MuiTab, Tabs} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
+import {Grid, Tab as MuiTab, Tabs} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import TabPanel from '../../fragments/TabPanel';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/src/fragments/Card.jsx b/src/fragments/Card.jsx
index 4280469..f58f53f 100644
--- a/src/fragments/Card.jsx
+++ b/src/fragments/Card.jsx
@@ -1,15 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Card as MuiCard,
-  CardContent,
-  CardHeader,
-  Grid,
-  IconButton,
-  Tooltip,
-  makeStyles
-} from '@material-ui/core';
-import {GetApp} from '@material-ui/icons';
+import {Card as MuiCard, CardContent, CardHeader, Grid, IconButton, Tooltip} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import {GetApp} from '@mui/icons-material';
 
 const useStyles = makeStyles((theme) => ({
   cardInColumn: {
@@ -33,7 +26,7 @@ const Card = (props) => {
       action={
         downloadable ? (
           <Tooltip title="Download card">
-            <IconButton aria-label="download-card" onClick={handleDownload}>
+            <IconButton aria-label="download-card" onClick={handleDownload} size="large">
               <GetApp />
             </IconButton>
           </Tooltip>
diff --git a/src/fragments/Error.jsx b/src/fragments/Error.jsx
index 09a5e12..df75886 100644
--- a/src/fragments/Error.jsx
+++ b/src/fragments/Error.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {Box, Grid, Hidden, Typography} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
+import {Box, Grid, Hidden, Typography} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles({
   // Change overall body background
@@ -37,7 +37,7 @@ const Error = (props) => {
   const classes = useStyles();
 
   const errorStatus = (
-    <Hidden smDown>
+    <Hidden mdDown>
       <Grid item sm={4} className={`${classes.errorLayout} ${classes.errorStatusLayout}`}>
         <Typography component="h1" style={{fontWeight: 900, fontSize: '10rem'}}>
           {status}
diff --git a/src/fragments/NoosIcon.jsx b/src/fragments/NoosIcon.jsx
index 82a6262..89a74e8 100644
--- a/src/fragments/NoosIcon.jsx
+++ b/src/fragments/NoosIcon.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {SvgIcon} from '@material-ui/core';
+import {SvgIcon} from '@mui/material';
 
 const NoosIcon = (props) => {
   return (
diff --git a/src/fragments/SectionGrid.jsx b/src/fragments/SectionGrid.jsx
index 6fde351..b8e0dd2 100644
--- a/src/fragments/SectionGrid.jsx
+++ b/src/fragments/SectionGrid.jsx
@@ -1,18 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Grid, makeStyles} from '@material-ui/core';
+import {Grid} from '@mui/material';
+
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
   sectionInColumn: {
     // Contain at max entire page length
     maxHeight: '100%',
     // Reset section element negative margins
+    padding: 0,
     margin: 0
   },
   sectionInRow: {
     // Contain at max entire page width
     maxWidth: '100%',
     // Reset section element negative margins
+    padding: 0,
     margin: 0
   }
 }));
@@ -33,7 +37,8 @@ const SectionGrid = (props) => {
       item
       xs={sectionSize}
       container
-      spacing={2}
+      rowSpacing={2}
+      columnSpacing={2}
       direction={sectionDirection}
       className={`${sectionLayout}`}
     >
diff --git a/src/fragments/TabPanel.jsx b/src/fragments/TabPanel.jsx
index 0eaa5a2..37c0273 100644
--- a/src/fragments/TabPanel.jsx
+++ b/src/fragments/TabPanel.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
   tabpanelLayout: {
diff --git a/src/fragments/TableContent.jsx b/src/fragments/TableContent.jsx
index b3a5e4b..7d30699 100644
--- a/src/fragments/TableContent.jsx
+++ b/src/fragments/TableContent.jsx
@@ -5,7 +5,7 @@ import {
   TableCell,
   TableHead as MuiTableHead,
   TableRow
-} from '@material-ui/core';
+} from '@mui/material';
 
 const TableHead = (props) => {
   const {columns} = props;
diff --git a/src/utils/ThemeProvider.jsx b/src/utils/ThemeProvider.jsx
index 0411030..2b88b34 100644
--- a/src/utils/ThemeProvider.jsx
+++ b/src/utils/ThemeProvider.jsx
@@ -1,21 +1,26 @@
 import React from 'react';
 
-import 'date-fns';
-import DateFnsUtils from '@date-io/date-fns';
-
-import {CssBaseline} from '@material-ui/core';
-import {MuiPickersUtilsProvider} from '@material-ui/pickers';
-import {ThemeProvider as MuiThemeProvider} from '@material-ui/core/styles';
-
+import {CssBaseline} from '@mui/material';
+import {ThemeProvider as MuiThemeProvider, StyledEngineProvider} from '@mui/material/styles';
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
+import {frFR} from '@mui/x-date-pickers/locales';
 import theme from './theme';
+import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns';
 
 const ThemeProvider = ({children}) => {
   // Enforce and reset a MUI-theme on the entire page
   return (
-    <MuiThemeProvider theme={theme}>
-      <CssBaseline />
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>{children}</MuiPickersUtilsProvider>
-    </MuiThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        <LocalizationProvider
+          dateAdapter={AdapterDateFns}
+          localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText}
+        >
+          {children}
+        </LocalizationProvider>
+      </MuiThemeProvider>
+    </StyledEngineProvider>
   );
 };
 
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 86cd90c..c2dac89 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -1,56 +1,58 @@
-import {createTheme, responsiveFontSizes} from '@material-ui/core/styles';
+import {createTheme, responsiveFontSizes, adaptV4Theme} from '@mui/material/styles';
 
 // A custom theme for this app
 // https://mui.com/customization/default-theme/
 // https://bareynol.github.io/mui-theme-creator/
-let theme = createTheme({
-  palette: {
-    type: 'light',
-    primary: {
-      main: '#151515',
-      contrastText: '#FAC505'
-    },
-    secondary: {
-      main: '#E9E9E9'
-    },
-    background: {
-      paper: '#FFFFFF',
-      default: '#E9E9E9'
-    },
-    text: {
-      primary: '#151515',
-      disabled: '#C7C7C7'
-    },
-    error: {
-      main: '#721C24'
-    }
-  },
-  shape: {
-    borderRadius: 8
-  },
-  typography: {
-    fontFamily: '"Roboto", sans-serif',
-    h1: {
-      fontWeight: 700,
-      fontSize: '2rem'
-    },
-    h2: {
-      fontWeight: 600,
-      fontSize: '1.4rem'
-    },
-    h3: {
-      fontWeight: 600,
-      fontSize: '1rem'
+let theme = createTheme(
+  adaptV4Theme({
+    palette: {
+      mode: 'light',
+      primary: {
+        main: '#151515',
+        contrastText: '#FAC505'
+      },
+      secondary: {
+        main: '#E9E9E9'
+      },
+      background: {
+        paper: '#FFFFFF',
+        default: '#E9E9E9'
+      },
+      text: {
+        primary: '#151515',
+        disabled: '#C7C7C7'
+      },
+      error: {
+        main: '#721C24'
+      }
     },
-    body1: {
-      fontWeight: 400,
-      fontSize: '0.9rem'
+    shape: {
+      borderRadius: 8
     },
-    button: {
-      textTransform: 'none'
+    typography: {
+      fontFamily: '"Roboto", sans-serif',
+      h1: {
+        fontWeight: 700,
+        fontSize: '2rem'
+      },
+      h2: {
+        fontWeight: 600,
+        fontSize: '1.4rem'
+      },
+      h3: {
+        fontWeight: 600,
+        fontSize: '1rem'
+      },
+      body1: {
+        fontWeight: 400,
+        fontSize: '0.9rem'
+      },
+      button: {
+        textTransform: 'none'
+      }
     }
-  }
-});
+  })
+);
 
 theme.overrides = {
   MuiChip: {
diff --git a/yarn.lock b/yarn.lock
index 1c27735..bfdfcd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,10 +7,10 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@adobe/css-tools@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
-  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+"@adobe/css-tools@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
+  integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
 
 "@ampproject/remapping@^2.2.0":
   version "2.2.1"
@@ -160,7 +160,7 @@
   dependencies:
     "@babel/types" "^7.23.0"
 
-"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -989,13 +989,20 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.6":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
+  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1044,27 +1051,117 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@date-io/core@1.x", "@date-io/core@^1.0", "@date-io/core@^1.3.13":
-  version "1.3.13"
-  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
-  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
-
-"@date-io/date-fns@^1.0":
-  version "1.3.13"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
-  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
-  dependencies:
-    "@date-io/core" "^1.3.13"
-
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/babel-plugin@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
+  integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/serialize" "^1.1.2"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
+  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/sheet" "^1.2.2"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.1":
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
+  integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
+
+"@emotion/is-prop-valid@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/react@^11.11.3":
+  version "11.11.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.3.tgz#96b855dc40a2a55f52a72f518a41db4f69c31a25"
+  integrity sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/cache" "^11.11.0"
+    "@emotion/serialize" "^1.1.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+    "@emotion/weak-memoize" "^0.3.1"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0"
+  integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==
+  dependencies:
+    "@emotion/hash" "^0.9.1"
+    "@emotion/memoize" "^0.8.1"
+    "@emotion/unitless" "^0.8.1"
+    "@emotion/utils" "^1.2.1"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
+  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
+
+"@emotion/styled@^11.11.0":
+  version "11.11.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
+  integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.11.0"
+    "@emotion/is-prop-valid" "^1.2.1"
+    "@emotion/serialize" "^1.1.2"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
+    "@emotion/utils" "^1.2.1"
+
+"@emotion/unitless@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
+  integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==
+
+"@emotion/utils@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
+  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
+
+"@emotion/weak-memoize@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
+  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
@@ -1098,6 +1195,33 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa"
   integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==
 
+"@floating-ui/core@^1.5.3":
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.5.3.tgz#b6aa0827708d70971c8679a16cf680a515b8a52a"
+  integrity sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.5.4":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.4.tgz#28df1e1cb373884224a463235c218dcbd81a16bb"
+  integrity sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==
+  dependencies:
+    "@floating-ui/core" "^1.5.3"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.4":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.5.tgz#851522899c34e3e2be1e29f3294f150834936e28"
+  integrity sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==
+  dependencies:
+    "@floating-ui/dom" "^1.5.4"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
@@ -1365,99 +1489,145 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@material-ui/core@^4.0":
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
-  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.5"
-    "@material-ui/system" "^4.12.2"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-    react-transition-group "^4.4.0"
-
-"@material-ui/icons@^4.0":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
-  integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
-"@material-ui/lab@^4.0.0-alpha.60":
-  version "4.0.0-alpha.61"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz#9bf8eb389c0c26c15e40933cc114d4ad85e3d978"
-  integrity sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material-ui/pickers@^3.0":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@material-ui/pickers/-/pickers-3.3.11.tgz#dfaaf49955f7bbe3b1c3720293f69dcddeab3ca4"
-  integrity sha512-pDYjbjUeabapijS2FpSwK/ruJdk7IGeAshpLbKDa3PRRKRy7Nv6sXxAvUg2F+lID/NwUKgBmCYS5bzrl7Xxqzw==
-  dependencies:
-    "@babel/runtime" "^7.6.0"
-    "@date-io/core" "1.x"
-    "@types/styled-jsx" "^2.2.8"
-    clsx "^1.0.2"
-    react-transition-group "^4.0.0"
-    rifm "^0.7.0"
-
-"@material-ui/styles@^4.0", "@material-ui/styles@^4.11.5":
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
-  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    csstype "^2.5.2"
+"@mui/base@5.0.0-beta.30", "@mui/base@^5.0.0-beta.22":
+  version "5.0.0-beta.30"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.30.tgz#8feca6b70f2b9cd4d5cb97799ae9fcb5376c7f83"
+  integrity sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@floating-ui/react-dom" "^2.0.4"
+    "@mui/types" "^7.2.12"
+    "@mui/utils" "^5.15.3"
+    "@popperjs/core" "^2.11.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
+"@mui/core-downloads-tracker@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.3.tgz#40fc854d7cf5505a182a4e121149dfe21cd277ef"
+  integrity sha512-sWeihiVyxdJjpLkp8SHkTy9kt2M/o11M60G1MzwljGL2BXdM3Ktzqv5QaQHdi00y7Y1ulvtI3GOSxP2xU8mQJw==
+
+"@mui/icons-material@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.3.tgz#eee07582ea3ad913982b7843ff1612d0fad21278"
+  integrity sha512-7LEs8AnO2Se/XYH+CcJndRsGAE+M8KAExiiQHf0V11poqmPVGcbbY82Ry2IUYf9+rOilCVnWI18ErghZ625BPQ==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+
+"@mui/lab@^5.0.0-alpha.159":
+  version "5.0.0-alpha.159"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.159.tgz#d2b97b3e6b1b51d11d85f46096618490fe6d4e67"
+  integrity sha512-42Y8nf2/mDgYSLOw6PhOfHNV6P7tPcQkQEL0DTbY7a+gc+hXDsyVEzBMYST1MrV64EHTH68msfQm+k3CvLON/g==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/base" "5.0.0-beta.30"
+    "@mui/system" "^5.15.3"
+    "@mui/types" "^7.2.12"
+    "@mui/utils" "^5.15.3"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+
+"@mui/material@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.3.tgz#b77f1ac1275e5bf13b735e8224bdd301aab918c4"
+  integrity sha512-DODBBMouyq1B5f3YkEWL9vO8pGCxuEGqtfpltF6peMJzz/78tJFyLQsDas9MNLC/8AdFu2BQdkK7wox5UBPTAA==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/base" "5.0.0-beta.30"
+    "@mui/core-downloads-tracker" "^5.15.3"
+    "@mui/system" "^5.15.3"
+    "@mui/types" "^7.2.12"
+    "@mui/utils" "^5.15.3"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.3.tgz#2db0177d847dc6b28721d93308ed05d434a77c53"
+  integrity sha512-Q79MhVMmywC1l5bMsMZq5PsIudr1MNPJnx9/EqdMP0vpz5iNvFpnLmxsD7d8/hqTWgFAljI+LH3jX8MxlZH9Gw==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/utils" "^5.15.3"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.3.tgz#85cb294d701b1a3f197bfc90e87ec0685a0943b2"
+  integrity sha512-+d5XZCTeemOO/vBfWGEeHgTm8fjU1Psdgm+xAw+uegycO2EnoA/EfGSaG5UwZ6g3b66y48Mkxi35AggShMr88w==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@emotion/cache" "^11.11.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/styles@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.3.tgz#4fff156106528ffe610fa31527a9c4d2ff983db3"
+  integrity sha512-yePvO+0z35a1Cm7sXy3rL6F1oEJSiDFcQ/4Mkn/MHttwfBbbi7higBbUsBkuLPGoy40EiIUF+Tr+UoNW296/bA==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@emotion/hash" "^0.9.1"
+    "@mui/private-theming" "^5.15.3"
+    "@mui/types" "^7.2.12"
+    "@mui/utils" "^5.15.3"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
     hoist-non-react-statics "^3.3.2"
-    jss "^10.5.1"
-    jss-plugin-camel-case "^10.5.1"
-    jss-plugin-default-unit "^10.5.1"
-    jss-plugin-global "^10.5.1"
-    jss-plugin-nested "^10.5.1"
-    jss-plugin-props-sort "^10.5.1"
-    jss-plugin-rule-value-function "^10.5.1"
-    jss-plugin-vendor-prefixer "^10.5.1"
-    prop-types "^15.7.2"
-
-"@material-ui/system@^4.12.2":
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
-  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
-
-"@material-ui/types@5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
-
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    jss "^10.10.0"
+    jss-plugin-camel-case "^10.10.0"
+    jss-plugin-default-unit "^10.10.0"
+    jss-plugin-global "^10.10.0"
+    jss-plugin-nested "^10.10.0"
+    jss-plugin-props-sort "^10.10.0"
+    jss-plugin-rule-value-function "^10.10.0"
+    jss-plugin-vendor-prefixer "^10.10.0"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.3.tgz#062d0d6b5259c3dc0e1d4026b85ffcc3acf8637b"
+  integrity sha512-ewVU4eRgo4VfNMGpO61cKlfWmH7l9s6rA8EknRzuMX3DbSLfmtW2WJJg6qPwragvpPIir0Pp/AdWVSDhyNy5Tw==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@mui/private-theming" "^5.15.3"
+    "@mui/styled-engine" "^5.15.3"
+    "@mui/types" "^7.2.12"
+    "@mui/utils" "^5.15.3"
+    clsx "^2.0.0"
+    csstype "^3.1.2"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.12":
+  version "7.2.12"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.12.tgz#602acbb5aa3eb56a31f569a19f87f75d33de5c01"
+  integrity sha512-3kaHiNm9khCAo0pVe0RenketDSFoZGAlVZ4zDjB/QNZV0XiCj+sh1zkX0VVhQPgYJDlBEzAag+MHJ1tU3vf0Zw==
+
+"@mui/utils@^5.14.16", "@mui/utils@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.3.tgz#421043be5279d31ca9b221a6398feb7c9d61209b"
+  integrity sha512-mT3LiSt9tZWCdx1pl7q4Q5tNo6gdZbvJel286ZHGuj6LQQXjWNAh8qiF9d+LogvNUI+D7eLkTnj605d1zoazfg==
+  dependencies:
+    "@babel/runtime" "^7.23.6"
+    "@types/prop-types" "^15.7.11"
+    prop-types "^15.8.1"
+    react-is "^18.2.0"
+
+"@mui/x-date-pickers@^6.18.7":
+  version "6.18.7"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-6.18.7.tgz#6b00163c77dc450c11b44a479baf62541e6f8b36"
+  integrity sha512-4NoapaCT3jvEk2cuAUjG0ReZvTEk1i4dGDz94Gt1Oc08GuC1AuzYRwCR1/1tdmbDynwkR8ilkKL6AyS3NL1H4A==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/base" "^5.0.0-beta.22"
+    "@mui/utils" "^5.14.16"
+    "@types/react-transition-group" "^4.4.8"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
 
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
@@ -1497,6 +1667,11 @@
   resolved "https://registry.yarnpkg.com/@plotly/webpack-dash-dynamic-import/-/webpack-dash-dynamic-import-1.3.0.tgz#9ad60974601caef92d15bc2b0f6637c68f0edaf3"
   integrity sha512-JuleFNu/DqpzjYABv54j2eJ9+bCUut2EjTrEbyPCvAnjdhabOLnJmGl3Tf6ChDadIfao2Q5yH/R1K2q6dElroQ==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
@@ -1516,10 +1691,10 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@testing-library/dom@^8.0.0":
-  version "8.20.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
-  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+"@testing-library/dom@^9.0.0":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
+  integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -1530,28 +1705,38 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^6.1.3":
-  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.4.tgz#cf0835c33bc5ef00befb9e672b1e3e6a710e30e3"
-  integrity sha512-wpoYrCYwSZ5/AxcrjLxJmCU6I5QAJXslEeSiMQqaWmP2Kzpd1LvF/qxmAIW2qposULGWq2gw30GgVNFLSc2Jnw==
+"@testing-library/jest-dom@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.2.0.tgz#b572bd5cd6b29314487bac7ba393188e4987b4f7"
+  integrity sha512-+BVQlJ9cmEn5RDMUS8c2+TU6giLvzaHZ8sU/x0Jj7fk+6/46wPdwlgOPcpxS17CjcanBi/3VmGMqVr2rmbUmNw==
   dependencies:
-    "@adobe/css-tools" "^4.3.1"
+    "@adobe/css-tools" "^4.3.2"
     "@babel/runtime" "^7.9.2"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
+    dom-accessibility-api "^0.6.3"
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@12.x":
-  version "12.1.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
-  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
+"@testing-library/react@^14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.1.2.tgz#a2b9e9ee87721ec9ed2d7cfc51cc04e474537c32"
+  integrity sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "<18.0.0"
+    "@testing-library/dom" "^9.0.0"
+    "@types/react-dom" "^18.0.0"
+
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -1669,22 +1854,32 @@
   dependencies:
     undici-types "~5.25.1"
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prop-types@*":
   version "15.7.8"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.8.tgz#805eae6e8f41bd19e88917d2ea200dc992f405d3"
   integrity sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==
 
-"@types/react-dom@<18.0.0":
-  version "17.0.21"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.21.tgz#85d56965483ce4850f5f03f9234e54a1f47786e5"
-  integrity sha512-3rQEFUNUUz2MYiRwJJj6UekcW7rFLOtmK7ajQP7qJpjNdggInl3I/xM4I3Hq1yYPdCGVMgax1gZsB7BBTtayXg==
+"@types/prop-types@^15.7.11":
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
+
+"@types/react-dom@^18.0.0":
+  version "18.2.18"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
+  integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
   dependencies:
-    "@types/react" "^17"
+    "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
-  version "4.4.7"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.7.tgz#bf69f269d74aa78b99097673ca6dd6824a68ef1c"
-  integrity sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==
+"@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.8":
+  version "4.4.10"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
+  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
   dependencies:
     "@types/react" "*"
 
@@ -1697,15 +1892,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17":
-  version "17.0.68"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.68.tgz#99b17f567e258f5e7be855a281ac67b49a34f9f2"
-  integrity sha512-y8heXejd/Gi43S28GOqIFmr6BzhLa3anMlPojRu4rHh3MtRrrpB+BtLEcqP3XPO1urXByzBdkOLU7sodYWnpkA==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/scheduler@*":
   version "0.16.4"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.4.tgz#fedc3e5b15c26dc18faae96bf1317487cb3658cf"
@@ -1716,13 +1902,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/styled-jsx@^2.2.8":
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/@types/styled-jsx/-/styled-jsx-2.2.9.tgz#e50b3f868c055bcbf9bc353eca6c10fdad32a53f"
-  integrity sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/tough-cookie@*":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
@@ -2193,6 +2372,15 @@ babel-plugin-jest-hoist@^29.6.3:
     "@types/babel__core" "^7.1.14"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 babel-plugin-polyfill-corejs2@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
@@ -2439,10 +2627,10 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.0.2, clsx@^1.0.4:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+clsx@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
+  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
 
 co@^4.6.0:
   version "4.6.0"
@@ -2547,6 +2735,11 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -2564,6 +2757,17 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-jest@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/create-jest/-/create-jest-29.7.0.tgz#a355c5b3cb1e1af02ba177fe7afd7feee49a5320"
@@ -2616,16 +2820,16 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2:
-  version "2.6.21"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
-  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
-
 csstype@^3.0.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csstype@^3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 cycle@1.0.x:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cycle/-/cycle-1.0.3.tgz#21e80b2be8580f98b468f379430662b046c34ad2"
@@ -2640,7 +2844,7 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
-date-fns@^2.0:
+date-fns@^2.25.0:
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
   integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
@@ -2769,11 +2973,16 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
+dom-accessibility-api@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
+  integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
+
 dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
@@ -3292,6 +3501,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -3533,7 +3747,7 @@ has@^1.0.3:
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
   integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
 
-hoist-non-react-statics@^3.3.2:
+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==
@@ -4449,7 +4663,7 @@ json5@^2.1.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
-jss-plugin-camel-case@^10.5.1:
+jss-plugin-camel-case@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
   integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
@@ -4458,7 +4672,7 @@ jss-plugin-camel-case@^10.5.1:
     hyphenate-style-name "^1.0.3"
     jss "10.10.0"
 
-jss-plugin-default-unit@^10.5.1:
+jss-plugin-default-unit@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
   integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
@@ -4466,7 +4680,7 @@ jss-plugin-default-unit@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-global@^10.5.1:
+jss-plugin-global@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
   integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
@@ -4474,7 +4688,7 @@ jss-plugin-global@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-nested@^10.5.1:
+jss-plugin-nested@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
   integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
@@ -4483,7 +4697,7 @@ jss-plugin-nested@^10.5.1:
     jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-props-sort@^10.5.1:
+jss-plugin-props-sort@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
   integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
@@ -4491,7 +4705,7 @@ jss-plugin-props-sort@^10.5.1:
     "@babel/runtime" "^7.3.1"
     jss "10.10.0"
 
-jss-plugin-rule-value-function@^10.5.1:
+jss-plugin-rule-value-function@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
   integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
@@ -4500,7 +4714,7 @@ jss-plugin-rule-value-function@^10.5.1:
     jss "10.10.0"
     tiny-warning "^1.0.2"
 
-jss-plugin-vendor-prefixer@^10.5.1:
+jss-plugin-vendor-prefixer@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
   integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
@@ -4509,7 +4723,7 @@ jss-plugin-vendor-prefixer@^10.5.1:
     css-vendor "^2.0.8"
     jss "10.10.0"
 
-jss@10.10.0, jss@^10.5.1:
+jss@10.10.0, jss@^10.10.0:
   version "10.10.0"
   resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
   integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
@@ -4991,7 +5205,7 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-json@^5.2.0:
+parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
@@ -5028,6 +5242,11 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -5062,11 +5281,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5175,32 +5389,30 @@ react-docgen@^4.1.1:
     node-dir "^0.1.10"
     recast "^0.17.3"
 
-react-dom@^16.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.0"
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   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@^17.0.1:
   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==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-transition-group@^4.0.0, react-transition-group@^4.4.0:
+react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
@@ -5210,14 +5422,12 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 readable-stream@^2.0.6, readable-stream@^2.2.2:
   version "2.3.8"
@@ -5353,7 +5563,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-2.0.2.tgz#f8c934b8e6a13f539e38b7098e2e36134f01e800"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.9.0:
+resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4, resolve@^1.9.0:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -5384,13 +5594,6 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rifm@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
-  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -5456,13 +5659,12 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@^2.6.5:
   version "2.7.1"
@@ -5574,6 +5776,11 @@ source-map@0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -5771,6 +5978,11 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -6302,6 +6514,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"


Test patch:
diff --git a/notebooks/test_inputs.ipynb b/notebooks/test_inputs.ipynb
index d4427a2..fc45188 100644
--- a/notebooks/test_inputs.ipynb
+++ b/notebooks/test_inputs.ipynb
@@ -310,14 +310,15 @@
     "    id=\"button-2\",\n",
     "    text=\"Click me!\",\n",
     "    variant=\"outlined\",\n",
-    "    color=\"secondary\",\n",
+    "    color=\"success\",\n",
     ")\n",
     "\n",
     "button_3 = dmc.Button(\n",
     "    id=\"button-3\",\n",
     "    text=\"Click me!\",\n",
     "    variant=\"text\",\n",
-    "    color=\"default\",\n",
+    "    color=\"secondary\",\n",
+    "    disabled=True,\n",
     ")\n",
     "\n",
     "box_btns = dmc.Box(children=[button_1, button_2, button_3], sx={\"display\": \"flex\", \"gap\": \"10px\"})\n",
diff --git a/notebooks/test_table.ipynb b/notebooks/test_table.ipynb
index 66c2904..eb208d7 100644
--- a/notebooks/test_table.ipynb
+++ b/notebooks/test_table.ipynb
@@ -134,7 +134,7 @@
     ")\n",
     "def dropdown_callback(selected):\n",
     "    print(f\"selected: {selected}\")\n",
-    "    return [row for row in data if row[\"gender\"] in selected]\n",
+    "    return [row for row in DATA if row[\"gender\"] in selected]\n",
     "\n",
     "app.run_server(mode=\"jupyterlab\", host=\"0.0.0.0\", port=8001, debug=True)"
    ]
@@ -163,7 +163,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.5"
+   "version": "3.11.4"
   },
   "orig_nbformat": 4
  },
diff --git a/src/components/inputs/Autocomplete.test.js b/src/components/inputs/Autocomplete.test.js
deleted file mode 100644
index 7e52c9a..0000000
--- a/src/components/inputs/Autocomplete.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import {render, screen, fireEvent} from '@testing-library/react';
-import Autocomplete from './Autocomplete';
-import '@testing-library/jest-dom';
-
-const options = [
-  {label: 'option_a', value: 'value_a'},
-  {label: 'option_b', value: 'value_b'},
-  {label: 'option_c', value: 'value_c'}
-];
-
-describe('Autocomplete', () => {
-  it('should render correctly', () => {
-    render(<Autocomplete options={options} />);
-    const element = screen.getByRole('combobox');
-    expect(element).toBeInTheDocument();
-  });
-
-  it('should render correctly with initialized value', () => {
-    render(<Autocomplete options={options} selected={[options[2]]} />);
-    const input = screen.getByRole('textbox');
-    expect(input.value).toBe('option_c');
-  });
-
-  it('should render matching options with inserted input', () => {
-    render(<Autocomplete options={options} />);
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: 'option'}});
-    expect(screen.getByText('option_a')).toBeInTheDocument();
-    expect(screen.getByText('option_b')).toBeInTheDocument();
-    expect(screen.getByText('option_c')).toBeInTheDocument();
-  });
-
-  it('should render no options if non-matching input is inserted', () => {
-    render(<Autocomplete options={options} />);
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: 'option_d'}});
-    expect(screen.queryByText('option_a')).toBeNull();
-    expect(screen.queryByText('option_b')).toBeNull();
-    expect(screen.queryByText('option_c')).toBeNull();
-  });
-
-  it('should allow selection by clicking on option', () => {
-    render(<Autocomplete options={options} setProps={() => true} />);
-    const input = screen.getByRole('textbox');
-    fireEvent.change(input, {target: {value: 'option'}});
-    fireEvent.click(screen.getByText('option_b'));
-    expect(input.value).toBe('option_b');
-  });
-});
diff --git a/src/tests/Autocomplete.test.js b/src/tests/Autocomplete.test.js
new file mode 100644
index 0000000..d1a8323
--- /dev/null
+++ b/src/tests/Autocomplete.test.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Autocomplete from '../components/inputs/Autocomplete';
+import '@testing-library/jest-dom';
+
+const options = [
+  {label: 'option_a', value: 'value_a'},
+  {label: 'option_b', value: 'value_b'},
+  {label: 'option_c', value: 'value_c'}
+];
+
+describe('Autocomplete', () => {
+  it('should render correctly', () => {
+    render(<Autocomplete options={options} />);
+    const element = screen.getByRole('combobox');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should render correctly with initialized value', () => {
+    render(<Autocomplete options={options} selected={[options[2]]} />);
+    const input = screen.getByRole('combobox');
+    expect(input.value).toBe('option_c');
+  });
+
+  it('should render matching options with inserted input', async () => {
+    render(<Autocomplete options={options} />);
+    const input = screen.getByRole('combobox');
+    userEvent.type(input, 'option');
+
+    await waitFor(() => {
+      expect(screen.getByText('option_a')).toBeInTheDocument();
+      expect(screen.getByText('option_b')).toBeInTheDocument();
+      expect(screen.getByText('option_c')).toBeInTheDocument();
+    });
+  });
+
+  it('should render no options if non-matching input is inserted', async () => {
+    render(<Autocomplete options={options} />);
+    const input = screen.getByRole('combobox');
+
+    // Use userEvent.type to simulate typing
+    userEvent.type(input, 'jiberish');
+
+    // Wait for the presentation element to be visible
+    await waitFor(() => {
+      const element = screen.getByRole('presentation');
+      expect(element).toBeVisible();
+    });
+
+    // Wait for the DOM to update after the change event
+    await waitFor(() => {
+      expect(screen.queryByText('option_a')).toBeNull();
+      expect(screen.queryByText('option_b')).toBeNull();
+      expect(screen.queryByText('option_c')).toBeNull();
+    });
+  });
+
+  it('should allow selection by clicking on option', async () => {
+    render(<Autocomplete options={options} setProps={() => true} />);
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+
+    await waitFor(() => {
+      const element = screen.getByRole('presentation');
+      expect(element).toBeVisible();
+    });
+
+    fireEvent.click(screen.getByText('option_b'));
+
+    await waitFor(() => {
+      expect(input.value).toBe('option_b');
+    });
+  });
+});
diff --git a/src/components/inputs/InputText.test.js b/src/tests/InputText.test.js
similarity index 91%
rename from src/components/inputs/InputText.test.js
rename to src/tests/InputText.test.js
index a60537d..7eb27b2 100644
--- a/src/components/inputs/InputText.test.js
+++ b/src/tests/InputText.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import {render, screen, fireEvent} from '@testing-library/react';
-import InputText from './InputText';
+import {render, screen, fireEvent, act} from '@testing-library/react';
+import InputText from '../components/inputs/InputText';
 import '@testing-library/jest-dom';
 
 const setPropsPlaceholder = () => true;
@@ -21,7 +21,9 @@ describe('InputText', () => {
   it('should only allow integers', () => {
     render(<InputText inputType="integer" setProps={setPropsPlaceholder} />);
     const element = screen.getByRole('textbox');
-    element.focus();
+    act(() => {
+      element.focus();
+    });
     fireEvent.change(element, {target: {value: '12'}});
     expect(element.value).toBe('12');
     fireEvent.change(element, {target: {value: 'a'}});
@@ -35,7 +37,9 @@ describe('InputText', () => {
   it('should only allow floats', () => {
     render(<InputText inputType="float" precision={3} setProps={setPropsPlaceholder} />);
     const element = screen.getByRole('textbox');
-    element.focus();
+    act(() => {
+      element.focus();
+    });
     fireEvent.change(element, {target: {value: '12.3'}});
     expect(element.value).toBe('12.3');
     fireEvent.change(element, {target: {value: 'a'}});
@@ -63,7 +67,9 @@ describe('InputText', () => {
       />
     );
     const element = screen.getByRole('textbox');
-    element.focus();
+    act(() => {
+      element.focus();
+    });
     fireEvent.change(element, {target: {value: '12'}});
     expect(element.value).toBe('0');
     fireEvent.change(element, {target: {value: '-12'}});
@@ -85,7 +91,9 @@ describe('InputText', () => {
       />
     );
     const element = screen.getByRole('textbox');
-    element.focus();
+    act(() => {
+      element.focus();
+    });
     fireEvent.change(element, {target: {value: '12.3'}});
     expect(element.value).toBe('0');
     fireEvent.change(element, {target: {value: '-12.3'}});
@@ -99,7 +107,9 @@ describe('InputText', () => {
   it('should only allow string up to max length', () => {
     render(<InputText inputType="text" maxLength={5} setProps={setPropsPlaceholder} />);
     const element = screen.getByRole('textbox');
-    element.focus();
+    act(() => {
+      element.focus();
+    });
     fireEvent.change(element, {target: {value: '12345'}});
     expect(element.value).toBe('12345');
     fireEvent.change(element, {target: {value: '123456'}});
diff --git a/src/components/inputs/Slider.test.js b/src/tests/Slider.test.js
similarity index 97%
rename from src/components/inputs/Slider.test.js
rename to src/tests/Slider.test.js
index 9cf339d..4b15212 100644
--- a/src/components/inputs/Slider.test.js
+++ b/src/tests/Slider.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {render, screen} from '@testing-library/react';
-import Slider from './Slider';
+import Slider from '../components/inputs/Slider';
 import '@testing-library/jest-dom';
 
 describe('Slider', () => {
diff --git a/tests/display/test_table.py b/tests/display/test_table.py
index 8b20eac..fcc1365 100644
--- a/tests/display/test_table.py
+++ b/tests/display/test_table.py
@@ -85,7 +85,7 @@ def test_table(dash_duo, dash_app):
     for i in range(1, len(rows)):
         assert rows[i].text == " ".join(str(e) for e in DATA[i - 1].values())
 
-    dash_duo.find_element("#table").find_element_by_xpath('//*[@title="Next page"]').click()
+    dash_duo.find_element("#table").find_element_by_xpath('//*[@title="Go to next page"]').click()
     rows = dash_duo.find_element("#table").find_elements_by_tag_name("tr")
 
     assert len(rows) == len(DATA) - row_per_page + 1
diff --git a/tests/input/test_autocomplete.py b/tests/input/test_autocomplete.py
index 893a4bf..75cde2d 100644
--- a/tests/input/test_autocomplete.py
+++ b/tests/input/test_autocomplete.py
@@ -78,7 +78,7 @@ def test_single_selection(dash_duo, dash_app, index):
     dash_duo.start_server(dash_app())
     dash_duo.find_element("#autocomplete").click()
 
-    elements = dash_duo.find_element("#autocomplete-input-popup").find_elements_by_tag_name("li")
+    elements = dash_duo.find_element(".MuiAutocomplete-popper").find_elements_by_tag_name("li")
 
     # Select the option
     elements[index].click()
@@ -99,7 +99,7 @@ def test_multiple_selection(dash_duo, dash_app):
     # select the options
     for index in rand_idxs:
         # Get list of options
-        elements = dash_duo.find_element("#autocomplete-input-popup").find_elements_by_tag_name(
+        elements = dash_duo.find_element(".MuiAutocomplete-popper").find_elements_by_tag_name(
             "li"
         )
         # Click on the option
diff --git a/tests/input/test_slider.py b/tests/input/test_slider.py
index 8d43706..6d621f6 100644
--- a/tests/input/test_slider.py
+++ b/tests/input/test_slider.py
@@ -39,7 +39,7 @@ def app_factory(selected: Optional[int] = None, input_type: Optional[str] = None
             Output(component_id="text", component_property="text"),
             Input(component_id="slider", component_property="selected"),
         )
-        def on_change(selected: int) -> str:
+        def on_change(selected: int | float) -> str:
             return str(selected)
 
         return app
@@ -75,17 +75,16 @@ def test_slide_action(dash_duo: DashComposite, dash_app):
 
     assert dash_duo.get_logs() is None
 
-
 def test_slider_render_float_input_text(dash_duo: DashComposite, dash_app):
-    dash_duo.start_server(dash_app(input_type="float", selected=12.34))
-    input_field = dash_duo.find_element("input")
-    assert input_field.get_attribute("value") == "12.34"
+    dash_duo.start_server(dash_app(input_type="float", selected=43.21))
+    input_field = dash_duo.find_element(".MuiInputBase-input")
+    assert input_field.get_attribute("value") == "43.21"
     assert dash_duo.get_logs() is None
 
 
 def test_slider_render_integer_input_text(dash_duo: DashComposite, dash_app):
-    dash_duo.start_server(dash_app(input_type="float", selected=12))
-    input_field = dash_duo.find_element("input")
+    dash_duo.start_server(dash_app(input_type="integer", selected=12))
+    input_field = dash_duo.find_element(".MuiInputBase-input")
     assert input_field.get_attribute("value") == "12"
     assert dash_duo.get_logs() is None