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

package/legacy/colorManipulator/colorManipulator.js

@@ -1,356 +0,0 @@
-import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-/* eslint-disable @typescript-eslint/naming-convention */
-import clamp from '@mui/utils/clamp';
-/**
- * Returns a number whose value is limited to the given range.
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
- */
-function clampWrapper(value) {
-  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  if (process.env.NODE_ENV !== 'production') {
-    if (value < min || value > max) {
-      console.error("MUI: The value provided ".concat(value, " is out of range [").concat(min, ", ").concat(max, "]."));
-    }
-  }
-  return clamp(value, min, max);
-}
-
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
- */
-export function hexToRgb(color) {
-  color = color.slice(1);
-  var re = new RegExp(".{1,".concat(color.length >= 6 ? 2 : 1, "}"), 'g');
-  var colors = color.match(re);
-  if (colors && colors[0].length === 1) {
-    colors = colors.map(function (n) {
-      return n + n;
-    });
-  }
-  return colors ? "rgb".concat(colors.length === 4 ? 'a' : '', "(").concat(colors.map(function (n, index) {
-    return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
-  }).join(', '), ")") : '';
-}
-function intToHex(int) {
-  var hex = int.toString(16);
-  return hex.length === 1 ? "0".concat(hex) : hex;
-}
-
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @returns {object} - A MUI color object: {type: string, values: number[]}
- */
-export function decomposeColor(color) {
-  // Idempotent
-  if (color.type) {
-    return color;
-  }
-  if (color.charAt(0) === '#') {
-    return decomposeColor(hexToRgb(color));
-  }
-  var marker = color.indexOf('(');
-  var type = color.substring(0, marker);
-  if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
-    throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Unsupported `".concat(color, "` color.\nThe following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().") : _formatMuiErrorMessage(9, color));
-  }
-  var values = color.substring(marker + 1, color.length - 1);
-  var colorSpace;
-  if (type === 'color') {
-    values = values.split(' ');
-    colorSpace = values.shift();
-    if (values.length === 4 && values[3].charAt(0) === '/') {
-      values[3] = values[3].slice(1);
-    }
-    if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
-      throw new Error(process.env.NODE_ENV !== "production" ? "MUI: unsupported `".concat(colorSpace, "` color space.\nThe following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.") : _formatMuiErrorMessage(10, colorSpace));
-    }
-  } else {
-    values = values.split(',');
-  }
-  values = values.map(function (value) {
-    return parseFloat(value);
-  });
-  return {
-    type: type,
-    values: values,
-    colorSpace: colorSpace
-  };
-}
-
-/**
- * Returns a channel created from the input color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
- */
-export var colorChannel = function colorChannel(color) {
-  var decomposedColor = decomposeColor(color);
-  return decomposedColor.values.slice(0, 3).map(function (val, idx) {
-    return decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? "".concat(val, "%") : val;
-  }).join(' ');
-};
-export var private_safeColorChannel = function private_safeColorChannel(color, warning) {
-  try {
-    return colorChannel(color);
-  } catch (error) {
-    if (warning && process.env.NODE_ENV !== 'production') {
-      console.warn(warning);
-    }
-    return color;
-  }
-};
-
-/**
- * Converts a color object with type and values to a string.
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
- */
-export function recomposeColor(color) {
-  var type = color.type,
-    colorSpace = color.colorSpace;
-  var values = color.values;
-  if (type.indexOf('rgb') !== -1) {
-    // Only convert the first 3 values to int (i.e. not alpha)
-    values = values.map(function (n, i) {
-      return i < 3 ? parseInt(n, 10) : n;
-    });
-  } else if (type.indexOf('hsl') !== -1) {
-    values[1] = "".concat(values[1], "%");
-    values[2] = "".concat(values[2], "%");
-  }
-  if (type.indexOf('color') !== -1) {
-    values = "".concat(colorSpace, " ").concat(values.join(' '));
-  } else {
-    values = "".concat(values.join(', '));
-  }
-  return "".concat(type, "(").concat(values, ")");
-}
-
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
- */
-export function rgbToHex(color) {
-  // Idempotent
-  if (color.indexOf('#') === 0) {
-    return color;
-  }
-  var _decomposeColor = decomposeColor(color),
-    values = _decomposeColor.values;
-  return "#".concat(values.map(function (n, i) {
-    return intToHex(i === 3 ? Math.round(255 * n) : n);
-  }).join(''));
-}
-
-/**
- * Converts a color from hsl format to rgb format.
- * @param {string} color - HSL color values
- * @returns {string} rgb color values
- */
-export function hslToRgb(color) {
-  color = decomposeColor(color);
-  var _color = color,
-    values = _color.values;
-  var h = values[0];
-  var s = values[1] / 100;
-  var l = values[2] / 100;
-  var a = s * Math.min(l, 1 - l);
-  var f = function f(n) {
-    var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
-    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-  };
-  var type = 'rgb';
-  var rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-  if (color.type === 'hsla') {
-    type += 'a';
-    rgb.push(values[3]);
-  }
-  return recomposeColor({
-    type: type,
-    values: rgb
-  });
-}
-/**
- * The relative brightness of any point in a color space,
- * normalized to 0 for darkest black and 1 for lightest white.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @returns {number} The relative brightness of the color in the range 0 - 1
- */
-export function getLuminance(color) {
-  color = decomposeColor(color);
-  var rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
-  rgb = rgb.map(function (val) {
-    if (color.type !== 'color') {
-      val /= 255; // normalized
-    }
-    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  });
-
-  // Truncate at 3 digits
-  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
-}
-
-/**
- * Calculates the contrast ratio between two colors.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} A contrast ratio value in the range 0 - 21.
- */
-export function getContrastRatio(foreground, background) {
-  var lumA = getLuminance(foreground);
-  var lumB = getLuminance(background);
-  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
-}
-
-/**
- * Sets the absolute transparency of a color.
- * Any existing alpha values are overwritten.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} value - value to set the alpha channel to in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export function alpha(color, value) {
-  color = decomposeColor(color);
-  value = clampWrapper(value);
-  if (color.type === 'rgb' || color.type === 'hsl') {
-    color.type += 'a';
-  }
-  if (color.type === 'color') {
-    color.values[3] = "/".concat(value);
-  } else {
-    color.values[3] = value;
-  }
-  return recomposeColor(color);
-}
-export function private_safeAlpha(color, value, warning) {
-  try {
-    return alpha(color, value);
-  } catch (error) {
-    if (warning && process.env.NODE_ENV !== 'production') {
-      console.warn(warning);
-    }
-    return color;
-  }
-}
-
-/**
- * Darkens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export function darken(color, coefficient) {
-  color = decomposeColor(color);
-  coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
-    color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
-    for (var i = 0; i < 3; i += 1) {
-      color.values[i] *= 1 - coefficient;
-    }
-  }
-  return recomposeColor(color);
-}
-export function private_safeDarken(color, coefficient, warning) {
-  try {
-    return darken(color, coefficient);
-  } catch (error) {
-    if (warning && process.env.NODE_ENV !== 'production') {
-      console.warn(warning);
-    }
-    return color;
-  }
-}
-
-/**
- * Lightens a color.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export function lighten(color, coefficient) {
-  color = decomposeColor(color);
-  coefficient = clampWrapper(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
-    color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
-    for (var i = 0; i < 3; i += 1) {
-      color.values[i] += (255 - color.values[i]) * coefficient;
-    }
-  } else if (color.type.indexOf('color') !== -1) {
-    for (var _i = 0; _i < 3; _i += 1) {
-      color.values[_i] += (1 - color.values[_i]) * coefficient;
-    }
-  }
-  return recomposeColor(color);
-}
-export function private_safeLighten(color, coefficient, warning) {
-  try {
-    return lighten(color, coefficient);
-  } catch (error) {
-    if (warning && process.env.NODE_ENV !== 'production') {
-      console.warn(warning);
-    }
-    return color;
-  }
-}
-
-/**
- * Darken or lighten a color, depending on its luminance.
- * Light colors are darkened, dark colors are lightened.
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
- * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export function emphasize(color) {
-  var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
-  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
-}
-export function private_safeEmphasize(color, coefficient, warning) {
-  try {
-    return emphasize(color, coefficient);
-  } catch (error) {
-    if (warning && process.env.NODE_ENV !== 'production') {
-      console.warn(warning);
-    }
-    return color;
-  }
-}
-
-/**
- * Blend a transparent overlay color with a background color, resulting in a single
- * RGB color.
- * @param {string} background - CSS color
- * @param {string} overlay - CSS color
- * @param {number} opacity - Opacity multiplier in the range 0 - 1
- * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
- */
-export function blend(background, overlay, opacity) {
-  var gamma = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1.0;
-  var blendChannel = function blendChannel(b, o) {
-    return Math.round(Math.pow(Math.pow(b, 1 / gamma) * (1 - opacity) + Math.pow(o, 1 / gamma) * opacity, gamma));
-  };
-  var backgroundColor = decomposeColor(background);
-  var overlayColor = decomposeColor(overlay);
-  var rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];
-  return recomposeColor({
-    type: 'rgb',
-    values: rgb
-  });
-}

package/legacy/colorManipulator/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export * from './colorManipulator';

package/legacy/compose/compose.js

@@ -1,32 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import merge from '../merge';
-function compose() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
-  var handlers = styles.reduce(function (acc, style) {
-    style.filterProps.forEach(function (prop) {
-      acc[prop] = style;
-    });
-    return acc;
-  }, {});
-
-  // false positive
-  // eslint-disable-next-line react/function-component-definition
-  var fn = function fn(props) {
-    return Object.keys(props).reduce(function (acc, prop) {
-      if (handlers[prop]) {
-        return merge(acc, handlers[prop](props));
-      }
-      return acc;
-    }, {});
-  };
-  fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {
-    return _extends(acc, style.propTypes);
-  }, {}) : {};
-  fn.filterProps = styles.reduce(function (acc, style) {
-    return acc.concat(style.filterProps);
-  }, []);
-  return fn;
-}
-export default compose;

package/legacy/compose/index.js

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

package/legacy/createBox/createBox.js

@@ -1,38 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from 'react';
-import clsx from 'clsx';
-import styled from '@mui/styled-engine';
-import styleFunctionSx, { extendSxProp } from '../styleFunctionSx';
-import useTheme from '../useTheme';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function createBox() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var themeId = options.themeId,
-    defaultTheme = options.defaultTheme,
-    _options$defaultClass = options.defaultClassName,
-    defaultClassName = _options$defaultClass === void 0 ? 'MuiBox-root' : _options$defaultClass,
-    generateClassName = options.generateClassName;
-  var BoxRoot = styled('div', {
-    shouldForwardProp: function shouldForwardProp(prop) {
-      return prop !== 'theme' && prop !== 'sx' && prop !== 'as';
-    }
-  })(styleFunctionSx);
-  var Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
-    var theme = useTheme(defaultTheme);
-    var _extendSxProp = extendSxProp(inProps),
-      className = _extendSxProp.className,
-      _extendSxProp$compone = _extendSxProp.component,
-      component = _extendSxProp$compone === void 0 ? 'div' : _extendSxProp$compone,
-      other = _objectWithoutProperties(_extendSxProp, ["className", "component"]);
-    return /*#__PURE__*/_jsx(BoxRoot, _extends({
-      as: component,
-      ref: ref,
-      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
-      theme: themeId ? theme[themeId] || theme : theme
-    }, other));
-  });
-  return Box;
-}

package/legacy/createBox/index.js

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

package/legacy/createStyled/createStyled.js

@@ -1,250 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-/* eslint-disable no-underscore-dangle */
-import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
-import { isPlainObject } from '@mui/utils/deepmerge';
-import capitalize from '@mui/utils/capitalize';
-import getDisplayName from '@mui/utils/getDisplayName';
-import createTheme from '../createTheme';
-import styleFunctionSx from '../styleFunctionSx';
-function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
-}
-
-// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
-function isStringTag(tag) {
-  return typeof tag === 'string' &&
-  // 96 is one less than the char code
-  // for "a" so this is checking that
-  // it's a lowercase character
-  tag.charCodeAt(0) > 96;
-}
-
-// Update /system/styled/#api in case if this changes
-export function shouldForwardProp(prop) {
-  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
-}
-export var systemDefaultTheme = createTheme();
-var lowercaseFirstLetter = function lowercaseFirstLetter(string) {
-  if (!string) {
-    return string;
-  }
-  return string.charAt(0).toLowerCase() + string.slice(1);
-};
-function resolveTheme(_ref) {
-  var defaultTheme = _ref.defaultTheme,
-    theme = _ref.theme,
-    themeId = _ref.themeId;
-  return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
-}
-function defaultOverridesResolver(slot) {
-  if (!slot) {
-    return null;
-  }
-  return function (props, styles) {
-    return styles[slot];
-  };
-}
-function processStyleArg(callableStyle, _ref2) {
-  var ownerState = _ref2.ownerState,
-    props = _objectWithoutProperties(_ref2, ["ownerState"]);
-  var resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
-    ownerState: ownerState
-  }, props)) : callableStyle;
-  if (Array.isArray(resolvedStylesArg)) {
-    return resolvedStylesArg.flatMap(function (resolvedStyle) {
-      return processStyleArg(resolvedStyle, _extends({
-        ownerState: ownerState
-      }, props));
-    });
-  }
-  if (!!resolvedStylesArg && _typeof(resolvedStylesArg) === 'object' && Array.isArray(resolvedStylesArg.variants)) {
-    var _resolvedStylesArg$va = resolvedStylesArg.variants,
-      variants = _resolvedStylesArg$va === void 0 ? [] : _resolvedStylesArg$va,
-      otherStyles = _objectWithoutProperties(resolvedStylesArg, ["variants"]);
-    var result = otherStyles;
-    variants.forEach(function (variant) {
-      var isMatch = true;
-      if (typeof variant.props === 'function') {
-        isMatch = variant.props(_extends({
-          ownerState: ownerState
-        }, props, ownerState));
-      } else {
-        Object.keys(variant.props).forEach(function (key) {
-          if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
-            isMatch = false;
-          }
-        });
-      }
-      if (isMatch) {
-        if (!Array.isArray(result)) {
-          result = [result];
-        }
-        result.push(typeof variant.style === 'function' ? variant.style(_extends({
-          ownerState: ownerState
-        }, props, ownerState)) : variant.style);
-      }
-    });
-    return result;
-  }
-  return resolvedStylesArg;
-}
-export default function createStyled() {
-  var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var themeId = input.themeId,
-    _input$defaultTheme = input.defaultTheme,
-    defaultTheme = _input$defaultTheme === void 0 ? systemDefaultTheme : _input$defaultTheme,
-    _input$rootShouldForw = input.rootShouldForwardProp,
-    rootShouldForwardProp = _input$rootShouldForw === void 0 ? shouldForwardProp : _input$rootShouldForw,
-    _input$slotShouldForw = input.slotShouldForwardProp,
-    slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw;
-  var systemSx = function systemSx(props) {
-    return styleFunctionSx(_extends({}, props, {
-      theme: resolveTheme(_extends({}, props, {
-        defaultTheme: defaultTheme,
-        themeId: themeId
-      }))
-    }));
-  };
-  systemSx.__mui_systemSx = true;
-  return function (tag) {
-    var inputOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
-    processStyles(tag, function (styles) {
-      return styles.filter(function (style) {
-        return !(style != null && style.__mui_systemSx);
-      });
-    });
-    var componentName = inputOptions.name,
-      componentSlot = inputOptions.slot,
-      inputSkipVariantsResolver = inputOptions.skipVariantsResolver,
-      inputSkipSx = inputOptions.skipSx,
-      _inputOptions$overrid = inputOptions.overridesResolver,
-      overridesResolver = _inputOptions$overrid === void 0 ? defaultOverridesResolver(lowercaseFirstLetter(componentSlot)) : _inputOptions$overrid,
-      options = _objectWithoutProperties(inputOptions, ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"]); // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
-    var skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
-    var skipSx = inputSkipSx || false;
-    var label;
-    if (process.env.NODE_ENV !== 'production') {
-      if (componentName) {
-        // TODO v6: remove `lowercaseFirstLetter()` in the next major release
-        // For more details: https://github.com/mui/material-ui/pull/37908
-        label = "".concat(componentName, "-").concat(lowercaseFirstLetter(componentSlot || 'Root'));
-      }
-    }
-    var shouldForwardPropOption = shouldForwardProp;
-
-    // TODO v6: remove `Root` in the next major release
-    // For more details: https://github.com/mui/material-ui/pull/37908
-    if (componentSlot === 'Root' || componentSlot === 'root') {
-      shouldForwardPropOption = rootShouldForwardProp;
-    } else if (componentSlot) {
-      // any other slot specified
-      shouldForwardPropOption = slotShouldForwardProp;
-    } else if (isStringTag(tag)) {
-      // for string (html) tag, preserve the behavior in emotion & styled-components.
-      shouldForwardPropOption = undefined;
-    }
-    var defaultStyledResolver = styledEngineStyled(tag, _extends({
-      shouldForwardProp: shouldForwardPropOption,
-      label: label
-    }, options));
-    var transformStyleArg = function transformStyleArg(stylesArg) {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
-        return function (props) {
-          return processStyleArg(stylesArg, _extends({}, props, {
-            theme: resolveTheme({
-              theme: props.theme,
-              defaultTheme: defaultTheme,
-              themeId: themeId
-            })
-          }));
-        };
-      }
-      return stylesArg;
-    };
-    var muiStyledResolver = function muiStyledResolver(styleArg) {
-      var transformedStyleArg = transformStyleArg(styleArg);
-      for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        expressions[_key - 1] = arguments[_key];
-      }
-      var expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
-      if (componentName && overridesResolver) {
-        expressionsWithDefaultTheme.push(function (props) {
-          var theme = resolveTheme(_extends({}, props, {
-            defaultTheme: defaultTheme,
-            themeId: themeId
-          }));
-          if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
-            return null;
-          }
-          var styleOverrides = theme.components[componentName].styleOverrides;
-          var resolvedStyleOverrides = {};
-          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
-          Object.entries(styleOverrides).forEach(function (_ref3) {
-            var _ref4 = _slicedToArray(_ref3, 2),
-              slotKey = _ref4[0],
-              slotStyle = _ref4[1];
-            resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
-              theme: theme
-            }));
-          });
-          return overridesResolver(props, resolvedStyleOverrides);
-        });
-      }
-      if (componentName && !skipVariantsResolver) {
-        expressionsWithDefaultTheme.push(function (props) {
-          var _theme$components;
-          var theme = resolveTheme(_extends({}, props, {
-            defaultTheme: defaultTheme,
-            themeId: themeId
-          }));
-          var themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
-          return processStyleArg({
-            variants: themeVariants
-          }, _extends({}, props, {
-            theme: theme
-          }));
-        });
-      }
-      if (!skipSx) {
-        expressionsWithDefaultTheme.push(systemSx);
-      }
-      var numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
-      if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
-        var placeholders = new Array(numOfCustomFnsApplied).fill('');
-        // If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
-        transformedStyleArg = [].concat(_toConsumableArray(styleArg), _toConsumableArray(placeholders));
-        transformedStyleArg.raw = [].concat(_toConsumableArray(styleArg.raw), _toConsumableArray(placeholders));
-      }
-      var Component = defaultStyledResolver.apply(void 0, [transformedStyleArg].concat(_toConsumableArray(expressionsWithDefaultTheme)));
-      if (process.env.NODE_ENV !== 'production') {
-        var displayName;
-        if (componentName) {
-          displayName = "".concat(componentName).concat(capitalize(componentSlot || ''));
-        }
-        if (displayName === undefined) {
-          displayName = "Styled(".concat(getDisplayName(tag), ")");
-        }
-        Component.displayName = displayName;
-      }
-      if (tag.muiName) {
-        Component.muiName = tag.muiName;
-      }
-      return Component;
-    };
-    if (defaultStyledResolver.withConfig) {
-      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
-    }
-    return muiStyledResolver;
-  };
-}