build: bump the dependencies group with 7 updates

package.json

@@ -12,21 +12,21 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.7",
+    "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.0.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.0",
+    "react-router-dom": "^7.13.1",
     "universal-cookie": "^8.0.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.13",
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
+    "@biomejs/biome": "^2.4.4",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-basic-ssl": "^2.1.4",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }

src/pages/Playstation/Main/AllTrophies/TrophyStats/EarnedTimePlot/EarnedTimePlot.tsx

@@ -1,4 +1,11 @@
-import { alpha, Box, Stack, Typography, useTheme } from '@mui/material';
+import {
+  alpha,
+  Box,
+  Stack,
+  type Theme,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { useMemo, useState } from 'react';
 import { Shimmer } from '../../../../../../components/animated/shimmer';
 import { GroupButton } from '../../../Game/components/GroupButton';
@@ -32,7 +39,7 @@ export function EarnedTimePlot(props: { timestamps: (Date | undefined)[] }) {
     throw new Error(`Missing sections for ${sectionBy}`);
   }, [sectionBy, validTimestamps]);
 
-  const sx = getSx();
+  const sx = getSx(useTheme());
   return (
     <Stack sx={sx.container} spacing={{ xs: '8px', sm: '16px' }}>
       <Stack
@@ -66,16 +73,15 @@ export function EarnedTimePlot(props: { timestamps: (Date | undefined)[] }) {
 }
 
 export function EarnedTimePlotShimmer() {
-  const sx = getSx();
+  const sx = getSx(useTheme());
   return (
     <Box sx={{ ...sx.container, padding: 0, aspectRatio: 1.5 }}>
       <Shimmer sx={{ width: '100%', height: '100%' }} />
     </Box>
   );
 }
 
-function getSx() {
-  const theme = useTheme();
+function getSx(theme: Theme) {
   return {
     container: {
       background: `radial-gradient(

src/pages/Playstation/Main/Game/components/CompleteTrophyCard.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Stack,
   type SxProps,
+  type Theme,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -68,7 +69,7 @@ export function CompleteTrophyCard(props: {
     e.cancelBubble = true;
   }
 
-  const sx = getSx(props.trophy);
+  const sx = getSx(useTheme(), props.trophy);
   return (
     <Box sx={sx.wrapper}>
       <Stack
@@ -143,7 +144,7 @@ export function CompleteTrophyCardShimmer(props: { earned?: boolean }) {
     import.meta.url,
   ).href;
 
-  const sx = getSx();
+  const sx = getSx(useTheme());
   return (
     <Box sx={sx.wrapper}>
       <Stack sx={sx.container} direction='row'>
@@ -172,8 +173,7 @@ export function CompleteTrophyCardShimmer(props: { earned?: boolean }) {
   );
 }
 
-function getSx(trophy?: CompleteTrophy) {
-  const theme = useTheme();
+function getSx(theme: Theme, trophy?: CompleteTrophy) {
   const iconShadow = {
     xs: 'drop-shadow(0 1px 2px rgba(0,0,0,50%))',
     sm: 'drop-shadow(0 3px 6px rgba(0,0,0,50%))',

src/pages/Playstation/Main/SingleTrophy/components/RarityPyramid.tsx

@@ -2,6 +2,7 @@ import {
   alpha,
   Box,
   type Breakpoint,
+  type Theme,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -19,15 +20,15 @@ export function RarityPyramid(props: {
 
   // equilateral triangle:
   // all sides have same length, all angles are 60 degrees
-  const width = getWidth(props.pixelWidth);
+  const theme = useTheme();
+  const width = getWidth(theme, props.pixelWidth);
   const height = (Math.sqrt(3) / 2) * width;
 
   // Derived from Area and Height formula to find height to make a triangle
   // with earnedPercentage Area of the full pyramid Area.
   const earnedPyramidHeight = Math.sqrt(3 * earnedRatio * width ** 2) / 2;
   const earnedHeightPercentage = 100 * (earnedPyramidHeight / height);
 
-  const theme = useTheme();
   const sx = getSx();
   return <Box sx={sx.pyramid} />;
   function getSx() {
@@ -54,8 +55,10 @@ export function RarityPyramid(props: {
   }
 }
 
-function getWidth(pixelWidth: number | PartialBreakpoints): number {
-  const theme = useTheme();
+function getWidth(
+  theme: Theme,
+  pixelWidth: number | PartialBreakpoints,
+): number {
   if (typeof pixelWidth === 'number') return pixelWidth;
   let breakpointWidth = 0;
   for (const [breakpoint, width] of Object.entries(pixelWidth)) {

src/pages/Playstation/Main/components/TrophyOverview.tsx

@@ -1,4 +1,4 @@
-import { alpha, Box, Grid, useTheme } from '@mui/material';
+import { alpha, Box, Grid, type Theme, useTheme } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 import { Shimmer } from '../../../../components/animated/shimmer';
@@ -11,7 +11,7 @@ import { TrophyLevel } from './TrophyLevel';
 
 export function TrophyOverview(props: { profile: Profile }) {
   const navigate = useNavigate();
-  const sx = getSx();
+  const sx = getSx(useTheme());
 
   const trophy = (type: TrophyType) => {
     return (
@@ -44,7 +44,7 @@ export function TrophyOverview(props: { profile: Profile }) {
 }
 
 export function TrophyOverviewShimmer() {
-  const sx = getSx();
+  const sx = getSx(useTheme());
 
   const trophy = (type: TrophyType) => {
     return (
@@ -83,8 +83,7 @@ export function TrophyOverviewShimmer() {
   );
 }
 
-function getSx() {
-  const theme = useTheme();
+function getSx(theme: Theme) {
   return {
     card: {
       position: 'relative',

src/pages/Playstation/components/ProgressBar.tsx

@@ -1,8 +1,8 @@
-import { alpha, Box, Typography, useTheme } from '@mui/material';
+import { alpha, Box, type Theme, Typography, useTheme } from '@mui/material';
 import { Shimmer, ShimmerText } from '../../../components/animated/shimmer';
 
 export function ProgressBar({ progress }: { progress: number }) {
-  const sx = getSx(progress);
+  const sx = getSx(useTheme(), progress);
   return (
     <Box sx={sx.container}>
       <Typography sx={sx.percentage}>{progress}%</Typography>
@@ -12,7 +12,7 @@ export function ProgressBar({ progress }: { progress: number }) {
 }
 
 export function ProgressBarShimmer() {
-  const sx = getSx(0);
+  const sx = getSx(useTheme(), 0);
   return (
     <Box sx={sx.container}>
       <ShimmerText fontSize={sx.percentage.fontSize} width='32px' />
@@ -23,8 +23,7 @@ export function ProgressBarShimmer() {
   );
 }
 
-function getSx(progress: number) {
-  const theme = useTheme();
+function getSx(theme: Theme, progress: number) {
   return {
     container: {
       width: '100%',

src/pages/Playstation/components/TrophyProgressCard.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   Collapse,
   Stack,
+  type Theme,
   Typography,
   useTheme,
 } from '@mui/material';
@@ -77,7 +78,7 @@ export function TrophyProgressCard(props: {
     setExpanded((isExpanded) => !isExpanded);
   };
 
-  const sx = getSx(isInteractable);
+  const sx = getSx(useTheme(), isInteractable);
   return (
     <>
       <Stack sx={sx.container} direction='row' onClick={handleClick}>
@@ -127,7 +128,7 @@ export function TrophyProgressCard(props: {
 }
 
 export function TrophyProgressCardShimmer() {
-  const sx = getSx(false);
+  const sx = getSx(useTheme(), false);
   return (
     <Stack sx={sx.container} direction='row'>
       <ShimmerImage
@@ -153,8 +154,7 @@ export function TrophyProgressCardShimmer() {
   );
 }
 
-function getSx(isInteractable: boolean) {
-  const theme = useTheme();
+function getSx(theme: Theme, isInteractable: boolean) {
   return {
     container: {
       position: 'relative',

src/pages/Spotify/components/item-card.tsx

@@ -1,4 +1,4 @@
-import { alpha, Box, Stack, useTheme } from '@mui/material';
+import { alpha, Box, Stack, type Theme, useTheme } from '@mui/material';
 import { Image } from 'components/image';
 import { useState } from 'react';
 import { ShimmerText } from '../../../components/animated/shimmer';
@@ -18,7 +18,7 @@ export function ItemCard(props: {
     ? undefined
     : () => window.open(props.href, '_blank');
 
-  const sx = getSx();
+  const sx = getSx(useTheme());
   return (
     <Stack
       sx={sx.container}
@@ -42,7 +42,7 @@ export function ItemCard(props: {
 }
 
 export function ItemCardShimmer() {
-  const sx = getSx();
+  const sx = getSx(useTheme());
   return (
     <Stack sx={sx.container} direction='column'>
       <Image sx={sx.image} src={undefined} />
@@ -54,8 +54,7 @@ export function ItemCardShimmer() {
   );
 }
 
-function getSx() {
-  const theme = useTheme();
+function getSx(theme: Theme) {
   return {
     container: [
       {