@mui/system 5.8.1 → 5.8.4

package/CHANGELOG.md

@@ -1,5 +1,214 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.8.4
+
+<!-- generated comparing v5.8.3..master -->
+
+_Jun 14, 2022_
+
+A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Added support for custom breakpoints in the `Grid` component by @boutahlilsoufiane
+- 📚 Added guide on how to use Material UI with Shadow DOM by @cherniavskii
+- many other 🐛 bug fixes and 📚 documentation improvements
+
+### `@mui/material@5.8.4`
+
+- &#8203;<!-- 36 -->[Button] Add missing classes in `ButtonClasses` type (#33040) @ZeeshanTamboli
+- &#8203;<!-- 20 -->[Grid] Fix prop-type key regression (#33123) @oliviertassinari
+- &#8203;<!-- 19 -->[Grid] Support custom breakpoints (#31998) @boutahlilsoufiane
+- &#8203;<!-- 18 -->[Grow] Limit CSS transition bug workaround to Safari 15.4 only (#32996) @igordanchenko
+- &#8203;<!-- 17 -->[Hidden] Remove dependency on hoist-non-react-statics (#33015) @oliviertassinari
+- &#8203;<!-- 12 -->[Link] Add support for CSS variables (#33036) @winderica
+- &#8203;<!-- 07 -->[Popover] Export `getOffsetTop` & `getOffsetLeft` from Popover's index and add typings (#32959) @rart
+- &#8203;<!-- 06 -->[Slider] Fix SliderValueLabelProps type (#32895) @oliviertassinari
+- &#8203;<!-- 05 -->[Snackbar] Remove `RTL` direction specific logic (#32808) @aaarichter
+- &#8203;<!-- 04 -->[StepIcon] Fix text centering when changing browser font size (#32706) @alansouzati
+- &#8203;<!-- 02 -->[Tabs] Scroll by width of the first visible tab if only one tab is partially visible (#32778) @frankkluijtmans
+
+### `@mui/system@5.8.4`
+
+- &#8203;<!-- 38 -->[Stack, system] Apply correct responsive styles if any custom breakpoints are provided (#32913) @ZeeshanTamboli
+- &#8203;<!-- 03 -->[system] Fix missing typings for ColorFormat (#32417) @l-zoy
+
+### `@mui/codemod@5.8.4`
+
+- &#8203;<!-- 35 -->[codemod] Add support for `@mui/styles/makeStyles` imports (#32962) @joshkel
+
+### `@mui/lab@5.0.0-alpha.86`
+
+- &#8203;<!-- 08 -->[pickers] Fix broken ref forwarding (#33107) @oliviertassinari
+- &#8203;<!-- 13 -->[lab] Fix React's `forwardRef` warning when importing from the index (#33134) @mnajdova
+
+### `@mui/base@5.0.0-alpha.85`
+
+- &#8203;<!-- 11 -->[MenuUnstyled] Accept callbacks in componentsProps (#32997) @michaldudak
+- &#8203;<!-- 10 -->[ModalUnstyled] Fix errors from the W3C validator about incorrect aria-hidden attribute on some elements (#30920) @mkrtchian
+- &#8203;<!-- 09 -->[ModalUnstyled] Fix behavior of not respecting props ariaHidden value (#32055) @tech-meppem
+
+### `@mui/joy@5.0.0-alpha.32`
+
+- &#8203;<!-- 16 -->[Joy] Miscellaneous card fixes (#33129) @siriwatknp
+- &#8203;<!-- 15 -->[Joy] Miscellaneous fixes (#33073) @siriwatknp
+- &#8203;<!-- 14 -->[Joy] Add typography and link docs (#33047) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 40 -->[Contributing.md] Local install instructions (#32975) @Moizsohail
+- &#8203;<!-- 32 -->[docs] Add responsive AppBar with drawer (#32769) @dvlprAlamin
+- &#8203;<!-- 31 -->[docs] Move codesandbox to MUI org (#33122) @oliviertassinari
+- &#8203;<!-- 30 -->[docs] Add Shadow DOM guide (#33007) @cherniavskii
+- &#8203;<!-- 29 -->[docs] Fix typo in Material UI overview page (#33087) @oliviertassinari
+- &#8203;<!-- 28 -->[docs] Miscellaneous fixes in `MUI Base` docs (#33091) @ZeeshanTamboli
+- &#8203;<!-- 27 -->[docs] Fix GitHub capitalization (#33071) @oliviertassinari
+- &#8203;<!-- 26 -->[docs] Fix a typo in `InputUnstyled` docs (#33077) @ZeeshanTamboli
+- &#8203;<!-- 25 -->[docs] Add notification for Joy blog post (#33059) @siriwatknp
+- &#8203;<!-- 24 -->[docs] Improve aspect ratio docs and integration (#33065) @siriwatknp
+- &#8203;<!-- 34 -->[docs] Update code block copy label (#33128) @siriwatknp
+- &#8203;<!-- 23 -->[docs] Fix typo in Autocomplete CSS API (#32838) @KeaghanKennedy
+- &#8203;<!-- 22 -->[docs] Improvements for Radio Group Rating Docs (#32843) @Kai-W
+- &#8203;<!-- 21 -->[docs] Enable Joy pages (#33064) @siriwatknp
+- &#8203;<!-- 02 -->[website] Add Joy UI to the pricing page (#33099) @danilo-leal
+- &#8203;<!-- 01 -->[website] Clarify the pricing a bit (#33069) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 39 -->yarn proptypes @oliviertassinari
+- &#8203;<!-- 34 -->[core] Update dependencies to fix security vulnerabilities (#33095) @michaldudak
+- &#8203;<!-- 33 -->[core] Import new line convention (#33068) @oliviertassinari
+- &#8203;<!-- 37 -->[core] Make repository configurable in changelog script (#33130) @Janpot
+
+All contributors of this release in alphabetical order: @aaarichter, @alansouzati, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @dvlprAlamin, @frankkluijtmans, @igordanchenko, @Janpot, @joshkel, @Kai-W, @KeaghanKennedy, @l-zoy, @michaldudak, @mkrtchian, @mnajdova, @Moizsohail, @oliviertassinari, @pushys, @rart, @siriwatknp, @tech-meppem, @winderica, @ZeeshanTamboli
+
+## 5.8.3
+
+<!-- generated comparing v5.8.2..master -->
+
+_Jun 7, 2022_
+
+A big thanks to the 15 contributors who made this release possible.
+This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.8.3`
+
+- [Alert] Constrain message width and allow overflow (#32747) @Janpot
+- [Checkbox] Add support for CSS variables (#32579) @haneenmahd
+- [Slider] Fix positioning of tooltips on vertical slider (#32919) @abhinav-22-tech
+
+### `@mui/system@5.8.3`
+
+- [system] Configurable attributes for libraries (#32971) @siriwatknp
+
+### `@mui/codemod@5.8.3`
+
+- [codemod] Fix infinite loop in jss-to-tss-react and add TODO (#33048) @ryancogswell
+
+### `@mui/lab@5.0.0-alpha.85`
+
+- [pickers] Add deprecations when importing pickers from the lab (#32950) @flaviendelangle
+
+### `@mui/joy@5.0.0-alpha.31`
+
+- [Joy] Add `Slider` component and demos (#32694) @hbjORbj
+- [Joy] Add articles about customization approaches (#32887) @siriwatknp
+- [Joy] Add automatic adjustment page to core features (#32980) @siriwatknp
+- [Joy] Add docs about dark mode (#33002) @siriwatknp
+- [Joy] Add template UIs & first look blog post (#32791) @danilo-leal
+
+### `@mui/base@5.0.0-alpha.84`
+
+- [base] Remove @mui/system in tests (#32945) @kevinji
+- [ButtonUnstyled] Accept callbacks in componentsProps (#32991) @michaldudak
+- [SwitchUnstyled] Accept callbacks in componentsProps (#32993) @michaldudak
+- [TablePaginationUnstyled] Define ownerState and slot props' types (#32905) @michaldudak
+- [TabPanelUnstyled] Define ownerState and slot props' types (#32928) @michaldudak
+- [TabsListUnstyled] Define ownerState and slot props' types (#32925) @michaldudak
+
+### Docs
+
+- [blog] Fix anchor link scroll (#32994) @oliviertassinari
+- [docs] Add "Migration" section to sidebar and revise v4-v5 content (#32740) @samuelsycamore
+- [docs] Add What doesn't count as a breaking change? (#32850) @oliviertassinari
+- [docs] Fix 301 link @oliviertassinari
+- [docs] Fix icon color in `BadgeUnstyled` docs (#32976) @ZeeshanTamboli
+- [docs] Improve product identifier (#32707) @danilo-leal
+- [docs] Improve UX with back to top (#32896) @oliviertassinari
+- [docs] Polish overview page to Material UI (#32954) @oliviertassinari
+- [docs] Redirect older URLs (#33037) @oliviertassinari
+- [docs] Remove pickers page from the Lab section (#32961) @DanailH
+- [docs] Show product identifier on updated MUI X Introduction pages (#32966) @samuelsycamore
+- [docs] Throw on 301 links (#32939) @oliviertassinari
+- [website] Add Gerda to the about page (#33038) @danilo-leal
+- [website] Polish the pricing page (#32811) @oliviertassinari
+- [website] Remove unnecessary `address` dependency (#32957) @michaldudak
+
+### Core
+
+- [core] Improve icon synonyms (#32742) @oliviertassinari
+- [core] Prepare Next.js config for React 18 (#32963) @michaldudak
+- [core] Remove dead logic (#32940) @oliviertassinari
+- [core] Update dependencies to fix security vulnerabilities (#32947) @michaldudak
+- Add security link to README for Tidelift @mbrookes
+
+All contributors of this release in alphabetical order: @abhinav-22-tech, @DanailH, @danilo-leal, @flaviendelangle, @haneenmahd, @hbjORbj, @Janpot, @kevinji, @mbrookes, @michaldudak, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
+## 5.8.2
+
+<!-- generated comparing v5.8.1..master -->
+
+_May 30, 2022_
+
+A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/system@5.8.2`
+
+- &#8203;<!-- 04 -->[system] Add `getColorSchemeSelector` util (#32868) @siriwatknp
+
+### `@mui/lab@5.0.0-alpha.84`
+
+- &#8203;<!-- 07 -->[Masonry] Place items to the left when there are less objects than specified in `column` prop (#32873) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.83`
+
+- &#8203;<!-- 24 -->[BadgeUnstyled] Define ownerState and slot props' types (#32750) @michaldudak
+- &#8203;<!-- 06 -->[SliderUnstyled] Define ownerState and slot props' types (#32739) @michaldudak
+- &#8203;<!-- 05 -->[SwitchUnstyled] Define ownerState and slot props' types (#32573) @michaldudak
+- &#8203;<!-- 03 -->[TabsUnstyled] Define ownerState and slot props' types (#32918) @michaldudak
+- &#8203;<!-- 02 -->[TabUnstyled] Define ownerState and slot props' types (#32915) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.30`
+
+- &#8203;<!-- 13 -->[Joy] use `textColor` prop for Typography and Link (#32938) @siriwatknp
+- &#8203;<!-- 12 -->[Joy] Make variants for more flexible (#32931) @siriwatknp
+- &#8203;<!-- 11 -->[Joy] Improve automatic adjustment (#32923) @siriwatknp
+- &#8203;<!-- 10 -->[Joy] Add `Chip` doc (#32819) @hbjORbj
+- &#8203;<!-- 09 -->[Joy] Add `AspectRatio` demos (#32848) @siriwatknp
+- &#8203;<!-- 08 -->[Joy] Fix wrong urls (#32883) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 24 -->[docs] Iterate on the job ad for React engineer in Core (#32900) @mnajdova
+- &#8203;<!-- 23 -->[blog] Fix avatar image resolution (#32890) @oliviertassinari
+- &#8203;<!-- 19 -->[docs] Link the first page of the product (#32943) @oliviertassinari
+- &#8203;<!-- 18 -->[docs] Batch small changes (#32170) @michaldudak
+- &#8203;<!-- 17 -->[docs] Allow function prop to return undefined (#32766) @m4theushw
+- &#8203;<!-- 16 -->[docs] Fix wrong link to Material Icons (#32847) @oliviertassinari
+- &#8203;<!-- 15 -->[docs] Fix ClassNameGenerator content (#32800) @siriwatknp
+- &#8203;<!-- 14 -->[docs] Fix navigation links (#32851) @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Document the `size` prop for InputLabel (#32936) @romelperez
+- &#8203;<!-- 21 -->[docs] Add note about transparent background on the outlined Alert variant (#32810) @aaarichter
+- &#8203;<!-- 01 -->[website] Update the careers's page with the new roles (#32535) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 22 -->[core] Improve the incomplete issues workflow (#32878) @mnajdova
+- &#8203;<!-- 21 -->[core] Add CI check that the PR has label (#32886) @mnajdova
+- &#8203;<!-- 20 -->[core] Avoid leaking @babel/runtime (#32874) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aaarichter, @hbjORbj, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @romelperez, @siriwatknp
+
 ## 5.8.1
 
 <!-- generated comparing v5.8.0..master -->
@@ -991,7 +1200,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
 - [docs] Fix force redirection to a different locale (#30967) @oliviertassinari
 - [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari
 - [website] Add banner for promoting priority open roles (#31076) @danilo-leal
-- [website] Open Full-stack Engineer role for studio (#31038) @newguy-123
+- [website] Open Full-stack Engineer role for studio (#31038) @prakhargupta1
 - [website] Minor security improvements (#31062) @oliviertassinari
 - [website] Improve title of open roles (#30963) @DanailH
 - [website] Add BIMI avatar (#30444) @oliviertassinari
@@ -1006,7 +1215,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
 - [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak
 - [core] Remove dead code (#31064) @oliviertassinari
 
-All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @newguy-123, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk
+All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @prakhargupta1, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk
 
 ## 5.4.1
 
@@ -1716,14 +1925,14 @@ This is an early release to fix `export 'useId' (imported as 'React') was not fo
 - &#8203;<!-- 9 -->[core] Fix PR run detection in test_bundle_size_monitor (#29879) @eps1lon
 - &#8203;<!-- 8 -->[core] Move bundle size monitoring to CircleCI (#29876) @eps1lon
 - &#8203;<!-- 7 -->[docs] Add keys to Responsive AppBar demo (#29884) @mbrookes
-- &#8203;<!-- 6 -->[docs] MUI's 2021 Developer survey (#29765) @newguy-123
+- &#8203;<!-- 6 -->[docs] MUI's 2021 Developer survey (#29765) @prakhargupta1
 - &#8203;<!-- 5 -->[docs] Smoother image loading UX (#29858) @oliviertassinari
 - &#8203;<!-- 4 -->[Select] Fix select display value with React Nodes (#29836) @kegi
 - &#8203;<!-- 3 -->[system] Add `experimental_sx` utility (#29833) @mnajdova
 - &#8203;<!-- 2 -->[test] Ignore "detected multiple renderers" warning for now (#29854) @eps1lon
 - &#8203;<!-- 1 -->[useMediaQuery][utils] Remove usage of React 18 APIs (#29870) @eps1lon
 
-All contributors of this release in alphabetical order: @eps1lon, @karakib2k18, @kegi, @mbrookes, @mnajdova, @newguy-123, @oliviertassinari
+All contributors of this release in alphabetical order: @eps1lon, @karakib2k18, @kegi, @mbrookes, @mnajdova, @prakhargupta1, @oliviertassinari
 
 ## 5.2.0
 
@@ -1871,7 +2080,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 - &#8203;<!-- 33 -->[core] Add `experiments` index page (#29582) @siriwatknp
 - &#8203;<!-- 32 -->[core] Move s3 bucket ownership to mui-org (#29609) @eps1lon
 - &#8203;<!-- 31 -->[core] Improve support request message (#29614) @mnajdova
-- &#8203;<!-- 30 -->[core] Use support request Github Action (#29594) @mnajdova
+- &#8203;<!-- 30 -->[core] Use support request GitHub Action (#29594) @mnajdova
 - &#8203;<!-- 29 -->[core] Remove unused `getJsxPreview` util (#29586) @ZeeshanTamboli
 - &#8203;<!-- 28 -->[core] Use GitHub issue forms (#28038) @oliviertassinari
 - &#8203;<!-- 26 -->[core] Add playground (#29423) @oliviertassinari
@@ -2541,7 +2750,7 @@ _Sep 1, 2021_
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
 - 🎉 Renamed packages to `@mui/*` as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the [GitHub discussion](https://github.com/mui/material-ui/discussions/27803).
-- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/guides/migration-v4/#preset-safe)
+- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
 - 🧪 Added new `<Mansory>` component to the lab, [check it out](https://mui.com/components/masonry/). It has been crafted by our first intern, @hbjORbj 👏!
 
 ### `@mui/material@5.0.0-rc.0`
@@ -3946,7 +4155,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som
   />
   ```
 
-> Follow [this link](https://mui.com/material-ui/guides/migration-v4/#main-content) for full migration from v4 => v5
+> Follow [this link](https://mui.com/material-ui/migration/migration-v4/) for full migration from v4 => v5
 
 #### Changes
 
@@ -5926,7 +6135,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som
 - [docs] Fix duplicated styles generated from emotion (#23809) @mnajdova
 - [docs] Fix icon alignment in /components/breadcrumbs (#23818) @eps1lon
 - [docs] Fix production deploy (#23963) @eps1lon
-- [docs] Fix source on Github links (#23821) @praveenkumar-kalidass
+- [docs] Fix source on GitHub links (#23821) @praveenkumar-kalidass
 - [docs] Fix StickyHeaderTable round borders (#23882) @antoniopacheco
 - [docs] Fix typo in date picker dayjs adapter name (#23935) @andresmrm
 - [docs] Improve system properties page (#23961) @mnajdova

package/breakpoints.js

@@ -180,9 +180,11 @@ function resolveBreakpointValues({
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
 
     return acc;

package/colorManipulator.d.ts

@@ -1,4 +1,4 @@
-export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla';
+export type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';
 export interface ColorObject {
   type: ColorFormat;
   values: [number, number, number] | [number, number, number, number];

package/colorManipulator.js

@@ -63,7 +63,7 @@ function intToHex(int) {
  * Returns an object with the type and values of a color.
  *
  * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
 
@@ -115,7 +115,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 /**
  * Returns a channel created from the input color.
  *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
 
@@ -127,7 +127,7 @@ const colorChannel = color => {
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */

package/createStyled.js

@@ -136,7 +136,7 @@ function createStyled(input = {}) {
 
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -194,7 +194,7 @@ function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       // eslint-disable-next-line no-underscore-dangle

package/cssVars/createCssVarsProvider.d.ts

@@ -8,6 +8,21 @@ export interface ColorSchemeContextValue<SupportedColorScheme extends string>
 }
 
 export interface CssVarsProviderConfig<ColorScheme extends string> {
+  /**
+   * DOM attribute for applying color scheme
+   * @default 'data-color-scheme'
+   */
+  attribute?: string;
+  /**
+   * localStorage key used to store application `mode`
+   * @default 'mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`
+   * @default 'color-scheme'
+   */
+  colorSchemeStorageKey?: string;
   /**
    * Design system default color scheme.
    * - provides string if the design system has one default color scheme (either light or dark)
@@ -41,16 +56,6 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
     props: React.PropsWithChildren<
       Partial<CssVarsProviderConfig<ColorScheme>> & {
         theme?: ThemeInput;
-        /**
-         * localStorage key used to store application `mode`
-         * @default 'mui-mode'
-         */
-        modeStorageKey?: string;
-        /**
-         * DOM attribute for applying color scheme
-         * @default 'data-mui-color-scheme'
-         */
-        attribute?: string;
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document
@@ -66,11 +71,6 @@ export interface CreateCssVarsProviderResult<ColorScheme extends string, ThemeIn
          * @default ':root'
          */
         colorSchemeSelector?: string;
-        /**
-         * localStorage key used to store `colorScheme`
-         * @default 'mui-color-scheme'
-         */
-        colorSchemeStorageKey?: string;
         /**
          * The window that attaches the 'storage' event listener
          * @default window

package/cssVars/createCssVarsProvider.js

@@ -44,6 +44,9 @@ exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
 function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
+    attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -73,9 +76,9 @@ function createCssVarsProvider(options) {
     children,
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
-    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = _getInitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    modeStorageKey = defaultModeStorageKey,
+    colorSchemeStorageKey = defaultColorSchemeStorageKey,
+    attribute = defaultAttribute,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
@@ -141,7 +144,8 @@ function createCssVarsProvider(options) {
       colorSchemes,
       prefix,
       vars: rootVars,
-      getCssVar: (0, _createGetCssVar.default)(prefix)
+      getCssVar: (0, _createGetCssVar.default)(prefix),
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
@@ -331,9 +335,16 @@ function createCssVarsProvider(options) {
      */
     theme: _propTypes.default.object
   } : void 0;
+
+  const getInitColorSchemeScript = params => (0, _getInitColorSchemeScript.default)((0, _extends2.default)({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+
   return {
     CssVarsProvider,
     useColorScheme,
-    getInitColorSchemeScript: _getInitColorSchemeScript.default
+    getInitColorSchemeScript
   };
 }

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
 export interface GetInitColorSchemeScriptOptions {
     /**
      * If `true`, the initial color scheme is set to the user's prefers-color-scheme mode
@@ -23,17 +23,17 @@ export interface GetInitColorSchemeScriptOptions {
     colorSchemeNode?: string;
     /**
      * localStorage key used to store `mode`
-     * @default 'mui-mode'
+     * @default 'mode'
      */
     modeStorageKey?: string;
     /**
      * localStorage key used to store `colorScheme`
-     * @default 'mui-color-scheme'
+     * @default 'color-scheme'
      */
     colorSchemeStorageKey?: string;
     /**
      * DOM attribute for applying color scheme
-     * @default 'data-mui-color-scheme'
+     * @default 'data-color-scheme'
      */
     attribute?: string;
 }

package/cssVars/getInitColorSchemeScript.js

@@ -14,11 +14,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+const DEFAULT_MODE_STORAGE_KEY = 'mode';
 exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
-const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
-const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
 
 function getInitColorSchemeScript(options) {

package/esm/breakpoints.js

@@ -154,9 +154,11 @@ export function resolveBreakpointValues({
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
 
     return acc;

package/esm/colorManipulator.js

@@ -45,7 +45,7 @@ function intToHex(int) {
  * Returns an object with the type and values of a color.
  *
  * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
 
@@ -97,7 +97,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 /**
  * Returns a channel created from the input color.
  *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
 
@@ -108,7 +108,7 @@ export const colorChannel = color => {
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */

package/esm/createStyled.js

@@ -117,7 +117,7 @@ export default function createStyled(input = {}) {
 
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -176,7 +176,7 @@ export default function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       // eslint-disable-next-line no-underscore-dangle

package/esm/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
     children,
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey = defaultModeStorageKey,
+    colorSchemeStorageKey = defaultColorSchemeStorageKey,
+    attribute = defaultAttribute,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
@@ -116,7 +119,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
@@ -306,6 +310,13 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+
   return {
     CssVarsProvider,
     useColorScheme,

package/esm/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
     enableSystem = false,

package/esm/styleFunctionSx/styleFunctionSx.js

@@ -39,7 +39,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
     } = props || {};
 
     if (!sx) {
-      return null; // emotion & styled-components will neglect null
+      return null; // Emotion & styled-components will neglect null
     }
     /*
      * Receive `sxInput` as object or callback

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.1
+/** @license MUI v5.8.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/breakpoints.js

@@ -167,9 +167,11 @@ export function resolveBreakpointValues(_ref) {
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+    } else if (_typeof(breakpointValues) === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
 
     return acc;

package/legacy/colorManipulator.js

@@ -50,7 +50,7 @@ function intToHex(int) {
  * Returns an object with the type and values of a color.
  *
  * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
 
@@ -102,7 +102,7 @@ export function decomposeColor(color) {
 /**
  * Returns a channel created from the input color.
  *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
 
@@ -115,7 +115,7 @@ export var colorChannel = function colorChannel(color) {
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */

package/legacy/createStyled.js

@@ -122,7 +122,7 @@ export default function createStyled() {
       }
 
       var expressionsWithDefaultTheme = expressions ? expressions.map(function (stylesArg) {
-        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -183,7 +183,7 @@ export default function createStyled() {
 
         transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
         transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
-      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       // eslint-disable-next-line no-underscore-dangle

package/legacy/cssVars/createCssVarsProvider.js

@@ -10,7 +10,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,6 +19,12 @@ export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-tr
 export default function createCssVarsProvider(options) {
   var _options$theme = options.theme,
       defaultTheme = _options$theme === void 0 ? {} : _options$theme,
+      _options$attribute = options.attribute,
+      defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
+      _options$modeStorageK = options.modeStorageKey,
+      defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
+      _options$colorSchemeS = options.colorSchemeStorageKey,
+      defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
       _options$defaultMode = options.defaultMode,
       desisgnSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
       designSystemColorScheme = options.defaultColorScheme,
@@ -54,11 +60,11 @@ export default function createCssVarsProvider(options) {
         _ref$prefix = _ref.prefix,
         prefix = _ref$prefix === void 0 ? designSystemPrefix : _ref$prefix,
         _ref$modeStorageKey = _ref.modeStorageKey,
-        modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
+        modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
         _ref$colorSchemeStora = _ref.colorSchemeStorageKey,
-        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
+        colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
         _ref$attribute = _ref.attribute,
-        attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
+        attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
         _ref$defaultMode = _ref.defaultMode,
         defaultMode = _ref$defaultMode === void 0 ? desisgnSystemMode : _ref$defaultMode,
         _ref$defaultColorSche = _ref.defaultColorScheme,
@@ -134,7 +140,10 @@ export default function createCssVarsProvider(options) {
       colorSchemes: colorSchemes,
       prefix: prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
+        return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
+      }
     });
     var defaultColorSchemeStyleSheet = {};
     var otherColorSchemesStyleSheet = {};
@@ -328,6 +337,15 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
+    return systemGetInitColorSchemeScript(_extends({
+      attribute: defaultAttribute,
+      colorSchemeStorageKey: defaultColorSchemeStorageKey,
+      modeStorageKey: defaultModeStorageKey
+    }, params));
+  };
+
   return {
     CssVarsProvider: CssVarsProvider,
     useColorScheme: useColorScheme,

package/legacy/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export var DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export var DEFAULT_MODE_STORAGE_KEY = 'mode';
+export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   var _ref = options || {},
       _ref$enableSystem = _ref.enableSystem,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.1
+/** @license MUI v5.8.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -47,7 +47,7 @@ export function unstable_createStyleFunctionSx() {
         theme = _ref2$theme === void 0 ? {} : _ref2$theme;
 
     if (!sx) {
-      return null; // emotion & styled-components will neglect null
+      return null; // Emotion & styled-components will neglect null
     }
     /*
      * Receive `sxInput` as object or callback

package/modern/breakpoints.js

@@ -152,9 +152,11 @@ export function resolveBreakpointValues({
     if (Array.isArray(breakpointValues)) {
       acc[breakpoint] = breakpointValues[i] != null ? breakpointValues[i] : breakpointValues[previous];
       previous = i;
-    } else {
-      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous] || breakpointValues;
+    } else if (typeof breakpointValues === 'object') {
+      acc[breakpoint] = breakpointValues[breakpoint] != null ? breakpointValues[breakpoint] : breakpointValues[previous];
       previous = breakpoint;
+    } else {
+      acc[breakpoint] = breakpointValues;
     }
 
     return acc;

package/modern/colorManipulator.js

@@ -45,7 +45,7 @@ function intToHex(int) {
  * Returns an object with the type and values of a color.
  *
  * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
 
@@ -97,7 +97,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 /**
  * Returns a channel created from the input color.
  *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
 
@@ -108,7 +108,7 @@ export const colorChannel = color => {
 /**
  * Converts a color object with type and values to a string.
  * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */

package/modern/createStyled.js

@@ -115,7 +115,7 @@ export default function createStyled(input = {}) {
 
     const muiStyledResolver = (styleArg, ...expressions) => {
       const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => {
-        // On the server emotion doesn't use React.forwardRef for creating components, so the created
+        // On the server Emotion doesn't use React.forwardRef for creating components, so the created
         // component stays as a function. This condition makes sure that we do not interpolate functions
         // which are basically components used as a selectors.
         // eslint-disable-next-line no-underscore-dangle
@@ -174,7 +174,7 @@ export default function createStyled(input = {}) {
 
         transformedStyleArg = [...styleArg, ...placeholders];
         transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
-      } else if (typeof styleArg === 'function' && // On the server emotion doesn't use React.forwardRef for creating components, so the created
+      } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
       // component stays as a function. This condition makes sure that we do not interpolate functions
       // which are basically components used as a selectors.
       // eslint-disable-next-line no-underscore-dangle

package/modern/cssVars/createCssVarsProvider.js

@@ -8,7 +8,7 @@ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
 import { GlobalStyles } from '@mui/styled-engine';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
-import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import createGetCssVar from './createGetCssVar';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,6 +17,9 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     theme: defaultTheme = {},
+    attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     disableTransitionOnChange: designSystemTransitionOnChange = false,
@@ -46,9 +49,9 @@ export default function createCssVarsProvider(options) {
     children,
     theme: themeProp = defaultTheme,
     prefix = designSystemPrefix,
-    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
-    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-    attribute = DEFAULT_ATTRIBUTE,
+    modeStorageKey = defaultModeStorageKey,
+    colorSchemeStorageKey = defaultColorSchemeStorageKey,
+    attribute = defaultAttribute,
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
     disableTransitionOnChange = designSystemTransitionOnChange,
@@ -116,7 +119,8 @@ export default function createCssVarsProvider(options) {
       colorSchemes,
       prefix,
       vars: rootVars,
-      getCssVar: createGetCssVar(prefix)
+      getCssVar: createGetCssVar(prefix),
+      getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
     });
     const defaultColorSchemeStyleSheet = {};
     const otherColorSchemesStyleSheet = {};
@@ -306,6 +310,13 @@ export default function createCssVarsProvider(options) {
      */
     theme: PropTypes.object
   } : void 0;
+
+  const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
+    attribute: defaultAttribute,
+    colorSchemeStorageKey: defaultColorSchemeStorageKey,
+    modeStorageKey: defaultModeStorageKey
+  }, params));
+
   return {
     CssVarsProvider,
     useColorScheme,

package/modern/cssVars/getInitColorSchemeScript.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
+export const DEFAULT_MODE_STORAGE_KEY = 'mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 export default function getInitColorSchemeScript(options) {
   const {
     enableSystem = false,

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.1
+/** @license MUI v5.8.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/styleFunctionSx/styleFunctionSx.js

@@ -39,7 +39,7 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty
     } = props || {};
 
     if (!sx) {
-      return null; // emotion & styled-components will neglect null
+      return null; // Emotion & styled-components will neglect null
     }
     /*
      * Receive `sxInput` as object or callback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.8.1",
+  "version": "5.8.4",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@mui/private-theming": "^5.8.0",
+    "@mui/private-theming": "^5.8.4",
     "@mui/styled-engine": "^5.8.0",
-    "@mui/types": "^7.1.3",
-    "@mui/utils": "^5.8.0",
+    "@mui/types": "^7.1.4",
+    "@mui/utils": "^5.8.4",
     "clsx": "^1.1.1",
-    "csstype": "^3.0.11",
+    "csstype": "^3.1.0",
     "prop-types": "^15.8.1"
   },
   "sideEffects": false,

package/style.d.ts

@@ -13,3 +13,4 @@ export interface StyleOptions<PropKey> {
 export function style<PropKey extends string, Theme extends object>(
   options: StyleOptions<PropKey>,
 ): StyleFunction<{ [K in PropKey]?: unknown } & { theme?: Theme }> & { filterProps: string[] };
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;

package/styleFunctionSx/styleFunctionSx.js

@@ -51,7 +51,7 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
     } = props || {};
 
     if (!sx) {
-      return null; // emotion & styled-components will neglect null
+      return null; // Emotion & styled-components will neglect null
     }
     /*
      * Receive `sxInput` as object or callback