Feature/use second level mui imports (#743)

* Require "Theme" to be passed to "SxProps"

Decreases typescript performance otherwise

* Disallow "top" and "third-level" MUI imports

* Exclude "node_modules" in tsconfig

.eslintrc.js

@@ -1,6 +1,13 @@
 module.exports = {
     extends: ['airbnb', 'airbnb-typescript', 'prettier'],
-    plugins: ['unused-imports', 'eslint-plugin-import', '@typescript-eslint', 'no-relative-import-paths', 'prettier', 'header'],
+    plugins: [
+        'unused-imports',
+        'eslint-plugin-import',
+        '@typescript-eslint',
+        'no-relative-import-paths',
+        'prettier',
+        'header',
+    ],
     parserOptions: {
         project: ['./tsconfig.json', './tsconfig.node.json', './tools/scripts/tsconfig.json'],
     },
@@ -61,6 +68,28 @@ module.exports = {
                         prefix: '@',
                     },
                 ],
+
+                'no-restricted-imports': [
+                    'error',
+                    {
+                        patterns: [
+                            {
+                                group: ['@mui/*', '!@mui/material/', '!@mui/icons-material/', '!@mui/x-date-pickers/'],
+                            },
+                            {
+                                group: ['@mui/*/*/*'],
+                            },
+                        ],
+                    },
+                ],
+
+                'no-restricted-syntax': [
+                    'error',
+                    {
+                        selector: 'TSTypeReference[typeName.name="SxProps"]:not([typeParameters])',
+                        message: 'SxProps must have Theme parameter to avoid significant compiler slowdown.',
+                    },
+                ],
             },
         },
         {

src/App.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Container } from '@mui/material';
+import Container from '@mui/material/Container';
 import CssBaseline from '@mui/material/CssBaseline';
 import React, { useLayoutEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';

src/components/ExtensionCard.tsx

@@ -12,7 +12,7 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 import { PartialExtension, TranslationKey } from '@/typings';
 import { requestManager } from '@/lib/requests/RequestManager.ts';

src/components/MangaGrid.tsx

@@ -8,7 +8,8 @@
 
 import React, { ForwardedRef, forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Grid, { GridTypeMap } from '@mui/material/Grid';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import { GridItemProps, GridStateSnapshot, VirtuosoGrid } from 'react-virtuoso';
 import { useLocation } from 'react-router-dom';
 import { EmptyView } from '@/components/util/EmptyView';

src/components/MigrateDialog.tsx

@@ -12,7 +12,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { useState } from 'react';
 import FormGroup from '@mui/material/FormGroup';

src/components/MigrationCard.tsx

@@ -8,7 +8,9 @@
 
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import { Box, CardActionArea, Chip } from '@mui/material';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import Chip from '@mui/material/Chip';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';

src/components/SourceCard.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CardActionArea, Box, styled } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';

src/components/atoms/CheckboxInput.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Checkbox, CheckboxProps, FormControlLabel } from '@mui/material';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 
 interface IProps extends CheckboxProps {

src/components/atoms/CustomIconButton.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, ButtonProps, Stack, TypographyProps } from '@mui/material';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { TypographyProps } from '@mui/material/Typography';
 
 export const CustomIconButton = <C extends React.ElementType>({
     children,

src/components/atoms/PasswordTextField.tsx

@@ -6,11 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { InputAdornment, TextFieldProps } from '@mui/material';
-import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { useTranslation } from 'react-i18next';
 
 export const PasswordTextField = (props: TextFieldProps) => {

src/components/atoms/RadioInput.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { FormControlLabel, Radio, RadioProps } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio, { RadioProps } from '@mui/material/Radio';
 import React from 'react';
 
 export interface RadioInputProps extends RadioProps {

src/components/atoms/SearchTextField.tsx

@@ -6,8 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import TextField from '@mui/material/TextField';
-import { IconButton, InputAdornment, TextFieldProps } from '@mui/material';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
 import CancelIcon from '@mui/icons-material/Cancel';
 
 export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (

src/components/atoms/Select.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Select as MuiSelect } from '@mui/material';
+import MuiSelect from '@mui/material/Select';
 
 export const Select = <Value,>({
     children,

src/components/atoms/ThreeStateCheckbox.tsx

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { DisabledByDefaultRounded } from '@mui/icons-material';
-import { Checkbox, CheckboxProps } from '@mui/material';
+import DisabledByDefaultRounded from '@mui/icons-material/DisabledByDefaultRounded';
+import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 import React, { useCallback } from 'react';
 
 type CheckState = boolean | undefined | null;

src/components/atoms/ThreeStateCheckboxInput.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { FormControlLabel } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 import { ThreeStateCheckbox, ThreeStateCheckboxProps } from '@/components/atoms/ThreeStateCheckbox';
 

src/components/atoms/TypographyMaxLines.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { Typography, TypographyProps } from '@mui/material';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 
 export const TypographyMaxLines = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'lines',

src/components/chapter/ChapterCard.tsx

@@ -8,7 +8,10 @@
 
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { CardActionArea, Checkbox, Stack, Tooltip } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
+import Checkbox from '@mui/material/Checkbox';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';

src/components/chapter/ChapterList.tsx

@@ -6,7 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box, CircularProgress, Stack, styled, Tooltip } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 import React, { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';

src/components/chapter/ChapterOptions.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { RadioGroup } from '@mui/material';
+import RadioGroup from '@mui/material/RadioGroup';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChapterListOptions, ChapterOptionsReducerAction, TranslationKey } from '@/typings.ts';

src/components/chapter/ChaptersToolbarMenu.tsx

@@ -7,7 +7,8 @@
  */
 
 import FilterList from '@mui/icons-material/FilterList';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings.ts';

src/components/collection/SelectableCollectionSelectAll.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Tooltip } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { useTranslation } from 'react-i18next';
 

src/components/collection/SelectableCollectionSelectMode.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Tooltip } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import { useTranslation } from 'react-i18next';
 import ClearIcon from '@mui/icons-material/Clear';

src/components/collection/SelectionFAB.tsx

@@ -7,7 +7,9 @@
  */
 
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
-import { Fab, Box, styled } from '@mui/material';
+import Fab from '@mui/material/Fab';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';

src/components/library/LibraryOptionsPanel.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { FormLabel, RadioGroup } from '@mui/material';
+import FormLabel from '@mui/material/FormLabel';
+import RadioGroup from '@mui/material/RadioGroup';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { LibraryOptions, LibrarySortMode, TranslationKey } from '@/typings';

src/components/library/LibraryToolbarMenu.tsx

@@ -7,7 +7,8 @@
  */
 
 import FilterList from '@mui/icons-material/FilterList';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';

src/components/library/UpdateChecker.tsx

@@ -10,7 +10,7 @@ import { useEffect, useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/components/util/Toast';
 import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';

src/components/manga/ContinueReadingButton.tsx

@@ -7,7 +7,8 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 
 import { Link } from 'react-router-dom';

src/components/manga/MangaActionMenuItems.tsx

@@ -18,7 +18,7 @@ import { useMemo, useState } from 'react';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { Link } from 'react-router-dom';
 import SyncIcon from '@mui/icons-material/Sync';
-import { Dialog } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
 import { TManga } from '@/typings.ts';
 import { actionToTranslationKey, MangaAction, MangaDownloadInfo, Mangas, MangaUnreadInfo } from '@/lib/data/Mangas.ts';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';

src/components/manga/MangaBadges.tsx

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import styled from '@mui/material/styles/styled';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import Button from '@mui/material/Button/Button';
-import Typography from '@mui/material/Typography/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
 import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
 

src/components/manga/MangaDetails.tsx

@@ -13,7 +13,7 @@ import { styled } from '@mui/material/styles';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
-import { Link } from '@mui/material';
+import Link from '@mui/material/Link';
 import { ISource, TManga } from '@/typings';
 import { makeToast } from '@/components/util/Toast';
 import { Mangas } from '@/lib/data/Mangas.ts';

src/components/manga/MangaGridCard.tsx

@@ -6,14 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Link from '@mui/material/Link/Link';
+import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
-import Box from '@mui/material/Box/Box';
-import Card from '@mui/material/Card/Card';
-import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
-import Stack from '@mui/material/Stack/Stack';
-import Tooltip from '@mui/material/Tooltip/Tooltip';
-import styled from '@mui/material/styles/styled';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import { isMobile } from 'react-device-detect';
 import { useRef } from 'react';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';

src/components/manga/MangaListCard.tsx

@@ -6,13 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Card from '@mui/material/Card/Card';
-import CardContent from '@mui/material/CardContent/CardContent';
-import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
-import Avatar from '@mui/material/Avatar/Avatar';
-import Box from '@mui/material/Box/Box';
-import Stack from '@mui/material/Stack/Stack';
-import Tooltip from '@mui/material/Tooltip/Tooltip';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 import { isMobile } from 'react-device-detect';
 import { Link as RouterLink } from 'react-router-dom';
 import { useRef } from 'react';

src/components/manga/MangaOptionButton.tsx

@@ -8,7 +8,8 @@
 
 import { useTranslation } from 'react-i18next';
 import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
-import { Button, Tooltip } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';

src/components/manga/MangaToolbarMenu.tsx

@@ -9,20 +9,18 @@
 import Label from '@mui/icons-material/Label';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import Refresh from '@mui/icons-material/Refresh';
-import {
-    IconButton,
-    ListItemIcon,
-    ListItemText,
-    Menu,
-    MenuItem,
-    Tooltip,
-    useMediaQuery,
-    useTheme,
-} from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { TManga } from '@/typings.ts';
 import { useCategorySelect } from '@/components/navbar/action/useCategorySelect.tsx';
 

src/components/manga/ResumeFAB.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Link } from 'react-router-dom';
-import { PlayArrow } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
 import { useTranslation } from 'react-i18next';
 import { StyledFab } from '@/components/util/StyledFab';
 

src/components/menu/Menu.tsx

@@ -6,8 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MenuProps } from '@mui/material/Menu/Menu';
-import { Menu as MuiMenu } from '@mui/material';
+import MuiMenu, { MenuProps } from '@mui/material/Menu';
 import { useState } from 'react';
 
 export const Menu = ({

src/components/menu/MenuItem.tsx

@@ -6,9 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ListItemIcon, ListItemText, MenuItem as MuiMenuItem, MenuItemProps } from '@mui/material';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MuiMenuItem, { MenuItemProps } from '@mui/material/MenuItem';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 
 interface IProps extends MenuItemProps {
     title: string;

src/components/molecules/ConfirmDialog.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Dialog from '@mui/material/Dialog/Dialog';
-import DialogActions from '@mui/material/DialogActions/DialogActions';
-import DialogContent from '@mui/material/DialogContent/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import { useTranslation } from 'react-i18next';
-import Button from '@mui/material/Button/Button';
+import Button from '@mui/material/Button';
 
 type Action = {
     show?: boolean;

src/components/molecules/DownloadStateIndicator.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CircularProgress, Box } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

src/components/molecules/OptionsPanel.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Drawer, Box } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
+import Box from '@mui/material/Box';
 import React from 'react';
 
 interface IProps {

src/components/molecules/OptionsTabs.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Stack, Tab, Tabs } from '@mui/material';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import React, { useState } from 'react';
 import { TabPanel } from '@/components/tabs/TabPanel.tsx';
 import { OptionsPanel } from '@/components/molecules/OptionsPanel';

src/components/navbar/DefaultNavBar.tsx

@@ -11,7 +11,8 @@ import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import { Box, useMediaQuery } from '@mui/material';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';

src/components/navbar/ReaderNavBar.tsx

@@ -18,7 +18,11 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
-import { Divider, FormControl, MenuItem, styled, Tooltip } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';

src/components/navbar/action/CategorySelect.tsx

@@ -15,7 +15,7 @@ import Dialog from '@mui/material/Dialog';
 import FormGroup from '@mui/material/FormGroup';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/lib/data/Mangas.ts';
 import { useSelectableCollection } from '@/components/collection/useSelectableCollection.ts';

src/components/navbar/action/LangSelect.tsx

@@ -15,7 +15,9 @@ import Dialog from '@mui/material/Dialog';
 import Switch from '@mui/material/Switch';
 import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { List, ListItemText, Tooltip } from '@mui/material';
+import List from '@mui/material/List';
+import ListItemText from '@mui/material/ListItemText';
+import Tooltip from '@mui/material/Tooltip';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
 import { cloneObject } from '@/util/cloneObject';

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -6,9 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ListItemIcon, Tooltip, styled, ListItemButton } from '@mui/material';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Tooltip from '@mui/material/Tooltip';
+import ListItemButton from '@mui/material/ListItemButton';
+import { styled, useTheme } from '@mui/material/styles';
 import { Link, useLocation } from 'react-router-dom';
-import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { NavbarItem } from '@/typings';
 

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -6,9 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled, Box, ListItemButton } from '@mui/material';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
+import { styled, useTheme } from '@mui/material/styles';
 import { Link as RRDLink, useLocation } from 'react-router-dom';
-import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { NavbarItem } from '@/typings';
 

src/components/reader/DoublePage.tsx

@@ -7,7 +7,7 @@
  */
 
 import { CSSProperties, forwardRef } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderSettings } from '@/typings';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
 import { imageStyle } from '@/components/reader/Page';

src/components/reader/Page.tsx

@@ -9,7 +9,7 @@
 import { CSSProperties, forwardRef } from 'react';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
-import { useMediaQuery } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { IReaderSettings, ReaderType } from '@/typings';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
 

src/components/reader/PageNumber.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderSettings } from '@/typings';
 
 interface IProps {

src/components/reader/ReaderSettingsOptions.tsx

@@ -6,7 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
 import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';
 import { AllowedMetadataValueTypes, IReaderSettings } from '@/typings';

src/components/reader/pager/DoublePagedPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import { MouseEvent, useEffect, useRef, useState } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
 import { DoublePage } from '@/components/reader/DoublePage';

src/components/reader/pager/HorizontalPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import { MouseEvent as ReactMouseEvent, useEffect, useLayoutEffect, useRef } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
 

src/components/reader/pager/PagedPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import { MouseEvent, useEffect, useRef } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
 import { requestManager } from '@/lib/requests/RequestManager.ts';

src/components/reader/pager/VerticalPager.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { IReaderProps } from '@/typings';
 import { Page } from '@/components/reader/Page';
 

src/components/settings/DateSetting.tsx

@@ -6,7 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, Dialog, DialogTitle, ListItemText, Stack } from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import ListItemButton from '@mui/material/ListItemButton';

src/components/settings/DeviceSetting.tsx

@@ -6,7 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { List, ListItem, ListItemText, MenuItem } from '@mui/material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
 import { useTranslation } from 'react-i18next';
 import { useContext, useEffect } from 'react';
 import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';

src/components/settings/MutableListSetting.tsx

@@ -6,17 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
-    Button,
-    Dialog,
-    DialogTitle,
-    ListItem,
-    ListItemButton,
-    ListItemText,
-    Stack,
-    Tooltip,
-    Typography,
-} from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useEffect, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';

src/components/settings/NumberSetting.tsx

@@ -10,7 +10,10 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import TextField from '@mui/material/TextField';
-import { InputAdornment, ListItemText, Stack, SxProps, Typography, Theme } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useCallback, useState } from 'react';
@@ -21,6 +24,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Slider from '@mui/material/Slider';
 import DialogContentText from '@mui/material/DialogContentText';
 import InfoIcon from '@mui/icons-material/Info';
+import { SxProps, Theme } from '@mui/material/styles';
 
 type BaseProps = {
     settingTitle: string;

src/components/settings/SelectSetting.tsx

@@ -6,7 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, Dialog, DialogTitle, FormControl, ListItemText, MenuItem, Stack, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControl from '@mui/material/FormControl';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import ListItemButton from '@mui/material/ListItemButton';

src/components/settings/TimeSetting.tsx

@@ -6,7 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, Dialog, DialogTitle, ListItemText } from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import ListItemText from '@mui/material/ListItemText';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import ListItemButton from '@mui/material/ListItemButton';

src/components/settings/downloads/DownloadAheadSetting.tsx

@@ -7,7 +7,10 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/util/usePersistedValue.tsx';
 import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';

src/components/settings/globalUpdate/CheckboxContainer.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 export const CheckboxContainer = styled('div')({
     display: 'flex',

src/components/settings/globalUpdate/GlobalUpdateSettings.tsx

@@ -9,7 +9,9 @@
 import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
 import { useTranslation } from 'react-i18next';
-import { ListItem, ListItemText, Switch } from '@mui/material';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { GlobalUpdateSettingsEntries } from '@/components/settings/globalUpdate/GlobalUpdateSettingsEntries.tsx';
 import { GlobalUpdateSettingsInterval } from '@/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx';

src/components/settings/globalUpdate/GlobalUpdateSettingsEntries.tsx

@@ -11,7 +11,11 @@ import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import { ServerSettings, TranslationKey } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/components/util/Toast.tsx';

src/components/settings/globalUpdate/GlobalUpdateSettingsInterval.tsx

@@ -7,7 +7,10 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';

src/components/settings/text/TextSetting.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ListItemText } from '@mui/material';
+import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

src/components/settings/text/TextSettingDialog.tsx

@@ -6,7 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Button, Dialog, DialogTitle } from '@mui/material';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';

src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx

@@ -7,7 +7,10 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { List, ListItem, ListItemText, Switch } from '@mui/material';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
 import { useCallback } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';

src/components/source/GridLayouts.tsx

@@ -6,7 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { IconButton, Menu, MenuItem, FormControlLabel, Radio, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { useTranslation } from 'react-i18next';

src/components/source/SourceOptions.tsx

@@ -7,7 +7,9 @@
  */
 
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { Button, Stack, Box } from '@mui/material';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SourceFilters } from '@/typings';

src/components/source/filters/GroupFilter.tsx

@@ -6,8 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Collapse from '@mui/material/Collapse';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import React from 'react';
 // eslint-disable-next-line import/no-cycle
 import { SourceFilters } from '@/typings';

src/components/source/filters/HeaderFilter.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import React from 'react';
 
 interface Props {

src/components/source/filters/SeparatorFilter.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Divider } from '@mui/material';
+import Divider from '@mui/material/Divider';
 import React from 'react';
 
 interface Props {

src/components/source/filters/SortFilter.tsx

@@ -6,8 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { Collapse, ListItemButton, ListItemText, Stack, Box } from '@mui/material';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Collapse from '@mui/material/Collapse';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
 import React from 'react';
 import { SortRadioInput } from '@/components/atoms/SortRadioInput';
 import { SortSelectionInput } from '@/lib/graphql/generated/graphql.ts';

src/components/source/filters/TextFilter.tsx

@@ -7,7 +7,10 @@
  */
 
 import SearchIcon from '@mui/icons-material/Search';
-import { FormControl, Input, InputAdornment, InputLabel } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
 import React, { useEffect } from 'react';
 import { useDebounce } from '@/util/useDebounce.ts';
 

src/components/sourceConfiguration/EditTextPreference.tsx

@@ -16,7 +16,7 @@ import DialogActions from '@mui/material/DialogActions';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { ListItemButton } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
 import { EditTextPreferenceProps } from '@/typings';
 
 export function EditTextPreference(props: EditTextPreferenceProps) {

src/components/sourceConfiguration/ListPreference.tsx

@@ -17,7 +17,7 @@ import Radio from '@mui/material/Radio';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { ListItemButton } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
 import { ListPreferenceProps } from '@/typings';
 
 interface IListDialogProps {

src/components/sourceConfiguration/MultiSelectListPreference.tsx

@@ -17,7 +17,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { ListItemButton } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
 import { MultiSelectListPreferenceProps } from '@/typings';
 import { cloneObject } from '@/util/cloneObject';
 

src/components/tabs/TabsMenu.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled, Tabs, TabsProps } from '@mui/material';
+import Tabs, { TabsProps } from '@mui/material/Tabs';
+import { styled } from '@mui/material/styles';
 
 const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
     display: 'flex',

src/components/tabs/TabsWrapper.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box, styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 
 export const TabsWrapper = styled(Box)(({ theme }) => ({
     // TabsMenu height + TabsMenu bottom padding - grid item top padding

src/components/tracker/SettingsTrackerCard.tsx

@@ -10,7 +10,9 @@ import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 import PopupState, { bindDialog, bindTrigger } from 'material-ui-popup-state';
 import ListItemButton from '@mui/material/ListItemButton';
-import { Chip, ListItemAvatar, ListItemSecondaryAction } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';

src/components/tracker/TrackManga.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useNavigate } from 'react-router-dom';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { useEffect, useMemo, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';

src/components/tracker/TrackerActiveCard.tsx

@@ -10,23 +10,21 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Avatar from '@mui/material/Avatar';
 import { useTranslation } from 'react-i18next';
-import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    FormGroup,
-    IconButton,
-    Link,
-    ListItemButton,
-    MenuItem,
-    Stack,
-    Tooltip,
-    Typography,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import FormGroup from '@mui/material/FormGroup';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import ListItemButton from '@mui/material/ListItemButton';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useMemo, useState } from 'react';

src/components/tracker/TrackerMangaCard.tsx

@@ -10,21 +10,19 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import {
-    Box,
-    CardActionArea,
-    CardMedia,
-    Collapse,
-    Link,
-    Stack,
-    Tooltip,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardMedia from '@mui/material/CardMedia';
+import Collapse from '@mui/material/Collapse';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useLayoutEffect, useRef, useState } from 'react';
 import parseHtml from 'html-react-parser';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { TrackerManga } from '@/lib/data/Trackers.ts';
 import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';

src/components/tracker/TrackerSearch.tsx

@@ -8,7 +8,8 @@
 
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { List, Stack } from '@mui/material';
+import List from '@mui/material/List';
+import Stack from '@mui/material/Stack';
 import { useEffect, useMemo, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import ArrowBack from '@mui/icons-material/ArrowBack';

src/components/tracker/TrackerUntrackedCard.tsx

@@ -11,7 +11,7 @@ import CardContent from '@mui/material/CardContent';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { TBaseTracker } from '@/lib/data/Trackers.ts';
 import { CARD_STYLING } from '@/components/tracker/constants.ts';

src/components/tracker/constants.ts

@@ -6,17 +6,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
 
 export const DIALOG_PADDING: number = 2;
 
-export const CARD_BACKGROUND: SxProps = {
+export const CARD_BACKGROUND: SxProps<Theme> = {
     backgroundColor: 'transparent',
     boxShadow: 'unset',
     backgroundImage: 'unset',
 };
 
-export const CARD_STYLING: SxProps = {
+export const CARD_STYLING: SxProps<Theme> = {
     padding: DIALOG_PADDING,
     ...CARD_BACKGROUND,
 };

src/components/util/AppbarSearch.tsx

@@ -8,7 +8,8 @@
 
 import React, { useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';

src/components/util/CustomExtensionOutlinedIcon.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import createSvgIcon from '@mui/material/utils/createSvgIcon';
+import { createSvgIcon } from '@mui/material/utils';
 
 const d =
     'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';

src/components/util/EmptyView.tsx

@@ -11,7 +11,8 @@
 import { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { Box, useMediaQuery } from '@mui/material';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
 

src/components/util/ListItemLink.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Link } from 'react-router-dom';
-import { ListItemButton, ListItemButtonProps } from '@mui/material';
+import ListItemButton, { ListItemButtonProps } from '@mui/material/ListItemButton';
 
 export function ListItemLink(props: ListItemButtonProps<typeof Link>) {
     return <ListItemButton component={Link} {...props} />;

src/components/util/LoadingPlaceholder.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface IProps {
     shouldRender?: boolean | (() => boolean);

src/components/util/Progress.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 

src/components/util/SpinnerImage.tsx

@@ -9,12 +9,13 @@
 import { useState, CSSProperties, useEffect, forwardRef, ForwardedRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
-import { Theme, SxProps, Stack, Button } from '@mui/material';
-
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
 import BrokenImageIcon from '@mui/icons-material/BrokenImage';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
 import ImageIcon from '@mui/icons-material/Image';
+import { SxProps, Theme } from '@mui/material/styles';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Priority } from '@/lib/Queue.ts';

src/components/util/StyledFab.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fab, styled } from '@mui/material';
+import Fab from '@mui/material/Fab';
+import { styled } from '@mui/material/styles';
 
 export const DEFAULT_FAB_STYLE = {
     position: 'fixed',

src/components/virtuoso/StyledGroupHeader.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 export const StyledGroupHeader = styled(Typography, { shouldForwardProp: (prop) => prop !== 'isFirstItem' })<{

src/components/virtuoso/StyledGroupItemWrapper.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box, styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
 
 export const StyledGroupItemWrapper = styled(Box, { shouldForwardProp: (prop) => prop !== 'isLastItem' })<{
     isLastItem: boolean;

src/components/virtuoso/StyledGroupedVirtuoso.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { GroupedVirtuoso } from 'react-virtuoso';
 
 export const StyledGroupedVirtuoso = styled(GroupedVirtuoso, {

src/lib/ui/AwaitableDialog.tsx

@@ -7,7 +7,7 @@
  */
 
 import { createRoot } from 'react-dom/client';
-import ThemeProvider from '@mui/material/styles/ThemeProvider';
+import { ThemeProvider } from '@mui/material/styles';
 import { ConfirmDialog } from '@/components/molecules/ConfirmDialog.tsx';
 import { ControlledPromise } from '@/lib/ControlledPromise.ts';
 import { getCurrentTheme } from '@/theme.ts';