@mui/codemod 6.0.0-alpha.6 → 6.0.0-alpha.8

package/node/v5.0.0/theme-spacing.test/large-expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AppSearch;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _helpers = require("docs/src/modules/utils/helpers");
@@ -351,11 +350,12 @@ function AppSearch() {
             canonicalAs,
             canonicalPathname
           } = (0, _helpers.pathnameToLanguage)(`${parseUrl.pathname}${parseUrl.hash}`);
-          return (0, _extends2.default)({}, item, {
+          return {
+            ...item,
             pathname: canonicalPathname,
             as: canonicalAs,
             userLanguage
-          });
+          };
         });
       },
       hitComponent: DocSearchHit,
@@ -433,16 +433,16 @@ function AppSearch() {
             transition: 'margin 0.2s',
             fontSize: theme.typography.pxToRem(16)
           },
-          '& .DocSearch-Modal': (0, _extends2.default)({
+          '& .DocSearch-Modal': {
             maxWidth: '700px',
-            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`
-          }, theme.palette.mode === 'dark' && {
-            border: '1px solid',
-            borderColor: theme.palette.primaryDark[700]
-          }, {
+            boxShadow: `0px 4px 20px ${theme.palette.mode === 'dark' ? (0, _styles.alpha)(theme.palette.background.paper, 0.7) : (0, _styles.alpha)(theme.palette.grey[700], 0.2)}`,
+            ...(theme.palette.mode === 'dark' && {
+              border: '1px solid',
+              borderColor: theme.palette.primaryDark[700]
+            }),
             // docsearch.css: <= 750px will be full screen modal
             borderRadius: `clamp(0px, (100vw - 750px) * 9999, ${theme.shape.borderRadius}px)`
-          }),
+          },
           '& .DocSearch-SearchBar': {
             borderBottom: '1px solid',
             borderColor: theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200],

package/node/v5.0.0/variant-prop.test/actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -20,19 +19,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select6.default, {}));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({}, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({}, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -41,10 +46,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {})), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {}))]
   });
 }

package/node/v5.0.0/variant-prop.test/expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TextFieldComponent;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _TextField4 = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _Select5 = _interopRequireDefault(require("@material-ui/core/Select"));
@@ -22,25 +21,28 @@ const Select2 = () => _MuiSelect || (_MuiSelect = /*#__PURE__*/(0, _jsxRuntime.j
 }));
 function TextFieldComponent(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+      variant: "standard",
+      ...props
+    }), _TextField || (_TextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "outlined"
     })), _TextField2 || (_TextField2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "standard"
     })), _TextField3 || (_TextField3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
+      variant: "standard",
+      ...props
+    }), _Select || (_Select = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "outlined"
     })), _Select2 || (_Select2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "standard"
     })), _Select3 || (_Select3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select5.default, {
       variant: "filled"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, (0, _extends2.default)({
-      variant: "standard"
-    }, props)), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
+      variant: "standard",
+      ...props
+    }), _FormControl || (_FormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "outlined"
     })), _FormControl2 || (_FormControl2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl4.default, {
       variant: "standard"
@@ -49,10 +51,11 @@ function TextFieldComponent(props) {
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Autocomplete, {
       options: [],
       getOptionLabel: option => option.title,
-      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, (0, _extends2.default)({}, params, {
+      renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField4.default, {
+        ...params,
         label: "Combo box",
         variant: "outlined"
-      }))
+      })
     }), _CustomSelect || (_CustomSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomSelect, {})), _SelectedRoute || (_SelectedRoute = /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedRoute, {})), _FromToSelect || (_FromToSelect = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelect, {})), _FromToSelectDrawer || (_FromToSelectDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(FromToSelectDrawer, {})), _MuiTextField || (_MuiTextField = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField5.default, {
       variant: "standard"
     })), _Select4 || (_Select4 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Select2, {})), _MuiFormControl || (_MuiFormControl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, {

package/node/v5.0.0/with-mobile-dialog.test/expected.js

@@ -5,20 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#using-material-uis-breakpoint-helpers
-const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMobileDialog = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "lg",
   fullScreen: false
-}));
+});
 const A = withMobileDialog()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v5.0.0/with-width.test/expected.js

@@ -5,18 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withMuiWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 
 // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, (0, _extends2.default)({}, props, {
+const withWidth = () => WrappedComponent => props => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
+  ...props,
   width: "xs"
-}));
+});
 const A = withWidth()(props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     children: props.width

package/node/v6.0.0/styled/test-cases/BasicStyled.actual.js

@@ -1,78 +1,89 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const FormHelperTextRoot = styled('p')(({
   theme,
   ownerState,
   disabled
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   [`&.${formHelperTextClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-  marginTop: 6
-}, ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
-  marginTop: 6
-}, ownerState.size !== 'small' && {
-  marginBottom: 4
-}, ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
-  marginBottom: 6
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
-}, !ownerState.contained && {
-  marginTop: 14,
-  marginBottom: 14
-}, !!ownerState.disabled && {
-  opacity: 0.5
+  },
+  ...(ownerState.size === 'small' && {
+    marginTop: 4
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && {
+    marginTop: 6
+  }),
+  ...(ownerState.size === 'small' && ownerState.variant === 'contained' && disabled && {
+    marginTop: 6
+  }),
+  ...(ownerState.size !== 'small' && {
+    marginBottom: 4
+  }),
+  ...(ownerState.size !== 'small' && ownerState.variant !== 'contained' && !disabled && {
+    marginBottom: 6
+  }),
+  ...(ownerState.contained && {
+    marginLeft: 14,
+    marginRight: 14
+  }),
+  ...(!ownerState.contained && {
+    marginTop: 14,
+    marginBottom: 14
+  }),
+  ...(!!ownerState.disabled && {
+    opacity: 0.5
+  })
 }));
 const Component = styled.div(({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, theme.typography.caption, ownerState.size === 'small' && {
-  marginTop: (theme.vars || theme).spacing(1)
+}) => ({
+  ...theme.typography.caption,
+  ...(ownerState.size === 'small' && {
+    marginTop: (theme.vars || theme).spacing(1)
+  })
 }));
 const ImageListRoot = styled('ul')(({
   ownerState
 }) => {
-  return (0, _extends2.default)({
+  return {
     display: 'grid',
     overflowY: 'auto',
     listStyle: 'none',
     padding: 0,
     // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch'
-  }, ownerState.variant === 'masonry' && {
-    display: 'block'
-  });
+    WebkitOverflowScrolling: 'touch',
+    ...(ownerState.variant === 'masonry' && {
+      display: 'block'
+    })
+  };
 });
 const ImageListItemRoot = styled('li')(({
   ownerState
 }) => ({
   display: 'block',
   position: 'relative',
-  [`& .${imageListItemClasses.img}`]: (0, _extends2.default)({
+  [`& .${imageListItemClasses.img}`]: {
     objectFit: 'cover',
     width: '100%',
     height: '100%',
-    display: 'block'
-  }, ownerState.variant === 'standard' && {
-    height: 'auto',
-    flexGrow: 1
-  }, {
+    display: 'block',
+    ...(ownerState.variant === 'standard' && {
+      height: 'auto',
+      flexGrow: 1
+    }),
     '&:hover': {
-      '&[data-shape="circular"]': (0, _extends2.default)({
-        borderRadius: '50%'
-      }, ownerState.variant === 'unique' && {
-        height: 'auto',
-        flexGrow: 1
-      })
+      '&[data-shape="circular"]': {
+        borderRadius: '50%',
+        ...(ownerState.variant === 'unique' && {
+          height: 'auto',
+          flexGrow: 1
+        })
+      }
     }
-  })
+  }
 }));

package/node/v6.0.0/styled/test-cases/BasicStyled.expected.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const FormHelperTextRoot = styled('p')(({
   theme
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   [`&.${formHelperTextClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.disabled
@@ -76,7 +74,8 @@ const FormHelperTextRoot = styled('p')(({
 }));
 const Component = styled.div(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.caption, {
+}) => ({
+  ...theme.typography.caption,
   variants: [{
     props: {
       size: 'small'

package/node/v6.0.0/styled/test-cases/ConditionalStyled.actual.js

@@ -1,10 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["expand"];
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -17,19 +13,29 @@ const LinearProgressBar1 = styled('span', {
 })(({
   ownerState,
   theme
-}) => (0, _extends2.default)({}, ownerState.variant === 'buffer' && {
-  backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
-  '&:hover': (0, _extends2.default)({}, ownerState.color !== 'inherit' ? {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  } : {
-    backgroundColor: 'currentColor'
+}) => ({
+  ...(ownerState.variant === 'buffer' && {
+    backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
+    '&:hover': {
+      ...(ownerState.color !== 'inherit' ? {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+      } : {
+        backgroundColor: 'currentColor'
+      })
+    }
+  }),
+  ...(ownerState.variant !== 'buffer' && {
+    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
   })
-}, ownerState.variant !== 'buffer' && {
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }));
 const ExpandMore = styled(props => {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+  const {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...other
+  });
 })(({
   theme,
   expand
@@ -45,19 +51,19 @@ const Main = styled('main', {
 })(({
   disableToc,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   minHeight: '100vh',
   display: 'grid',
-  width: '100%'
-}, disableToc ? {
-  [theme.breakpoints.up('md')]: {
-    marginRight: TOC_WIDTH / 2
-  }
-} : {
-  [theme.breakpoints.up('md')]: {
-    gridTemplateColumns: `1fr ${TOC_WIDTH}px`
-  }
-}, {
+  width: '100%',
+  ...(disableToc ? {
+    [theme.breakpoints.up('md')]: {
+      marginRight: TOC_WIDTH / 2
+    }
+  } : {
+    [theme.breakpoints.up('md')]: {
+      gridTemplateColumns: `1fr ${TOC_WIDTH}px`
+    }
+  }),
   '& .markdown-body .comment-link': {
     display: 'flex'
   }
@@ -70,48 +76,51 @@ const StyledAppContainer = styled(AppContainer, {
   disableToc,
   theme
 }) => {
-  return (0, _extends2.default)({
+  return {
     position: 'relative',
     // By default, a grid item cannot be smaller than the size of its content.
     // https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
-    minWidth: 0
-  }, disableToc ? {
-    // 105ch ≈ 930px
-    maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
-  } : {
-    // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
-    fontFamily: 'Arial',
-    // 105ch ≈ 930px
-    maxWidth: '105ch'
-  }, !disableAd && (0, _extends2.default)({}, hasTabs ? {
-    '&& .component-tabs .MuiTabs-root': {
-      // 40px matches MarkdownElement h2 margin-top.
-      marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
-      [theme.breakpoints.up('sm')]: {
-        marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
-      }
-    },
-    '&& .component-tabs.ad .MuiTabs-root': {
-      marginBottom: 0
-    }
-  } : {
-    '&& .description': {
-      marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
-      paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
-      [theme.breakpoints.up('sm')]: {
-        paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
-      }
-    },
-    '&& .description.ad': {
-      paddingBottom: 0,
-      marginBottom: 0
-    }
-  }), {
+    minWidth: 0,
+    ...(disableToc ? {
+      // 105ch ≈ 930px
+      maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
+    } : {
+      // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
+      fontFamily: 'Arial',
+      // 105ch ≈ 930px
+      maxWidth: '105ch'
+    }),
+    ...(!disableAd && {
+      ...(hasTabs ? {
+        '&& .component-tabs .MuiTabs-root': {
+          // 40px matches MarkdownElement h2 margin-top.
+          marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
+          [theme.breakpoints.up('sm')]: {
+            marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
+          }
+        },
+        '&& .component-tabs.ad .MuiTabs-root': {
+          marginBottom: 0
+        }
+      } : {
+        '&& .description': {
+          marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
+          paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
+          [theme.breakpoints.up('sm')]: {
+            paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
+          }
+        },
+        '&& .description.ad': {
+          paddingBottom: 0,
+          marginBottom: 0
+        }
+      })
+    }),
     [theme.breakpoints.up('lg')]: {
       paddingLeft: '60px',
       paddingRight: '60px'
     }
-  });
+  };
 });
 const DialogContentRoot = styled('div', {
   name: 'MuiDialogContent',
@@ -125,18 +134,19 @@ const DialogContentRoot = styled('div', {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({
+}) => ({
   flex: '1 1 auto',
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
   overflowY: 'auto',
-  padding: '20px 24px'
-}, ownerState.dividers ? {
-  padding: '16px 24px',
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-} : {
-  [`.${dialogTitleClasses.root} + &`]: {
-    paddingTop: 0
-  }
+  padding: '20px 24px',
+  ...(ownerState.dividers ? {
+    padding: '16px 24px',
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  } : {
+    [`.${dialogTitleClasses.root} + &`]: {
+      paddingTop: 0
+    }
+  })
 }));

package/node/v6.0.0/styled/test-cases/ConditionalStyled.expected.js

@@ -1,10 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["expand"];
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -78,8 +74,13 @@ const LinearProgressBar1 = styled('span', {
   }]
 }));
 const ExpandMore = styled(props => {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+  const {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...other
+  });
 })(({
   theme
 }) => ({