Remove @material-ui/styles dependency

package.json

@@ -24,7 +24,7 @@
     "eslint-config-airbnb": "^18.0.1",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-json": "^1.4.0",
+    "eslint-plugin-json": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-prettier": "^3.1.0",
@@ -55,7 +55,8 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.5.1",
-    "@material-ui/styles": "^4.5.0",
+    "@types/react": "^16.9.11",
+    "apollo-utilities": "^1.3.2",
     "dequal": "^1.0.0",
     "dom-to-image": "^2.6.0",
     "geojson": "^0.5.0",
@@ -70,7 +71,6 @@
   "peerDependencies": {
     "@apollo/react-hooks": "^3.0.1",
     "@material-ui/core": "^4.5.1",
-    "@material-ui/styles": "^4.5.0",
     "apollo-client": "^2.6.4",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",

src/core/ChartContainer/DropDown.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
 import { ClickAwayListener, Fade, Paper, Popper } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(({ breakpoints }) => ({
   root: {

src/core/ChartContainer/EmbedDropDown.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
 import {
   Container,
   DialogTitle,
   DialogContent,
   DialogContentText,
   Typography
 } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import DropDown from './DropDown';
 

src/core/ChartContainer/ShareDropDown.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
 import { DialogContent, DialogTitle, Grid, TextField } from '@material-ui/core';
 import {
   EmailIcon,
@@ -11,6 +10,7 @@ import {
   TwitterIcon,
   TwitterShareButton
 } from 'react-share';
+import { makeStyles } from '@material-ui/core/styles';
 
 import DropDown from './DropDown';
 

src/core/ChartContainer/index.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles, ButtonBase, Grid, Typography } from '@material-ui/core';
+import { ButtonBase, Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { domToPng } from '../utils';
 

src/core/InsightContainer/Action/ActionButton.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
-
 import { IconButton, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   actionButton: {

src/core/InsightContainer/Action/index.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { PropTypes } from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
-
 import { Typography, Grid, Popover } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import ActionButton from './ActionButton';
 import EmbedCodeTextArea from './EmbedCodeTextArea';

src/core/InsightContainer/Insight.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles, Button, Grid, Box } from '@material-ui/core';
+import { Button, Grid, Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import BlockLoader from '../BlockLoader';
 import TypographyLoader from '../TypographyLoader';

src/core/InsightContainer/index.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles, Box, Grid, Typography } from '@material-ui/core';
+import { Box, Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 import { domToPng } from '../utils';
 

src/core/NumberVisuals.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { makeStyles } from '@material-ui/styles';
 import { Typography, List, ListItem, ListItemText } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(() => ({
   root: {

src/core/styles/withVictoryTheme.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useTheme } from '@material-ui/styles';
+
+import { useTheme } from '@material-ui/core/styles';
 
 import createVictoryTheme from './createVictoryTheme';
 

stories/common.js

@@ -1,9 +1,10 @@
 /* eslint-disable import/prefer-default-export */
-
 import React from 'react';
+
 import { Grid } from '@material-ui/core';
-import { ThemeProvider } from '@material-ui/styles';
-import Theme from './Theme';
+import { ThemeProvider } from '@material-ui/core/styles';
+
+import theme from './theme';
 
 export const CenterDecorator = storyFn => (
   <Grid
@@ -12,6 +13,6 @@ export const CenterDecorator = storyFn => (
     alignItems="flex-start"
     style={{ width: '100%', height: 'auto', overflow: 'hidden' }}
   >
-    <ThemeProvider theme={Theme}>{storyFn()}</ThemeProvider>
+    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
   </Grid>
 );