diff --git a/docs/Labeled.md b/docs/Labeled.md
index f6d379a7f70..ce420c098b9 100644
--- a/docs/Labeled.md
+++ b/docs/Labeled.md
@@ -36,15 +36,16 @@ const BookShow = () => (
 
 ## Props
 
-| Prop         | Required | Type             | Default   | Description |
-|:-------------|:---------|:-----------------|:----------|:------------|
-| `children`   | Required | Element          |           | The wrapped component |
-| `className`  | Optional | string           |           | The class name |
-| `color`      | Optional | string           | `text.secondary` | The color of the label |
-| `fullWidth`  | Optional | boolean          | `false`   | Whether to stretch the label to the full width of the container |
-| `isRequired` | Optional | boolean          | `false`   | Whether to display an asterisk. |
-| `label`      | Optional | string           |           | The label. If not set, the label is inferred from the child component |
-| `sx`         | Optional | [SxProps](https://mui.com/system/the-sx-prop/) |           | Custom styles |
+| Prop              | Required | Type             | Default   | Description |
+|:----------------- |:-------- |:---------------- |:----------|:------------|
+| `children`        | Required | Element          |           | The wrapped component |
+| `className`       | Optional | string           |           | The class name |
+| `color`           | Optional | string           | `text.secondary` | The color of the label |
+| `fullWidth`       | Optional | boolean          | `false`   | Whether to stretch the label to the full width of the container |
+| `isRequired`      | Optional | boolean          | `false`   | Whether to display an asterisk. |
+| `label`           | Optional | string           |           | The label. If not set, the label is inferred from the child component |
+| `sx`              | Optional | [SxProps](https://mui.com/system/the-sx-prop/) |           | Custom styles |
+| `TypographyProps` | Optional | [TypographyProps](https://mui.com/material-ui/api/typography/) |           | Custom props |
 
 Additional props are passed to the underlying [Material UI `<Stack>` element](https://mui.com/material-ui/react-stack/).
 
@@ -167,3 +168,16 @@ The `<Labeled>` component accepts the usual `className` prop. You can also overr
 
 
 To override the style of all instances of `<Labeled>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaLabeled` key.
+
+## `TypographyProps`
+
+The `<Labeled>` component accept a `TypographyProps` prop that allows you to pass any prop supported by [`<Typography>`](https://mui.com/material-ui/api/typography/).
+
+{% raw %}
+```tsx
+<Labeled TypographyProps={{ noWrap: true }}>
+   <TextField source="title" />
+</Labeled>
+```
+{% endraw %}
+
diff --git a/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx b/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
index 3c5673793b3..c63b4d049e6 100644
--- a/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
+++ b/examples/crm/src/activity/ActivityLogDealNoteCreated.tsx
@@ -1,4 +1,4 @@
-import Typography from '@mui/material/Typography';
+import { Typography } from '@mui/material';
 import { ReferenceField } from 'react-admin';
 
 import { CompanyAvatar } from '../companies/CompanyAvatar';
diff --git a/examples/crm/src/companies/CompanyShow.tsx b/examples/crm/src/companies/CompanyShow.tsx
index e09c00be0cb..00a486eeaa5 100644
--- a/examples/crm/src/companies/CompanyShow.tsx
+++ b/examples/crm/src/companies/CompanyShow.tsx
@@ -7,6 +7,7 @@ import {
     List,
     ListItem,
     ListItemAvatar,
+    ListItemButton,
     ListItemSecondaryAction,
     ListItemText,
     Stack,
@@ -142,43 +143,46 @@ const ContactsIterator = () => {
         <List dense sx={{ pt: 0 }}>
             {contacts.map(contact => (
                 <RecordContextProvider key={contact.id} value={contact}>
-                    <ListItem
-                        button
-                        component={RouterLink}
-                        to={`/contacts/${contact.id}/show`}
-                        state={{ from: location.pathname }}
-                    >
-                        <ListItemAvatar>
-                            <Avatar />
-                        </ListItemAvatar>
-                        <ListItemText
-                            primary={`${contact.first_name} ${contact.last_name}`}
-                            secondary={
-                                <>
-                                    {contact.title}
-                                    {contact.nb_tasks
-                                        ? ` - ${contact.nb_tasks} task${
-                                              contact.nb_tasks > 1 ? 's' : ''
-                                          }`
-                                        : ''}
-                                    &nbsp; &nbsp;
-                                    <TagsList />
-                                </>
-                            }
-                        />
-                        {contact.last_seen && (
-                            <ListItemSecondaryAction>
-                                <Typography
-                                    variant="body2"
-                                    color="textSecondary"
-                                    component="span"
-                                >
-                                    last activity{' '}
-                                    {formatDistance(contact.last_seen, now)} ago{' '}
-                                    <Status status={contact.status} />
-                                </Typography>
-                            </ListItemSecondaryAction>
-                        )}
+                    <ListItem disablePadding>
+                        <ListItemButton
+                            component={RouterLink}
+                            to={`/contacts/${contact.id}/show`}
+                            state={{ from: location.pathname }}
+                        >
+                            <ListItemAvatar>
+                                <Avatar />
+                            </ListItemAvatar>
+                            <ListItemText
+                                primary={`${contact.first_name} ${contact.last_name}`}
+                                secondary={
+                                    <>
+                                        {contact.title}
+                                        {contact.nb_tasks
+                                            ? ` - ${contact.nb_tasks} task${
+                                                  contact.nb_tasks > 1
+                                                      ? 's'
+                                                      : ''
+                                              }`
+                                            : ''}
+                                        &nbsp; &nbsp;
+                                        <TagsList />
+                                    </>
+                                }
+                            />
+                            {contact.last_seen && (
+                                <ListItemSecondaryAction>
+                                    <Typography
+                                        variant="body2"
+                                        color="textSecondary"
+                                        component="span"
+                                    >
+                                        last activity{' '}
+                                        {formatDistance(contact.last_seen, now)}{' '}
+                                        ago <Status status={contact.status} />
+                                    </Typography>
+                                </ListItemSecondaryAction>
+                            )}
+                        </ListItemButton>
                     </ListItem>
                 </RecordContextProvider>
             ))}
@@ -212,38 +216,40 @@ const DealsIterator = () => {
         <Box>
             <List dense>
                 {deals.map(deal => (
-                    <ListItem
-                        button
-                        key={deal.id}
-                        component={RouterLink}
-                        to={`/deals/${deal.id}/show`}
-                    >
-                        <ListItemText
-                            primary={deal.name}
-                            secondary={
-                                <>
-                                    {findDealLabel(dealStages, deal.stage)},{' '}
-                                    {deal.amount.toLocaleString('en-US', {
-                                        notation: 'compact',
-                                        style: 'currency',
-                                        currency: 'USD',
-                                        currencyDisplay: 'narrowSymbol',
-                                        minimumSignificantDigits: 3,
-                                    })}
-                                    {deal.category ? `, ${deal.category}` : ''}
-                                </>
-                            }
-                        />
-                        <ListItemSecondaryAction>
-                            <Typography
-                                variant="body2"
-                                color="textSecondary"
-                                component="span"
-                            >
-                                last activity{' '}
-                                {formatDistance(deal.updated_at, now)} ago{' '}
-                            </Typography>
-                        </ListItemSecondaryAction>
+                    <ListItem key={deal.id} disablePadding>
+                        <ListItemButton
+                            component={RouterLink}
+                            to={`/deals/${deal.id}/show`}
+                        >
+                            <ListItemText
+                                primary={deal.name}
+                                secondary={
+                                    <>
+                                        {findDealLabel(dealStages, deal.stage)},{' '}
+                                        {deal.amount.toLocaleString('en-US', {
+                                            notation: 'compact',
+                                            style: 'currency',
+                                            currency: 'USD',
+                                            currencyDisplay: 'narrowSymbol',
+                                            minimumSignificantDigits: 3,
+                                        })}
+                                        {deal.category
+                                            ? `, ${deal.category}`
+                                            : ''}
+                                    </>
+                                }
+                            />
+                            <ListItemSecondaryAction>
+                                <Typography
+                                    variant="body2"
+                                    color="textSecondary"
+                                    component="span"
+                                >
+                                    last activity{' '}
+                                    {formatDistance(deal.updated_at, now)} ago{' '}
+                                </Typography>
+                            </ListItemSecondaryAction>
+                        </ListItemButton>
                     </ListItem>
                 ))}
             </List>
diff --git a/examples/crm/src/contacts/ContactListContent.tsx b/examples/crm/src/contacts/ContactListContent.tsx
index 33cc780c3df..922db6ae305 100644
--- a/examples/crm/src/contacts/ContactListContent.tsx
+++ b/examples/crm/src/contacts/ContactListContent.tsx
@@ -4,6 +4,7 @@ import {
     Checkbox,
     List,
     ListItem,
+    ListItemButton,
     ListItemAvatar,
     ListItemIcon,
     ListItemSecondaryAction,
@@ -50,76 +51,79 @@ export const ContactListContent = () => {
             <List dense>
                 {contacts.map(contact => (
                     <RecordContextProvider key={contact.id} value={contact}>
-                        <ListItem
-                            button
-                            component={Link}
-                            to={`/contacts/${contact.id}/show`}
-                        >
-                            <ListItemIcon sx={{ minWidth: '2.5em' }}>
-                                <Checkbox
-                                    edge="start"
-                                    checked={selectedIds.includes(contact.id)}
-                                    tabIndex={-1}
-                                    disableRipple
-                                    onClick={e => {
-                                        e.stopPropagation();
-                                        onToggleItem(contact.id);
-                                    }}
-                                />
-                            </ListItemIcon>
-                            <ListItemAvatar>
-                                <Avatar />
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary={`${contact.first_name} ${contact.last_name ?? ''}`}
-                                secondary={
-                                    <>
-                                        {contact.title}
-                                        {contact.title &&
-                                            contact.company_id != null &&
-                                            ' at '}
-                                        {contact.company_id != null && (
-                                            <ReferenceField
-                                                source="company_id"
-                                                reference="companies"
-                                                link={false}
-                                            >
-                                                <TextField source="name" />
-                                            </ReferenceField>
+                        <ListItem disablePadding>
+                            <ListItemButton
+                                component={Link}
+                                to={`/contacts/${contact.id}/show`}
+                            >
+                                <ListItemIcon sx={{ minWidth: '2.5em' }}>
+                                    <Checkbox
+                                        edge="start"
+                                        checked={selectedIds.includes(
+                                            contact.id
                                         )}
-                                        {contact.nb_tasks
-                                            ? ` - ${contact.nb_tasks} task${
-                                                  contact.nb_tasks > 1
-                                                      ? 's'
-                                                      : ''
-                                              }`
-                                            : ''}
-                                        &nbsp;&nbsp;
-                                        <TagsList />
-                                    </>
-                                }
-                            />
-                            {contact.last_seen && (
-                                <ListItemSecondaryAction
-                                    sx={{
-                                        top: '10px',
-                                        transform: 'none',
-                                    }}
-                                >
-                                    <Typography
-                                        variant="body2"
-                                        color="textSecondary"
-                                        title={contact.last_seen}
+                                        tabIndex={-1}
+                                        disableRipple
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            onToggleItem(contact.id);
+                                        }}
+                                    />
+                                </ListItemIcon>
+                                <ListItemAvatar>
+                                    <Avatar />
+                                </ListItemAvatar>
+                                <ListItemText
+                                    primary={`${contact.first_name} ${contact.last_name ?? ''}`}
+                                    secondary={
+                                        <>
+                                            {contact.title}
+                                            {contact.title &&
+                                                contact.company_id != null &&
+                                                ' at '}
+                                            {contact.company_id != null && (
+                                                <ReferenceField
+                                                    source="company_id"
+                                                    reference="companies"
+                                                    link={false}
+                                                >
+                                                    <TextField source="name" />
+                                                </ReferenceField>
+                                            )}
+                                            {contact.nb_tasks
+                                                ? ` - ${contact.nb_tasks} task${
+                                                      contact.nb_tasks > 1
+                                                          ? 's'
+                                                          : ''
+                                                  }`
+                                                : ''}
+                                            &nbsp;&nbsp;
+                                            <TagsList />
+                                        </>
+                                    }
+                                />
+                                {contact.last_seen && (
+                                    <ListItemSecondaryAction
+                                        sx={{
+                                            top: '10px',
+                                            transform: 'none',
+                                        }}
                                     >
-                                        {!isSmall && 'last activity '}
-                                        {formatRelative(
-                                            contact.last_seen,
-                                            now
-                                        )}{' '}
-                                        <Status status={contact.status} />
-                                    </Typography>
-                                </ListItemSecondaryAction>
-                            )}
+                                        <Typography
+                                            variant="body2"
+                                            color="textSecondary"
+                                            title={contact.last_seen}
+                                        >
+                                            {!isSmall && 'last activity '}
+                                            {formatRelative(
+                                                contact.last_seen,
+                                                now
+                                            )}{' '}
+                                            <Status status={contact.status} />
+                                        </Typography>
+                                    </ListItemSecondaryAction>
+                                )}
+                            </ListItemButton>
                         </ListItem>
                     </RecordContextProvider>
                 ))}
diff --git a/examples/crm/src/dashboard/DashboardActivityLog.tsx b/examples/crm/src/dashboard/DashboardActivityLog.tsx
index 057820c341a..0ef247471c1 100644
--- a/examples/crm/src/dashboard/DashboardActivityLog.tsx
+++ b/examples/crm/src/dashboard/DashboardActivityLog.tsx
@@ -1,7 +1,5 @@
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Typography from '@mui/material/Typography';
+import { Box, Card, Typography } from '@mui/material';
 import { ActivityLog } from '../activity/ActivityLog';
 import { Stack } from '@mui/material';
 
@@ -12,7 +10,10 @@ export function DashboardActivityLog() {
                 <Box mr={1} display="flex">
                     <AccessTimeIcon color="disabled" fontSize="medium" />
                 </Box>
-                <Typography variant="h5" color="textSecondary">
+                <Typography
+                    variant="h5"
+                    sx={{ color: theme => theme.palette.text.secondary }}
+                >
                     Latest Activity
                 </Typography>
             </Box>
diff --git a/examples/crm/src/deals/DealEdit.tsx b/examples/crm/src/deals/DealEdit.tsx
index 79b2f9bdd93..ad62c2c775d 100644
--- a/examples/crm/src/deals/DealEdit.tsx
+++ b/examples/crm/src/deals/DealEdit.tsx
@@ -1,7 +1,11 @@
-import { Button, DialogContent, Stack } from '@mui/material';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import Typography from '@mui/material/Typography';
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    Stack,
+    Typography,
+} from '@mui/material';
 import {
     DeleteButton,
     EditBase,
diff --git a/examples/crm/src/login/LoginForm.tsx b/examples/crm/src/login/LoginForm.tsx
index a2fa57b5a02..59c158ebbb5 100644
--- a/examples/crm/src/login/LoginForm.tsx
+++ b/examples/crm/src/login/LoginForm.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import {
     Button,
     CardActions,
diff --git a/examples/crm/src/notes/Note.tsx b/examples/crm/src/notes/Note.tsx
index 7eea05511ed..d381a4f3f66 100644
--- a/examples/crm/src/notes/Note.tsx
+++ b/examples/crm/src/notes/Note.tsx
@@ -100,7 +100,10 @@ export const Note = ({
                         <CompanyAvatar width={20} height={20} />
                     </ReferenceField>
                 )}
-                <Typography color="text.secondary" variant="body2">
+                <Typography
+                    sx={{ color: theme => theme.palette.text.secondary }}
+                    variant="body2"
+                >
                     <ReferenceField
                         record={note}
                         resource={resource}
diff --git a/examples/demo/package.json b/examples/demo/package.json
index 9fb699e71c5..e7c1f1823e9 100644
--- a/examples/demo/package.json
+++ b/examples/demo/package.json
@@ -5,8 +5,8 @@
     "type": "module",
     "dependencies": {
         "@apollo/client": "^3.12.4",
-        "@mui/icons-material": "^5.16.12",
-        "@mui/material": "^5.16.12",
+        "@mui/icons-material": "^6.0.0",
+        "@mui/material": "^6.0.0",
         "@types/recharts": "^1.8.10",
         "@vitejs/plugin-react": "^2.2.0",
         "clsx": "^2.1.1",
diff --git a/examples/demo/src/dashboard/PendingOrder.tsx b/examples/demo/src/dashboard/PendingOrder.tsx
index e616ca6c2e8..49a7ced13c6 100644
--- a/examples/demo/src/dashboard/PendingOrder.tsx
+++ b/examples/demo/src/dashboard/PendingOrder.tsx
@@ -6,6 +6,7 @@ import {
     ListItemText,
     Avatar,
     Box,
+    ListItemButton,
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useTranslate, useReference } from 'react-admin';
@@ -25,39 +26,41 @@ export const PendingOrder = (props: Props) => {
     });
 
     return (
-        <ListItem button component={Link} to={`/orders/${order.id}`}>
-            <ListItemAvatar>
-                {isPending ? (
-                    <Avatar />
-                ) : (
-                    <Avatar
-                        src={`${customer?.avatar}?size=32x32`}
-                        sx={{ bgcolor: 'background.paper' }}
-                        alt={`${customer?.first_name} ${customer?.last_name}`}
-                    />
-                )}
-            </ListItemAvatar>
-            <ListItemText
-                primary={new Date(order.date).toLocaleString('en-GB')}
-                secondary={translate('pos.dashboard.order.items', {
-                    smart_count: order.basket.length,
-                    nb_items: order.basket.length,
-                    customer_name: customer
-                        ? `${customer.first_name} ${customer.last_name}`
-                        : '',
-                })}
-            />
-            <ListItemSecondaryAction>
-                <Box
-                    component="span"
-                    sx={{
-                        marginRight: '1em',
-                        color: 'text.primary',
-                    }}
-                >
-                    {order.total}$
-                </Box>
-            </ListItemSecondaryAction>
+        <ListItem disablePadding>
+            <ListItemButton component={Link} to={`/orders/${order.id}`}>
+                <ListItemAvatar>
+                    {isPending ? (
+                        <Avatar />
+                    ) : (
+                        <Avatar
+                            src={`${customer?.avatar}?size=32x32`}
+                            sx={{ bgcolor: 'background.paper' }}
+                            alt={`${customer?.first_name} ${customer?.last_name}`}
+                        />
+                    )}
+                </ListItemAvatar>
+                <ListItemText
+                    primary={new Date(order.date).toLocaleString('en-GB')}
+                    secondary={translate('pos.dashboard.order.items', {
+                        smart_count: order.basket.length,
+                        nb_items: order.basket.length,
+                        customer_name: customer
+                            ? `${customer.first_name} ${customer.last_name}`
+                            : '',
+                    })}
+                />
+                <ListItemSecondaryAction>
+                    <Box
+                        component="span"
+                        sx={{
+                            marginRight: '1em',
+                            color: 'text.primary',
+                        }}
+                    >
+                        {order.total}$
+                    </Box>
+                </ListItemSecondaryAction>
+            </ListItemButton>
         </ListItem>
     );
 };
diff --git a/examples/demo/src/dashboard/PendingReviews.tsx b/examples/demo/src/dashboard/PendingReviews.tsx
index f759f9a4bd7..2a717fd80f8 100644
--- a/examples/demo/src/dashboard/PendingReviews.tsx
+++ b/examples/demo/src/dashboard/PendingReviews.tsx
@@ -6,6 +6,7 @@ import {
     List,
     ListItem,
     ListItemAvatar,
+    ListItemButton,
     ListItemText,
 } from '@mui/material';
 import CommentIcon from '@mui/icons-material/Comment';
@@ -61,51 +62,51 @@ const PendingReviews = () => {
         >
             <List sx={{ display }}>
                 {reviews?.map((record: Review) => (
-                    <ListItem
-                        key={record.id}
-                        button
-                        component={Link}
-                        to={`/reviews/${record.id}`}
-                        alignItems="flex-start"
-                    >
-                        <ListItemAvatar>
-                            <ReferenceField
-                                record={record}
-                                source="customer_id"
-                                reference="customers"
-                                link={false}
-                            >
-                                <FunctionField<Customer>
-                                    render={customer => (
-                                        <Avatar
-                                            src={`${customer.avatar}?size=32x32`}
-                                            sx={{
-                                                bgcolor: 'background.paper',
-                                            }}
-                                            alt={`${customer.first_name} ${customer.last_name}`}
-                                        />
-                                    )}
-                                />
-                            </ReferenceField>
-                        </ListItemAvatar>
-
-                        <ListItemText
-                            primary={
-                                <StarRatingField
+                    <ListItem key={record.id} disablePadding>
+                        <ListItemButton
+                            alignItems="flex-start"
+                            component={Link}
+                            to={`/reviews/${record.id}`}
+                        >
+                            <ListItemAvatar>
+                                <ReferenceField
                                     record={record}
-                                    source="rating"
-                                />
-                            }
-                            secondary={record.comment}
-                            sx={{
-                                overflowY: 'hidden',
-                                height: '4em',
-                                display: '-webkit-box',
-                                WebkitLineClamp: 2,
-                                WebkitBoxOrient: 'vertical',
-                                paddingRight: 0,
-                            }}
-                        />
+                                    source="customer_id"
+                                    reference="customers"
+                                    link={false}
+                                >
+                                    <FunctionField<Customer>
+                                        render={customer => (
+                                            <Avatar
+                                                src={`${customer.avatar}?size=32x32`}
+                                                sx={{
+                                                    bgcolor: 'background.paper',
+                                                }}
+                                                alt={`${customer.first_name} ${customer.last_name}`}
+                                            />
+                                        )}
+                                    />
+                                </ReferenceField>
+                            </ListItemAvatar>
+
+                            <ListItemText
+                                primary={
+                                    <StarRatingField
+                                        record={record}
+                                        source="rating"
+                                    />
+                                }
+                                secondary={record.comment}
+                                sx={{
+                                    overflowY: 'hidden',
+                                    height: '4em',
+                                    display: '-webkit-box',
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: 'vertical',
+                                    paddingRight: 0,
+                                }}
+                            />
+                        </ListItemButton>
                     </ListItem>
                 ))}
             </List>
diff --git a/examples/demo/src/reviews/ReviewItem.tsx b/examples/demo/src/reviews/ReviewItem.tsx
index 85888e94eba..0447fce935f 100644
--- a/examples/demo/src/reviews/ReviewItem.tsx
+++ b/examples/demo/src/reviews/ReviewItem.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { Fragment } from 'react';
-import { ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import {
+    ListItem,
+    ListItemAvatar,
+    ListItemButton,
+    ListItemText,
+} from '@mui/material';
 import {
     useCreatePath,
     ReferenceField,
@@ -20,16 +25,15 @@ export const ReviewItem = () => {
         return null;
     }
     return (
-        <Link
-            to={createPath({
-                resource: 'reviews',
-                type: 'edit',
-                id: record.id,
-            })}
-            underline="none"
-            color="inherit"
-        >
-            <ListItem button>
+        <ListItem disablePadding>
+            <ListItemButton
+                component={Link}
+                to={createPath({
+                    resource: 'reviews',
+                    type: 'edit',
+                    id: record.id,
+                })}
+            >
                 <ListItemAvatar>
                     <ReferenceField
                         source="customer_id"
@@ -70,7 +74,7 @@ export const ReviewItem = () => {
                     secondary={record.comment}
                     secondaryTypographyProps={{ noWrap: true }}
                 />
-            </ListItem>
-        </Link>
+            </ListItemButton>
+        </ListItem>
     );
 };
diff --git a/examples/simple/src/tags/TagList.tsx b/examples/simple/src/tags/TagList.tsx
index ba8601eac2f..bf3dd443ee5 100644
--- a/examples/simple/src/tags/TagList.tsx
+++ b/examples/simple/src/tags/TagList.tsx
@@ -16,6 +16,7 @@ import {
     Collapse,
     Card,
     Stack,
+    ListItemButton,
 } from '@mui/material';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -75,18 +76,17 @@ const SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
     const open = openChildren.includes(root.id);
     return (
         <Fragment>
-            <ListItem
-                onClick={() => hasChildren && toggleNode(root)}
-                style={{ paddingLeft: level * 16 }}
-            >
-                {hasChildren && open && <ExpandLess />}
-                {hasChildren && !open && <ExpandMore />}
-                {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
-                <ListItemText primary={root.name.en} />
+            <ListItem disablePadding style={{ paddingLeft: level * 16 }}>
+                <ListItemButton onClick={() => hasChildren && toggleNode(root)}>
+                    {hasChildren && open && <ExpandLess />}
+                    {hasChildren && !open && <ExpandMore />}
+                    {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
+                    <ListItemText primary={root.name.en} />
 
-                <ListItemSecondaryAction>
-                    <EditButton record={root} />
-                </ListItemSecondaryAction>
+                    <ListItemSecondaryAction>
+                        <EditButton record={root} />
+                    </ListItemSecondaryAction>
+                </ListItemButton>
             </ListItem>
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
diff --git a/examples/tutorial/package.json b/examples/tutorial/package.json
index d281ea5c4f1..1105a69d397 100644
--- a/examples/tutorial/package.json
+++ b/examples/tutorial/package.json
@@ -9,6 +9,8 @@
         "preview": "vite preview"
     },
     "dependencies": {
+        "@mui/icons-material": "^6.0.0",
+        "@mui/material": "^6.0.0",
         "ra-data-json-server": "^5.0.0",
         "react": "^19.0.0",
         "react-admin": "^5.0.0",
diff --git a/packages/ra-input-rich-text/package.json b/packages/ra-input-rich-text/package.json
index 35514ffce1f..afd1b881f95 100644
--- a/packages/ra-input-rich-text/package.json
+++ b/packages/ra-input-rich-text/package.json
@@ -38,8 +38,8 @@
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12",
-        "@mui/material": "^5.16.12",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0",
         "ra-core": "^5.0.0",
         "ra-ui-materialui": "^5.0.0",
         "react": "^18.0.0 || ^19.0.0",
diff --git a/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx b/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx
index 97cc0a70d15..93e411a3a45 100644
--- a/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx
+++ b/packages/ra-input-rich-text/src/buttons/LevelSelect.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
-import { List, ListItem, ListItemText, Menu, MenuItem } from '@mui/material';
+import {
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemText,
+    Menu,
+    MenuItem,
+} from '@mui/material';
 import { styled, alpha } from '@mui/material/styles';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useTranslate } from 'ra-core';
@@ -93,25 +100,27 @@ export const LevelSelect = (props: LevelSelectProps) => {
                 className={classes.list}
             >
                 <ListItem
-                    button
-                    aria-haspopup="true"
-                    aria-controls="level-menu"
-                    aria-label={translate('ra.tiptap.current_level', {
-                        _: 'Current level',
-                    })}
-                    disabled={!editor?.isEditable}
-                    onClick={handleClickListItem}
                     className={clsx({
                         [classes.sizeSmall]: size === 'small',
                         [classes.sizeLarge]: size === 'large',
                     })}
                 >
-                    <ListItemText
-                        primary={translate(selectedOption.label, {
-                            _: selectedOption.defaultLabel,
+                    <ListItemButton
+                        aria-haspopup="true"
+                        aria-controls="level-menu"
+                        aria-label={translate('ra.tiptap.current_level', {
+                            _: 'Current level',
                         })}
-                    />
-                    <ArrowDropDownIcon />
+                        disabled={!editor?.isEditable}
+                        onClick={handleClickListItem}
+                    >
+                        <ListItemText
+                            primary={translate(selectedOption.label, {
+                                _: selectedOption.defaultLabel,
+                            })}
+                        />
+                        <ArrowDropDownIcon />
+                    </ListItemButton>
                 </ListItem>
             </List>
             <Menu
diff --git a/packages/ra-no-code/package.json b/packages/ra-no-code/package.json
index a4934fe589a..7c35c2a74b7 100644
--- a/packages/ra-no-code/package.json
+++ b/packages/ra-no-code/package.json
@@ -36,8 +36,8 @@
         "typescript": "^5.1.3"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12",
-        "@mui/material": "^5.16.12",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0"
     },
diff --git a/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx b/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx
index 4fde25b2e72..6b290e334b3 100644
--- a/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx
+++ b/packages/ra-no-code/src/ApplicationsDashboard/ApplicationsDashboard.tsx
@@ -8,6 +8,7 @@ import {
     List,
     ListItem,
     ListItemAvatar,
+    ListItemButton,
     ListItemText,
     Typography,
 } from '@mui/material';
@@ -102,24 +103,24 @@ const Applications = ({ onApplicationSelected }) => {
                 <Card className={classes.applications}>
                     <List>
                         {applications.map(application => (
-                            <ListItem
-                                key={application.name}
-                                button
-                                onClick={() =>
-                                    onApplicationSelected(application)
-                                }
-                            >
-                                <ListItemAvatar>
-                                    <Avatar>
-                                        <FolderIcon />
-                                    </Avatar>
-                                </ListItemAvatar>
-                                <ListItemText
-                                    primary={application.name}
-                                    secondary={new Date(
-                                        application.created_at
-                                    ).toLocaleDateString()}
-                                />
+                            <ListItem key={application.name} disablePadding>
+                                <ListItemButton
+                                    onClick={() =>
+                                        onApplicationSelected(application)
+                                    }
+                                >
+                                    <ListItemAvatar>
+                                        <Avatar>
+                                            <FolderIcon />
+                                        </Avatar>
+                                    </ListItemAvatar>
+                                    <ListItemText
+                                        primary={application.name}
+                                        secondary={new Date(
+                                            application.created_at
+                                        ).toLocaleDateString()}
+                                    />
+                                </ListItemButton>
                             </ListItem>
                         ))}
                     </List>
diff --git a/packages/ra-ui-materialui/package.json b/packages/ra-ui-materialui/package.json
index 69939a354d6..b0096951ec4 100644
--- a/packages/ra-ui-materialui/package.json
+++ b/packages/ra-ui-materialui/package.json
@@ -52,9 +52,9 @@
         "typescript": "^5.1.3"
     },
     "peerDependencies": {
-        "@mui/icons-material": "^5.16.12",
-        "@mui/material": "^5.16.12",
-        "@mui/utils": "^5.16.12",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0",
+        "@mui/utils": "^5.15.20 || ^6.0.0",
         "ra-core": "^5.0.0",
         "react": "^18.0.0 || ^19.0.0",
         "react-dom": "^18.0.0 || ^19.0.0",
diff --git a/packages/ra-ui-materialui/src/Labeled.stories.tsx b/packages/ra-ui-materialui/src/Labeled.stories.tsx
index acecef575d7..bb2d542b628 100644
--- a/packages/ra-ui-materialui/src/Labeled.stories.tsx
+++ b/packages/ra-ui-materialui/src/Labeled.stories.tsx
@@ -66,6 +66,9 @@ export const Color = () => (
                 <Labeled>
                     <TextField source="title" />
                 </Labeled>
+                <Labeled color="secondary">
+                    <TextField source="title" />
+                </Labeled>
                 <Labeled color="success.main">
                     <TextField source="title" />
                 </Labeled>
@@ -77,6 +80,22 @@ export const Color = () => (
     </ResourceContext.Provider>
 );
 
+export const TypographyProps = () => (
+    <ResourceContext.Provider value="books">
+        <RecordContextProvider value={record}>
+            <Stack gap={1} sx={{ m: 1 }}>
+                <Labeled
+                    TypographyProps={{
+                        sx: { color: theme => theme.palette.secondary.main },
+                    }}
+                >
+                    <TextField source="title" />
+                </Labeled>
+            </Stack>
+        </RecordContextProvider>
+    </ResourceContext.Provider>
+);
+
 export const IsRequired = () => (
     <ResourceContext.Provider value="books">
         <RecordContextProvider value={record}>
diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx
index 0c720c096b3..9009c504487 100644
--- a/packages/ra-ui-materialui/src/Labeled.tsx
+++ b/packages/ra-ui-materialui/src/Labeled.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { ElementType, ReactElement } from 'react';
-import { Stack, StackProps, Theme, Typography } from '@mui/material';
+import {
+    Stack,
+    StackProps,
+    Theme,
+    Typography,
+    TypographyProps,
+} from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { Property } from 'csstype';
 import clsx from 'clsx';
@@ -23,13 +29,14 @@ import { ResponsiveStyleValue } from '@mui/system';
 export const Labeled = ({
     children,
     className = '',
-    color = 'text.secondary',
+    color,
     component = 'span',
     fullWidth,
     isRequired,
     label,
     resource,
     source,
+    TypographyProps,
     ...rest
 }: LabeledProps) => (
     <Root
@@ -47,7 +54,18 @@ export const Labeled = ({
         children.type?.displayName !== 'Labeled' &&
         // @ts-ignore
         children.type?.displayName !== 'Labeled' ? (
-            <Typography color={color} className={LabeledClasses.label}>
+            <Typography
+                sx={
+                    color
+                        ? undefined
+                        : {
+                              color: theme => theme.palette.text.secondary,
+                          }
+                }
+                color={color}
+                className={LabeledClasses.label}
+                {...TypographyProps}
+            >
                 <FieldTitle
                     label={label || children.props.label}
                     source={source || children.props.source}
@@ -77,6 +95,7 @@ export interface LabeledProps extends StackProps {
     label?: string | ReactElement | boolean;
     resource?: string;
     source?: string;
+    TypographyProps?: TypographyProps;
 }
 
 const PREFIX = 'RaLabeled';
diff --git a/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx b/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx
index 6e8917f655e..69a67e6cf08 100644
--- a/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx
+++ b/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx
@@ -85,10 +85,10 @@ const PREFIX = 'RaLocalesMenuButton';
 
 export const LocalesMenuButtonClasses = {};
 
-const Root = styled(Box, {
+const Root = styled('span', {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})({});
+})({}) as typeof Box;
 
 export interface LocalesMenuButtonProps {
     icon?: ReactNode;
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx
index 85535e64582..166ce64ea55 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.stories.tsx
@@ -71,8 +71,8 @@ export const StringChoices = () => (
 const dataProvider = testDataProvider({
     // @ts-ignore
     getList: () => Promise.resolve({ data: choices, total: choices.length }),
-    // @ts-ignore
     getMany: (resource, params) =>
+        // @ts-ignore
         Promise.resolve({
             data: choices.filter(choice => params.ids.includes(choice.id)),
             total: choices.length,
@@ -197,7 +197,12 @@ const OptionTextComponent = () => {
     return (
         <>
             <Typography sx={{ marginTop: 0.5 }}>{record?.name}</Typography>
-            <Typography color="textSecondary" sx={{ marginBottom: 2 }}>
+            <Typography
+                sx={{
+                    color: theme => theme.palette.text.secondary,
+                    marginBottom: 2,
+                }}
+            >
                 {record?.details}
             </Typography>
         </>
diff --git a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
index 26e39f01da1..b824575feda 100644
--- a/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
+++ b/packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx
@@ -51,7 +51,12 @@ export const BulkActionsToolbar = (props: BulkActionsToolbarProps) => {
                     >
                         <CloseIcon fontSize="small" />
                     </IconButton>
-                    <Typography color="text.primary" variant="subtitle1">
+                    <Typography
+                        sx={{
+                            color: theme => theme.palette.text.primary,
+                        }}
+                        variant="subtitle1"
+                    >
                         {translate(label, {
                             _: label,
                             smart_count: selectedIds.length,
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
index ef23ad03699..8f0c694c44c 100644
--- a/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/SimpleList/SimpleListItem.tsx
@@ -66,7 +66,6 @@ export const SimpleListItem = <RecordType extends RaRecord = any>(
                     },
                 }}
             >
-                {/* @ts-ignore */}
                 <ListItemButton
                     onClick={handleClick}
                     style={rowStyle ? rowStyle(record, rowIndex) : undefined}
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
index 3ce8484dd20..597873437aa 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/FilterListItem.tsx
@@ -166,14 +166,11 @@ export const FilterListItem = memo((props: FilterListItemProps) => {
     const handleClick = () => setFilters(toggleFilter(value, filterValues));
 
     return (
-        <StyledListItem
-            onClick={handleClick}
-            selected={isSelected}
-            disablePadding
-            {...rest}
-        >
+        <StyledListItem disablePadding {...rest}>
             <ListItemButton
                 disableGutters
+                onClick={handleClick}
+                selected={isSelected}
                 className={FilterListItemClasses.listItemButton}
             >
                 {icon && (
diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
index e1630f7d693..06441bc6772 100644
--- a/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
+++ b/packages/ra-ui-materialui/src/list/filter/SavedQueryFilterListItem.tsx
@@ -63,15 +63,10 @@ export const SavedQueryFilterListItem = memo(
             isSelected ? removeFilter() : addFilter();
 
         return (
-            // @ts-ignore
-            <StyledListItem
-                onClick={toggleFilter}
-                selected={isSelected}
-                className={className}
-                sx={sx}
-                disablePadding
-            >
+            <StyledListItem className={className} sx={sx} disablePadding>
                 <ListItemButton
+                    onClick={toggleFilter}
+                    selected={isSelected}
                     disableGutters
                     className={SavedQueryFilterListItemClasses.listItemButton}
                 >
diff --git a/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx b/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx
index 4907c60a706..763b4a3cbc6 100644
--- a/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx
+++ b/packages/ra-ui-materialui/src/theme/useTheme.spec.tsx
@@ -35,7 +35,7 @@ describe('useTheme', () => {
         expect(screen.queryByText('light')).not.toBeNull();
     });
 
-    it('should return the light theme when no dark theme is provided even though user prefers dark mode', () => {
+    it('should return the light theme when no dark theme is provided even though user prefers dark mode', async () => {
         render(
             <ThemeTestWrapper mode="dark">
                 <CoreAdminContext authProvider={authProvider}>
@@ -43,7 +43,7 @@ describe('useTheme', () => {
                 </CoreAdminContext>
             </ThemeTestWrapper>
         );
-        expect(screen.queryByText('light')).not.toBeNull();
+        await screen.findByText('light');
     });
 
     it('should return the light theme when no dark theme is provided even though the stored theme is dark', () => {
diff --git a/packages/react-admin/package.json b/packages/react-admin/package.json
index 6609bd7be33..a34200bfff5 100644
--- a/packages/react-admin/package.json
+++ b/packages/react-admin/package.json
@@ -36,8 +36,8 @@
         "react-dom": "^18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "@mui/icons-material": "^5.16.12",
-        "@mui/material": "^5.16.12",
+        "@mui/icons-material": "^5.16.12 || ^6.0.0",
+        "@mui/material": "^5.16.12 || ^6.0.0",
         "ra-core": "^5.4.3",
         "ra-i18n-polyglot": "^5.4.3",
         "ra-language-english": "^5.4.3",
diff --git a/yarn.lock b/yarn.lock
index 58cd96eb3bf..de2b1f52605 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1670,12 +1670,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.5, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
-  version: 7.24.4
-  resolution: "@babel/runtime@npm:7.24.4"
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.5, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.26.0
+  resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
+  checksum: 12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
   languageName: node
   linkType: hard
 
@@ -1797,10 +1797,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/hash@npm:0.8.0"
-  checksum: 706303d35d416217cd7eb0d36dbda4627bb8bdf4a32ea387e8dd99be11b8e0a998e10af21216e8a5fade518ad955ff06aa8890f20e694ce3a038ae7fc1000556
+"@emotion/hash@npm:^0.8.0, @emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 0dc254561a3cc0a06a10bbce7f6a997883fd240c8c1928b93713f803a2e9153a257a488537012efe89dbe1246f2abfe2add62cdb3471a13d67137fcb808e81c2
   languageName: node
   linkType: hard
 
@@ -1843,16 +1843,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@emotion/serialize@npm:1.0.2"
+"@emotion/serialize@npm:^1.0.2, @emotion/serialize@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@emotion/serialize@npm:1.3.3"
   dependencies:
-    "@emotion/hash": "npm:^0.8.0"
-    "@emotion/memoize": "npm:^0.7.4"
-    "@emotion/unitless": "npm:^0.7.5"
-    "@emotion/utils": "npm:^1.0.0"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.2"
     csstype: "npm:^3.0.2"
-  checksum: b29dbf33c1801d2aa039d355fa87bb921a8dd4dcecd9ef8cea0c1d7796d39ea137c913824b3173c7d3acd65ff2bb8bc6912095690a266c79696f5528c1a1c509
+  checksum: b28cb7de59de382021de2b26c0c94ebbfb16967a1b969a56fdb6408465a8993df243bfbd66430badaa6800e1834724e84895f5a6a9d97d0d224de3d77852acb4
   languageName: node
   linkType: hard
 
@@ -1885,10 +1885,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.5":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: 4d0d94f53cb97b4481bbfa394953e1899a0b877644642ba9dd7247c27eb8c48e14e22aeb11411d7d9874685ad85dd5fb5b50eb78c6d8840eb56a84b92dcef2f4
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 150943192727b7650eb9a6851a98034ddb58a8b6958b37546080f794696141c3760966ac695ab9af97efe10178690987aee4791f9f0ad1ff76783cdca83c1d49
   languageName: node
   linkType: hard
 
@@ -2823,6 +2823,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/core-downloads-tracker@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@mui/core-downloads-tracker@npm:6.3.1"
+  checksum: a996ad8db6bd8c981c4e2e2d243526c838dd29f0bbe7dc5ab6933be357e41f748781d322b1decf79ae1c9abba24190162559d84deedcb7c8824a68754dddf216
+  languageName: node
+  linkType: hard
+
 "@mui/icons-material@npm:^5.16.12":
   version: 5.16.14
   resolution: "@mui/icons-material@npm:5.16.14"
@@ -2839,6 +2846,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/icons-material@npm:^5.16.12 || ^6.0.0, @mui/icons-material@npm:^6.0.0":
+  version: 6.3.1
+  resolution: "@mui/icons-material@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+  peerDependencies:
+    "@mui/material": ^6.3.1
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: edaf71b7368c14cfbfed6f475ef96187871a010e972b9e7608d23cadae5ce52a3a6888b32453721dc1d86e2e7ad9c61aadde83ba5cd94363782bf83803d1ab36
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.16.12":
   version: 5.16.14
   resolution: "@mui/material@npm:5.16.14"
@@ -2872,6 +2895,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/material@npm:^5.16.12 || ^6.0.0, @mui/material@npm:^6.0.0":
+  version: 6.3.1
+  resolution: "@mui/material@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+    "@mui/core-downloads-tracker": "npm:^6.3.1"
+    "@mui/system": "npm:^6.3.1"
+    "@mui/types": "npm:^7.2.21"
+    "@mui/utils": "npm:^6.3.1"
+    "@popperjs/core": "npm:^2.11.8"
+    "@types/react-transition-group": "npm:^4.4.12"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.1.3"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.0.0"
+    react-transition-group: "npm:^4.4.5"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@mui/material-pigment-css": ^6.3.1
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@mui/material-pigment-css":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 7fb91acd9bc021dde78e70d495a2abd69d0e2df35e526e0730e060c3177bb10cc3058ee27c72b5ec9bc7622d9c2ef99831b89f511f6700bc3717f979e2cb0152
+  languageName: node
+  linkType: hard
+
 "@mui/private-theming@npm:^5.16.14":
   version: 5.16.14
   resolution: "@mui/private-theming@npm:5.16.14"
@@ -2889,6 +2948,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/private-theming@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@mui/private-theming@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+    "@mui/utils": "npm:^6.3.1"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: aafaca0d7e5fd4d83c2cade28b7de554c0d848595f8f23f26c8f7daf3fc664053c9c81342d44d24e0a04a4813b58d6f0c1d135ae2775380acda91468a21f9684
+  languageName: node
+  linkType: hard
+
 "@mui/styled-engine@npm:^5.16.14":
   version: 5.16.14
   resolution: "@mui/styled-engine@npm:5.16.14"
@@ -2910,6 +2986,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/styled-engine@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@mui/styled-engine@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+    "@emotion/cache": "npm:^11.13.5"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/sheet": "npm:^1.4.0"
+    csstype: "npm:^3.1.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.4.1
+    "@emotion/styled": ^11.3.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+  checksum: 81bbf8f2016b1c7debbbaab1a44ebaf8e494e8c9d32d2201b28f8c653a082177f6570fef779bf835bad1a9120af219a64b1d7a9a8a569c9c07045f00affe6b87
+  languageName: node
+  linkType: hard
+
 "@mui/system@npm:^5.16.14":
   version: 5.16.14
   resolution: "@mui/system@npm:5.16.14"
@@ -2938,7 +3037,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.15":
+"@mui/system@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@mui/system@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+    "@mui/private-theming": "npm:^6.3.1"
+    "@mui/styled-engine": "npm:^6.3.1"
+    "@mui/types": "npm:^7.2.21"
+    "@mui/utils": "npm:^6.3.1"
+    clsx: "npm:^2.1.1"
+    csstype: "npm:^3.1.3"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 49613b001f7e60c7ed70f3e2ee3ffc4f3a2719509e4f9ec18faf73a354597b8d894d0ee8861bf3a5b5db763efca36bcfb75989505c88e009c1627b114bac88ef
+  languageName: node
+  linkType: hard
+
+"@mui/types@npm:^7.2.15, @mui/types@npm:^7.2.21":
   version: 7.2.21
   resolution: "@mui/types@npm:7.2.21"
   peerDependencies:
@@ -2970,6 +3097,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@mui/utils@npm:6.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.26.0"
+    "@mui/types": "npm:^7.2.21"
+    "@types/prop-types": "npm:^15.7.14"
+    clsx: "npm:^2.1.1"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^19.0.0"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b111bca7ad065b1028714d55a8df90267c47a72ffb2bfad7a1709cef0d5d9036b463855d431b3606967c9351c7ee23f1dee02457b2f3ed02513744f0173eb00c
+  languageName: node
+  linkType: hard
+
 "@nivo/annotations@npm:0.80.0":
   version: 0.80.0
   resolution: "@nivo/annotations@npm:0.80.0"
@@ -5062,7 +5209,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.12":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.12, @types/prop-types@npm:^15.7.14":
   version: 15.7.14
   resolution: "@types/prop-types@npm:15.7.14"
   checksum: 1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
@@ -5087,12 +5234,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-transition-group@npm:^4.4.10":
-  version: 4.4.10
-  resolution: "@types/react-transition-group@npm:4.4.10"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 3eb9bca143abc21eb781aa5cb1bded0c9335689d515bf0513fb8e63217b7a8122c6a323ecd5644a06938727e1f467ee061d8df1c93b68825a80ff1b47ab777a2
+"@types/react-transition-group@npm:^4.4.10, @types/react-transition-group@npm:^4.4.12":
+  version: 4.4.12
+  resolution: "@types/react-transition-group@npm:4.4.12"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 0441b8b47c69312c89ec0760ba477ba1a0808a10ceef8dc1c64b1013ed78517332c30f18681b0ec0b53542731f1ed015169fed1d127cc91222638ed955478ec7
   languageName: node
   linkType: hard
 
@@ -8338,8 +8485,8 @@ __metadata:
   resolution: "demo@workspace:examples/demo"
   dependencies:
     "@apollo/client": "npm:^3.12.4"
-    "@mui/icons-material": "npm:^5.16.12"
-    "@mui/material": "npm:^5.16.12"
+    "@mui/icons-material": "npm:^6.0.0"
+    "@mui/material": "npm:^6.0.0"
     "@types/fetch-mock": "npm:^7.3.2"
     "@types/jest": "npm:^29.5.2"
     "@types/node": "npm:^20.10.7"
@@ -16141,8 +16288,8 @@ __metadata:
     tippy.js: "npm:^6.3.7"
     typescript: "npm:^5.1.3"
   peerDependencies:
-    "@mui/icons-material": ^5.16.12
-    "@mui/material": ^5.16.12
+    "@mui/icons-material": ^5.16.12 || ^6.0.0
+    "@mui/material": ^5.16.12 || ^6.0.0
     ra-core: ^5.0.0
     ra-ui-materialui: ^5.0.0
     react: ^18.0.0 || ^19.0.0
@@ -16193,8 +16340,8 @@ __metadata:
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
-    "@mui/icons-material": ^5.16.12
-    "@mui/material": ^5.16.12
+    "@mui/icons-material": ^5.16.12 || ^6.0.0
+    "@mui/material": ^5.16.12 || ^6.0.0
     react: ^18.0.0 || ^19.0.0
     react-dom: ^18.0.0 || ^19.0.0
   languageName: unknown
@@ -16241,9 +16388,9 @@ __metadata:
     rimraf: "npm:^3.0.2"
     typescript: "npm:^5.1.3"
   peerDependencies:
-    "@mui/icons-material": ^5.16.12
-    "@mui/material": ^5.16.12
-    "@mui/utils": ^5.16.12
+    "@mui/icons-material": ^5.16.12 || ^6.0.0
+    "@mui/material": ^5.16.12 || ^6.0.0
+    "@mui/utils": ^5.15.20 || ^6.0.0
     ra-core: ^5.0.0
     react: ^18.0.0 || ^19.0.0
     react-dom: ^18.0.0 || ^19.0.0
@@ -16391,8 +16538,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "react-admin@workspace:packages/react-admin"
   dependencies:
-    "@mui/icons-material": "npm:^5.16.12"
-    "@mui/material": "npm:^5.16.12"
+    "@mui/icons-material": "npm:^5.16.12 || ^6.0.0"
+    "@mui/material": "npm:^5.16.12 || ^6.0.0"
     cross-env: "npm:^5.2.0"
     expect: "npm:^27.4.6"
     ra-core: "npm:^5.4.3"
@@ -18840,6 +18987,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "tutorial@workspace:examples/tutorial"
   dependencies:
+    "@mui/icons-material": "npm:^6.0.0"
+    "@mui/material": "npm:^6.0.0"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@vitejs/plugin-react": "npm:^4.2.1"