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

package/legacy/cssVars/useCurrentColorScheme.js

@@ -1,237 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
-export function getSystemMode(mode) {
-  if (typeof window !== 'undefined' && mode === 'system') {
-    var mql = window.matchMedia('(prefers-color-scheme: dark)');
-    if (mql.matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-  return undefined;
-}
-function processState(state, callback) {
-  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
-    return callback('light');
-  }
-  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
-    return callback('dark');
-  }
-  return undefined;
-}
-export function getColorScheme(state) {
-  return processState(state, function (mode) {
-    if (mode === 'light') {
-      return state.lightColorScheme;
-    }
-    if (mode === 'dark') {
-      return state.darkColorScheme;
-    }
-    return undefined;
-  });
-}
-function initializeValue(key, defaultValue) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  var value;
-  try {
-    value = localStorage.getItem(key) || undefined;
-    if (!value) {
-      // the first time that user enters the site.
-      localStorage.setItem(key, defaultValue);
-    }
-  } catch (e) {
-    // Unsupported
-  }
-  return value || defaultValue;
-}
-export default function useCurrentColorScheme(options) {
-  var _options$defaultMode = options.defaultMode,
-    defaultMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
-    defaultLightColorScheme = options.defaultLightColorScheme,
-    defaultDarkColorScheme = options.defaultDarkColorScheme,
-    _options$supportedCol = options.supportedColorSchemes,
-    supportedColorSchemes = _options$supportedCol === void 0 ? [] : _options$supportedCol,
-    _options$modeStorageK = options.modeStorageKey,
-    modeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
-    _options$colorSchemeS = options.colorSchemeStorageKey,
-    colorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
-    _options$storageWindo = options.storageWindow,
-    storageWindow = _options$storageWindo === void 0 ? typeof window === 'undefined' ? undefined : window : _options$storageWindo;
-  var joinedColorSchemes = supportedColorSchemes.join(',');
-  var _React$useState = React.useState(function () {
-      var initialMode = initializeValue(modeStorageKey, defaultMode);
-      var lightColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
-      var darkColorScheme = initializeValue("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
-      return {
-        mode: initialMode,
-        systemMode: getSystemMode(initialMode),
-        lightColorScheme: lightColorScheme,
-        darkColorScheme: darkColorScheme
-      };
-    }),
-    state = _React$useState[0],
-    setState = _React$useState[1];
-  var colorScheme = getColorScheme(state);
-  var setMode = React.useCallback(function (mode) {
-    setState(function (currentState) {
-      if (mode === currentState.mode) {
-        // do nothing if mode does not change
-        return currentState;
-      }
-      var newMode = mode != null ? mode : defaultMode;
-      try {
-        localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
-        // Unsupported
-      }
-      return _extends({}, currentState, {
-        mode: newMode,
-        systemMode: getSystemMode(newMode)
-      });
-    });
-  }, [modeStorageKey, defaultMode]);
-  var setColorScheme = React.useCallback(function (value) {
-    if (!value) {
-      setState(function (currentState) {
-        try {
-          localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), defaultLightColorScheme);
-          localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), defaultDarkColorScheme);
-        } catch (e) {
-          // Unsupported
-        }
-        return _extends({}, currentState, {
-          lightColorScheme: defaultLightColorScheme,
-          darkColorScheme: defaultDarkColorScheme
-        });
-      });
-    } else if (typeof value === 'string') {
-      if (value && !joinedColorSchemes.includes(value)) {
-        console.error("`".concat(value, "` does not exist in `theme.colorSchemes`."));
-      } else {
-        setState(function (currentState) {
-          var newState = _extends({}, currentState);
-          processState(currentState, function (mode) {
-            try {
-              localStorage.setItem("".concat(colorSchemeStorageKey, "-").concat(mode), value);
-            } catch (e) {
-              // Unsupported
-            }
-            if (mode === 'light') {
-              newState.lightColorScheme = value;
-            }
-            if (mode === 'dark') {
-              newState.darkColorScheme = value;
-            }
-          });
-          return newState;
-        });
-      }
-    } else {
-      setState(function (currentState) {
-        var newState = _extends({}, currentState);
-        var newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
-        var newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
-        if (newLightColorScheme) {
-          if (!joinedColorSchemes.includes(newLightColorScheme)) {
-            console.error("`".concat(newLightColorScheme, "` does not exist in `theme.colorSchemes`."));
-          } else {
-            newState.lightColorScheme = newLightColorScheme;
-            try {
-              localStorage.setItem("".concat(colorSchemeStorageKey, "-light"), newLightColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
-          }
-        }
-        if (newDarkColorScheme) {
-          if (!joinedColorSchemes.includes(newDarkColorScheme)) {
-            console.error("`".concat(newDarkColorScheme, "` does not exist in `theme.colorSchemes`."));
-          } else {
-            newState.darkColorScheme = newDarkColorScheme;
-            try {
-              localStorage.setItem("".concat(colorSchemeStorageKey, "-dark"), newDarkColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
-          }
-        }
-        return newState;
-      });
-    }
-  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
-  var handleMediaQuery = React.useCallback(function (event) {
-    if (state.mode === 'system') {
-      setState(function (currentState) {
-        var systemMode = event != null && event.matches ? 'dark' : 'light';
-
-        // Early exit, nothing changed.
-        if (currentState.systemMode === systemMode) {
-          return currentState;
-        }
-        return _extends({}, currentState, {
-          systemMode: systemMode
-        });
-      });
-    }
-  }, [state.mode]);
-
-  // Ref hack to avoid adding handleMediaQuery as a dep
-  var mediaListener = React.useRef(handleMediaQuery);
-  mediaListener.current = handleMediaQuery;
-  React.useEffect(function () {
-    var handler = function handler() {
-      return mediaListener.current.apply(mediaListener, arguments);
-    };
-
-    // Always listen to System preference
-    var media = window.matchMedia('(prefers-color-scheme: dark)');
-
-    // Intentionally use deprecated listener methods to support iOS & old browsers
-    media.addListener(handler);
-    handler(media);
-    return function () {
-      media.removeListener(handler);
-    };
-  }, []);
-
-  // Handle when localStorage has changed
-  React.useEffect(function () {
-    if (storageWindow) {
-      var handleStorage = function handleStorage(event) {
-        var value = event.newValue;
-        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-          // If the key is deleted, value will be null then reset color scheme to the default one.
-          if (event.key.endsWith('light')) {
-            setColorScheme({
-              light: value
-            });
-          }
-          if (event.key.endsWith('dark')) {
-            setColorScheme({
-              dark: value
-            });
-          }
-        }
-        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
-          setMode(value || defaultMode);
-        }
-      };
-      // For syncing color-scheme changes between iframes
-      storageWindow.addEventListener('storage', handleStorage);
-      return function () {
-        storageWindow.removeEventListener('storage', handleStorage);
-      };
-    }
-    return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
-  return _extends({}, state, {
-    colorScheme: colorScheme,
-    setMode: setMode,
-    setColorScheme: setColorScheme
-  });
-}

package/legacy/display/display.js

@@ -1,29 +0,0 @@
-import style from '../style';
-import compose from '../compose';
-export var displayPrint = style({
-  prop: 'displayPrint',
-  cssProperty: false,
-  transform: function transform(value) {
-    return {
-      '@media print': {
-        display: value
-      }
-    };
-  }
-});
-export var displayRaw = style({
-  prop: 'display'
-});
-export var overflow = style({
-  prop: 'overflow'
-});
-export var textOverflow = style({
-  prop: 'textOverflow'
-});
-export var visibility = style({
-  prop: 'visibility'
-});
-export var whiteSpace = style({
-  prop: 'whiteSpace'
-});
-export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

package/legacy/display/index.js

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

package/legacy/flexbox/flexbox.js

@@ -1,43 +0,0 @@
-import style from '../style';
-import compose from '../compose';
-export var flexBasis = style({
-  prop: 'flexBasis'
-});
-export var flexDirection = style({
-  prop: 'flexDirection'
-});
-export var flexWrap = style({
-  prop: 'flexWrap'
-});
-export var justifyContent = style({
-  prop: 'justifyContent'
-});
-export var alignItems = style({
-  prop: 'alignItems'
-});
-export var alignContent = style({
-  prop: 'alignContent'
-});
-export var order = style({
-  prop: 'order'
-});
-export var flex = style({
-  prop: 'flex'
-});
-export var flexGrow = style({
-  prop: 'flexGrow'
-});
-export var flexShrink = style({
-  prop: 'flexShrink'
-});
-export var alignSelf = style({
-  prop: 'alignSelf'
-});
-export var justifyItems = style({
-  prop: 'justifyItems'
-});
-export var justifySelf = style({
-  prop: 'justifySelf'
-});
-var flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);
-export default flexbox;

package/legacy/flexbox/index.js

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

package/legacy/getThemeValue/getThemeValue.js

@@ -1,47 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import borders from '../borders';
-import display from '../display';
-import flexbox from '../flexbox';
-import grid from '../cssGrid';
-import positions from '../positions';
-import palette from '../palette';
-import shadows from '../shadows';
-import sizing from '../sizing';
-import spacing from '../spacing';
-import typography from '../typography';
-var 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 var styleFunctionMapping = {
-  borders: borders,
-  display: display,
-  flexbox: flexbox,
-  grid: grid,
-  positions: positions,
-  palette: palette,
-  shadows: shadows,
-  sizing: sizing,
-  spacing: spacing,
-  typography: typography
-};
-export var propToStyleFunction = Object.keys(filterPropsMapping).reduce(function (acc, styleFnName) {
-  filterPropsMapping[styleFnName].forEach(function (propName) {
-    acc[propName] = styleFunctionMapping[styleFnName];
-  });
-  return acc;
-}, {});
-function getThemeValue(prop, value, theme) {
-  var inputProps = _defineProperty(_defineProperty({}, prop, value), "theme", theme);
-  var styleFunction = propToStyleFunction[prop];
-  return styleFunction ? styleFunction(inputProps) : _defineProperty({}, prop, value);
-}
-export default getThemeValue;

package/legacy/getThemeValue/index.js

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

package/legacy/index.js

@@ -1,72 +0,0 @@
-/**
- * @mui/system v6.0.0-alpha.0
- *
- * @license MIT
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-export { css, keyframes, StyledEngineProvider } from '@mui/styled-engine';
-export { default as GlobalStyles } from './GlobalStyles';
-export { default as borders } from './borders';
-export * from './borders';
-export { default as breakpoints } from './breakpoints';
-export { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues as unstable_resolveBreakpointValues } from './breakpoints';
-export { default as compose } from './compose';
-export { default as display } from './display';
-export { default as flexbox } from './flexbox';
-export * from './flexbox';
-export { default as grid } from './cssGrid';
-export * from './cssGrid';
-export { default as palette } from './palette';
-export * from './palette';
-export { default as positions } from './positions';
-export * from './positions';
-export { default as shadows } from './shadows';
-export { default as sizing } from './sizing';
-export * from './sizing';
-export { default as spacing } from './spacing';
-export * from './spacing';
-export { default as style, getPath, getStyleValue } from './style';
-export { default as typography } from './typography';
-export * from './typography';
-export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from './styleFunctionSx';
-// 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(20));
-}
-export { default as unstable_getThemeValue } from './getThemeValue';
-export { default as Box } from './Box';
-export { default as createBox } from './createBox';
-export { default as createStyled } from './createStyled';
-export * from './createStyled';
-export { default as styled } from './styled';
-export { default as createTheme } from './createTheme';
-export { default as createBreakpoints } from './createTheme/createBreakpoints';
-export { default as createSpacing } from './createTheme/createSpacing';
-export { default as shape } from './createTheme/shape';
-export { default as useThemeProps, getThemeProps } from './useThemeProps';
-export { default as useTheme } from './useTheme';
-export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
-export { default as useMediaQuery } from './useMediaQuery';
-export * from './colorManipulator';
-export { default as ThemeProvider } from './ThemeProvider';
-export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
-export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar';
-export { default as unstable_cssVarsParser } from './cssVars/cssVarsParser';
-export { default as unstable_prepareCssVars } from './cssVars/prepareCssVars';
-export { default as unstable_createCssVarsTheme } from './cssVars/createCssVarsTheme';
-export { default as responsivePropType } from './responsivePropType';
-export { default as RtlProvider } from './RtlProvider';
-export * from './RtlProvider';
-
-/** ----------------- */
-/** Layout components */
-export { default as createContainer } from './Container/createContainer';
-export { default as Container } from './Container';
-export * from './Container';
-export { default as Unstable_Grid } from './Unstable_Grid/Grid';
-export * from './Unstable_Grid';
-export { default as Stack } from './Stack/Stack';
-export * from './Stack';

package/legacy/memoize/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './memoize';

package/legacy/memoize/memoize.js

@@ -1,9 +0,0 @@
-export default function memoize(fn) {
-  var cache = {};
-  return function (arg) {
-    if (cache[arg] === undefined) {
-      cache[arg] = fn(arg);
-    }
-    return cache[arg];
-  };
-}

package/legacy/merge/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './merge';

package/legacy/merge/merge.js

@@ -1,10 +0,0 @@
-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/legacy/palette/index.js

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

package/legacy/palette/palette.js

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

package/legacy/positions/index.js

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

package/legacy/positions/positions.js

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

package/legacy/propsToClassKey/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './propsToClassKey';

package/legacy/propsToClassKey/propsToClassKey.js

@@ -1,24 +0,0 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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) {
-  var variant = props.variant,
-    other = _objectWithoutProperties(props, ["variant"]);
-  var classKey = variant || '';
-  Object.keys(other).sort().forEach(function (key) {
-    if (key === 'color') {
-      classKey += isEmpty(classKey) ? props[key] : capitalize(props[key]);
-    } else {
-      classKey += "".concat(isEmpty(classKey) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
-    }
-  });
-  return classKey;
-}

package/legacy/responsivePropType/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './responsivePropType';

package/legacy/responsivePropType/responsivePropType.js

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

package/legacy/shadows/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './shadows';

package/legacy/shadows/shadows.js

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

package/legacy/sizing/index.js

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

package/legacy/sizing/sizing.js

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

package/legacy/spacing/index.js

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