feat(dependencies): bump dependencies

See https://nextjs.org/blog/CVE-2025-66478

Author: angrybacon

app/(welcome)/Articles.tsx

@@ -31,9 +31,9 @@ export const Articles = ({ articles }: Props) => {
       container
       ref={root}
       spacing={2}
-      sx={({ spacing }) => ({
+      sx={(theme) => ({
         flexDirection: 'column',
-        scrollMarginBottom: spacing(2),
+        scrollMarginBottom: theme.spacing(2),
       })}
     >
       {articles.slice(0, size).map((article) => (

components/Banner/Banner.tsx

@@ -46,8 +46,8 @@ export const Banner = ({ author, banner, minutes, title, sx }: Props) => (
     />
     <Box
       role="presentation"
-      sx={({ mixins }) => ({
-        ...mixins.blur('weak'),
+      sx={(theme) => ({
+        ...theme.mixins.blur('weak'),
         inset: 0,
         position: 'absolute',
       })}

components/Card/Card.tsx

@@ -3,7 +3,7 @@
 import { mdiCached } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { Box, IconButton } from '@mui/material';
-import { useState, type FunctionComponent, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 
 import { CardFace } from '@/components/Card/CardFace';
 import { type ScryCard } from '@/tools/scryfall/types';
@@ -12,7 +12,7 @@ type Props = {
   data: ScryCard[];
 };
 
-export const Card: FunctionComponent<Props> = ({ data }) => {
+export const Card = ({ data }: Props) => {
   const [selectedFace, setSelectedFace] = useState(0);
 
   /** Toggle index between 0 and 1 */
@@ -23,9 +23,9 @@ export const Card: FunctionComponent<Props> = ({ data }) => {
       <IconButton
         className="light"
         onClick={onFlip}
-        sx={({ mixins, vars }) => ({
-          ...mixins.blur('weakest'),
-          bgcolor: `rgba(${vars.palette.background.paperChannel} / .4)`,
+        sx={(theme) => ({
+          ...theme.mixins.blur('weakest'),
+          bgcolor: `rgba(${theme.vars.palette.background.paperChannel} / .4)`,
           boxShadow: 1,
           height: [40, 48],
           left: 'unset',
@@ -34,7 +34,7 @@ export const Card: FunctionComponent<Props> = ({ data }) => {
           top: '13%',
           width: [40, 48],
           '&:hover': {
-            bgcolor: `rgba(${vars.palette.background.paperChannel} / .5)`,
+            bgcolor: `rgba(${theme.vars.palette.background.paperChannel} / .5)`,
           },
         })}
         title="Flip"

components/Card/CardFace.tsx

@@ -1,5 +1,4 @@
 import { Box, Fade, Tooltip, type SxProps } from '@mui/material';
-import { type FunctionComponent } from 'react';
 
 import { type ScryCard } from '@/tools/scryfall/types';
 
@@ -9,7 +8,7 @@ type Props = {
   sx?: SxProps;
 };
 
-export const CardFace: FunctionComponent<Props> = ({ active, data, sx }) => {
+export const CardFace = ({ active, data, sx }: Props) => {
   const { artist, images, name, setName } = data;
   const image = images.full;
 

components/Decklist/Column.tsx

@@ -1,13 +1,12 @@
 import { Box, Typography } from '@mui/material';
-import { type FunctionComponent } from 'react';
 
 import { type Card } from '@/tools/decklists/types';
 
 type Props = {
   cards: Card[];
 };
 
-export const Column: FunctionComponent<Props> = ({ cards }) => {
+export const Column = ({ cards }: Props) => {
   if (!cards.length) return null;
   return (
     <Box component="ul" sx={{ m: 0, p: 0 }}>

components/Decklist/Decklist.tsx

@@ -8,7 +8,6 @@ import {
   AccordionSummary as MuiAccordionSummary,
   Typography,
 } from '@mui/material';
-import { type FunctionComponent } from 'react';
 
 import { Column } from '@/components/Decklist/Column';
 import { Summary } from '@/components/Decklist/Summary';
@@ -25,7 +24,7 @@ type Props = {
   title: string;
 };
 
-export const Decklist: FunctionComponent<Props> = ({
+export const Decklist = ({
   authors,
   colors,
   main,
@@ -34,7 +33,7 @@ export const Decklist: FunctionComponent<Props> = ({
   side,
   sideCount,
   title,
-}) => (
+}: Props) => (
   <MuiAccordion>
     <MuiAccordionSummary
       expandIcon={<Icon path={mdiChevronDown} size={1} />}

components/Mana/Mana.tsx

@@ -1,17 +1,16 @@
 import { Box } from '@mui/material';
-import { type FunctionComponent } from 'react';
 
 import 'mana-font/css/mana.min.css';
 
 type Props = {
   pattern: string;
 };
 
-export const Mana: FunctionComponent<Props> = ({ pattern }) => (
+export const Mana = ({ pattern }: Props) => (
   <Box
-    aria-label={`Mana symbol: "${pattern}"`}
-    component="span"
+    aria-label={`Mana symbol "${pattern}"`}
     className={`ms ms-cost ms-${pattern.toLowerCase()}`}
+    component="span"
     sx={{ fontSize: '.9em', mx: 0.25, verticalAlign: 'text-bottom' }}
   />
 );

components/Markdown/Markdown.tsx

@@ -4,7 +4,6 @@ import {
   tableClasses,
   type SxProps,
 } from '@mui/material';
-import { type FunctionComponent } from 'react';
 import ReactMarkdown, { type Components } from 'react-markdown';
 import rehypeSlug from 'rehype-slug';
 import remarkDirective from 'remark-directive';
@@ -81,10 +80,10 @@ type Props = {
   sx?: SxProps;
 };
 
-export const Markdown: FunctionComponent<Props> = ({
+export const Markdown = ({
   markdown: { decklists, file, scries, text },
   sx,
-}) => (
+}: Props) => (
   <Box
     sx={[
       {

components/Markdown/renderers/Card.tsx

@@ -1,4 +1,3 @@
-import { type FunctionComponent } from 'react';
 import { type ExtraProps } from 'react-markdown';
 
 import { Link } from '@/components/Link/Link';
@@ -13,7 +12,7 @@ type Props = ExtraProps & {
 
 // TODO Rename to `CardLink`?
 
-export const Card: FunctionComponent<Props> = ({ file, name, node }) => {
+export const Card = ({ file, name, node }: Props) => {
   if (!name) throw new RemarkError('Missing card name', { file, node });
   return <Link href={`${SCRYFALL_SEARCH}?q=!"${name}"`}>{name}</Link>;
 };

components/Markdown/renderers/Code.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Box, useTheme, type PaletteMode } from '@mui/material';
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type Components } from 'react-markdown';
 import { Prism, type SyntaxHighlighterProps } from 'react-syntax-highlighter';
 import {
@@ -14,10 +14,10 @@ const THEMES: Record<PaletteMode, SyntaxHighlighterProps['style']> = {
   light,
 };
 
-const CodeBlock: FunctionComponent<PropsWithChildren<{ language: string }>> = ({
+const CodeBlock = ({
   children,
   language,
-}) => {
+}: PropsWithChildren<{ language: string }>) => {
   const theme = useTheme();
   return (
     <Box
@@ -41,7 +41,7 @@ const CodeBlock: FunctionComponent<PropsWithChildren<{ language: string }>> = ({
   );
 };
 
-const CodeInline: FunctionComponent<PropsWithChildren> = ({ children }) => (
+const CodeInline = ({ children }: PropsWithChildren) => (
   <Box
     component="code"
     sx={{