@mui/codemod 7.2.0 → 7.3.2

package/README.md

@@ -2156,6 +2156,27 @@ npx @mui/codemod@latest deprecations/typography-props <path>
 
 ### v7.0.0
 
+#### `theme-color-functions`
+
+```bash
+npx @mui/codemod@latest v7.0.0/theme-color-functions <path>
+```
+
+Replace the usage of the `alpha()`, `lighten()`, and `darken()` functions from `@mui/system/colorManipulator` to use the `theme` object instead.
+
+```diff
+- import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+
+- alpha(theme.palette.primary.main, 0.8)
++ theme.alpha((theme.vars || theme).palette.primary.main, 0.8)
+
+- lighten(theme.palette.primary.main, 0.1)
++ theme.lighten(theme.palette.primary.main, 0.1)
+
+- darken(theme.palette.primary.main, 0.3)
++ theme.darken(theme.palette.primary.main, 0.3)
+```
+
 #### `grid-props`
 
 <!-- #npm-tag-reference -->
@@ -3445,6 +3466,26 @@ npx @mui/codemod@latest v5.0.0/pagination-round-circular <path>
 
 You can find more details about this breaking change in [the migration guide](https://mui.com/material-ui/migration/v5-component-changes/#pagination).
 
+#### `path-imports`
+
+Converts all `@mui/material` & `@mui/icons-material` top-level imports to path imports (essentially the reverse of `top-level-imports`, with the addition of `@mui/icons-material`):
+
+```diff
+-import { List, Grid } from '@mui/material';
++import List from '@mui/material/List';
++import Grid from '@mui/material/Grid';
+
+-import { Delete, People as PeopleIcon } from '@mui/icons-material';
++import Delete from '@mui/icons-material/Delete';
++import PeopleIcon from '@mui/icons-material/People';
+```
+
+```bash
+npx @mui/codemod@latest v5.0.0/path-imports <path>
+```
+
+Head to https://mui.com/material-ui/guides/minimizing-bundle-size/ to understand when it's useful.
+
 #### `optimal-imports`
 
 Fix private import paths.
@@ -3698,7 +3739,7 @@ Converts all `@mui/material` submodule imports to the root module:
 npx @mui/codemod@latest v5.0.0/top-level-imports <path>
 ```
 
-Head to https://mui.com/guides/minimizing-bundle-size/ to understand when it's useful.
+Head to https://mui.com/material-ui/guides/minimizing-bundle-size/ to understand when it's useful.
 
 #### `transitions`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/codemod",
-  "version": "7.2.0",
+  "version": "7.3.2",
   "author": "MUI Team",
   "description": "Codemod scripts for Material UI.",
   "bin": "./codemod.js",
@@ -23,32 +23,24 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/runtime": "^7.27.6",
-    "@babel/traverse": "^7.27.4",
+    "@babel/core": "^7.28.3",
+    "@babel/runtime": "^7.28.3",
+    "@babel/traverse": "^7.28.3",
     "jscodeshift": "^17.1.2",
     "jscodeshift-add-imports": "^1.0.11",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "yargs": "^17.7.2"
   },
-  "devDependencies": {
-    "@types/chai": "^4.3.20",
-    "@types/jscodeshift": "0.12.0",
-    "chai": "^4.5.0"
-  },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "engines": {
     "node": ">=14.0.0"
   },
-  "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.?(c|m)[jt]s?(x)'",
-    "prebuild": "rimraf build",
-    "build": "node ../../scripts/build.mjs node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build",
-    "release": "pnpm build && pnpm publish"
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json"
   }
 }

package/util/migrateToVariants.js

@@ -121,9 +121,9 @@ const getObjectToArrowFunction = j => {
     /**
      *
      * @param {import('jscodeshift').ObjectExpression} objectExpression
-     * @param {import('jscodeshift').BinaryExpression} addtional
+     * @param {import('jscodeshift').BinaryExpression} additional
      */
-    function objectToArrowFunction(objectExpression, addtional) {
+    function objectToArrowFunction(objectExpression, additional) {
       const paramKeys = new Set();
       let left;
       objectExpression.properties.forEach((prop, index) => {
@@ -135,10 +135,10 @@ const getObjectToArrowFunction = j => {
           left = j.logicalExpression('&&', left, result);
         }
       });
-      if (addtional) {
-        paramKeys.add(getObjectKey(addtional.left).name);
+      if (additional) {
+        paramKeys.add(getObjectKey(additional.left).name);
       }
-      return buildArrowFunctionAST(paramKeys, addtional ? j.logicalExpression('&&', left, addtional) : left);
+      return buildArrowFunctionAST(paramKeys, additional ? j.logicalExpression('&&', left, additional) : left);
     }
   );
 };

package/v1.0.0/color-imports.js

@@ -30,7 +30,7 @@ function colorImportPath(colorPalette) {
 /**
  * Replace all expressions that use identifier to access color palettes.
  * e.g. colors.amber100 -> colors.amber['100']
- * @param {sting} identifier
+ * @param {string} identifier
  * @param {jscodeshift_api_object} j
  * @param {jscodeshift_ast_object} root
  */

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

@@ -164,7 +164,9 @@ class AppAppBar extends React.Component {
       essential: essential,
       position: position,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx.default)(classes.wrap, menuOpen && classes.wrapOpened),
+        className: (0, _clsx.default)(classes.wrap, {
+          [classes.wrapOpened]: menuOpen
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
           to: "/",
           "aria-label": "Back to homepage",
@@ -173,7 +175,10 @@ class AppAppBar extends React.Component {
             color: menuOpen ? 'inherit' : 'textPrimary'
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx.default)(classes.content, menuOpen && [classes.contentOpened, 'mui-fixed']),
+          className: (0, _clsx.default)(classes.content, {
+            [classes.contentOpened]: menuOpen,
+            'mui-fixed': menuOpen
+          }),
           children: [children || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: classes.grow
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -197,9 +202,13 @@ class AppAppBar extends React.Component {
             href: "#",
             onClick: this.handleToggleMenu,
             children: menuOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
-              className: (0, _clsx.default)(classes.menuIcon, classes.closeIcon, classes.white, menuOpen && classes.hide)
+              className: (0, _clsx.default)(classes.menuIcon, classes.closeIcon, classes.white, {
+                [classes.hide]: menuOpen
+              })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
-              className: (0, _clsx.default)(classes.menuIcon, classes.burgerIcon, menuOpen && classes.hide)
+              className: (0, _clsx.default)(classes.menuIcon, classes.burgerIcon, {
+                [classes.hide]: menuOpen
+              })
             })
           })
         })]
@@ -207,13 +216,13 @@ class AppAppBar extends React.Component {
     });
   }
 }
-process.env.NODE_ENV !== "production" ? AppAppBar.propTypes = {
+AppAppBar.propTypes = {
   children: _propTypes.default.node,
   classes: _propTypes.default.object.isRequired,
   essential: _propTypes.default.bool,
   position: _propTypes.default.string,
   user: _propTypes.default.object
-} : void 0;
+};
 var _default = exports.default = (0, _recompose.compose)((0, _withStyles.default)(styles, {
   name: 'AppAppBar'
 }), (0, _reactRedux.connect)(state => ({

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

@@ -179,7 +179,9 @@ class AppAppBar extends React.Component {
       essential: essential,
       position: position,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _clsx.default)(classes.wrap, menuOpen && classes.wrapOpened),
+        className: (0, _clsx.default)(classes.wrap, {
+          [classes.wrapOpened]: menuOpen
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.default, {
           to: "/",
           "aria-label": "Back to homepage",
@@ -188,7 +190,10 @@ class AppAppBar extends React.Component {
             color: menuOpen ? 'inherit' : 'textPrimary'
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _clsx.default)(classes.content, menuOpen && [classes.contentOpened, 'mui-fixed']),
+          className: (0, _clsx.default)(classes.content, {
+            [classes.contentOpened]: menuOpen,
+            'mui-fixed': menuOpen
+          }),
           children: [children || /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: classes.grow
           }), essential ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
@@ -212,9 +217,13 @@ class AppAppBar extends React.Component {
             href: "#",
             onClick: this.handleToggleMenu,
             children: menuOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
-              className: (0, _clsx.default)(classes.menuIcon, classes.closeIcon, classes.white, menuOpen && classes.hide)
+              className: (0, _clsx.default)(classes.menuIcon, classes.closeIcon, classes.white, {
+                [classes.hide]: menuOpen
+              })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.default, {
-              className: (0, _clsx.default)(classes.menuIcon, classes.burgerIcon, menuOpen && classes.hide)
+              className: (0, _clsx.default)(classes.menuIcon, classes.burgerIcon, {
+                [classes.hide]: menuOpen
+              })
             })
           })
         })]
@@ -222,13 +231,13 @@ class AppAppBar extends React.Component {
     });
   }
 }
-process.env.NODE_ENV !== "production" ? AppAppBar.propTypes = {
+AppAppBar.propTypes = {
   children: _propTypes.default.node,
   classes: _propTypes.default.object.isRequired,
   essential: _propTypes.default.bool,
   position: _propTypes.default.string,
   user: _propTypes.default.object
-} : void 0;
+};
 var _default = exports.default = (0, _recompose.compose)((0, _reactRedux.connect)(state => ({
   user: state.data.user
 })))(AppAppBar);

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

@@ -68,7 +68,9 @@ function AppAppBarCart(props) {
     }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
       color: "primary",
       classes: {
-        badge: (0, _clsx.default)(classes.badge, transparent && classes.transparentBadge)
+        badge: (0, _clsx.default)(classes.badge, {
+          [classes.transparentBadge]: transparent
+        })
       },
       badgeContent: count > 9 ? '+9' : count,
       children: ''
@@ -76,12 +78,12 @@ function AppAppBarCart(props) {
   });
 }
 AppAppBarCart.displayName = 'AppAppBarCart';
-process.env.NODE_ENV !== "production" ? AppAppBarCart.propTypes = {
+AppAppBarCart.propTypes = {
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['text', 'icon']),
   transparent: _propTypes.default.bool
-} : void 0;
+};
 AppAppBarCart.defaultProps = {
   variant: 'icon'
 };

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

@@ -76,7 +76,9 @@ function AppAppBarCart(props) {
     }), count > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
       color: "primary",
       classes: {
-        badge: (0, _clsx.default)(classes.badge, transparent && classes.transparentBadge)
+        badge: (0, _clsx.default)(classes.badge, {
+          [classes.transparentBadge]: transparent
+        })
       },
       badgeContent: count > 9 ? '+9' : count,
       children: ''
@@ -84,12 +86,12 @@ function AppAppBarCart(props) {
   });
 }
 AppAppBarCart.displayName = 'AppAppBarCart';
-process.env.NODE_ENV !== "production" ? AppAppBarCart.propTypes = {
+AppAppBarCart.propTypes = {
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['text', 'icon']),
   transparent: _propTypes.default.bool
-} : void 0;
+};
 AppAppBarCart.defaultProps = {
   variant: 'icon'
 };

package/v5.0.0/path-imports.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = transformer;
+var _jscodeshiftAddImports = _interopRequireDefault(require("jscodeshift-add-imports"));
+// istanbul ignore next
+if (process.env.NODE_ENV === 'test') {
+  const resolve = require.resolve;
+  require.resolve = source => resolve(source.replace(/^@mui\/material\/modern/, '../../../mui-material/src'));
+}
+const barrelImportsToTransform = {
+  material: {},
+  'icons-material': {}
+};
+const muiImportRegExp = /^@mui\/([^/]+)$/;
+function transformer(fileInfo, api, options) {
+  const j = api.jscodeshift;
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true
+  };
+  const root = j(fileInfo.source);
+  root.find(j.ImportDeclaration).forEach(path => {
+    if (!path.node.specifiers.length) {
+      return;
+    }
+    if (path.value.importKind && path.value.importKind !== 'value') {
+      return;
+    }
+    const importPath = path.value.source.value;
+    const match = importPath.match(muiImportRegExp);
+    if (!match) {
+      return;
+    }
+    const moduleName = match[1];
+    const importsToAdd = barrelImportsToTransform[moduleName];
+    if (!importsToAdd) {
+      return;
+    }
+    const indexesToPrune = [];
+    path.node.specifiers.forEach((specifier, index) => {
+      if (specifier.importKind && specifier.importKind !== 'value') {
+        return;
+      }
+      if (specifier.type === 'ImportNamespaceSpecifier') {
+        return;
+      }
+      if (specifier.type === 'ImportSpecifier') {
+        const name = specifier.imported.name;
+        if (moduleName === 'material') {
+          if (name === 'ThemeProvider' || name === 'createTheme') {
+            importsToAdd.styles ?? (importsToAdd.styles = []);
+            importsToAdd.styles.push(specifier);
+            indexesToPrune.push(index);
+            return;
+          }
+          if (name.endsWith('Classes')) {
+            const base = name.replace(/Classes$/, '');
+            const componentName = base.charAt(0).toUpperCase() + base.slice(1); // autocomplete → Autocomplete
+            importsToAdd[componentName] ?? (importsToAdd[componentName] = []);
+            importsToAdd[componentName].push(j.importSpecifier(specifier.imported, specifier.local));
+            indexesToPrune.push(index);
+            return;
+          }
+        }
+        importsToAdd[name] ?? (importsToAdd[name] = []);
+        importsToAdd[name].push(j.importDefaultSpecifier(specifier.local));
+        indexesToPrune.push(index);
+      }
+    });
+
+    // We prune imports starting with the highest index as otherwise subsequent indexes would become
+    // invalid once an index that comes before it gets pruned.
+    indexesToPrune.sort((a, b) => a - b).reverse();
+    indexesToPrune.forEach(index => path.get('specifiers', index).prune());
+    if (!path.node.specifiers.length) {
+      path.prune();
+    }
+  });
+  Object.entries(barrelImportsToTransform).forEach(([moduleName, importsToAdd]) => {
+    Object.entries(importsToAdd).forEach(([module, specifiers]) => {
+      const fullTargetModule = `@mui/${moduleName}/${module}`;
+      (0, _jscodeshiftAddImports.default)(root, j.importDeclaration(specifiers, j.stringLiteral(fullTargetModule)));
+    });
+  });
+  return root.toSource(printOptions);
+}

package/v5.0.0/path-imports.test/actual.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/styles");
+var _colors = require("@mui/material/colors");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");

package/v5.0.0/path-imports.test/expected.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/styles");
+var _colors = require("@mui/material/colors");
+var _styles2 = require("@mui/material/styles");
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _Tabs = _interopRequireDefault(require("@mui/material/Tabs"));
+var _Autocomplete = require("@mui/material/Autocomplete");
+var _BottomNavigationAction = _interopRequireDefault(require("@mui/material/BottomNavigationAction"));
+var _BottomNavigation = _interopRequireDefault(require("@mui/material/BottomNavigation"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+var _CardActions = _interopRequireDefault(require("@mui/material/CardActions"));
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardMedia = _interopRequireDefault(require("@mui/material/CardMedia"));
+var _CardHeader = _interopRequireDefault(require("@mui/material/CardHeader"));
+var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
+var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _ListItemAvatar = _interopRequireDefault(require("@mui/material/ListItemAvatar"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
+var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
+var _DialogContentText = _interopRequireDefault(require("@mui/material/DialogContentText"));
+var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
+var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
+var _Slide = _interopRequireDefault(require("@mui/material/Slide"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _AccordionActions = _interopRequireDefault(require("@mui/material/AccordionActions"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
+var _FormHelperText = _interopRequireDefault(require("@mui/material/FormHelperText"));
+var _FormGroup = _interopRequireDefault(require("@mui/material/FormGroup"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _FormLabel = _interopRequireDefault(require("@mui/material/FormLabel"));
+var _Fade = _interopRequireDefault(require("@mui/material/Fade"));
+var _StepContent = _interopRequireDefault(require("@mui/material/StepContent"));
+var _StepButton = _interopRequireDefault(require("@mui/material/StepButton"));
+var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
+var _TableRow = _interopRequireDefault(require("@mui/material/TableRow"));
+var _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
+var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
+var _TableBody = _interopRequireDefault(require("@mui/material/TableBody"));
+var _Table = _interopRequireDefault(require("@mui/material/Table"));
+var _TableHead = _interopRequireDefault(require("@mui/material/TableHead"));
+var _Tooltip = require("@mui/material/Tooltip");
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
+var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
+var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
+var _Zoom = _interopRequireDefault(require("@mui/material/Zoom"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _People = _interopRequireDefault(require("@mui/icons-material/People"));

package/v5.0.0/theme-spacing.test/large-actual.js

@@ -236,10 +236,10 @@ function DocSearchHit(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? DocSearchHit.propTypes = {
+DocSearchHit.propTypes = {
   children: _propTypes.default.node,
   hit: _propTypes.default.object.isRequired
-} : void 0;
+};
 function AppSearch() {
   (0, _useLazyCSS.default)('https://cdn.jsdelivr.net/npm/@docsearch/css@3.0.0-alpha.40/dist/style.min.css', '#app-search');
   const FADE_DURATION = 100; // ms

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

@@ -236,10 +236,10 @@ function DocSearchHit(props) {
     children: children
   });
 }
-process.env.NODE_ENV !== "production" ? DocSearchHit.propTypes = {
+DocSearchHit.propTypes = {
   children: _propTypes.default.node,
   hit: _propTypes.default.object.isRequired
-} : void 0;
+};
 function AppSearch() {
   (0, _useLazyCSS.default)('https://cdn.jsdelivr.net/npm/@docsearch/css@3.0.0-alpha.40/dist/style.min.css', '#app-search');
   const FADE_DURATION = 100; // ms

package/v5.0.0/top-level-imports.js

@@ -62,7 +62,7 @@ function transformer(fileInfo, api, options) {
             break;
           }
         case 'ImportSpecifier':
-          if (!whitelist.has(specifier.imported.name) == null && specifier.imported.name !== 'withStyles') {
+          if (!whitelist.has(specifier.imported.name) && specifier.imported.name !== 'withStyles') {
             return;
           }
           resultSpecifiers.push(specifier);

package/v5.0.0/top-level-imports.test/actual.js

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
-var _material = require("@mui/material");
 var _styles2 = require("@mui/material/styles");
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
@@ -59,4 +58,5 @@ var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
 var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
 var _Zoom = _interopRequireDefault(require("@mui/material/Zoom"));
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
-var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
+var _colors = require("@mui/material/colors");

package/v5.0.0/top-level-imports.test/expected.js

@@ -3,4 +3,6 @@
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
+var _styles2 = require("@mui/material/styles");
+var _colors = require("@mui/material/colors");
 var _material = require("@mui/material");

package/v6.0.0/styled/styled-v6.js

@@ -29,7 +29,7 @@ function styledV6(file, api, options) {
       args = path.node.arguments;
     }
 
-    // 1. collecting styles that should be tranformed
+    // 1. collecting styles that should be transformed
     args.forEach(arg => {
       if (arg.type === 'ArrowFunctionExpression' && arg.params[0] && arg.params[0].type === 'ObjectPattern') {
         styles.push(arg);

package/v6.0.0/theme-v6/theme-v6.js

@@ -23,7 +23,7 @@ function themeV6(file, api, options) {
       args = [path.node];
     }
 
-    // 1. collecting styles that should be tranformed
+    // 1. collecting styles that should be transformed
     args.forEach(arg => {
       if (arg.type === 'ArrowFunctionExpression' && arg.params[0] && arg.params[0].type === 'ObjectPattern') {
         styles.push(arg);

package/v7.0.0/theme-color-functions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _themeColorFunctions.default;
+  }
+});
+var _themeColorFunctions = _interopRequireDefault(require("./theme-color-functions"));

package/v7.0.0/theme-color-functions/test-cases/actual.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Value = styled('div')(({
+  theme
+}) => ({
+  width: '100%',
+  height: '100%',
+  lineHeight: '100%',
+  paddingRight: 8,
+  fontVariantNumeric: 'tabular-nums',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  '&.good': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.success.mainChannel} /  0.3)` : (0, _colorManipulator.alpha)(theme.palette.success.main, 0.3)
+  },
+  '&.bad': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.error.mainChannel} /  0.3)` : (0, _colorManipulator.alpha)(theme.palette.error.main, 0.3)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/darken-basic.actual.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Button = styled('button')(({
+  theme
+}) => ({
+  backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.1),
+  '&:active': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.3)
+  },
+  '&:disabled': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.action.disabled, 0.1)
+  }
+}));
+const Card = styled('div')(({
+  theme
+}) => ({
+  boxShadow: `0 2px 4px ${(0, _colorManipulator.darken)(theme.palette.background.paper, 0.15)}`,
+  borderColor: (0, _colorManipulator.darken)(theme.palette.divider, 0.2)
+}));

package/v7.0.0/theme-color-functions/test-cases/darken-basic.expected.js

@@ -0,0 +1,19 @@
+"use strict";
+
+const Button = styled('button')(({
+  theme
+}) => ({
+  backgroundColor: theme.darken(theme.palette.primary.main, 0.1),
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.3)
+  },
+  '&:disabled': {
+    backgroundColor: theme.darken(theme.palette.action.disabled, 0.1)
+  }
+}));
+const Card = styled('div')(({
+  theme
+}) => ({
+  boxShadow: `0 2px 4px ${theme.darken(theme.palette.background.paper, 0.15)}`,
+  borderColor: theme.darken(theme.palette.divider, 0.2)
+}));