Update to mantine 9.0

Author: rtivital

components/ComponentCanvas/CanvasHeader/CanvasHeader.tsx

@@ -29,7 +29,7 @@ export function CanvasHeader({
     <div className={classes.header} {...others}>
       <Group>
         <Box id={slug} style={{ visibility: 'hidden', position: 'absolute', top: -75 }} />
-        <Text fw={500} mr="md" component="a" href={`#${slug}`}>
+        <Text fw={500} mr="md" component="a" c="bright" href={`#${slug}`}>
           {attributes.title}
         </Text>
 

lib/CardWithStats/CardWithStats.tsx

@@ -10,7 +10,7 @@ const stats = [
 export function CardWithStats() {
   const items = stats.map((stat) => (
     <div key={stat.title}>
-      <Text size="xs" color="dimmed">
+      <Text size="xs" c="dimmed">
         {stat.title}
       </Text>
       <Text fw={500} size="sm">

lib/CommentHtml/CommentHtml.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Group, Paper, Text, TypographyStylesProvider } from '@mantine/core';
+import { Avatar, Group, Paper, Text, Typography } from '@mantine/core';
 import classes from './CommentHtml.module.css';
 
 export function CommentHtml() {
@@ -17,15 +17,15 @@ export function CommentHtml() {
           </Text>
         </div>
       </Group>
-      <TypographyStylesProvider className={classes.body}>
+      <Typography className={classes.body}>
         <div
           className={classes.content}
           dangerouslySetInnerHTML={{
             __html:
               '<p>I use <a href="https://heroku.com/" rel="noopener noreferrer" target="_blank">Heroku</a> to host my Node.js application, but MongoDB add-on appears to be too <strong>expensive</strong>. I consider switching to <a href="https://www.digitalocean.com/" rel="noopener noreferrer" target="_blank">Digital Ocean</a> VPS to save some cash.</p>',
           }}
         />
-      </TypographyStylesProvider>
+      </Typography>
     </Paper>
   );
 }

lib/FaqWithImage/FaqWithImage.tsx

@@ -9,7 +9,7 @@ export function FaqWithImage() {
   return (
     <div className={classes.wrapper}>
       <Container size="lg">
-        <Grid id="faq-grid" gutter={50}>
+        <Grid id="faq-grid" gap={50}>
           <Grid.Col span={{ base: 12, md: 6 }}>
             <Image src={image.src} alt="Frequently Asked Questions" />
           </Grid.Col>

lib/FeaturesTitle/FeaturesTitle.tsx

@@ -49,7 +49,7 @@ export function FeaturesTitle() {
 
   return (
     <div className={classes.wrapper}>
-      <Grid gutter={80}>
+      <Grid gap={80}>
         <Grid.Col span={{ base: 12, md: 5 }}>
           <Title className={classes.title} order={2}>
             A fully featured React components library for your next project

lib/HeaderMegaMenu/HeaderMegaMenu.tsx

@@ -181,7 +181,7 @@ export function HeaderMegaMenu() {
               <IconChevronDown size={16} color={theme.colors.blue[6]} />
             </Center>
           </UnstyledButton>
-          <Collapse in={linksOpened}>{links}</Collapse>
+          <Collapse expanded={linksOpened}>{links}</Collapse>
           <a href="#" className={classes.link}>
             Learn
           </a>

lib/HeroTitle/HeroTitle.tsx

@@ -14,7 +14,7 @@ export function HeroTitle() {
           React components and hooks library
         </h1>
 
-        <Text className={classes.description} color="dimmed">
+        <Text className={classes.description} c="dimmed">
           Build fully functional accessible web applications with ease – Mantine includes more than
           100 customizable components and hooks to cover you in any situation
         </Text>

lib/LeadGrid/LeadGrid.tsx

@@ -9,7 +9,7 @@ export function LeadGrid() {
     <Container my="md">
       <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
         <Skeleton height={PRIMARY_COL_HEIGHT} radius="md" animate={false} />
-        <Grid gutter="md">
+        <Grid gap="md">
           <Grid.Col>
             <Skeleton height={SECONDARY_COL_HEIGHT} radius="md" animate={false} />
           </Grid.Col>

lib/NavbarLinksGroup/NavbarLinksGroup.tsx

@@ -45,7 +45,7 @@ export function LinksGroup({ icon: Icon, label, initiallyOpened, links }: LinksG
           )}
         </Group>
       </UnstyledButton>
-      {hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
+      {hasLinks ? <Collapse expanded={opened}>{items}</Collapse> : null}
     </>
   );
 }

package.json

@@ -22,20 +22,21 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@mantine/carousel": "8.3.14",
-    "@mantine/code-highlight": "8.3.14",
-    "@mantine/core": "8.3.14",
-    "@mantine/dropzone": "8.3.14",
-    "@mantine/form": "8.3.14",
-    "@mantine/hooks": "8.3.14",
-    "@mantine/spotlight": "8.3.14",
+    "@mantine/carousel": "9.0.0-alpha.2",
+    "@mantine/code-highlight": "9.0.0-alpha.2",
+    "@mantine/core": "9.0.0-alpha.2",
+    "@mantine/dropzone": "9.0.0-alpha.2",
+    "@mantine/form": "9.0.0-alpha.2",
+    "@mantine/hooks": "9.0.0-alpha.2",
+    "@mantine/spotlight": "9.0.0-alpha.2",
     "@mantinex/dev-icons": "^2.0.0",
     "@mantinex/mantine-header": "^2.0.0",
     "@mantinex/mantine-logo": "^2.0.0",
     "@mantinex/mantine-meta": "^2.0.0",
     "@next/bundle-analyzer": "^16.1.5",
     "@tabler/icons-react": "^3.36.1",
     "dayjs": "^1.11.19",
+    "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "next": "16.1.6",
     "react": "19.2.4",