Update dependency mui to v9.x

src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx

@@ -14,7 +14,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
-import { alpha } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
 import type { Ref } from 'react';
 import { memo } from 'react';
@@ -62,7 +61,7 @@ const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & {
                     right: `${scrollbar.ySize}px`,
                     p: 2,
                     pt: (theme) => `max(env(safe-area-inset-top), ${theme.spacing(2)})`,
-                    backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                    backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
                     pointerEvents: 'all',
                     boxShadow: 2,
                 }}

src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -101,11 +101,13 @@ const BaseReaderNavBarDesktop = ({
             variant={isStaticNav ? 'permanent' : 'persistent'}
             open={isVisible || isStaticNav}
             transitionDuration={drawerTransitionDuration}
-            SlideProps={{
-                unmountOnExit: true,
-            }}
-            PaperProps={{
-                ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+            slotProps={{
+                paper: {
+                    ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+                },
+                transition: {
+                    unmountOnExit: true,
+                },
             }}
         >
             <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>

src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -11,7 +11,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import Stack from '@mui/material/Stack';
 import AppSettingsAltIcon from '@mui/icons-material/AppSettingsAlt';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
-import { alpha } from '@mui/material/styles';
 import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
@@ -69,7 +68,7 @@ const BaseReaderBottomBarMobile = ({
                         ref={bottomBarRef}
                         sx={{
                             alignItems: 'center',
-                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.95),
                             pb: `max(${scrollbar.xSize}px, env(safe-area-inset-bottom))`,
                             boxShadow: 2,
                             pointerEvents: 'all',

src/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { alpha, darken, lighten, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { memo } from 'react';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
@@ -40,16 +40,16 @@ export const ReaderProgressBarSlotDesktop = memo(
                     box: {
                         sx: {
                             cursor: 'pointer',
-                            backgroundColor: darken(theme.palette.background.paper, 0.2),
+                            backgroundColor: theme.darken(theme.palette.background.paper, 0.2),
                             ...theme.applyStyles('dark', {
-                                backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                                backgroundColor: theme.lighten(theme.palette.background.paper, 0.1),
                             }),
                             ...applyStyles(
                                 primaryPageLoadState && (secondaryPageLoadState == null || secondaryPageLoadState),
                                 {
-                                    backgroundColor: darken(theme.palette.background.paper, 0.35),
+                                    backgroundColor: theme.darken(theme.palette.background.paper, 0.35),
                                     ...theme.applyStyles('dark', {
-                                        backgroundColor: lighten(theme.palette.background.paper, 0.25),
+                                        backgroundColor: theme.lighten(theme.palette.background.paper, 0.25),
                                     }),
                                 },
                             ),
@@ -74,7 +74,7 @@ export const ReaderProgressBarSlotDesktop = memo(
                         width: '100%',
                         height: '100%',
                         ...applyStyles(isLeadingPage, {
-                            backgroundColor: alpha(theme.palette.primary.main, 0.5),
+                            backgroundColor: theme.alpha(theme.palette.primary.main, 0.5),
                         }),
                         ...applyStyles(isCurrentPage, {
                             cursor: showDraggingStyle ? 'grabbing' : 'grab',

src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx

@@ -10,7 +10,6 @@ import IconButton from '@mui/material/IconButton';
 import SkipPreviousIcon from '@mui/icons-material/SkipPrevious';
 import SkipNextIcon from '@mui/icons-material/SkipNext';
 import Stack from '@mui/material/Stack';
-import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import type { ComponentProps } from 'react';
 import { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react';
@@ -95,7 +94,7 @@ const BaseMobileReaderProgressBar = ({
                     display: 'flex',
                     justifyItems: 'center',
                     alignItems: 'stretch',
-                    backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                    backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
                     borderRadius: 100,
                     boxShadow: 2,
                 },
@@ -254,7 +253,7 @@ const BaseMobileReaderProgressBar = ({
                         onClick={() => ReaderControls.openChapter('previous')}
                         disabled={!previousChapter}
                         sx={{
-                            backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85),
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
                             boxShadow: 2,
                         }}
                     >
@@ -326,7 +325,10 @@ const BaseMobileReaderProgressBar = ({
                     <IconButton
                         onClick={() => ReaderControls.openChapter('next')}
                         disabled={!nextChapter}
-                        sx={{ backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.85), boxShadow: 2 }}
+                        sx={{
+                            backgroundColor: (theme) => theme.alpha(theme.palette.background.paper, 0.85),
+                            boxShadow: 2,
+                        }}
                     >
                         {getOptionForDirection(
                             <SkipNextIcon

src/features/reader/viewer/components/ReaderTransitionPage.tsx

@@ -12,7 +12,7 @@ import Button from '@mui/material/Button';
 import { Link } from 'react-router-dom';
 import type { ComponentProps } from 'react';
 import { memo, useMemo } from 'react';
-import { alpha, useTheme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { useLingui } from '@lingui/react/macro';
 import type { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { ReaderTransitionPageMode, ReadingMode } from '@/features/reader/Reader.types.ts';
@@ -55,7 +55,7 @@ const ChapterInfo = ({
     const contrastText = theme.palette.getContrastText(
         getValueFromObject(theme.palette, READER_BACKGROUND_TO_COLOR[backgroundColor]),
     );
-    const disabledText = alpha(contrastText, 0.5);
+    const disabledText = theme.alpha(contrastText, 0.5);
 
     if (!name) {
         return null;