MaterialUI auto upgrade

ran `npx @mui/codemod v5.0.0/preset-safe`

__tests__/src/components/AppProviders.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import StylesProvider from '@mui/styles/StylesProvider';
 import Fullscreen from 'react-full-screen';
 import { DndContext, DndProvider } from 'react-dnd';
 import { AppProviders } from '../../../src/components/AppProviders';
@@ -34,7 +35,7 @@ describe('AppProviders', () => {
   it('sets up a theme based on the config passed in merged w/ MaterialUI', () => {
     const wrapper = createWrapper();
     const { theme } = wrapper.find(ThemeProvider).props();
-    expect(theme.palette.type).toEqual('light');
+    expect(theme.palette.mode).toEqual('light');
     expect(theme.typography.useNextVariants).toBe(true);
     expect(Object.keys(theme).length).toBeGreaterThan(10);
   });

__tests__/src/components/AttributionPanel.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import { Img } from 'react-image';
 import { AttributionPanel } from '../../../src/components/AttributionPanel';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';

__tests__/src/components/Branding.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 import MiradorIcon from '../../../src/components/icons/MiradorIcon';
 import { Branding } from '../../../src/components/Branding';
 
@@ -15,7 +15,7 @@ describe('Branding', () => {
       wrapper.matchesElement(
         <div>
           <Typography>
-            <IconButton>
+            <IconButton size="large">
               <MiradorIcon />
             </IconButton>
           </Typography>
@@ -34,7 +34,7 @@ describe('Branding', () => {
             <Typography>mirador</Typography>
           </div>
           <Typography>
-            <IconButton>
+            <IconButton size="large">
               <MiradorIcon />
             </IconButton>
           </Typography>

__tests__/src/components/CanvasAnnotations.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
 import { ScrollTo } from '../../../src/components/ScrollTo';
 

__tests__/src/components/CanvasInfo.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { CanvasInfo } from '../../../src/components/CanvasInfo';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';

__tests__/src/components/CanvasLayers.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Input from '@material-ui/core/Input';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
+import Input from '@mui/material/Input';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { CanvasLayers } from '../../../src/components/CanvasLayers';
 import IIIFThumbnail from '../../../src/containers/IIIFThumbnail';

__tests__/src/components/ChangeThemeDialog.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
 import { ChangeThemeDialog } from '../../../src/components/ChangeThemeDialog';
 
 /**

__tests__/src/components/CollapsibleSection.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { CollapsibleSection } from '../../../src/components/CollapsibleSection';
 

__tests__/src/components/CollectionDialog.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import Skeleton from '@mui/material/Skeleton';
 import { Utils } from 'manifesto.js';
 import { CollectionDialog } from '../../../src/components/CollectionDialog';
 import collection from '../../fixtures/version-2/collection.json';

__tests__/src/components/CollectionInfo.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { CollectionInfo } from '../../../src/components/CollectionInfo';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
 

__tests__/src/components/CompanionArea.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Slide from '@material-ui/core/Slide';
-import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp';
-import ArrowRightIcon from '@material-ui/icons/ArrowRightSharp';
+import Slide from '@mui/material/Slide';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp';
+import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { CompanionArea } from '../../../src/components/CompanionArea';
 import CompanionWindowFactory from '../../../src/containers/CompanionWindowFactory';

__tests__/src/components/ErrorDialog.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContentText from '@mui/material/DialogContentText';
 import { ErrorDialog } from '../../../src/components/ErrorDialog';
 
 /**

__tests__/src/components/FullScreenButton.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
-import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
+import FullscreenIcon from '@mui/icons-material/FullscreenSharp';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExitSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { FullScreenButton } from '../../../src/components/FullScreenButton';
 

__tests__/src/components/GalleryView.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryView } from '../../../src/components/GalleryView';
 import GalleryViewThumbnail from '../../../src/containers/GalleryViewThumbnail';

__tests__/src/components/GalleryViewThumbnail.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import IntersectionObserver from '@researchgate/react-intersection-observer';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryViewThumbnail } from '../../../src/components/GalleryViewThumbnail';

__tests__/src/components/IIIFThumbnail.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
 import IntersectionObserver from '@researchgate/react-intersection-observer';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { IIIFThumbnail } from '../../../src/components/IIIFThumbnail';
 
 /**

__tests__/src/components/LabelValueMetadata.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import SanitizedHtml from '../../../src/containers/SanitizedHtml';
 

__tests__/src/components/LanguageSettings.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
-import CheckIcon from '@material-ui/icons/CheckSharp';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import CheckIcon from '@mui/icons-material/CheckSharp';
 import { LanguageSettings } from '../../../src/components/LanguageSettings';
 
 /**

__tests__/src/components/LocalePicker.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { LocalePicker } from '../../../src/components/LocalePicker';
 
 /**

__tests__/src/components/ManifestInfo.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { ManifestInfo } from '../../../src/components/ManifestInfo';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';