@mui/material 5.10.17 → 5.11.1

package/node/styles/createTransitions.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createTransitions;
+exports.easing = exports.duration = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+const _excluded = ["duration", "easing", "delay"];
+// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
+// to learn the context in which each easing should be used.
+const easing = {
+  // This is the most common easing curve.
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  // Objects enter the screen at full velocity from off-screen and
+  // slowly decelerate to a resting point.
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  // Objects leave the screen at full velocity. They do not decelerate when off-screen.
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  // The sharp curve is used by objects that may return to the screen at any time.
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
+};
+
+// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
+// to learn when use what timing
+exports.easing = easing;
+const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  // most basic recommended timing
+  standard: 300,
+  // this is to be used in complex animations
+  complex: 375,
+  // recommended when something is entering screen
+  enteringScreen: 225,
+  // recommended when something is leaving screen
+  leavingScreen: 195
+};
+exports.duration = duration;
+function formatMs(milliseconds) {
+  return `${Math.round(milliseconds)}ms`;
+}
+function getAutoHeightDuration(height) {
+  if (!height) {
+    return 0;
+  }
+  const constant = height / 36;
+
+  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+}
+function createTransitions(inputTransitions) {
+  const mergedEasing = (0, _extends2.default)({}, easing, inputTransitions.easing);
+  const mergedDuration = (0, _extends2.default)({}, duration, inputTransitions.duration);
+  const create = (props = ['all'], options = {}) => {
+    const {
+        duration: durationOption = mergedDuration.standard,
+        easing: easingOption = mergedEasing.easeInOut,
+        delay = 0
+      } = options,
+      other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+    if (process.env.NODE_ENV !== 'production') {
+      const isString = value => typeof value === 'string';
+      // IE11 support, replace with Number.isNaN
+      // eslint-disable-next-line no-restricted-globals
+      const isNumber = value => !isNaN(parseFloat(value));
+      if (!isString(props) && !Array.isArray(props)) {
+        console.error('MUI: Argument "props" must be a string or Array.');
+      }
+      if (!isNumber(durationOption) && !isString(durationOption)) {
+        console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
+      }
+      if (!isString(easingOption)) {
+        console.error('MUI: Argument "easing" must be a string.');
+      }
+      if (!isNumber(delay) && !isString(delay)) {
+        console.error('MUI: Argument "delay" must be a number or a string.');
+      }
+      if (Object.keys(other).length !== 0) {
+        console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
+      }
+    }
+    return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
+  };
+  return (0, _extends2.default)({
+    getAutoHeightDuration,
+    create
+  }, inputTransitions, {
+    easing: mergedEasing,
+    duration: mergedDuration
+  });
+}

package/node/styles/createTypography.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createTypography;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _utils = require("@mui/utils");
+const _excluded = ["fontFamily", "fontSize", "fontWeightLight", "fontWeightRegular", "fontWeightMedium", "fontWeightBold", "htmlFontSize", "allVariants", "pxToRem"];
+function round(value) {
+  return Math.round(value * 1e5) / 1e5;
+}
+const caseAllCaps = {
+  textTransform: 'uppercase'
+};
+const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
+
+/**
+ * @see @link{https://m2.material.io/design/typography/the-type-system.html}
+ * @see @link{https://m2.material.io/design/typography/understanding-typography.html}
+ */
+function createTypography(palette, typography) {
+  const _ref = typeof typography === 'function' ? typography(palette) : typography,
+    {
+      fontFamily = defaultFontFamily,
+      // The default font size of the Material Specification.
+      fontSize = 14,
+      // px
+      fontWeightLight = 300,
+      fontWeightRegular = 400,
+      fontWeightMedium = 500,
+      fontWeightBold = 700,
+      // Tell MUI what's the font-size on the html element.
+      // 16px is the default font-size used by browsers.
+      htmlFontSize = 16,
+      // Apply the CSS properties to all the variants.
+      allVariants,
+      pxToRem: pxToRem2
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof fontSize !== 'number') {
+      console.error('MUI: `fontSize` is required to be a number.');
+    }
+    if (typeof htmlFontSize !== 'number') {
+      console.error('MUI: `htmlFontSize` is required to be a number.');
+    }
+  }
+  const coef = fontSize / 14;
+  const pxToRem = pxToRem2 || (size => `${size / htmlFontSize * coef}rem`);
+  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => (0, _extends2.default)({
+    fontFamily,
+    fontWeight,
+    fontSize: pxToRem(size),
+    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
+    lineHeight
+  }, fontFamily === defaultFontFamily ? {
+    letterSpacing: `${round(letterSpacing / size)}em`
+  } : {}, casing, allVariants);
+  const variants = {
+    h1: buildVariant(fontWeightLight, 96, 1.167, -1.5),
+    h2: buildVariant(fontWeightLight, 60, 1.2, -0.5),
+    h3: buildVariant(fontWeightRegular, 48, 1.167, 0),
+    h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25),
+    h5: buildVariant(fontWeightRegular, 24, 1.334, 0),
+    h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15),
+    subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15),
+    subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1),
+    body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15),
+    body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15),
+    button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps),
+    caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4),
+    overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps)
+  };
+  return (0, _utils.deepmerge)((0, _extends2.default)({
+    htmlFontSize,
+    pxToRem,
+    fontFamily,
+    fontSize,
+    fontWeightLight,
+    fontWeightRegular,
+    fontWeightMedium,
+    fontWeightBold
+  }, variants), other, {
+    clone: false // No need to clone deep
+  });
+}

package/node/styles/cssUtils.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignProperty = alignProperty;
+exports.convertLength = convertLength;
+exports.fontGrid = fontGrid;
+exports.getUnit = getUnit;
+exports.isUnitless = isUnitless;
+exports.responsiveProperty = responsiveProperty;
+exports.toUnitless = toUnitless;
+function isUnitless(value) {
+  return String(parseFloat(value)).length === String(value).length;
+}
+
+// Ported from Compass
+// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
+// Emulate the sass function "unit"
+function getUnit(input) {
+  return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
+}
+
+// Emulate the sass function "unitless"
+function toUnitless(length) {
+  return parseFloat(length);
+}
+
+// Convert any CSS <length> or <percentage> value to any another.
+// From https://github.com/KyleAMathews/convert-css-length
+function convertLength(baseFontSize) {
+  return (length, toUnit) => {
+    const fromUnit = getUnit(length);
+
+    // Optimize for cases where `from` and `to` units are accidentally the same.
+    if (fromUnit === toUnit) {
+      return length;
+    }
+
+    // Convert input length to pixels.
+    let pxLength = toUnitless(length);
+    if (fromUnit !== 'px') {
+      if (fromUnit === 'em') {
+        pxLength = toUnitless(length) * toUnitless(baseFontSize);
+      } else if (fromUnit === 'rem') {
+        pxLength = toUnitless(length) * toUnitless(baseFontSize);
+      }
+    }
+
+    // Convert length in pixels to the output unit
+    let outputLength = pxLength;
+    if (toUnit !== 'px') {
+      if (toUnit === 'em') {
+        outputLength = pxLength / toUnitless(baseFontSize);
+      } else if (toUnit === 'rem') {
+        outputLength = pxLength / toUnitless(baseFontSize);
+      } else {
+        return length;
+      }
+    }
+    return parseFloat(outputLength.toFixed(5)) + toUnit;
+  };
+}
+function alignProperty({
+  size,
+  grid
+}) {
+  const sizeBelow = size - size % grid;
+  const sizeAbove = sizeBelow + grid;
+  return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;
+}
+
+// fontGrid finds a minimal grid (in rem) for the fontSize values so that the
+// lineHeight falls under a x pixels grid, 4px in the case of Material Design,
+// without changing the relative line height
+function fontGrid({
+  lineHeight,
+  pixels,
+  htmlFontSize
+}) {
+  return pixels / (lineHeight * htmlFontSize);
+}
+
+/**
+ * generate a responsive version of a given CSS property
+ * @example
+ * responsiveProperty({
+ *   cssProperty: 'fontSize',
+ *   min: 15,
+ *   max: 20,
+ *   unit: 'px',
+ *   breakpoints: [300, 600],
+ * })
+ *
+ * // this returns
+ *
+ * {
+ *   fontSize: '15px',
+ *   '@media (min-width:300px)': {
+ *     fontSize: '17.5px',
+ *   },
+ *   '@media (min-width:600px)': {
+ *     fontSize: '20px',
+ *   },
+ * }
+ * @param {Object} params
+ * @param {string} params.cssProperty - The CSS property to be made responsive
+ * @param {number} params.min - The smallest value of the CSS property
+ * @param {number} params.max - The largest value of the CSS property
+ * @param {string} [params.unit] - The unit to be used for the CSS property
+ * @param {Array.number} [params.breakpoints]  - An array of breakpoints
+ * @param {number} [params.alignStep] - Round scaled value to fall under this grid
+ * @returns {Object} responsive styles for {params.cssProperty}
+ */
+function responsiveProperty({
+  cssProperty,
+  min,
+  max,
+  unit = 'rem',
+  breakpoints = [600, 900, 1200],
+  transform = null
+}) {
+  const output = {
+    [cssProperty]: `${min}${unit}`
+  };
+  const factor = (max - min) / breakpoints[breakpoints.length - 1];
+  breakpoints.forEach(breakpoint => {
+    let value = min + factor * breakpoint;
+    if (transform !== null) {
+      value = transform(value);
+    }
+    output[`@media (min-width:${breakpoint}px)`] = {
+      [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`
+    };
+  });
+  return output;
+}

package/node/styles/defaultTheme.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+const defaultTheme = (0, _createTheme.default)();
+var _default = defaultTheme;
+exports.default = _default;

package/node/styles/excludeVariablesFromRoot.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
+var _default = excludeVariablesFromRoot;
+exports.default = _default;

package/node/styles/experimental_extendTheme.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createGetCssVar = void 0;
+exports.default = extendTheme;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+var _getOverlayAlpha = _interopRequireDefault(require("./getOverlayAlpha"));
+const _excluded = ["colorSchemes", "cssVarPrefix"],
+  _excluded2 = ["palette"];
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+  const overlay = (0, _getOverlayAlpha.default)(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+function setColor(obj, key, defaultValue) {
+  if (!obj[key] && defaultValue) {
+    obj[key] = defaultValue;
+  }
+}
+const silent = fn => {
+  try {
+    return fn();
+  } catch (error) {
+    // ignore error
+  }
+  return undefined;
+};
+const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
+exports.createGetCssVar = createGetCssVar;
+function extendTheme(options = {}, ...args) {
+  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
+  const {
+      colorSchemes: colorSchemesInput = {},
+      cssVarPrefix = 'mui'
+    } = options,
+    input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
+  const getCssVar = createGetCssVar(cssVarPrefix);
+  const _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
+      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
+    })),
+    {
+      palette: lightPalette
+    } = _createThemeWithoutVa,
+    muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
+  const {
+    palette: darkPalette
+  } = (0, _createTheme.default)({
+    palette: (0, _extends2.default)({
+      mode: 'dark'
+    }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
+  });
+  let theme = (0, _extends2.default)({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
+    colorSchemes: (0, _extends2.default)({}, colorSchemesInput, {
+      light: (0, _extends2.default)({}, colorSchemesInput.light, {
+        palette: lightPalette,
+        opacity: (0, _extends2.default)({
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
+        }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
+        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
+      }),
+      dark: (0, _extends2.default)({}, colorSchemesInput.dark, {
+        palette: darkPalette,
+        opacity: (0, _extends2.default)({
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
+        }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
+        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
+      })
+    })
+  });
+  Object.keys(theme.colorSchemes).forEach(key => {
+    const palette = theme.colorSchemes[key].palette;
+
+    // attach black & white channels to common node
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    }
+
+    // assign component variables
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', (0, _system.private_safeDarken)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.private_safeDarken)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.private_safeDarken)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.private_safeDarken)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, 'errorStandardBg', (0, _system.private_safeLighten)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeLighten)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeLighten)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.private_safeLighten)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.private_safeLighten)(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeLighten)(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeLighten)(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', (0, _system.private_safeLighten)(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', (0, _system.private_safeLighten)(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', (0, _system.private_safeLighten)(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
+      const snackbarContentBackground = (0, _system.private_safeEmphasize)(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.private_safeLighten)(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeLighten)(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeLighten)(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.private_safeLighten)(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.private_safeLighten)(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.private_safeLighten)(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', (0, _system.private_safeLighten)((0, _system.private_safeAlpha)(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', (0, _system.private_safeAlpha)(palette.grey[700], 0.92));
+    } else {
+      setColor(palette.Alert, 'errorColor', (0, _system.private_safeLighten)(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', (0, _system.private_safeLighten)(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', (0, _system.private_safeLighten)(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', (0, _system.private_safeLighten)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, 'errorStandardBg', (0, _system.private_safeDarken)(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', (0, _system.private_safeDarken)(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', (0, _system.private_safeDarken)(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', (0, _system.private_safeDarken)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', (0, _system.private_safeDarken)(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', (0, _system.private_safeDarken)(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', (0, _system.private_safeDarken)(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', (0, _system.private_safeDarken)(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', (0, _system.private_safeDarken)(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', (0, _system.private_safeDarken)(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', (0, _system.private_safeDarken)(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', (0, _system.private_safeDarken)(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', (0, _system.private_safeDarken)(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', (0, _system.private_safeDarken)(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', (0, _system.private_safeDarken)(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', (0, _system.private_safeDarken)(palette.warning.main, 0.5));
+      const snackbarContentBackground = (0, _system.private_safeEmphasize)(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _system.private_safeEmphasize)(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'primaryDisabledColor', (0, _system.private_safeDarken)(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', (0, _system.private_safeDarken)(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', (0, _system.private_safeDarken)(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', (0, _system.private_safeDarken)(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', (0, _system.private_safeDarken)(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', (0, _system.private_safeDarken)(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', (0, _system.private_safeDarken)((0, _system.private_safeAlpha)(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', (0, _system.private_safeAlpha)(palette.grey[700], 0.92));
+    }
+    setColor(palette.background, 'defaultChannel', (0, _system.private_safeColorChannel)(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.
+
+    setColor(palette.common, 'backgroundChannel', (0, _system.private_safeColorChannel)(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    setColor(palette.common, 'onBackgroundChannel', (0, _system.private_safeColorChannel)(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    setColor(palette, 'dividerChannel', (0, _system.private_safeColorChannel)(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+    Object.keys(palette).forEach(color => {
+      const colors = palette[color];
+
+      // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
+
+      if (colors && typeof colors === 'object') {
+        // Silent the error for custom palettes.
+        if (colors.main) {
+          setColor(palette[color], 'mainChannel', (0, _system.private_safeColorChannel)(colors.main));
+        }
+        if (colors.light) {
+          setColor(palette[color], 'lightChannel', (0, _system.private_safeColorChannel)(colors.light));
+        }
+        if (colors.dark) {
+          setColor(palette[color], 'darkChannel', (0, _system.private_safeColorChannel)(colors.dark));
+        }
+        if (colors.contrastText) {
+          setColor(palette[color], 'contrastTextChannel', (0, _system.private_safeColorChannel)(colors.contrastText));
+        }
+        if (color === 'text') {
+          // Text colors: text.primary, text.secondary
+          setColor(palette[color], 'primaryChannel', (0, _system.private_safeColorChannel)(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          setColor(palette[color], 'secondaryChannel', (0, _system.private_safeColorChannel)(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+        }
+        if (color === 'action') {
+          // Action colors: action.active, action.selected
+          if (colors.active) {
+            setColor(palette[color], 'activeChannel', (0, _system.private_safeColorChannel)(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          }
+          if (colors.selected) {
+            setColor(palette[color], 'selectedChannel', (0, _system.private_safeColorChannel)(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));
+          }
+        }
+      }
+    });
+  });
+  theme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), theme);
+  theme.unstable_sxConfig = (0, _extends2.default)({}, _system.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
+  theme.unstable_sx = function sx(props) {
+    return (0, _system.unstable_styleFunctionSx)({
+      sx: props,
+      theme: this
+    });
+  };
+  return theme;
+}

package/node/styles/getOverlayAlpha.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
+const getOverlayAlpha = elevation => {
+  let alphaValue;
+  if (elevation < 1) {
+    alphaValue = 5.11916 * elevation ** 2;
+  } else {
+    alphaValue = 4.5 * Math.log(elevation + 1) + 2;
+  }
+  return (alphaValue / 100).toFixed(2);
+};
+var _default = getOverlayAlpha;
+exports.default = _default;