partial: @mui update imports

new-lamassu-admin/package.json

@@ -5,10 +5,13 @@
   "type": "module",
   "dependencies": {
     "@apollo/client": "^3.13.7",
+    "@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",
+    "@mui/styles": "^5.17.1",
     "@simplewebauthn/browser": "^3.0.0",
     "apollo-upload-client": "^18.0.0",
     "bignumber.js": "9.0.0",

new-lamassu-admin/src/App.jsx

@@ -1,13 +1,13 @@
 import { useQuery, gql } from "@apollo/client";
-import CssBaseline from '@material-ui/core/CssBaseline'
-import Grid from '@material-ui/core/Grid'
-import Slide from '@material-ui/core/Slide'
+import CssBaseline from '@mui/material/CssBaseline'
+import Grid from '@mui/material/Grid'
+import Slide from '@mui/material/Slide'
 import {
   StylesProvider,
   jssPreset,
   MuiThemeProvider,
   makeStyles
-} from '@material-ui/core/styles'
+} from '@mui/material/styles'
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { useContext, useState } from 'react'

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/Chip'
-import { withStyles } from '@material-ui/core/styles'
+import Chip from '@mui/material/Chip'
+import { withStyles } from '@mui/material/styles'
 import React, { memo } from 'react'
 
 import {

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

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

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

@@ -4,7 +4,7 @@ import {
   DialogContent,
   makeStyles,
   InputLabel
-} from '@material-ui/core'
+} from '@mui/material'
 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

@@ -3,7 +3,7 @@ import {
   DialogActions,
   DialogContent,
   makeStyles
-} from '@material-ui/core'
+} from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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,4 @@
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import { makeStyles, ClickAwayListener } from '@mui/material'
 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,4 @@
-import { Box, makeStyles } from '@material-ui/core'
+import { Box, makeStyles } from '@mui/material'
 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,4 @@
-import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
+import { Dialog, DialogContent, makeStyles } from '@mui/material'
 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,5 @@
 import { useLazyQuery } from "@apollo/client";
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import { makeStyles, ClickAwayListener } from '@mui/material'
 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,4 @@
-import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'
+import { makeStyles, Modal as MaterialModal, Paper } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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,4 @@
-import { makeStyles, Popper as MaterialPopper, Paper } from '@material-ui/core'
+import { makeStyles, Popper as MaterialPopper, Paper } from '@mui/material'
 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 '@material-ui/core/InputBase'
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
-import MAutocomplete from '@material-ui/lab/Autocomplete'
+import InputBase from '@mui/material/InputBase'
+import Paper from '@mui/material/Paper'
+import { makeStyles } from '@mui/material/styles'
+import MAutocomplete from '@mui/lab/Autocomplete'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { P } from 'src/components/typography'

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/Chip'
-import { makeStyles } from '@material-ui/core/styles'
+import Chip from '@mui/material/Chip'
+import { makeStyles } from '@mui/material/styles'
 import React from 'react'
 
 import {

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { makeStyles, ClickAwayListener } from '@material-ui/core'
+import { makeStyles, ClickAwayListener } from '@mui/material'
 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,5 +1,5 @@
-import { makeStyles } from '@material-ui/core'
-import Chip from '@material-ui/core/Chip'
+import { makeStyles } from '@mui/material'
+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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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/Button.jsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { ClickAwayListener } from '@mui/material'
+import { makeStyles } from '@mui/material/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,4 @@
-import { makeStyles, IconButton as IconB } from '@material-ui/core'
+import { makeStyles, IconButton as IconB } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles/colorManipulator'
+import { alpha } from '@mui/material/styles/colorManipulator'
 
 import typographyStyles from 'src/components/typography/styles'
 import {

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/styles'
 import {
   add,
   differenceInMonths,

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/styles'
 import classnames from 'classnames'
 import React from 'react'
 

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/Card'
-import CardContent from '@material-ui/core/CardContent'
-import { makeStyles } from '@material-ui/core/styles'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import MAutocomplete from '@material-ui/lab/Autocomplete'
+import { Box } from '@mui/material'
+import MAutocomplete from '@mui/lab/Autocomplete'
 import sort from 'match-sorter'
 import * as R from 'ramda'
 import React from 'react'

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

@@ -1,7 +1,7 @@
-import Checkbox from '@material-ui/core/Checkbox'
-import { makeStyles } from '@material-ui/core/styles'
-import CheckBoxIcon from '@material-ui/icons/CheckBox'
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
+import Checkbox from '@mui/material/Checkbox'
+import { makeStyles } from '@mui/material/styles'
+import CheckBoxIcon from '@mui/icons-material/CheckBox'
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'
 import React from 'react'
 import { Label2, Info3 } from 'src/components/typography'
 import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'

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

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

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

@@ -1,7 +1,7 @@
-import FormControl from '@material-ui/core/FormControl'
-import InputLabel from '@material-ui/core/InputLabel'
-import MenuItem from '@material-ui/core/MenuItem'
-import Select from '@material-ui/core/Select'
+import FormControl from '@mui/material/FormControl'
+import InputLabel from '@mui/material/InputLabel'
+import MenuItem from '@mui/material/MenuItem'
+import Select from '@mui/material/Select'
 import classnames from 'classnames'
 import React from 'react'
 

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

@@ -3,7 +3,7 @@ import {
   RadioGroup as MRadioGroup,
   FormControlLabel,
   makeStyles
-} from '@material-ui/core'
+} from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/Switch'
-import { makeStyles } from '@material-ui/core/styles'
+import Switch from '@mui/material/Switch'
+import { makeStyles } from '@mui/material/styles'
 import React, { memo } from 'react'
 
 import {

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

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core'
-import TextField from '@material-ui/core/TextField'
+import { makeStyles } from '@mui/material'
+import TextField from '@mui/material/TextField'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'

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

@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core'
-import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
-import ToggleButton from '@material-ui/lab/ToggleButton'
+import { makeStyles } from '@mui/material'
+import { ToggleButtonGroup as MUIToggleButtonGroup } from '@mui/lab'
+import ToggleButton from '@mui/lab/ToggleButton'
 import React from 'react'
 import { H4, P } from 'src/components/typography'
 

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/ClickAwayListener'
-import Popper from '@material-ui/core/Popper'
-import { makeStyles } from '@material-ui/core/styles'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Popper from '@mui/material/Popper'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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,4 @@
-import { makeStyles, Box } from '@material-ui/core'
+import { makeStyles, Box } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 import classnames from 'classnames'
 import React from 'react'
 import {

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
 

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

@@ -1,4 +1,4 @@
-import { makeStyles, Box } from '@material-ui/core'
+import { makeStyles, Box } from '@mui/material'
 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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Dialog, DialogContent, SvgIcon, IconButton } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Paper } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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,4 @@
-import { makeStyles, Grid } from '@material-ui/core'
+import { makeStyles, Grid } from '@mui/material'
 import React from 'react'
 
 import LoginCard from './LoginCard'

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

@@ -1,5 +1,5 @@
-import Paper from '@material-ui/core/Paper'
-import { makeStyles } from '@material-ui/core/styles'
+import Paper from '@mui/material/Paper'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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,6 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@material-ui/core'
-import Paper from '@material-ui/core/Paper'
+import { makeStyles, Grid } from '@mui/material'
+import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useReducer } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'

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

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

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

@@ -1,6 +1,6 @@
 import { useQuery, useMutation, gql } from "@apollo/client";
-import { makeStyles, Grid } from '@material-ui/core'
-import Paper from '@material-ui/core/Paper'
+import { makeStyles, Grid } from '@mui/material'
+import Paper from '@mui/material/Paper'
 import { Field, Form, Formik } from 'formik'
 import React, { useState } from 'react'
 import { useLocation, useHistory } from 'react-router-dom'

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

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useLazyQuery, gql } from "@apollo/client";
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box, Dialog, DialogContent, DialogActions } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box } from '@mui/material'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core/styles'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 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 '@material-ui/core/Grid'
-import { makeStyles } from '@material-ui/core/styles'
+import Grid from '@mui/material/Grid'
+import { makeStyles } from '@mui/material/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 '@material-ui/core'
+import { makeStyles } from '@mui/material'
 import * as R from 'ramda'
 import { React, useState } from 'react'
 import { H3 } from 'src/components/typography'