partial: css update

new-lamassu-admin/package-lock.json

@@ -13,9 +13,6 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@lamassu/coins": "v1.6.1",
-        "@material-ui/core": "4.12.4",
-        "@material-ui/icons": "4.11.2",
-        "@material-ui/lab": "^4.0.0-alpha.61",
         "@mui/icons-material": "^5.17.1",
         "@mui/lab": "^5.0.0-alpha.170",
         "@mui/material": "^5.17.1",
@@ -534,7 +531,8 @@
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.3.1",
@@ -1453,6 +1451,7 @@
       "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
       "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/styles": "^4.11.5",
@@ -1491,6 +1490,7 @@
       "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
       "deprecated": "You can now upgrade to @mui/icons. See the guide: https://mui.com/guides/migration-v4/",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.4.4"
       },
@@ -1509,40 +1509,13 @@
         }
       }
     },
-    "node_modules/@material-ui/lab": {
-      "version": "4.0.0-alpha.61",
-      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz",
-      "integrity": "sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==",
-      "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
-      "license": "MIT",
-      "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"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "@material-ui/core": "^4.12.1",
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
       "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
       "deprecated": "Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "@emotion/hash": "^0.8.0",
@@ -1584,6 +1557,7 @@
       "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
       "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "@material-ui/utils": "^4.11.3",
@@ -1613,6 +1587,7 @@
       "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
       "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "*"
       },
@@ -1627,6 +1602,7 @@
       "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
       "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.4.4",
         "prop-types": "^15.7.2",
@@ -4034,7 +4010,8 @@
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/d3": {
       "version": "6.7.0",
@@ -7483,7 +7460,8 @@
       "version": "1.16.1-lts",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
       "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
@@ -7713,7 +7691,8 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",

new-lamassu-admin/src/App.jsx

@@ -2,13 +2,8 @@ import { useQuery, gql } from "@apollo/client";
 import CssBaseline from '@mui/material/CssBaseline'
 import Grid from '@mui/material/Grid'
 import Slide from '@mui/material/Slide'
-import {
+import { StylesProvider, jssPreset, makeStyles } from '@mui/styles';
-  StylesProvider,
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
-  jssPreset,
-  MuiThemeProvider,
-  StyledEngineProvider,
-  makeStyles,
-} from '@mui/material/styles';
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { useContext, useState } from 'react'
@@ -155,10 +150,10 @@ const App = () => {
         <ApolloProvider>
           <StylesProvider jss={jss}>
             <StyledEngineProvider injectFirst>
-              <MuiThemeProvider theme={theme}>
+              <ThemeProvider theme={theme}>
                 <CssBaseline />
                 <Main />
-              </MuiThemeProvider>
+              </ThemeProvider>
             </StyledEngineProvider>
           </StylesProvider>
         </ApolloProvider>

new-lamassu-admin/src/components/Carousel.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 import ReactCarousel from 'react-material-ui-carousel'
 import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'

new-lamassu-admin/src/components/Chip.jsx

@@ -1,5 +1,5 @@
 import Chip from '@mui/material/Chip'
-import { withStyles } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
 import {

new-lamassu-admin/src/components/CollapsibleCard.jsx

@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'

new-lamassu-admin/src/components/ConfirmDialog.jsx

@@ -2,9 +2,9 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  makeStyles,
   InputLabel
 } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React, { memo, useState } from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/DeleteDialog.jsx

@@ -2,8 +2,8 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  makeStyles
 } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/ErrorMessage.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react'

new-lamassu-admin/src/components/ImagePopper.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, ClickAwayListener } from '@mui/material'
+import { ClickAwayListener } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import Popper from 'src/components/Popper'

new-lamassu-admin/src/components/InfoMessage.jsx

@@ -1,4 +1,5 @@
-import { Box, makeStyles } from '@mui/material'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { Label1 } from 'src/components/typography'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'

new-lamassu-admin/src/components/InformativeDialog.jsx

@@ -1,4 +1,5 @@
-import { Dialog, DialogContent, makeStyles } from '@mui/material'
+import { Dialog, DialogContent } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 import { H1 } from 'src/components/typography'
 import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'

new-lamassu-admin/src/components/LogsDownloaderPopper.jsx

@@ -1,5 +1,6 @@
 import { useLazyQuery } from "@apollo/client";
-import { makeStyles, ClickAwayListener } from '@mui/material'
+import { ClickAwayListener } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { format, set } from 'date-fns/fp'
 import FileSaver from 'file-saver'

new-lamassu-admin/src/components/Modal.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Modal as MaterialModal, Paper } from '@mui/material'
+import { Modal as MaterialModal, Paper } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { H1, H4 } from 'src/components/typography'

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/components/NotificationCenter/NotificationRow.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import prettyMs from 'pretty-ms'
 import * as R from 'ramda'

new-lamassu-admin/src/components/Popper.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Popper as MaterialPopper, Paper } from '@mui/material'
+import { Popper as MaterialPopper, Paper } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState } from 'react'

new-lamassu-admin/src/components/SearchBox.jsx

@@ -1,7 +1,7 @@
 import InputBase from '@mui/material/InputBase'
 import Paper from '@mui/material/Paper'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
-import MAutocomplete from '@mui/lab/Autocomplete'
+import MAutocomplete from '@mui/material/Autocomplete'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { P } from 'src/components/typography'
@@ -39,11 +39,13 @@ const SearchBox = memo(
         value={filters}
         options={options}
         getOptionLabel={it => it.label || it.value}
-        renderOption={it => (
+        renderOption={(props, it) => (
-          <div className={classes.item}>
+          <li {...props}>
-            <P className={classes.itemLabel}>{it.label || it.value}</P>
+            <div className={classes.item}>
-            <P className={classes.itemType}>{it.type}</P>
+              <P className={classes.itemLabel}>{it.label || it.value}</P>
-          </div>
+              <P className={classes.itemType}>{it.type}</P>
+            </div>
+          </li>
         )}
         autoHighlight
         disableClearable

new-lamassu-admin/src/components/SearchFilter.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import Chip from 'src/components/Chip'
 import { P, Label3 } from 'src/components/typography'

new-lamassu-admin/src/components/Stage.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'

new-lamassu-admin/src/components/Status.jsx

@@ -1,5 +1,5 @@
 import Chip from '@mui/material/Chip'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import {

new-lamassu-admin/src/components/Stepper.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'

new-lamassu-admin/src/components/Subtitle.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/Title.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
 import { spacer } from 'src/styling/variables'

new-lamassu-admin/src/components/Tooltip.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, ClickAwayListener } from '@mui/material'
+import { ClickAwayListener } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
 import Popper from 'src/components/Popper'

new-lamassu-admin/src/components/Uptime.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Chip from '@mui/material/Chip'
 import * as R from 'ramda'
 import React from 'react'

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'

new-lamassu-admin/src/components/buttons/ActionButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/AddButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'

new-lamassu-admin/src/components/buttons/BaseButton.styles.js

@@ -1,3 +1,5 @@
+// import { outlinedInputClasses } from '@mui/material/ButtonBase';
+
 import {
   white,
   fontColor,
@@ -37,6 +39,7 @@ export default {
     extend: colors(subheaderColor, subheaderDarkColor, offColor),
     '&:active': {
       color: white,
+      // [`& ${outlinedInputClasses.buttonIcon}`]: {
       '& $buttonIcon': {
         display: 'none'
       },
@@ -54,12 +57,14 @@ export default {
     '&:active': {
       color: fontColor,
       '& $buttonIcon': {
+      // [`& ${outlinedInputClasses.buttonIcon}`]: {
         display: 'flex'
       },
       '& $buttonIconActive': {
         display: 'none'
       }
     },
+    // [`& ${outlinedInputClasses.buttonIcon}`]: {
     '& $buttonIcon': {
       display: 'none'
     },

new-lamassu-admin/src/components/buttons/Button.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/DeleteButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'

new-lamassu-admin/src/components/buttons/FeatureButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/IDButton.jsx

@@ -1,5 +1,5 @@
 import { ClickAwayListener } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { useState, memo } from 'react'
 import Popover from 'src/components/Popper'

new-lamassu-admin/src/components/buttons/IconButton.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, IconButton as IconB } from '@mui/material'
+import { IconButton as IconB } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import { comet } from 'src/styling/variables'

new-lamassu-admin/src/components/buttons/Link.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/buttons/Link.styles.js

@@ -1,4 +1,4 @@
-import { alpha } from '@mui/material/styles/colorManipulator'
+import { alpha } from '@mui/material/styles'
 
 import typographyStyles from 'src/components/typography/styles'
 import {

new-lamassu-admin/src/components/buttons/SubpageButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
 import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'

new-lamassu-admin/src/components/date-range-picker/Calendar.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import {
   add,
   differenceInMonths,

new-lamassu-admin/src/components/date-range-picker/DateRangePicker.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { compareAsc, differenceInDays, set } from 'date-fns/fp'
 import * as R from 'ramda'

new-lamassu-admin/src/components/date-range-picker/Tile.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useState, memo } from 'react'
 import { H4, P } from 'src/components/typography'
 import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'

new-lamassu-admin/src/components/editableTable/Header.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useContext } from 'react'

new-lamassu-admin/src/components/editableTable/Row.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'

new-lamassu-admin/src/components/editableTable/Table.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/fake-table/Table.jsx

@@ -1,6 +1,6 @@
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import MAutocomplete from '@mui/lab/Autocomplete'
+import MAutocomplete from '@mui/material/Autocomplete'
 import sort from 'match-sorter'
 import * as R from 'ramda'
 import React from 'react'
@@ -100,7 +100,7 @@ const Autocomplete = ({
           />
         )
       }}
-      renderOption={props => {
+      renderOption={(iprops, props) => {
         if (!props.warning && !props.warningMessage)
           return R.path([labelProp])(props)
 
@@ -120,17 +120,19 @@ const Autocomplete = ({
         )
 
         return (
-          <Box
+          <li {...iprops}>
-            width="100%"
+            <Box
-            display="flex"
+              width="100%"
-            flexDirection="row"
+              display="flex"
-            justifyContent="space-between"
+              flexDirection="row"
-            alignItems="center">
+              justifyContent="space-between"
-            <Box>{R.path([labelProp])(props)}</Box>
+              alignItems="center">
-            <HoverableTooltip parentElements={hoverableElement} width={250}>
+              <Box>{R.path([labelProp])(props)}</Box>
-              <P>{props.warningMessage}</P>
+              <HoverableTooltip parentElements={hoverableElement} width={250}>
-            </HoverableTooltip>
+                <P>{props.warningMessage}</P>
-          </Box>
+              </HoverableTooltip>
+            </Box>
+          </li>
         )
       }}
     />

new-lamassu-admin/src/components/inputs/base/Checkbox.jsx

@@ -1,5 +1,5 @@
 import Checkbox from '@mui/material/Checkbox'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import CheckBoxIcon from '@mui/icons-material/CheckBox'
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
 import React from 'react'
@@ -16,7 +16,7 @@ import {
 const useStyles = makeStyles({
   root: {
     color: secondaryColor,
-    '&$checked': {
+    '&.Mui-checked': {
       color: secondaryColor
     }
   },

new-lamassu-admin/src/components/inputs/base/CodeInput.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import OtpInput from 'react-otp-input'

new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx

@@ -1,9 +1,9 @@
 import {
   Radio,
   RadioGroup as MRadioGroup,
-  FormControlLabel,
+  FormControlLabel
-  makeStyles
 } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { Label1 } from 'src/components/typography'

new-lamassu-admin/src/components/inputs/base/Select.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { useSelect } from 'downshift'
 import * as R from 'ramda'

new-lamassu-admin/src/components/inputs/base/Switch.jsx

@@ -1,5 +1,5 @@
 import Switch from '@mui/material/Switch'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo } from 'react'
 
 import {
@@ -18,17 +18,17 @@ const useStyles = makeStyles(theme => ({
   },
   switchBase: {
     padding: 2,
-    '&$disabled': {
+    '&.Mui-disabled': {
       color: disabledColor2,
       '& + $track': {
         backgroundColor: disabledColor,
         opacity: 1
       }
     },
-    '&$checked': {
+    '&.Mui-checked': {
       transform: 'translateX(58%)',
       color: theme.palette.common.white,
-      '&$disabled': {
+      '&.Mui-disabled': {
         color: disabledColor2
       },
       '& + $track': {
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
         border: 'none'
       }
     },
-    '&$focusVisible $thumb': {
+    '&.Mui-focusVisible $thumb': {
       border: '6px solid #fff',
       boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
     }

new-lamassu-admin/src/components/inputs/base/TextInput.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import TextField from '@mui/material/TextField'
 import classnames from 'classnames'
 import * as R from 'ramda'

new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { ToggleButtonGroup as MUIToggleButtonGroup } from '@mui/lab'
 import ToggleButton from '@mui/lab/ToggleButton'
 import React from 'react'

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import Chip from 'src/components/Chip'

new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classNames from 'classnames'
 import React, { memo, useState } from 'react'
 import { CashOut } from 'src/components/inputs/cashbox/Cashbox'

new-lamassu-admin/src/components/layout/Header.jsx

@@ -1,7 +1,7 @@
 import { useQuery, gql } from "@apollo/client";
 import ClickAwayListener from '@mui/material/ClickAwayListener'
 import Popper from '@mui/material/Popper'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'

new-lamassu-admin/src/components/layout/Section.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'
 import Subtitle from 'src/components/Subtitle'

new-lamassu-admin/src/components/layout/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import { P } from 'src/components/typography'

new-lamassu-admin/src/components/layout/TitleSection.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Box } from '@mui/material'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React from 'react'

new-lamassu-admin/src/components/machineActions/DiagnosticsModal.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { subMinutes } from 'date-fns'
 import FileSaver from 'file-saver'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/machineActions/MachineActions.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { memo, useState } from 'react'
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import ActionButton from 'src/components/buttons/ActionButton'

new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 import {

new-lamassu-admin/src/components/table/EmptyTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classNames from 'classnames'
 import React, { memo } from 'react'
 import { H4 } from 'src/components/typography'

new-lamassu-admin/src/components/table/Table.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableCell.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableHeader.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/table/TableRow.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

new-lamassu-admin/src/components/tables/DataTable.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Box } from '@mui/material'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'

new-lamassu-admin/src/components/typography/index.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import React from 'react'
 

new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, gql } from "@apollo/client";
 import { Dialog, DialogContent, SvgIcon, IconButton } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { Form, Formik, FastField } from 'formik'
 import {QRCodeSVG as QRCode} from 'qrcode.react'

new-lamassu-admin/src/pages/Analytics/Analytics.jsx

@@ -1,6 +1,6 @@
 import { useQuery, gql } from "@apollo/client";
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import classnames from 'classnames'
 import { endOfToday } from 'date-fns'
 import { subDays, format, add, startOfWeek } from 'date-fns/fp'

new-lamassu-admin/src/pages/Analytics/components/LegendEntry.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { P } from 'src/components/typography'
 

new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.jsx

@@ -1,5 +1,5 @@
 import { Paper } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 import { Info2, Label3, P } from 'src/components/typography'

new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { getTimezoneOffset } from 'date-fns-tz'
 import * as R from 'ramda'
 import React, { useState } from 'react'

new-lamassu-admin/src/pages/Analytics/components/wrappers/OverTimeWrapper.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
 

new-lamassu-admin/src/pages/Analytics/components/wrappers/TopMachinesWrapper.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'

new-lamassu-admin/src/pages/Analytics/components/wrappers/VolumeOverTimeWrapper.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useState } from 'react'
 import { H2 } from 'src/components/typography'
 

new-lamassu-admin/src/pages/Authentication/Input2FAState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import React, { useContext, useState } from 'react'
 import { useHistory } from 'react-router-dom'

new-lamassu-admin/src/pages/Authentication/InputFIDOState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useState, useContext } from 'react'

new-lamassu-admin/src/pages/Authentication/Login.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 
 import LoginCard from './LoginCard'

new-lamassu-admin/src/pages/Authentication/LoginCard.jsx

@@ -1,5 +1,5 @@
 import Paper from '@mui/material/Paper'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import React, { useReducer } from 'react'
 import { H5 } from 'src/components/typography'
 import Logo from 'src/styling/icons/menu/logo.svg?react'

new-lamassu-admin/src/pages/Authentication/LoginState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { startAssertion } from '@simplewebauthn/browser'
 import { Field, Form, Formik } from 'formik'
 import React, { useContext } from 'react'

new-lamassu-admin/src/pages/Authentication/Register.jsx

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useReducer } from 'react'

new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Paper from '@mui/material/Paper'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'

new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx

@@ -1,5 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@mui/material'
+import { Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useState } from 'react'

new-lamassu-admin/src/pages/Authentication/Setup2FAState.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik } from 'formik'
 import { QRCodeSVG as QRCode } from 'qrcode.react'
 import React, { useContext, useState } from 'react'

new-lamassu-admin/src/pages/Blacklist/Blacklist.jsx

@@ -1,6 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
 import { Box, Dialog, DialogContent, DialogActions } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { Form, Formik, Field } from 'formik'
 import * as R from 'ramda'
 import React, { useState } from 'react'

new-lamassu-admin/src/pages/Blacklist/BlacklistModal.jsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import * as R from 'ramda'
 import React from 'react'

new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { DeleteDialog } from 'src/components/DeleteDialog'

new-lamassu-admin/src/pages/Cashout/Cashout.jsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Cashout/WizardSplash.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import React from 'react'
 import { H1, P, Info2 } from 'src/components/typography'
 import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'

new-lamassu-admin/src/pages/Cashout/WizardStep.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Formik, Form, Field } from 'formik'
 import React from 'react'
 import ErrorMessage from 'src/components/ErrorMessage'

new-lamassu-admin/src/pages/Commissions/Commissions.jsx

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import { HelpTooltip } from 'src/components/Tooltip'

new-lamassu-admin/src/pages/Commissions/components/CommissionsList.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 import {

new-lamassu-admin/src/pages/Customers/CustomerData.jsx

@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Grid'
-import { makeStyles } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import { useState, React } from 'react'
 import ImagePopper from 'src/components/ImagePopper'

new-lamassu-admin/src/pages/Customers/CustomerNotes.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import * as R from 'ramda'
 import { React, useState } from 'react'
 import { H3 } from 'src/components/typography'

new-lamassu-admin/src/pages/Customers/CustomerPhotos.jsx

@@ -1,4 +1,5 @@
-import { makeStyles, Paper } from '@mui/material'
+import { Paper } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { format } from 'date-fns/fp'
 import * as R from 'ramda'
 import { React, useState } from 'react'

new-lamassu-admin/src/pages/Customers/CustomerProfile.jsx

@@ -1,12 +1,12 @@
 import { useQuery, useMutation, useLazyQuery, gql } from "@apollo/client";
 import {
-  makeStyles,
   Breadcrumbs,
   Box,
   DialogActions,
   DialogContent,
   Dialog
 } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import NavigateNextIcon from '@mui/icons-material/NavigateNext'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'