diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2830e30f2e21c1..34e8e4f27cacde 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -676,7 +676,7 @@ jobs:
DANGER_COMMAND: prepareBundleSizeReport
- run:
name: build @mui packages
- command: pnpm lerna run --ignore @mui/icons-material --concurrency 8 --scope "@mui/*" build
+ command: pnpm lerna run --ignore @mui/icons-material --concurrency 6 --scope "@mui/*" build
- run:
name: create @mui/material canary distributable
command: |
diff --git a/.gitignore b/.gitignore
index e5d06778046fd6..f1ddd44449467c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,5 +41,4 @@ docs/public/static/blog/feed/*
# vale downloaded config
.github/styles/Google
.github/styles/write-good
-
-.nx/cache
\ No newline at end of file
+.nx/cache
diff --git a/package.json b/package.json
index d06dc543d51f62..6e7a8bfe642221 100644
--- a/package.json
+++ b/package.json
@@ -158,7 +158,7 @@
"karma-mocha": "^2.0.1",
"karma-sourcemap-loader": "^0.4.0",
"karma-webpack": "^5.0.0",
- "lerna": "8.0.1",
+ "lerna": "^8.0.1",
"lodash": "^4.17.21",
"markdownlint-cli2": "^0.11.0",
"mocha": "^10.2.0",
diff --git a/packages/mui-lab/src/Alert/Alert.js b/packages/mui-lab/src/Alert/Alert.js
index 3964b45ac38813..e668364a8b65e4 100644
--- a/packages/mui-lab/src/Alert/Alert.js
+++ b/packages/mui-lab/src/Alert/Alert.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import Alert from '@mui/material/Alert';
diff --git a/packages/mui-lab/src/AlertTitle/AlertTitle.js b/packages/mui-lab/src/AlertTitle/AlertTitle.js
index ced792053f7079..7a38fb93de2922 100644
--- a/packages/mui-lab/src/AlertTitle/AlertTitle.js
+++ b/packages/mui-lab/src/AlertTitle/AlertTitle.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import AlertTitle from '@mui/material/AlertTitle';
diff --git a/packages/mui-lab/src/Autocomplete/Autocomplete.js b/packages/mui-lab/src/Autocomplete/Autocomplete.js
index b8f3dcca0f9ae3..5556dd314c5c6f 100644
--- a/packages/mui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-lab/src/Autocomplete/Autocomplete.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
diff --git a/packages/mui-lab/src/AvatarGroup/AvatarGroup.js b/packages/mui-lab/src/AvatarGroup/AvatarGroup.js
index 29ae5033a18f12..2b8805621c0671 100644
--- a/packages/mui-lab/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-lab/src/AvatarGroup/AvatarGroup.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import AvatarGroup from '@mui/material/AvatarGroup';
diff --git a/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx b/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
index a48bcf74f0a9bf..d1b244336688e5 100644
--- a/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
+++ b/packages/mui-lab/src/CalendarPicker/CalendarPicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx b/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
index ea35825a54a654..5a5eedc42e23ba 100644
--- a/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
+++ b/packages/mui-lab/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
index 6aec81ba9ba4c1..ff9f19395863cb 100644
--- a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
+++ b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/DatePicker/DatePicker.tsx b/packages/mui-lab/src/DatePicker/DatePicker.tsx
index 778fe50643159f..de1b2d83ea164c 100644
--- a/packages/mui-lab/src/DatePicker/DatePicker.tsx
+++ b/packages/mui-lab/src/DatePicker/DatePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
index f6f8ce2f12ac61..c65c2db4a7d155 100644
--- a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
+++ b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
index c1303a7831c480..23bfe7b4a463b8 100644
--- a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
+++ b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
index 180ba02fa601d0..fc3f559a4a3ff2 100644
--- a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
+++ b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx b/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
index 4b0306748991c2..f09c774b9bf6e7 100644
--- a/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
+++ b/packages/mui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.js b/packages/mui-lab/src/LoadingButton/LoadingButton.js
index 65e5299a903f71..98ca8e4e90c730 100644
--- a/packages/mui-lab/src/LoadingButton/LoadingButton.js
+++ b/packages/mui-lab/src/LoadingButton/LoadingButton.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import { chainPropTypes } from '@mui/utils';
diff --git a/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx b/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
index 683030386b6de4..2e3ead720c4300 100644
--- a/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
+++ b/packages/mui-lab/src/LocalizationProvider/LocalizationProvider.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
let warnedOnce = false;
diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
index c6334d17604d05..c8797005e813c1 100644
--- a/packages/mui-lab/src/Masonry/Masonry.js
+++ b/packages/mui-lab/src/Masonry/Masonry.js
@@ -1,3 +1,4 @@
+'use client';
import { unstable_composeClasses as composeClasses } from '@mui/base';
import * as ReactDOM from 'react-dom';
import { styled, useThemeProps } from '@mui/material/styles';
diff --git a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
index 872f495b462a3a..f0b0f9defa6395 100644
--- a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
+++ b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
index 44ae89292cb83a..6a24b35b216f53 100644
--- a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
+++ b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx b/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
index 7564ab4a52634e..aef9f13eb0f734 100644
--- a/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
+++ b/packages/mui-lab/src/MobileTimePicker/MobileTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/MonthPicker/MonthPicker.tsx b/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
index fc67166a17a2a3..baa3643955e109 100644
--- a/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
+++ b/packages/mui-lab/src/MonthPicker/MonthPicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/Pagination/Pagination.js b/packages/mui-lab/src/Pagination/Pagination.js
index 4c61939a2f276b..35cd7d141f0887 100644
--- a/packages/mui-lab/src/Pagination/Pagination.js
+++ b/packages/mui-lab/src/Pagination/Pagination.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import Pagination from '@mui/material/Pagination';
diff --git a/packages/mui-lab/src/Pagination/usePagination.js b/packages/mui-lab/src/Pagination/usePagination.js
index 01f9b49c0154dc..a5ae1c1ac8bd88 100644
--- a/packages/mui-lab/src/Pagination/usePagination.js
+++ b/packages/mui-lab/src/Pagination/usePagination.js
@@ -1 +1,2 @@
+'use client';
export { default } from '@mui/material/usePagination';
diff --git a/packages/mui-lab/src/PaginationItem/PaginationItem.js b/packages/mui-lab/src/PaginationItem/PaginationItem.js
index 0f347b45871b5b..6a820a2fe69eb1 100644
--- a/packages/mui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/mui-lab/src/PaginationItem/PaginationItem.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PaginationItem from '@mui/material/PaginationItem';
diff --git a/packages/mui-lab/src/PickersDay/PickersDay.tsx b/packages/mui-lab/src/PickersDay/PickersDay.tsx
index 663efd6d92aace..dbd13583b7e868 100644
--- a/packages/mui-lab/src/PickersDay/PickersDay.tsx
+++ b/packages/mui-lab/src/PickersDay/PickersDay.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/Rating/Rating.js b/packages/mui-lab/src/Rating/Rating.js
index 45bf36fc3de04d..8650246d46cc43 100644
--- a/packages/mui-lab/src/Rating/Rating.js
+++ b/packages/mui-lab/src/Rating/Rating.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import Rating from '@mui/material/Rating';
diff --git a/packages/mui-lab/src/Skeleton/Skeleton.js b/packages/mui-lab/src/Skeleton/Skeleton.js
index ac8cc6b810ea5c..8062cb2ccf1a09 100644
--- a/packages/mui-lab/src/Skeleton/Skeleton.js
+++ b/packages/mui-lab/src/Skeleton/Skeleton.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import Skeleton from '@mui/material/Skeleton';
diff --git a/packages/mui-lab/src/SpeedDial/SpeedDial.js b/packages/mui-lab/src/SpeedDial/SpeedDial.js
index 68e73828edb40f..7904327ac2cdaa 100644
--- a/packages/mui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/mui-lab/src/SpeedDial/SpeedDial.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
diff --git a/packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js
index 88f32ea1d6ad20..f4ee276ff2f5e7 100644
--- a/packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/mui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import SpeedDialAction from '@mui/material/SpeedDialAction';
diff --git a/packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js b/packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js
index 122a72e2f60bc3..9ad37129261529 100644
--- a/packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js
+++ b/packages/mui-lab/src/SpeedDialIcon/SpeedDialIcon.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
diff --git a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
index cc93623efafca2..07aedfa8e1c201 100644
--- a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
+++ b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
index 2f234d6eee87d2..e2adcb889202ea 100644
--- a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
+++ b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx b/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
index 1a7dca9a3e9bdf..743b8168c0d2b2 100644
--- a/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
+++ b/packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/TabContext/TabContext.js b/packages/mui-lab/src/TabContext/TabContext.js
index 180491d55464a8..c4332280d7bc4d 100644
--- a/packages/mui-lab/src/TabContext/TabContext.js
+++ b/packages/mui-lab/src/TabContext/TabContext.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
diff --git a/packages/mui-lab/src/TabList/TabList.js b/packages/mui-lab/src/TabList/TabList.js
index f5a61725fa846b..98f17db639e25e 100644
--- a/packages/mui-lab/src/TabList/TabList.js
+++ b/packages/mui-lab/src/TabList/TabList.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import Tabs from '@mui/material/Tabs';
diff --git a/packages/mui-lab/src/TabPanel/TabPanel.js b/packages/mui-lab/src/TabPanel/TabPanel.js
index 3a5f8b805e6051..7e3883cfd2756c 100644
--- a/packages/mui-lab/src/TabPanel/TabPanel.js
+++ b/packages/mui-lab/src/TabPanel/TabPanel.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimePicker/TimePicker.tsx b/packages/mui-lab/src/TimePicker/TimePicker.tsx
index 8f44f244558cdc..8fcc8a2e79163c 100644
--- a/packages/mui-lab/src/TimePicker/TimePicker.tsx
+++ b/packages/mui-lab/src/TimePicker/TimePicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/Timeline/Timeline.tsx b/packages/mui-lab/src/Timeline/Timeline.tsx
index da0b1395d5ceb8..f388d198b084d3 100644
--- a/packages/mui-lab/src/Timeline/Timeline.tsx
+++ b/packages/mui-lab/src/Timeline/Timeline.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineConnector/TimelineConnector.js b/packages/mui-lab/src/TimelineConnector/TimelineConnector.js
index adb135a9683f1d..b915d2083f422f 100644
--- a/packages/mui-lab/src/TimelineConnector/TimelineConnector.js
+++ b/packages/mui-lab/src/TimelineConnector/TimelineConnector.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineContent/TimelineContent.js b/packages/mui-lab/src/TimelineContent/TimelineContent.js
index 07b150592bf697..44fa254a9cab2f 100644
--- a/packages/mui-lab/src/TimelineContent/TimelineContent.js
+++ b/packages/mui-lab/src/TimelineContent/TimelineContent.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineDot/TimelineDot.js b/packages/mui-lab/src/TimelineDot/TimelineDot.js
index 01830f27f99a4f..114a69959a15f3 100644
--- a/packages/mui-lab/src/TimelineDot/TimelineDot.js
+++ b/packages/mui-lab/src/TimelineDot/TimelineDot.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineItem/TimelineItem.js b/packages/mui-lab/src/TimelineItem/TimelineItem.js
index 48fa17b5898aa4..48b10e36820295 100644
--- a/packages/mui-lab/src/TimelineItem/TimelineItem.js
+++ b/packages/mui-lab/src/TimelineItem/TimelineItem.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js
index c0f8bf5ee0c38b..f4b511d318af2a 100644
--- a/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js
+++ b/packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js
index 1c44bc71c45e11..fcc885f3568425 100644
--- a/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js
+++ b/packages/mui-lab/src/TimelineSeparator/TimelineSeparator.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
diff --git a/packages/mui-lab/src/ToggleButton/ToggleButton.js b/packages/mui-lab/src/ToggleButton/ToggleButton.js
index 4a1131aef5d56d..cfd1a8feb1d044 100644
--- a/packages/mui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/mui-lab/src/ToggleButton/ToggleButton.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import ToggleButton from '@mui/material/ToggleButton';
diff --git a/packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
index 94fa0fa7c9be0e..5f1bb01afed3b3 100644
--- a/packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/mui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
diff --git a/packages/mui-lab/src/TreeItem/TreeItem.tsx b/packages/mui-lab/src/TreeItem/TreeItem.tsx
index e7f4df2aa2d284..5920ce65567cae 100644
--- a/packages/mui-lab/src/TreeItem/TreeItem.tsx
+++ b/packages/mui-lab/src/TreeItem/TreeItem.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
let warnedOnce = false;
diff --git a/packages/mui-lab/src/TreeView/TreeView.tsx b/packages/mui-lab/src/TreeView/TreeView.tsx
index 4f4cb268e06c9e..a9baef3618f4ba 100644
--- a/packages/mui-lab/src/TreeView/TreeView.tsx
+++ b/packages/mui-lab/src/TreeView/TreeView.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/YearPicker/YearPicker.tsx b/packages/mui-lab/src/YearPicker/YearPicker.tsx
index 01bbf805e6d3c9..b83ba6b10812dd 100644
--- a/packages/mui-lab/src/YearPicker/YearPicker.tsx
+++ b/packages/mui-lab/src/YearPicker/YearPicker.tsx
@@ -1,3 +1,4 @@
+'use client';
/* eslint-disable @typescript-eslint/no-unused-vars */
import * as React from 'react';
diff --git a/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.js b/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.js
index 67e7cd1beafd15..2a44d1f8d8feb8 100644
--- a/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.js
+++ b/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.js
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.tsx b/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.tsx
index 67e7cd1beafd15..2a44d1f8d8feb8 100644
--- a/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/ArrowDropDown.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/ArrowLeft.tsx b/packages/mui-lab/src/internal/svg-icons/ArrowLeft.tsx
index 10286b1485e6e0..4e275faef5a27f 100644
--- a/packages/mui-lab/src/internal/svg-icons/ArrowLeft.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/ArrowLeft.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/ArrowRight.tsx b/packages/mui-lab/src/internal/svg-icons/ArrowRight.tsx
index b971ab37f22a38..e5337f89e61693 100644
--- a/packages/mui-lab/src/internal/svg-icons/ArrowRight.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/ArrowRight.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/Calendar.tsx b/packages/mui-lab/src/internal/svg-icons/Calendar.tsx
index 784a259ad80186..b114266426eacd 100644
--- a/packages/mui-lab/src/internal/svg-icons/Calendar.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/Calendar.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/Clock.tsx b/packages/mui-lab/src/internal/svg-icons/Clock.tsx
index cf5e7a3b17039a..9c332f49f3d9da 100644
--- a/packages/mui-lab/src/internal/svg-icons/Clock.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/Clock.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/DateRange.tsx b/packages/mui-lab/src/internal/svg-icons/DateRange.tsx
index 704d9c91e200bf..0ff1de89a3b88c 100644
--- a/packages/mui-lab/src/internal/svg-icons/DateRange.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/DateRange.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/Pen.tsx b/packages/mui-lab/src/internal/svg-icons/Pen.tsx
index 5b613b8e6eca22..74c4eb3fbf15b4 100644
--- a/packages/mui-lab/src/internal/svg-icons/Pen.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/Pen.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-lab/src/internal/svg-icons/Time.tsx b/packages/mui-lab/src/internal/svg-icons/Time.tsx
index 3bdedba7c188dc..71e46443575a6b 100644
--- a/packages/mui-lab/src/internal/svg-icons/Time.tsx
+++ b/packages/mui-lab/src/internal/svg-icons/Time.tsx
@@ -1,3 +1,4 @@
+'use client';
import * as React from 'react';
import { createSvgIcon } from '@mui/material/utils';
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
index c7c04da74668ea..8b261492977dc3 100644
--- a/packages/mui-material/package.json
+++ b/packages/mui-material/package.json
@@ -58,7 +58,6 @@
"devDependencies": {
"@mui-internal/babel-macros": "workspace:^",
"@mui-internal/test-utils": "workspace:^",
- "@mui/icons-material": "workspace:^",
"@mui/lab": "workspace:*",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-replace": "^5.0.5",
diff --git a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
index 00aa3b267dffc7..5051a974f28e24 100644
--- a/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
+++ b/packages/mui-material/src/TabScrollButton/TabScrollButton.test.js
@@ -1,9 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from '@mui-internal/test-utils';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import TabScrollButton, { tabScrollButtonClasses as classes } from '@mui/material/TabScrollButton';
+import { createSvgIcon } from '@mui/material/utils';
+
+const ArrowBackIcon = createSvgIcon(, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(, 'ArrowForward');
describe('', () => {
const defaultProps = {
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
index 975ecaa6c83a31..a54a01d13f4d15 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -12,10 +12,18 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput';
import { filledInputClasses } from '@mui/material/FilledInput';
import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
import { svgIconClasses } from '@mui/material/SvgIcon';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
-import KeyboardDoubleArrowRightRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
+import { createSvgIcon } from '@mui/material/utils';
+
+const ArrowBackIcon = createSvgIcon(, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(, 'ArrowForward');
+const KeyboardDoubleArrowLeftRoundedIcon = createSvgIcon(
+ ,
+ 'KeyboardDoubleArrowLeftRounded',
+);
+const KeyboardDoubleArrowRightRoundedIcon = createSvgIcon(
+ ,
+ 'KeyboardDoubleArrowRightRounded',
+);
describe('', () => {
const noop = () => {};
diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js b/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
index 74e4e0449a3f0e..90be63ef209d1d 100644
--- a/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
+++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.test.js
@@ -1,9 +1,11 @@
import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from '@mui-internal/test-utils';
-import SortIcon from '@mui/icons-material/Sort';
import TableSortLabel, { tableSortLabelClasses as classes } from '@mui/material/TableSortLabel';
import ButtonBase from '@mui/material/ButtonBase';
+import { createSvgIcon } from '@mui/material/utils';
+
+const SortIcon = createSvgIcon(, 'Sort');
describe('', () => {
const { render } = createRenderer();
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
index da655ecff49149..6fe2d04b122c1b 100644
--- a/packages/mui-material/src/Tabs/Tabs.test.js
+++ b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -10,14 +10,16 @@ import {
strictModeDoubleLoggingSuppressed,
waitFor,
} from '@mui-internal/test-utils';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import Tab from '@mui/material/Tab';
import Tabs, { tabsClasses as classes } from '@mui/material/Tabs';
import { svgIconClasses } from '@mui/material/SvgIcon';
import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createSvgIcon } from '@mui/material/utils';
import capitalize from '../utils/capitalize';
+const ArrowBackIcon = createSvgIcon(, 'ArrowBack');
+const ArrowForwardIcon = createSvgIcon(, 'ArrowForward');
+
function findScrollButton(container, direction) {
return container.querySelector(`svg[data-testid="KeyboardArrow${capitalize(direction)}Icon"]`);
}
diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 59705255ed8dcd..960ad717f53df0 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -48,6 +48,10 @@ const PROJECTS: Project[] = [
additionalPaths: ['custom'],
additionalFiles: ['src/utils/createSvgIcon.js'],
},
+ {
+ name: 'lab',
+ rootPath: path.join(process.cwd(), 'packages/mui-lab'),
+ },
];
async function processFile(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec9a7c0511b71f..aca1d6f1e83bac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -267,7 +267,7 @@ importers:
specifier: ^5.0.0
version: 5.0.0(webpack@5.89.0)
lerna:
- specifier: 8.0.1
+ specifier: ^8.0.1
version: 8.0.1
lodash:
specifier: ^4.17.21
@@ -1534,9 +1534,6 @@ importers:
'@mui-internal/test-utils':
specifier: workspace:^
version: link:../test-utils
- '@mui/icons-material':
- specifier: workspace:^
- version: link:../mui-icons-material/build
'@mui/lab':
specifier: workspace:*
version: link:../mui-lab/build
diff --git a/renovate.json b/renovate.json
index 2072ab3ea583f5..2200b4ff4f69ff 100644
--- a/renovate.json
+++ b/renovate.json
@@ -105,12 +105,6 @@
{
"groupName": "@definitelytyped tools",
"matchPackagePatterns": ["@definitelytyped/*"]
- },
- {
- "groupName": "Lerna",
- "matchPackageNames": ["lerna"],
- "description": "Limited at 7.2.0 until https://github.com/mui/material-ui/issues/40025 is fixed",
- "allowedVersions": "<=7.2.0"
}
],
"postUpdateOptions": ["pnpmDedupe"],