@mui/system 6.1.2 → 6.1.4

package/esm/flexbox/index.js

@@ -0,0 +1,2 @@
+export { default } from "./flexbox.js";
+export * from "./flexbox.js";

package/esm/getThemeValue/getThemeValue.js

@@ -0,0 +1,51 @@
+import borders from "../borders/index.js";
+import display from "../display/index.js";
+import flexbox from "../flexbox/index.js";
+import grid from "../cssGrid/index.js";
+import positions from "../positions/index.js";
+import palette from "../palette/index.js";
+import shadows from "../shadows/index.js";
+import sizing from "../sizing/index.js";
+import spacing from "../spacing/index.js";
+import typography from "../typography/index.js";
+const filterPropsMapping = {
+  borders: borders.filterProps,
+  display: display.filterProps,
+  flexbox: flexbox.filterProps,
+  grid: grid.filterProps,
+  positions: positions.filterProps,
+  palette: palette.filterProps,
+  shadows: shadows.filterProps,
+  sizing: sizing.filterProps,
+  spacing: spacing.filterProps,
+  typography: typography.filterProps
+};
+export const styleFunctionMapping = {
+  borders,
+  display,
+  flexbox,
+  grid,
+  positions,
+  palette,
+  shadows,
+  sizing,
+  spacing,
+  typography
+};
+export const propToStyleFunction = Object.keys(filterPropsMapping).reduce((acc, styleFnName) => {
+  filterPropsMapping[styleFnName].forEach(propName => {
+    acc[propName] = styleFunctionMapping[styleFnName];
+  });
+  return acc;
+}, {});
+function getThemeValue(prop, value, theme) {
+  const inputProps = {
+    [prop]: value,
+    theme
+  };
+  const styleFunction = propToStyleFunction[prop];
+  return styleFunction ? styleFunction(inputProps) : {
+    [prop]: value
+  };
+}
+export default getThemeValue;

package/esm/getThemeValue/index.js

@@ -0,0 +1,2 @@
+export { default } from "./getThemeValue.js";
+export * from "./getThemeValue.js";

package/esm/index.js

@@ -0,0 +1,68 @@
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
+export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
+export { default as GlobalStyles } from "./GlobalStyles/index.js";
+export { default as borders } from "./borders/index.js";
+export * from "./borders/index.js";
+export { default as breakpoints } from "./breakpoints/index.js";
+export { default as cssContainerQueries } from "./cssContainerQueries/index.js";
+export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from "./breakpoints/index.js";
+export { default as compose } from "./compose/index.js";
+export { default as display } from "./display/index.js";
+export { default as flexbox } from "./flexbox/index.js";
+export * from "./flexbox/index.js";
+export { default as grid } from "./cssGrid/index.js";
+export * from "./cssGrid/index.js";
+export { default as palette } from "./palette/index.js";
+export * from "./palette/index.js";
+export { default as positions } from "./positions/index.js";
+export * from "./positions/index.js";
+export { default as shadows } from "./shadows/index.js";
+export { default as sizing } from "./sizing/index.js";
+export * from "./sizing/index.js";
+export { default as spacing } from "./spacing/index.js";
+export * from "./spacing/index.js";
+export { default as style, getPath, getStyleValue } from "./style/index.js";
+export { default as typography } from "./typography/index.js";
+export * from "./typography/index.js";
+export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
+// TODO: Remove this function in v6
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function experimental_sx() {
+  throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: The `experimental_sx` has been moved to `theme.unstable_sx`.' + 'For more details, see https://github.com/mui/material-ui/pull/35150.' : _formatMuiErrorMessage(19));
+}
+export { default as unstable_getThemeValue } from "./getThemeValue/index.js";
+export { default as Box } from "./Box/index.js";
+export { default as createBox } from "./createBox/index.js";
+export { default as createStyled } from "./createStyled/index.js";
+export * from "./createStyled/index.js";
+export { default as styled } from "./styled/index.js";
+export { default as createTheme } from "./createTheme/index.js";
+export { default as createBreakpoints } from "./createBreakpoints/createBreakpoints.js";
+export { default as createSpacing } from "./createTheme/createSpacing.js";
+export { default as shape } from "./createTheme/shape.js";
+export { default as useThemeProps, getThemeProps } from "./useThemeProps/index.js";
+export { default as useTheme } from "./useTheme/index.js";
+export { default as useThemeWithoutDefault } from "./useThemeWithoutDefault/index.js";
+export { default as useMediaQuery } from "./useMediaQuery/index.js";
+export * from "./colorManipulator/index.js";
+export { default as ThemeProvider } from "./ThemeProvider/index.js";
+export { default as unstable_memoTheme } from "./memoTheme.js";
+export { default as unstable_createCssVarsProvider } from "./cssVars/createCssVarsProvider.js";
+export { default as unstable_createGetCssVar } from "./cssVars/createGetCssVar.js";
+export { default as unstable_cssVarsParser } from "./cssVars/cssVarsParser.js";
+export { default as unstable_prepareCssVars } from "./cssVars/prepareCssVars.js";
+export { default as unstable_createCssVarsTheme } from "./cssVars/createCssVarsTheme.js";
+export { default as responsivePropType } from "./responsivePropType/index.js";
+export { default as RtlProvider } from "./RtlProvider/index.js";
+export * from "./RtlProvider/index.js";
+export * from "./version/index.js";
+
+/** ----------------- */
+/** Layout components */
+export { default as createContainer } from "./Container/createContainer.js";
+export { default as Container } from "./Container/index.js";
+export * from "./Container/index.js";
+export { default as Grid } from "./Grid/Grid.js";
+export * from "./Grid/index.js";
+export { default as Stack } from "./Stack/Stack.js";
+export * from "./Stack/index.js";

package/esm/memoTheme.js

@@ -0,0 +1,28 @@
+import preprocessStyles from "./preprocessStyles.js";
+
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// We need to pass an argument as `{ theme }` for PigmentCSS, but we don't want to
+// allocate more objects.
+const arg = {
+  theme: undefined
+};
+
+/**
+ * Memoize style function on theme.
+ * Intended to be used in styled() calls that only need access to the theme.
+ */
+export default function unstable_memoTheme(styleFn) {
+  let lastValue;
+  let lastTheme;
+  return function styleMemoized(props) {
+    let value = lastValue;
+    if (value === undefined || props.theme !== lastTheme) {
+      arg.theme = props.theme;
+      value = preprocessStyles(styleFn(arg));
+      lastValue = value;
+      lastTheme = props.theme;
+    }
+    return value;
+  };
+}

package/esm/memoize/index.js

@@ -0,0 +1 @@
+export { default } from "./memoize.js";

package/{node → esm}/memoize/memoize.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = memoize;
-function memoize(fn) {
+export default function memoize(fn) {
   const cache = {};
   return arg => {
     if (cache[arg] === undefined) {

package/esm/merge/index.js

@@ -0,0 +1 @@
+export { default } from "./merge.js";

package/esm/merge/merge.js

@@ -0,0 +1,10 @@
+import deepmerge from '@mui/utils/deepmerge';
+function merge(acc, item) {
+  if (!item) {
+    return acc;
+  }
+  return deepmerge(acc, item, {
+    clone: false // No need to clone deep, it's way faster.
+  });
+}
+export default merge;

package/esm/palette/index.js

@@ -0,0 +1,2 @@
+export { default } from "./palette.js";
+export * from "./palette.js";

package/esm/palette/palette.js

@@ -0,0 +1,26 @@
+import style from "../style/index.js";
+import compose from "../compose/index.js";
+export function paletteTransform(value, userValue) {
+  if (userValue === 'grey') {
+    return userValue;
+  }
+  return value;
+}
+export const color = style({
+  prop: 'color',
+  themeKey: 'palette',
+  transform: paletteTransform
+});
+export const bgcolor = style({
+  prop: 'bgcolor',
+  cssProperty: 'backgroundColor',
+  themeKey: 'palette',
+  transform: paletteTransform
+});
+export const backgroundColor = style({
+  prop: 'backgroundColor',
+  themeKey: 'palette',
+  transform: paletteTransform
+});
+const palette = compose(color, bgcolor, backgroundColor);
+export default palette;

package/esm/positions/index.js

@@ -0,0 +1,2 @@
+export { default } from "./positions.js";
+export * from "./positions.js";

package/esm/positions/positions.js

@@ -0,0 +1,22 @@
+import style from "../style/index.js";
+import compose from "../compose/index.js";
+export const position = style({
+  prop: 'position'
+});
+export const zIndex = style({
+  prop: 'zIndex',
+  themeKey: 'zIndex'
+});
+export const top = style({
+  prop: 'top'
+});
+export const right = style({
+  prop: 'right'
+});
+export const bottom = style({
+  prop: 'bottom'
+});
+export const left = style({
+  prop: 'left'
+});
+export default compose(position, zIndex, top, right, bottom, left);

package/esm/preprocessStyles.js

@@ -0,0 +1,25 @@
+import { internal_serializeStyles } from '@mui/styled-engine';
+export default function preprocessStyles(input) {
+  const {
+    variants,
+    ...style
+  } = input;
+  const result = {
+    variants,
+    style: internal_serializeStyles(style),
+    isProcessed: true
+  };
+
+  // Not supported on styled-components
+  if (result.style === style) {
+    return result;
+  }
+  if (variants) {
+    variants.forEach(variant => {
+      if (typeof variant.style !== 'function') {
+        variant.style = internal_serializeStyles(variant.style);
+      }
+    });
+  }
+  return result;
+}

package/esm/propsToClassKey/index.js

@@ -0,0 +1 @@
+export { default } from "./propsToClassKey.js";

package/esm/propsToClassKey/propsToClassKey.js

@@ -0,0 +1,25 @@
+import capitalize from '@mui/utils/capitalize';
+function isEmpty(string) {
+  return string.length === 0;
+}
+
+/**
+ * Generates string classKey based on the properties provided. It starts with the
+ * variant if defined, and then it appends all other properties in alphabetical order.
+ * @param {object} props - the properties for which the classKey should be created.
+ */
+export default function propsToClassKey(props) {
+  const {
+    variant,
+    ...other
+  } = props;
+  let classKey = variant || '';
+  Object.keys(other).sort().forEach(key => {
+    if (key === 'color') {
+      classKey += isEmpty(classKey) ? props[key] : capitalize(props[key]);
+    } else {
+      classKey += `${isEmpty(classKey) ? key : capitalize(key)}${capitalize(props[key].toString())}`;
+    }
+  });
+  return classKey;
+}

package/esm/responsivePropType/index.js

@@ -0,0 +1 @@
+export { default } from "./responsivePropType.js";

package/esm/responsivePropType/responsivePropType.js

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+const responsivePropType = process.env.NODE_ENV !== 'production' ? PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.object, PropTypes.array]) : {};
+export default responsivePropType;

package/esm/shadows/index.js

@@ -0,0 +1 @@
+export { default } from "./shadows.js";

package/esm/shadows/shadows.js

@@ -0,0 +1,6 @@
+import style from "../style/index.js";
+const boxShadow = style({
+  prop: 'boxShadow',
+  themeKey: 'shadows'
+});
+export default boxShadow;

package/esm/sizing/index.js

@@ -0,0 +1,2 @@
+export { default } from "./sizing.js";
+export * from "./sizing.js";

package/esm/sizing/sizing.js

@@ -0,0 +1,64 @@
+import style from "../style/index.js";
+import compose from "../compose/index.js";
+import { handleBreakpoints, values as breakpointsValues } from "../breakpoints/index.js";
+export function sizingTransform(value) {
+  return value <= 1 && value !== 0 ? `${value * 100}%` : value;
+}
+export const width = style({
+  prop: 'width',
+  transform: sizingTransform
+});
+export const maxWidth = props => {
+  if (props.maxWidth !== undefined && props.maxWidth !== null) {
+    const styleFromPropValue = propValue => {
+      const breakpoint = props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue)
+        };
+      }
+      if (props.theme?.breakpoints?.unit !== 'px') {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`
+        };
+      }
+      return {
+        maxWidth: breakpoint
+      };
+    };
+    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
+  }
+  return null;
+};
+maxWidth.filterProps = ['maxWidth'];
+export const minWidth = style({
+  prop: 'minWidth',
+  transform: sizingTransform
+});
+export const height = style({
+  prop: 'height',
+  transform: sizingTransform
+});
+export const maxHeight = style({
+  prop: 'maxHeight',
+  transform: sizingTransform
+});
+export const minHeight = style({
+  prop: 'minHeight',
+  transform: sizingTransform
+});
+export const sizeWidth = style({
+  prop: 'size',
+  cssProperty: 'width',
+  transform: sizingTransform
+});
+export const sizeHeight = style({
+  prop: 'size',
+  cssProperty: 'height',
+  transform: sizingTransform
+});
+export const boxSizing = style({
+  prop: 'boxSizing'
+});
+const sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);
+export default sizing;

package/esm/spacing/index.js

@@ -0,0 +1,2 @@
+export { default } from "./spacing.js";
+export * from "./spacing.js";

package/{node → esm}/spacing/spacing.js

@@ -1,23 +1,8 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createUnarySpacing = createUnarySpacing;
-exports.createUnaryUnit = createUnaryUnit;
-exports.default = void 0;
-exports.getStyleFromPropValue = getStyleFromPropValue;
-exports.getValue = getValue;
-exports.margin = margin;
-exports.marginKeys = void 0;
-exports.padding = padding;
-exports.paddingKeys = void 0;
-var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
-var _breakpoints = require("../breakpoints");
-var _style = require("../style");
-var _merge = _interopRequireDefault(require("../merge"));
-var _memoize = _interopRequireDefault(require("../memoize"));
+import responsivePropType from "../responsivePropType/index.js";
+import { handleBreakpoints } from "../breakpoints/index.js";
+import { getPath } from "../style/index.js";
+import merge from "../merge/index.js";
+import memoize from "../memoize/index.js";
 const properties = {
   m: 'margin',
   p: 'padding'
@@ -40,7 +25,7 @@ const aliases = {
 // memoize() impact:
 // From 300,000 ops/sec
 // To 350,000 ops/sec
-const getCssProperties = (0, _memoize.default)(prop => {
+const getCssProperties = memoize(prop => {
   // It's not a shorthand notation.
   if (prop.length > 2) {
     if (aliases[prop]) {
@@ -54,11 +39,11 @@ const getCssProperties = (0, _memoize.default)(prop => {
   const direction = directions[b] || '';
   return Array.isArray(direction) ? direction.map(dir => property + dir) : [property + direction];
 });
-const marginKeys = exports.marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
-const paddingKeys = exports.paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
+export const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
+export const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
 const spacingKeys = [...marginKeys, ...paddingKeys];
-function createUnaryUnit(theme, themeKey, defaultValue, propName) {
-  const themeSpacing = (0, _style.getPath)(theme, themeKey, true) ?? defaultValue;
+export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
+  const themeSpacing = getPath(theme, themeKey, true) ?? defaultValue;
   if (typeof themeSpacing === 'number' || typeof themeSpacing === 'string') {
     return val => {
       if (typeof val === 'string') {
@@ -106,16 +91,16 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
   }
   return () => undefined;
 }
-function createUnarySpacing(theme) {
+export function createUnarySpacing(theme) {
   return createUnaryUnit(theme, 'spacing', 8, 'spacing');
 }
-function getValue(transformer, propValue) {
+export function getValue(transformer, propValue) {
   if (typeof propValue === 'string' || propValue == null) {
     return propValue;
   }
   return transformer(propValue);
 }
-function getStyleFromPropValue(cssProperties, transformer) {
+export function getStyleFromPropValue(cssProperties, transformer) {
   return propValue => cssProperties.reduce((acc, cssProperty) => {
     acc[cssProperty] = getValue(transformer, propValue);
     return acc;
@@ -130,25 +115,25 @@ function resolveCssProperty(props, keys, prop, transformer) {
   const cssProperties = getCssProperties(prop);
   const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
   const propValue = props[prop];
-  return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+  return handleBreakpoints(props, propValue, styleFromPropValue);
 }
 function style(props, keys) {
   const transformer = createUnarySpacing(props.theme);
-  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(_merge.default, {});
+  return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(merge, {});
 }
-function margin(props) {
+export function margin(props) {
   return style(props, marginKeys);
 }
 margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
-  obj[key] = _responsivePropType.default;
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
 margin.filterProps = marginKeys;
-function padding(props) {
+export function padding(props) {
   return style(props, paddingKeys);
 }
 padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
-  obj[key] = _responsivePropType.default;
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
 padding.filterProps = paddingKeys;
@@ -156,8 +141,8 @@ function spacing(props) {
   return style(props, spacingKeys);
 }
 spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
-  obj[key] = _responsivePropType.default;
+  obj[key] = responsivePropType;
   return obj;
 }, {}) : {};
 spacing.filterProps = spacingKeys;
-var _default = exports.default = spacing;
+export default spacing;

package/esm/style/index.js

@@ -0,0 +1,2 @@
+export { default } from "./style.js";
+export * from "./style.js";

package/{node → esm}/style/style.js

@@ -1,16 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.getPath = getPath;
-exports.getStyleValue = getStyleValue;
-var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
-var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
-var _breakpoints = require("../breakpoints");
-function getPath(obj, path, checkVars = true) {
+import capitalize from '@mui/utils/capitalize';
+import responsivePropType from "../responsivePropType/index.js";
+import { handleBreakpoints } from "../breakpoints/index.js";
+export function getPath(obj, path, checkVars = true) {
   if (!path || typeof path !== 'string') {
     return null;
   }
@@ -29,7 +20,7 @@ function getPath(obj, path, checkVars = true) {
     return null;
   }, obj);
 }
-function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
+export function getStyleValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
   let value;
   if (typeof themeMapping === 'function') {
     value = themeMapping(propValueFinal);
@@ -64,7 +55,7 @@ function style(options) {
       let value = getStyleValue(themeMapping, transform, propValueFinal);
       if (propValueFinal === value && typeof propValueFinal === 'string') {
         // Haven't found value
-        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _capitalize.default)(propValueFinal)}`, propValueFinal);
+        value = getStyleValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
       }
       if (cssProperty === false) {
         return value;
@@ -73,12 +64,12 @@ function style(options) {
         [cssProperty]: value
       };
     };
-    return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
+    return handleBreakpoints(props, propValue, styleFromPropValue);
   };
   fn.propTypes = process.env.NODE_ENV !== 'production' ? {
-    [prop]: _responsivePropType.default
+    [prop]: responsivePropType
   } : {};
   fn.filterProps = [prop];
   return fn;
 }
-var _default = exports.default = style;
+export default style;