chore(deps): update npm dependencies to v9 (major) (#6819)

* fix: replace DeleteOutline with DeleteOutlined icon in BackupHistoryViewer

* chore(deps): update npm dependencies to v9

* refactor: bump @mui to v9

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

src/components/profile/groups-editor-viewer.tsx

@@ -528,7 +528,7 @@ export const GroupsEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.groupsEditor.title')}
             <Box>
               <Button

src/components/profile/profile-item.tsx

@@ -690,7 +690,7 @@ export const ProfileItem = (props: Props) => {
             />
           </Box>
         )}
-        <Box position="relative">
+        <Box sx={{ position: 'relative' }}>
           <Box sx={{ display: 'flex', justifyContent: 'start' }}>
             {batchMode && (
               <IconButton
@@ -731,8 +731,12 @@ export const ProfileItem = (props: Props) => {
             </Box>
 
             <Typography
-              width={batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)'}
-              sx={{ fontSize: '18px', fontWeight: '600', lineHeight: '26px' }}
+              sx={{
+                width: batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)',
+                fontSize: '18px',
+                fontWeight: '600',
+                lineHeight: '26px',
+              }}
               variant="h6"
               component="h2"
               noWrap
@@ -802,14 +806,14 @@ export const ProfileItem = (props: Props) => {
                   <Typography
                     noWrap
                     component="span"
-                    fontSize={14}
-                    textAlign="right"
                     title={
                       showNextUpdate
                         ? t('profiles.components.profileItem.tooltips.showLast')
                         : `${t('shared.labels.updateTime')}: ${parseExpire(updated)}\n${t('profiles.components.profileItem.tooltips.showNext')}`
                     }
                     sx={{
+                      fontSize: 14,
+                      textAlign: 'right',
                       cursor: 'pointer',
                       display: 'inline-block',
                       borderBottom: '1px dashed transparent',
@@ -861,7 +865,7 @@ export const ProfileItem = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()

src/components/profile/profile-more.tsx

@@ -103,17 +103,19 @@ export const ProfileMore = (props: Props) => {
         }}
       >
         <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={0.5}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 0.5,
+          }}
         >
           <Typography
-            width="calc(100% - 52px)"
             variant="h6"
             component="h2"
             noWrap
             title={t(globalTitles[id])}
+            sx={{ width: 'calc(100% - 52px)' }}
           >
             {t(globalTitles[id])}
           </Typography>
@@ -162,7 +164,7 @@ export const ProfileMore = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()

src/components/profile/proxies-editor-viewer.tsx

@@ -374,7 +374,7 @@ export const ProxiesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.proxiesEditor.title')}
             <Box>
               <Button

src/components/profile/rules-editor-viewer.tsx

@@ -584,7 +584,7 @@ export const RulesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('rules.modals.editor.title')}
             <Box>
               <Button