rework imports; disable babel.config.json for now

Author: mimecuvalo

components/Editor.tsx

@@ -1,6 +1,7 @@
-import { Alert, Skeleton, Snackbar, styled } from '@mui/material';
+import { Alert, Skeleton, Snackbar } from '@mui/material';
 import { ClipboardEvent, Suspense, lazy, useState } from 'react';
 
+import { styled } from '@mui/material/styles';
 import uploadFileToS3 from 'util/s3';
 
 const HelloWorldEditor = lazy(() => import('hello-world-editor'));

components/FeedWrapper.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const FeedWrapper = styled('div', { label: 'FeedWrapper' })`
   width: calc(33% - ${(props) => props.theme.spacing(2)});

components/Footer.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy, memo, useEffect, useState } from 'react';
 
 import Help from './Help';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const Debug = lazy(() => import('components/internal/Debug'));
 

components/Header.tsx

@@ -1,5 +1,5 @@
 import Login from './Login';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const StyledHeader = styled('header')`
   position: fixed;

components/Help.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material';
 import { F, defineMessages, useIntl } from 'i18n';
 import { MouseEvent, useEffect, useState } from 'react';
-import { styled, useTheme } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 
 import { $Experiment } from 'app/experiments';
 import Cookies from 'js-cookie';

components/ItemWrapper.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
   padding-bottom: 0;

components/content/ContentBase.tsx

@@ -1,11 +1,12 @@
 import { Content, UserPublic } from 'data/graphql-generated';
-import { CssBaseline, GlobalStyles, ThemeProvider } from '@mui/material';
+import { CssBaseline, GlobalStyles } from '@mui/material';
 import { Grid, Typography, styled } from 'components';
 import { themeGlobalCss, themes } from 'styles/theme';
 
 import ContentHead from './ContentHead';
 import { PropsWithChildren } from 'react';
 import SiteMap from './SiteMap';
+import { ThemeProvider } from '@mui/material/styles';
 
 const Container = styled('div', { label: 'ContentBaseContainer' })`
   display: flex;

components/content/ContentHead.tsx

@@ -3,7 +3,7 @@ import { buildUrl, contentUrl, profileUrl } from 'util/url-factory';
 
 import Head from 'next/head';
 import { themes } from 'styles/theme';
-import { useTheme } from '@mui/material';
+import { useTheme } from 'components';
 
 export default function ContentHead(props: {
   content?: Content;

components/content/Nav.tsx

@@ -1,6 +1,6 @@
 import { Content, ContentMetaInfo } from 'data/graphql-generated';
 import { Link, styled } from 'components';
-import { Palette, PaletteColor, useTheme } from '@mui/material';
+import { Palette, PaletteColor, useTheme } from '@mui/material/styles';
 import { gql, useQuery } from '@apollo/client';
 
 import ContentLink from 'components/ContentLink';

components/content/SiteMap.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, IconButton, Link, TextField, styled } from 'components';
+import { Avatar, Box, IconButton, Link, TextField, styled, useTheme } from 'components';
 import { Content, SiteMapAndUserQuery } from 'data/graphql-generated';
 import { F, defineMessages, useIntl } from 'i18n';
 import { FormEvent, ReactNode, useContext, useEffect, useState } from 'react';
@@ -15,7 +15,6 @@ import baseTheme from 'styles';
 import constants from 'util/constants';
 import { transientOptions } from 'util/css';
 import { useRouter } from 'next/router';
-import { useTheme } from '@mui/material';
 
 export const SITE_MAP_WIDTH = 175;