@mui/system 5.9.2 → 5.10.1

package/legacy/Stack/createStack.js

@@ -0,0 +1,187 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { deepmerge, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import systemStyled from '../styled';
+import useThemePropsSystem from '../useThemeProps';
+import { extendSxProp } from '../styleFunctionSx';
+import createTheme from '../createTheme';
+import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
+import { createUnarySpacing, getValue } from '../spacing';
+import { jsx as _jsx } from "react/jsx-runtime";
+var defaultTheme = createTheme();
+// widening Theme to any so that the consumer can own the theme structure.
+var defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.root;
+  }
+});
+
+function useThemePropsDefault(props) {
+  return useThemePropsSystem({
+    props: props,
+    name: 'MuiStack',
+    defaultTheme: defaultTheme
+  });
+}
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+
+
+function joinChildren(children, separator) {
+  var childrenArray = React.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce(function (output, child, index) {
+    output.push(child);
+
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React.cloneElement(separator, {
+        key: "separator-".concat(index)
+      }));
+    }
+
+    return output;
+  }, []);
+}
+
+var getSideFromDirection = function getSideFromDirection(direction) {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+
+export var style = function style(_ref) {
+  var ownerState = _ref.ownerState,
+      theme = _ref.theme;
+
+  var styles = _extends({
+    display: 'flex',
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme: theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), function (propValue) {
+    return {
+      flexDirection: propValue
+    };
+  }));
+
+  if (ownerState.spacing) {
+    var transformer = createUnarySpacing(theme);
+    var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
+      if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
+        acc[breakpoint] = true;
+      }
+
+      return acc;
+    }, {});
+    var directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      base: base
+    });
+    var spacingValues = resolveBreakpointValues({
+      values: ownerState.spacing,
+      base: base
+    });
+
+    if (_typeof(directionValues) === 'object') {
+      Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
+        var directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
+    var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
+      return {
+        '& > :not(style) + :not(style)': _defineProperty({
+          margin: 0
+        }, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
+      };
+    };
+
+    styles = deepmerge(styles, handleBreakpoints({
+      theme: theme
+    }, spacingValues, styleFromPropValue));
+  }
+
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+export default function createStack() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$createStyled = options.createStyledComponent,
+      createStyledComponent = _options$createStyled === void 0 ? defaultCreateStyledComponent : _options$createStyled,
+      _options$useThemeProp = options.useThemeProps,
+      useThemeProps = _options$useThemeProp === void 0 ? useThemePropsDefault : _options$useThemeProp,
+      _options$componentNam = options.componentName,
+      componentName = _options$componentNam === void 0 ? 'MuiStack' : _options$componentNam;
+
+  var useUtilityClasses = function useUtilityClasses() {
+    var slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, function (slot) {
+      return generateUtilityClass(componentName, slot);
+    }, {});
+  };
+
+  var StackRoot = createStyledComponent(style);
+  var Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    var themeProps = useThemeProps(inProps);
+    var props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    var _props$component = props.component,
+        component = _props$component === void 0 ? 'div' : _props$component,
+        _props$direction = props.direction,
+        direction = _props$direction === void 0 ? 'column' : _props$direction,
+        _props$spacing = props.spacing,
+        spacing = _props$spacing === void 0 ? 0 : _props$spacing,
+        divider = props.divider,
+        children = props.children,
+        className = props.className,
+        other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children", "className"]);
+
+    var ownerState = {
+      direction: direction,
+      spacing: spacing
+    };
+    var classes = useUtilityClasses();
+    return /*#__PURE__*/_jsx(StackRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: clsx(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  process.env.NODE_ENV !== "production" ? Stack.propTypes
+  /* remove-proptypes */
+  = {
+    children: PropTypes.node,
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    divider: PropTypes.node,
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } : void 0;
+  return Stack;
+}

package/legacy/Stack/index.js

@@ -0,0 +1,5 @@
+export { default } from './Stack';
+export { default as createStack } from './createStack';
+export * from './StackProps';
+export { default as stackClasses } from './stackClasses';
+export * from './stackClasses';

package/legacy/Stack/stackClasses.js

@@ -0,0 +1,6 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getStackUtilityClass(slot) {
+  return generateUtilityClass('MuiStack', slot);
+}
+var stackClasses = generateUtilityClasses('MuiStack', ['root']);
+export default stackClasses;

package/legacy/createBox.js

@@ -14,7 +14,11 @@ export default function createBox() {
       generateClassName = options.generateClassName,
       _options$styleFunctio = options.styleFunctionSx,
       styleFunctionSx = _options$styleFunctio === void 0 ? defaultStyleFunctionSx : _options$styleFunctio;
-  var BoxRoot = styled('div')(styleFunctionSx);
+  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);
 

package/legacy/createStyled.js

@@ -1,8 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import styledEngineStyled from '@mui/styled-engine';
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+/* eslint-disable no-underscore-dangle */
+import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
@@ -10,6 +12,14 @@ import defaultStyleFunctionSx 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;
 }
 
 var getStyleOverrides = function getStyleOverrides(name, theme) {
@@ -81,8 +91,23 @@ export default function createStyled() {
       slotShouldForwardProp = _input$slotShouldForw === void 0 ? shouldForwardProp : _input$slotShouldForw,
       _input$styleFunctionS = input.styleFunctionSx,
       styleFunctionSx = _input$styleFunctionS === void 0 ? defaultStyleFunctionSx : _input$styleFunctionS;
+
+  var systemSx = function systemSx(props) {
+    var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+    return styleFunctionSx(_extends({}, props, {
+      theme: theme
+    }));
+  };
+
+  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,
@@ -109,6 +134,9 @@ export default function createStyled() {
     } 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({
@@ -125,7 +153,6 @@ export default function createStyled() {
         // 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.
-        // eslint-disable-next-line no-underscore-dangle
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? function (_ref) {
           var themeInput = _ref.theme,
               other = _objectWithoutProperties(_ref, ["theme"]);
@@ -168,12 +195,7 @@ export default function createStyled() {
       }
 
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(function (props) {
-          var theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-          return styleFunctionSx(_extends({}, props, {
-            theme: theme
-          }));
-        });
+        expressionsWithDefaultTheme.push(systemSx);
       }
 
       var numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -186,7 +208,6 @@ export default function createStyled() {
       } else if (typeof styleArg === 'function' && // 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.
-      // eslint-disable-next-line no-underscore-dangle
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = function transformedStyleArg(_ref4) {

package/legacy/cssVars/createCssVarsProvider.js

@@ -181,7 +181,7 @@ export default function createCssVarsProvider(options) {
       }();
 
       if (key === resolvedDefaultColorScheme) {
-        defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
+        defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
       } else {
         otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
       }

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.2
+/** @license MUI v5.10.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,4 +53,6 @@ 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 * from './Unstable_Grid';
+export { default as Stack } from './Stack/Stack';
+export * from './Stack';

package/modern/Stack/Stack.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import createStack from './createStack';
+/**
+ *
+ * Demos:
+ *
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/system/api/stack/)
+ */
+
+const Stack = createStack();
+process.env.NODE_ENV !== "production" ? Stack.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export default Stack;

package/modern/Stack/StackProps.js

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

package/modern/Stack/createStack.js

@@ -0,0 +1,179 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["component", "direction", "spacing", "divider", "children", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { deepmerge, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import systemStyled from '../styled';
+import useThemePropsSystem from '../useThemeProps';
+import { extendSxProp } from '../styleFunctionSx';
+import createTheme from '../createTheme';
+import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
+import { createUnarySpacing, getValue } from '../spacing';
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = createTheme();
+// widening Theme to any so that the consumer can own the theme structure.
+const defaultCreateStyledComponent = systemStyled('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+});
+
+function useThemePropsDefault(props) {
+  return useThemePropsSystem({
+    props,
+    name: 'MuiStack',
+    defaultTheme
+  });
+}
+/**
+ * Return an array with the separator React element interspersed between
+ * each React node of the input children.
+ *
+ * > joinChildren([1,2,3], 0)
+ * [1,0,2,0,3]
+ */
+
+
+function joinChildren(children, separator) {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  return childrenArray.reduce((output, child, index) => {
+    output.push(child);
+
+    if (index < childrenArray.length - 1) {
+      output.push( /*#__PURE__*/React.cloneElement(separator, {
+        key: `separator-${index}`
+      }));
+    }
+
+    return output;
+  }, []);
+}
+
+const getSideFromDirection = direction => {
+  return {
+    row: 'Left',
+    'row-reverse': 'Right',
+    column: 'Top',
+    'column-reverse': 'Bottom'
+  }[direction];
+};
+
+export const style = ({
+  ownerState,
+  theme
+}) => {
+  let styles = _extends({
+    display: 'flex',
+    flexDirection: 'column'
+  }, handleBreakpoints({
+    theme
+  }, resolveBreakpointValues({
+    values: ownerState.direction,
+    breakpoints: theme.breakpoints.values
+  }), propValue => ({
+    flexDirection: propValue
+  })));
+
+  if (ownerState.spacing) {
+    const transformer = createUnarySpacing(theme);
+    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
+      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
+        acc[breakpoint] = true;
+      }
+
+      return acc;
+    }, {});
+    const directionValues = resolveBreakpointValues({
+      values: ownerState.direction,
+      base
+    });
+    const spacingValues = resolveBreakpointValues({
+      values: ownerState.spacing,
+      base
+    });
+
+    if (typeof directionValues === 'object') {
+      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
+        const directionValue = directionValues[breakpoint];
+
+        if (!directionValue) {
+          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
+          directionValues[breakpoint] = previousDirectionValue;
+        }
+      });
+    }
+
+    const styleFromPropValue = (propValue, breakpoint) => {
+      return {
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
+        }
+      };
+    };
+
+    styles = deepmerge(styles, handleBreakpoints({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+export default function createStack(options = {}) {
+  const {
+    // This will allow adding custom styled fn (for example for custom sx style function)
+    createStyledComponent = defaultCreateStyledComponent,
+    useThemeProps = useThemePropsDefault,
+    componentName = 'MuiStack'
+  } = options;
+
+  const useUtilityClasses = () => {
+    const slots = {
+      root: ['root']
+    };
+    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+  };
+
+  const StackRoot = createStyledComponent(style);
+  const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
+    const themeProps = useThemeProps(inProps);
+    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    const {
+      component = 'div',
+      direction = 'column',
+      spacing = 0,
+      divider,
+      children,
+      className
+    } = props,
+          other = _objectWithoutPropertiesLoose(props, _excluded);
+
+    const ownerState = {
+      direction,
+      spacing
+    };
+    const classes = useUtilityClasses();
+    return /*#__PURE__*/_jsx(StackRoot, _extends({
+      as: component,
+      ownerState: ownerState,
+      ref: ref,
+      className: clsx(classes.root, className)
+    }, other, {
+      children: divider ? joinChildren(children, divider) : children
+    }));
+  });
+  process.env.NODE_ENV !== "production" ? Stack.propTypes
+  /* remove-proptypes */
+  = {
+    children: PropTypes.node,
+    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+    divider: PropTypes.node,
+    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  } : void 0;
+  return Stack;
+}

package/modern/Stack/index.js

@@ -0,0 +1,5 @@
+export { default } from './Stack';
+export { default as createStack } from './createStack';
+export * from './StackProps';
+export { default as stackClasses } from './stackClasses';
+export * from './stackClasses';

package/modern/Stack/stackClasses.js

@@ -0,0 +1,6 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getStackUtilityClass(slot) {
+  return generateUtilityClass('MuiStack', slot);
+}
+const stackClasses = generateUtilityClasses('MuiStack', ['root']);
+export default stackClasses;

package/modern/createBox.js

@@ -14,7 +14,9 @@ export default function createBox(options = {}) {
     generateClassName,
     styleFunctionSx = defaultStyleFunctionSx
   } = options;
-  const BoxRoot = styled('div')(styleFunctionSx);
+  const BoxRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx);
   const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
     const theme = useTheme(defaultTheme);
 

package/modern/createStyled.js

@@ -1,9 +1,11 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
       _excluded2 = ["theme"],
       _excluded3 = ["theme"];
-import styledEngineStyled from '@mui/styled-engine';
+
+/* eslint-disable no-underscore-dangle */
+import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
 import { getDisplayName } from '@mui/utils';
 import createTheme from './createTheme';
 import propsToClassKey from './propsToClassKey';
@@ -11,6 +13,14 @@ import defaultStyleFunctionSx 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;
 }
 
 const getStyleOverrides = (name, theme) => {
@@ -78,7 +88,19 @@ export default function createStyled(input = {}) {
     slotShouldForwardProp = shouldForwardProp,
     styleFunctionSx = defaultStyleFunctionSx
   } = input;
+
+  const systemSx = props => {
+    const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+    return styleFunctionSx(_extends({}, props, {
+      theme
+    }));
+  };
+
+  systemSx.__mui_systemSx = true;
   return (tag, inputOptions = {}) => {
+    // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
+    processStyles(tag, styles => styles.filter(style => !style?.__mui_systemSx));
+
     const {
       name: componentName,
       slot: componentSlot,
@@ -106,6 +128,9 @@ export default function createStyled(input = {}) {
     } 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;
     }
 
     const defaultStyledResolver = styledEngineStyled(tag, _extends({
@@ -118,7 +143,6 @@ export default function createStyled(input = {}) {
         // 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.
-        // eslint-disable-next-line no-underscore-dangle
         return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
           let {
             theme: themeInput
@@ -159,12 +183,7 @@ export default function createStyled(input = {}) {
       }
 
       if (!skipSx) {
-        expressionsWithDefaultTheme.push(props => {
-          const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
-          return styleFunctionSx(_extends({}, props, {
-            theme
-          }));
-        });
+        expressionsWithDefaultTheme.push(systemSx);
       }
 
       const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -177,7 +196,6 @@ export default function createStyled(input = {}) {
       } else if (typeof styleArg === 'function' && // 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.
-      // eslint-disable-next-line no-underscore-dangle
       styleArg.__emotion_real !== styleArg) {
         // If the type is function, we need to define the default theme.
         transformedStyleArg = _ref2 => {