@mui/material 7.0.0 → 7.0.2

package/modern/package.json

@@ -1 +0,0 @@
-{"type":"module","sideEffects":false}

package/modern/styles/ThemeProvider.js

@@ -1,40 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import ThemeProviderNoVars from "./ThemeProviderNoVars.js";
-import { CssVarsProvider } from "./ThemeProviderWithVars.js";
-import THEME_ID from "./identifier.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProvider({
-  theme,
-  ...props
-}) {
-  if (typeof theme === 'function') {
-    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
-      ...props
-    });
-  }
-  const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
-  if (!('colorSchemes' in muiTheme)) {
-    if (!('vars' in muiTheme)) {
-      // For non-CSS variables themes, set `vars` to null to prevent theme inheritance from the upper theme.
-      // The example use case is the docs demo that uses ThemeProvider to customize the theme while the upper theme is using CSS variables.
-      return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-        theme: {
-          ...theme,
-          vars: null
-        },
-        ...props
-      });
-    }
-    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
-      theme: theme,
-      ...props
-    });
-  }
-  return /*#__PURE__*/_jsx(CssVarsProvider, {
-    theme: theme,
-    ...props
-  });
-}

package/modern/styles/ThemeProviderNoVars.js

@@ -1,17 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ThemeProvider as SystemThemeProvider } from '@mui/system';
-import THEME_ID from "./identifier.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProviderNoVars({
-  theme: themeInput,
-  ...props
-}) {
-  const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
-  return /*#__PURE__*/_jsx(SystemThemeProvider, {
-    ...props,
-    themeId: scopedTheme ? THEME_ID : undefined,
-    theme: scopedTheme || themeInput
-  });
-}

package/modern/styles/ThemeProviderWithVars.js

@@ -1,91 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import styleFunctionSx from '@mui/system/styleFunctionSx';
-import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
-import createTheme from "./createTheme.js";
-import createTypography from "./createTypography.js";
-import THEME_ID from "./identifier.js";
-import { defaultConfig } from "../InitColorSchemeScript/InitColorSchemeScript.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  CssVarsProvider: InternalCssVarsProvider,
-  useColorScheme,
-  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
-} = createCssVarsProvider({
-  themeId: THEME_ID,
-  // @ts-ignore ignore module augmentation tests
-  theme: () => createTheme({
-    cssVariables: true
-  }),
-  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
-  modeStorageKey: defaultConfig.modeStorageKey,
-  defaultColorScheme: {
-    light: defaultConfig.defaultLightColorScheme,
-    dark: defaultConfig.defaultDarkColorScheme
-  },
-  resolveTheme: theme => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography)
-    };
-    newTheme.unstable_sx = function sx(props) {
-      return styleFunctionSx({
-        sx: props,
-        theme: this
-      });
-    };
-    return newTheme;
-  }
-});
-let warnedOnce = false;
-
-// TODO: remove in v7
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function Experimental_CssVarsProvider(props) {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce) {
-      console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
-      warnedOnce = true;
-    }
-  }
-  return /*#__PURE__*/_jsx(InternalCssVarsProvider, {
-    ...props
-  });
-}
-let warnedInitScriptOnce = false;
-
-// TODO: remove in v7
-const getInitColorSchemeScript = params => {
-  if (!warnedInitScriptOnce) {
-    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
-    warnedInitScriptOnce = true;
-  }
-  return deprecatedGetInitColorSchemeScript(params);
-};
-
-/**
- * TODO: remove this export in v7
- * @deprecated
- * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
- *
- * You should use `ThemeProvider` and `createTheme()` instead:
- *
- * ```diff
- * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
- * + import { ThemeProvider, createTheme } from '@mui/material/styles';
- *
- * - const theme = extendTheme();
- * + const theme = createTheme({
- * +   cssVariables: true,
- * +   colorSchemes: { light: true, dark: true },
- * + });
- *
- * - <CssVarsProvider theme={theme}>
- * + <ThemeProvider theme={theme}>
- * ```
- *
- * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
- */
-export const CssVarsProvider = InternalCssVarsProvider;
-export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/modern/styles/adaptV4Theme.js

@@ -1,83 +0,0 @@
-'use client';
-
-import { createBreakpoints, createSpacing } from '@mui/system';
-export default function adaptV4Theme(inputTheme) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
-  }
-  const {
-    defaultProps = {},
-    mixins = {},
-    overrides = {},
-    palette = {},
-    props = {},
-    styleOverrides = {},
-    ...other
-  } = inputTheme;
-  const theme = {
-    ...other,
-    components: {}
-  };
-
-  // default props
-  Object.keys(defaultProps).forEach(component => {
-    const componentValue = theme.components[component] || {};
-    componentValue.defaultProps = defaultProps[component];
-    theme.components[component] = componentValue;
-  });
-  Object.keys(props).forEach(component => {
-    const componentValue = theme.components[component] || {};
-    componentValue.defaultProps = props[component];
-    theme.components[component] = componentValue;
-  });
-
-  // CSS overrides
-  Object.keys(styleOverrides).forEach(component => {
-    const componentValue = theme.components[component] || {};
-    componentValue.styleOverrides = styleOverrides[component];
-    theme.components[component] = componentValue;
-  });
-  Object.keys(overrides).forEach(component => {
-    const componentValue = theme.components[component] || {};
-    componentValue.styleOverrides = overrides[component];
-    theme.components[component] = componentValue;
-  });
-
-  // theme.spacing
-  theme.spacing = createSpacing(inputTheme.spacing);
-
-  // theme.mixins.gutters
-  const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
-  const spacing = theme.spacing;
-  theme.mixins = {
-    gutters: (styles = {}) => {
-      return {
-        paddingLeft: spacing(2),
-        paddingRight: spacing(2),
-        ...styles,
-        [breakpoints.up('sm')]: {
-          paddingLeft: spacing(3),
-          paddingRight: spacing(3),
-          ...styles[breakpoints.up('sm')]
-        }
-      };
-    },
-    ...mixins
-  };
-  const {
-    type: typeInput,
-    mode: modeInput,
-    ...paletteRest
-  } = palette;
-  const finalMode = modeInput || typeInput || 'light';
-  theme.palette = {
-    // theme.palette.text.hint
-    text: {
-      hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
-    },
-    mode: finalMode,
-    type: finalMode,
-    ...paletteRest
-  };
-  return theme;
-}

package/modern/styles/components.js

@@ -1 +0,0 @@
-export {};

package/modern/styles/createColorScheme.js

@@ -1,41 +0,0 @@
-import createPalette from "./createPalette.js";
-import getOverlayAlpha from "./getOverlayAlpha.js";
-const defaultDarkOverlays = [...Array(25)].map((_, index) => {
-  if (index === 0) {
-    return 'none';
-  }
-  const overlay = getOverlayAlpha(index);
-  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
-});
-export function getOpacity(mode) {
-  return {
-    inputPlaceholder: mode === 'dark' ? 0.5 : 0.42,
-    inputUnderline: mode === 'dark' ? 0.7 : 0.42,
-    switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12,
-    switchTrack: mode === 'dark' ? 0.3 : 0.38
-  };
-}
-export function getOverlays(mode) {
-  return mode === 'dark' ? defaultDarkOverlays : [];
-}
-export default function createColorScheme(options) {
-  const {
-    palette: paletteInput = {
-      mode: 'light'
-    },
-    // need to cast to avoid module augmentation test
-    opacity,
-    overlays,
-    ...rest
-  } = options;
-  const palette = createPalette(paletteInput);
-  return {
-    palette,
-    opacity: {
-      ...getOpacity(palette.mode),
-      ...opacity
-    },
-    overlays: overlays || getOverlays(palette.mode),
-    ...rest
-  };
-}

package/modern/styles/createGetSelector.js

@@ -1,60 +0,0 @@
-import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
-export default theme => (colorScheme, css) => {
-  const root = theme.rootSelector || ':root';
-  const selector = theme.colorSchemeSelector;
-  let rule = selector;
-  if (selector === 'class') {
-    rule = '.%s';
-  }
-  if (selector === 'data') {
-    rule = '[data-%s]';
-  }
-  if (selector?.startsWith('data-') && !selector.includes('%s')) {
-    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
-    rule = `[${selector}="%s"]`;
-  }
-  if (theme.defaultColorScheme === colorScheme) {
-    if (colorScheme === 'dark') {
-      const excludedVariables = {};
-      excludeVariablesFromRoot(theme.cssVarPrefix).forEach(cssVar => {
-        excludedVariables[cssVar] = css[cssVar];
-        delete css[cssVar];
-      });
-      if (rule === 'media') {
-        return {
-          [root]: css,
-          [`@media (prefers-color-scheme: dark)`]: {
-            [root]: excludedVariables
-          }
-        };
-      }
-      if (rule) {
-        return {
-          [rule.replace('%s', colorScheme)]: excludedVariables,
-          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
-        };
-      }
-      return {
-        [root]: {
-          ...css,
-          ...excludedVariables
-        }
-      };
-    }
-    if (rule && rule !== 'media') {
-      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
-    }
-  } else if (colorScheme) {
-    if (rule === 'media') {
-      return {
-        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
-          [root]: css
-        }
-      };
-    }
-    if (rule) {
-      return rule.replace('%s', String(colorScheme));
-    }
-  }
-  return root;
-};

package/modern/styles/createMixins.js

@@ -1,16 +0,0 @@
-export default function createMixins(breakpoints, mixins) {
-  return {
-    toolbar: {
-      minHeight: 56,
-      [breakpoints.up('xs')]: {
-        '@media (orientation: landscape)': {
-          minHeight: 48
-        }
-      },
-      [breakpoints.up('sm')]: {
-        minHeight: 64
-      }
-    },
-    ...mixins
-  };
-}

package/modern/styles/createMuiStrictModeTheme.js

@@ -1,7 +0,0 @@
-import deepmerge from '@mui/utils/deepmerge';
-import createTheme from "./createTheme.js";
-export default function createMuiStrictModeTheme(options, ...args) {
-  return createTheme(deepmerge({
-    unstable_strictMode: true
-  }, options), ...args);
-}

package/modern/styles/createPalette.js

@@ -1,302 +0,0 @@
-import _formatErrorMessage from "@mui/utils/formatMuiErrorMessage";
-import deepmerge from '@mui/utils/deepmerge';
-import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
-import common from "../colors/common.js";
-import grey from "../colors/grey.js";
-import purple from "../colors/purple.js";
-import red from "../colors/red.js";
-import orange from "../colors/orange.js";
-import blue from "../colors/blue.js";
-import lightBlue from "../colors/lightBlue.js";
-import green from "../colors/green.js";
-function getLight() {
-  return {
-    // The colors used to style the text.
-    text: {
-      // The most important text.
-      primary: 'rgba(0, 0, 0, 0.87)',
-      // Secondary text.
-      secondary: 'rgba(0, 0, 0, 0.6)',
-      // Disabled text have even lower visual prominence.
-      disabled: 'rgba(0, 0, 0, 0.38)'
-    },
-    // The color used to divide different elements.
-    divider: 'rgba(0, 0, 0, 0.12)',
-    // The background colors used to style the surfaces.
-    // Consistency between these values is important.
-    background: {
-      paper: common.white,
-      default: common.white
-    },
-    // The colors used to style the action elements.
-    action: {
-      // The color of an active action like an icon button.
-      active: 'rgba(0, 0, 0, 0.54)',
-      // The color of an hovered action.
-      hover: 'rgba(0, 0, 0, 0.04)',
-      hoverOpacity: 0.04,
-      // The color of a selected action.
-      selected: 'rgba(0, 0, 0, 0.08)',
-      selectedOpacity: 0.08,
-      // The color of a disabled action.
-      disabled: 'rgba(0, 0, 0, 0.26)',
-      // The background color of a disabled action.
-      disabledBackground: 'rgba(0, 0, 0, 0.12)',
-      disabledOpacity: 0.38,
-      focus: 'rgba(0, 0, 0, 0.12)',
-      focusOpacity: 0.12,
-      activatedOpacity: 0.12
-    }
-  };
-}
-export const light = getLight();
-function getDark() {
-  return {
-    text: {
-      primary: common.white,
-      secondary: 'rgba(255, 255, 255, 0.7)',
-      disabled: 'rgba(255, 255, 255, 0.5)',
-      icon: 'rgba(255, 255, 255, 0.5)'
-    },
-    divider: 'rgba(255, 255, 255, 0.12)',
-    background: {
-      paper: '#121212',
-      default: '#121212'
-    },
-    action: {
-      active: common.white,
-      hover: 'rgba(255, 255, 255, 0.08)',
-      hoverOpacity: 0.08,
-      selected: 'rgba(255, 255, 255, 0.16)',
-      selectedOpacity: 0.16,
-      disabled: 'rgba(255, 255, 255, 0.3)',
-      disabledBackground: 'rgba(255, 255, 255, 0.12)',
-      disabledOpacity: 0.38,
-      focus: 'rgba(255, 255, 255, 0.12)',
-      focusOpacity: 0.12,
-      activatedOpacity: 0.24
-    }
-  };
-}
-export const dark = getDark();
-function addLightOrDark(intent, direction, shade, tonalOffset) {
-  const tonalOffsetLight = tonalOffset.light || tonalOffset;
-  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
-  if (!intent[direction]) {
-    if (intent.hasOwnProperty(shade)) {
-      intent[direction] = intent[shade];
-    } else if (direction === 'light') {
-      intent.light = lighten(intent.main, tonalOffsetLight);
-    } else if (direction === 'dark') {
-      intent.dark = darken(intent.main, tonalOffsetDark);
-    }
-  }
-}
-function getDefaultPrimary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: blue[200],
-      light: blue[50],
-      dark: blue[400]
-    };
-  }
-  return {
-    main: blue[700],
-    light: blue[400],
-    dark: blue[800]
-  };
-}
-function getDefaultSecondary(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: purple[200],
-      light: purple[50],
-      dark: purple[400]
-    };
-  }
-  return {
-    main: purple[500],
-    light: purple[300],
-    dark: purple[700]
-  };
-}
-function getDefaultError(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: red[500],
-      light: red[300],
-      dark: red[700]
-    };
-  }
-  return {
-    main: red[700],
-    light: red[400],
-    dark: red[800]
-  };
-}
-function getDefaultInfo(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: lightBlue[400],
-      light: lightBlue[300],
-      dark: lightBlue[700]
-    };
-  }
-  return {
-    main: lightBlue[700],
-    light: lightBlue[500],
-    dark: lightBlue[900]
-  };
-}
-function getDefaultSuccess(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: green[400],
-      light: green[300],
-      dark: green[700]
-    };
-  }
-  return {
-    main: green[800],
-    light: green[500],
-    dark: green[900]
-  };
-}
-function getDefaultWarning(mode = 'light') {
-  if (mode === 'dark') {
-    return {
-      main: orange[400],
-      light: orange[300],
-      dark: orange[700]
-    };
-  }
-  return {
-    main: '#ed6c02',
-    // closest to orange[800] that pass 3:1.
-    light: orange[500],
-    dark: orange[900]
-  };
-}
-export default function createPalette(palette) {
-  const {
-    mode = 'light',
-    contrastThreshold = 3,
-    tonalOffset = 0.2,
-    ...other
-  } = palette;
-  const primary = palette.primary || getDefaultPrimary(mode);
-  const secondary = palette.secondary || getDefaultSecondary(mode);
-  const error = palette.error || getDefaultError(mode);
-  const info = palette.info || getDefaultInfo(mode);
-  const success = palette.success || getDefaultSuccess(mode);
-  const warning = palette.warning || getDefaultWarning(mode);
-
-  // Use the same logic as
-  // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
-  // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-  function getContrastText(background) {
-    const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
-    if (process.env.NODE_ENV !== 'production') {
-      const contrast = getContrastRatio(background, contrastText);
-      if (contrast < 3) {
-        console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
-      }
-    }
-    return contrastText;
-  }
-  const augmentColor = ({
-    color,
-    name,
-    mainShade = 500,
-    lightShade = 300,
-    darkShade = 700
-  }) => {
-    color = {
-      ...color
-    };
-    if (!color.main && color[mainShade]) {
-      color.main = color[mainShade];
-    }
-    if (!color.hasOwnProperty('main')) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : _formatErrorMessage(11, name ? ` (${name})` : '', mainShade));
-    }
-    if (typeof color.main !== 'string') {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : _formatErrorMessage(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
-    }
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
-    if (!color.contrastText) {
-      color.contrastText = getContrastText(color.main);
-    }
-    return color;
-  };
-  let modeHydrated;
-  if (mode === 'light') {
-    modeHydrated = getLight();
-  } else if (mode === 'dark') {
-    modeHydrated = getDark();
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    if (!modeHydrated) {
-      console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
-    }
-  }
-  const paletteOutput = deepmerge({
-    // A collection of common colors.
-    common: {
-      ...common
-    },
-    // prevent mutable object.
-    // The palette mode, can be light or dark.
-    mode,
-    // The colors used to represent primary interface elements for a user.
-    primary: augmentColor({
-      color: primary,
-      name: 'primary'
-    }),
-    // The colors used to represent secondary interface elements for a user.
-    secondary: augmentColor({
-      color: secondary,
-      name: 'secondary',
-      mainShade: 'A400',
-      lightShade: 'A200',
-      darkShade: 'A700'
-    }),
-    // The colors used to represent interface elements that the user should be made aware of.
-    error: augmentColor({
-      color: error,
-      name: 'error'
-    }),
-    // The colors used to represent potentially dangerous actions or important messages.
-    warning: augmentColor({
-      color: warning,
-      name: 'warning'
-    }),
-    // The colors used to present information to the user that is neutral and not necessarily important.
-    info: augmentColor({
-      color: info,
-      name: 'info'
-    }),
-    // The colors used to indicate the successful completion of an action that user triggered.
-    success: augmentColor({
-      color: success,
-      name: 'success'
-    }),
-    // The grey colors.
-    grey,
-    // Used by `getContrastText()` to maximize the contrast between
-    // the background and the text.
-    contrastThreshold,
-    // Takes a background color and returns the text color that maximizes the contrast.
-    getContrastText,
-    // Generate a rich color object.
-    augmentColor,
-    // Used by the functions below to shift a color's luminance by approximately
-    // two indexes within its tonal palette.
-    // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset,
-    // The light and dark mode object.
-    ...modeHydrated
-  }, other);
-  return paletteOutput;
-}

package/modern/styles/createStyles.js

@@ -1,10 +0,0 @@
-let warnedOnce = false;
-
-// To remove in v6
-export default function createStyles(styles) {
-  if (!warnedOnce) {
-    console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
-    warnedOnce = true;
-  }
-  return styles;
-}