core-components,core-app-api,theme: avoid importing all of @mui/core

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/happy-hotels-explain.md

@@ -0,0 +1,7 @@
+---
+'@backstage/core-app-api': patch
+'@backstage/core-components': patch
+'@backstage/theme': patch
+---
+
+Internal refactor to avoid importing all of `@material-ui/core`.

packages/core-app-api/src/app/AppThemeProvider.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useMemo, useEffect, useState, PropsWithChildren } from 'react';
-import { ThemeProvider, CssBaseline } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import { useApi, appThemeApiRef, AppTheme } from '@backstage/core-plugin-api';
 import { useObservable } from 'react-use';
 

packages/core-components/.eslintrc.js

@@ -1,8 +1,25 @@
+const base = require('@backstage/cli/config/eslint');
+const [, baseRestrictedImports] = base.rules['no-restricted-imports'];
+
 module.exports = {
   extends: [require.resolve('@backstage/cli/config/eslint')],
   rules: {
     // TODO: add prop types to JS and remove
     'react/prop-types': 0,
     'jest/expect-expect': 0,
+    'no-restricted-imports': [
+      2,
+      {
+        ...baseRestrictedImports,
+        paths: [
+          {
+            // Importing the entire MUI icons packages kills build performance as the list of icons is huge.
+            name: '@material-ui/core',
+            message: "Please import '@material-ui/core/...' instead.",
+          },
+          ...baseRestrictedImports.paths,
+        ],
+      },
+    ],
   },
 };

packages/core-components/api-report.md

@@ -8,9 +8,8 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstageIdentityApi } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core';
-import { ButtonProps as ButtonProps_2 } from '@material-ui/core';
-import { CardHeaderProps } from '@material-ui/core';
+import { ButtonProps as ButtonProps_2 } from '@material-ui/core/Button';
+import { CardHeaderProps } from '@material-ui/core/CardHeader';
 import { Column } from '@material-table/core';
 import { ComponentClass } from 'react';
 import { ComponentProps } from 'react';
@@ -21,9 +20,10 @@ import { default as dagre_2 } from 'dagre';
 import { ElementType } from 'react';
 import { ErrorInfo } from 'react';
 import { IconComponent } from '@backstage/core-plugin-api';
-import { LinearProgressProps } from '@material-ui/core';
-import { LinkProps as LinkProps_2 } from '@material-ui/core';
+import { LinearProgressProps } from '@material-ui/core/LinearProgress';
+import { LinkProps as LinkProps_2 } from '@material-ui/core/Link';
 import { LinkProps as LinkProps_3 } from 'react-router-dom';
+import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import { MaterialTableProps } from '@material-table/core';
 import { NavLinkProps } from 'react-router-dom';
 import { Overrides } from '@material-ui/core/styles/overrides';
@@ -37,14 +37,14 @@ import { SessionApi } from '@backstage/core-plugin-api';
 import { SignInPageProps } from '@backstage/core-plugin-api';
 import { SparklinesLineProps } from 'react-sparklines';
 import { SparklinesProps } from 'react-sparklines';
-import { StyledComponentProps } from '@material-ui/core';
+import { StyledComponentProps } from '@material-ui/core/styles';
 import { StyleRules } from '@material-ui/styles';
 import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import { TextTruncateProps } from 'react-text-truncate';
-import { Theme } from '@material-ui/core';
-import { TooltipProps } from '@material-ui/core';
-import { WithStyles } from '@material-ui/core';
+import { Theme } from '@material-ui/core/styles';
+import { TooltipProps } from '@material-ui/core/Tooltip';
+import { WithStyles } from '@material-ui/core/styles';
 
 // Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { Snackbar, IconButton } from '@material-ui/core';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { Alert } from '@material-ui/lab';
 import { AlertMessage, useApi, alertApiRef } from '@backstage/core-plugin-api';

packages/core-components/src/components/Avatar/Avatar.tsx

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 import React, { CSSProperties } from 'react';
-import {
-  Avatar as MaterialAvatar,
-  createStyles,
-  makeStyles,
-  Theme,
-} from '@material-ui/core';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import MaterialAvatar from '@material-ui/core/Avatar';
 import { extractInitials, stringToColor } from './utils';
 
 export type AvatarClassKey = 'avatar';

packages/core-components/src/components/Button/Button.stories.tsx

@@ -17,15 +17,13 @@ import React, { ComponentType } from 'react';
 import { Button } from './Button';
 import { useLocation } from 'react-router-dom';
 import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
-import {
-  Divider,
-  Link,
-  List,
-  ListItem,
-  ListItemText,
-  Typography,
-  Button as MaterialButton,
-} from '@material-ui/core';
+import Divider from '@material-ui/core/Divider';
+import Link from '@material-ui/core/Link';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import MaterialButton from '@material-ui/core/Button';
 import { wrapInTestApp } from '@backstage/test-utils';
 
 const routeRef = createRouteRef({

packages/core-components/src/components/Button/Button.tsx

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-import {
-  Button as MaterialButton,
+import MaterialButton, {
   ButtonProps as MaterialButtonProps,
-} from '@material-ui/core';
+} from '@material-ui/core/Button';
 import React from 'react';
 import { Link, LinkProps } from '../Link';
 

packages/core-components/src/components/Chip/Chip.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Chip } from '@material-ui/core';
+import Chip from '@material-ui/core/Chip';
 
 export default {
   title: 'Data Display/Chip',

packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import { CopyTextButton } from '../CopyTextButton';
 import { Progress } from '../Progress';

packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx

@@ -15,7 +15,8 @@
  */
 
 import { errorApiRef, useApi } from '@backstage/core-plugin-api';
-import { IconButton, Tooltip } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import CopyIcon from '@material-ui/icons/FileCopy';
 import React, { MouseEventHandler, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';

packages/core-components/src/components/CreateButton/CreateButton.tsx

@@ -15,7 +15,9 @@
  */
 
 import { BackstageTheme } from '@backstage/theme';
-import { Button, IconButton, useMediaQuery } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React from 'react';
 import { Link as RouterLink, LinkProps } from 'react-router-dom';
 import AddCircleOutline from '@material-ui/icons/AddCircleOutline';

packages/core-components/src/components/Dialog/Dialog.stories.tsx

@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Typography,
-} from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import React, { useState } from 'react';

packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx

@@ -16,7 +16,8 @@
 
 import React from 'react';
 import { DismissableBanner } from './DismissableBanner';
-import { Link, Typography } from '@material-ui/core';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
 import { ApiProvider, ApiRegistry, WebStorage } from '@backstage/core-app-api';
 import {
   ErrorApi,

packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx

@@ -18,7 +18,7 @@ import React, { ReactNode, useState, useEffect } from 'react';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import { useObservable } from 'react-use';
 import classNames from 'classnames';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import Snackbar from '@material-ui/core/Snackbar';
 import SnackbarContent from '@material-ui/core/SnackbarContent';

packages/core-components/src/components/Drawer/Drawer.stories.tsx

@@ -15,15 +15,11 @@
  */
 
 import React, { useState } from 'react';
-import {
-  Drawer,
-  Button,
-  Typography,
-  makeStyles,
-  IconButton,
-  createStyles,
-  Theme,
-} from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Drawer from '@material-ui/core/Drawer';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
 import Close from '@material-ui/icons/Close';
 
 export default {

packages/core-components/src/components/EmptyState/EmptyState.stories.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { EmptyState } from './EmptyState';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 import { MissingAnnotationEmptyState } from './MissingAnnotationEmptyState';
 
 export default {

packages/core-components/src/components/EmptyState/EmptyState.test.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { EmptyState } from './EmptyState';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
-import { Button } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
 
 describe('<EmptyState />', () => {
   it('render EmptyState component with type annotaion is missing', async () => {

packages/core-components/src/components/EmptyState/EmptyState.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { makeStyles, Typography, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 import { EmptyStateImage } from './EmptyStateImage';
 
 export type EmptyStateClassKey = 'root' | 'action' | 'imageContainer';

packages/core-components/src/components/EmptyState/EmptyStateImage.tsx

@@ -19,7 +19,7 @@ import missingAnnotation from './assets/missingAnnotation.svg';
 import noInformation from './assets/noInformation.svg';
 import createComponent from './assets/createComponent.svg';
 import noBuild from './assets/noBuild.svg';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 type Props = {
   missing: 'field' | 'info' | 'content' | 'data';

packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Button, makeStyles, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import { BackstageTheme } from '@backstage/theme';
 import { Link } from '../Link';
 import { EmptyState } from './EmptyState';

packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { List, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
 import React, { PropsWithChildren } from 'react';
 import { CopyTextButton } from '../CopyTextButton';
 import { WarningPanel } from '../WarningPanel';

packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx

@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { ClickAwayListener, makeStyles, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Typography from '@material-ui/core/Typography';
 import React, {
   PropsWithChildren,
   useCallback,

packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx

@@ -15,7 +15,7 @@
  */
 import React from 'react';
 import { IconLinkVertical, IconLinkVerticalProps } from './IconLinkVertical';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 export type HeaderIconLinkRowClassKey = 'links';
 

packages/core-components/src/components/HeaderIconLinkRow/IconLinkVertical.tsx

@@ -15,7 +15,8 @@
  */
 import React from 'react';
 import classnames from 'classnames';
-import { makeStyles, Link } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
 import LinkIcon from '@material-ui/icons/Link';
 import { Link as RouterLink } from '../Link';
 

packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { HorizontalScrollGrid } from './HorizontalScrollGrid';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 
 describe('<HorizontalScrollGrid />', () => {
   beforeEach(() => {

packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx

@@ -18,7 +18,9 @@ import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import { Grid, IconButton, makeStyles, Theme } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import IconButton from '@material-ui/core/IconButton';
 
 const generateGradientStops = (themeType: 'dark' | 'light') => {
   // 97% corresponds to the theme.palette.background.default for the light theme

packages/core-components/src/components/Lifecycle/Lifecycle.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import CSS from 'csstype';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 type Props = CSS.Properties & {
   shorthand?: boolean;

packages/core-components/src/components/Link/Link.tsx

@@ -15,10 +15,9 @@
  */
 
 import { useAnalytics } from '@backstage/core-plugin-api';
-import {
-  Link as MaterialLink,
+import MaterialLink, {
   LinkProps as MaterialLinkProps,
-} from '@material-ui/core';
+} from '@material-ui/core/Link';
 import React, { ElementType } from 'react';
 import {
   Link as RouterLink,

packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 import React from 'react';

packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
-import {
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  makeStyles,
-  Typography,
-  Theme,
-  Button,
-} from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import React, { useState } from 'react';
 import { PendingAuthRequest } from '@backstage/core-plugin-api';
 

packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx

@@ -14,16 +14,13 @@
  * limitations under the License.
  */
 
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  List,
-  makeStyles,
-  Theme,
-  Button,
-} from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import List from '@material-ui/core/List';
+import Button from '@material-ui/core/Button';
 import React, { useMemo, useState } from 'react';
 import { useObservable } from 'react-use';
 import LoginRequestListItem from './LoginRequestListItem';

packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Box } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
 import React from 'react';
 import { OverflowTooltip } from './OverflowTooltip';
 

packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, Tooltip, TooltipProps } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
 import React, { useState } from 'react';
 import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
 

packages/core-components/src/components/Progress/Progress.tsx

@@ -15,7 +15,9 @@
  */
 
 import React, { useState, useEffect, PropsWithChildren } from 'react';
-import { LinearProgress, LinearProgressProps } from '@material-ui/core';
+import LinearProgress, {
+  LinearProgressProps,
+} from '@material-ui/core/LinearProgress';
 
 export function Progress(props: PropsWithChildren<LinearProgressProps>) {
   const [isVisible, setIsVisible] = useState(false);

packages/core-components/src/components/ProgressBars/Gauge.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles, useTheme } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import { Circle } from 'rc-progress';
 import React from 'react';

packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx

@@ -16,7 +16,7 @@
 
 import React, { PropsWithChildren } from 'react';
 import { GaugeCard } from './GaugeCard';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import { MemoryRouter } from 'react-router';
 
 const linkInfo = { title: 'Go to XYZ Location', link: '#' };

packages/core-components/src/components/ProgressBars/GaugeCard.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { InfoCard, InfoCardVariants } from '../../layout/InfoCard';
 import { BottomLinkProps } from '../../layout/BottomLink';
 import { Gauge } from './Gauge';

packages/core-components/src/components/ProgressBars/LinearGauge.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Tooltip, useTheme } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
 // @ts-ignore
 import { Line } from 'rc-progress';
 import { BackstageTheme } from '@backstage/theme';

packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx

@@ -15,7 +15,10 @@
  */
 
 import { ResponseError } from '@backstage/errors';
-import { Divider, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
 import React from 'react';
 import { CodeSnippet } from '../CodeSnippet';
 import { CopyTextButton } from '../CopyTextButton';

packages/core-components/src/components/Select/Select.tsx

@@ -14,16 +14,14 @@
  * limitations under the License.
  */
 
-import {
-  Checkbox,
-  Chip,
-  ClickAwayListener,
-  FormControl,
-  InputBase,
-  MenuItem,
-  Select,
-  Typography,
-} from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
+import Chip from '@material-ui/core/Chip';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import FormControl from '@material-ui/core/FormControl';
+import InputBase from '@material-ui/core/InputBase';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Typography from '@material-ui/core/Typography';
 import {
   createStyles,
   makeStyles,

packages/core-components/src/components/Select/static/ClosedDropdown.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { SvgIcon, makeStyles, createStyles } from '@material-ui/core';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import SvgIcon from '@material-ui/core/SvgIcon';
 
 export type ClosedDropdownClassKey = 'icon';
 

packages/core-components/src/components/Select/static/OpenedDropdown.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { SvgIcon, makeStyles, createStyles } from '@material-ui/core';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import SvgIcon from '@material-ui/core/SvgIcon';
 
 export type OpenedDropdownClassKey = 'icon';
 

packages/core-components/src/components/SimpleStepper/SimpleStepper.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TextField } from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
 import React, { useState } from 'react';
 import { SimpleStepper } from './SimpleStepper';
 import { SimpleStepperStep } from './SimpleStepperStep';

packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx

@@ -20,7 +20,7 @@ import React, {
   useEffect,
   PropsWithChildren,
 } from 'react';
-import { Stepper as MuiStepper } from '@material-ui/core';
+import MuiStepper from '@material-ui/core/Stepper';
 
 type InternalState = {
   stepperLength: number;

packages/core-components/src/components/SimpleStepper/SimpleStepperFooter.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 import React, { useContext, ReactNode, PropsWithChildren } from 'react';
-import { Button, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import { StepActions } from './types';
 import { VerticalStepperContext } from './SimpleStepper';
 

packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 import React, { PropsWithChildren } from 'react';
-import {
-  Step as MuiStep,
-  StepContent,
-  StepLabel,
-  Typography,
-  makeStyles,
-} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import MuiStep from '@material-ui/core/Step';
+import StepContent from '@material-ui/core/StepContent';
+import StepLabel from '@material-ui/core/StepLabel';
+import Typography from '@material-ui/core/Typography';
 import { SimpleStepperFooter } from './SimpleStepperFooter';
 import { StepProps } from './types';
 

packages/core-components/src/components/Status/Status.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';

packages/core-components/src/components/StructuredMetadataTable/MetadataTable.tsx

@@ -16,15 +16,15 @@
 
 import React from 'react';
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
   withStyles,
   createStyles,
   WithStyles,
   Theme,
-} from '@material-ui/core';
+} from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableRow from '@material-ui/core/TableRow';
 
 export type MetadataTableTitleCellClassKey = 'root';
 

packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx

@@ -15,7 +15,7 @@
  */
 import React, { PropsWithChildren } from 'react';
 import { InfoCard } from '../../layout/InfoCard';
-import { Grid } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
 import { StructuredMetadataTable } from './StructuredMetadataTable';
 
 const cardContentStyle = { heightX: 200, width: 500 };

packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx

@@ -15,7 +15,12 @@
  */
 
 import React, { Fragment, ReactElement } from 'react';
-import { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core';
+import {
+  withStyles,
+  createStyles,
+  WithStyles,
+  Theme,
+} from '@material-ui/core/styles';
 import startCase from 'lodash/startCase';
 
 import {

packages/core-components/src/components/SupportButton/SupportButton.tsx

@@ -16,20 +16,18 @@
 
 import { useApp } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import {
-  Box,
-  Button,
-  DialogActions,
-  IconButton,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  makeStyles,
-  Popover,
-  Typography,
-  useMediaQuery,
-} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import DialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
 import React, { MouseEventHandler, useState } from 'react';
 import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks';
 import { HelpIcon } from '../../icons';

packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx

@@ -23,7 +23,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { RoutedTabs } from './RoutedTabs';
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 
 type SubRoute = {
   path: string;

packages/core-components/src/components/TabbedLayout/types.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { TabProps } from '@material-ui/core';
+import { TabProps } from '@material-ui/core/Tab';
 import * as React from 'react';
 
 export type SubRoute = {

packages/core-components/src/components/Table/Filters.tsx

@@ -16,7 +16,8 @@
 
 import React, { useEffect, useState } from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { Button, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import { Select } from '../Select';
 import { SelectProps } from '../Select/Select';
 

packages/core-components/src/components/Table/SubvalueCell.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 export type SubvalueCellClassKey = 'value' | 'subvalue';
 

packages/core-components/src/components/Table/Table.stories.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { Link } from '../Link';
 import { SubvalueCell, Table, TableColumn } from '.';

packages/core-components/src/components/Table/Table.tsx

@@ -15,13 +15,9 @@
  */
 
 import { BackstageTheme } from '@backstage/theme';
-import {
-  IconButton,
-  makeStyles,
-  Typography,
-  useTheme,
-  withStyles,
-} from '@material-ui/core';
+import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
 // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51
 import AddBox from '@material-ui/icons/AddBox';
 import ArrowUpward from '@material-ui/icons/ArrowUpward';

packages/core-components/src/components/Tabs/Tab.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Tab, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Tab from '@material-ui/core/Tab';
 import { BackstageTheme } from '@backstage/theme';
 
 interface StyledTabProps {

packages/core-components/src/components/Tabs/TabBar.tsx

@@ -15,7 +15,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { Tabs, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Tabs from '@material-ui/core/Tabs';
 import { BackstageTheme } from '@backstage/theme';
 
 interface StyledTabsProps {

packages/core-components/src/components/Tabs/TabIcon.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { IconButton, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
 import { BackstageTheme } from '@backstage/theme';
 
 interface StyledIconProps {

packages/core-components/src/components/Tabs/Tabs.tsx

@@ -16,7 +16,7 @@
 
 import React, { useRef, useEffect, MutableRefObject, useState } from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { AppBar } from '@material-ui/core';
+import AppBar from '@material-ui/core/AppBar';
 import { makeStyles } from '@material-ui/core/styles';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';

packages/core-components/src/components/TrendLine/TrendLine.tsx

@@ -21,7 +21,7 @@ import {
   SparklinesLineProps,
   SparklinesProps,
 } from 'react-sparklines';
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 
 function color(data: number[], theme: BackstageTheme): string | undefined {

packages/core-components/src/components/WarningPanel/WarningPanel.stories.tsx

@@ -16,7 +16,9 @@
 
 import React from 'react';
 import { WarningPanel } from './WarningPanel';
-import { Button, Link, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
 
 export default {
   title: 'Feedback/Warning Panel',

packages/core-components/src/components/WarningPanel/WarningPanel.test.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 
 import { WarningPanel, WarningProps } from './WarningPanel';
 

packages/core-components/src/components/WarningPanel/WarningPanel.tsx

@@ -14,16 +14,12 @@
  * limitations under the License.
  */
 import { BackstageTheme } from '@backstage/theme';
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Grid,
-  makeStyles,
-  Typography,
-  darken,
-  lighten,
-} from '@material-ui/core';
+import { makeStyles, darken, lighten } from '@material-ui/core/styles';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React from 'react';

packages/core-components/src/layout/BottomLink/BottomLink.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Divider, Typography, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Divider from '@material-ui/core/Divider';
+import Typography from '@material-ui/core/Typography';
 import ArrowIcon from '@material-ui/icons/ArrowForward';
 import { BackstageTheme } from '@backstage/theme';
 import Box from '@material-ui/core/Box';

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -13,7 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Box, List, ListItem, Popover, Typography } from '@material-ui/core';
+
+import Box from '@material-ui/core/Box';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import React, { Fragment } from 'react';

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import { fireEvent } from '@testing-library/react';
 import React from 'react';
 import { Link } from '../../components/Link';

packages/core-components/src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -14,15 +14,13 @@
  * limitations under the License.
  */
 
-import {
-  Box,
-  Breadcrumbs as MaterialBreadcrumbs,
-  List,
-  ListItem,
-  Popover,
-  Typography,
-  withStyles,
-} from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import React, { ComponentProps, Fragment } from 'react';
 
 type Props = ComponentProps<typeof MaterialBreadcrumbs>;

packages/core-components/src/layout/Content/Content.tsx

@@ -16,7 +16,7 @@
 
 import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
-import { Theme, makeStyles } from '@material-ui/core';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 
 export type BackstageContentClassKey = 'root' | 'stretch' | 'noPadding';
 

packages/core-components/src/layout/ContentHeader/ContentHeader.tsx

@@ -19,7 +19,8 @@
  */
 
 import React, { PropsWithChildren, ReactNode } from 'react';
-import { Typography, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import { Helmet } from 'react-helmet';
 
 export type ContentHeaderClassKey =

packages/core-components/src/layout/ErrorPage/ErrorPage.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Typography, Link, Grid } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import Link from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import { BackstageTheme } from '@backstage/theme';
 import { MicDrop } from './MicDrop';

packages/core-components/src/layout/ErrorPage/MicDrop.tsx

@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import MicDropSvgUrl from './mic-drop.svg';
 
 const useStyles = makeStyles(

packages/core-components/src/layout/Header/Header.tsx

@@ -16,7 +16,11 @@
 
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import { Box, Grid, makeStyles, Tooltip, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Grid from '@material-ui/core/Grid';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from '../../components/Link';

packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -15,15 +15,14 @@
  */
 
 import React, { Fragment, ReactElement, ComponentType } from 'react';
-import {
-  IconButton,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Popover,
+import IconButton from '@material-ui/core/IconButton';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText, {
   ListItemTextProps,
-} from '@material-ui/core';
+} from '@material-ui/core/ListItemText';
+import Popover from '@material-ui/core/Popover';
 import { VerticalMenuIcon } from './VerticalMenuIcon';
 
 type ActionItemProps = {

packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { Link, makeStyles, Typography, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 import React from 'react';
 
 export type HeaderLabelClassKey = 'root' | 'label' | 'value';

packages/core-components/src/layout/HeaderTabs/HeaderTabs.test.tsx

@@ -17,7 +17,8 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { HeaderTabs } from '.';
-import { Badge, makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
 
 const mockTabs = [
   { id: 'overview', label: 'Overview' },

packages/core-components/src/layout/HeaderTabs/HeaderTabs.tsx

@@ -18,7 +18,9 @@
 // This is just a temporary solution to implementing tabs for now
 
 import React, { useState, useEffect } from 'react';
-import { makeStyles, Tabs, Tab as TabUI, TabProps } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import TabUI, { TabProps } from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
 
 export type HeaderTabsClassKey =
   | 'tabsWrapper'

packages/core-components/src/layout/HomepageTimer/HomepageTimer.test.tsx

@@ -18,7 +18,7 @@ import { renderWithEffects } from '@backstage/test-utils';
 import { HomepageTimer } from './HomepageTimer';
 import React from 'react';
 import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core/styles';
 import {
   ApiProvider,
   ApiRegistry,

packages/core-components/src/layout/InfoCard/InfoCard.stories.tsx

@@ -13,7 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, Typography } from '@material-ui/core';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React, { PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router';
 import { InfoCard } from './InfoCard';

packages/core-components/src/layout/InfoCard/InfoCard.tsx

@@ -15,16 +15,12 @@
  */
 
 import React, { ReactNode } from 'react';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardHeaderProps,
-  Divider,
-  withStyles,
-  makeStyles,
-} from '@material-ui/core';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardHeader, { CardHeaderProps } from '@material-ui/core/CardHeader';
+import Divider from '@material-ui/core/Divider';
 import classNames from 'classnames';
 import { ErrorBoundary, ErrorBoundaryProps } from '../ErrorBoundary';
 import { BottomLink, BottomLinkProps } from '../BottomLink';

packages/core-components/src/layout/ItemCard/ItemCard.stories.tsx

@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { Button } from '../../components';

packages/core-components/src/layout/ItemCard/ItemCard.tsx

@@ -13,14 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  Box,
-  Card,
-  CardActions,
-  CardContent,
-  CardMedia,
-  Chip,
-} from '@material-ui/core';
+
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Chip from '@material-ui/core/Chip';
 import React, { ReactNode } from 'react';
 import { Button } from '../../components';
 import { ItemCardHeader } from './ItemCardHeader';

packages/core-components/src/layout/ItemCard/ItemCardGrid.test.tsx

@@ -15,7 +15,7 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import { Card } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { ItemCardGrid } from './ItemCardGrid';

packages/core-components/src/layout/ItemCard/ItemCardGrid.tsx

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { createStyles, makeStyles, Theme, WithStyles } from '@material-ui/core';
+import {
+  createStyles,
+  makeStyles,
+  Theme,
+  WithStyles,
+} from '@material-ui/core/styles';
 import React from 'react';
 
 export type ItemCardGridClassKey = 'root';

packages/core-components/src/layout/ItemCard/ItemCardHeader.test.tsx

@@ -15,7 +15,8 @@
  */
 
 import { renderInTestApp } from '@backstage/test-utils';
-import { Card, CardMedia } from '@material-ui/core';
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
 import { screen } from '@testing-library/react';
 import React from 'react';
 import { ItemCardHeader } from './ItemCardHeader';

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 
-import {
-  createStyles,
-  makeStyles,
-  Typography,
-  WithStyles,
-} from '@material-ui/core';
+import { createStyles, makeStyles, WithStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { BackstageTheme } from '@backstage/theme';
 

packages/core-components/src/layout/Page/Page.stories.tsx

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { Box, Chip, Grid, Link, Typography } from '@material-ui/core';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 import { MemoryRouter } from 'react-router';
 import { createApp } from '@backstage/core-app-api';

packages/core-components/src/layout/Page/Page.tsx

@@ -16,7 +16,7 @@
 
 import React, { PropsWithChildren } from 'react';
 import { BackstageTheme } from '@backstage/theme';
-import { makeStyles, ThemeProvider } from '@material-ui/core';
+import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
 
 export type PageClassKey = 'root';
 

packages/core-components/src/layout/Sidebar/Bar.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { makeStyles, useMediaQuery } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import clsx from 'clsx';
 import React, { useRef, useState, useContext, PropsWithChildren } from 'react';
 import { sidebarConfig, SidebarContext } from './config';

packages/core-components/src/layout/Sidebar/Intro.tsx

@@ -16,7 +16,10 @@
 
 import React, { useContext, useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { Link, Typography, makeStyles, Collapse } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import Collapse from '@material-ui/core/Collapse';
 import CloseIcon from '@material-ui/icons/Close';
 import { BackstageTheme } from '@backstage/theme';
 import {

packages/core-components/src/layout/Sidebar/Items.test.tsx

@@ -23,7 +23,7 @@ import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { Sidebar } from './Bar';
 import { SidebarItem } from './Items';
 import { renderHook } from '@testing-library/react-hooks';
-import { hexToRgb, makeStyles } from '@material-ui/core';
+import { hexToRgb, makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   spotlight: {

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -16,14 +16,10 @@
 
 import { IconComponent } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
-import {
-  Badge,
-  makeStyles,
-  styled,
-  TextField,
-  Theme,
-  Typography,
-} from '@material-ui/core';
+import { makeStyles, styled, Theme } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
 import { CreateCSSProperties } from '@material-ui/core/styles/withStyles';
 import SearchIcon from '@material-ui/icons/Search';
 import clsx from 'clsx';

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React, {
   createContext,
   PropsWithChildren,

packages/core-components/src/layout/SignInPage/SignInPage.tsx

@@ -20,7 +20,9 @@ import {
   SignInPageProps,
   useApi,
 } from '@backstage/core-plugin-api';
-import { Button, Grid, Typography } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 import { useMount } from 'react-use';
 import { Progress } from '../../components/Progress';

packages/core-components/src/layout/SignInPage/auth0Provider.tsx

@@ -15,7 +15,9 @@
  */
 
 import React from 'react';
-import { Grid, Typography, Button } from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import { InfoCard } from '../InfoCard/InfoCard';
 import { ProviderComponent, ProviderLoader, SignInProvider } from './types';
 import {

packages/core-components/src/layout/SignInPage/commonProvider.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Typography, Button } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import { InfoCard } from '../InfoCard/InfoCard';
 import {
   ProviderComponent,

packages/core-components/src/layout/SignInPage/customProvider.tsx

@@ -16,14 +16,12 @@
 
 import React from 'react';
 import { useForm, UseFormRegisterReturn } from 'react-hook-form';
-import {
-  Typography,
-  Button,
-  FormControl,
-  TextField,
-  FormHelperText,
-  makeStyles,
-} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import isEmpty from 'lodash/isEmpty';
 import { InfoCard } from '../InfoCard/InfoCard';
 import { ProviderComponent, ProviderLoader, SignInProvider } from './types';

packages/core-components/src/layout/SignInPage/guestProvider.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import { Typography, Button } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 import { InfoCard } from '../InfoCard/InfoCard';
 import { GridItem } from './styles';
 import { ProviderComponent, ProviderLoader, SignInProvider } from './types';