@mui/system 5.14.18 → 5.14.20

package/Box/Box.js

@@ -7,8 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
 var _createBox = _interopRequireDefault(require("../createBox"));
-const Box = (0, _createBox.default)();
+var _boxClasses = _interopRequireDefault(require("./boxClasses"));
+const Box = (0, _createBox.default)({
+  defaultClassName: _boxClasses.default.root,
+  generateClassName: _utils.unstable_ClassNameGenerator.generate
+});
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/Box/boxClasses.d.ts

@@ -0,0 +1,7 @@
+export interface BoxClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type BoxClassKey = keyof BoxClasses;
+declare const boxClasses: BoxClasses;
+export default boxClasses;

package/Box/boxClasses.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@mui/utils");
+const boxClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBox', ['root']);
+var _default = exports.default = boxClasses;

package/Box/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Box';
 export * from './Box';
+
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/Box/index.js

@@ -5,10 +5,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  boxClasses: true
+};
+Object.defineProperty(exports, "boxClasses", {
+  enumerable: true,
+  get: function () {
+    return _boxClasses.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _Box.default;
   }
 });
-var _Box = _interopRequireDefault(require("./Box"));
+var _Box = _interopRequireDefault(require("./Box"));
+var _boxClasses = _interopRequireWildcard(require("./boxClasses"));
+Object.keys(_boxClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _boxClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _boxClasses[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.20
+
+<!-- generated comparing v5.14.19..master -->
+
+_Dec 5, 2023_
+
+A big thanks to the 14 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material-next@6.0.0-alpha.112`
+
+- &#8203;<!-- 07 -->[Menu] Enable again the usage of the autoFocus prop (#39960) @mnajdova
+- &#8203;<!-- 06 -->[ProgressIndicator] Apply MD3 style to `CircularProgress` (#39825) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 15 -->Remove outdated showcase (#40063) @oliviertassinari
+- &#8203;<!-- 14 -->Support yaml as prism language (#40044) @Janpot
+- &#8203;<!-- 12 -->[material-ui] Fix SearchAppBar width on `sm` screens (#40049) @DiegoAndai
+- &#8203;<!-- 11 -->[material-ui] Update the basic Grid section copy (#40035) @REX500
+- &#8203;<!-- 10 -->[material-ui] Add a react-admin example project (#39972) @fzaninotto
+- &#8203;<!-- 09 -->[material-ui][TextField] Add a performance section (#39692) @anle9650
+- &#8203;<!-- 05 -->[material-ui][tabs] Refine scrollable tabs description (#40037) @zanivan
+- &#8203;<!-- 08 -->[system] Fix typo on the CSS theme variables page (#40040) @caweidmann
+
+### Core
+
+- &#8203;<!-- 17 -->[blog] Fix scrollbar on mobile (#40057) @oliviertassinari
+- &#8203;<!-- 16 -->[blog] Fix link to charts getting started page (#40043) @alexfauquette
+- &#8203;<!-- 13 -->[docs-infra] Simplify CSS classes extraction in API docs generator (#39808) @michaldudak
+- &#8203;<!-- 04 -->[website] Polish dark mode colors (#40052) @danilo-leal
+- &#8203;<!-- 03 -->[website] Add why Design Engineer for data grid (#40016) @oliviertassinari
+- &#8203;<!-- 02 -->[website] Add stray fixes to the Base UI page (#40051) @danilo-leal
+- &#8203;<!-- 01 -->[website] Revise the Developer Advocate job posting (#39210) @samuelsycamore
+
+All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @caweidmann, @danilo-leal, @DiegoAndai, @fzaninotto, @Janpot, @lhilgert9, @michaldudak, @mnajdova, @oliviertassinari, @REX500, @samuelsycamore, @zanivan
+
+## 5.14.19
+
+<!-- generated comparing v5.14.18..master -->
+
+_Nov 29, 2023_
+
+A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐛 Fix Material UI Autocomplete behavior when there are duplicate labels (#36426) @islandryu
+- 🚀 Added Material You Linear Progress to `material-next` package (#39807) @lhilgert9
+
+### `@mui/material@5.14.19`
+
+- &#8203;<!-- 44 -->[Autocomplete] Fix behavior when there are duplicate labels (#36426) @islandryu
+- &#8203;<!-- 37 -->[Box] Added boxClasses (#39889) @sadik-malik
+- &#8203;<!-- 18 -->[FilledInput] Fix slot props deepmerge order (#38922) @dhaub-exelixis
+- &#8203;<!-- 12 -->[Select] Add id to hidden input element (#39414) @DarhkVoyd
+- &#8203;<!-- 11 -->[Select] Remove unnecessary picking of `onChange` type from SelectInputProps (#39891) @ZeeshanTamboli
+
+### `@mui/base@5.0.0-beta.25`
+
+- &#8203;<!-- 46 -->[Menu] Fix navigation of items when 1st item is disabled (#39828) @sai6855
+- &#8203;<!-- 42 -->[Modal] Refine demos (#39824) @zanivan
+- &#8203;<!-- 41 -->[NumberInput] Implement `numberInputReducer` (#38723) @mj12albert
+- &#8203;<!-- 40 -->[useNumberInput] Fix change handlers passed through slotProps (#39407) @mj12albert
+
+### `@mui/joy@5.0.0-beta.16`
+
+- &#8203;<!-- 38 -->[Box] Added boxClasses (#39895) @sadik-malik
+
+### `@mui/system@5.14.19`
+
+- &#8203;<!-- 36 -->[Box] Added boxClasses (#39896) @sadik-malik
+- &#8203;<!-- 09 -->Add outlineColor to defaultSxConfig (#39962) @brijeshb42
+
+### `@mui/types@7.2.10`
+
+- &#8203;<!-- 08 -->Add `PartiallyRequired` type (#39939) @lhilgert9
+
+### `@mui/material-next@6.0.0-alpha.111`
+
+- &#8203;<!-- 47 -->[ProgressIndicator] Apply MD3 style to `LinearProgress` (#39807) @lhilgert9
+- &#8203;<!-- 17 -->[FormHelperText] Add FormHelperText component (#39503) @mj12albert
+- &#8203;<!-- 16 -->[IconButton] Copy IconButton to material-next (#39945) @mj12albert
+- &#8203;<!-- 13 -->[Switch] Copy `Switch` to material next (#39887) @lhilgert9
+
+### Docs
+
+- &#8203;<!-- 19 -->[material-ui] Fix theme prop in v5 migration guide (#39976) @sai6855
+- &#8203;<!-- 43 -->[base-ui] Improve Next.js Link docs (#39838) @oliviertassinari
+- &#8203;<!-- 39 -->[base-ui] Export Base UI theme in stylesheet (#39694) @mnajdova
+- &#8203;<!-- 52 -->[joy-ui] Fix the date min & max slot props values on the Input demo (#40018) @avikalpg
+- &#8203;<!-- 35 -->[joy-ui][ButtonGroup] Fix orientation prop description (#39876) @sai6855
+- &#8203;<!-- 25 -->[joy-ui] Update gif from the Dark Mode Optimization page (#39726) @danilo-leal
+- &#8203;<!-- 24 -->[joy-ui] Fix h1 template (#40017) @oliviertassinari
+- &#8203;<!-- 23 -->[joy-ui] Fix wrong product id @oliviertassinari
+- &#8203;<!-- 22 -->[joy-ui] Fixes in theme scoping documentation (#39899) @ZeeshanTamboli
+- &#8203;<!-- 21 -->[joy-ui] Refine the Email, Teams and Files templates (#39579) @zanivan
+- &#8203;<!-- 15 -->[joy-ui][templates] Fix layout shift on Profile template (#40022) @zanivan
+- &#8203;<!-- 14 -->[joy-ui][Templates] Update thumbnails (#39938) @zanivan
+- &#8203;<!-- 20 -->[material-next] Add contributing guide (#39944) @mj12albert
+- &#8203;<!-- 51 -->End v6 blogpost notification (#39879) @joserodolfofreitas
+- &#8203;<!-- 31 -->Fix nested CSS warning (#39932) @mnajdova
+- &#8203;<!-- 30 -->Make integration searchable (#39967) @oliviertassinari
+- &#8203;<!-- 29 -->Fix use of quote in markdown (#39953) @oliviertassinari
+- &#8203;<!-- 28 -->Show design links on Joy UI (#39955) @oliviertassinari
+- &#8203;<!-- 27 -->Restore Algolia results when searching for "Figma" (#39956) @oliviertassinari
+- &#8203;<!-- 26 -->Fix two tone icon dark mode color (#39868) @mnajdova
+
+### Core
+
+- &#8203;<!-- 45 -->Improve lerna's renovate package rules (#40029) @DiegoAndai
+- &#8203;<!-- 34 -->Downgrade lerna to 7.2.0 (#40026) @DiegoAndai
+- &#8203;<!-- 32 -->Rename OpenCollective @oliviertassinari
+- &#8203;<!-- 48 -->[docs-infra] Env variables should be string (#39991) @oliviertassinari
+- &#8203;<!-- 10 -->[Portal] Improve docs for container prop (#39180) @oliviertassinari
+- &#8203;<!-- 50 -->[website] Update pricing table (#40023) @cherniavskii
+- &#8203;<!-- 49 -->[website][docs] Update the product identifier menu and X page (#39832) @danilo-leal
+- &#8203;<!-- 07 -->[website] Mark TreeView and Charts as stable (#39975) @flaviendelangle
+- &#8203;<!-- 06 -->[website] Update career page (#40015) @oliviertassinari
+- &#8203;<!-- 05 -->[website] Sync about dataset @oliviertassinari
+- &#8203;<!-- 04 -->[website] Fix 301 redirection to X tree-view @oliviertassinari
+- &#8203;<!-- 03 -->[website] Change redirection prefixes @oliviertassinari
+- &#8203;<!-- 02 -->[website] Fix 301 link @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix modal not being closed with the escape key on the Base UI page (#39880) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @avikalpg, @brijeshb42, @cherniavskii, @danilo-leal, @DarhkVoyd, @dhaub-exelixis, @DiegoAndai, @flaviendelangle, @islandryu, @joserodolfofreitas, @lhilgert9, @mj12albert, @mnajdova, @oliviertassinari, @sadik-malik, @sai6855, @zanivan, @ZeeshanTamboli
+
 ## 5.14.18
 
 <!-- generated comparing v5.14.17..master -->
@@ -10204,7 +10329,7 @@ A big thanks to the 26 contributors who made this release possible. Here are som
   This is a follow-up effort after we have merged `material-ui-pickers`. The components are written in TypeScript which required us to upgrade our infra.
 - 👌 Improve the Slider thumb and track animation (#24968) @remyoudemans.
   The thumb is now moving with a light transition between different values unless it's dragged.
-  <img src="https://user-images.githubusercontent.com/3165635/109394906-b7405a00-7929-11eb-829a-3b5246c30c08.gif" width="412" height="110" />
+  <img src="https://user-images.githubusercontent.com/3165635/109394906-b7405a00-7929-11eb-829a-3b5246c30c08.gif" width="412" height="110" alt="thumb-animation" />
 - 💅 Convert 5 components with custom colors support (#25099, #25088) @mngu.
   This change makes it easier to leverage custom palettes
 - And many more 🐛 bug fixes and 📚 improvements.

package/borders.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
 exports.borderTransform = borderTransform;
-exports.default = void 0;
+exports.outlineColor = exports.outline = exports.default = void 0;
 var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
 var _style = _interopRequireDefault(require("./style"));
 var _compose = _interopRequireDefault(require("./compose"));
@@ -18,51 +18,25 @@ function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-const border = exports.border = (0, _style.default)({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderTop = exports.borderTop = (0, _style.default)({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderRight = exports.borderRight = (0, _style.default)({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderBottom = exports.borderBottom = (0, _style.default)({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderLeft = exports.borderLeft = (0, _style.default)({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-const borderColor = exports.borderColor = (0, _style.default)({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-const borderTopColor = exports.borderTopColor = (0, _style.default)({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-const borderRightColor = exports.borderRightColor = (0, _style.default)({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-const borderBottomColor = exports.borderBottomColor = (0, _style.default)({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-const borderLeftColor = exports.borderLeftColor = (0, _style.default)({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return (0, _style.default)({
+    prop,
+    themeKey: 'borders',
+    transform
+  });
+}
+const border = exports.border = createBorderStyle('border', borderTransform);
+const borderTop = exports.borderTop = createBorderStyle('borderTop', borderTransform);
+const borderRight = exports.borderRight = createBorderStyle('borderRight', borderTransform);
+const borderBottom = exports.borderBottom = createBorderStyle('borderBottom', borderTransform);
+const borderLeft = exports.borderLeft = createBorderStyle('borderLeft', borderTransform);
+const borderColor = exports.borderColor = createBorderStyle('borderColor');
+const borderTopColor = exports.borderTopColor = createBorderStyle('borderTopColor');
+const borderRightColor = exports.borderRightColor = createBorderStyle('borderRightColor');
+const borderBottomColor = exports.borderBottomColor = createBorderStyle('borderBottomColor');
+const borderLeftColor = exports.borderLeftColor = createBorderStyle('borderLeftColor');
+const outline = exports.outline = createBorderStyle('outline', borderTransform);
+const outlineColor = exports.outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -81,5 +55,5 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: _responsivePropType.default
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
+const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 var _default = exports.default = borders;

package/esm/Box/Box.js

@@ -1,8 +1,13 @@
 'use client';
 
 import PropTypes from 'prop-types';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
 import createBox from '../createBox';
-const Box = createBox();
+import boxClasses from './boxClasses';
+const Box = createBox({
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate
+});
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/Box/boxClasses.js

@@ -0,0 +1,3 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+export default boxClasses;

package/esm/Box/index.js

@@ -1,3 +1,5 @@
 'use client';
 
-export { default } from './Box';
+export { default } from './Box';
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/esm/borders.js

@@ -9,51 +9,25 @@ export function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-export const border = style({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderTop = style({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderRight = style({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderBottom = style({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderLeft = style({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderColor = style({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-export const borderTopColor = style({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-export const borderRightColor = style({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-export const borderBottomColor = style({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-export const borderLeftColor = style({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style({
+    prop,
+    themeKey: 'borders',
+    transform
+  });
+}
+export const border = createBorderStyle('border', borderTransform);
+export const borderTop = createBorderStyle('borderTop', borderTransform);
+export const borderRight = createBorderStyle('borderRight', borderTransform);
+export const borderBottom = createBorderStyle('borderBottom', borderTransform);
+export const borderLeft = createBorderStyle('borderLeft', borderTransform);
+export const borderColor = createBorderStyle('borderColor');
+export const borderTopColor = createBorderStyle('borderTopColor');
+export const borderRightColor = createBorderStyle('borderRightColor');
+export const borderBottomColor = createBorderStyle('borderBottomColor');
+export const borderLeftColor = createBorderStyle('borderLeftColor');
+export const outline = createBorderStyle('outline', borderTransform);
+export const outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -71,5 +45,5 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
+const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 export default borders;

package/esm/styleFunctionSx/defaultSxConfig.js

@@ -40,6 +40,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius

package/index.js

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

package/legacy/Box/Box.js

@@ -1,8 +1,13 @@
 'use client';
 
 import PropTypes from 'prop-types';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
 import createBox from '../createBox';
-var Box = createBox();
+import boxClasses from './boxClasses';
+var Box = createBox({
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate
+});
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/legacy/Box/boxClasses.js

@@ -0,0 +1,3 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+var boxClasses = generateUtilityClasses('MuiBox', ['root']);
+export default boxClasses;

package/legacy/Box/index.js

@@ -1,3 +1,5 @@
 'use client';
 
-export { default } from './Box';
+export { default } from './Box';
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/legacy/borders.js

@@ -9,51 +9,25 @@ export function borderTransform(value) {
   }
   return "".concat(value, "px solid");
 }
-export var border = style({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export var borderTop = style({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export var borderRight = style({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export var borderBottom = style({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export var borderLeft = style({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export var borderColor = style({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-export var borderTopColor = style({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-export var borderRightColor = style({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-export var borderBottomColor = style({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-export var borderLeftColor = style({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style({
+    prop: prop,
+    themeKey: 'borders',
+    transform: transform
+  });
+}
+export var border = createBorderStyle('border', borderTransform);
+export var borderTop = createBorderStyle('borderTop', borderTransform);
+export var borderRight = createBorderStyle('borderRight', borderTransform);
+export var borderBottom = createBorderStyle('borderBottom', borderTransform);
+export var borderLeft = createBorderStyle('borderLeft', borderTransform);
+export var borderColor = createBorderStyle('borderColor');
+export var borderTopColor = createBorderStyle('borderTopColor');
+export var borderRightColor = createBorderStyle('borderRightColor');
+export var borderBottomColor = createBorderStyle('borderBottomColor');
+export var borderLeftColor = createBorderStyle('borderLeftColor');
+export var outline = createBorderStyle('outline', borderTransform);
+export var outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -73,5 +47,5 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
+var borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 export default borders;

package/legacy/getThemeValue.js

@@ -40,8 +40,7 @@ export var propToStyleFunction = Object.keys(filterPropsMapping).reduce(function
   return acc;
 }, {});
 function getThemeValue(prop, value, theme) {
-  var _inputProps;
-  var inputProps = (_inputProps = {}, _defineProperty(_inputProps, prop, value), _defineProperty(_inputProps, "theme", theme), _inputProps);
+  var inputProps = _defineProperty(_defineProperty({}, prop, value), "theme", theme);
   var styleFunction = propToStyleFunction[prop];
   return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
 }

package/legacy/index.js

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

package/legacy/styleFunctionSx/defaultSxConfig.js

@@ -40,6 +40,13 @@ var defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius

package/legacy/styleFunctionSx/styleFunctionSx.js

@@ -24,8 +24,7 @@ function callIfFn(maybeFn, arg) {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function unstable_createStyleFunctionSx() {
   function getThemeValue(prop, val, theme, config) {
-    var _props;
-    var props = (_props = {}, _defineProperty(_props, prop, val), _defineProperty(_props, "theme", theme), _props);
+    var props = _defineProperty(_defineProperty({}, prop, val), "theme", theme);
     var options = config[prop];
     if (!options) {
       return _defineProperty({}, prop, val);

package/modern/Box/Box.js

@@ -1,8 +1,13 @@
 'use client';
 
 import PropTypes from 'prop-types';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/utils';
 import createBox from '../createBox';
-const Box = createBox();
+import boxClasses from './boxClasses';
+const Box = createBox({
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate
+});
 process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/Box/boxClasses.js

@@ -0,0 +1,3 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+const boxClasses = generateUtilityClasses('MuiBox', ['root']);
+export default boxClasses;

package/modern/Box/index.js

@@ -1,3 +1,5 @@
 'use client';
 
-export { default } from './Box';
+export { default } from './Box';
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

package/modern/borders.js

@@ -9,51 +9,25 @@ export function borderTransform(value) {
   }
   return `${value}px solid`;
 }
-export const border = style({
-  prop: 'border',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderTop = style({
-  prop: 'borderTop',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderRight = style({
-  prop: 'borderRight',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderBottom = style({
-  prop: 'borderBottom',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderLeft = style({
-  prop: 'borderLeft',
-  themeKey: 'borders',
-  transform: borderTransform
-});
-export const borderColor = style({
-  prop: 'borderColor',
-  themeKey: 'palette'
-});
-export const borderTopColor = style({
-  prop: 'borderTopColor',
-  themeKey: 'palette'
-});
-export const borderRightColor = style({
-  prop: 'borderRightColor',
-  themeKey: 'palette'
-});
-export const borderBottomColor = style({
-  prop: 'borderBottomColor',
-  themeKey: 'palette'
-});
-export const borderLeftColor = style({
-  prop: 'borderLeftColor',
-  themeKey: 'palette'
-});
+function createBorderStyle(prop, transform) {
+  return style({
+    prop,
+    themeKey: 'borders',
+    transform
+  });
+}
+export const border = createBorderStyle('border', borderTransform);
+export const borderTop = createBorderStyle('borderTop', borderTransform);
+export const borderRight = createBorderStyle('borderRight', borderTransform);
+export const borderBottom = createBorderStyle('borderBottom', borderTransform);
+export const borderLeft = createBorderStyle('borderLeft', borderTransform);
+export const borderColor = createBorderStyle('borderColor');
+export const borderTopColor = createBorderStyle('borderTopColor');
+export const borderRightColor = createBorderStyle('borderRightColor');
+export const borderBottomColor = createBorderStyle('borderBottomColor');
+export const borderLeftColor = createBorderStyle('borderLeftColor');
+export const outline = createBorderStyle('outline', borderTransform);
+export const outlineColor = createBorderStyle('outlineColor');
 
 // false positive
 // eslint-disable-next-line react/function-component-definition
@@ -71,5 +45,5 @@ borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
   borderRadius: responsivePropType
 } : {};
 borderRadius.filterProps = ['borderRadius'];
-const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius);
+const borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
 export default borders;

package/modern/index.js

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

package/modern/styleFunctionSx/defaultSxConfig.js

@@ -40,6 +40,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: borderRadius

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "5.14.18",
+  "version": "5.14.20",
   "private": false,
   "author": "MUI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
@@ -23,14 +23,14 @@
   "homepage": "https://mui.com/system/getting-started/",
   "funding": {
     "type": "opencollective",
-    "url": "https://opencollective.com/mui"
+    "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.2",
-    "@mui/private-theming": "^5.14.18",
-    "@mui/styled-engine": "^5.14.18",
-    "@mui/types": "^7.2.9",
-    "@mui/utils": "^5.14.18",
+    "@babel/runtime": "^7.23.4",
+    "@mui/private-theming": "^5.14.20",
+    "@mui/styled-engine": "^5.14.19",
+    "@mui/types": "^7.2.10",
+    "@mui/utils": "^5.14.20",
     "clsx": "^2.0.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1"

package/styleFunctionSx/defaultSxConfig.js

@@ -46,6 +46,13 @@ const defaultSxConfig = {
   borderLeftColor: {
     themeKey: 'palette'
   },
+  outline: {
+    themeKey: 'borders',
+    transform: _borders.borderTransform
+  },
+  outlineColor: {
+    themeKey: 'palette'
+  },
   borderRadius: {
     themeKey: 'shape.borderRadius',
     style: _borders.borderRadius