@mui/material 6.0.0-alpha.9 → 6.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (611) hide show
  1. package/Accordion/Accordion.d.ts +3 -5
  2. package/Accordion/Accordion.js +3 -5
  3. package/AccordionActions/AccordionActions.d.ts +2 -2
  4. package/AccordionActions/AccordionActions.js +3 -3
  5. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  6. package/AccordionDetails/AccordionDetails.js +3 -3
  7. package/AccordionSummary/AccordionSummary.d.ts +3 -3
  8. package/AccordionSummary/AccordionSummary.js +3 -3
  9. package/Alert/Alert.d.ts +15 -6
  10. package/Alert/Alert.js +3 -3
  11. package/AlertTitle/AlertTitle.d.ts +3 -3
  12. package/AlertTitle/AlertTitle.js +3 -3
  13. package/AppBar/AppBar.d.ts +3 -3
  14. package/AppBar/AppBar.js +5 -9
  15. package/Autocomplete/Autocomplete.d.ts +3 -8
  16. package/Autocomplete/Autocomplete.js +13 -26
  17. package/Avatar/Avatar.d.ts +2 -3
  18. package/Avatar/Avatar.js +3 -4
  19. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  20. package/AvatarGroup/AvatarGroup.js +3 -3
  21. package/Backdrop/Backdrop.d.ts +5 -8
  22. package/Backdrop/Backdrop.js +5 -8
  23. package/Badge/Badge.d.ts +3 -3
  24. package/Badge/Badge.js +3 -3
  25. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  26. package/BottomNavigation/BottomNavigation.js +3 -3
  27. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  28. package/BottomNavigationAction/BottomNavigationAction.js +3 -3
  29. package/Box/Box.d.ts +2 -2
  30. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  31. package/Breadcrumbs/Breadcrumbs.js +3 -3
  32. package/Button/Button.d.ts +4 -4
  33. package/Button/Button.js +3 -3
  34. package/ButtonBase/ButtonBase.d.ts +2 -2
  35. package/ButtonBase/ButtonBase.js +23 -52
  36. package/ButtonBase/TouchRipple.js +3 -3
  37. package/ButtonGroup/ButtonGroup.d.ts +2 -2
  38. package/ButtonGroup/ButtonGroup.js +3 -3
  39. package/CHANGELOG.md +331 -3
  40. package/Card/Card.d.ts +3 -3
  41. package/Card/Card.js +3 -3
  42. package/CardActionArea/CardActionArea.d.ts +3 -3
  43. package/CardActionArea/CardActionArea.js +3 -3
  44. package/CardActions/CardActions.d.ts +2 -2
  45. package/CardActions/CardActions.js +3 -3
  46. package/CardContent/CardContent.d.ts +2 -2
  47. package/CardContent/CardContent.js +3 -3
  48. package/CardHeader/CardHeader.d.ts +2 -2
  49. package/CardHeader/CardHeader.js +3 -3
  50. package/CardMedia/CardMedia.d.ts +2 -2
  51. package/CardMedia/CardMedia.js +3 -3
  52. package/Checkbox/Checkbox.d.ts +4 -4
  53. package/Checkbox/Checkbox.js +3 -3
  54. package/Chip/Chip.d.ts +5 -5
  55. package/Chip/Chip.js +3 -5
  56. package/CircularProgress/CircularProgress.d.ts +2 -2
  57. package/CircularProgress/CircularProgress.js +3 -3
  58. package/Collapse/Collapse.d.ts +5 -5
  59. package/Collapse/Collapse.js +3 -4
  60. package/Container/Container.d.ts +2 -2
  61. package/CssBaseline/CssBaseline.d.ts +2 -2
  62. package/CssBaseline/CssBaseline.js +66 -8
  63. package/DefaultPropsProvider/DefaultPropsProvider.d.ts +15 -0
  64. package/DefaultPropsProvider/DefaultPropsProvider.js +29 -0
  65. package/DefaultPropsProvider/index.d.ts +1 -0
  66. package/DefaultPropsProvider/index.js +1 -0
  67. package/DefaultPropsProvider/package.json +6 -0
  68. package/Dialog/Dialog.d.ts +3 -3
  69. package/Dialog/Dialog.js +4 -7
  70. package/DialogActions/DialogActions.d.ts +2 -2
  71. package/DialogActions/DialogActions.js +3 -3
  72. package/DialogContent/DialogContent.d.ts +2 -2
  73. package/DialogContent/DialogContent.js +3 -3
  74. package/DialogContentText/DialogContentText.d.ts +3 -3
  75. package/DialogContentText/DialogContentText.js +3 -3
  76. package/DialogTitle/DialogTitle.d.ts +3 -3
  77. package/DialogTitle/DialogTitle.js +3 -3
  78. package/Divider/Divider.d.ts +3 -3
  79. package/Divider/Divider.js +3 -3
  80. package/Drawer/Drawer.d.ts +3 -3
  81. package/Drawer/Drawer.js +3 -4
  82. package/Fab/Fab.d.ts +3 -3
  83. package/Fab/Fab.js +3 -3
  84. package/Fade/Fade.d.ts +3 -3
  85. package/Fade/Fade.js +1 -1
  86. package/FilledInput/FilledInput.d.ts +3 -3
  87. package/FilledInput/FilledInput.js +13 -11
  88. package/FilledInput/filledInputClasses.d.ts +1 -13
  89. package/FilledInput/filledInputClasses.js +1 -1
  90. package/FormControl/FormControl.d.ts +6 -6
  91. package/FormControl/FormControl.js +3 -3
  92. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  93. package/FormControlLabel/FormControlLabel.js +3 -3
  94. package/FormGroup/FormGroup.d.ts +3 -3
  95. package/FormGroup/FormGroup.js +3 -3
  96. package/FormHelperText/FormHelperText.d.ts +2 -2
  97. package/FormHelperText/FormHelperText.js +3 -3
  98. package/FormLabel/FormLabel.d.ts +4 -4
  99. package/FormLabel/FormLabel.js +3 -3
  100. package/GlobalStyles/GlobalStyles.d.ts +3 -3
  101. package/Grid/Grid.d.ts +2 -2
  102. package/Grid/Grid.js +7 -13
  103. package/Grow/Grow.d.ts +5 -5
  104. package/Grow/Grow.js +1 -1
  105. package/Hidden/Hidden.d.ts +2 -2
  106. package/Hidden/hiddenCssClasses.d.ts +3 -0
  107. package/Icon/Icon.d.ts +3 -3
  108. package/Icon/Icon.js +3 -3
  109. package/IconButton/IconButton.d.ts +4 -4
  110. package/IconButton/IconButton.js +3 -5
  111. package/ImageList/ImageList.d.ts +2 -2
  112. package/ImageList/ImageList.js +3 -11
  113. package/ImageListItem/ImageListItem.d.ts +2 -2
  114. package/ImageListItem/ImageListItem.js +3 -3
  115. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  116. package/ImageListItemBar/ImageListItemBar.js +3 -3
  117. package/InitColorSchemeScript/InitColorSchemeScript.d.ts +10 -0
  118. package/InitColorSchemeScript/InitColorSchemeScript.js +16 -0
  119. package/InitColorSchemeScript/index.d.ts +1 -0
  120. package/InitColorSchemeScript/index.js +1 -0
  121. package/InitColorSchemeScript/package.json +6 -0
  122. package/Input/Input.d.ts +3 -3
  123. package/Input/Input.js +5 -9
  124. package/InputAdornment/InputAdornment.d.ts +2 -2
  125. package/InputAdornment/InputAdornment.js +3 -5
  126. package/InputBase/InputBase.d.ts +4 -6
  127. package/InputBase/InputBase.js +31 -40
  128. package/InputLabel/InputLabel.d.ts +3 -3
  129. package/InputLabel/InputLabel.js +3 -3
  130. package/LinearProgress/LinearProgress.d.ts +2 -2
  131. package/LinearProgress/LinearProgress.js +3 -3
  132. package/Link/Link.d.ts +4 -4
  133. package/Link/Link.js +7 -18
  134. package/List/List.d.ts +3 -3
  135. package/List/List.js +3 -3
  136. package/ListItem/ListItem.d.ts +3 -3
  137. package/ListItem/ListItem.js +3 -3
  138. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  139. package/ListItemAvatar/ListItemAvatar.js +3 -3
  140. package/ListItemButton/ListItemButton.d.ts +3 -3
  141. package/ListItemButton/ListItemButton.js +3 -3
  142. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  143. package/ListItemIcon/ListItemIcon.js +3 -3
  144. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  145. package/ListItemSecondaryAction/ListItemSecondaryAction.js +3 -3
  146. package/ListItemText/ListItemText.d.ts +2 -2
  147. package/ListItemText/ListItemText.js +3 -3
  148. package/ListSubheader/ListSubheader.d.ts +2 -2
  149. package/ListSubheader/ListSubheader.js +3 -3
  150. package/Menu/Menu.d.ts +4 -4
  151. package/Menu/Menu.js +4 -7
  152. package/MenuItem/MenuItem.d.ts +3 -3
  153. package/MenuItem/MenuItem.js +3 -3
  154. package/MenuList/MenuList.d.ts +4 -4
  155. package/MobileStepper/MobileStepper.d.ts +3 -3
  156. package/MobileStepper/MobileStepper.js +3 -3
  157. package/Modal/Modal.d.ts +10 -12
  158. package/Modal/Modal.js +32 -24
  159. package/NativeSelect/NativeSelect.d.ts +3 -3
  160. package/NativeSelect/NativeSelectInput.js +0 -4
  161. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  162. package/OutlinedInput/OutlinedInput.js +4 -5
  163. package/Pagination/Pagination.d.ts +2 -2
  164. package/Pagination/Pagination.js +3 -3
  165. package/PaginationItem/PaginationItem.d.ts +2 -2
  166. package/PaginationItem/PaginationItem.js +3 -3
  167. package/Paper/Paper.d.ts +3 -3
  168. package/Paper/Paper.js +3 -4
  169. package/PigmentContainer/PigmentContainer.d.ts +55 -0
  170. package/PigmentContainer/PigmentContainer.js +98 -0
  171. package/PigmentContainer/index.d.ts +3 -0
  172. package/PigmentContainer/index.js +3 -0
  173. package/PigmentContainer/package.json +6 -0
  174. package/PigmentGrid/PigmentGrid.d.ts +108 -0
  175. package/PigmentGrid/PigmentGrid.js +149 -0
  176. package/PigmentGrid/index.d.ts +3 -0
  177. package/PigmentGrid/index.js +3 -0
  178. package/{useTouchRipple → PigmentGrid}/package.json +1 -1
  179. package/PigmentHidden/PigmentHidden.d.ts +97 -0
  180. package/PigmentHidden/PigmentHidden.js +278 -0
  181. package/PigmentHidden/index.d.ts +2 -0
  182. package/PigmentHidden/index.js +2 -0
  183. package/PigmentHidden/package.json +6 -0
  184. package/PigmentStack/PigmentStack.d.ts +51 -0
  185. package/PigmentStack/PigmentStack.js +81 -0
  186. package/PigmentStack/index.d.ts +3 -0
  187. package/PigmentStack/index.js +3 -0
  188. package/PigmentStack/package.json +6 -0
  189. package/Popover/Popover.d.ts +20 -25
  190. package/Popover/Popover.js +30 -29
  191. package/Popper/Popper.d.ts +4 -4
  192. package/Popper/Popper.js +10 -9
  193. package/Radio/Radio.d.ts +3 -3
  194. package/Radio/Radio.js +3 -3
  195. package/RadioGroup/RadioGroup.d.ts +3 -3
  196. package/Rating/Rating.d.ts +2 -2
  197. package/Rating/Rating.js +8 -15
  198. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  199. package/ScopedCssBaseline/ScopedCssBaseline.js +24 -11
  200. package/Select/Select.d.ts +3 -3
  201. package/Skeleton/Skeleton.d.ts +2 -2
  202. package/Skeleton/Skeleton.js +3 -3
  203. package/Slide/Slide.d.ts +4 -4
  204. package/Slide/Slide.js +1 -1
  205. package/Slider/Slider.d.ts +3 -3
  206. package/Slider/Slider.js +3 -3
  207. package/Snackbar/Snackbar.d.ts +2 -2
  208. package/Snackbar/Snackbar.js +3 -4
  209. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  210. package/SnackbarContent/SnackbarContent.js +3 -3
  211. package/SpeedDial/SpeedDial.d.ts +2 -4
  212. package/SpeedDial/SpeedDial.js +3 -6
  213. package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
  214. package/SpeedDialAction/SpeedDialAction.js +3 -3
  215. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  216. package/SpeedDialIcon/SpeedDialIcon.js +3 -3
  217. package/Stack/Stack.d.ts +2 -2
  218. package/Step/Step.d.ts +2 -2
  219. package/Step/Step.js +3 -3
  220. package/StepButton/StepButton.d.ts +3 -3
  221. package/StepButton/StepButton.js +3 -3
  222. package/StepConnector/StepConnector.d.ts +3 -3
  223. package/StepConnector/StepConnector.js +3 -3
  224. package/StepContent/StepContent.d.ts +2 -2
  225. package/StepContent/StepContent.js +3 -3
  226. package/StepIcon/StepIcon.d.ts +2 -2
  227. package/StepIcon/StepIcon.js +3 -3
  228. package/StepLabel/StepLabel.d.ts +2 -4
  229. package/StepLabel/StepLabel.js +3 -7
  230. package/Stepper/Stepper.d.ts +2 -2
  231. package/Stepper/Stepper.js +7 -5
  232. package/Stepper/stepperClasses.d.ts +2 -0
  233. package/Stepper/stepperClasses.js +1 -1
  234. package/SvgIcon/SvgIcon.d.ts +3 -3
  235. package/SvgIcon/SvgIcon.js +3 -3
  236. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  237. package/SwipeableDrawer/SwipeableDrawer.js +3 -3
  238. package/Switch/Switch.d.ts +4 -4
  239. package/Switch/Switch.js +3 -3
  240. package/Tab/Tab.d.ts +4 -4
  241. package/Tab/Tab.js +14 -10
  242. package/Tab/tabClasses.d.ts +5 -1
  243. package/Tab/tabClasses.js +1 -1
  244. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  245. package/TabScrollButton/TabScrollButton.js +3 -3
  246. package/Table/Table.d.ts +2 -2
  247. package/Table/Table.js +3 -3
  248. package/TableBody/TableBody.d.ts +2 -2
  249. package/TableBody/TableBody.js +3 -3
  250. package/TableCell/TableCell.d.ts +2 -2
  251. package/TableCell/TableCell.js +3 -3
  252. package/TableContainer/TableContainer.d.ts +2 -2
  253. package/TableContainer/TableContainer.js +3 -3
  254. package/TableFooter/TableFooter.d.ts +2 -2
  255. package/TableFooter/TableFooter.js +3 -3
  256. package/TableHead/TableHead.d.ts +2 -2
  257. package/TableHead/TableHead.js +3 -3
  258. package/TablePagination/TablePagination.d.ts +4 -4
  259. package/TablePagination/TablePagination.js +3 -3
  260. package/TableRow/TableRow.d.ts +2 -2
  261. package/TableRow/TableRow.js +3 -3
  262. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  263. package/TableSortLabel/TableSortLabel.js +4 -4
  264. package/TableSortLabel/tableSortLabelClasses.d.ts +10 -2
  265. package/TableSortLabel/tableSortLabelClasses.js +1 -1
  266. package/Tabs/Tabs.d.ts +2 -2
  267. package/Tabs/Tabs.js +5 -14
  268. package/TextField/TextField.d.ts +10 -10
  269. package/TextField/TextField.js +3 -3
  270. package/ToggleButton/ToggleButton.d.ts +3 -3
  271. package/ToggleButton/ToggleButton.js +3 -3
  272. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
  273. package/ToggleButtonGroup/ToggleButtonGroup.js +3 -3
  274. package/Toolbar/Toolbar.d.ts +2 -2
  275. package/Toolbar/Toolbar.js +3 -3
  276. package/Tooltip/Tooltip.d.ts +2 -2
  277. package/Tooltip/Tooltip.js +7 -18
  278. package/Typography/Typography.d.ts +3 -3
  279. package/Typography/Typography.js +4 -4
  280. package/Zoom/Zoom.d.ts +3 -3
  281. package/Zoom/Zoom.js +1 -1
  282. package/index.js +1 -1
  283. package/modern/Accordion/Accordion.js +3 -5
  284. package/modern/AccordionActions/AccordionActions.js +3 -3
  285. package/modern/AccordionDetails/AccordionDetails.js +3 -3
  286. package/modern/AccordionSummary/AccordionSummary.js +3 -3
  287. package/modern/Alert/Alert.js +3 -3
  288. package/modern/AlertTitle/AlertTitle.js +3 -3
  289. package/modern/AppBar/AppBar.js +5 -9
  290. package/modern/Autocomplete/Autocomplete.js +13 -26
  291. package/modern/Avatar/Avatar.js +3 -4
  292. package/modern/AvatarGroup/AvatarGroup.js +3 -3
  293. package/modern/Backdrop/Backdrop.js +5 -8
  294. package/modern/Badge/Badge.js +3 -3
  295. package/modern/BottomNavigation/BottomNavigation.js +3 -3
  296. package/modern/BottomNavigationAction/BottomNavigationAction.js +3 -3
  297. package/modern/Breadcrumbs/Breadcrumbs.js +3 -3
  298. package/modern/Button/Button.js +3 -3
  299. package/modern/ButtonBase/ButtonBase.js +23 -52
  300. package/modern/ButtonBase/TouchRipple.js +3 -3
  301. package/modern/ButtonGroup/ButtonGroup.js +3 -3
  302. package/modern/Card/Card.js +3 -3
  303. package/modern/CardActionArea/CardActionArea.js +3 -3
  304. package/modern/CardActions/CardActions.js +3 -3
  305. package/modern/CardContent/CardContent.js +3 -3
  306. package/modern/CardHeader/CardHeader.js +3 -3
  307. package/modern/CardMedia/CardMedia.js +3 -3
  308. package/modern/Checkbox/Checkbox.js +3 -3
  309. package/modern/Chip/Chip.js +3 -5
  310. package/modern/CircularProgress/CircularProgress.js +3 -3
  311. package/modern/Collapse/Collapse.js +3 -4
  312. package/modern/CssBaseline/CssBaseline.js +66 -8
  313. package/modern/DefaultPropsProvider/DefaultPropsProvider.js +29 -0
  314. package/modern/DefaultPropsProvider/index.js +1 -0
  315. package/modern/Dialog/Dialog.js +4 -7
  316. package/modern/DialogActions/DialogActions.js +3 -3
  317. package/modern/DialogContent/DialogContent.js +3 -3
  318. package/modern/DialogContentText/DialogContentText.js +3 -3
  319. package/modern/DialogTitle/DialogTitle.js +3 -3
  320. package/modern/Divider/Divider.js +3 -3
  321. package/modern/Drawer/Drawer.js +3 -4
  322. package/modern/Fab/Fab.js +3 -3
  323. package/modern/Fade/Fade.js +1 -1
  324. package/modern/FilledInput/FilledInput.js +13 -11
  325. package/modern/FilledInput/filledInputClasses.js +1 -1
  326. package/modern/FormControl/FormControl.js +3 -3
  327. package/modern/FormControlLabel/FormControlLabel.js +3 -3
  328. package/modern/FormGroup/FormGroup.js +3 -3
  329. package/modern/FormHelperText/FormHelperText.js +3 -3
  330. package/modern/FormLabel/FormLabel.js +3 -3
  331. package/modern/Grid/Grid.js +7 -13
  332. package/modern/Grow/Grow.js +1 -1
  333. package/modern/Icon/Icon.js +3 -3
  334. package/modern/IconButton/IconButton.js +3 -5
  335. package/modern/ImageList/ImageList.js +3 -11
  336. package/modern/ImageListItem/ImageListItem.js +3 -3
  337. package/modern/ImageListItemBar/ImageListItemBar.js +3 -3
  338. package/modern/InitColorSchemeScript/InitColorSchemeScript.js +16 -0
  339. package/modern/InitColorSchemeScript/index.js +1 -0
  340. package/modern/Input/Input.js +5 -9
  341. package/modern/InputAdornment/InputAdornment.js +3 -5
  342. package/modern/InputBase/InputBase.js +31 -40
  343. package/modern/InputLabel/InputLabel.js +3 -3
  344. package/modern/LinearProgress/LinearProgress.js +3 -3
  345. package/modern/Link/Link.js +7 -18
  346. package/modern/List/List.js +3 -3
  347. package/modern/ListItem/ListItem.js +3 -3
  348. package/modern/ListItemAvatar/ListItemAvatar.js +3 -3
  349. package/modern/ListItemButton/ListItemButton.js +3 -3
  350. package/modern/ListItemIcon/ListItemIcon.js +3 -3
  351. package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js +3 -3
  352. package/modern/ListItemText/ListItemText.js +3 -3
  353. package/modern/ListSubheader/ListSubheader.js +3 -3
  354. package/modern/Menu/Menu.js +4 -7
  355. package/modern/MenuItem/MenuItem.js +3 -3
  356. package/modern/MobileStepper/MobileStepper.js +3 -3
  357. package/modern/Modal/Modal.js +32 -24
  358. package/modern/NativeSelect/NativeSelectInput.js +0 -4
  359. package/modern/OutlinedInput/OutlinedInput.js +4 -5
  360. package/modern/Pagination/Pagination.js +3 -3
  361. package/modern/PaginationItem/PaginationItem.js +3 -3
  362. package/modern/Paper/Paper.js +3 -4
  363. package/modern/PigmentContainer/PigmentContainer.js +98 -0
  364. package/modern/PigmentContainer/index.js +3 -0
  365. package/modern/PigmentGrid/PigmentGrid.js +149 -0
  366. package/modern/PigmentGrid/index.js +3 -0
  367. package/modern/PigmentHidden/PigmentHidden.js +278 -0
  368. package/modern/PigmentHidden/index.js +2 -0
  369. package/modern/PigmentStack/PigmentStack.js +81 -0
  370. package/modern/PigmentStack/index.js +3 -0
  371. package/modern/Popover/Popover.js +30 -29
  372. package/modern/Popper/Popper.js +10 -9
  373. package/modern/Radio/Radio.js +3 -3
  374. package/modern/Rating/Rating.js +8 -15
  375. package/modern/ScopedCssBaseline/ScopedCssBaseline.js +24 -11
  376. package/modern/Skeleton/Skeleton.js +3 -3
  377. package/modern/Slide/Slide.js +1 -1
  378. package/modern/Slider/Slider.js +3 -3
  379. package/modern/Snackbar/Snackbar.js +3 -4
  380. package/modern/SnackbarContent/SnackbarContent.js +3 -3
  381. package/modern/SpeedDial/SpeedDial.js +3 -6
  382. package/modern/SpeedDialAction/SpeedDialAction.js +3 -3
  383. package/modern/SpeedDialIcon/SpeedDialIcon.js +3 -3
  384. package/modern/Step/Step.js +3 -3
  385. package/modern/StepButton/StepButton.js +3 -3
  386. package/modern/StepConnector/StepConnector.js +3 -3
  387. package/modern/StepContent/StepContent.js +3 -3
  388. package/modern/StepIcon/StepIcon.js +3 -3
  389. package/modern/StepLabel/StepLabel.js +3 -7
  390. package/modern/Stepper/Stepper.js +7 -5
  391. package/modern/Stepper/stepperClasses.js +1 -1
  392. package/modern/SvgIcon/SvgIcon.js +3 -3
  393. package/modern/SwipeableDrawer/SwipeableDrawer.js +3 -3
  394. package/modern/Switch/Switch.js +3 -3
  395. package/modern/Tab/Tab.js +14 -10
  396. package/modern/Tab/tabClasses.js +1 -1
  397. package/modern/TabScrollButton/TabScrollButton.js +3 -3
  398. package/modern/Table/Table.js +3 -3
  399. package/modern/TableBody/TableBody.js +3 -3
  400. package/modern/TableCell/TableCell.js +3 -3
  401. package/modern/TableContainer/TableContainer.js +3 -3
  402. package/modern/TableFooter/TableFooter.js +3 -3
  403. package/modern/TableHead/TableHead.js +3 -3
  404. package/modern/TablePagination/TablePagination.js +3 -3
  405. package/modern/TableRow/TableRow.js +3 -3
  406. package/modern/TableSortLabel/TableSortLabel.js +4 -4
  407. package/modern/TableSortLabel/tableSortLabelClasses.js +1 -1
  408. package/modern/Tabs/Tabs.js +5 -14
  409. package/modern/TextField/TextField.js +3 -3
  410. package/modern/ToggleButton/ToggleButton.js +3 -3
  411. package/modern/ToggleButtonGroup/ToggleButtonGroup.js +3 -3
  412. package/modern/Toolbar/Toolbar.js +3 -3
  413. package/modern/Tooltip/Tooltip.js +7 -18
  414. package/modern/Typography/Typography.js +4 -4
  415. package/modern/Zoom/Zoom.js +1 -1
  416. package/modern/index.js +1 -1
  417. package/modern/styles/CssVarsProvider.js +19 -7
  418. package/modern/styles/createTheme.js +1 -1
  419. package/modern/styles/createTransitions.js +2 -2
  420. package/modern/styles/extendTheme.js +3 -0
  421. package/modern/styles/index.js +1 -1
  422. package/modern/styles/stringifyTheme.js +55 -0
  423. package/modern/useLazyRipple/index.js +3 -0
  424. package/modern/useLazyRipple/useLazyRipple.js +85 -0
  425. package/modern/usePagination/usePagination.js +1 -1
  426. package/modern/utils/index.js +0 -1
  427. package/modern/zero-styled/index.js +24 -5
  428. package/node/Accordion/Accordion.js +2 -4
  429. package/node/AccordionActions/AccordionActions.js +2 -2
  430. package/node/AccordionDetails/AccordionDetails.js +2 -2
  431. package/node/AccordionSummary/AccordionSummary.js +2 -2
  432. package/node/Alert/Alert.js +2 -2
  433. package/node/AlertTitle/AlertTitle.js +2 -2
  434. package/node/AppBar/AppBar.js +4 -8
  435. package/node/Autocomplete/Autocomplete.js +12 -25
  436. package/node/Avatar/Avatar.js +2 -3
  437. package/node/AvatarGroup/AvatarGroup.js +2 -2
  438. package/node/Backdrop/Backdrop.js +4 -7
  439. package/node/Badge/Badge.js +2 -2
  440. package/node/BottomNavigation/BottomNavigation.js +2 -2
  441. package/node/BottomNavigationAction/BottomNavigationAction.js +2 -2
  442. package/node/Breadcrumbs/Breadcrumbs.js +2 -2
  443. package/node/Button/Button.js +2 -2
  444. package/node/ButtonBase/ButtonBase.js +22 -51
  445. package/node/ButtonBase/TouchRipple.js +2 -2
  446. package/node/ButtonGroup/ButtonGroup.js +2 -2
  447. package/node/Card/Card.js +2 -2
  448. package/node/CardActionArea/CardActionArea.js +2 -2
  449. package/node/CardActions/CardActions.js +2 -2
  450. package/node/CardContent/CardContent.js +2 -2
  451. package/node/CardHeader/CardHeader.js +2 -2
  452. package/node/CardMedia/CardMedia.js +2 -2
  453. package/node/Checkbox/Checkbox.js +2 -2
  454. package/node/Chip/Chip.js +2 -4
  455. package/node/CircularProgress/CircularProgress.js +2 -2
  456. package/node/Collapse/Collapse.js +3 -4
  457. package/node/CssBaseline/CssBaseline.js +70 -10
  458. package/node/DefaultPropsProvider/DefaultPropsProvider.js +38 -0
  459. package/node/DefaultPropsProvider/index.js +20 -0
  460. package/node/Dialog/Dialog.js +4 -7
  461. package/node/DialogActions/DialogActions.js +2 -2
  462. package/node/DialogContent/DialogContent.js +2 -2
  463. package/node/DialogContentText/DialogContentText.js +2 -2
  464. package/node/DialogTitle/DialogTitle.js +2 -2
  465. package/node/Divider/Divider.js +2 -2
  466. package/node/Drawer/Drawer.js +3 -4
  467. package/node/Fab/Fab.js +2 -2
  468. package/node/Fade/Fade.js +2 -2
  469. package/node/FilledInput/FilledInput.js +12 -10
  470. package/node/FilledInput/filledInputClasses.js +1 -1
  471. package/node/FormControl/FormControl.js +2 -2
  472. package/node/FormControlLabel/FormControlLabel.js +2 -2
  473. package/node/FormGroup/FormGroup.js +2 -2
  474. package/node/FormHelperText/FormHelperText.js +2 -2
  475. package/node/FormLabel/FormLabel.js +2 -2
  476. package/node/Grid/Grid.js +7 -13
  477. package/node/Grow/Grow.js +2 -2
  478. package/node/Icon/Icon.js +2 -2
  479. package/node/IconButton/IconButton.js +2 -4
  480. package/node/ImageList/ImageList.js +2 -10
  481. package/node/ImageListItem/ImageListItem.js +2 -2
  482. package/node/ImageListItemBar/ImageListItemBar.js +2 -2
  483. package/node/InitColorSchemeScript/InitColorSchemeScript.js +25 -0
  484. package/node/InitColorSchemeScript/index.js +13 -0
  485. package/node/Input/Input.js +4 -8
  486. package/node/InputAdornment/InputAdornment.js +2 -4
  487. package/node/InputBase/InputBase.js +30 -39
  488. package/node/InputLabel/InputLabel.js +2 -2
  489. package/node/LinearProgress/LinearProgress.js +2 -2
  490. package/node/Link/Link.js +7 -18
  491. package/node/List/List.js +2 -2
  492. package/node/ListItem/ListItem.js +2 -2
  493. package/node/ListItemAvatar/ListItemAvatar.js +2 -2
  494. package/node/ListItemButton/ListItemButton.js +2 -2
  495. package/node/ListItemIcon/ListItemIcon.js +2 -2
  496. package/node/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -2
  497. package/node/ListItemText/ListItemText.js +2 -2
  498. package/node/ListSubheader/ListSubheader.js +2 -2
  499. package/node/Menu/Menu.js +3 -6
  500. package/node/MenuItem/MenuItem.js +2 -2
  501. package/node/MobileStepper/MobileStepper.js +2 -2
  502. package/node/Modal/Modal.js +31 -24
  503. package/node/NativeSelect/NativeSelectInput.js +0 -4
  504. package/node/OutlinedInput/OutlinedInput.js +3 -4
  505. package/node/Pagination/Pagination.js +2 -2
  506. package/node/PaginationItem/PaginationItem.js +2 -2
  507. package/node/Paper/Paper.js +3 -4
  508. package/node/PigmentContainer/PigmentContainer.js +108 -0
  509. package/node/PigmentContainer/index.js +36 -0
  510. package/node/PigmentGrid/PigmentGrid.js +159 -0
  511. package/node/PigmentGrid/index.js +36 -0
  512. package/node/PigmentHidden/PigmentHidden.js +287 -0
  513. package/node/PigmentHidden/index.js +26 -0
  514. package/node/PigmentStack/PigmentStack.js +91 -0
  515. package/node/PigmentStack/index.js +36 -0
  516. package/node/Popover/Popover.js +29 -28
  517. package/node/Popper/Popper.js +11 -10
  518. package/node/Radio/Radio.js +2 -2
  519. package/node/Rating/Rating.js +6 -13
  520. package/node/ScopedCssBaseline/ScopedCssBaseline.js +27 -13
  521. package/node/Skeleton/Skeleton.js +2 -2
  522. package/node/Slide/Slide.js +2 -2
  523. package/node/Slider/Slider.js +2 -2
  524. package/node/Snackbar/Snackbar.js +3 -4
  525. package/node/SnackbarContent/SnackbarContent.js +2 -2
  526. package/node/SpeedDial/SpeedDial.js +3 -6
  527. package/node/SpeedDialAction/SpeedDialAction.js +2 -2
  528. package/node/SpeedDialIcon/SpeedDialIcon.js +2 -2
  529. package/node/Step/Step.js +2 -2
  530. package/node/StepButton/StepButton.js +2 -2
  531. package/node/StepConnector/StepConnector.js +2 -2
  532. package/node/StepContent/StepContent.js +2 -2
  533. package/node/StepIcon/StepIcon.js +2 -2
  534. package/node/StepLabel/StepLabel.js +2 -6
  535. package/node/Stepper/Stepper.js +6 -4
  536. package/node/Stepper/stepperClasses.js +1 -1
  537. package/node/SvgIcon/SvgIcon.js +2 -2
  538. package/node/SwipeableDrawer/SwipeableDrawer.js +4 -4
  539. package/node/Switch/Switch.js +2 -2
  540. package/node/Tab/Tab.js +13 -9
  541. package/node/Tab/tabClasses.js +1 -1
  542. package/node/TabScrollButton/TabScrollButton.js +2 -2
  543. package/node/Table/Table.js +2 -2
  544. package/node/TableBody/TableBody.js +2 -2
  545. package/node/TableCell/TableCell.js +2 -2
  546. package/node/TableContainer/TableContainer.js +2 -2
  547. package/node/TableFooter/TableFooter.js +2 -2
  548. package/node/TableHead/TableHead.js +2 -2
  549. package/node/TablePagination/TablePagination.js +2 -2
  550. package/node/TableRow/TableRow.js +2 -2
  551. package/node/TableSortLabel/TableSortLabel.js +3 -3
  552. package/node/TableSortLabel/tableSortLabelClasses.js +1 -1
  553. package/node/Tabs/Tabs.js +5 -14
  554. package/node/TextField/TextField.js +2 -2
  555. package/node/ToggleButton/ToggleButton.js +2 -2
  556. package/node/ToggleButtonGroup/ToggleButtonGroup.js +2 -2
  557. package/node/Toolbar/Toolbar.js +2 -2
  558. package/node/Tooltip/Tooltip.js +7 -18
  559. package/node/Typography/Typography.js +4 -4
  560. package/node/Zoom/Zoom.js +2 -2
  561. package/node/index.js +1 -1
  562. package/node/styles/CssVarsProvider.js +20 -8
  563. package/node/styles/createTheme.js +1 -1
  564. package/node/styles/createTransitions.js +2 -2
  565. package/node/styles/extendTheme.js +3 -0
  566. package/node/styles/index.js +8 -1
  567. package/node/styles/stringifyTheme.js +62 -0
  568. package/node/{useTouchRipple → useLazyRipple}/index.js +2 -2
  569. package/node/useLazyRipple/useLazyRipple.js +104 -0
  570. package/node/usePagination/usePagination.js +1 -1
  571. package/node/utils/index.js +0 -7
  572. package/node/zero-styled/index.js +33 -5
  573. package/package.json +24 -8
  574. package/styles/CssVarsProvider.d.ts +3 -2
  575. package/styles/CssVarsProvider.js +19 -7
  576. package/styles/createTheme.js +1 -1
  577. package/styles/createTransitions.js +2 -2
  578. package/styles/extendTheme.js +3 -0
  579. package/styles/index.d.ts +1 -0
  580. package/styles/index.js +1 -1
  581. package/styles/responsiveFontSizes.d.ts +3 -4
  582. package/styles/stringifyTheme.d.ts +20 -0
  583. package/styles/stringifyTheme.js +55 -0
  584. package/useLazyRipple/index.d.ts +1 -0
  585. package/useLazyRipple/index.js +3 -0
  586. package/useLazyRipple/package.json +6 -0
  587. package/useLazyRipple/useLazyRipple.d.ts +32 -0
  588. package/useLazyRipple/useLazyRipple.js +85 -0
  589. package/usePagination/usePagination.js +1 -1
  590. package/utils/index.d.ts +0 -1
  591. package/utils/index.js +0 -1
  592. package/zero-styled/index.d.ts +10 -2
  593. package/zero-styled/index.js +24 -5
  594. package/modern/useMediaQuery/useMediaQueryTheme.js +0 -8
  595. package/modern/useTouchRipple/index.js +0 -3
  596. package/modern/useTouchRipple/useTouchRipple.js +0 -94
  597. package/modern/utils/scrollLeft.js +0 -1
  598. package/modern/utils/useIsFocusVisible.js +0 -4
  599. package/node/useMediaQuery/useMediaQueryTheme.js +0 -13
  600. package/node/useTouchRipple/useTouchRipple.js +0 -105
  601. package/node/utils/scrollLeft.js +0 -18
  602. package/node/utils/useIsFocusVisible.js +0 -10
  603. package/useMediaQuery/useMediaQueryTheme.d.ts +0 -3
  604. package/useMediaQuery/useMediaQueryTheme.js +0 -8
  605. package/useTouchRipple/index.d.ts +0 -1
  606. package/useTouchRipple/index.js +0 -3
  607. package/useTouchRipple/useTouchRipple.d.ts +0 -28
  608. package/useTouchRipple/useTouchRipple.js +0 -94
  609. package/utils/scrollLeft.js +0 -1
  610. package/utils/useIsFocusVisible.d.ts +0 -3
  611. package/utils/useIsFocusVisible.js +0 -4
package/Chip/Chip.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface ChipOwnProps {
15
15
  /**
16
16
  * The Avatar element to display.
17
17
  */
18
- avatar?: React.ReactElement<any>;
18
+ avatar?: React.ReactElement<unknown>;
19
19
  /**
20
20
  * This prop isn't supported.
21
21
  * Use the `component` prop if you need to change the children structure.
@@ -47,7 +47,7 @@ export interface ChipOwnProps {
47
47
  /**
48
48
  * Override the default delete icon element. Shown only if `onDelete` is set.
49
49
  */
50
- deleteIcon?: React.ReactElement<any>;
50
+ deleteIcon?: React.ReactElement<unknown>;
51
51
  /**
52
52
  * If `true`, the component is disabled.
53
53
  * @default false
@@ -56,7 +56,7 @@ export interface ChipOwnProps {
56
56
  /**
57
57
  * Icon element.
58
58
  */
59
- icon?: React.ReactElement<any>;
59
+ icon?: React.ReactElement<unknown>;
60
60
  /**
61
61
  * The content of the component.
62
62
  */
@@ -105,11 +105,11 @@ export interface ChipTypeMap<
105
105
  *
106
106
  * Demos:
107
107
  *
108
- * - [Chip](https://mui.com/material-ui/react-chip/)
108
+ * - [Chip](https://next.mui.com/material-ui/react-chip/)
109
109
  *
110
110
  * API:
111
111
  *
112
- * - [Chip API](https://mui.com/material-ui/api/chip/)
112
+ * - [Chip API](https://next.mui.com/material-ui/api/chip/)
113
113
  */
114
114
  declare const Chip: OverridableComponent<ChipTypeMap>;
115
115
 
package/Chip/Chip.js CHANGED
@@ -10,10 +10,10 @@ import useForkRef from '../utils/useForkRef';
10
10
  import unsupportedProp from '../utils/unsupportedProp';
11
11
  import capitalize from '../utils/capitalize';
12
12
  import ButtonBase from '../ButtonBase';
13
- import { styled, createUseThemeProps } from '../zero-styled';
13
+ import { styled } from '../zero-styled';
14
+ import { useDefaultProps } from '../DefaultPropsProvider';
14
15
  import chipClasses, { getChipUtilityClass } from './chipClasses';
15
16
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
- const useThemeProps = createUseThemeProps('MuiChip');
17
17
  const useUtilityClasses = ownerState => {
18
18
  const {
19
19
  classes,
@@ -346,7 +346,7 @@ function isDeleteKeyboardEvent(keyboardEvent) {
346
346
  * Chips represent complex entities in small blocks, such as a contact.
347
347
  */
348
348
  const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
349
- const props = useThemeProps({
349
+ const props = useDefaultProps({
350
350
  props: inProps,
351
351
  name: 'MuiChip'
352
352
  });
@@ -396,8 +396,6 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
396
396
  if (event.currentTarget === event.target) {
397
397
  if (onDelete && isDeleteKeyboardEvent(event)) {
398
398
  onDelete(event);
399
- } else if (event.key === 'Escape' && chipRef.current) {
400
- chipRef.current.blur();
401
399
  }
402
400
  }
403
401
  if (onKeyUp) {
@@ -67,10 +67,10 @@ export interface CircularProgressProps
67
67
  *
68
68
  * Demos:
69
69
  *
70
- * - [Progress](https://mui.com/material-ui/react-progress/)
70
+ * - [Progress](https://next.mui.com/material-ui/react-progress/)
71
71
  *
72
72
  * API:
73
73
  *
74
- * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
74
+ * - [CircularProgress API](https://next.mui.com/material-ui/api/circular-progress/)
75
75
  */
76
76
  export default function CircularProgress(props: CircularProgressProps): React.JSX.Element;
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import chainPropTypes from '@mui/utils/chainPropTypes';
7
7
  import composeClasses from '@mui/utils/composeClasses';
8
- import { keyframes, css, createUseThemeProps, styled } from '../zero-styled';
8
+ import { keyframes, css, styled } from '../zero-styled';
9
+ import { useDefaultProps } from '../DefaultPropsProvider';
9
10
  import capitalize from '../utils/capitalize';
10
11
  import { getCircularProgressUtilityClass } from './circularProgressClasses';
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const useThemeProps = createUseThemeProps('MuiCircularProgress');
13
13
  const SIZE = 44;
14
14
  const circularRotateKeyframe = keyframes`
15
15
  0% {
@@ -151,7 +151,7 @@ const CircularProgressCircle = styled('circle', {
151
151
  * attribute to `true` on that region until it has finished loading.
152
152
  */
153
153
  const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
154
- const props = useThemeProps({
154
+ const props = useDefaultProps({
155
155
  props: inProps,
156
156
  name: 'MuiCircularProgress'
157
157
  });
@@ -54,18 +54,18 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
54
54
 
55
55
  /**
56
56
  * The Collapse transition is used by the
57
- * [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
57
+ * [Vertical Stepper](https://next.mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
58
58
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
59
59
  *
60
60
  * Demos:
61
61
  *
62
- * - [Card](https://mui.com/material-ui/react-card/)
63
- * - [Lists](https://mui.com/material-ui/react-list/)
64
- * - [Transitions](https://mui.com/material-ui/transitions/)
62
+ * - [Card](https://next.mui.com/material-ui/react-card/)
63
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
64
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
65
65
  *
66
66
  * API:
67
67
  *
68
- * - [Collapse API](https://mui.com/material-ui/api/collapse/)
68
+ * - [Collapse API](https://next.mui.com/material-ui/api/collapse/)
69
69
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
70
70
  */
71
71
 
@@ -7,14 +7,13 @@ import { Transition } from 'react-transition-group';
7
7
  import useTimeout from '@mui/utils/useTimeout';
8
8
  import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
9
9
  import composeClasses from '@mui/utils/composeClasses';
10
- import { styled, createUseThemeProps } from '../zero-styled';
10
+ import { styled, useTheme } from '../zero-styled';
11
+ import { useDefaultProps } from '../DefaultPropsProvider';
11
12
  import { duration } from '../styles/createTransitions';
12
13
  import { getTransitionProps } from '../transitions/utils';
13
- import useTheme from '../styles/useTheme';
14
14
  import { useForkRef } from '../utils';
15
15
  import { getCollapseUtilityClass } from './collapseClasses';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
- const useThemeProps = createUseThemeProps('MuiCollapse');
18
17
  const useUtilityClasses = ownerState => {
19
18
  const {
20
19
  orientation,
@@ -119,7 +118,7 @@ const CollapseWrapperInner = styled('div', {
119
118
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
120
119
  */
121
120
  const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
122
- const props = useThemeProps({
121
+ const props = useDefaultProps({
123
122
  props: inProps,
124
123
  name: 'MuiCollapse'
125
124
  });
@@ -47,11 +47,11 @@ export interface ContainerTypeMap<
47
47
  *
48
48
  * Demos:
49
49
  *
50
- * - [Container](https://mui.com/material-ui/react-container/)
50
+ * - [Container](https://next.mui.com/material-ui/react-container/)
51
51
  *
52
52
  * API:
53
53
  *
54
- * - [Container API](https://mui.com/material-ui/api/container/)
54
+ * - [Container API](https://next.mui.com/material-ui/api/container/)
55
55
  */
56
56
  declare const Container: OverridableComponent<ContainerTypeMap>;
57
57
 
@@ -20,10 +20,10 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
20
20
  *
21
21
  * Demos:
22
22
  *
23
- * - [CSS Baseline](https://mui.com/material-ui/react-css-baseline/)
23
+ * - [CSS Baseline](https://next.mui.com/material-ui/react-css-baseline/)
24
24
  *
25
25
  * API:
26
26
  *
27
- * - [CssBaseline API](https://mui.com/material-ui/api/css-baseline/)
27
+ * - [CssBaseline API](https://next.mui.com/material-ui/api/css-baseline/)
28
28
  */
29
29
  export default function CssBaseline(props: CssBaselineProps): React.JSX.Element;
@@ -2,9 +2,12 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import useThemeProps from '../styles/useThemeProps';
6
- import GlobalStyles from '../GlobalStyles';
5
+ import { globalCss } from '../zero-styled';
6
+ import { useDefaultProps } from '../DefaultPropsProvider';
7
+
8
+ // to determine if the global styles are static or dynamic
7
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
+ const isDynamicSupport = typeof globalCss({}) === 'function';
8
11
  export const html = (theme, enableColorScheme) => ({
9
12
  WebkitFontSmoothing: 'antialiased',
10
13
  // Antialiasing.
@@ -33,9 +36,20 @@ export const styles = (theme, enableColorScheme = false) => {
33
36
  const colorSchemeStyles = {};
34
37
  if (enableColorScheme && theme.colorSchemes) {
35
38
  Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
36
- colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
37
- colorScheme: scheme.palette?.mode
38
- };
39
+ const selector = theme.getColorSchemeSelector(key);
40
+ if (selector.startsWith('@')) {
41
+ // for @media (prefers-color-scheme), we need to target :root
42
+ colorSchemeStyles[selector] = {
43
+ ':root': {
44
+ colorScheme: scheme.palette?.mode
45
+ }
46
+ };
47
+ } else {
48
+ // else, it's likely that the selector already target an element with a class or data attribute
49
+ colorSchemeStyles[selector.replace(/\s*&/, '')] = {
50
+ colorScheme: scheme.palette?.mode
51
+ };
52
+ }
39
53
  });
40
54
  }
41
55
  let defaultStyles = {
@@ -65,11 +79,50 @@ export const styles = (theme, enableColorScheme = false) => {
65
79
  return defaultStyles;
66
80
  };
67
81
 
82
+ // `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better.
83
+ const SELECTOR = 'mui-ecs';
84
+ const staticStyles = theme => {
85
+ const result = styles(theme, false);
86
+ const baseStyles = Array.isArray(result) ? result[0] : result;
87
+ if (!theme.vars && baseStyles) {
88
+ baseStyles.html[`:root:has(${SELECTOR})`] = {
89
+ colorScheme: theme.palette.mode
90
+ };
91
+ }
92
+ if (theme.colorSchemes) {
93
+ Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
94
+ const selector = theme.getColorSchemeSelector(key);
95
+ if (selector.startsWith('@')) {
96
+ // for @media (prefers-color-scheme), we need to target :root
97
+ baseStyles[selector] = {
98
+ [`:root:not(:has(.${SELECTOR}))`]: {
99
+ colorScheme: scheme.palette?.mode
100
+ }
101
+ };
102
+ } else {
103
+ // else, it's likely that the selector already target an element with a class or data attribute
104
+ baseStyles[selector.replace(/\s*&/, '')] = {
105
+ [`&:not(:has(.${SELECTOR}))`]: {
106
+ colorScheme: scheme.palette?.mode
107
+ }
108
+ };
109
+ }
110
+ });
111
+ }
112
+ return result;
113
+ };
114
+ const GlobalStyles = globalCss(isDynamicSupport ? ({
115
+ theme,
116
+ enableColorScheme
117
+ }) => styles(theme, enableColorScheme) : ({
118
+ theme
119
+ }) => staticStyles(theme));
120
+
68
121
  /**
69
122
  * Kickstart an elegant, consistent, and simple baseline to build upon.
70
123
  */
71
124
  function CssBaseline(inProps) {
72
- const props = useThemeProps({
125
+ const props = useDefaultProps({
73
126
  props: inProps,
74
127
  name: 'MuiCssBaseline'
75
128
  });
@@ -78,8 +131,13 @@ function CssBaseline(inProps) {
78
131
  enableColorScheme = false
79
132
  } = props;
80
133
  return /*#__PURE__*/_jsxs(React.Fragment, {
81
- children: [/*#__PURE__*/_jsx(GlobalStyles, {
82
- styles: theme => styles(theme, enableColorScheme)
134
+ children: [isDynamicSupport && /*#__PURE__*/_jsx(GlobalStyles, {
135
+ enableColorScheme: enableColorScheme
136
+ }), !isDynamicSupport && !enableColorScheme && /*#__PURE__*/_jsx("span", {
137
+ className: SELECTOR,
138
+ style: {
139
+ display: 'none'
140
+ }
83
141
  }), children]
84
142
  });
85
143
  }
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import type { ComponentsPropsList } from '../styles/props';
3
+ declare function DefaultPropsProvider(props: React.PropsWithChildren<{
4
+ value: {
5
+ [P in keyof ComponentsPropsList]?: Partial<ComponentsPropsList[P]>;
6
+ };
7
+ }>): React.JSX.Element;
8
+ declare namespace DefaultPropsProvider {
9
+ var propTypes: any;
10
+ }
11
+ export default DefaultPropsProvider;
12
+ export declare function useDefaultProps<Props extends Record<string, any>>(params: {
13
+ props: Props;
14
+ name: string;
15
+ }): Props;
@@ -0,0 +1,29 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import PropTypes from 'prop-types';
5
+ import SystemDefaultPropsProvider, { useDefaultProps as useSystemDefaultProps } from '@mui/system/DefaultPropsProvider';
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ function DefaultPropsProvider(props) {
8
+ return /*#__PURE__*/_jsx(SystemDefaultPropsProvider, {
9
+ ...props
10
+ });
11
+ }
12
+ process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
13
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
14
+ // │ These PropTypes are generated from the TypeScript type definitions. │
15
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
16
+ // └─────────────────────────────────────────────────────────────────────┘
17
+ /**
18
+ * @ignore
19
+ */
20
+ children: PropTypes.node,
21
+ /**
22
+ * @ignore
23
+ */
24
+ value: PropTypes.object.isRequired
25
+ } : void 0;
26
+ export default DefaultPropsProvider;
27
+ export function useDefaultProps(params) {
28
+ return useSystemDefaultProps(params);
29
+ }
@@ -0,0 +1 @@
1
+ export { default, useDefaultProps } from './DefaultPropsProvider';
@@ -0,0 +1 @@
1
+ export { default, useDefaultProps } from './DefaultPropsProvider';
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "./index.js",
4
+ "main": "../node/DefaultPropsProvider/index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -111,11 +111,11 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
111
111
  *
112
112
  * Demos:
113
113
  *
114
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
114
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
115
115
  *
116
116
  * API:
117
117
  *
118
- * - [Dialog API](https://mui.com/material-ui/api/dialog/)
119
- * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
118
+ * - [Dialog API](https://next.mui.com/material-ui/api/dialog/)
119
+ * - inherits [Modal API](https://next.mui.com/material-ui/api/modal/)
120
120
  */
121
121
  export default function Dialog(props: DialogProps): React.JSX.Element;
package/Dialog/Dialog.js CHANGED
@@ -12,10 +12,9 @@ import Paper from '../Paper';
12
12
  import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
13
13
  import DialogContext from './DialogContext';
14
14
  import Backdrop from '../Backdrop';
15
- import useTheme from '../styles/useTheme';
16
- import { styled, createUseThemeProps } from '../zero-styled';
15
+ import { styled, useTheme } from '../zero-styled';
16
+ import { useDefaultProps } from '../DefaultPropsProvider';
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
- const useThemeProps = createUseThemeProps('MuiDialog');
19
18
  const DialogBackdrop = styled(Backdrop, {
20
19
  name: 'MuiDialog',
21
20
  slot: 'Backdrop',
@@ -106,8 +105,6 @@ const DialogPaper = styled(Paper, {
106
105
  }) => ({
107
106
  margin: 32,
108
107
  position: 'relative',
109
- overflowY: 'auto',
110
- // Fix IE11 issue, to remove at some point.
111
108
  '@media print': {
112
109
  overflowY: 'visible',
113
110
  boxShadow: 'none'
@@ -128,7 +125,7 @@ const DialogPaper = styled(Paper, {
128
125
  style: {
129
126
  display: 'inline-block',
130
127
  verticalAlign: 'middle',
131
- textAlign: 'left' // 'initial' doesn't work on IE11
128
+ textAlign: 'initial'
132
129
  }
133
130
  }, {
134
131
  props: ({
@@ -191,7 +188,7 @@ const DialogPaper = styled(Paper, {
191
188
  * Dialogs are overlaid modal paper based components with a backdrop.
192
189
  */
193
190
  const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
194
- const props = useThemeProps({
191
+ const props = useDefaultProps({
195
192
  props: inProps,
196
193
  name: 'MuiDialog'
197
194
  });
@@ -27,10 +27,10 @@ export interface DialogActionsProps extends StandardProps<React.HTMLAttributes<H
27
27
  *
28
28
  * Demos:
29
29
  *
30
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
30
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
31
31
  *
32
32
  * API:
33
33
  *
34
- * - [DialogActions API](https://mui.com/material-ui/api/dialog-actions/)
34
+ * - [DialogActions API](https://next.mui.com/material-ui/api/dialog-actions/)
35
35
  */
36
36
  export default function DialogActions(props: DialogActionsProps): React.JSX.Element;
@@ -4,10 +4,10 @@ import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
- import { styled, createUseThemeProps } from '../zero-styled';
7
+ import { styled } from '../zero-styled';
8
+ import { useDefaultProps } from '../DefaultPropsProvider';
8
9
  import { getDialogActionsUtilityClass } from './dialogActionsClasses';
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
- const useThemeProps = createUseThemeProps('MuiDialogActions');
11
11
  const useUtilityClasses = ownerState => {
12
12
  const {
13
13
  classes,
@@ -45,7 +45,7 @@ const DialogActionsRoot = styled('div', {
45
45
  }]
46
46
  });
47
47
  const DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(inProps, ref) {
48
- const props = useThemeProps({
48
+ const props = useDefaultProps({
49
49
  props: inProps,
50
50
  name: 'MuiDialogActions'
51
51
  });
@@ -27,10 +27,10 @@ export interface DialogContentProps extends StandardProps<React.HTMLAttributes<H
27
27
  *
28
28
  * Demos:
29
29
  *
30
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
30
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
31
31
  *
32
32
  * API:
33
33
  *
34
- * - [DialogContent API](https://mui.com/material-ui/api/dialog-content/)
34
+ * - [DialogContent API](https://next.mui.com/material-ui/api/dialog-content/)
35
35
  */
36
36
  export default function DialogContent(props: DialogContentProps): React.JSX.Element;
@@ -4,11 +4,11 @@ import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
- import { styled, createUseThemeProps } from '../zero-styled';
7
+ import { styled } from '../zero-styled';
8
+ import { useDefaultProps } from '../DefaultPropsProvider';
8
9
  import { getDialogContentUtilityClass } from './dialogContentClasses';
9
10
  import dialogTitleClasses from '../DialogTitle/dialogTitleClasses';
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
- const useThemeProps = createUseThemeProps('MuiDialogContent');
12
12
  const useUtilityClasses = ownerState => {
13
13
  const {
14
14
  classes,
@@ -57,7 +57,7 @@ const DialogContentRoot = styled('div', {
57
57
  }]
58
58
  }));
59
59
  const DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(inProps, ref) {
60
- const props = useThemeProps({
60
+ const props = useDefaultProps({
61
61
  props: inProps,
62
62
  name: 'MuiDialogContent'
63
63
  });
@@ -28,12 +28,12 @@ export interface DialogContentTextTypeMap<
28
28
  *
29
29
  * Demos:
30
30
  *
31
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
31
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
32
32
  *
33
33
  * API:
34
34
  *
35
- * - [DialogContentText API](https://mui.com/material-ui/api/dialog-content-text/)
36
- * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
35
+ * - [DialogContentText API](https://next.mui.com/material-ui/api/dialog-content-text/)
36
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
37
37
  */
38
38
  declare const DialogContentText: OverridableComponent<DialogContentTextTypeMap>;
39
39
 
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
7
  import rootShouldForwardProp from '../styles/rootShouldForwardProp';
8
- import { styled, createUseThemeProps } from '../zero-styled';
8
+ import { styled } from '../zero-styled';
9
+ import { useDefaultProps } from '../DefaultPropsProvider';
9
10
  import Typography from '../Typography';
10
11
  import { getDialogContentTextUtilityClass } from './dialogContentTextClasses';
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const useThemeProps = createUseThemeProps('MuiDialogContentText');
13
13
  const useUtilityClasses = ownerState => {
14
14
  const {
15
15
  classes
@@ -31,7 +31,7 @@ const DialogContentTextRoot = styled(Typography, {
31
31
  overridesResolver: (props, styles) => styles.root
32
32
  })({});
33
33
  const DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(inProps, ref) {
34
- const props = useThemeProps({
34
+ const props = useDefaultProps({
35
35
  props: inProps,
36
36
  name: 'MuiDialogContentText'
37
37
  });
@@ -32,12 +32,12 @@ export interface DialogTitleTypeMap<
32
32
  *
33
33
  * Demos:
34
34
  *
35
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
35
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
36
36
  *
37
37
  * API:
38
38
  *
39
- * - [DialogTitle API](https://mui.com/material-ui/api/dialog-title/)
40
- * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
39
+ * - [DialogTitle API](https://next.mui.com/material-ui/api/dialog-title/)
40
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
41
41
  */
42
42
  declare const DialogTitle: OverridableComponent<DialogTitleTypeMap>;
43
43
 
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
7
  import Typography from '../Typography';
8
- import { styled, createUseThemeProps } from '../zero-styled';
8
+ import { styled } from '../zero-styled';
9
+ import { useDefaultProps } from '../DefaultPropsProvider';
9
10
  import { getDialogTitleUtilityClass } from './dialogTitleClasses';
10
11
  import DialogContext from '../Dialog/DialogContext';
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const useThemeProps = createUseThemeProps('MuiDialogTitle');
13
13
  const useUtilityClasses = ownerState => {
14
14
  const {
15
15
  classes
@@ -28,7 +28,7 @@ const DialogTitleRoot = styled(Typography, {
28
28
  flex: '0 0 auto'
29
29
  });
30
30
  const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps, ref) {
31
- const props = useThemeProps({
31
+ const props = useDefaultProps({
32
32
  props: inProps,
33
33
  name: 'MuiDialogTitle'
34
34
  });
@@ -66,12 +66,12 @@ export interface DividerTypeMap<
66
66
  *
67
67
  * Demos:
68
68
  *
69
- * - [Divider](https://mui.com/material-ui/react-divider/)
70
- * - [Lists](https://mui.com/material-ui/react-list/)
69
+ * - [Divider](https://next.mui.com/material-ui/react-divider/)
70
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
71
71
  *
72
72
  * API:
73
73
  *
74
- * - [Divider API](https://mui.com/material-ui/api/divider/)
74
+ * - [Divider API](https://next.mui.com/material-ui/api/divider/)
75
75
  */
76
76
  declare const Divider: OverridableComponent<DividerTypeMap>;
77
77
 
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
7
  import { alpha } from '@mui/system/colorManipulator';
8
- import { styled, createUseThemeProps } from '../zero-styled';
8
+ import { styled } from '../zero-styled';
9
+ import { useDefaultProps } from '../DefaultPropsProvider';
9
10
  import { getDividerUtilityClass } from './dividerClasses';
10
11
  import { jsx as _jsx } from "react/jsx-runtime";
11
- const useThemeProps = createUseThemeProps('MuiDivider');
12
12
  const useUtilityClasses = ownerState => {
13
13
  const {
14
14
  absolute,
@@ -191,7 +191,7 @@ const DividerWrapper = styled('span', {
191
191
  }]
192
192
  }));
193
193
  const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
194
- const props = useThemeProps({
194
+ const props = useDefaultProps({
195
195
  props: inProps,
196
196
  name: 'MuiDivider'
197
197
  });
@@ -74,15 +74,15 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
74
74
  }
75
75
 
76
76
  /**
77
- * The props of the [Modal](https://mui.com/material-ui/api/modal/) component are available
77
+ * The props of the [Modal](https://next.mui.com/material-ui/api/modal/) component are available
78
78
  * when `variant="temporary"` is set.
79
79
  *
80
80
  * Demos:
81
81
  *
82
- * - [Drawer](https://mui.com/material-ui/react-drawer/)
82
+ * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
83
83
  *
84
84
  * API:
85
85
  *
86
- * - [Drawer API](https://mui.com/material-ui/api/drawer/)
86
+ * - [Drawer API](https://next.mui.com/material-ui/api/drawer/)
87
87
  */
88
88
  export default function Drawer(props: DrawerProps): React.JSX.Element;