From d1d37c85164d077f5daeaa4d1b209ea6b3f330fd Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 3 Sep 2024 17:15:47 +0200
Subject: [PATCH] Update mui dependencies

---
 package.json                                  |   4 +-
 src/components/ExtensionCard.tsx              |  22 ++-
 src/components/MigrateDialog.tsx              |   8 +-
 src/components/MigrationCard.tsx              |   7 +-
 src/components/SourceCard.tsx                 |  22 ++-
 src/components/atoms/CustomIconButton.tsx     |  10 +-
 src/components/atoms/Metadata.tsx             |   8 +-
 src/components/atoms/PasswordTextField.tsx    |  26 +--
 src/components/atoms/SearchTextField.tsx      |  20 +--
 src/components/chapter/ChapterCard.tsx        |   7 +-
 src/components/manga/MangaGridCard.tsx        |   8 +-
 src/components/manga/MangaListCard.tsx        |   8 +-
 src/components/molecules/ConfirmDialog.tsx    |   6 +-
 .../molecules/DownloadStateIndicator.tsx      |   8 +-
 src/components/navbar/DefaultNavBar.tsx       |  10 +-
 src/components/navbar/ReaderNavBar.tsx        |   9 +-
 .../navbar/action/CategorySelect.tsx          |   9 +-
 src/components/settings/DateSetting.tsx       |   9 +-
 .../settings/MutableListSetting.tsx           |  15 +-
 src/components/settings/NumberSetting.tsx     |  17 +-
 src/components/settings/SelectSetting.tsx     |   7 +-
 .../webUI/WebUIUpdateIntervalSetting.tsx      |   2 +-
 src/components/source/SourceOptions.tsx       |   4 +-
 src/components/tracker/TrackerActiveCard.tsx  |  14 +-
 src/components/tracker/TrackerMangaCard.tsx   |  16 +-
 src/components/tracker/TrackerSearch.tsx      |  10 +-
 .../tracker/TrackerUntrackedCard.tsx          |   7 +-
 src/components/util/Progress.tsx              |   6 +-
 src/components/util/SpinnerImage.tsx          |  19 ++-
 .../util/VersionUpdateInfoDialog.tsx          |   8 +-
 src/screens/DownloadQueue.tsx                 |   7 +-
 src/screens/Extensions.tsx                    |   9 +-
 src/screens/Manga.tsx                         |   7 +-
 src/screens/settings/About.tsx                |   6 +-
 src/screens/settings/Backup.tsx               |   8 +-
 src/screens/settings/DownloadSettings.tsx     |   4 +-
 yarn.lock                                     | 148 ++++++++----------
 37 files changed, 349 insertions(+), 166 deletions(-)

diff --git a/package.json b/package.json
index 27654cef..b89ac90f 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,8 @@
     "@emotion/styled": "11.13.0",
     "@fontsource/roboto": "5.0.14",
     "@loadable/component": "5.16.4",
-    "@mui/icons-material": "5.16.6",
-    "@mui/material": "5.16.6",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
     "@mui/x-date-pickers": "7.15.0",
     "apollo-upload-client": "17.0.0",
     "dayjs": "1.11.13",
diff --git a/src/components/ExtensionCard.tsx b/src/components/ExtensionCard.tsx
index d38f9acf..be827b73 100644
--- a/src/components/ExtensionCard.tsx
+++ b/src/components/ExtensionCard.tsx
@@ -194,16 +194,32 @@ export function ExtensionCard(props: IProps) {
                     <Typography variant="h6" component="h3">
                         {name}
                     </Typography>
-                    <Typography variant="caption" display="block">
+                    <Typography
+                        variant="caption"
+                        sx={{
+                            display: 'block',
+                        }}
+                    >
                         {langPress} {versionName}
                         {isNsfw && (
-                            <Typography variant="caption" display="inline" color="error">
+                            <Typography
+                                variant="caption"
+                                color="error"
+                                sx={{
+                                    display: 'inline',
+                                }}
+                            >
                                 {' 18+'}
                             </Typography>
                         )}
                     </Typography>
                     {showSourceRepo && (
-                        <Typography variant="caption" display="block">
+                        <Typography
+                            variant="caption"
+                            sx={{
+                                display: 'block',
+                            }}
+                        >
                             {repo}
                         </Typography>
                     )}
diff --git a/src/components/MigrateDialog.tsx b/src/components/MigrateDialog.tsx
index 2375552b..0c7f28fd 100644
--- a/src/components/MigrateDialog.tsx
+++ b/src/components/MigrateDialog.tsx
@@ -100,7 +100,13 @@ export const MigrateDialog = ({ mangaIdToMigrateTo, onClose }: { mangaIdToMigrat
                 </FormGroup>
             </DialogContent>
             <DialogActions>
-                <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
+                <Stack
+                    direction="row"
+                    sx={{
+                        justifyContent: 'space-between',
+                        width: '100%',
+                    }}
+                >
                     <Button disabled={isMigrationInProcess} component={Link} to={`/manga/${mangaIdToMigrateTo}`}>
                         {t('migrate.dialog.action.button.show_entry')}
                     </Button>
diff --git a/src/components/MigrationCard.tsx b/src/components/MigrationCard.tsx
index 8afea981..8400f76e 100644
--- a/src/components/MigrationCard.tsx
+++ b/src/components/MigrationCard.tsx
@@ -57,7 +57,12 @@ export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratab
                         <Typography variant="h6" component="h3">
                             {name}
                         </Typography>
-                        <Typography variant="caption" display="block">
+                        <Typography
+                            variant="caption"
+                            sx={{
+                                display: 'block',
+                            }}
+                        >
                             {translateExtensionLanguage(lang)}
                         </Typography>
                     </Box>
diff --git a/src/components/SourceCard.tsx b/src/components/SourceCard.tsx
index 9f1131e6..75939ff3 100644
--- a/src/components/SourceCard.tsx
+++ b/src/components/SourceCard.tsx
@@ -97,15 +97,31 @@ export const SourceCard: React.FC<IProps> = (props: IProps) => {
                                 {name}
                             </Typography>
                             {id !== '0' && (
-                                <Typography variant="caption" display="block">
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        display: 'block',
+                                    }}
+                                >
                                     {translateExtensionLanguage(lang)}
                                     {isNsfw && (
-                                        <Typography variant="caption" display="inline" color="error">
+                                        <Typography
+                                            variant="caption"
+                                            color="error"
+                                            sx={{
+                                                display: 'inline',
+                                            }}
+                                        >
                                             {' 18+'}
                                         </Typography>
                                     )}
                                     {showSourceRepo && (
-                                        <Typography variant="caption" display="block">
+                                        <Typography
+                                            variant="caption"
+                                            sx={{
+                                                display: 'block',
+                                            }}
+                                        >
                                             {repo}
                                         </Typography>
                                     )}
diff --git a/src/components/atoms/CustomIconButton.tsx b/src/components/atoms/CustomIconButton.tsx
index 89cf83ac..054fd6a6 100644
--- a/src/components/atoms/CustomIconButton.tsx
+++ b/src/components/atoms/CustomIconButton.tsx
@@ -16,7 +16,15 @@ export const CustomIconButton = forwardRef(
         ref: ForwardedRef<HTMLButtonElement | null>,
     ) => (
         <Button ref={ref} {...props}>
-            <Stack direction="row" alignItems="center" justifyContent="center" gap={1} flexWrap="wrap">
+            <Stack
+                direction="row"
+                sx={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 1,
+                    flexWrap: 'wrap',
+                }}
+            >
                 {children}
             </Stack>
         </Button>
diff --git a/src/components/atoms/Metadata.tsx b/src/components/atoms/Metadata.tsx
index 7e0eeb2e..c02456ac 100644
--- a/src/components/atoms/Metadata.tsx
+++ b/src/components/atoms/Metadata.tsx
@@ -26,7 +26,13 @@ export const Metadata = ({
         {...stackProps}
         sx={{ flexDirection: 'row', columnGap: 1, flexWrap: 'wrap', alignItems: 'baseline', ...stackProps?.sx }}
     >
-        <Typography color="text.secondary" {...titleProps}>
+        <Typography
+            {...titleProps}
+            sx={{
+                color: 'text.secondary',
+                ...titleProps?.sx,
+            }}
+        >
             {title}
         </Typography>
         <Typography {...valueProps}>{value}</Typography>
diff --git a/src/components/atoms/PasswordTextField.tsx b/src/components/atoms/PasswordTextField.tsx
index 9947034f..129f4441 100644
--- a/src/components/atoms/PasswordTextField.tsx
+++ b/src/components/atoms/PasswordTextField.tsx
@@ -26,18 +26,20 @@ export const PasswordTextField = (props: TextFieldProps) => {
             name="password"
             label={t('global.label.password')}
             type={showPassword ? 'text' : 'password'}
-            InputProps={{
-                endAdornment: (
-                    <InputAdornment position="start">
-                        <IconButton
-                            aria-label="toggle password visibility"
-                            onClick={handleClickShowPassword}
-                            edge="end"
-                        >
-                            {showPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                    </InputAdornment>
-                ),
+            slotProps={{
+                input: {
+                    endAdornment: (
+                        <InputAdornment position="start">
+                            <IconButton
+                                aria-label="toggle password visibility"
+                                onClick={handleClickShowPassword}
+                                edge="end"
+                            >
+                                {showPassword ? <VisibilityOff /> : <Visibility />}
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                },
             }}
             {...props}
         />
diff --git a/src/components/atoms/SearchTextField.tsx b/src/components/atoms/SearchTextField.tsx
index 37310b48..4f034976 100644
--- a/src/components/atoms/SearchTextField.tsx
+++ b/src/components/atoms/SearchTextField.tsx
@@ -14,15 +14,17 @@ import CancelIcon from '@mui/icons-material/Cancel';
 export const SearchTextField = ({ onCancel, ...textFieldProps }: TextFieldProps & { onCancel: () => void }) => (
     <TextField
         {...textFieldProps}
-        InputProps={{
-            ...textFieldProps.InputProps,
-            endAdornment: textFieldProps.InputProps?.endAdornment ?? (
-                <InputAdornment position="end">
-                    <IconButton onClick={() => onCancel()}>
-                        <CancelIcon />
-                    </IconButton>
-                </InputAdornment>
-            ),
+        slotProps={{
+            input: {
+                ...textFieldProps.InputProps,
+                endAdornment: textFieldProps.InputProps?.endAdornment ?? (
+                    <InputAdornment position="end">
+                        <IconButton onClick={() => onCancel()}>
+                            <CancelIcon />
+                        </IconButton>
+                    </InputAdornment>
+                ),
+            },
         }}
     />
 );
diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx
index 1755fd32..b5eda427 100644
--- a/src/components/chapter/ChapterCard.tsx
+++ b/src/components/chapter/ChapterCard.tsx
@@ -120,7 +120,12 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                                         '&:last-child': { pb: 1.5 },
                                     }}
                                 >
-                                    <Stack direction="column" flex={1}>
+                                    <Stack
+                                        direction="column"
+                                        sx={{
+                                            flex: 1,
+                                        }}
+                                    >
                                         <Stack
                                             sx={{
                                                 flexDirection: 'row',
diff --git a/src/components/manga/MangaGridCard.tsx b/src/components/manga/MangaGridCard.tsx
index 15744295..9c034617 100644
--- a/src/components/manga/MangaGridCard.tsx
+++ b/src/components/manga/MangaGridCard.tsx
@@ -125,10 +125,10 @@ export const MangaGridCard = ({
                             }}
                         />
                         <Stack
-                            alignItems="start"
-                            justifyContent="space-between"
                             direction="row"
                             sx={{
+                                alignItems: 'start',
+                                justifyContent: 'space-between',
                                 position: 'absolute',
                                 top: (theme) => theme.spacing(1),
                                 left: (theme) => theme.spacing(1),
@@ -153,9 +153,9 @@ export const MangaGridCard = ({
                             )}
                             <Stack
                                 direction="row"
-                                justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
-                                alignItems="end"
                                 sx={{
+                                    justifyContent: gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end',
+                                    alignItems: 'end',
                                     position: 'absolute',
                                     bottom: 0,
                                     width: '100%',
diff --git a/src/components/manga/MangaListCard.tsx b/src/components/manga/MangaListCard.tsx
index 872bec70..b08e7b36 100644
--- a/src/components/manga/MangaListCard.tsx
+++ b/src/components/manga/MangaListCard.tsx
@@ -108,7 +108,13 @@ export const MangaListCard = ({
                             </TypographyMaxLines>
                         </Tooltip>
                     </Box>
-                    <Stack direction="row" alignItems="center" gap={0.5}>
+                    <Stack
+                        direction="row"
+                        sx={{
+                            alignItems: 'center',
+                            gap: 0.5,
+                        }}
+                    >
                         {mangaBadges}
                         {continueReadingButton}
                         <MangaOptionButton
diff --git a/src/components/molecules/ConfirmDialog.tsx b/src/components/molecules/ConfirmDialog.tsx
index f589fa6a..59481b1b 100644
--- a/src/components/molecules/ConfirmDialog.tsx
+++ b/src/components/molecules/ConfirmDialog.tsx
@@ -77,9 +77,11 @@ export const ConfirmDialog = ({
             </DialogContent>
             <DialogActions>
                 <Stack
-                    sx={{ width: '100%' }}
                     direction="row"
-                    justifyContent={actions.extra.show ? 'space-between' : 'end'}
+                    sx={{
+                        justifyContent: actions.extra.show ? 'space-between' : 'end',
+                        width: '100%',
+                    }}
                 >
                     {actions.extra.show && (
                         <Button onClick={onExtra} variant={actions.extra.contain ? 'contained' : undefined}>
diff --git a/src/components/molecules/DownloadStateIndicator.tsx b/src/components/molecules/DownloadStateIndicator.tsx
index 3c782c99..9ab7bb3b 100644
--- a/src/components/molecules/DownloadStateIndicator.tsx
+++ b/src/components/molecules/DownloadStateIndicator.tsx
@@ -46,7 +46,13 @@ export const DownloadStateIndicator = ({ download }: { download: ChapterDownload
                     justifyContent: 'center',
                 }}
             >
-                <Typography variant="caption" component="div" color="text.secondary">
+                <Typography
+                    variant="caption"
+                    component="div"
+                    sx={{
+                        color: 'text.secondary',
+                    }}
+                >
                     <>
                         {download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
                         {download.progress === 0 && t(DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP[download.state])}
diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index 09218fcb..8f797329 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -164,7 +164,15 @@ export function DefaultNavBar() {
                                 {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                             </IconButton>
                         )}
-                        <Typography variant="h5" component="h1" sx={{ flexGrow: 1 }} noWrap textOverflow="ellipsis">
+                        <Typography
+                            variant="h5"
+                            component="h1"
+                            noWrap
+                            sx={{
+                                textOverflow: 'ellipsis',
+                                flexGrow: 1,
+                            }}
+                        >
                             {title}
                         </Typography>
                         {action}
diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx
index ccf76135..8e255d42 100644
--- a/src/components/navbar/ReaderNavBar.tsx
+++ b/src/components/navbar/ReaderNavBar.tsx
@@ -226,9 +226,12 @@ export function ReaderNavBar(props: IProps) {
                         <Typography
                             variant="h6"
                             component="h1"
-                            textOverflow="ellipsis"
-                            overflow="hidden"
-                            sx={{ py: 1, flexGrow: 1 }}
+                            sx={{
+                                textOverflow: 'ellipsis',
+                                overflow: 'hidden',
+                                py: 1,
+                                flexGrow: 1,
+                            }}
                         >
                             {chapter.name}
                         </Typography>
diff --git a/src/components/navbar/action/CategorySelect.tsx b/src/components/navbar/action/CategorySelect.tsx
index 4f0efd82..56cfe1e7 100644
--- a/src/components/navbar/action/CategorySelect.tsx
+++ b/src/components/navbar/action/CategorySelect.tsx
@@ -223,7 +223,14 @@ export function CategorySelect(props: CategorySelectProps) {
                             onChange={(e) => setDoNotShowAddToLibraryDialogAgain(e.target.checked)}
                         />
                     )}
-                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between" alignItems="end">
+                    <Stack
+                        direction="row"
+                        sx={{
+                            justifyContent: 'space-between',
+                            alignItems: 'end',
+                            width: '100%',
+                        }}
+                    >
                         <Button component={Link} to="/settings/categories">
                             {t(allCategories.length ? 'global.button.edit' : 'global.button.create')}
                         </Button>
diff --git a/src/components/settings/DateSetting.tsx b/src/components/settings/DateSetting.tsx
index c254a6e8..6fa80538 100644
--- a/src/components/settings/DateSetting.tsx
+++ b/src/components/settings/DateSetting.tsx
@@ -100,7 +100,14 @@ export const DateSetting = ({
                     </LocalizationProvider>
                 </DialogContent>
                 <DialogActions>
-                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between" alignItems="end">
+                    <Stack
+                        direction="row"
+                        sx={{
+                            justifyContent: 'space-between',
+                            alignItems: 'end',
+                            width: '100%',
+                        }}
+                    >
                         <Stack>
                             {defaultValue !== undefined && (
                                 <Button
diff --git a/src/components/settings/MutableListSetting.tsx b/src/components/settings/MutableListSetting.tsx
index 8a51c794..e306d876 100644
--- a/src/components/settings/MutableListSetting.tsx
+++ b/src/components/settings/MutableListSetting.tsx
@@ -167,7 +167,12 @@ export const MutableListSetting = ({
                                 </Typography>
                             )}
                             {dialogDisclaimer && (
-                                <Stack direction="row" alignItems="center">
+                                <Stack
+                                    direction="row"
+                                    sx={{
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     <InfoIcon color="warning" />
                                     <Typography
                                         variant="body1"
@@ -200,7 +205,13 @@ export const MutableListSetting = ({
                     </List>
                 </DialogContent>
                 <DialogActions>
-                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
+                    <Stack
+                        direction="row"
+                        sx={{
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }}
+                    >
                         <Button onClick={() => setIsAddItemDialogOpen(true)}>
                             {addItemButtonTitle ?? t('global.button.add')}
                         </Button>
diff --git a/src/components/settings/NumberSetting.tsx b/src/components/settings/NumberSetting.tsx
index 3daddc4e..65e1b17c 100644
--- a/src/components/settings/NumberSetting.tsx
+++ b/src/components/settings/NumberSetting.tsx
@@ -139,7 +139,12 @@ export const NumberSetting = ({
                                 </Typography>
                             )}
                             {dialogDisclaimer && (
-                                <Stack direction="row" alignItems="center">
+                                <Stack
+                                    direction="row"
+                                    sx={{
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     <InfoIcon color="warning" />
                                     <Typography
                                         variant="body1"
@@ -160,10 +165,6 @@ export const NumberSetting = ({
                             width: '100%',
                             margin: 'auto',
                         }}
-                        InputProps={{
-                            inputProps: { min: minValue, max: maxValue, step: stepSize },
-                            endAdornment: <InputAdornment position="end">{valueUnit}</InputAdornment>,
-                        }}
                         autoFocus
                         value={dialogValue}
                         type="number"
@@ -171,6 +172,12 @@ export const NumberSetting = ({
                             const newValue = Number(e.target.value);
                             updateValue(newValue, false);
                         }}
+                        slotProps={{
+                            input: {
+                                inputProps: { min: minValue, max: maxValue, step: stepSize },
+                                endAdornment: <InputAdornment position="end">{valueUnit}</InputAdornment>,
+                            },
+                        }}
                     />
                     {showSlider ? (
                         <Slider
diff --git a/src/components/settings/SelectSetting.tsx b/src/components/settings/SelectSetting.tsx
index 0750d473..7a482f64 100644
--- a/src/components/settings/SelectSetting.tsx
+++ b/src/components/settings/SelectSetting.tsx
@@ -105,7 +105,12 @@ export const SelectSetting = <SettingValue extends string | number>({
                                 </Typography>
                             )}
                             {dialogValueDisplayInfo.disclaimer && (
-                                <Stack direction="row" alignItems="center">
+                                <Stack
+                                    direction="row"
+                                    sx={{
+                                        alignItems: 'center',
+                                    }}
+                                >
                                     <InfoIcon color="warning" />
                                     <Typography
                                         variant="body1"
diff --git a/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx b/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
index 3ab5bd0a..f5fc4a18 100644
--- a/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
+++ b/src/components/settings/webUI/WebUIUpdateIntervalSetting.tsx
@@ -56,7 +56,7 @@ export const WebUIUpdateIntervalSetting = ({
 
     return (
         <List>
-            <ListItem disabled={disabled}>
+            <ListItem>
                 <ListItemText primary={t('settings.webui.auto_update.label.title')} />
                 <Switch
                     disabled={disabled}
diff --git a/src/components/source/SourceOptions.tsx b/src/components/source/SourceOptions.tsx
index cd6daf92..e194ff07 100644
--- a/src/components/source/SourceOptions.tsx
+++ b/src/components/source/SourceOptions.tsx
@@ -209,9 +209,11 @@ export function SourceOptions({
                                         <DialogContent>
                                             <TextField
                                                 sx={{ width: '100%' }}
-                                                inputProps={{ maxLength: 50 }}
                                                 value={newSavedSearch}
                                                 onChange={(e) => setNewSavedSearch(e.target.value as string)}
+                                                slotProps={{
+                                                    htmlInput: { maxLength: 50 },
+                                                }}
                                             />
                                         </DialogContent>
                                         <DialogActions>
diff --git a/src/components/tracker/TrackerActiveCard.tsx b/src/components/tracker/TrackerActiveCard.tsx
index 82b302f5..6b4f53ca 100644
--- a/src/components/tracker/TrackerActiveCard.tsx
+++ b/src/components/tracker/TrackerActiveCard.tsx
@@ -153,7 +153,13 @@ const TrackerActiveHeader = ({
     const { t } = useTranslation();
 
     return (
-        <Stack direction="row" alignItems="stretch" sx={{ paddingBottom: 2 }}>
+        <Stack
+            direction="row"
+            sx={{
+                alignItems: 'stretch',
+                paddingBottom: 2,
+            }}
+        >
             <TrackerActiveLink url={trackRecord.remoteUrl}>
                 <Avatar
                     alt={`${tracker.name}`}
@@ -170,7 +176,11 @@ const TrackerActiveHeader = ({
                     </TypographyMaxLines>
                 </Tooltip>
             </ListItemButton>
-            <Stack justifyContent="center">
+            <Stack
+                sx={{
+                    justifyContent: 'center',
+                }}
+            >
                 <PopupState variant="popover" popupId={`tracker-active-menu-popup-${tracker.id}`}>
                     {(popupState) => (
                         <>
diff --git a/src/components/tracker/TrackerMangaCard.tsx b/src/components/tracker/TrackerMangaCard.tsx
index 2914a8e6..58adc676 100644
--- a/src/components/tracker/TrackerMangaCard.tsx
+++ b/src/components/tracker/TrackerMangaCard.tsx
@@ -29,7 +29,13 @@ import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 import { TTrackerManga } from '@/lib/data/Trackers.ts';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
-    <Stack direction="row" gap="5px" justifyContent="space-between">
+    <Stack
+        direction="row"
+        sx={{
+            gap: '5px',
+            justifyContent: 'space-between',
+        }}
+    >
         <Tooltip title={title}>
             <TypographyMaxLines variant="h5" component="h1">
                 {title}
@@ -125,7 +131,13 @@ export const TrackerMangaCard = ({
                             borderColor: selected ? 'primary.main' : 'transparent',
                         }}
                     >
-                        <Stack direction="row" gap={2} marginBottom={2}>
+                        <Stack
+                            direction="row"
+                            sx={{
+                                gap: 2,
+                                marginBottom: 2,
+                            }}
+                        >
                             <CardMedia
                                 sx={{
                                     aspectRatio: '225/350',
diff --git a/src/components/tracker/TrackerSearch.tsx b/src/components/tracker/TrackerSearch.tsx
index afc736c1..1b832dd1 100644
--- a/src/components/tracker/TrackerSearch.tsx
+++ b/src/components/tracker/TrackerSearch.tsx
@@ -92,7 +92,13 @@ export const TrackerSearch = ({
     return (
         <>
             <DialogTitle sx={{ padding: DIALOG_PADDING }}>
-                <Stack direction="row" gap="10px" alignItems="center">
+                <Stack
+                    direction="row"
+                    sx={{
+                        gap: '10px',
+                        alignItems: 'center',
+                    }}
+                >
                     <IconButton onClick={closeSearchMode}>
                         {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                     </IconButton>
@@ -164,8 +170,8 @@ export const TrackerSearch = ({
                 {showTrackButton && (
                     <Stack
                         direction="row"
-                        justifyContent="center"
                         sx={{
+                            justifyContent: 'center',
                             position: 'absolute',
                             left: 0,
                             right: 0,
diff --git a/src/components/tracker/TrackerUntrackedCard.tsx b/src/components/tracker/TrackerUntrackedCard.tsx
index a0f39126..ff05a937 100644
--- a/src/components/tracker/TrackerUntrackedCard.tsx
+++ b/src/components/tracker/TrackerUntrackedCard.tsx
@@ -28,7 +28,12 @@ export const TrackerUntrackedCard = ({
     return (
         <Card sx={CARD_STYLING}>
             <CardContent sx={{ padding: '0' }}>
-                <Stack direction="row" gap={3}>
+                <Stack
+                    direction="row"
+                    sx={{
+                        gap: 3,
+                    }}
+                >
                     <Avatar
                         alt={`${tracker.name}`}
                         src={requestManager.getValidImgUrlFor(tracker.icon)}
diff --git a/src/components/util/Progress.tsx b/src/components/util/Progress.tsx
index e2d1d880..1eac316d 100644
--- a/src/components/util/Progress.tsx
+++ b/src/components/util/Progress.tsx
@@ -15,7 +15,11 @@ export const Progress = ({ progress, showText = true }: { progress: number; show
         <CircularProgress variant="determinate" value={progress} />
         {showText && (
             <Box sx={{ position: 'absolute' }}>
-                <Typography fontSize="0.8rem">{`${Math.round(progress)}%`}</Typography>
+                <Typography
+                    sx={{
+                        fontSize: '0.8rem',
+                    }}
+                >{`${Math.round(progress)}%`}</Typography>
             </Box>
         )}
     </Box>
diff --git a/src/components/util/SpinnerImage.tsx b/src/components/util/SpinnerImage.tsx
index 1fa66fb2..90eec73b 100644
--- a/src/components/util/SpinnerImage.tsx
+++ b/src/components/util/SpinnerImage.tsx
@@ -104,7 +104,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
         <>
             {(isLoading || hasError) && (
                 <Box sx={spinnerStyle}>
-                    <Stack height="100%" alignItems="center" justifyContent="center">
+                    <Stack
+                        sx={{
+                            height: '100%',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
                         {isLoading && <CircularProgress thickness={5} />}
                         {hasError && isLoading === false && (
                             <>
@@ -128,10 +134,13 @@ export const SpinnerImage = forwardRef((props: IProps, imgRef: ForwardedRef<HTML
 
             {showMissingImageIcon ? (
                 <Stack
-                    height="100%"
-                    alignItems="center"
-                    justifyContent="center"
-                    sx={{ background: (theme) => theme.palette.background.default, ...spinnerStyle }}
+                    sx={{
+                        height: '100%',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        background: (theme) => theme.palette.background.default,
+                        ...spinnerStyle,
+                    }}
                 >
                     <ImageIcon fontSize="large" />
                 </Stack>
diff --git a/src/components/util/VersionUpdateInfoDialog.tsx b/src/components/util/VersionUpdateInfoDialog.tsx
index 1afc3a3a..37bec751 100644
--- a/src/components/util/VersionUpdateInfoDialog.tsx
+++ b/src/components/util/VersionUpdateInfoDialog.tsx
@@ -63,7 +63,13 @@ export const VersionUpdateInfoDialog = ({
                 <DialogContentText>{info}</DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Stack sx={{ width: '100%' }} direction="row" justifyContent={changelogUrl ? 'space-between' : 'end'}>
+                <Stack
+                    direction="row"
+                    sx={{
+                        justifyContent: changelogUrl ? 'space-between' : 'end',
+                        width: '100%',
+                    }}
+                >
                     {changelogUrl && (
                         <Button href={changelogUrl} target="_blank" rel="noreferrer">
                             {t('global.button.changelog')}
diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 0a187f54..60c1ec9e 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -76,7 +76,12 @@ const DownloadChapterItem = ({
                             <Typography variant="h6" component="h3">
                                 {item.manga.title}
                             </Typography>
-                            <Typography variant="caption" display="block">
+                            <Typography
+                                variant="caption"
+                                sx={{
+                                    display: 'block',
+                                }}
+                            >
                                 {item.chapter.name}
                             </Typography>
                         </Stack>
diff --git a/src/screens/Extensions.tsx b/src/screens/Extensions.tsx
index 63221236..2dc5fe03 100644
--- a/src/screens/Extensions.tsx
+++ b/src/screens/Extensions.tsx
@@ -263,7 +263,14 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
             <>
                 {toasts}
                 {FileInputComponent}
-                <Stack sx={{ paddingTop: '20px' }} alignItems="center" justifyContent="center" rowGap="10px">
+                <Stack
+                    sx={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        rowGap: '10px',
+                        paddingTop: '20px',
+                    }}
+                >
                     <Typography>{t('extension.label.add_repository_info')}</Typography>
                     <Button component={Link} variant="contained" to="/settings/browseSettings">
                         {t('settings.title')}
diff --git a/src/screens/Manga.tsx b/src/screens/Manga.tsx
index 1c5d75d8..77f58f74 100644
--- a/src/screens/Manga.tsx
+++ b/src/screens/Manga.tsx
@@ -70,7 +70,12 @@ export const Manga: React.FC = () => {
 
     useEffect(() => {
         setAction(
-            <Stack direction="row" alignItems="center">
+            <Stack
+                direction="row"
+                sx={{
+                    alignItems: 'center',
+                }}
+            >
                 {error && !isValidating && !refreshing && (
                     <Tooltip
                         title={
diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx
index f40598db..55f6b993 100644
--- a/src/screens/settings/About.tsx
+++ b/src/screens/settings/About.tsx
@@ -149,7 +149,11 @@ const VersionInfo = ({
     };
 
     return (
-        <Stack alignItems="start">
+        <Stack
+            sx={{
+                alignItems: 'start',
+            }}
+        >
             <Typography component="span" variant="body2">
                 {version}
             </Typography>
diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx
index 9888aba4..c6629c5a 100644
--- a/src/screens/settings/Backup.tsx
+++ b/src/screens/settings/Backup.tsx
@@ -341,7 +341,13 @@ export function Backup() {
                     )}
                 </DialogContent>
                 <DialogActions>
-                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
+                    <Stack
+                        direction="row"
+                        sx={{
+                            justifyContent: 'space-between',
+                            width: '100%',
+                        }}
+                    >
                         {!!validationResult?.missingSources.length && (
                             <Button
                                 onClick={closeInvalidBackupDialog}
diff --git a/src/screens/settings/DownloadSettings.tsx b/src/screens/settings/DownloadSettings.tsx
index 393be81a..94ba48a0 100644
--- a/src/screens/settings/DownloadSettings.tsx
+++ b/src/screens/settings/DownloadSettings.tsx
@@ -206,7 +206,7 @@ export const DownloadSettings = () => {
                         updateSetting('autoDownloadNewChaptersLimit', autoDownloadNewChaptersLimit)
                     }
                 />
-                <ListItem disabled={!downloadSettings?.autoDownloadNewChapters}>
+                <ListItem>
                     <ListItemText primary={t('download.settings.auto_download.label.ignore_with_unread_chapters')} />
                     <Switch
                         edge="end"
@@ -215,7 +215,7 @@ export const DownloadSettings = () => {
                         disabled={!downloadSettings?.autoDownloadNewChapters}
                     />
                 </ListItem>
-                <ListItem disabled={!downloadSettings?.autoDownloadNewChapters}>
+                <ListItem>
                     <ListItemText primary={t('download.settings.auto_download.label.ignore_re_uploads')} />
                     <Switch
                         edge="end"
diff --git a/yarn.lock b/yarn.lock
index 977bb042..4c31e7d4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1580,7 +1580,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.25.4":
+"@babel/runtime@^7.25.0", "@babel/runtime@^7.25.4":
   version "7.25.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
   integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
@@ -1710,7 +1710,7 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@11.13.1", "@emotion/cache@^11.13.0":
+"@emotion/cache@11.13.1", "@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1":
   version "11.13.1"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
   integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
@@ -1721,17 +1721,6 @@
     "@emotion/weak-memoize" "^0.4.0"
     stylis "4.2.0"
 
-"@emotion/cache@^11.11.0":
-  version "11.11.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff"
-  integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==
-  dependencies:
-    "@emotion/memoize" "^0.8.1"
-    "@emotion/sheet" "^1.2.2"
-    "@emotion/utils" "^1.2.1"
-    "@emotion/weak-memoize" "^0.3.1"
-    stylis "4.2.0"
-
 "@emotion/hash@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
@@ -1744,11 +1733,6 @@
   dependencies:
     "@emotion/memoize" "^0.9.0"
 
-"@emotion/memoize@^0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
-  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
-
 "@emotion/memoize@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
@@ -1790,11 +1774,6 @@
     "@emotion/utils" "^1.4.0"
     csstype "^3.0.2"
 
-"@emotion/sheet@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec"
-  integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==
-
 "@emotion/sheet@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
@@ -1827,21 +1806,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
   integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
 
-"@emotion/utils@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4"
-  integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==
-
 "@emotion/utils@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
   integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
 
-"@emotion/weak-memoize@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
-  integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
-
 "@emotion/weak-memoize@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
@@ -2704,66 +2673,66 @@
     hoist-non-react-statics "^3.3.1"
     react-is "^16.12.0"
 
-"@mui/core-downloads-tracker@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz#f029e12ffda8eb79838cc85897f03a628010037c"
-  integrity sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==
+"@mui/core-downloads-tracker@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz#edaec4015e440b55d535a805bd9dcec7e421d6ce"
+  integrity sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==
 
-"@mui/icons-material@5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.6.tgz#7067ddba693bec22f77592cb9cd516e2f1c1fd6e"
-  integrity sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==
+"@mui/icons-material@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.0.2.tgz#fc0fba40421eb6d44f1266b53f9d5e51b67df42b"
+  integrity sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==
   dependencies:
-    "@babel/runtime" "^7.23.9"
+    "@babel/runtime" "^7.25.0"
 
-"@mui/material@5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.6.tgz#c7d695f4a9a473052dc086e64471d0435b7e4a52"
-  integrity sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==
+"@mui/material@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.0.2.tgz#58a3a58d126b1b4ceb842aac401e20542ab0c17e"
+  integrity sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/core-downloads-tracker" "^5.16.6"
-    "@mui/system" "^5.16.6"
-    "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.6"
+    "@babel/runtime" "^7.25.0"
+    "@mui/core-downloads-tracker" "^6.0.2"
+    "@mui/system" "^6.0.2"
+    "@mui/types" "^7.2.16"
+    "@mui/utils" "^6.0.2"
     "@popperjs/core" "^2.11.8"
-    "@types/react-transition-group" "^4.4.10"
-    clsx "^2.1.0"
+    "@types/react-transition-group" "^4.4.11"
+    clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
     react-is "^18.3.1"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.6.tgz#547671e7ae3f86b68d1289a0b90af04dfcc1c8c9"
-  integrity sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==
+"@mui/private-theming@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-6.0.2.tgz#498cf18040cdb196d1280f1d829d996d2a07e004"
+  integrity sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/utils" "^5.16.6"
+    "@babel/runtime" "^7.25.0"
+    "@mui/utils" "^6.0.2"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.6.tgz#60110c106dd482dfdb7e2aa94fd6490a0a3f8852"
-  integrity sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==
+"@mui/styled-engine@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-6.0.2.tgz#7eac59f5e9e1a7efba24d245d62de91752a67cc3"
+  integrity sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@emotion/cache" "^11.11.0"
+    "@babel/runtime" "^7.25.0"
+    "@emotion/cache" "^11.13.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.16.6":
-  version "5.16.6"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.6.tgz#2dabe63d2e45816ce611c40d6e3f79b9c2ccbcd7"
-  integrity sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==
+"@mui/system@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.0.2.tgz#9dce511047f63a5d819914cc978b719f439ebbc3"
+  integrity sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==
   dependencies:
-    "@babel/runtime" "^7.23.9"
-    "@mui/private-theming" "^5.16.6"
-    "@mui/styled-engine" "^5.16.6"
-    "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.6"
-    clsx "^2.1.0"
+    "@babel/runtime" "^7.25.0"
+    "@mui/private-theming" "^6.0.2"
+    "@mui/styled-engine" "^6.0.2"
+    "@mui/types" "^7.2.16"
+    "@mui/utils" "^6.0.2"
+    clsx "^2.1.1"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
@@ -2772,6 +2741,11 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.15.tgz#dadd232fe9a70be0d526630675dff3b110f30b53"
   integrity sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==
 
+"@mui/types@^7.2.16":
+  version "7.2.16"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.16.tgz#66710c691b51cd4fca95322100cd74ec230cfe30"
+  integrity sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==
+
 "@mui/utils@^5.16.6":
   version "5.16.6"
   resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.6.tgz#905875bbc58d3dcc24531c3314a6807aba22a711"
@@ -2784,6 +2758,18 @@
     prop-types "^15.8.1"
     react-is "^18.3.1"
 
+"@mui/utils@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-6.0.2.tgz#be3c7e79af074bce57559b7ea4c693d3a4c3c2ca"
+  integrity sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    "@mui/types" "^7.2.16"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^18.3.1"
+
 "@mui/x-date-pickers@7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-7.15.0.tgz#a2e0979dda5d38fd34e5be76064b8331ef228894"
@@ -3140,13 +3126,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-transition-group@^4.4.10":
-  version "4.4.10"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
-  integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.11":
   version "4.4.11"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
@@ -4014,11 +3993,6 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
-  integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==
-
 clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"