@mui/system 6.0.0-alpha.0 → 6.0.0-alpha.3

package/legacy/createStyled/index.js

@@ -1,4 +0,0 @@
-'use client';
-
-export { default } from './createStyled';
-export * from './createStyled';

package/legacy/createTheme/applyStyles.js

@@ -1,73 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/**
- * A universal utility to style components with multiple color modes. Always use it from the theme object.
- * It works with:
- *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
- *  - Zero-runtime engine
- *
- * Tips: Use an array over object spread and place `theme.applyStyles()` last.
- *
- * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
- *
- * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
- *
- * @example
- * 1. using with `styled`:
- * ```jsx
- *   const Component = styled('div')(({ theme }) => [
- *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
- *       background: '#1c1c1c',
- *       color: '#fff',
- *     }),
- *   ]);
- * ```
- *
- * @example
- * 2. using with `sx` prop:
- * ```jsx
- *   <Box sx={theme => [
- *     { background: '#e5e5e5' },
- *     theme.applyStyles('dark', {
- *        background: '#1c1c1c',
- *        color: '#fff',
- *      }),
- *     ]}
- *   />
- * ```
- *
- * @example
- * 3. theming a component:
- * ```jsx
- *   extendTheme({
- *     components: {
- *       MuiButton: {
- *         styleOverrides: {
- *           root: ({ theme }) => [
- *             { background: '#e5e5e5' },
- *             theme.applyStyles('dark', {
- *               background: '#1c1c1c',
- *               color: '#fff',
- *             }),
- *           ],
- *         },
- *       }
- *     }
- *   })
- *```
- */
-export default function applyStyles(key, styles) {
-  // @ts-expect-error this is 'any' type
-  var theme = this;
-  if (theme.vars && typeof theme.getColorSchemeSelector === 'function') {
-    // If CssVarsProvider is used as a provider,
-    // returns '* :where([data-mui-color-scheme="light|dark"]) &'
-    var selector = theme.getColorSchemeSelector(key).replace(/(\[[^\]]+\])/, '*:where($1)');
-    return _defineProperty({}, selector, styles);
-  }
-  if (theme.palette.mode === key) {
-    return styles;
-  }
-  return {};
-}

package/legacy/createTheme/createBreakpoints.js

@@ -1,83 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
-// Sorted ASC by size. That's important.
-// It can't be configured as it's used statically for propTypes.
-export var breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-var sortBreakpointsValues = function sortBreakpointsValues(values) {
-  var breakpointsAsArray = Object.keys(values).map(function (key) {
-    return {
-      key: key,
-      val: values[key]
-    };
-  }) || [];
-  // Sort in ascending order
-  breakpointsAsArray.sort(function (breakpoint1, breakpoint2) {
-    return breakpoint1.val - breakpoint2.val;
-  });
-  return breakpointsAsArray.reduce(function (acc, obj) {
-    return _extends({}, acc, _defineProperty({}, obj.key, obj.val));
-  }, {});
-};
-
-// Keep in mind that @media is inclusive by the CSS specification.
-export default function createBreakpoints(breakpoints) {
-  var _breakpoints$values = breakpoints.values,
-    values = _breakpoints$values === void 0 ? {
-      xs: 0,
-      // phone
-      sm: 600,
-      // tablet
-      md: 900,
-      // small laptop
-      lg: 1200,
-      // desktop
-      xl: 1536 // large screen
-    } : _breakpoints$values,
-    _breakpoints$unit = breakpoints.unit,
-    unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
-    _breakpoints$step = breakpoints.step,
-    step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
-    other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
-  var sortedValues = sortBreakpointsValues(values);
-  var keys = Object.keys(sortedValues);
-  function up(key) {
-    var value = typeof values[key] === 'number' ? values[key] : key;
-    return "@media (min-width:".concat(value).concat(unit, ")");
-  }
-  function down(key) {
-    var value = typeof values[key] === 'number' ? values[key] : key;
-    return "@media (max-width:".concat(value - step / 100).concat(unit, ")");
-  }
-  function between(start, end) {
-    var endIndex = keys.indexOf(end);
-    return "@media (min-width:".concat(typeof values[start] === 'number' ? values[start] : start).concat(unit, ") and ") + "(max-width:".concat((endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100).concat(unit, ")");
-  }
-  function only(key) {
-    if (keys.indexOf(key) + 1 < keys.length) {
-      return between(key, keys[keys.indexOf(key) + 1]);
-    }
-    return up(key);
-  }
-  function not(key) {
-    // handle first and last key separately, for better readability
-    var keyIndex = keys.indexOf(key);
-    if (keyIndex === 0) {
-      return up(keys[1]);
-    }
-    if (keyIndex === keys.length - 1) {
-      return down(keys[keyIndex]);
-    }
-    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
-  }
-  return _extends({
-    keys: keys,
-    values: sortedValues,
-    up: up,
-    down: down,
-    between: between,
-    only: only,
-    not: not,
-    unit: unit
-  }, other);
-}

package/legacy/createTheme/createSpacing.js

@@ -1,36 +0,0 @@
-import { createUnarySpacing } from '../spacing';
-
-// The different signatures imply different meaning for their arguments that can't be expressed structurally.
-// We express the difference with variable names.
-
-export default function createSpacing() {
-  var spacingInput = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
-  // Already transformed.
-  if (spacingInput.mui) {
-    return spacingInput;
-  }
-
-  // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
-  // Smaller components, such as icons, can align to a 4dp grid.
-  // https://m2.material.io/design/layout/understanding-layout.html
-  var transform = createUnarySpacing({
-    spacing: spacingInput
-  });
-  var spacing = function spacing() {
-    for (var _len = arguments.length, argsInput = new Array(_len), _key = 0; _key < _len; _key++) {
-      argsInput[_key] = arguments[_key];
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (!(argsInput.length <= 4)) {
-        console.error("MUI: Too many arguments provided, expected between 0 and 4, got ".concat(argsInput.length));
-      }
-    }
-    var args = argsInput.length === 0 ? [1] : argsInput;
-    return args.map(function (argument) {
-      var output = transform(argument);
-      return typeof output === 'number' ? "".concat(output, "px") : output;
-    }).join(' ');
-  };
-  spacing.mui = true;
-  return spacing;
-}

package/legacy/createTheme/createTheme.js

@@ -1,49 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import deepmerge from '@mui/utils/deepmerge';
-import createBreakpoints from './createBreakpoints';
-import shape from './shape';
-import createSpacing from './createSpacing';
-import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
-import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
-import applyStyles from './applyStyles';
-function createTheme() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _options$breakpoints = options.breakpoints,
-    breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
-    _options$palette = options.palette,
-    paletteInput = _options$palette === void 0 ? {} : _options$palette,
-    spacingInput = options.spacing,
-    _options$shape = options.shape,
-    shapeInput = _options$shape === void 0 ? {} : _options$shape,
-    other = _objectWithoutProperties(options, ["breakpoints", "palette", "spacing", "shape"]);
-  var breakpoints = createBreakpoints(breakpointsInput);
-  var spacing = createSpacing(spacingInput);
-  var muiTheme = deepmerge({
-    breakpoints: breakpoints,
-    direction: 'ltr',
-    components: {},
-    // Inject component definitions.
-    palette: _extends({
-      mode: 'light'
-    }, paletteInput),
-    spacing: spacing,
-    shape: _extends({}, shape, shapeInput)
-  }, other);
-  muiTheme.applyStyles = applyStyles;
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
-  muiTheme = args.reduce(function (acc, argument) {
-    return deepmerge(acc, argument);
-  }, muiTheme);
-  muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
-  muiTheme.unstable_sx = function sx(props) {
-    return styleFunctionSx({
-      sx: props,
-      theme: this
-    });
-  };
-  return muiTheme;
-}
-export default createTheme;

package/legacy/createTheme/index.js

@@ -1,3 +0,0 @@
-export { default } from './createTheme';
-export { default as private_createBreakpoints } from './createBreakpoints';
-export { default as unstable_applyStyles } from './applyStyles';

package/legacy/createTheme/shape.js

@@ -1,4 +0,0 @@
-var shape = {
-  borderRadius: 4
-};
-export default shape;

package/legacy/cssGrid/cssGrid.js

@@ -1,91 +0,0 @@
-import style from '../style';
-import compose from '../compose';
-import { createUnaryUnit, getValue } from '../spacing';
-import { handleBreakpoints } from '../breakpoints';
-import responsivePropType from '../responsivePropType';
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export var gap = function gap(props) {
-  if (props.gap !== undefined && props.gap !== null) {
-    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
-    var styleFromPropValue = function styleFromPropValue(propValue) {
-      return {
-        gap: getValue(transformer, propValue)
-      };
-    };
-    return handleBreakpoints(props, props.gap, styleFromPropValue);
-  }
-  return null;
-};
-gap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  gap: responsivePropType
-} : {};
-gap.filterProps = ['gap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export var columnGap = function columnGap(props) {
-  if (props.columnGap !== undefined && props.columnGap !== null) {
-    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
-    var styleFromPropValue = function styleFromPropValue(propValue) {
-      return {
-        columnGap: getValue(transformer, propValue)
-      };
-    };
-    return handleBreakpoints(props, props.columnGap, styleFromPropValue);
-  }
-  return null;
-};
-columnGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  columnGap: responsivePropType
-} : {};
-columnGap.filterProps = ['columnGap'];
-
-// false positive
-// eslint-disable-next-line react/function-component-definition
-export var rowGap = function rowGap(props) {
-  if (props.rowGap !== undefined && props.rowGap !== null) {
-    var transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
-    var styleFromPropValue = function styleFromPropValue(propValue) {
-      return {
-        rowGap: getValue(transformer, propValue)
-      };
-    };
-    return handleBreakpoints(props, props.rowGap, styleFromPropValue);
-  }
-  return null;
-};
-rowGap.propTypes = process.env.NODE_ENV !== 'production' ? {
-  rowGap: responsivePropType
-} : {};
-rowGap.filterProps = ['rowGap'];
-export var gridColumn = style({
-  prop: 'gridColumn'
-});
-export var gridRow = style({
-  prop: 'gridRow'
-});
-export var gridAutoFlow = style({
-  prop: 'gridAutoFlow'
-});
-export var gridAutoColumns = style({
-  prop: 'gridAutoColumns'
-});
-export var gridAutoRows = style({
-  prop: 'gridAutoRows'
-});
-export var gridTemplateColumns = style({
-  prop: 'gridTemplateColumns'
-});
-export var gridTemplateRows = style({
-  prop: 'gridTemplateRows'
-});
-export var gridTemplateAreas = style({
-  prop: 'gridTemplateAreas'
-});
-export var gridArea = style({
-  prop: 'gridArea'
-});
-var grid = compose(gap, columnGap, rowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);
-export default grid;

package/legacy/cssGrid/index.js

@@ -1,4 +0,0 @@
-'use client';
-
-export { default } from './cssGrid';
-export * from './cssGrid';