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

package/node/v5.0.0/jss-to-styled.test/first.actual.js

@@ -124,20 +124,9 @@ const styles = theme => ({
   }
 });
 class AppAppBar extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      menuOpen: false
-    };
-    this.handleToggleMenu = (event, forceClose) => {
-      if (event) {
-        event.preventDefault();
-      }
-      this.setState({
-        menuOpen: forceClose ? false : !this.state.menuOpen
-      });
-    };
-  }
+  state = {
+    menuOpen: false
+  };
   async componentDidMount() {
     const cart = await (0, _getCart.default)();
     this.props.dispatch({
@@ -153,6 +142,14 @@ class AppAppBar extends React.Component {
       payload: user
     });
   }
+  handleToggleMenu = (event, forceClose) => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.setState({
+      menuOpen: forceClose ? false : !this.state.menuOpen
+    });
+  };
   render() {
     const {
       classes,

package/node/v5.0.0/jss-to-styled.test/first.expected.js

@@ -140,20 +140,9 @@ const StyledAppBar = (0, _styles.styled)(_AppBar.default)(({
   }
 }));
 class AppAppBar extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      menuOpen: false
-    };
-    this.handleToggleMenu = (event, forceClose) => {
-      if (event) {
-        event.preventDefault();
-      }
-      this.setState({
-        menuOpen: forceClose ? false : !this.state.menuOpen
-      });
-    };
-  }
+  state = {
+    menuOpen: false
+  };
   async componentDidMount() {
     const cart = await (0, _getCart.default)();
     this.props.dispatch({
@@ -169,6 +158,14 @@ class AppAppBar extends React.Component {
       payload: user
     });
   }
+  handleToggleMenu = (event, forceClose) => {
+    if (event) {
+      event.preventDefault();
+    }
+    this.setState({
+      menuOpen: forceClose ? false : !this.state.menuOpen
+    });
+  };
   render() {
     const {
       children,

package/node/v5.0.0/jss-to-styled.test/seventh.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _makeStyles = _interopRequireDefault(require("@material-ui/styles/makeStyles"));
 var _CircularProgress2 = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
@@ -82,7 +81,7 @@ function Iframe(props) {
     children: [loaded === false ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.loader,
       children: _CircularProgress || (_CircularProgress = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress2.default, {}))
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", (0, _extends2.default)({
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
       className: classes.iframe,
       title: "body",
       style: {
@@ -96,8 +95,9 @@ function Iframe(props) {
         }
         setLoaded(true);
       },
-      frameBorder: "0"
-    }, props))]
+      frameBorder: "0",
+      ...props
+    })]
   });
 }
 var _default = exports.default = Iframe;

package/node/v5.0.0/jss-to-styled.test/seventh.expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _CircularProgress2 = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
@@ -86,7 +85,7 @@ function Iframe(props) {
     children: [loaded === false ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classes.loader,
       children: _CircularProgress || (_CircularProgress = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress2.default, {}))
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", (0, _extends2.default)({
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
       className: classes.iframe,
       title: "body",
       style: {
@@ -100,8 +99,9 @@ function Iframe(props) {
         }
         setLoaded(true);
       },
-      frameBorder: "0"
-    }, props))]
+      frameBorder: "0",
+      ...props
+    })]
   });
 }
 var _default = exports.default = Iframe;

package/node/v5.0.0/jss-to-styled.test/sixth.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -43,10 +42,11 @@ const styles = theme => ({
 });
 
 // eslint-disable-next-line react/display-name
-const LinkToCart = /*#__PURE__*/React.forwardRef((linkProps, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, (0, _extends2.default)({}, linkProps, {
+const LinkToCart = /*#__PURE__*/React.forwardRef((linkProps, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+  ...linkProps,
   to: "/order-cart/",
   ref: ref
-})));
+}));
 function AppAppBarCart(props) {
   const {
     classes,

package/node/v5.0.0/jss-to-styled.test/sixth.expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -52,10 +51,11 @@ const StyledIconButton = (0, _styles.styled)(_IconButton.default)(({
 }));
 
 // eslint-disable-next-line react/display-name
-const LinkToCart = /*#__PURE__*/React.forwardRef((linkProps, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, (0, _extends2.default)({}, linkProps, {
+const LinkToCart = /*#__PURE__*/React.forwardRef((linkProps, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
+  ...linkProps,
   to: "/order-cart/",
   ref: ref
-})));
+}));
 function AppAppBarCart(props) {
   const {
     className,

package/node/v5.0.0/jss-to-styled.test/withCreateStyles.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _createStyles = _interopRequireDefault(require("@material-ui/styles/createStyles"));
 var _makeStyles = _interopRequireDefault(require("@material-ui/styles/makeStyles"));
@@ -19,8 +18,9 @@ const useStyles = (0, _makeStyles.default)(theme => (0, _createStyles.default)({
 }));
 const MyComponent = props => {
   const classes = useStyles();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-styled.test/withCreateStyles.expected.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,8 +21,9 @@ const Root = (0, _styles.styled)('div')(({
   }
 }));
 const MyComponent = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-styled.test/withCreateStyles1.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _createStyles = _interopRequireDefault(require("@material-ui/styles/createStyles"));
 var _withStyles = _interopRequireDefault(require("@material-ui/styles/withStyles"));
@@ -21,8 +20,9 @@ const MyComponent = props => {
   const {
     classes
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = (0, _withStyles.default)(styles)(MyComponent);

package/node/v5.0.0/jss-to-styled.test/withCreateStyles1.expected.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,8 +22,9 @@ const Root = (0, _styles.styled)('div')(({
 }));
 const MyComponent = props => {
   const {} = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-styled.test/withCreateStyles2.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _createStyles = _interopRequireDefault(require("@material-ui/styles/createStyles"));
 var _withStyles = _interopRequireDefault(require("@material-ui/styles/withStyles"));
@@ -21,8 +20,9 @@ const MyComponent = props => {
   const {
     classes
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = (0, _withStyles.default)(styles)(MyComponent);

package/node/v5.0.0/jss-to-styled.test/withCreateStyles2.expected.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,8 +20,9 @@ const Root = (0, _styles.styled)('div')({
 });
 const MyComponent = props => {
   const {} = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-styled.test/withCreateStyles3.actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _createStyles = _interopRequireDefault(require("@material-ui/styles/createStyles"));
 var _makeStyles = _interopRequireDefault(require("@material-ui/styles/makeStyles"));
@@ -19,8 +18,9 @@ const useStyles = (0, _makeStyles.default)((0, _createStyles.default)({
 }));
 const MyComponent = props => {
   const classes = useStyles();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-styled.test/withCreateStyles3.expected.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -21,8 +19,9 @@ const Root = (0, _styles.styled)('div')({
   }
 });
 const MyComponent = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ...props,
     className: classes.root
-  }));
+  });
 };
 var _default = exports.default = MyComponent;

package/node/v5.0.0/jss-to-tss-react.test/actual-mixins-pattern.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ComponentUsingStyles;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("@material-ui/core/styles");
@@ -28,10 +27,12 @@ function cssProps() {
 const useStyles = (0, _styles.makeStyles)(theme => {
   return mixins();
 });
-const useStyles2 = (0, _styles.makeStyles)(theme => (0, _extends2.default)({}, mixins(), {
-  test2: (0, _extends2.default)({
-    color: "red"
-  }, cssProps())
+const useStyles2 = (0, _styles.makeStyles)(theme => ({
+  ...mixins(),
+  test2: {
+    color: "red",
+    ...cssProps()
+  }
 }));
 function ComponentUsingStyles(props) {
   const classes = useStyles();

package/node/v5.0.0/jss-to-tss-react.test/expected-mixins-pattern.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ComponentUsingStyles;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _mui = require("tss-react/mui");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +26,12 @@ function cssProps() {
 const useStyles = (0, _mui.makeStyles)()(theme => {
   return mixins();
 });
-const useStyles2 = (0, _mui.makeStyles)()(theme => (0, _extends2.default)({}, mixins(), {
-  test2: (0, _extends2.default)({
-    color: "red"
-  }, cssProps())
+const useStyles2 = (0, _mui.makeStyles)()(theme => ({
+  ...mixins(),
+  test2: {
+    color: "red",
+    ...cssProps()
+  }
 }));
 function ComponentUsingStyles(props) {
   const {

package/node/v5.0.0/preset-safe.test/actual.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _CssBaseline2 = _interopRequireDefault(require("@material-ui/core/CssBaseline"));
@@ -122,10 +121,11 @@ const Header = () => {
         className: classes.autocomplete,
         options: top100Films,
         getOptionLabel: option => option.title,
-        renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
+        renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          ...params,
           label: "Combo box",
           variant: "outlined"
-        })),
+        }),
         closeIcon: _Box2 || (_Box2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box4.default, {
           fontSize: 12,
           width: 20,
@@ -244,7 +244,9 @@ const withThemeProvider = Component => props => {
       injectFirst: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.MuiThemeProvider, {
         theme: theme,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, props))
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+          ...props
+        })
       })
     })
   });

package/node/v5.0.0/preset-safe.test/expected.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
@@ -34,9 +33,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _Box, _Box2, _CssBaseline, _Header, _Box3, _Grid, _DialogTitle, _DialogContent; // FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 DarkContext = /*#__PURE__*/React.createContext();
 const Test = withWidth()(props => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box4.default, {
   p: 2,
@@ -126,10 +126,11 @@ const Header = () => {
         className: classes.autocomplete,
         options: top100Films,
         getOptionLabel: option => option.title,
-        renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, params, {
+        renderInput: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+          ...params,
           label: "Combo box",
           variant: "outlined"
-        })),
+        }),
         clearIcon: _Box2 || (_Box2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box4.default, {
           fontSize: 12,
           width: 20,
@@ -251,7 +252,9 @@ const withThemeProvider = Component => props => {
         injectFirst: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
           theme: theme,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, props))
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+            ...props
+          })
         })
       })
     })

package/node/v5.0.0/table-props.test/actual.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, {
@@ -19,8 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     padding: "default"
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCell, {
     padding: "default"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, (0, _extends2.default)({
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, {
     onChangeRowsPerPage: () => {},
-    onChangePage: () => {}
-  }, props))]
+    onChangePage: () => {},
+    ...props
+  })]
 });

package/node/v5.0.0/table-props.test/expected.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, {
@@ -19,8 +17,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     padding: "normal"
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableCell, {
     padding: "normal"
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, (0, _extends2.default)({
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePagination, {
     onRowsPerPageChange: () => {},
-    onPageChange: () => {}
-  }, props))]
+    onPageChange: () => {},
+    ...props
+  })]
 });

package/node/v5.0.0/theme-spacing.test/large-actual.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/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],