@mui/system 5.13.2 → 5.13.6

package/CHANGELOG.md

@@ -1,5 +1,227 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.13.6
+
+_Jun 21, 2023_
+
+A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai.
+- 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043
+
+### `@mui/material@5.13.6`
+
+- &#8203;<!-- 45 -->[Autocomplete] Fixed autocomplete's existing option selection (#37012) @bencevoros
+- &#8203;<!-- 44 -->[Autocomplete] Add hint demos to Material UI and Joy UI docs (#37496) @sai6855
+- &#8203;<!-- 13 -->[Masonry] Fix ResizeObserver loop limit exceeded error (#37208) @hbjORbj
+- &#8203;<!-- 11 -->[Tooltip][material] Improve warning when Tooltip receives string child (#37530) @DiegoAndai
+- &#8203;<!-- 10 -->[Modal] Add missing members to ModalOwnProps (#37568) @ivp-dev
+- &#8203;<!-- 09 -->[Slider] Arrow keys control does not work with float numbers (#37071) @gitstart
+- &#8203;<!-- 08 -->[SvgIcon] allow `svg` as a child (#37231) @siriwatknp
+- &#8203;<!-- 07 -->[Timeline] Add alternate reverse position (#37311) @abhinavkmrru
+- &#8203;<!-- 06 -->[Tooltip] Fix type of sx prop in `slotProps` (#37550) @SuperKXT
+- &#8203;<!-- 05 -->[TouchRipple] perf: avoid calling `clearTimeout()` (#37512) @romgrk
+
+### `@mui/material-next@6.0.0-alpha.90`
+
+- &#8203;<!-- 12 -->[Material You] Add Slider component with Material You design (#37520) @DiegoAndai
+
+### `@mui/joy@5.0.0-alpha.85`
+
+- &#8203;<!-- 37 -->[ButtonGroup][joy] Missing border when spacing is more than zero (#37577) @siriwatknp
+- &#8203;<!-- 36 -->[CardActions][joy] Add `CardActions` component (#37441) @siriwatknp
+- &#8203;<!-- 14 -->[Menu][joy] Fix closing of `Menu` in demos (#36917) @sai6855
+
+### `@mui/base@5.0.0-beta.5`
+
+- &#8203;<!-- 39 -->[Menu][base] Add the resetHighlight action (#37392) @michaldudak
+- &#8203;<!-- 38 -->[Select][base] Expose the `areOptionsEqual` prop (#37615) @michaldudak
+
+### `@mui/utils@5.13.2`
+
+- &#8203;<!-- 04 -->[utils] Allow nested imports in @mui/utils to speed up build (#37586) @flaviendelangle
+
+### Docs
+
+- &#8203;<!-- 43 -->[docs][base] Improve Base UI all components images (#37590) @danilo-leal
+- &#8203;<!-- 42 -->[docs][base] Add pages for coming soon components (#37575) @danilo-leal
+- &#8203;<!-- 41 -->[docs][base] Add a Snackbar introduction demo (#37602) @danilo-leal
+- &#8203;<!-- 40 -->[docs][base] Add page for all Base UI components (#37536) @danilo-leal
+- &#8203;<!-- 33 -->[docs] Fix scrollbar on snackbar page (#37657) @oliviertassinari
+- &#8203;<!-- 32 -->[docs] Switch order of snackbar buttons in demos (#37389) @Primajin
+- &#8203;<!-- 31 -->[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova
+- &#8203;<!-- 30 -->[docs] Tree view color fix for dark mode in Gmail example (#37051) @PunitSoniME
+- &#8203;<!-- 29 -->[docs] Inline the Base UI demo (#37603) @oliviertassinari
+- &#8203;<!-- 28 -->[docs] Fix typo in themed components page (#37598) @vinayr
+- &#8203;<!-- 27 -->[docs] Fix render inline code in CSS description generation (#37448) @alexfauquette
+- &#8203;<!-- 26 -->[docs] Add styles to styled argument list (#37558) @DiegoAndai
+- &#8203;<!-- 25 -->[docs] Improve awkward wording in READMEs of example projects (#37110) @DIWAKARKASHYAP
+- &#8203;<!-- 24 -->[docs] Fix small base -> base-ui migration issue (#37594) @oliviertassinari
+- &#8203;<!-- 23 -->[docs] Fix GitHub typo (#37578) @oliviertassinari
+- &#8203;<!-- 22 -->[docs] Improve release guide (#37547) @DiegoAndai
+- &#8203;<!-- 21 -->[docs] Review fixes to the Material UI's "Example projects" page (#37444) @danilo-leal
+- &#8203;<!-- 17 -->[docs][joy] Add a messages template (#37546) @sernstberger
+- &#8203;<!-- 16 -->[docs][joy] Add pages for coming soon Joy UI components (#36920) @danilo-leal
+- &#8203;<!-- 15 -->[docs][joy] Add design and consistency tweaks to the Playground (#37580) @danilo-leal
+- &#8203;<!-- 37 -->[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore
+- &#8203;<!-- 20 -->[docs-infra] Fix demos border radius (#37658) @oliviertassinari
+- &#8203;<!-- 19 -->[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot
+- &#8203;<!-- 18 -->[docs-infra] Simplify product id handling (#37593) @oliviertassinari
+- &#8203;<!-- 35 -->[CHANGELOG] Add missing release date for v5.13.5 @oliviertassinari
+- &#8203;<!-- 16 -->[examples] Shell command fix in the readme file of material-next-app-router-ts example (#37675) @bablukpik
+- &#8203;<!-- 15 -->[examples] Next.js v13 app router with Material UI (#37315) @smo043
+
+### Core
+
+- &#8203;<!-- 34 -->[core] Update to Node.js v18 for `test-dev` CI (#37604) @ZeeshanTamboli
+- &#8203;<!-- 39 -->[core] Add priority support issue template (#37671) @DanailH
+- &#8203;<!-- 03 -->[website] Update roadmap page (#37587) @cherniavskii
+- &#8203;<!-- 02 -->[website] Add CSP to limit iframes to self @oliviertassinari
+- &#8203;<!-- 01 -->[website] Link mui-x Stack Overflow in footer link (#37509) @richbustos
+
+All contributors of this release in alphabetical order: @abhinavkmrru, @alexfauquette, @bencevoros, @cherniavskii, @danilo-leal, @DiegoAndai, @DIWAKARKASHYAP, @flaviendelangle, @gitstart, @hbjORbj, @ivp-dev, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @Primajin, @PunitSoniME, @richbustos, @romgrk, @sai6855, @sernstberger, @siriwatknp, @SuperKXT, @vinayr, @ZeeshanTamboli
+
+## 5.13.5
+
+_Jun 12, 2023_
+
+A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Added `ButtonGroup` component in Joy UI (#37407) @siriwatknp.
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.13.5`
+
+- &#8203;<!-- 03 -->[Material][Popover] Add support for virtual element as anchorEl (#37465) @DiegoAndai
+
+### `@mui/joy@5.0.0-alpha.84`
+
+- &#8203;<!-- 20 -->[ButtonGroup][joy] Replace `detached` prop with `spacing`. (#37562) @siriwatknp
+- &#8203;<!-- 19 -->[ButtonGroup][joy] Add `ButtonGroup` component (#37407) @siriwatknp
+- &#8203;<!-- 04 -->[Input][joy] Simplify focus with `:focus-within` and add examples (#37385) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 17 -->[docs] Move Toolpad from alpha to beta (#37288) @bharatkashyap
+- &#8203;<!-- 16 -->[docs] Add usage of createCssVarsProvider (#37513) @brijeshb42
+- &#8203;<!-- 15 -->[docs] Update /base url references to /base-ui (#37412) @brijeshb42
+- &#8203;<!-- 14 -->[docs] Skip components and hooks due to duplicate index (#37539) @siriwatknp
+- &#8203;<!-- 13 -->[docs] Polish Sign in to your account joy demo (#37498) @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Remove outdated Material UI FAQ @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix crash access to localStorage in Firefox (#37518) @brijeshb42
+- &#8203;<!-- 10 -->[docs-infra] Enforce max length on description (#37565) @oliviertassinari
+- &#8203;<!-- 09 -->[docs-infra] Mandatory versions (#37497) @oliviertassinari
+- &#8203;<!-- 08 -->[docs-infra] Fix lighthouse img size issue (#37415) @oliviertassinari
+- &#8203;<!-- 07 -->[docs][joy] Replace JoyInput with Input component in JoyUI Text Field documentation (#37548) @musama619
+- &#8203;<!-- 06 -->[docs][joy] Add typography introduction demo component (#37553) @sernstberger
+- &#8203;<!-- 05 -->[docs][joy] Add a rental dashboard template (#37453) @sernstberger
+
+### Core
+
+- &#8203;<!-- 21 -->Move the React Community Engineer - X in Open Roles (#37552) @DanailH
+- &#8203;<!-- 18 -->[core] Update Node.js version to v18 on CircleCI, CodeSandbox, and Netlify (#37173) @ZeeshanTamboli
+- &#8203;<!-- 02 -->[website] RIDI gold sponsorship end (#37517) @oliviertassinari
+- &#8203;<!-- 01 -->[website] Update X landing page (#37387) @cherniavskii
+
+All contributors of this release in alphabetical order: @brijeshb42, @cherniavskii, @DanailH, @DiegoAndai, @musama619, @oliviertassinari, @sernstberger, @siriwatknp, @ZeeshanTamboli
+
+## 5.13.4
+
+<!-- generated comparing v5.13.3..master -->
+
+_Jun 5, 2023_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@5.13.4`
+
+- &#8203;<!-- 20 -->[Autocomplete][material] Add missing `focusVisible` class in AutocompleteClasses (#37502) @sai6855
+- &#8203;<!-- 04 -->[Menu][material] Fix MenuPaper class composition precedence (#37390) @DiegoAndai
+- &#8203;<!-- 03 -->[MenuList] Fix to allow conditional rendering for a menu item under ListSubheader (#36890) @danielplewes
+- &#8203;<!-- 02 -->[Stepper] Handle progress bar of mobile stepper when `steps` is one (#37079) @gitstart
+
+### `@mui/base@5.0.0-beta.4`
+
+- &#8203;<!-- 16 -->[Input][base] Fix calling slotProps event handlers (#37463) @sai6855
+
+### `@mui/joy@5.0.0-alpha.82`
+
+- &#8203;<!-- 19 -->[Avatar][joy] Fallback to `alt` when `src` or `srcSet` are not defined (#37469) @vishalthatipamula0219
+- &#8203;<!-- 15 -->[Card][joy] Improve usability of card family (#37474) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 18 -->[docs][base] useAutocomplete demos & docs (#37029) @mj12albert
+- &#8203;<!-- 17 -->[docs][base] Remove usage of `component` prop in docs (#37462) @sai6855
+- &#8203;<!-- 13 -->[docs] Fix docs redirections @oliviertassinari
+- &#8203;<!-- 12 -->[docs] Fix Fluent -> Fluent UI @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Fix MUI Base -> Base UI @oliviertassinari
+- &#8203;<!-- 10 -->[docs] Add base-vite-tailwind example repo (#36994) @mj12albert
+- &#8203;<!-- 09 -->[docs] Fix search bar layout shift (#37460) @oliviertassinari
+- &#8203;<!-- 08 -->[docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal
+- &#8203;<!-- 07 -->[docs] Tweak Material UI's "Template" page design (#37260) @danilo-leal
+- &#8203;<!-- 06 -->[docs] Fix "Language" page removal leftovers (#37408) @danilo-leal
+- &#8203;<!-- 05 -->[docs] Move contents of css-variables to sibling pages (#37411) @brijeshb42
+
+### Core
+
+- &#8203;<!-- 14 -->[core] Do not let Renovate handle `examples` packages updates (#37386) @ZeeshanTamboli
+- &#8203;<!-- 01 -->[website] Add header filters to the pricing table (#37455) @MBilalShafi
+
+All contributors of this release in alphabetical order: @brijeshb42, @danielplewes, @danilo-leal, @DiegoAndai, @gitstart, @MBilalShafi, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vishalthatipamula0219, @ZeeshanTamboli
+
+## 5.13.3
+
+<!-- generated comparing v5.13.2..master -->
+
+_May 29, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release focuses primarily on 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.13.3
+
+- &#8203;<!-- 22 -->[Autocomplete] Accept external Listbox ref (#37325) @sai6855
+- &#8203;<!-- 06 -->[Modal] Pass `className` from `BackdropProps` (#37399) @hbjORbj
+
+### `@mui/base@5.0.0-beta.3`
+
+- &#8203;<!-- 20 -->[base] Maintain nodes document order in compound components (#36857) @michaldudak
+- &#8203;<!-- 19 -->[base][joy] Prevent persisting hover state styles onclick on mobile (#36704) @gitstart
+- &#8203;<!-- 18 -->[Menu][base] MenuItem as a link does not work (#37242) @nicolas-ot
+- &#8203;<!-- 17 -->[MenuItem][Base] Pass idGenerator function (#37364) @sai6855
+- &#8203;<!-- 16 -->[Slider][Base] Add Vertical slider demo (#37357) @sai6855
+
+### `@mui/joy@5.0.0-alpha.82`
+
+- &#8203;<!-- 23 -->[Select][joy] Fix popup does not close (#37435) @siriwatknp
+- &#8203;<!-- 21 -->[Badge][Joy] Fix `slots` element type in API docs (#37329) @zignis
+- &#8203;<!-- 04 -->[Select] [joy] Handle long text content (#37289) @akash191095
+- &#8203;<!-- 07 -->[Tooltip][Joy] Interactive doesn't work (#37159) @nicolas-ot
+
+### `@mui/codemod@5.13.3
+
+- &#8203;<!-- 05 -->[mui-codemod] Add missing script to README (#37377) @hbjORbj
+
+### Docs
+
+- &#8203;<!-- 14 -->[docs] Clarify Hidden down props as exclusive (#36927) @canac
+- &#8203;<!-- 13 -->[docs] Add refine to Material UI "Related projects" and "More advanced example projects" pages (#37308) @necatiozmen
+- &#8203;<!-- 12 -->[docs] Remove todo link from sidebar (#37373) @brijeshb42
+- &#8203;<!-- 11 -->[docs] Clarify the peer dependency with react (#37360) @oliviertassinari
+- &#8203;<!-- 10 -->[docs] Divider vertical middle prop migration (#36840) @JhonnK08
+- &#8203;<!-- 09 -->[docs] Fix branding theme tabs and navigation bar regressions (#37362) @ZeeshanTamboli
+- &#8203;<!-- 08 -->[docs-infra] Throw on incorrect internal links (#37326) @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 15 -->[core] Include scoped JSX namespace when resolving props (#37404) @LukasTy
+- &#8203;<!-- 03 -->[test][useMediaQuery] Change SSR test description (#37403) @zignis
+- &#8203;<!-- 02 -->[website] Sync with Ashby @oliviertassinari
+- &#8203;<!-- 01 -->[website] Add David to about page (#37379) @DavidCnoops
+
+All contributors of this release in alphabetical order: @akash191095, @brijeshb42, @canac, @DavidCnoops, @gitstart, @hbjORbj, @JhonnK08, @LukasTy, @michaldudak, @necatiozmen, @nicolas-ot, @oliviertassinari, @sai6855, @ZeeshanTamboli, @zignis
+
 ## 5.13.2
 
 <!-- generated comparing v5.13.1..master -->
@@ -668,7 +890,7 @@ _Mar 14, 2023_
 
 A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
 
-- @michaldudak added an option for [disabling the generation](https://mui.com/base/getting-started/customization/#disabling-default-css-classes) of the default classes in Base UI (#35963)
+- @michaldudak added an option for [disabling the generation](https://mui.com/base-ui/getting-started/customization/#disabling-default-css-classes) of the default classes in Base UI (#35963)
 - other 🐛 bug fixes and 📚 documentation improvements.
 
 ### `@mui/material@5.11.13`
@@ -853,7 +1075,7 @@ _Feb 27, 2023_
 
 A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 📚 added API documentation for the slots in Base UI and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/#slots)
+- 📚 added API documentation for the slots in Base UI and Joy UI by @hbjORbj, for e.g. [SliderUnstyled API](https://mui.com/base-ui/api/slider-unstyled/#slots)
 - other 🐛 bug fixes and 📚 documentation improvements.
 
 ### `@mui/material@5.11.11`
@@ -1222,7 +1444,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som
   + <SliderUnstyled slots={{ valueLabel: SliderValueLabel }} />
   ```
 
-  The following demo shows how to show a value label when it is hovered over with the thumb: https://mui.com/base/react-slider/#value-label
+  The following demo shows how to show a value label when it is hovered over with the thumb: https://mui.com/base-ui/react-slider/#value-label
 
   - The following classes are removed from `sliderUnstyledClasses` since they are not needed for the value label:
 
@@ -2215,7 +2437,7 @@ _Oct 3, 2022_
 
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚀 [SnackbarUnstyled](https://mui.com/base/react-snackbar/) component & headless hook are added to Base UI (#33227) @ZeeshanTamboli
+- 🚀 [SnackbarUnstyled](https://mui.com/base-ui/react-snackbar/) component & headless hook are added to Base UI (#33227) @ZeeshanTamboli
 - 📚 [CSS variables documentation](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/) for Material UI has been added by @siriwatknp (#33958)
 - And more 🐛 bug fixes and 📚 documentation improvements.
 

package/Unstable_Grid/gridGenerator.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+import { Breakpoints } from '../createTheme/createBreakpoints';
 import { Spacing } from '../createTheme/createSpacing';
 import { ResponsiveStyleValue } from '../styleFunctionSx';
 import { GridDirection, GridOwnerState } from './GridProps';
@@ -11,11 +11,6 @@ interface Props {
         parentDisableEqualOverflow?: boolean;
     };
 }
-interface Iterator<T> {
-    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
-}
-export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
-export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
 export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {

package/Unstable_Grid/gridGenerator.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.traverseBreakpoints = exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = exports.filterBreakpointKeys = void 0;
+exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _traverseBreakpoints = require("./traverseBreakpoints");
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -34,57 +35,13 @@ function getParentColumns(ownerState) {
   }
   return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
-const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-exports.filterBreakpointKeys = filterBreakpointKeys;
-const traverseBreakpoints = (breakpoints, responsive, iterator) => {
-  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
-
-  if (Array.isArray(responsive)) {
-    responsive.forEach((breakpointValue, index) => {
-      iterator((responsiveStyles, style) => {
-        if (index <= breakpoints.keys.length - 1) {
-          if (index === 0) {
-            Object.assign(responsiveStyles, style);
-          } else {
-            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
-          }
-        }
-      }, breakpointValue);
-    });
-  } else if (responsive && typeof responsive === 'object') {
-    // prevent null
-    // responsive could be a very big object, pick the smallest responsive values
-
-    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
-    keys.forEach(key => {
-      if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsive is an object
-        const breakpointValue = responsive[key];
-        if (breakpointValue !== undefined) {
-          iterator((responsiveStyles, style) => {
-            if (smallestBreakpoint === key) {
-              Object.assign(responsiveStyles, style);
-            } else {
-              responsiveStyles[breakpoints.up(key)] = style;
-            }
-          }, breakpointValue);
-        }
-      }
-    });
-  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
-    iterator((responsiveStyles, style) => {
-      Object.assign(responsiveStyles, style);
-    }, responsive);
-  }
-};
-exports.traverseBreakpoints = traverseBreakpoints;
 const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
   const getSelfSpacing = createGetSelfSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridSize, (appendStyle, value) => {
     let style = {};
     if (value === true) {
       style = {
@@ -119,7 +76,7 @@ const generateGridOffsetStyles = ({
   ownerState
 }) => {
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.gridOffset, (appendStyle, value) => {
     let style = {};
     if (value === 'auto') {
       style = {
@@ -148,7 +105,7 @@ const generateGridColumnsStyles = ({
   } : {
     '--Grid-columns': 12
   };
-  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
     appendStyle(styles, {
       [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
     });
@@ -169,7 +126,7 @@ const generateGridRowSpacingStyles = ({
     // It will be overridden if spacing props are provided
     [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
   } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
     var _theme$spacing;
     appendStyle(styles, {
       [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing = theme.spacing) == null ? void 0 : _theme$spacing.call(theme, value)
@@ -191,7 +148,7 @@ const generateGridColumnSpacingStyles = ({
     // It will be overridden if spacing props are provided
     [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
   } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
     var _theme$spacing2;
     appendStyle(styles, {
       [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : (_theme$spacing2 = theme.spacing) == null ? void 0 : _theme$spacing2.call(theme, value)
@@ -208,7 +165,7 @@ const generateGridDirectionStyles = ({
     return {};
   }
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles, {
       flexDirection: value
     });

package/Unstable_Grid/index.d.ts

@@ -3,3 +3,4 @@ export { default as createGrid } from './createGrid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
 export * from './gridClasses';
+export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';

package/Unstable_Grid/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   createGrid: true,
-  gridClasses: true
+  gridClasses: true,
+  unstable_traverseBreakpoints: true
 };
 Object.defineProperty(exports, "createGrid", {
   enumerable: true,
@@ -26,6 +27,12 @@ Object.defineProperty(exports, "gridClasses", {
     return _gridClasses.default;
   }
 });
+Object.defineProperty(exports, "unstable_traverseBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _traverseBreakpoints.traverseBreakpoints;
+  }
+});
 var _Grid = _interopRequireDefault(require("./Grid"));
 var _createGrid = _interopRequireDefault(require("./createGrid"));
 var _GridProps = require("./GridProps");
@@ -52,5 +59,6 @@ Object.keys(_gridClasses).forEach(function (key) {
     }
   });
 });
+var _traverseBreakpoints = require("./traverseBreakpoints");
 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/Unstable_Grid/traverseBreakpoints.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
+export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
+interface Iterator<T> {
+    (appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
+}
+export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
+export {};

package/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseBreakpoints = exports.filterBreakpointKeys = void 0;
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+exports.filterBreakpointKeys = filterBreakpointKeys;
+const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index) => {
+      iterator((responsiveStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsiveStyles, style);
+          } else {
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && typeof responsive === 'object') {
+    // prevent null
+    // responsive could be a very big object, pick the smallest responsive values
+
+    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsive is an object
+        const breakpointValue = responsive[key];
+        if (breakpointValue !== undefined) {
+          iterator((responsiveStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsiveStyles, style);
+            } else {
+              responsiveStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator((responsiveStyles, style) => {
+      Object.assign(responsiveStyles, style);
+    }, responsive);
+  }
+};
+exports.traverseBreakpoints = traverseBreakpoints;

package/cssVars/createCssVarsProvider.js

@@ -25,6 +25,12 @@ exports.DISABLE_CSS_TRANSITION = DISABLE_CSS_TRANSITION;
 function createCssVarsProvider(options) {
   const {
     themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
     theme: defaultTheme = {},
     attribute: defaultAttribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,

package/esm/Unstable_Grid/gridGenerator.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -27,48 +28,6 @@ function getParentColumns(ownerState) {
   }
   return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
-export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
-  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
-
-  if (Array.isArray(responsive)) {
-    responsive.forEach((breakpointValue, index) => {
-      iterator((responsiveStyles, style) => {
-        if (index <= breakpoints.keys.length - 1) {
-          if (index === 0) {
-            Object.assign(responsiveStyles, style);
-          } else {
-            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
-          }
-        }
-      }, breakpointValue);
-    });
-  } else if (responsive && typeof responsive === 'object') {
-    // prevent null
-    // responsive could be a very big object, pick the smallest responsive values
-
-    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
-    keys.forEach(key => {
-      if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsive is an object
-        const breakpointValue = responsive[key];
-        if (breakpointValue !== undefined) {
-          iterator((responsiveStyles, style) => {
-            if (smallestBreakpoint === key) {
-              Object.assign(responsiveStyles, style);
-            } else {
-              responsiveStyles[breakpoints.up(key)] = style;
-            }
-          }, breakpointValue);
-        }
-      }
-    });
-  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
-    iterator((responsiveStyles, style) => {
-      Object.assign(responsiveStyles, style);
-    }, responsive);
-  }
-};
 export const generateGridSizeStyles = ({
   theme,
   ownerState

package/esm/Unstable_Grid/index.js

@@ -2,4 +2,5 @@ export { default } from './Grid';
 export { default as createGrid } from './createGrid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export * from './gridClasses';
+export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';

package/esm/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,42 @@
+export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index) => {
+      iterator((responsiveStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsiveStyles, style);
+          } else {
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && typeof responsive === 'object') {
+    // prevent null
+    // responsive could be a very big object, pick the smallest responsive values
+
+    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsive is an object
+        const breakpointValue = responsive[key];
+        if (breakpointValue !== undefined) {
+          iterator((responsiveStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsiveStyles, style);
+            } else {
+              responsiveStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator((responsiveStyles, style) => {
+      Object.assign(responsiveStyles, style);
+    }, responsive);
+  }
+};

package/esm/cssVars/createCssVarsProvider.js

@@ -16,6 +16,12 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
     theme: defaultTheme = {},
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.13.2
+ * @mui/system v5.13.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Unstable_Grid/gridGenerator.js

@@ -1,7 +1,8 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -30,52 +31,6 @@ function getParentColumns(ownerState) {
   }
   return "var(--Grid-columns".concat(appendLevel(ownerState.unstable_level - 1), ")");
 }
-export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
-  return breakpointsKeys.filter(function (key) {
-    return responsiveKeys.includes(key);
-  });
-};
-export var traverseBreakpoints = function traverseBreakpoints(breakpoints, responsive, iterator) {
-  var smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
-
-  if (Array.isArray(responsive)) {
-    responsive.forEach(function (breakpointValue, index) {
-      iterator(function (responsiveStyles, style) {
-        if (index <= breakpoints.keys.length - 1) {
-          if (index === 0) {
-            _extends(responsiveStyles, style);
-          } else {
-            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
-          }
-        }
-      }, breakpointValue);
-    });
-  } else if (responsive && _typeof(responsive) === 'object') {
-    // prevent null
-    // responsive could be a very big object, pick the smallest responsive values
-
-    var keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
-    keys.forEach(function (key) {
-      if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsive is an object
-        var breakpointValue = responsive[key];
-        if (breakpointValue !== undefined) {
-          iterator(function (responsiveStyles, style) {
-            if (smallestBreakpoint === key) {
-              _extends(responsiveStyles, style);
-            } else {
-              responsiveStyles[breakpoints.up(key)] = style;
-            }
-          }, breakpointValue);
-        }
-      }
-    });
-  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
-    iterator(function (responsiveStyles, style) {
-      _extends(responsiveStyles, style);
-    }, responsive);
-  }
-};
 export var generateGridSizeStyles = function generateGridSizeStyles(_ref) {
   var theme = _ref.theme,
     ownerState = _ref.ownerState;

package/legacy/Unstable_Grid/index.js

@@ -2,4 +2,5 @@ export { default } from './Grid';
 export { default as createGrid } from './createGrid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export * from './gridClasses';
+export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';

package/legacy/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,48 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _extends from "@babel/runtime/helpers/esm/extends";
+export var filterBreakpointKeys = function filterBreakpointKeys(breakpointsKeys, responsiveKeys) {
+  return breakpointsKeys.filter(function (key) {
+    return responsiveKeys.includes(key);
+  });
+};
+export var traverseBreakpoints = function traverseBreakpoints(breakpoints, responsive, iterator) {
+  var smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsive)) {
+    responsive.forEach(function (breakpointValue, index) {
+      iterator(function (responsiveStyles, style) {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            _extends(responsiveStyles, style);
+          } else {
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && _typeof(responsive) === 'object') {
+    // prevent null
+    // responsive could be a very big object, pick the smallest responsive values
+
+    var keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
+    keys.forEach(function (key) {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsive is an object
+        var breakpointValue = responsive[key];
+        if (breakpointValue !== undefined) {
+          iterator(function (responsiveStyles, style) {
+            if (smallestBreakpoint === key) {
+              _extends(responsiveStyles, style);
+            } else {
+              responsiveStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator(function (responsiveStyles, style) {
+      _extends(responsiveStyles, style);
+    }, responsive);
+  }
+};

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.13.2
+ * @mui/system v5.13.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/Unstable_Grid/gridGenerator.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { traverseBreakpoints } from './traverseBreakpoints';
 function appendLevel(level) {
   if (!level) {
     return '';
@@ -27,48 +28,6 @@ function getParentColumns(ownerState) {
   }
   return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
 }
-export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
-  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
-
-  if (Array.isArray(responsive)) {
-    responsive.forEach((breakpointValue, index) => {
-      iterator((responsiveStyles, style) => {
-        if (index <= breakpoints.keys.length - 1) {
-          if (index === 0) {
-            Object.assign(responsiveStyles, style);
-          } else {
-            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
-          }
-        }
-      }, breakpointValue);
-    });
-  } else if (responsive && typeof responsive === 'object') {
-    // prevent null
-    // responsive could be a very big object, pick the smallest responsive values
-
-    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
-    keys.forEach(key => {
-      if (breakpoints.keys.indexOf(key) !== -1) {
-        // @ts-ignore already checked that responsive is an object
-        const breakpointValue = responsive[key];
-        if (breakpointValue !== undefined) {
-          iterator((responsiveStyles, style) => {
-            if (smallestBreakpoint === key) {
-              Object.assign(responsiveStyles, style);
-            } else {
-              responsiveStyles[breakpoints.up(key)] = style;
-            }
-          }, breakpointValue);
-        }
-      }
-    });
-  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
-    iterator((responsiveStyles, style) => {
-      Object.assign(responsiveStyles, style);
-    }, responsive);
-  }
-};
 export const generateGridSizeStyles = ({
   theme,
   ownerState

package/modern/Unstable_Grid/index.js

@@ -2,4 +2,5 @@ export { default } from './Grid';
 export { default as createGrid } from './createGrid';
 export * from './GridProps';
 export { default as gridClasses } from './gridClasses';
-export * from './gridClasses';
+export * from './gridClasses';
+export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';

package/modern/Unstable_Grid/traverseBreakpoints.js

@@ -0,0 +1,42 @@
+export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+  const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
+
+  if (Array.isArray(responsive)) {
+    responsive.forEach((breakpointValue, index) => {
+      iterator((responsiveStyles, style) => {
+        if (index <= breakpoints.keys.length - 1) {
+          if (index === 0) {
+            Object.assign(responsiveStyles, style);
+          } else {
+            responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style;
+          }
+        }
+      }, breakpointValue);
+    });
+  } else if (responsive && typeof responsive === 'object') {
+    // prevent null
+    // responsive could be a very big object, pick the smallest responsive values
+
+    const keys = Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive));
+    keys.forEach(key => {
+      if (breakpoints.keys.indexOf(key) !== -1) {
+        // @ts-ignore already checked that responsive is an object
+        const breakpointValue = responsive[key];
+        if (breakpointValue !== undefined) {
+          iterator((responsiveStyles, style) => {
+            if (smallestBreakpoint === key) {
+              Object.assign(responsiveStyles, style);
+            } else {
+              responsiveStyles[breakpoints.up(key)] = style;
+            }
+          }, breakpointValue);
+        }
+      }
+    });
+  } else if (typeof responsive === 'number' || typeof responsive === 'string') {
+    iterator((responsiveStyles, style) => {
+      Object.assign(responsiveStyles, style);
+    }, responsive);
+  }
+};

package/modern/cssVars/createCssVarsProvider.js

@@ -16,6 +16,12 @@ export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-
 export default function createCssVarsProvider(options) {
   const {
     themeId,
+    /**
+     * This `theme` object needs to follow a certain structure to
+     * be used correctly by the finel `CssVarsProvider`. It should have a
+     * `colorSchemes` key with the light and dark (and any other) palette.
+     * It should also ideally have a vars object created using `prepareCssVars`.
+     */
     theme: defaultTheme = {},
     attribute: defaultAttribute = DEFAULT_ATTRIBUTE,
     modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v5.13.2
+ * @mui/system v5.13.6
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.13.2",
+  "version": "5.13.6",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -43,11 +43,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
+    "@babel/runtime": "^7.22.5",
     "@mui/private-theming": "^5.13.1",
     "@mui/styled-engine": "^5.13.2",
     "@mui/types": "^7.2.4",
-    "@mui/utils": "^5.13.1",
+    "@mui/utils": "^5.13.6",
     "clsx": "^1.2.1",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"