@mui/system 5.2.5 → 5.4.0

package/Box/Box.d.ts

@@ -123,6 +123,7 @@ export const typography: SimpleStyleFunction<
   | 'letterSpacing'
   | 'lineHeight'
   | 'textAlign'
+  | 'textTransform'
 >;
 
 // compose.js

package/CHANGELOG.md

@@ -1,4 +1,348 @@
-### [Versions](https://mui.com/versions/)
+# [Versions](https://mui.com/versions/)
+
+## 5.4.0
+
+<!-- generated comparing v5.3.1..master -->
+
+_Feb 1, 2022_
+
+A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @goncalovf added an example project using [MUI with Vite.js](https://github.com/mui-org/material-ui/tree/master/examples/vitejs) (#28241)
+- Number of 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.4.0`
+
+#### Breaking changes
+
+- &#8203;<!-- 27 -->[core] Do not reexport Base from Material (#30853) @michaldudak
+
+  All Base components were exported from the `@mui/material` package and treated as stable even though the `@mui/base` package is in development. It could create a lot of confusion if developers start using Base components, depend on them, and demand quality found in "proper" Material components. We admit it was a mistake to reexport these components without marking them as unstable.
+
+  Developers are still encouraged to evaluate the Base components, but they should do so by explicitly installing the `@mui/base` package.
+
+  This is technically a breaking change as it removes a number of components from the `@mui/material` package. However, we believe that removing the components now and potentially breaking the codebases will do less harm than introducing "silent" breaking changes to Base components while continuing reexporting them from `@mui/material`.
+
+  Note: the utility components, such as ClickAwayListener, NoSsr, Portal, and TextareaAutosize continue to be exported from both `@mui/material` and `@mui/base`.
+
+  If you're encountering build errors after upgrading @mui/material, do the following:
+
+  1. Install @mui/base: npm install @mui/base or yarn add @mui/base
+  2. Make sure the version of @mui/base match the version of @mui/material
+  3. Change the import paths of unstyled components from @mui/material to @mui/base, e.g.:
+
+  ```diff
+  - @import ButtonUnstyled from '@mui/material/ButtonUnstyled';
+  + @import ButtonUnstyled from '@mui/base/ButtonUnstyled';
+  ```
+
+#### Changes
+
+- &#8203;<!-- 30 -->[Autocomplete] Add `readOnly` prop (#30706) @ZeeshanTamboli
+- &#8203;<!-- 29 -->[Autocomplete] Fix typos in the page (#30737) @austinewuncler
+- &#8203;<!-- 14 -->[FormControlLabel][formgroup] add Mui-error class (#30656) @alisasanib
+- &#8203;<!-- 13 -->[Grid] Fix prop check for applying wrap-reverse (#30813) @Hubbz
+- &#8203;<!-- 07 -->[TextField] Remove notch when no label is added (#30560) @alisasanib
+- &#8203;<!-- 06 -->[TextField] Remove usage of dangerouslySetInnerHTML (#30776) @Jack-Works
+- &#8203;<!-- 05 -->[TreeView] Select node when key `Enter` is pressed (#30795) @dryrainbow
+- &#8203;<!-- 04 -->[useMediaQuery] Ensure no tearing in React 18 (#30655) @eps1lon
+
+### `@mui/base@5.0.0-alpha.67`
+
+- &#8203;<!-- 11 -->[SelectUnstyled] Create unstyled select (+ hook) (#30113) @michaldudak
+
+### `@mui/lab@5.0.0-alpha.67`
+
+- &#8203;<!-- 23 -->[DateTimePicker] Fix month view highlight wrong tab (#30773) @DiegoYungh
+- &#8203;<!-- 12 -->[pickers] Enable the sx props on all components (#30749) @boutahlilsoufiane
+
+### Docs
+
+- &#8203;<!-- 28 -->[blog] Introducing callback support in style overrides (#30668) @siriwatknp
+- &#8203;<!-- 23 -->[docs] Add notifications for the blog posts (#30852) @siriwatknp
+- &#8203;<!-- 22 -->[docs] Improve the interoperability guide (#30785) @mnajdova
+- &#8203;<!-- 21 -->[docs] Improve the Getting Started documentation content (#30808) @mnajdova
+- &#8203;<!-- 20 -->[docs] Fix typo in ad fallback (#30823) @cherniavskii
+- &#8203;<!-- 19 -->[docs] Change ThemeProvider API links (#30705) @atakanzen
+- &#8203;<!-- 18 -->[docs] Retain vendor prefixing in rtl example (#30710) @ryancogswell
+- &#8203;<!-- 17 -->[docs] Fix typo in the Popper ScrollPlayground demo (#30780) @tanyabouman
+- &#8203;<!-- 16 -->[docs] Small fixes on the jss-to-tss migration guide (#30734) @garronej
+- &#8203;<!-- 15 -->[examples] Add Vite.js example (#28241) @goncalovf
+
+### Core
+
+- &#8203;<!-- 29 -->[core] Clarify the label, to match with MUI X (#30831) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Remove none code related instructions from git (#30843) @oliviertassinari
+- &#8203;<!-- 25 -->[core] Fix typos in comments for scripts (#30809) @aefox
+- &#8203;<!-- 24 -->[core] Fix 301 link in the blog @oliviertassinari
+- &#8203;<!-- 10 -->[test] Fix tests on Node 16 (#30819) @michaldudak
+- &#8203;<!-- 09 -->[test] Add explicit types to support noImplicityAny=false (#30798) @m4theushw
+- &#8203;<!-- 08 -->[test] Support React.useId format in \*DescriptionOf (#30657) @eps1lon
+- &#8203;<!-- 03 -->[website] Fix SEO issues (#30829) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add designer position page (#30708) @danilo-leal
+- &#8203;<!-- 01 -->[website] Polish /about page (#30747) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aefox, @alisasanib, @atakanzen, @austinewuncler, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @DiegoYungh, @dryrainbow, @eps1lon, @garronej, @goncalovf, @Hubbz, @Jack-Works, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @siriwatknp, @tanyabouman, @ZeeshanTamboli
+
+## 5.3.1
+
+<!-- generated comparing v5.3.0..master -->
+
+_Jan 24, 2022_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @mnajdova added interoperability guide for using Tailwind CSS (#30700)
+- A meaningful number of 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/icons-material@5.3.1`
+
+- &#8203;<!-- 04 -->[icons] Fix naming typos (#30512) @MrHBS
+- &#8203;<!-- 03 -->[icons] Makes material-icons work with Joy (#30681) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.66`
+
+- &#8203;<!-- 02 -->[SliderUnstyled] Improve typings on some internal utils (#30614) @mnajdova
+
+### Core
+
+- &#8203;<!-- 24 -->[core] Batch small changes (#30690) @oliviertassinari
+- &#8203;<!-- 23 -->[core] Add new structure to ignore list crowdin (#30608) @siriwatknp
+- &#8203;<!-- 22 -->[core] Correct version in package.json (#30677) @michaldudak
+- &#8203;<!-- 01 -->[test] Fix buildApiUtils tests on Windows (#30698) @michaldudak
+
+### Docs
+
+- &#8203;<!-- 26 -->[blog] Enable blog index (#30724) @siriwatknp
+- &#8203;<!-- 25 -->[blog] Introducing the Row Grouping feature (#30598) @alexfauquette
+- &#8203;<!-- 21 -->[docs] Fix SEO crawl errors (#30733) @oliviertassinari
+- &#8203;<!-- 20 -->[docs] Update migration-v4.md (#30721) @ddecrulle
+- &#8203;<!-- 19 -->[docs] Fix migration issues detected by `ahrefs` (#30751) @siriwatknp
+- &#8203;<!-- 18 -->[docs] Add interoprability guide for using Tailwind CSS (#30700) @mnajdova
+- &#8203;<!-- 17 -->[docs] Fix typo in containedSizeMedium class (#30723) @aaneitchik
+- &#8203;<!-- 16 -->[docs] Hotfix the wrong URL in X marketing page (#30729) @siriwatknp
+- &#8203;<!-- 15 -->[docs] Post migration preparation fix (#30716) @siriwatknp
+- &#8203;<!-- 14 -->[docs] Update remix example to restore from error pages (#30592) @mnajdova
+- &#8203;<!-- 13 -->[docs] Use new URLs when enable_redirects is true (#30704) @siriwatknp
+- &#8203;<!-- 12 -->[docs] Add a missing bracket in the migration-v4 guide (#30616) @chaosmirage
+- &#8203;<!-- 11 -->[docs] Add Checkbox color prop change (#30697) @aaneitchik
+- &#8203;<!-- 10 -->[docs] Fix migration to have singular urls (#30695) @siriwatknp
+- &#8203;<!-- 09 -->[docs] Update UXPin link to new landing page (#30691) @Evomatic
+- &#8203;<!-- 08 -->[docs] Close user menu on click in the responsive app bar demo (#30664) @NoahYarian
+- &#8203;<!-- 07 -->[docs] Clear the difference between UI and React components (#29930) @oliviertassinari
+- &#8203;<!-- 06 -->[docs] Make Autocomplete docs gender neutral (#30679) @exequielbc
+- &#8203;<!-- 05 -->[docs] Update doc structure for X components (#30684) @siriwatknp
+
+All contributors of this release in alphabetical order: @aaneitchik, @alexfauquette, @chaosmirage, @ddecrulle, @Evomatic, @exequielbc, @michaldudak, @mnajdova, @MrHBS, @NoahYarian, @oliviertassinari, @siriwatknp
+
+## 5.3.0
+
+<!-- generated comparing v5.2.8..master -->
+
+_Jan 17, 2022_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛠 @siriwatknp added support for callbacks in styleOverrides (#30524)
+- 🧩 @ZeeshanTamboli and @VicHofs improved customization of components (#30515, #30212)
+- 🛠 @hbjORbj fixed the use of ResizeObserver in Masonry component (#29896)
+- 📄 @danilo-leal and @siriwatknp created our own blog home page (#30121)
+
+### `@mui/material@5.3.0`
+
+- [Autocomplete] Add ability to pass props to `Paper` component (#30515) @ZeeshanTamboli
+- [Select] Add defaultOpen prop (#30212) @VicHofs
+
+### `@mui/system@5.3.0`
+
+- [system][box, grid, typography] `textTransform` prop should work directly on component (#30437) @hbjORbj
+- [system] Support callback value in `styleOverrides` slot (#30524) @siriwatknp
+
+### `@mui/lab@5.0.0-alpha.65`
+
+- [Masonry] Observe every masonry child to trigger computation when needed (#29896) @hbjORbj
+- [MobileDatePicker] Fix calling onOpen when readOnly is true (#30561) @alisasanib
+
+### `@mui/codemod@5.3.0`
+
+- [codemod] Bump `jscodeshift` to remove `colors` dependency (#30578) @siriwatknp
+
+### `@mui/styled-engine-sc@5.3.0`
+
+- [styled-engine-sc] Add the withConfig API to enable using the babel plugin for styled-comonents (#30589) @mnajdova
+
+### `@mui/joy@5.0.0-alpha.11`
+
+- [Joy] Add `SvgIcon` component (#30570) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.65`
+
+- [SliderUnstyled] Add useSlider hook and polish (#30094) @mnajdova
+
+### Docs
+
+- [docs] End code block in test/README.md (#30531) @yaboi
+- [docs] Remove redundant grouping in /components/radio-buttons/ (#30065) @eps1lon
+- [docs] Update migration scripts and e2e tests (#30583) @siriwatknp
+- [docs] Fix migration guides for versions older than v4 (#30595) @kkirsche
+- [docs] Inform about specific files for DataGrid locales (#30411) @alexfauquette
+- [docs] jss-to-tss migration advise to drop clsx in favor of cx (#30527) @garronej
+- [docs] Fix integration with MUI X (#30593) @oliviertassinari
+- [docs] Adding peer dependencies explanation on @mui/lab README.md (#30532) @glaucoheitor
+- [docs] Add missing quote in migration docs (#30587) @Atralbus
+- [docs] Update link to Doit sponsor (#30586) @oliviertassinari
+- [docs] Add products identifier and drawer (#30283) @siriwatknp
+- [website] Fix code button with installation command (#30622) @danilo-leal
+- [website] Add a Blog index page (#30121) @danilo-leal
+- [website] Migrate Twitter from @MaterialUI to @MUI_hq @oliviertassinari
+- [website] Add Andrii to the About Us page (#30581) @cherniavskii
+
+### Core
+
+- [core] Revert changes to peer dependencies (#30662) @oliviertassinari
+- [core] Renovate should not try to update node (#30659) @oliviertassinari
+- [core] Remove dead files (#30663) @oliviertassinari
+- [core] Fix outdated TypeScript template (#30596) @oliviertassinari
+- [core] Remove extra `</p>` from header of README.md (#30530) @yaboi
+- [core] Fix `docs:api` script for Windows OS (#30533) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @Atralbus, @cherniavskii, @danilo-leal, @eps1lon, @garronej, @glaucoheitor, @hbjORbj, @kkirsche, @mnajdova, @oliviertassinari, @siriwatknp, @VicHofs, @yaboi, @ZeeshanTamboli
+
+## 5.2.8
+
+<!-- generated comparing v5.2.7..master -->
+
+_Jan 10, 2022_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- A meaningful number of 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.2.8`
+
+- &#8203;<!-- 05 -->[TextField][inputlabel] Remove `pointer-events: none` property (#30493) @hbjORbj
+- &#8203;<!-- 02 -->[Slider] Add `input` slot to components and componentsProps (#30362) @alexandre-lelain
+
+### `@mui/joy@5.0.0-alpha.10`
+
+- &#8203;<!-- 04 -->[Joy] Add `Typography` component (#30489) @siriwatknp
+- &#8203;<!-- 03 -->[Joy] Add functional `Switch` component (#30487) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs] Update markdown parser to remove backticks from description (#30495) @aefox
+- &#8203;<!-- 17 -->[docs] Fix the crash when applying custom colors (#30563) @siriwatknp
+- &#8203;<!-- 16 -->[docs] Location change of Sebastian (#30528) @eps1lon
+- &#8203;<!-- 15 -->[docs] Lint markdown in the CI (#30395) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Fix `componentsProps` API docs and PropTypes (#30502) @ZeeshanTamboli
+- &#8203;<!-- 13 -->[docs] Codemod doc for overriding styles using tss (#30499) @garronej
+- &#8203;<!-- 12 -->[docs] fix edge case when replacing data-grid url for migration (#30505) @siriwatknp
+- &#8203;<!-- 11 -->[docs] fix replace url for migration (#30503) @siriwatknp
+- &#8203;<!-- 10 -->[docs] Prepare scripts for migrating to new structure (#30386) @siriwatknp
+- &#8203;<!-- 09 -->[docs] Adjust RTL Guide demos to fully support RTL (#30387) @noam-honig
+- &#8203;<!-- 08 -->[docs] Move @eps1lon to community (#30473) @oliviertassinari
+- &#8203;<!-- 07 -->[docs] Fix typo and spelling in the-sx-prop.md (#30482) @aefox
+- &#8203;<!-- 06 -->[docs] More general docs polishing (#30371) @danilo-leal
+- &#8203;<!-- 01 -->[website] Add José on the /about page (#30492) @danilo-leal
+
+All contributors of this release in alphabetical order: @aefox, @alexandre-lelain, @danilo-leal, @eps1lon, @garronej, @hbjORbj, @noam-honig, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
+## 5.2.7
+
+<!-- generated comparing v5.2.6..master -->
+
+_Jan 3, 2022_
+
+A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📓 Improvements on the Vietnamese (vi-VN) and Finnish (fi-FI) locales (#30426, #30442) @hckhanh @Certificate
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.2.7`
+
+- &#8203;<!-- 14 -->[Autocomplete] Fix calling onChange for duplicate values (#30374) @alisasanib
+- &#8203;<!-- 13 -->[Avatar] Fix TypeScript error on imgProps (#30255) @ahmad-reza619
+- &#8203;<!-- 12 -->[Badge] Fix `classes` prop TypeScript type (#30427) @ZeeshanTamboli
+- &#8203;<!-- 03 -->[SvgIcon] Allow viewBox to inherit from Component through inheritViewBox prop (#29954) @alex-dikusar
+- &#8203;<!-- 04 -->[SvgIcon] Correct API docs and code style (#30470) @michaldudak
+
+### Docs
+
+- &#8203;<!-- 11 -->[blog] 2021 (#30425) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Fix typo on the Grid docs page (#30446) @abhi45
+- &#8203;<!-- 07 -->[docs] Fix `useMediaQuery` SSR example to v5 theme API (#30454) @ValentinH
+- &#8203;<!-- 11 -->[docs] Improve the migration guide and add examples for transforming to `tss-react` (#30388) @mnajdova
+- &#8203;<!-- 09 -->[docs] Make the reference to the select clearer (#30460) @boazrymland
+- &#8203;<!-- 08 -->[docs] Sync translations with Crowdin (#30385) @l10nbot
+- &#8203;<!-- 06 -->[example] Avoid double rendering in the Remix example (#30366) @mnajdova
+- &#8203;<!-- 05 -->[i18n] improve viVN locale (#30426) @hckhanh
+- &#8203;<!-- 04 -->[l10n] Improve fiFI locale (#30442) @Certificate
+- &#8203;<!-- 02 -->[website] Add new batch of open roles (#30282) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Refactor page context with next router (#30020) @siriwatknp
+
+### Core
+
+- &#8203;<!-- 13 -->[core] Automatically close issues that are incomplete and inactive (#30459) @oliviertassinari
+- &#8203;<!-- 10 -->[core] Remove contrib tweet (#30455) @oliviertassinari
+
+All contributors of this release in alphabetical order: @abhi45, @ahmad-reza619, @alex-dikusar, @alisasanib, @boazrymland, @Certificate, @hckhanh, @l10nbot, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @ValentinH, @ZeeshanTamboli
+
+## 5.2.6
+
+<!-- generated comparing v5.2.5..master -->
+
+_Dec 27, 2021_
+
+A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 📓 The Norwegian Bokmål (nb-NO) locale was added (#27520) @wogsland
+- 🛠 Introduced a new `useBadge` hook in the `@mui/base` package (#30246) @mnajdova
+- And more 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.2.6`
+
+- &#8203;<!-- 24 -->[ButtonGroup] Fix typo in ButtonGroupContext's interface (#30376) @kealjones-wk
+- &#8203;<!-- 03 -->[l10n] Add Norwegian Bokmål (nb-NO) locale (#27520) @wogsland
+
+### `@mui/base@5.0.0-alpha.62`
+
+- &#8203;<!-- 26 -->[BadgeUnstyled] Add useBadge hook (#30246) @mnajdova
+
+### `@mui/joy@5.0.0-alpha.8`
+
+- &#8203;<!-- 04 -->[Joy] Button API (#29962) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 27 -->[docs] Fix color coercion (#30319) @Janpot
+- &#8203;<!-- 25 -->[blog] Fix file import conflict resolution (#30391) @oliviertassinari
+- &#8203;<!-- 21 -->[docs] Fix crash on Safari because of unsupported lookahead feature (#30345) @cherniavskii
+- &#8203;<!-- 20 -->[docs] Update to new website domain (#30396) @ryota-murakami
+- &#8203;<!-- 19 -->[docs] Fix text from material-ui to @mui to reflect v5 name changes (#30393) @pupudu
+- &#8203;<!-- 18 -->[docs] Fix a11y in Menu demos (#30378) @ZeeshanTamboli
+- &#8203;<!-- 17 -->[docs] Document how to unmount transition child (#30382) @oliviertassinari
+- &#8203;<!-- 16 -->[docs] The current standard for quotes is QUOTATION MARK @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Fix 404 links (#30380) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Fix Breadcrumb description (#30307) @jamesmelzer
+- &#8203;<!-- 13 -->[docs] Modify injection order for Gatsby and SSR examples (#30358) @ShuPink
+- &#8203;<!-- 12 -->[docs] Improve the translation experience (#30373) @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Sync translations with Crowdin (#30176) @l10nbot
+- &#8203;<!-- 10 -->[docs] Fix link to /size-snapshot (#30363) @oliviertassinari
+- &#8203;<!-- 09 -->[docs] Fix incorrect aria label in SpeedDial demo (#30354) @chwallen
+- &#8203;<!-- 08 -->[docs] Fix incorrect number of breakpoint helpers (#30353) @chwallen
+- &#8203;<!-- 07 -->[docs] Update outdated links (#30260) @oliviertassinari
+- &#8203;<!-- 06 -->[docs] Support redirects from old urls to /material/\* (#30286) @siriwatknp
+- &#8203;<!-- 05 -->[examples] Fix CSS modules integration (#30381) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Fix SEO issues (#30372) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Sync sponsors (#30259) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 28 -->[core] Rename Material-UI to MUI (#30338) @ZeeshanTamboli
+- &#8203;<!-- 23 -->[core] Fix warning in dev mode (#30368) @oliviertassinari
+- &#8203;<!-- 22 -->[core] Update `buildApi` script to support new structure (#30245) @siriwatknp
+
+All contributors of this release in alphabetical order: @cherniavskii, @chwallen, @jamesmelzer, @Janpot, @kealjones-wk, @l10nbot, @mnajdova, @oliviertassinari, @pupudu, @ryota-murakami, @ShuPink, @siriwatknp, @wogsland, @ZeeshanTamboli
 
 ## 5.2.5
 
@@ -1128,7 +1472,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   replace `@material-ui/*` prefix with `@mui/*`:
 
-  ```
+  ```sh
   @material-ui/system -> @mui/system
   @material-ui/styles -> @mui/styles
   @material-ui/lab -> @mui/lab
@@ -1141,7 +1485,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   except these 3 packages that are renamed.
 
-  ```
+  ```sh
   @material-ui/core => @mui/material        // represents Material Design components.
   @material-ui/icons => @mui/icons-material // represents Material Design icons.
   @material-ui/unstyled => @mui/base        // fully functional components with minimum styles.
@@ -2514,6 +2858,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   ```
 
 - &#8203;<!-- 63 -->[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw
+
   ```diff
   <Autocomplete
   -  getOptionSelected={(option, value) => option.title === value.title}
@@ -4087,7 +4432,7 @@ All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d
 
 ## 5.0.0-alpha.23
 
-###### _Jan 14, 2021_
+_Jan 14, 2021_
 
 A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4202,7 +4547,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.22
 
-###### _Jan 4, 2021_
+_Jan 4, 2021_
 
 A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4254,7 +4599,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.21
 
-###### _Dec 30, 2020_
+_Dec 30, 2020_
 
 A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4327,7 +4672,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.20
 
-###### _Dec 21, 2020_
+_Dec 21, 2020_
 
 A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4405,7 +4750,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.19
 
-###### _Dec 13, 2020_
+_Dec 13, 2020_
 
 A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4533,7 +4878,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.18
 
-###### _Dec 3, 2020_
+_Dec 3, 2020_
 
 A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4625,7 +4970,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.17
 
-###### _Nov 23, 2020_
+_Nov 23, 2020_
 
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4792,7 +5137,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.16
 
-###### _Nov 14, 2020_
+_Nov 14, 2020_
 
 A big thanks to the 34 contributors who made this release possible. Here are some highlights ✨:
 
@@ -4896,7 +5241,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.15
 
-###### _Nov 4, 2020_
+_Nov 4, 2020_
 
 A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
 
@@ -5008,7 +5353,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som
 
 ## 5.0.0-alpha.14
 
-###### _Oct 23, 2020_
+_Oct 23, 2020_
 
 A big thanks to the 23 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5059,12 +5404,14 @@ Here are some highlights ✨:
   You can read [their migration guide](https://popper.js.org/docs/v2/migration-guide/) or the following summary:
 
   - The CSS prefixes have changed:
+
     ```diff
     popper: {
       zIndex: 1,
     - '&[x-placement*="bottom"] $arrow': {
     + '&[data-popper-placement*="bottom"] $arrow': {
     ```
+
   - Method names have changed.
 
     ```diff
@@ -5179,7 +5526,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.13
 
-###### _Oct 17, 2020_
+_Oct 17, 2020_
 
 A big thanks to the 25 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5305,7 +5652,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.12
 
-###### _Oct 11, 2020_
+_Oct 11, 2020_
 
 A big thanks to the 45 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5529,7 +5876,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.11
 
-###### _Sep 26, 2020_
+_Sep 26, 2020_
 
 A big thanks to the 29 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5545,7 +5892,7 @@ Here are some highlights ✨:
   Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/basics/)).
 
   This change has been in our roadmap for more than a year.
-  We announced it in the [v4 release blog post](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) as a direction v5 would take.
+  We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take.
 
 - 🛠 A first iteration on the unstyled components.
 
@@ -5763,7 +6110,7 @@ More documentation are coming.
 
 ## 5.0.0-alpha.10
 
-###### _Sep 15, 2020_
+_Sep 15, 2020_
 
 A big thanks to the 16 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5828,13 +6175,13 @@ Here are some highlights ✨:
 
   Before:
 
-  ```
+  ```sh
   theme.spacing(2) => 16
   ```
 
   After:
 
-  ```
+  ```sh
   theme.spacing(2) => '16px'
   ```
 
@@ -5893,7 +6240,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.9
 
-###### _Sep 6, 2020_
+_Sep 6, 2020_
 
 A big thanks to the 14 contributors who made this release possible.
 Here are some highlights ✨:
@@ -5946,7 +6293,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.8
 
-###### _Aug 31, 2020_
+_Aug 31, 2020_
 
 A big thanks to the 19 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6122,7 +6469,7 @@ const theme = createMuiTheme({
 
 ## 5.0.0-alpha.7
 
-###### _Aug 22, 2020_
+_Aug 22, 2020_
 
 A big thanks to the 22 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6252,7 +6599,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.6
 
-###### _Aug 13, 2020_
+_Aug 13, 2020_
 
 A big thanks to the 26 contributors who made this release possible.
 Here are some highlights ✨:
@@ -6295,7 +6642,7 @@ Here are some highlights ✨:
 
 ### `@material-ui/core@v5.0.0-alpha.6`
 
-### Breaking changes
+#### Breaking changes
 
 - [Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3
   Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:
@@ -6454,7 +6801,7 @@ Here are some highlights ✨:
   +},
   ```
 
-### Changes
+#### Changes
 
 - [Avatar] Custom variant (#22139) @mnajdova
 - [Badge] Add missing class key (#22095) @kodai3
@@ -6474,7 +6821,7 @@ Here are some highlights ✨:
 
 ### `@material-ui/lab@v5.0.0-alpha.6`
 
-### Breaking changes
+#### Breaking changes
 
 - [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3
   Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
@@ -6486,7 +6833,7 @@ Here are some highlights ✨:
   +<Skeleton variant="rectangular">
   ```
 
-### Changes
+#### Changes
 
 - [Autocomplete] Add support for "{label: string}" data type as a default for "options" (#21992) @DanailH
 - [TreeView] Add disabled prop (#20133) @netochaves
@@ -6538,7 +6885,7 @@ Here are some highlights ✨:
 
 ## 5.0.0-alpha.5
 
-###### _July 28, 2020_
+_July 28, 2020_
 
 A big thanks to the 18 contributors who made this release possible.
 
@@ -6609,7 +6956,7 @@ A big thanks to the 18 contributors who made this release possible.
 
 ## 5.0.0-alpha.4
 
-###### _July 19, 2020_
+_July 19, 2020_
 
 A big thanks to the 11 contributors who made this release possible.
 
@@ -6651,7 +6998,7 @@ A big thanks to the 11 contributors who made this release possible.
 
 ## 5.0.0-alpha.3
 
-###### _July 12, 2020_
+_July 12, 2020_
 
 A big thanks to the 14 contributors who made this release possible.
 
@@ -6700,7 +7047,7 @@ A big thanks to the 14 contributors who made this release possible.
 
 ## 5.0.0-alpha.2
 
-###### _July 4, 2020_
+_July 4, 2020_
 
 A big thanks to the 16 contributors who made this release possible.
 
@@ -6762,7 +7109,7 @@ A big thanks to the 16 contributors who made this release possible.
 
 ## 5.0.0-alpha.1
 
-###### _June 27, 2020_
+_June 27, 2020_
 
 A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
 
@@ -6878,6 +7225,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som
   ```
 
 - [Accordion] typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
   ```diff
   -<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
   +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />

package/ThemeProvider/ThemeProvider.d.ts

@@ -10,7 +10,7 @@ export interface ThemeProviderProps<Theme = DefaultTheme> {
  * It should preferably be used at **the root of your component tree**.
  * API:
  *
- * - [ThemeProvider API](https://mui.com/api/theme-provider/)
+ * - [ThemeProvider API](/customization/theming/#themeprovider)
  */
 export default function ThemeProvider<T = DefaultTheme>(
   props: ThemeProviderProps<T>,

package/createStyled.js

@@ -156,7 +156,11 @@ function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -218,6 +222,10 @@ function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/cssVars/createCssVarsProvider.js

@@ -32,6 +32,8 @@ var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorS
 
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
 
+var _createGetCssVar = _interopRequireDefault(require("./createGetCssVar"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["colorSchemes"],
@@ -151,7 +153,8 @@ function createCssVarsProvider(options) {
       colorSchemes,
       vars: rootVars,
       spacing: themeProp.spacing ? (0, _createSpacing.default)(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints
+      breakpoints: themeProp.breakpoints ? (0, _createBreakpoints.default)(themeProp.breakpoints) : systemBreakpoints,
+      getCssVar: (0, _createGetCssVar.default)(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/cssVars/createGetCssVar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;

package/cssVars/createGetCssVar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGetCssVar;
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/createStyled.js

@@ -138,7 +138,11 @@ export default function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -201,6 +205,10 @@ export default function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -14,6 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -126,7 +127,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/esm/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/esm/index.js

@@ -38,4 +38,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/esm/typography.js

@@ -19,6 +19,9 @@ export const fontWeight = style({
 export const letterSpacing = style({
   prop: 'letterSpacing'
 });
+export const textTransform = style({
+  prop: 'textTransform'
+});
 export const lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export const typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/index.d.ts

@@ -88,6 +88,7 @@ export const fontWeight: SimpleStyleFunction<'fontWeight'>;
 export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
+export const textTransform: SimpleStyleFunction<'textTransform'>;
 export type TypographyProps = PropsFor<typeof typography>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -161,4 +162,5 @@ export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 
 export { default as unstable_createCssVarsProvider } from './cssVars';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
 export * from './cssVars';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.5
+/** @license MUI v5.4.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -49,7 +49,8 @@ var _exportNames = {
   useTheme: true,
   useThemeWithoutDefault: true,
   ThemeProvider: true,
-  unstable_createCssVarsProvider: true
+  unstable_createCssVarsProvider: true,
+  unstable_createGetCssVar: true
 };
 Object.defineProperty(exports, "Box", {
   enumerable: true,
@@ -243,6 +244,12 @@ Object.defineProperty(exports, "unstable_createCssVarsProvider", {
     return _createCssVarsProvider.default;
   }
 });
+Object.defineProperty(exports, "unstable_createGetCssVar", {
+  enumerable: true,
+  get: function () {
+    return _createGetCssVar.default;
+  }
+});
 Object.defineProperty(exports, "unstable_extendSxProp", {
   enumerable: true,
   get: function () {
@@ -468,6 +475,8 @@ var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 
 var _createCssVarsProvider = _interopRequireDefault(require("./cssVars/createCssVarsProvider"));
 
+var _createGetCssVar = _interopRequireDefault(require("./cssVars/createGetCssVar"));
+
 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); }
 
 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; }

package/legacy/createStyled.js

@@ -1,4 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import styledEngineStyled from '@mui/styled-engine';
@@ -139,7 +140,15 @@ export default function createStyled() {
           var styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            var resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(function (_ref2) {
+              var _ref3 = _slicedToArray(_ref2, 2),
+                  slotKey = _ref3[0],
+                  slotStyle = _ref3[1];
+
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -171,9 +180,9 @@ export default function createStyled() {
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
       } else if (typeof styleArg === 'function') {
         // If the type is function, we need to define the default theme.
-        transformedStyleArg = function transformedStyleArg(_ref2) {
-          var themeInput = _ref2.theme,
-              other = _objectWithoutProperties(_ref2, ["theme"]);
+        transformedStyleArg = function transformedStyleArg(_ref4) {
+          var themeInput = _ref4.theme,
+              other = _objectWithoutProperties(_ref4, ["theme"]);
 
           return styleArg(_extends({
             theme: isEmpty(themeInput) ? defaultTheme : themeInput
@@ -200,6 +209,10 @@ export default function createStyled() {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/legacy/cssVars/createCssVarsProvider.js

@@ -13,6 +13,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -132,7 +133,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes: colorSchemes,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getCssVar: createGetCssVar(prefix)
     });
     var styleSheet = {};
     Object.entries(colorSchemes).forEach(function (_ref2) {

package/legacy/cssVars/createGetCssVar.js

@@ -0,0 +1,32 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+  function appendVar() {
+    for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
+      vars[_key] = arguments[_key];
+    }
+
+    if (!vars.length) {
+      return '';
+    }
+
+    return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(vars[0]).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  var getCssVar = function getCssVar(field) {
+    for (var _len2 = arguments.length, vars = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      vars[_key2 - 1] = arguments[_key2];
+    }
+
+    return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, vars), ")");
+  };
+
+  return getCssVar;
+}

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.5
+/** @license MUI v5.4.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/legacy/typography.js

@@ -19,6 +19,9 @@ export var fontWeight = style({
 export var letterSpacing = style({
   prop: 'letterSpacing'
 });
+export var textTransform = style({
+  prop: 'textTransform'
+});
 export var lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export var typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-var typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+var typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/modern/createStyled.js

@@ -136,7 +136,11 @@ export default function createStyled(input = {}) {
           const styleOverrides = getStyleOverrides(componentName, theme);
 
           if (styleOverrides) {
-            return overridesResolver(props, styleOverrides);
+            const resolvedStyleOverrides = {};
+            Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
+              resolvedStyleOverrides[slotKey] = typeof slotStyle === 'function' ? slotStyle(props) : slotStyle;
+            });
+            return overridesResolver(props, resolvedStyleOverrides);
           }
 
           return null;
@@ -199,6 +203,10 @@ export default function createStyled(input = {}) {
       return Component;
     };
 
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+
     return muiStyledResolver;
   };
 }

package/modern/cssVars/createCssVarsProvider.js

@@ -14,6 +14,7 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
+import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -124,7 +125,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       vars: rootVars,
       spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
-      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
+      getCssVar: createGetCssVar(prefix)
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {

package/modern/cssVars/createGetCssVar.js

@@ -0,0 +1,20 @@
+/**
+ * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
+ * and they does not need to remember the prefix (defined once).
+ */
+export default function createGetCssVar(prefix = '') {
+  function appendVar(...vars) {
+    if (!vars.length) {
+      return '';
+    }
+
+    return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
+  } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
+
+
+  const getCssVar = (field, ...vars) => {
+    return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
+  };
+
+  return getCssVar;
+}

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.5
+/** @license MUI v5.4.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,5 @@ export { default as useTheme } from './useTheme';
 export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
 export * from './colorManipulator';
 export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
+export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';

package/modern/typography.js

@@ -19,6 +19,9 @@ export const fontWeight = style({
 export const letterSpacing = style({
   prop: 'letterSpacing'
 });
+export const textTransform = style({
+  prop: 'textTransform'
+});
 export const lineHeight = style({
   prop: 'lineHeight'
 });
@@ -30,5 +33,5 @@ export const typographyVariant = style({
   cssProperty: false,
   themeKey: 'typography'
 });
-const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = compose(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 export default typography;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.2.5",
+  "version": "5.4.0",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -29,7 +29,7 @@
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
     "@types/react": "^16.8.6 || ^17.0.0",
-    "react": "^17.0.2"
+    "react": "^17.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@mui/private-theming": "^5.2.3",
-    "@mui/styled-engine": "^5.2.5",
+    "@babel/runtime": "^7.16.7",
+    "@mui/private-theming": "^5.3.0",
+    "@mui/styled-engine": "^5.3.0",
     "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.2.3",
+    "@mui/utils": "^5.3.0",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",
     "prop-types": "^15.7.2"

package/styleFunctionSx/styleFunctionSx.d.ts

@@ -49,6 +49,7 @@ export type SystemStyleObject<Theme extends object = {}> =
   | SystemCssProperties<Theme>
   | CSSPseudoSelectorProps<Theme>
   | CSSSelectorObject<Theme>
+  | { [cssVariable: string]: string | number }
   | null;
 
 /**

package/typography.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typographyVariant = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
+exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
 
 var _style = _interopRequireDefault(require("./style"));
 
@@ -35,6 +35,10 @@ const letterSpacing = (0, _style.default)({
   prop: 'letterSpacing'
 });
 exports.letterSpacing = letterSpacing;
+const textTransform = (0, _style.default)({
+  prop: 'textTransform'
+});
+exports.textTransform = textTransform;
 const lineHeight = (0, _style.default)({
   prop: 'lineHeight'
 });
@@ -49,6 +53,6 @@ const typographyVariant = (0, _style.default)({
   themeKey: 'typography'
 });
 exports.typographyVariant = typographyVariant;
-const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);
+const typography = (0, _compose.default)(typographyVariant, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, textTransform);
 var _default = typography;
 exports.default = _default;