@mui/material 5.5.3 → 5.6.2

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 (530) hide show
  1. package/Accordion/Accordion.d.ts +4 -4
  2. package/Accordion/Accordion.js +1 -1
  3. package/Accordion/accordionClasses.d.ts +18 -18
  4. package/AccordionActions/AccordionActions.d.ts +2 -2
  5. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  6. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  7. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  8. package/AccordionSummary/AccordionSummary.d.ts +3 -3
  9. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  10. package/Alert/Alert.d.ts +5 -5
  11. package/Alert/Alert.js +2 -2
  12. package/Alert/alertClasses.d.ts +44 -44
  13. package/AlertTitle/AlertTitle.d.ts +2 -2
  14. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  15. package/AppBar/AppBar.d.ts +4 -4
  16. package/AppBar/AppBar.js +1 -1
  17. package/AppBar/appBarClasses.d.ts +28 -28
  18. package/Autocomplete/Autocomplete.d.ts +8 -8
  19. package/Autocomplete/Autocomplete.js +8 -6
  20. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  21. package/Avatar/Avatar.d.ts +2 -2
  22. package/Avatar/avatarClasses.d.ts +20 -20
  23. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  24. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  25. package/Backdrop/Backdrop.d.ts +3 -3
  26. package/Backdrop/backdropClasses.d.ts +10 -10
  27. package/Badge/Badge.d.ts +25 -12
  28. package/Badge/Badge.js +48 -24
  29. package/Badge/badgeClasses.d.ts +24 -0
  30. package/Badge/badgeClasses.js +8 -0
  31. package/Badge/index.d.ts +3 -0
  32. package/Badge/index.js +2 -1
  33. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  34. package/BottomNavigation/BottomNavigation.js +0 -0
  35. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  36. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  37. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  38. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  39. package/Breadcrumbs/Breadcrumbs.js +1 -1
  40. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  41. package/Button/Button.d.ts +5 -5
  42. package/Button/Button.js +102 -97
  43. package/Button/buttonClasses.d.ts +76 -76
  44. package/ButtonBase/ButtonBase.d.ts +2 -2
  45. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  46. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  47. package/ButtonGroup/ButtonGroup.d.ts +3 -3
  48. package/ButtonGroup/ButtonGroup.js +1 -1
  49. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  50. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  51. package/CHANGELOG.md +210 -32
  52. package/Card/Card.d.ts +3 -3
  53. package/Card/cardClasses.d.ts +8 -8
  54. package/CardActionArea/CardActionArea.d.ts +3 -3
  55. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  56. package/CardActions/CardActions.d.ts +2 -2
  57. package/CardActions/cardActionsClasses.d.ts +10 -10
  58. package/CardContent/CardContent.d.ts +2 -2
  59. package/CardContent/cardContentClasses.d.ts +8 -8
  60. package/CardHeader/CardHeader.d.ts +2 -2
  61. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  62. package/CardMedia/CardMedia.d.ts +2 -2
  63. package/CardMedia/cardMediaClasses.d.ts +12 -12
  64. package/Checkbox/Checkbox.d.ts +5 -5
  65. package/Checkbox/Checkbox.js +1 -1
  66. package/Checkbox/checkboxClasses.d.ts +18 -18
  67. package/Chip/Chip.d.ts +3 -3
  68. package/Chip/Chip.js +1 -1
  69. package/Chip/chipClasses.d.ts +80 -80
  70. package/CircularProgress/CircularProgress.d.ts +3 -3
  71. package/CircularProgress/CircularProgress.js +1 -1
  72. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  73. package/ClickAwayListener/index.d.ts +2 -2
  74. package/Collapse/Collapse.d.ts +5 -5
  75. package/Collapse/Collapse.js +1 -1
  76. package/Collapse/collapseClasses.d.ts +18 -18
  77. package/Container/Container.d.ts +2 -2
  78. package/Container/containerClasses.d.ts +22 -22
  79. package/CssBaseline/CssBaseline.d.ts +2 -2
  80. package/Dialog/Dialog.d.ts +6 -5
  81. package/Dialog/Dialog.js +3 -2
  82. package/Dialog/DialogContext.d.ts +6 -6
  83. package/Dialog/dialogClasses.d.ts +36 -36
  84. package/DialogActions/DialogActions.d.ts +2 -2
  85. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  86. package/DialogContent/DialogContent.d.ts +2 -2
  87. package/DialogContent/dialogContentClasses.d.ts +10 -10
  88. package/DialogContentText/DialogContentText.d.ts +3 -3
  89. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  90. package/DialogTitle/DialogTitle.d.ts +2 -2
  91. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  92. package/Divider/Divider.d.ts +3 -3
  93. package/Divider/dividerClasses.d.ts +34 -34
  94. package/Drawer/Drawer.d.ts +6 -6
  95. package/Drawer/Drawer.js +4 -4
  96. package/Drawer/drawerClasses.d.ts +30 -30
  97. package/Fab/Fab.d.ts +4 -4
  98. package/Fab/Fab.js +1 -1
  99. package/Fab/fabClasses.d.ts +26 -26
  100. package/Fade/Fade.d.ts +3 -3
  101. package/Fade/Fade.js +1 -1
  102. package/FilledInput/FilledInput.d.ts +3 -3
  103. package/FilledInput/FilledInput.js +5 -3
  104. package/FilledInput/filledInputClasses.d.ts +40 -40
  105. package/FormControl/FormControl.d.ts +7 -7
  106. package/FormControl/FormControl.js +2 -2
  107. package/FormControl/formControlClasses.d.ts +14 -14
  108. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  109. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  110. package/FormGroup/FormGroup.d.ts +3 -3
  111. package/FormGroup/formGroupClasses.d.ts +12 -12
  112. package/FormHelperText/FormHelperText.d.ts +2 -2
  113. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  114. package/FormLabel/FormLabel.d.ts +5 -5
  115. package/FormLabel/FormLabel.js +1 -1
  116. package/FormLabel/formLabelClasses.d.ts +22 -22
  117. package/GlobalStyles/GlobalStyles.d.ts +2 -2
  118. package/Grid/Grid.d.ts +2 -2
  119. package/Grid/gridClasses.d.ts +48 -48
  120. package/Grow/Grow.d.ts +5 -5
  121. package/Grow/Grow.js +8 -8
  122. package/Hidden/Hidden.d.ts +2 -2
  123. package/Icon/Icon.d.ts +4 -4
  124. package/Icon/Icon.js +1 -1
  125. package/Icon/iconClasses.d.ts +24 -24
  126. package/IconButton/IconButton.d.ts +5 -5
  127. package/IconButton/IconButton.js +2 -2
  128. package/IconButton/iconButtonClasses.d.ts +26 -26
  129. package/ImageList/ImageList.d.ts +2 -2
  130. package/ImageList/imageListClasses.d.ts +16 -16
  131. package/ImageListItem/ImageListItem.d.ts +2 -2
  132. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  133. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  134. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  135. package/Input/Input.d.ts +3 -3
  136. package/Input/Input.js +5 -3
  137. package/Input/inputClasses.d.ts +34 -34
  138. package/InputAdornment/InputAdornment.d.ts +2 -2
  139. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  140. package/InputBase/InputBase.d.ts +4 -4
  141. package/InputBase/InputBase.js +2 -2
  142. package/InputBase/inputBaseClasses.d.ts +44 -44
  143. package/InputLabel/InputLabel.d.ts +3 -3
  144. package/InputLabel/InputLabel.js +1 -1
  145. package/InputLabel/inputLabelClasses.d.ts +32 -32
  146. package/LinearProgress/LinearProgress.d.ts +3 -3
  147. package/LinearProgress/LinearProgress.js +1 -1
  148. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  149. package/Link/Link.d.ts +5 -5
  150. package/Link/Link.js +15 -6
  151. package/Link/linkClasses.d.ts +18 -18
  152. package/List/List.d.ts +3 -3
  153. package/List/listClasses.d.ts +14 -14
  154. package/ListItem/ListItem.d.ts +8 -8
  155. package/ListItem/ListItem.js +4 -4
  156. package/ListItem/listItemClasses.d.ts +30 -30
  157. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  158. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  159. package/ListItemButton/ListItemButton.d.ts +3 -3
  160. package/ListItemButton/ListItemButton.js +1 -0
  161. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  162. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  163. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  164. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  165. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  166. package/ListItemText/ListItemText.d.ts +2 -2
  167. package/ListItemText/listItemTextClasses.d.ts +18 -18
  168. package/ListSubheader/ListSubheader.d.ts +2 -2
  169. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  170. package/Menu/Menu.d.ts +6 -6
  171. package/Menu/Menu.js +2 -2
  172. package/Menu/menuClasses.d.ts +12 -12
  173. package/MenuItem/MenuItem.d.ts +3 -3
  174. package/MenuItem/menuItemClasses.d.ts +20 -20
  175. package/MenuList/MenuList.d.ts +4 -4
  176. package/MenuList/MenuList.js +1 -1
  177. package/MobileStepper/MobileStepper.d.ts +3 -3
  178. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  179. package/Modal/Modal.d.ts +8 -8
  180. package/Modal/Modal.js +7 -6
  181. package/NativeSelect/NativeSelect.d.ts +3 -3
  182. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  183. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  184. package/OutlinedInput/OutlinedInput.js +2 -2
  185. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  186. package/Pagination/Pagination.d.ts +4 -4
  187. package/Pagination/Pagination.js +2 -2
  188. package/Pagination/paginationClasses.d.ts +14 -14
  189. package/PaginationItem/PaginationItem.d.ts +3 -3
  190. package/PaginationItem/PaginationItem.js +1 -1
  191. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  192. package/Paper/Paper.d.ts +3 -3
  193. package/Paper/paperClasses.d.ts +39 -39
  194. package/Popover/Popover.d.ts +6 -6
  195. package/Popover/Popover.js +2 -2
  196. package/Popover/popoverClasses.d.ts +10 -10
  197. package/Popper/Popper.d.ts +29 -29
  198. package/Popper/Popper.js +4 -4
  199. package/README.md +7 -8
  200. package/Radio/Radio.d.ts +4 -4
  201. package/Radio/Radio.js +1 -1
  202. package/Radio/radioClasses.d.ts +16 -16
  203. package/RadioGroup/RadioGroup.d.ts +3 -3
  204. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  205. package/RadioGroup/useRadioGroup.d.ts +4 -4
  206. package/Rating/Rating.d.ts +3 -3
  207. package/Rating/Rating.js +1 -1
  208. package/Rating/ratingClasses.d.ts +40 -40
  209. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  210. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  211. package/Select/Select.d.ts +5 -5
  212. package/Select/Select.js +2 -2
  213. package/Select/SelectInput.js +24 -3
  214. package/Select/selectClasses.d.ts +30 -30
  215. package/Skeleton/Skeleton.d.ts +2 -2
  216. package/Skeleton/skeletonClasses.d.ts +24 -24
  217. package/Slide/Slide.d.ts +4 -4
  218. package/Slide/Slide.js +1 -1
  219. package/Slider/Slider.d.ts +4 -4
  220. package/Slider/Slider.js +1 -1
  221. package/Snackbar/Snackbar.d.ts +4 -4
  222. package/Snackbar/Snackbar.js +2 -2
  223. package/Snackbar/snackbarClasses.d.ts +20 -20
  224. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  225. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  226. package/SpeedDial/SpeedDial.d.ts +4 -4
  227. package/SpeedDial/SpeedDial.js +2 -2
  228. package/SpeedDial/speedDialClasses.d.ts +22 -22
  229. package/SpeedDialAction/SpeedDialAction.d.ts +5 -5
  230. package/SpeedDialAction/SpeedDialAction.js +2 -2
  231. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  232. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  233. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  234. package/Stack/Stack.d.ts +2 -2
  235. package/Step/Step.d.ts +2 -2
  236. package/Step/StepContext.d.ts +20 -20
  237. package/Step/stepClasses.d.ts +16 -16
  238. package/StepButton/StepButton.d.ts +3 -3
  239. package/StepButton/stepButtonClasses.d.ts +14 -14
  240. package/StepConnector/StepConnector.d.ts +2 -2
  241. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  242. package/StepContent/StepContent.d.ts +3 -3
  243. package/StepContent/StepContent.js +1 -1
  244. package/StepContent/stepContentClasses.d.ts +12 -12
  245. package/StepIcon/StepIcon.d.ts +2 -2
  246. package/StepIcon/stepIconClasses.d.ts +16 -16
  247. package/StepLabel/StepLabel.d.ts +4 -4
  248. package/StepLabel/StepLabel.js +2 -2
  249. package/StepLabel/stepLabelClasses.d.ts +28 -28
  250. package/Stepper/Stepper.d.ts +2 -2
  251. package/Stepper/stepperClasses.d.ts +14 -14
  252. package/SvgIcon/SvgIcon.d.ts +4 -4
  253. package/SvgIcon/SvgIcon.js +1 -1
  254. package/SvgIcon/svgIconClasses.d.ts +24 -24
  255. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  256. package/Switch/Switch.d.ts +5 -5
  257. package/Switch/Switch.js +1 -1
  258. package/Switch/switchClasses.d.ts +32 -32
  259. package/Tab/Tab.d.ts +3 -3
  260. package/Tab/tabClasses.d.ts +26 -26
  261. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  262. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  263. package/Table/Table.d.ts +2 -2
  264. package/Table/tableClasses.d.ts +10 -10
  265. package/TableBody/TableBody.d.ts +2 -2
  266. package/TableBody/tableBodyClasses.d.ts +8 -8
  267. package/TableCell/TableCell.d.ts +2 -2
  268. package/TableCell/tableCellClasses.d.ts +32 -32
  269. package/TableContainer/TableContainer.d.ts +2 -2
  270. package/TableContainer/tableContainerClasses.d.ts +8 -8
  271. package/TableFooter/TableFooter.d.ts +2 -2
  272. package/TableFooter/tableFooterClasses.d.ts +8 -8
  273. package/TableHead/TableHead.d.ts +2 -2
  274. package/TableHead/tableHeadClasses.d.ts +8 -8
  275. package/TablePagination/TablePagination.d.ts +9 -9
  276. package/TablePagination/TablePagination.js +6 -6
  277. package/TablePagination/TablePaginationActions.d.ts +1 -1
  278. package/TablePagination/TablePaginationActions.js +3 -3
  279. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  280. package/TableRow/TableRow.d.ts +2 -2
  281. package/TableRow/tableRowClasses.d.ts +16 -16
  282. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  283. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  284. package/Tabs/Tabs.d.ts +3 -3
  285. package/Tabs/Tabs.js +1 -1
  286. package/Tabs/tabsClasses.d.ts +32 -32
  287. package/TextField/TextField.d.ts +21 -22
  288. package/TextField/TextField.js +13 -13
  289. package/TextField/textFieldClasses.d.ts +8 -8
  290. package/ToggleButton/ToggleButton.d.ts +4 -4
  291. package/ToggleButton/ToggleButton.js +1 -1
  292. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  293. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +3 -3
  294. package/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  295. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  296. package/Toolbar/Toolbar.d.ts +2 -2
  297. package/Toolbar/toolbarClasses.d.ts +14 -14
  298. package/Tooltip/Tooltip.d.ts +4 -4
  299. package/Tooltip/Tooltip.js +2 -2
  300. package/Tooltip/tooltipClasses.d.ts +30 -30
  301. package/Typography/Typography.d.ts +3 -3
  302. package/Typography/typographyClasses.d.ts +50 -50
  303. package/Zoom/Zoom.d.ts +3 -3
  304. package/Zoom/Zoom.js +1 -1
  305. package/className/index.d.ts +8 -8
  306. package/darkScrollbar/index.d.ts +28 -28
  307. package/index.js +1 -1
  308. package/internal/switchBaseClasses.d.ts +12 -12
  309. package/legacy/Accordion/Accordion.js +1 -1
  310. package/legacy/Alert/Alert.js +2 -2
  311. package/legacy/AppBar/AppBar.js +1 -1
  312. package/legacy/Autocomplete/Autocomplete.js +8 -6
  313. package/legacy/Badge/Badge.js +49 -24
  314. package/legacy/Badge/badgeClasses.js +8 -0
  315. package/legacy/Badge/index.js +2 -1
  316. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  317. package/legacy/Breadcrumbs/Breadcrumbs.js +1 -1
  318. package/legacy/Button/Button.js +31 -30
  319. package/legacy/ButtonGroup/ButtonGroup.js +1 -1
  320. package/legacy/Checkbox/Checkbox.js +1 -1
  321. package/legacy/Chip/Chip.js +1 -1
  322. package/legacy/CircularProgress/CircularProgress.js +1 -1
  323. package/legacy/Collapse/Collapse.js +1 -1
  324. package/legacy/Dialog/Dialog.js +3 -2
  325. package/legacy/Drawer/Drawer.js +4 -4
  326. package/legacy/Fab/Fab.js +1 -1
  327. package/legacy/Fade/Fade.js +1 -1
  328. package/legacy/FilledInput/FilledInput.js +5 -3
  329. package/legacy/FormControl/FormControl.js +2 -2
  330. package/legacy/FormLabel/FormLabel.js +1 -1
  331. package/legacy/Grow/Grow.js +8 -8
  332. package/legacy/Icon/Icon.js +1 -1
  333. package/legacy/IconButton/IconButton.js +2 -2
  334. package/legacy/Input/Input.js +5 -3
  335. package/legacy/InputBase/InputBase.js +2 -2
  336. package/legacy/InputLabel/InputLabel.js +1 -1
  337. package/legacy/LinearProgress/LinearProgress.js +1 -1
  338. package/legacy/Link/Link.js +16 -5
  339. package/legacy/ListItem/ListItem.js +4 -4
  340. package/legacy/ListItemButton/ListItemButton.js +1 -0
  341. package/legacy/Menu/Menu.js +2 -2
  342. package/legacy/MenuList/MenuList.js +1 -1
  343. package/legacy/Modal/Modal.js +7 -6
  344. package/legacy/OutlinedInput/OutlinedInput.js +2 -2
  345. package/legacy/Pagination/Pagination.js +2 -2
  346. package/legacy/PaginationItem/PaginationItem.js +1 -1
  347. package/legacy/Popover/Popover.js +2 -2
  348. package/legacy/Popper/Popper.js +4 -4
  349. package/legacy/Radio/Radio.js +1 -1
  350. package/legacy/Rating/Rating.js +1 -1
  351. package/legacy/Select/Select.js +2 -2
  352. package/legacy/Select/SelectInput.js +26 -3
  353. package/legacy/Slide/Slide.js +1 -1
  354. package/legacy/Slider/Slider.js +1 -1
  355. package/legacy/Snackbar/Snackbar.js +2 -2
  356. package/legacy/SpeedDial/SpeedDial.js +2 -2
  357. package/legacy/SpeedDialAction/SpeedDialAction.js +2 -2
  358. package/legacy/StepContent/StepContent.js +1 -1
  359. package/legacy/StepLabel/StepLabel.js +2 -2
  360. package/legacy/SvgIcon/SvgIcon.js +1 -1
  361. package/legacy/Switch/Switch.js +1 -1
  362. package/legacy/TablePagination/TablePagination.js +6 -6
  363. package/legacy/TablePagination/TablePaginationActions.js +3 -3
  364. package/legacy/Tabs/Tabs.js +1 -1
  365. package/legacy/TextField/TextField.js +13 -13
  366. package/legacy/ToggleButton/ToggleButton.js +1 -1
  367. package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  368. package/legacy/Tooltip/Tooltip.js +2 -2
  369. package/legacy/Zoom/Zoom.js +1 -1
  370. package/legacy/index.js +1 -1
  371. package/legacy/locale/index.js +115 -111
  372. package/legacy/styles/CssVarsProvider.js +31 -0
  373. package/legacy/styles/experimental_extendTheme.js +96 -0
  374. package/legacy/styles/index.js +3 -1
  375. package/locale/index.d.ts +71 -71
  376. package/locale/index.js +6 -3
  377. package/modern/Accordion/Accordion.js +1 -1
  378. package/modern/Alert/Alert.js +2 -2
  379. package/modern/AppBar/AppBar.js +1 -1
  380. package/modern/Autocomplete/Autocomplete.js +8 -6
  381. package/modern/Badge/Badge.js +45 -21
  382. package/modern/Badge/badgeClasses.js +8 -0
  383. package/modern/Badge/index.js +2 -1
  384. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  385. package/modern/Breadcrumbs/Breadcrumbs.js +1 -1
  386. package/modern/Button/Button.js +30 -29
  387. package/modern/ButtonGroup/ButtonGroup.js +1 -1
  388. package/modern/Checkbox/Checkbox.js +1 -1
  389. package/modern/Chip/Chip.js +1 -1
  390. package/modern/CircularProgress/CircularProgress.js +1 -1
  391. package/modern/Collapse/Collapse.js +1 -1
  392. package/modern/Dialog/Dialog.js +3 -2
  393. package/modern/Drawer/Drawer.js +4 -4
  394. package/modern/Fab/Fab.js +1 -1
  395. package/modern/Fade/Fade.js +1 -1
  396. package/modern/FilledInput/FilledInput.js +5 -3
  397. package/modern/FormControl/FormControl.js +2 -2
  398. package/modern/FormLabel/FormLabel.js +1 -1
  399. package/modern/Grow/Grow.js +8 -8
  400. package/modern/Icon/Icon.js +1 -1
  401. package/modern/IconButton/IconButton.js +2 -2
  402. package/modern/Input/Input.js +5 -3
  403. package/modern/InputBase/InputBase.js +2 -2
  404. package/modern/InputLabel/InputLabel.js +1 -1
  405. package/modern/LinearProgress/LinearProgress.js +1 -1
  406. package/modern/Link/Link.js +15 -6
  407. package/modern/ListItem/ListItem.js +4 -4
  408. package/modern/ListItemButton/ListItemButton.js +1 -0
  409. package/modern/Menu/Menu.js +2 -2
  410. package/modern/MenuList/MenuList.js +1 -1
  411. package/modern/Modal/Modal.js +7 -6
  412. package/modern/OutlinedInput/OutlinedInput.js +2 -2
  413. package/modern/Pagination/Pagination.js +2 -2
  414. package/modern/PaginationItem/PaginationItem.js +1 -1
  415. package/modern/Popover/Popover.js +2 -2
  416. package/modern/Popper/Popper.js +4 -4
  417. package/modern/Radio/Radio.js +1 -1
  418. package/modern/Rating/Rating.js +1 -1
  419. package/modern/Select/Select.js +2 -2
  420. package/modern/Select/SelectInput.js +24 -3
  421. package/modern/Slide/Slide.js +1 -1
  422. package/modern/Slider/Slider.js +1 -1
  423. package/modern/Snackbar/Snackbar.js +2 -2
  424. package/modern/SpeedDial/SpeedDial.js +2 -2
  425. package/modern/SpeedDialAction/SpeedDialAction.js +2 -2
  426. package/modern/StepContent/StepContent.js +1 -1
  427. package/modern/StepLabel/StepLabel.js +2 -2
  428. package/modern/SvgIcon/SvgIcon.js +1 -1
  429. package/modern/Switch/Switch.js +1 -1
  430. package/modern/TablePagination/TablePagination.js +6 -6
  431. package/modern/TablePagination/TablePaginationActions.js +3 -3
  432. package/modern/Tabs/Tabs.js +1 -1
  433. package/modern/TextField/TextField.js +13 -13
  434. package/modern/ToggleButton/ToggleButton.js +1 -1
  435. package/modern/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  436. package/modern/Tooltip/Tooltip.js +2 -2
  437. package/modern/Zoom/Zoom.js +1 -1
  438. package/modern/index.js +1 -1
  439. package/modern/locale/index.js +6 -3
  440. package/modern/styles/CssVarsProvider.js +28 -0
  441. package/modern/styles/experimental_extendTheme.js +89 -0
  442. package/modern/styles/index.js +3 -1
  443. package/node/Accordion/Accordion.js +1 -1
  444. package/node/Alert/Alert.js +2 -2
  445. package/node/AppBar/AppBar.js +1 -1
  446. package/node/Autocomplete/Autocomplete.js +8 -6
  447. package/node/Badge/Badge.js +58 -34
  448. package/node/Badge/badgeClasses.js +22 -0
  449. package/node/Badge/index.js +17 -5
  450. package/node/BottomNavigation/BottomNavigation.js +0 -0
  451. package/node/Breadcrumbs/Breadcrumbs.js +1 -1
  452. package/node/Button/Button.js +102 -97
  453. package/node/ButtonGroup/ButtonGroup.js +1 -1
  454. package/node/Checkbox/Checkbox.js +1 -1
  455. package/node/Chip/Chip.js +1 -1
  456. package/node/CircularProgress/CircularProgress.js +1 -1
  457. package/node/Collapse/Collapse.js +1 -1
  458. package/node/Dialog/Dialog.js +3 -2
  459. package/node/Drawer/Drawer.js +4 -4
  460. package/node/Fab/Fab.js +1 -1
  461. package/node/Fade/Fade.js +1 -1
  462. package/node/FilledInput/FilledInput.js +5 -3
  463. package/node/FormControl/FormControl.js +2 -2
  464. package/node/FormLabel/FormLabel.js +1 -1
  465. package/node/Grow/Grow.js +8 -8
  466. package/node/Icon/Icon.js +1 -1
  467. package/node/IconButton/IconButton.js +2 -2
  468. package/node/Input/Input.js +5 -3
  469. package/node/InputBase/InputBase.js +2 -2
  470. package/node/InputLabel/InputLabel.js +1 -1
  471. package/node/LinearProgress/LinearProgress.js +1 -1
  472. package/node/Link/Link.js +16 -6
  473. package/node/ListItem/ListItem.js +4 -4
  474. package/node/ListItemButton/ListItemButton.js +1 -0
  475. package/node/Menu/Menu.js +2 -2
  476. package/node/MenuList/MenuList.js +1 -1
  477. package/node/Modal/Modal.js +7 -6
  478. package/node/OutlinedInput/OutlinedInput.js +2 -2
  479. package/node/Pagination/Pagination.js +2 -2
  480. package/node/PaginationItem/PaginationItem.js +1 -1
  481. package/node/Popover/Popover.js +2 -2
  482. package/node/Popper/Popper.js +4 -4
  483. package/node/Radio/Radio.js +1 -1
  484. package/node/Rating/Rating.js +1 -1
  485. package/node/Select/Select.js +2 -2
  486. package/node/Select/SelectInput.js +24 -3
  487. package/node/Slide/Slide.js +1 -1
  488. package/node/Slider/Slider.js +1 -1
  489. package/node/Snackbar/Snackbar.js +2 -2
  490. package/node/SpeedDial/SpeedDial.js +2 -2
  491. package/node/SpeedDialAction/SpeedDialAction.js +2 -2
  492. package/node/StepContent/StepContent.js +1 -1
  493. package/node/StepLabel/StepLabel.js +2 -2
  494. package/node/SvgIcon/SvgIcon.js +1 -1
  495. package/node/Switch/Switch.js +1 -1
  496. package/node/TablePagination/TablePagination.js +6 -6
  497. package/node/TablePagination/TablePaginationActions.js +3 -3
  498. package/node/Tabs/Tabs.js +1 -1
  499. package/node/TextField/TextField.js +13 -13
  500. package/node/ToggleButton/ToggleButton.js +1 -1
  501. package/node/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  502. package/node/Tooltip/Tooltip.js +2 -2
  503. package/node/Zoom/Zoom.js +1 -1
  504. package/node/index.js +1 -1
  505. package/node/locale/index.js +6 -3
  506. package/node/styles/CssVarsProvider.js +41 -0
  507. package/node/styles/experimental_extendTheme.js +105 -0
  508. package/node/styles/index.js +58 -0
  509. package/package.json +9 -9
  510. package/styles/CssVarsProvider.d.ts +28 -0
  511. package/styles/CssVarsProvider.js +28 -0
  512. package/styles/ThemeProvider.d.ts +1 -1
  513. package/styles/createPalette.d.ts +26 -0
  514. package/styles/createTheme.d.ts +1 -1
  515. package/styles/experimental_extendTheme.d.ts +90 -0
  516. package/styles/experimental_extendTheme.js +91 -0
  517. package/styles/index.d.ts +5 -0
  518. package/styles/index.js +3 -1
  519. package/transitions/index.d.ts +1 -1
  520. package/transitions/transition.d.ts +13 -13
  521. package/transitions/utils.d.ts +23 -23
  522. package/umd/material-ui.development.js +1297 -438
  523. package/umd/material-ui.production.min.js +21 -21
  524. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  525. package/useTouchRipple/index.d.ts +1 -1
  526. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  527. package/utils/getScrollbarSize.d.ts +2 -2
  528. package/utils/ownerDocument.d.ts +2 -2
  529. package/utils/ownerWindow.d.ts +2 -2
  530. package/utils/setRef.d.ts +2 -2
@@ -0,0 +1,89 @@
1
+ import _extends from "@babel/runtime/helpers/esm/extends";
2
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
+ const _excluded = ["colorSchemes", "opacity"],
4
+ _excluded2 = ["palette"];
5
+ import { deepmerge } from '@mui/utils';
6
+ import { colorChannel } from '@mui/system';
7
+ import createThemeWithoutVars from './createTheme';
8
+ import createPalette from './createPalette';
9
+ export const defaultOpacity = {
10
+ active: 0.54,
11
+ hover: 0.04,
12
+ selected: 0.08,
13
+ disabled: 0.26,
14
+ focus: 0.12
15
+ };
16
+
17
+ function createTheme(options = {}, ...args) {
18
+ const {
19
+ colorSchemes: colorSchemesInput = {},
20
+ opacity: opacityInput = {}
21
+ } = options,
22
+ input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
23
+
24
+
25
+ let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
26
+ palette: colorSchemesInput.light?.palette
27
+ })),
28
+ {
29
+ palette: lightPalette
30
+ } = _createThemeWithoutVa,
31
+ muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
32
+
33
+ const {
34
+ palette: darkPalette
35
+ } = createThemeWithoutVars({
36
+ palette: _extends({
37
+ mode: 'dark'
38
+ }, colorSchemesInput.dark?.palette)
39
+ });
40
+ colorSchemesInput.light = {
41
+ palette: lightPalette
42
+ };
43
+ colorSchemesInput.dark = {
44
+ palette: darkPalette
45
+ };
46
+ const colorSchemes = {};
47
+ Object.keys(colorSchemesInput).forEach(key => {
48
+ const palette = createPalette(colorSchemesInput[key].palette);
49
+ Object.keys(palette).forEach(color => {
50
+ const colors = palette[color];
51
+
52
+ if (colors.main) {
53
+ palette[color].mainChannel = colorChannel(colors.main);
54
+ }
55
+
56
+ if (colors.light) {
57
+ palette[color].lightChannel = colorChannel(colors.light);
58
+ }
59
+
60
+ if (colors.dark) {
61
+ palette[color].darkChannel = colorChannel(colors.dark);
62
+ }
63
+
64
+ if (colors.primary) {
65
+ palette[color].primaryChannel = colorChannel(colors.primary);
66
+ }
67
+
68
+ if (colors.secondary) {
69
+ palette[color].secondaryChannel = colorChannel(colors.secondary);
70
+ }
71
+
72
+ if (colors.disabled) {
73
+ palette[color].disabledChannel = colorChannel(colors.disabled);
74
+ }
75
+ });
76
+ colorSchemes[key] = {
77
+ palette
78
+ };
79
+ });
80
+
81
+ const opacity = _extends({}, defaultOpacity, opacityInput);
82
+
83
+ muiTheme.colorSchemes = colorSchemes;
84
+ muiTheme.opacity = opacity;
85
+ muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
86
+ return muiTheme;
87
+ }
88
+
89
+ export default createTheme;
@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
16
16
 
17
17
  export { default as makeStyles } from './makeStyles';
18
18
  export { default as withStyles } from './withStyles';
19
- export { default as withTheme } from './withTheme';
19
+ export { default as withTheme } from './withTheme';
20
+ export * from './CssVarsProvider';
21
+ export { default as experimental_extendTheme } from './experimental_extendTheme';
@@ -289,7 +289,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
289
289
 
290
290
  /**
291
291
  * The component used for the transition.
292
- * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
292
+ * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
293
293
  * @default Collapse
294
294
  */
295
295
  TransitionComponent: _propTypes.default.elementType,
@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
240
240
  /**
241
241
  * Override the default label for the *close popup* icon button.
242
242
  *
243
- * For localization purposes, you can use the provided [translations](/guides/localization/).
243
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
244
244
  * @default 'Close'
245
245
  */
246
246
  closeText: _propTypes.default.string,
@@ -248,7 +248,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
248
248
  /**
249
249
  * The color of the component. Unless provided, the value is taken from the `severity` prop.
250
250
  * It supports both default and custom theme colors, which can be added as shown in the
251
- * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
251
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
252
252
  */
253
253
  color: _propTypes.default
254
254
  /* @typescript-to-proptypes-ignore */
@@ -168,7 +168,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
168
168
  /**
169
169
  * The color of the component.
170
170
  * It supports both default and custom theme colors, which can be added as shown in the
171
- * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
171
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
172
172
  * @default 'primary'
173
173
  */
174
174
  color: _propTypes.default
@@ -690,7 +690,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
690
690
  blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
691
691
 
692
692
  /**
693
- * Props applied to the [`Chip`](/api/chip/) element.
693
+ * Props applied to the [`Chip`](/material-ui/api/chip/) element.
694
694
  */
695
695
  ChipProps: _propTypes.default.object,
696
696
 
@@ -728,7 +728,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
728
728
  /**
729
729
  * Override the default text for the *clear* icon button.
730
730
  *
731
- * For localization purposes, you can use the provided [translations](/guides/localization/).
731
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
732
732
  * @default 'Clear'
733
733
  */
734
734
  clearText: _propTypes.default.string,
@@ -736,7 +736,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
736
736
  /**
737
737
  * Override the default text for the *close popup* icon button.
738
738
  *
739
- * For localization purposes, you can use the provided [translations](/guides/localization/).
739
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
740
740
  * @default 'Close'
741
741
  */
742
742
  closeText: _propTypes.default.string,
@@ -852,6 +852,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
852
852
  * Used to determine the string value for a given option.
853
853
  * It's used to fill the input (and the list box options if `renderOption` is not provided).
854
854
  *
855
+ * If used in free solo mode, it must accept both the type of the options and a string.
856
+ *
855
857
  * @param {T} option
856
858
  * @returns {string}
857
859
  * @default (option) => option.label ?? option
@@ -930,7 +932,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
930
932
  /**
931
933
  * Text to display when in a loading state.
932
934
  *
933
- * For localization purposes, you can use the provided [translations](/guides/localization/).
935
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
934
936
  * @default 'Loading…'
935
937
  */
936
938
  loadingText: _propTypes.default.node,
@@ -944,7 +946,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
944
946
  /**
945
947
  * Text to display when there are no options.
946
948
  *
947
- * For localization purposes, you can use the provided [translations](/guides/localization/).
949
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
948
950
  * @default 'No options'
949
951
  */
950
952
  noOptionsText: _propTypes.default.node,
@@ -1008,7 +1010,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
1008
1010
  /**
1009
1011
  * Override the default text for the *open popup* icon button.
1010
1012
  *
1011
- * For localization purposes, you can use the provided [translations](/guides/localization/).
1013
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
1012
1014
  * @default 'Open'
1013
1015
  */
1014
1016
  openText: _propTypes.default.string,
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.badgeClasses = void 0;
8
+ exports.default = void 0;
9
9
 
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
 
@@ -19,9 +19,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
19
19
 
20
20
  var _utils = require("@mui/utils");
21
21
 
22
- var _base = require("@mui/base");
22
+ var _composeClasses = _interopRequireDefault(require("@mui/base/composeClasses"));
23
23
 
24
- var _BadgeUnstyled = _interopRequireWildcard(require("@mui/base/BadgeUnstyled"));
24
+ var _BadgeUnstyled = _interopRequireDefault(require("@mui/base/BadgeUnstyled"));
25
25
 
26
26
  var _styled = _interopRequireDefault(require("../styles/styled"));
27
27
 
@@ -31,30 +31,33 @@ var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shou
31
31
 
32
32
  var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
33
33
 
34
+ var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
35
+
34
36
  var _jsxRuntime = require("react/jsx-runtime");
35
37
 
36
- const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
38
+ const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
37
39
 
38
40
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
41
 
40
42
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
43
 
42
- const badgeClasses = (0, _extends2.default)({}, _BadgeUnstyled.badgeUnstyledClasses, (0, _base.generateUtilityClasses)('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
43
- 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
44
- exports.badgeClasses = badgeClasses;
45
44
  const RADIUS_STANDARD = 10;
46
45
  const RADIUS_DOT = 4;
47
46
 
48
- const extendUtilityClasses = ownerState => {
47
+ const useUtilityClasses = ownerState => {
49
48
  const {
50
49
  color,
51
50
  anchorOrigin,
51
+ invisible,
52
52
  overlap,
53
+ variant,
53
54
  classes = {}
54
55
  } = ownerState;
55
- return (0, _extends2.default)({}, classes, {
56
- badge: (0, _clsx.default)(classes.badge, (0, _BadgeUnstyled.getBadgeUtilityClass)(`anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`), (0, _BadgeUnstyled.getBadgeUtilityClass)(`overlap${(0, _capitalize.default)(overlap)}`), color !== 'default' && [(0, _BadgeUnstyled.getBadgeUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`]])
57
- });
56
+ const slots = {
57
+ root: ['root'],
58
+ badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}`, `anchorOrigin${(0, _capitalize.default)(anchorOrigin.vertical)}${(0, _capitalize.default)(anchorOrigin.horizontal)}${(0, _capitalize.default)(overlap)}`, `overlap${(0, _capitalize.default)(overlap)}`, color !== 'default' && `color${(0, _capitalize.default)(color)}`]
59
+ };
60
+ return (0, _composeClasses.default)(slots, _badgeClasses.getBadgeUtilityClass, classes);
58
61
  };
59
62
 
60
63
  const BadgeRoot = (0, _styled.default)('span', {
@@ -116,7 +119,7 @@ const BadgeBadge = (0, _styled.default)('span', {
116
119
  right: 0,
117
120
  transform: 'scale(1) translate(50%, -50%)',
118
121
  transformOrigin: '100% 0%',
119
- [`&.${badgeClasses.invisible}`]: {
122
+ [`&.${_badgeClasses.default.invisible}`]: {
120
123
  transform: 'scale(0) translate(50%, -50%)'
121
124
  }
122
125
  }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {
@@ -124,7 +127,7 @@ const BadgeBadge = (0, _styled.default)('span', {
124
127
  right: 0,
125
128
  transform: 'scale(1) translate(50%, 50%)',
126
129
  transformOrigin: '100% 100%',
127
- [`&.${badgeClasses.invisible}`]: {
130
+ [`&.${_badgeClasses.default.invisible}`]: {
128
131
  transform: 'scale(0) translate(50%, 50%)'
129
132
  }
130
133
  }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -132,7 +135,7 @@ const BadgeBadge = (0, _styled.default)('span', {
132
135
  left: 0,
133
136
  transform: 'scale(1) translate(-50%, -50%)',
134
137
  transformOrigin: '0% 0%',
135
- [`&.${badgeClasses.invisible}`]: {
138
+ [`&.${_badgeClasses.default.invisible}`]: {
136
139
  transform: 'scale(0) translate(-50%, -50%)'
137
140
  }
138
141
  }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {
@@ -140,7 +143,7 @@ const BadgeBadge = (0, _styled.default)('span', {
140
143
  left: 0,
141
144
  transform: 'scale(1) translate(-50%, 50%)',
142
145
  transformOrigin: '0% 100%',
143
- [`&.${badgeClasses.invisible}`]: {
146
+ [`&.${_badgeClasses.default.invisible}`]: {
144
147
  transform: 'scale(0) translate(-50%, 50%)'
145
148
  }
146
149
  }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -148,7 +151,7 @@ const BadgeBadge = (0, _styled.default)('span', {
148
151
  right: '14%',
149
152
  transform: 'scale(1) translate(50%, -50%)',
150
153
  transformOrigin: '100% 0%',
151
- [`&.${badgeClasses.invisible}`]: {
154
+ [`&.${_badgeClasses.default.invisible}`]: {
152
155
  transform: 'scale(0) translate(50%, -50%)'
153
156
  }
154
157
  }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {
@@ -156,7 +159,7 @@ const BadgeBadge = (0, _styled.default)('span', {
156
159
  right: '14%',
157
160
  transform: 'scale(1) translate(50%, 50%)',
158
161
  transformOrigin: '100% 100%',
159
- [`&.${badgeClasses.invisible}`]: {
162
+ [`&.${_badgeClasses.default.invisible}`]: {
160
163
  transform: 'scale(0) translate(50%, 50%)'
161
164
  }
162
165
  }, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -164,7 +167,7 @@ const BadgeBadge = (0, _styled.default)('span', {
164
167
  left: '14%',
165
168
  transform: 'scale(1) translate(-50%, -50%)',
166
169
  transformOrigin: '0% 0%',
167
- [`&.${badgeClasses.invisible}`]: {
170
+ [`&.${_badgeClasses.default.invisible}`]: {
168
171
  transform: 'scale(0) translate(-50%, -50%)'
169
172
  }
170
173
  }, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {
@@ -172,7 +175,7 @@ const BadgeBadge = (0, _styled.default)('span', {
172
175
  left: '14%',
173
176
  transform: 'scale(1) translate(-50%, 50%)',
174
177
  transformOrigin: '0% 100%',
175
- [`&.${badgeClasses.invisible}`]: {
178
+ [`&.${_badgeClasses.default.invisible}`]: {
176
179
  transform: 'scale(0) translate(-50%, 50%)'
177
180
  }
178
181
  }, ownerState.invisible && {
@@ -182,7 +185,7 @@ const BadgeBadge = (0, _styled.default)('span', {
182
185
  })
183
186
  }));
184
187
  const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
185
- var _componentsProps$root, _componentsProps$badg;
188
+ var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
186
189
 
187
190
  const props = (0, _useThemeProps.default)({
188
191
  props: inProps,
@@ -193,12 +196,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
193
196
  vertical: 'top',
194
197
  horizontal: 'right'
195
198
  },
199
+ className,
196
200
  component = 'span',
197
201
  components = {},
198
202
  componentsProps = {},
199
203
  overlap: overlapProp = 'rectangular',
200
204
  color: colorProp = 'default',
201
205
  invisible: invisibleProp = false,
206
+ max,
202
207
  badgeContent: badgeContentProp,
203
208
  showZero = false,
204
209
  variant: variantProp = 'standard'
@@ -207,7 +212,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
207
212
  const prevProps = (0, _utils.usePreviousProps)({
208
213
  anchorOrigin: anchorOriginProp,
209
214
  color: colorProp,
210
- overlap: overlapProp
215
+ overlap: overlapProp,
216
+ variant: variantProp
211
217
  });
212
218
  let invisible = invisibleProp;
213
219
 
@@ -218,42 +224,55 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
218
224
  const {
219
225
  color = colorProp,
220
226
  overlap = overlapProp,
221
- anchorOrigin = anchorOriginProp
227
+ anchorOrigin = anchorOriginProp,
228
+ variant = variantProp
222
229
  } = invisible ? prevProps : props;
223
230
  const ownerState = (0, _extends2.default)({}, props, {
224
231
  anchorOrigin,
225
232
  invisible,
226
233
  color,
227
- overlap
234
+ overlap,
235
+ variant
228
236
  });
229
- const classes = extendUtilityClasses(ownerState);
237
+ const classes = useUtilityClasses(ownerState);
238
+ let displayValue;
239
+
240
+ if (variant !== 'dot') {
241
+ displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
242
+ }
243
+
230
244
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgeUnstyled.default, (0, _extends2.default)({
231
- anchorOrigin: anchorOrigin,
232
245
  invisible: invisibleProp,
233
- badgeContent: badgeContentProp,
246
+ badgeContent: displayValue,
234
247
  showZero: showZero,
235
- variant: variantProp
248
+ max: max
236
249
  }, other, {
237
250
  components: (0, _extends2.default)({
238
251
  Root: BadgeRoot,
239
252
  Badge: BadgeBadge
240
253
  }, components),
254
+ className: (0, _clsx.default)(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
241
255
  componentsProps: {
242
256
  root: (0, _extends2.default)({}, componentsProps.root, (0, _shouldSpreadAdditionalProps.default)(components.Root) && {
243
257
  as: component,
244
- ownerState: (0, _extends2.default)({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
258
+ ownerState: (0, _extends2.default)({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
259
+ anchorOrigin,
245
260
  color,
246
- overlap
261
+ overlap,
262
+ variant
247
263
  })
248
264
  }),
249
- badge: (0, _extends2.default)({}, componentsProps.badge, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
250
- ownerState: (0, _extends2.default)({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
265
+ badge: (0, _extends2.default)({}, componentsProps.badge, {
266
+ className: (0, _clsx.default)(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
267
+ }, (0, _shouldSpreadAdditionalProps.default)(components.Badge) && {
268
+ ownerState: (0, _extends2.default)({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
269
+ anchorOrigin,
251
270
  color,
252
- overlap
271
+ overlap,
272
+ variant
253
273
  })
254
274
  })
255
275
  },
256
- classes: classes,
257
276
  ref: ref
258
277
  }));
259
278
  });
@@ -292,10 +311,15 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
292
311
  */
293
312
  classes: _propTypes.default.object,
294
313
 
314
+ /**
315
+ * @ignore
316
+ */
317
+ className: _propTypes.default.string,
318
+
295
319
  /**
296
320
  * The color of the component.
297
321
  * It supports both default and custom theme colors, which can be added as shown in the
298
- * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
322
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
299
323
  * @default 'default'
300
324
  */
301
325
  color: _propTypes.default
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ exports.getBadgeUtilityClass = getBadgeUtilityClass;
10
+
11
+ var _generateUtilityClasses = _interopRequireDefault(require("@mui/base/generateUtilityClasses"));
12
+
13
+ var _generateUtilityClass = _interopRequireDefault(require("@mui/base/generateUtilityClass"));
14
+
15
+ function getBadgeUtilityClass(slot) {
16
+ return (0, _generateUtilityClass.default)('MuiBadge', slot);
17
+ }
18
+
19
+ const badgeClasses = (0, _generateUtilityClasses.default)('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
20
+ 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
21
+ var _default = badgeClasses;
22
+ exports.default = _default;
@@ -1,9 +1,19 @@
1
1
  "use strict";
2
2
 
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
- var _exportNames = {};
8
+ var _exportNames = {
9
+ badgeClasses: true
10
+ };
11
+ Object.defineProperty(exports, "badgeClasses", {
12
+ enumerable: true,
13
+ get: function () {
14
+ return _badgeClasses.default;
15
+ }
16
+ });
7
17
  Object.defineProperty(exports, "default", {
8
18
  enumerable: true,
9
19
  get: function () {
@@ -11,16 +21,18 @@ Object.defineProperty(exports, "default", {
11
21
  }
12
22
  });
13
23
 
14
- var _Badge = _interopRequireWildcard(require("./Badge"));
24
+ var _Badge = _interopRequireDefault(require("./Badge"));
25
+
26
+ var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
15
27
 
16
- Object.keys(_Badge).forEach(function (key) {
28
+ Object.keys(_badgeClasses).forEach(function (key) {
17
29
  if (key === "default" || key === "__esModule") return;
18
30
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
19
- if (key in exports && exports[key] === _Badge[key]) return;
31
+ if (key in exports && exports[key] === _badgeClasses[key]) return;
20
32
  Object.defineProperty(exports, key, {
21
33
  enumerable: true,
22
34
  get: function () {
23
- return _Badge[key];
35
+ return _badgeClasses[key];
24
36
  }
25
37
  });
26
38
  });
File without changes
@@ -221,7 +221,7 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
221
221
  /**
222
222
  * Override the default label for the expand button.
223
223
  *
224
- * For localization purposes, you can use the provided [translations](/guides/localization/).
224
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
225
225
  * @default 'Show path'
226
226
  */
227
227
  expandText: _propTypes.default.string,