init project

packages/mui-codemod/.npmignore

@@ -0,0 +1,4 @@
+/*
+!/src/*.js
+!/lib/*.js
+*.test.js

packages/mui-codemod/CONTRIBUTING.md

@@ -0,0 +1,64 @@
+# Contributing
+
+## Understanding the codemod
+
+The codemod is a tool that helps developers migrate their codebase when we introduce changes in a new version. The changes could be deprecations, enhancements, or breaking changes.
+
+The codemods for JavaScript files are based on [jscodeshift](https://github.com/facebook/jscodeshift) which is a wrapper of [recast](https://github.com/benjamn/recast).
+
+The codemods for CSS files are based on [postcss](https://github.com/postcss/postcss).
+
+## Adding a new codemod
+
+1. Create a new folder in `packages/mui-codemod/src/*/*` with the name of the codemod.
+2. The folder should include:
+   - `<codemod>.js` - the transform implementation
+   - `index.js` - exports the transform function
+   - `postcss-plugin.js` - the postcss plugin (optional)
+   - `postcss.config.js` - the postcss config file (optional)
+   - `<codemod>.test.js` - tests for the codemods (use jscodeshift from the `testUtils` folder)
+   - `test-cases` - folder with fixtures for the codemod
+     - `actual.js` - the input for the codemod
+     - `expected.js` - the expected output of the codemod
+     - `actual.css` - the input for the postcss plugin (optional)
+     - `expected.css` - the expected output of the postcss plugin (optional)
+3. Use [astexplorer](https://astexplorer.net/) to check the AST types and properties
+   - For JavaScript codemods set </> to @babel/parser because we use [`tsx`](https://github.com/benjamn/recast/blob/master/parsers/babel.ts) as a default parser.
+   - For CSS codemods set </> to postcss
+4. [Test the codemod locally](#local)
+5. Add the codemod to README.md
+
+## Testing
+
+I recommend to follow these steps to test the codemod:
+
+- Create an `actual.js` file with the code you want to transform.
+- Run [local](#local) transformation to check if the codemod is correct.
+- Copy the transformed code to `expected.js`.
+- Run `pnpm tc <codemod>` to final check if the codemod is correct.
+
+💡 The reason that I don't recommend creating the `expected.js` and run the test with `pnpm` script is because the transformation is likely not pretty-printed and it's hard to compare the output with the expected output.
+
+### Local transformation (while developing)
+
+Open the terminal at root directory and run the codemod to test the transformation, for example, testing the `accordion-props` codemod:
+
+```bash
+node packages/mui-codemod/codemod deprecations/accordion-props packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js
+```
+
+### CI (after opening a PR)
+
+To simulate a consumer-facing experience on any project before merging the PR, open the CodeSandbox CI build and copy the link from the "Local Install Instructions" section.
+
+Run the codemod to test the transformation:
+
+```bash
+npx @mui/codemod@<link> <codemod> <path>
+```
+
+For example:
+
+```bash
+npx @mui/codemod@https://pkg.csb.dev/mui/material-ui/commit/39bf9464/@mui/codemod deprecations/accordion-props docs/src/modules/brandingTheme.ts
+```

packages/mui-codemod/codemod.js

@@ -0,0 +1,215 @@
+#!/usr/bin/env node
+
+const childProcess = require('child_process');
+const { promises: fs } = require('fs');
+const path = require('path');
+const yargs = require('yargs');
+const jscodeshiftPackage = require('jscodeshift/package.json');
+const postcssCliPackage = require('postcss-cli/package.json');
+
+const jscodeshiftDirectory = path.dirname(require.resolve('jscodeshift'));
+const jscodeshiftExecutable = path.join(jscodeshiftDirectory, jscodeshiftPackage.bin.jscodeshift);
+
+const postcssCliDirectory = path.dirname(require.resolve('postcss-cli'));
+const postcssExecutable = path.join(postcssCliDirectory, postcssCliPackage.bin.postcss);
+
+async function runJscodeshiftTransform(transform, files, flags, codemodFlags) {
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/index.js`),
+    path.resolve(__dirname, './src', `${transform}.js`),
+    path.resolve(__dirname, './', `${transform}/index.js`),
+    path.resolve(__dirname, './', `${transform}.js`),
+  ];
+
+  let transformerPath;
+  let error;
+  for (const item of paths) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await fs.stat(item);
+      error = undefined;
+      transformerPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    if (error?.code === 'ENOENT') {
+      throw new Error(
+        `Transform '${transform}' not found. Check out ${path.resolve(
+          __dirname,
+          './README.md for a list of available codemods.',
+        )}`,
+      );
+    }
+    throw error;
+  }
+
+  const args = [
+    // can't directly spawn `jscodeshiftExecutable` due to https://github.com/facebook/jscodeshift/issues/424
+    jscodeshiftExecutable,
+    '--transform',
+    transformerPath,
+    ...codemodFlags,
+    '--extensions',
+    'js,ts,jsx,tsx,json',
+    '--parser',
+    flags.parser || 'tsx',
+    '--ignore-pattern',
+    '**/node_modules/**',
+    '--ignore-pattern',
+    '**/*.css',
+  ];
+
+  if (flags.dry) {
+    args.push('--dry');
+  }
+  if (flags.print) {
+    args.push('--print');
+  }
+  if (flags.jscodeshift) {
+    args.push(flags.jscodeshift);
+  }
+  if (flags.packageName) {
+    args.push(`--packageName=${flags.packageName}`);
+  }
+
+  args.push(...files);
+
+  // eslint-disable-next-line no-console -- debug information
+  console.log(`Executing command: jscodeshift ${args.join(' ')}`);
+  const jscodeshiftProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
+
+  if (jscodeshiftProcess.error) {
+    throw jscodeshiftProcess.error;
+  }
+}
+
+const parseCssFilePaths = async (files) => {
+  const cssFiles = await Promise.all(
+    files.map(async (filePath) => {
+      const stat = await fs.stat(filePath);
+      if (stat.isDirectory()) {
+        return `${filePath}/**/*.css`;
+      }
+      if (filePath.endsWith('.css')) {
+        return filePath;
+      }
+
+      return null;
+    }),
+  );
+
+  return cssFiles.filter(Boolean);
+};
+
+async function runPostcssTransform(transform, files) {
+  // local postcss plugins are loaded through config files https://github.com/postcss/postcss-load-config/issues/17#issuecomment-253125559
+  const paths = [
+    path.resolve(__dirname, './src', `${transform}/postcss.config.js`),
+    path.resolve(__dirname, './', `${transform}/postcss.config.js`),
+  ];
+
+  let configPath;
+  let error;
+  for (const item of paths) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await fs.stat(item);
+      error = undefined;
+      configPath = item;
+      break;
+    } catch (srcPathError) {
+      error = srcPathError;
+      continue;
+    }
+  }
+
+  if (error) {
+    // don't throw if the file is not found, postcss transform is optional
+    if (error?.code !== 'ENOENT') {
+      throw error;
+    }
+  } else {
+    const cssPaths = await parseCssFilePaths(files);
+
+    if (cssPaths.length > 0) {
+      const args = [
+        postcssExecutable,
+        ...cssPaths,
+        '--config',
+        configPath,
+        '--replace',
+        '--verbose',
+      ];
+
+      // eslint-disable-next-line no-console -- debug information
+      console.log(`Executing command: postcss ${args.join(' ')}`);
+      const postcssProcess = childProcess.spawnSync('node', args, { stdio: 'inherit' });
+
+      if (postcssProcess.error) {
+        throw postcssProcess.error;
+      }
+    }
+  }
+}
+
+function run(argv) {
+  const { codemod, paths, ...flags } = argv;
+  const files = paths.map((filePath) => path.resolve(filePath));
+
+  runJscodeshiftTransform(codemod, files, flags, argv._);
+  runPostcssTransform(codemod, files);
+}
+
+yargs
+  .command({
+    command: '$0 <codemod> <paths...>',
+    describe: 'Applies a `@mui/codemod` to the specified paths',
+    builder: (command) => {
+      return command
+        .positional('codemod', {
+          description: 'The name of the codemod',
+          type: 'string',
+        })
+        .positional('paths', {
+          array: true,
+          description: 'Paths forwarded to `jscodeshift`',
+          type: 'string',
+        })
+        .option('dry', {
+          description: 'dry run (no changes are made to files)',
+          default: false,
+          type: 'boolean',
+        })
+        .option('parser', {
+          description: 'which parser for jscodeshift to use',
+          default: 'tsx',
+          type: 'string',
+        })
+        .option('print', {
+          description: 'print transformed files to stdout, useful for development',
+          default: false,
+          type: 'boolean',
+        })
+        .option('jscodeshift', {
+          description: '(Advanced) Pass options directly to jscodeshift',
+          default: false,
+          type: 'string',
+        })
+        .option('packageName', {
+          description: 'The package name to look for in the import statements',
+          default: '@mui/material',
+          type: 'string',
+        });
+    },
+    handler: run,
+  })
+  .scriptName('npx @mui/codemod')
+  .example('$0 v4.0.0/theme-spacing-api src')
+  .example('$0 v5.0.0/component-rename-prop src -- --component=Grid --from=prop --to=newProp')
+  .help()
+  .parse();

packages/mui-codemod/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@mui/codemod",
+  "version": "7.3.6",
+  "author": "MUI Team",
+  "description": "Codemod scripts for Material UI.",
+  "bin": "./codemod.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "mui",
+    "codemod",
+    "jscodeshift"
+  ],
+  "scripts": {
+    "test": "pnpm --workspace-root test:unit --project \"*:@mui/codemod\"",
+    "build": "code-infra build --bundle cjs --buildTypes false --copy codemod.js",
+    "release": "pnpm build && pnpm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/material-ui.git",
+    "directory": "packages/mui-codemod"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-codemod",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "dependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@babel/traverse": "^7.28.5",
+    "jscodeshift": "^17.1.2",
+    "jscodeshift-add-imports": "^1.0.11",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@mui/material-v5": "npm:@mui/material@5.18.0",
+    "@types/chai": "^5.2.3",
+    "@types/jscodeshift": "0.12.0",
+    "chai": "^6.0.1"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "directory": "build"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

packages/mui-codemod/src/deprecations/accordion-props/accordion-props.js

@@ -0,0 +1,30 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Accordion',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Accordion',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/accordion-props/accordion-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './accordion-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('accordion-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] accordion-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[custom package] accordion-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/accordion-props/index.js

@@ -0,0 +1 @@
+export { default } from './accordion-props';

packages/mui-codemod/src/deprecations/accordion-props/test-cases/actual.js

@@ -0,0 +1,32 @@
+import Accordion from '@mui/material/Accordion';
+import { Accordion as MyAccordion } from '@mui/material';
+
+<Accordion TransitionComponent={CustomTransition} TransitionProps={{ unmountOnExit: true }} />;
+<MyAccordion TransitionComponent={CustomTransition} TransitionProps={transitionVars} />;
+<Accordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    root: 'div',
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }}
+/>;
+<MyAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    ...outerSlots,
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }}
+/>;
+<Accordion TransitionComponent={ComponentTransition} slots={{ transition: SlotTransition }} />;
+<Accordion TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/expected.js

@@ -0,0 +1,42 @@
+import Accordion from '@mui/material/Accordion';
+import { Accordion as MyAccordion } from '@mui/material';
+
+<Accordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: { unmountOnExit: true }
+}} />;
+<MyAccordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: transitionVars
+}} />;
+<Accordion
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+    transition: { unmountOnExit: true }
+  }} />;
+<MyAccordion
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+    transition: { unmountOnExit: true }
+  }} />;
+<Accordion slots={{ transition: SlotTransition }} />;
+<Accordion
+  slotProps={{ transition: {
+    ...{ unmountOnExit: true },
+    ...{ id: 'test' }
+  } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.actual.js

@@ -0,0 +1,34 @@
+import Accordion from '@org/ui/material/Accordion';
+import { Accordion as MyAccordion } from '@org/ui/material';
+
+<Accordion TransitionProps={{ unmountOnExit: true }} slots={{
+  transition: CustomTransition
+}} />;
+<MyAccordion TransitionProps={transitionVars} slots={{
+  transition: CustomTransition
+}} />;
+<Accordion
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+  }} />;
+<MyAccordion
+  TransitionProps={{ unmountOnExit: true }}
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+  }} />;
+<Accordion slots={{ transition: SlotTransition }} />;
+<Accordion TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/package.expected.js

@@ -0,0 +1,42 @@
+import Accordion from '@org/ui/material/Accordion';
+import { Accordion as MyAccordion } from '@org/ui/material';
+
+<Accordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: { unmountOnExit: true }
+}} />;
+<MyAccordion slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: transitionVars
+}} />;
+<Accordion
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    root: { className: 'foo' },
+    transition: { unmountOnExit: true }
+  }} />;
+<MyAccordion
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    ...outerSlotProps,
+    transition: { unmountOnExit: true }
+  }} />;
+<Accordion slots={{ transition: SlotTransition }} />;
+<Accordion
+  slotProps={{ transition: {
+    ...{ unmountOnExit: true },
+    ...{ id: 'test' }
+  } }} />;
+// should skip non MUI components
+<NonMuiAccordion
+  TransitionComponent={CustomTransition}
+  TransitionProps={{ unmountOnExit: true }}
+/>;

packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.actual.js

@@ -0,0 +1,26 @@
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: { unmountOnExit: true },
+    },
+  },
+});
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      slots: { transition: SlotTransition },
+    },
+  },
+});
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slotProps: { transition: { id: 'test' } },
+      TransitionProps: { unmountOnExit: true },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/accordion-props/test-cases/theme.expected.js

@@ -0,0 +1,32 @@
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: { unmountOnExit: true }
+      }
+    },
+  },
+});
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slots: { transition: SlotTransition }
+    },
+  },
+});
+
+fn({
+  MuiAccordion: {
+    defaultProps: {
+      slotProps: { transition: {
+        ...{ unmountOnExit: true },
+        ...{ id: 'test' }
+      } }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.js

@@ -0,0 +1,77 @@
+import { deprecatedClass, replacementSelector } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  // contentGutters is a special case as it's applied to the content child
+  // but gutters is applied to the parent element, so the gutter class needs to go on the parent
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) =>
+      path.node.source.value.match(
+        new RegExp(`^${options.packageName || '@mui/material'}(/AccordionSummary)?$`),
+      ),
+    )
+    .forEach((path) => {
+      path.node.specifiers.forEach((specifier) => {
+        if (
+          specifier.type === 'ImportSpecifier' &&
+          specifier.imported.name === 'accordionSummaryClasses'
+        ) {
+          root
+            .find(j.MemberExpression, {
+              object: { name: specifier.local.name },
+              property: { name: 'contentGutters' },
+            })
+            .forEach((memberExpression) => {
+              const parent = memberExpression.parentPath.parentPath.value;
+              if (parent.type === j.TemplateLiteral.name) {
+                const memberExpressionIndex = parent.expressions.findIndex(
+                  (expression) => expression === memberExpression.value,
+                );
+                const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+                if (precedingTemplateElement.value.raw.endsWith(' .')) {
+                  parent.expressions.splice(
+                    memberExpressionIndex,
+                    1,
+                    j.memberExpression(memberExpression.value.object, j.identifier('gutters')),
+                    j.memberExpression(memberExpression.value.object, j.identifier('content')),
+                  );
+                  parent.quasis.splice(
+                    memberExpressionIndex,
+                    1,
+                    j.templateElement(
+                      {
+                        raw: precedingTemplateElement.value.raw.replace(' ', ''),
+                        cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
+                      },
+                      false,
+                    ),
+                    j.templateElement({ raw: ' .', cooked: ' .' }, false),
+                  );
+                }
+              }
+            });
+        }
+      });
+    });
+
+  const selectorRegex = new RegExp(`^& ${deprecatedClass}`);
+  root
+    .find(
+      j.Literal,
+      (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+    )
+    .forEach((path) => {
+      path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
+    });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/accordion-summary-classes/accordion-summary-classes.test.js

@@ -0,0 +1,105 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './accordion-summary-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('accordion-summary-classes', () => {
+      describe('js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/actual.js') },
+            { jscodeshift },
+            { printOptions: { quote: 'single', trailingComma: true } },
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/expected.js') },
+            { jscodeshift },
+            {},
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('[package] js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.actual.js') },
+            { jscodeshift },
+            {
+              printOptions: { quote: 'single', trailingComma: true },
+              packageName: '@org/ui/material',
+            },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.expected.js') },
+            { jscodeshift },
+            { packageName: '@org/ui/material' },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('css-transform', () => {
+        it('transforms classes as needed', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('test-cases', () => {
+        it('should not be the same', () => {
+          const actualJS = read('./test-cases/actual.js');
+          const expectedJS = read('./test-cases/expected.js');
+          expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+          const actualCSS = read('./test-cases/actual.css');
+          const expectedCSS = read('./test-cases/expected.css');
+          expect(actualCSS).not.to.equal(
+            expectedCSS,
+            'The actual and expected should be different',
+          );
+        });
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/accordion-summary-classes/index.js

@@ -0,0 +1 @@
+export { default } from './accordion-summary-classes';

packages/mui-codemod/src/deprecations/accordion-summary-classes/postcss-plugin.js

@@ -0,0 +1,26 @@
+const deprecatedClass = '.MuiAccordionSummary-contentGutters';
+const replacementSelector = '.MuiAccordionSummary-gutters .MuiAccordionSummary-content';
+
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace ${deprecatedClass} with ${replacementSelector}`,
+    Rule(rule) {
+      const { selector } = rule;
+
+      // contentGutters is a special case as it's applied to the content child
+      // but gutters is applied to the parent element, so the gutter class needs to go on the parent
+
+      const selectorRegex = new RegExp(` ${deprecatedClass}`);
+      if (selector.match(selectorRegex)) {
+        rule.selector = selector.replace(selectorRegex, replacementSelector);
+      }
+    },
+  };
+};
+plugin.postcss = true;
+
+module.exports = {
+  plugin,
+  deprecatedClass,
+  replacementSelector,
+};

packages/mui-codemod/src/deprecations/accordion-summary-classes/postcss.config.js

@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+  plugins: [plugin],
+};

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.css

@@ -0,0 +1,3 @@
+.MuiAccordionSummary-root .MuiAccordionSummary-contentGutters {
+  color: red;
+}

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/actual.js

@@ -0,0 +1,57 @@
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '& .MuiAccordionSummary-contentGutters': {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`& .${accordionSummaryClasses.contentGutters}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+styled(Component)(() => {
+  return {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red',
+    },
+  };
+});
+
+styled(Component)(() => {
+  return {
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  }}
+/>;

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.css

@@ -0,0 +1,3 @@
+.MuiAccordionSummary-root.MuiAccordionSummary-gutters .MuiAccordionSummary-content {
+  color: red;
+}

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/expected.js

@@ -0,0 +1,57 @@
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+styled(Component)(() => {
+  return {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red',
+    },
+  };
+});
+
+styled(Component)(() => {
+  return {
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  }}
+/>;

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.actual.js

@@ -0,0 +1,57 @@
+import { accordionSummaryClasses } from '@org/ui/material/AccordionSummary';
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '& .MuiAccordionSummary-contentGutters': {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`& .${accordionSummaryClasses.contentGutters}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+styled(Component)(() => {
+  return {
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red',
+    },
+  };
+});
+
+styled(Component)(() => {
+  return {
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '& .MuiAccordionSummary-contentGutters': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`& .${accordionSummaryClasses.contentGutters}`]: {
+      color: 'red',
+    },
+  }}
+/>;

packages/mui-codemod/src/deprecations/accordion-summary-classes/test-cases/package.expected.js

@@ -0,0 +1,57 @@
+import { accordionSummaryClasses } from '@org/ui/material/AccordionSummary';
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+fn({
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: {
+        [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+styled(Component)(() => {
+  return {
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red',
+    },
+  };
+});
+
+styled(Component)(() => {
+  return {
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  };
+});
+
+<AccordionSummary
+  sx={{
+    '&.MuiAccordionSummary-gutters .MuiAccordionSummary-content': {
+      color: 'red',
+    },
+  }}
+/>;
+
+<AccordionSummary
+  sx={{
+    [`&.${accordionSummaryClasses.gutters} .${accordionSummaryClasses.content}`]: {
+      color: 'red',
+    },
+  }}
+/>;

packages/mui-codemod/src/deprecations/alert-classes/alert-classes.js

@@ -0,0 +1,84 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  classes.forEach(({ deprecatedClass, replacementSelector }) => {
+    root
+      .find(j.ImportDeclaration)
+      .filter((path) =>
+        path.node.source.value.match(
+          new RegExp(`^${options.packageName || '@mui/material'}(/Alert)?$`),
+        ),
+      )
+      .forEach((path) => {
+        path.node.specifiers.forEach((specifier) => {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'alertClasses') {
+            const deprecatedAtomicClass = deprecatedClass.replace('.MuiAlert-', '');
+            root
+              .find(j.MemberExpression, {
+                object: { name: specifier.local.name },
+                property: { name: deprecatedAtomicClass },
+              })
+              .forEach((memberExpression) => {
+                const parent = memberExpression.parentPath.parentPath.value;
+                if (parent.type === j.TemplateLiteral.name) {
+                  const memberExpressionIndex = parent.expressions.findIndex(
+                    (expression) => expression === memberExpression.value,
+                  );
+                  const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+                  const atomicClasses = replacementSelector
+                    .replaceAll('MuiAlert-', '')
+                    .split('.')
+                    .filter(Boolean);
+
+                  if (precedingTemplateElement.value.raw.endsWith('&.')) {
+                    parent.expressions.splice(
+                      memberExpressionIndex,
+                      1,
+                      j.memberExpression(
+                        memberExpression.value.object,
+                        j.identifier(atomicClasses[0]),
+                      ),
+                      j.memberExpression(
+                        memberExpression.value.object,
+                        j.identifier(atomicClasses[1]),
+                      ),
+                    );
+                    parent.quasis.splice(
+                      memberExpressionIndex,
+                      1,
+                      j.templateElement(
+                        {
+                          raw: precedingTemplateElement.value.raw,
+                          cooked: precedingTemplateElement.value.cooked,
+                        },
+                        false,
+                      ),
+                      j.templateElement({ raw: '.', cooked: '.' }, false),
+                    );
+                  }
+                }
+              });
+          }
+        });
+      });
+
+    const selectorRegex = new RegExp(`^&${deprecatedClass}`);
+
+    root
+      .find(
+        j.Literal,
+        (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+      )
+      .forEach((path) => {
+        path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
+      });
+  });
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/alert-classes/alert-classes.test.js

@@ -0,0 +1,105 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './alert-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('alert-classes', () => {
+      describe('js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/actual.js') },
+            { jscodeshift },
+            { printOptions: { quote: 'single', trailingComma: true } },
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/expected.js') },
+            { jscodeshift },
+            {},
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('[package] js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.actual.js') },
+            { jscodeshift },
+            {
+              printOptions: { quote: 'single', trailingComma: true },
+              packageName: '@org/ui/material',
+            },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.expected.js') },
+            { jscodeshift },
+            { packageName: '@org/ui/material' },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('css-transform', () => {
+        it('transforms classes as needed', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('test-cases', () => {
+        it('should not be the same', () => {
+          const actualJS = read('./test-cases/actual.js');
+          const expectedJS = read('./test-cases/expected.js');
+          expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+          const actualCSS = read('./test-cases/actual.css');
+          const expectedCSS = read('./test-cases/expected.css');
+          expect(actualCSS).not.to.equal(
+            expectedCSS,
+            'The actual and expected should be different',
+          );
+        });
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/alert-classes/index.js

@@ -0,0 +1 @@
+export { default } from './alert-classes';

packages/mui-codemod/src/deprecations/alert-classes/postcss-plugin.js

@@ -0,0 +1,39 @@
+const variants = ['standard', 'outlined', 'filled'];
+const colors = ['Success', 'Info', 'Warning', 'Error'];
+
+const classes = variants.reduce((acc, variant) => {
+  return acc.concat(
+    colors.map((color) => {
+      const deprecatedClass = `.MuiAlert-${variant}${color}`;
+      const replacementSelector = `.MuiAlert-${variant}.MuiAlert-color${color}`;
+
+      return {
+        deprecatedClass,
+        replacementSelector,
+      };
+    }),
+  );
+}, []);
+
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated Alert classes with new classes`,
+    Rule(rule) {
+      const { selector } = rule;
+
+      classes.forEach(({ deprecatedClass, replacementSelector }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    },
+  };
+};
+plugin.postcss = true;
+
+module.exports = {
+  plugin,
+  classes,
+};

packages/mui-codemod/src/deprecations/alert-classes/postcss.config.js

@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+  plugins: [plugin],
+};

packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.css

@@ -0,0 +1,47 @@
+.MuiAlert-standardSuccess {
+  color: red;
+}
+
+.MuiAlert-standardInfo {
+  color: red;
+}
+
+.MuiAlert-standardWarning {
+  color: red;
+}
+
+.MuiAlert-standardError {
+  color: red;
+}
+
+.MuiAlert-outlinedSuccess {
+  color: red;
+}
+
+.MuiAlert-outlinedInfo {
+  color: red;
+}
+
+.MuiAlert-outlinedWarning {
+  color: red;
+}
+
+.MuiAlert-outlinedError {
+  color: red;
+}
+
+.MuiAlert-filledSuccess {
+  color: red;
+}
+
+.MuiAlert-filledInfo {
+  color: red;
+}
+
+.MuiAlert-filledWarning {
+  color: red;
+}
+
+.MuiAlert-filledError {
+  color: red;
+}

packages/mui-codemod/src/deprecations/alert-classes/test-cases/actual.js

@@ -0,0 +1,26 @@
+import { alertClasses } from '@mui/material/Alert';
+
+('&.MuiAlert-standardSuccess');
+('&.MuiAlert-standardInfo');
+('&.MuiAlert-standardWarning');
+('&.MuiAlert-standardError');
+('&.MuiAlert-outlinedSuccess');
+('&.MuiAlert-outlinedInfo');
+('&.MuiAlert-outlinedWarning');
+('&.MuiAlert-outlinedError');
+('&.MuiAlert-filledSuccess');
+('&.MuiAlert-filledInfo');
+('&.MuiAlert-filledWarning');
+('&.MuiAlert-filledError');
+`&.${alertClasses.standardSuccess}`;
+`&.${alertClasses.standardInfo}`;
+`&.${alertClasses.standardWarning}`;
+`&.${alertClasses.standardError}`;
+`&.${alertClasses.outlinedSuccess}`;
+`&.${alertClasses.outlinedInfo}`;
+`&.${alertClasses.outlinedWarning}`;
+`&.${alertClasses.outlinedError}`;
+`&.${alertClasses.filledSuccess}`;
+`&.${alertClasses.filledInfo}`;
+`&.${alertClasses.filledWarning}`;
+`&.${alertClasses.filledError}`;

packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.css

@@ -0,0 +1,47 @@
+.MuiAlert-standard.MuiAlert-colorSuccess {
+  color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorInfo {
+  color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorWarning {
+  color: red;
+}
+
+.MuiAlert-standard.MuiAlert-colorError {
+  color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorSuccess {
+  color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorInfo {
+  color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorWarning {
+  color: red;
+}
+
+.MuiAlert-outlined.MuiAlert-colorError {
+  color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorSuccess {
+  color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorInfo {
+  color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorWarning {
+  color: red;
+}
+
+.MuiAlert-filled.MuiAlert-colorError {
+  color: red;
+}

packages/mui-codemod/src/deprecations/alert-classes/test-cases/expected.js

@@ -0,0 +1,26 @@
+import { alertClasses } from '@mui/material/Alert';
+
+('&.MuiAlert-standard.MuiAlert-colorSuccess');
+('&.MuiAlert-standard.MuiAlert-colorInfo');
+('&.MuiAlert-standard.MuiAlert-colorWarning');
+('&.MuiAlert-standard.MuiAlert-colorError');
+('&.MuiAlert-outlined.MuiAlert-colorSuccess');
+('&.MuiAlert-outlined.MuiAlert-colorInfo');
+('&.MuiAlert-outlined.MuiAlert-colorWarning');
+('&.MuiAlert-outlined.MuiAlert-colorError');
+('&.MuiAlert-filled.MuiAlert-colorSuccess');
+('&.MuiAlert-filled.MuiAlert-colorInfo');
+('&.MuiAlert-filled.MuiAlert-colorWarning');
+('&.MuiAlert-filled.MuiAlert-colorError');
+`&.${alertClasses.standard}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.standard}.${alertClasses.colorInfo}`;
+`&.${alertClasses.standard}.${alertClasses.colorWarning}`;
+`&.${alertClasses.standard}.${alertClasses.colorError}`;
+`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.outlined}.${alertClasses.colorInfo}`;
+`&.${alertClasses.outlined}.${alertClasses.colorWarning}`;
+`&.${alertClasses.outlined}.${alertClasses.colorError}`;
+`&.${alertClasses.filled}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.filled}.${alertClasses.colorInfo}`;
+`&.${alertClasses.filled}.${alertClasses.colorWarning}`;
+`&.${alertClasses.filled}.${alertClasses.colorError}`;

packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.actual.js

@@ -0,0 +1,26 @@
+import { alertClasses } from '@org/ui/material/Alert';
+
+('&.MuiAlert-standardSuccess');
+('&.MuiAlert-standardInfo');
+('&.MuiAlert-standardWarning');
+('&.MuiAlert-standardError');
+('&.MuiAlert-outlinedSuccess');
+('&.MuiAlert-outlinedInfo');
+('&.MuiAlert-outlinedWarning');
+('&.MuiAlert-outlinedError');
+('&.MuiAlert-filledSuccess');
+('&.MuiAlert-filledInfo');
+('&.MuiAlert-filledWarning');
+('&.MuiAlert-filledError');
+`&.${alertClasses.standardSuccess}`;
+`&.${alertClasses.standardInfo}`;
+`&.${alertClasses.standardWarning}`;
+`&.${alertClasses.standardError}`;
+`&.${alertClasses.outlinedSuccess}`;
+`&.${alertClasses.outlinedInfo}`;
+`&.${alertClasses.outlinedWarning}`;
+`&.${alertClasses.outlinedError}`;
+`&.${alertClasses.filledSuccess}`;
+`&.${alertClasses.filledInfo}`;
+`&.${alertClasses.filledWarning}`;
+`&.${alertClasses.filledError}`;

packages/mui-codemod/src/deprecations/alert-classes/test-cases/package.expected.js

@@ -0,0 +1,26 @@
+import { alertClasses } from '@org/ui/material/Alert';
+
+('&.MuiAlert-standard.MuiAlert-colorSuccess');
+('&.MuiAlert-standard.MuiAlert-colorInfo');
+('&.MuiAlert-standard.MuiAlert-colorWarning');
+('&.MuiAlert-standard.MuiAlert-colorError');
+('&.MuiAlert-outlined.MuiAlert-colorSuccess');
+('&.MuiAlert-outlined.MuiAlert-colorInfo');
+('&.MuiAlert-outlined.MuiAlert-colorWarning');
+('&.MuiAlert-outlined.MuiAlert-colorError');
+('&.MuiAlert-filled.MuiAlert-colorSuccess');
+('&.MuiAlert-filled.MuiAlert-colorInfo');
+('&.MuiAlert-filled.MuiAlert-colorWarning');
+('&.MuiAlert-filled.MuiAlert-colorError');
+`&.${alertClasses.standard}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.standard}.${alertClasses.colorInfo}`;
+`&.${alertClasses.standard}.${alertClasses.colorWarning}`;
+`&.${alertClasses.standard}.${alertClasses.colorError}`;
+`&.${alertClasses.outlined}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.outlined}.${alertClasses.colorInfo}`;
+`&.${alertClasses.outlined}.${alertClasses.colorWarning}`;
+`&.${alertClasses.outlined}.${alertClasses.colorError}`;
+`&.${alertClasses.filled}.${alertClasses.colorSuccess}`;
+`&.${alertClasses.filled}.${alertClasses.colorInfo}`;
+`&.${alertClasses.filled}.${alertClasses.colorWarning}`;
+`&.${alertClasses.filled}.${alertClasses.colorError}`;

packages/mui-codemod/src/deprecations/alert-props/alert-props.js

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, packageName: options.packageName, componentName: 'Alert' });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/alert-props/alert-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './alert-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('alert-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] alert-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[package] alert-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false }, packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/alert-props/index.js

@@ -0,0 +1 @@
+export { default } from './alert-props';

packages/mui-codemod/src/deprecations/alert-props/test-cases/actual.js

@@ -0,0 +1,24 @@
+import Alert from '@mui/material/Alert';
+
+<Alert
+  components={{ CloseButton: ComponentsButton }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps, closeIcon: componentsIconProps }}
+/>;

packages/mui-codemod/src/deprecations/alert-props/test-cases/expected.js

@@ -0,0 +1,32 @@
+import Alert from '@mui/material/Alert';
+
+<Alert
+  slots={{
+    closeButton: ComponentsButton
+  }}
+  slotProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{
+    closeIcon: SlotsIcon,
+    closeButton: ComponentsButton
+  }}
+  slotProps={{
+    closeIcon: slotsIconProps,
+    closeButton: componentsButtonProps
+  }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  } }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  }, closeIcon: {
+    ...componentsIconProps,
+    ...slotsIconProps
+  } }} />;

packages/mui-codemod/src/deprecations/alert-props/test-cases/package.actual.js

@@ -0,0 +1,24 @@
+import Alert from '@org/ui/material/Alert';
+
+<Alert
+  components={{ CloseButton: ComponentsButton }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  components={{ CloseButton: ComponentsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: slotsButtonProps }}
+  componentsProps={{ closeButton: componentsButtonProps, closeIcon: componentsIconProps }}
+/>;

packages/mui-codemod/src/deprecations/alert-props/test-cases/package.expected.js

@@ -0,0 +1,32 @@
+import Alert from '@org/ui/material/Alert';
+
+<Alert
+  slots={{
+    closeButton: ComponentsButton
+  }}
+  slotProps={{ closeButton: componentsButtonProps }}
+/>;
+<Alert
+  slots={{
+    closeIcon: SlotsIcon,
+    closeButton: ComponentsButton
+  }}
+  slotProps={{
+    closeIcon: slotsIconProps,
+    closeButton: componentsButtonProps
+  }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeIcon: slotsIconProps, closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  } }} />;
+<Alert
+  slots={{ closeIcon: SlotsIcon, closeButton: SlotsButton }}
+  slotProps={{ closeButton: {
+    ...componentsButtonProps,
+    ...slotsButtonProps
+  }, closeIcon: {
+    ...componentsIconProps,
+    ...slotsIconProps
+  } }} />;

packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.actual.js

@@ -0,0 +1,41 @@
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      componentsProps: { closeButton: componentsButtonProps },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon },
+      componentsProps: { closeButton: componentsButtonProps },
+      slotProps: { closeIcon: slotsIconProps },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon, closeButton: SlotsButton },
+      componentsProps: { closeButton: componentsButtonProps },
+      slotProps: { closeIcon: slotsIconProps, closeButton: slotsButtonProps },
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      components: { CloseButton: ComponentsButton },
+      slots: { closeIcon: SlotsIcon, closeButton: SlotsButton },
+      componentsProps: { closeButton: componentsButtonProps, closeIcon: componentsIconProps },
+      slotProps: { closeIcon: slotsIconProps, closeButton: slotsButtonProps },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/alert-props/test-cases/theme.expected.js

@@ -0,0 +1,72 @@
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton
+      },
+
+      slotProps: {
+        closeButton: componentsButtonProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: ComponentsButton,
+        closeIcon: SlotsIcon
+      },
+
+      slotProps: {
+        closeButton: componentsButtonProps,
+        closeIcon: slotsIconProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
+      },
+
+      slotProps: {
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: slotsIconProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiAlert: {
+    defaultProps: {
+      slots: {
+        closeButton: SlotsButton,
+        closeIcon: SlotsIcon
+      },
+
+      slotProps: {
+        closeButton: {
+          ...componentsButtonProps,
+          ...slotsButtonProps
+        },
+
+        closeIcon: {
+          ...componentsIconProps,
+          ...slotsIconProps
+        }
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -0,0 +1,113 @@
+import transformAccordionClasses from '../accordion-summary-classes';
+import transformAccordionProps from '../accordion-props';
+import transformAlertClasses from '../alert-classes';
+import transformAlertProps from '../alert-props';
+import transformAvatarGroupProps from '../avatar-group-props';
+import transformAutocompleteProps from '../autocomplete-props';
+import transformAvatarProps from '../avatar-props';
+import transformBackdropProps from '../backdrop-props';
+import transformButtonClasses from '../button-classes';
+import transformButtonGroupClasses from '../button-group-classes';
+import transformChipClasses from '../chip-classes';
+import transformCircularProgressClasses from '../circular-progress-classes';
+import transformDividerProps from '../divider-props';
+import transformDrawerClasses from '../drawer-classes';
+import transformDialogClasses from '../dialog-classes';
+import transformDialogProps from '../dialog-props';
+import transformFilledInputProps from '../filled-input-props';
+import transformFormControlLabelProps from '../form-control-label-props';
+import transformImageListItemBarClasses from '../image-list-item-bar-classes';
+import transformInputBaseProps from '../input-base-props';
+import transformInputBaseClasses from '../input-base-classes';
+import transformInputProps from '../input-props';
+import transformListItemTextProps from '../list-item-text-props';
+import transformLinearProgressClasses from '../linear-progress-classes';
+import transformModalProps from '../modal-props';
+import transformOutlinedInputProps from '../outlined-input-props';
+import transformPaginationItemProps from '../pagination-item-props';
+import transformPaginationItemClasses from '../pagination-item-classes';
+import transformPopperProps from '../popper-props';
+import transformSpeedDialProps from '../speed-dial-props';
+import transformTableSortLabelClasses from '../table-sort-label-classes';
+import transformSelectClasses from '../select-classes';
+import transformStepConnectorClasses from '../step-connector-classes';
+import transformStepContentProps from '../step-content-props';
+import transformStepLabelProps from '../step-label-props';
+import transformTextFieldProps from '../text-field-props';
+import transformTabClasses from '../tab-classes';
+import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
+import transformTooltipProps from '../tooltip-props';
+import transformTablePaginationProps from '../table-pagination-props';
+import transformCardHeaderProps from '../card-header-props';
+import transformPopoverProps from '../popover-props';
+import transformSnackbarProps from '../snackbar-props';
+import transformSliderProps from '../slider-props';
+import transformSliderClasses from '../slider-classes';
+import transformerTabsProps from '../tabs-props';
+import transformerTabsClasses from '../tabs-classes';
+import transformDrawerProps from '../drawer-props';
+import transformMobileStepperProps from '../mobile-stepper-props';
+import transformMenuProps from '../menu-props';
+import transformRatingProps from '../rating-props';
+import transformTypographyProps from '../typography-props';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function deprecationsAll(file, api, options) {
+  file.source = transformAccordionClasses(file, api, options);
+  file.source = transformAccordionProps(file, api, options);
+  file.source = transformAlertClasses(file, api, options);
+  file.source = transformAlertProps(file, api, options);
+  file.source = transformAvatarGroupProps(file, api, options);
+  file.source = transformAutocompleteProps(file, api, options);
+  file.source = transformAvatarProps(file, api, options);
+  file.source = transformBackdropProps(file, api, options);
+  file.source = transformButtonClasses(file, api, options);
+  file.source = transformButtonGroupClasses(file, api, options);
+  file.source = transformChipClasses(file, api, options);
+  file.source = transformCircularProgressClasses(file, api, options);
+  file.source = transformDividerProps(file, api, options);
+  file.source = transformDrawerClasses(file, api, options);
+  file.source = transformDialogClasses(file, api, options);
+  file.source = transformDialogProps(file, api, options);
+  file.source = transformFilledInputProps(file, api, options);
+  file.source = transformFormControlLabelProps(file, api, options);
+  file.source = transformImageListItemBarClasses(file, api, options);
+  file.source = transformInputBaseProps(file, api, options);
+  file.source = transformInputBaseClasses(file, api, options);
+  file.source = transformInputProps(file, api, options);
+  file.source = transformListItemTextProps(file, api, options);
+  file.source = transformLinearProgressClasses(file, api, options);
+  file.source = transformModalProps(file, api, options);
+  file.source = transformOutlinedInputProps(file, api, options);
+  file.source = transformPaginationItemClasses(file, api, options);
+  file.source = transformPaginationItemProps(file, api, options);
+  file.source = transformPopperProps(file, api, options);
+  file.source = transformSpeedDialProps(file, api, options);
+  file.source = transformStepConnectorClasses(file, api, options);
+  file.source = transformStepContentProps(file, api, options);
+  file.source = transformStepLabelProps(file, api, options);
+  file.source = transformTableSortLabelClasses(file, api, options);
+  file.source = transformTextFieldProps(file, api, options);
+  file.source = transformSelectClasses(file, api, options);
+  file.source = transformTabClasses(file, api, options);
+  file.source = transformToggleButtonGroupClasses(file, api, options);
+  file.source = transformTooltipProps(file, api, options);
+  file.source = transformTablePaginationProps(file, api, options);
+  file.source = transformCardHeaderProps(file, api, options);
+  file.source = transformPopoverProps(file, api, options);
+  file.source = transformSnackbarProps(file, api, options);
+  file.source = transformSliderProps(file, api, options);
+  file.source = transformSliderClasses(file, api, options);
+  file.source = transformerTabsProps(file, api, options);
+  file.source = transformerTabsClasses(file, api, options);
+  file.source = transformDrawerProps(file, api, options);
+  file.source = transformMobileStepperProps(file, api, options);
+  file.source = transformMenuProps(file, api, options);
+  file.source = transformRatingProps(file, api, options);
+  file.source = transformTypographyProps(file, api, options);
+
+  return file.source;
+}

packages/mui-codemod/src/deprecations/all/index.js

@@ -0,0 +1 @@
+export { default } from './deprecations-all';

packages/mui-codemod/src/deprecations/all/postcss.config.js

@@ -0,0 +1,49 @@
+const {
+  plugin: accordionSummaryClassesPlugin,
+} = require('../accordion-summary-classes/postcss-plugin');
+const { plugin: alertClassesPlugin } = require('../alert-classes/postcss-plugin');
+const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin');
+const { plugin: buttonGroupClassesPlugin } = require('../button-group-classes/postcss-plugin');
+const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin');
+const { plugin: drawerClassesPlugin } = require('../drawer-classes/postcss-plugin');
+const {
+  plugin: paginationItemClassesPlugin,
+} = require('../pagination-item-classes/postcss-plugin');
+const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classes/postcss-plugin');
+const {
+  plugin: toggleButtonGroupClassesPlugin,
+} = require('../toggle-button-group-classes/postcss-plugin');
+const {
+  plugin: circularProgressClassesPlugin,
+} = require('../circular-progress-classes/postcss-plugin');
+const { plugin: inputBaseClassesPlugin } = require('../input-base-classes/postcss-plugin');
+const {
+  plugin: linearProgressClassesPlugin,
+} = require('../linear-progress-classes/postcss-plugin');
+const { plugin: tabClassesPlugin } = require('../tab-classes/postcss-plugin');
+const {
+  plugin: tableSortLabelClassesPlugin,
+} = require('../table-sort-label-classes/postcss-plugin');
+const { plugin: selectClassesPlugin } = require('../select-classes/postcss-plugin');
+const { plugin: sliderClassesPlugin } = require('../slider-classes/postcss-plugin');
+
+module.exports = {
+  plugins: [
+    accordionSummaryClassesPlugin,
+    alertClassesPlugin,
+    buttonClassesPlugin,
+    buttonGroupClassesPlugin,
+    chipClassesPlugin,
+    circularProgressClassesPlugin,
+    inputBaseClassesPlugin,
+    linearProgressClassesPlugin,
+    drawerClassesPlugin,
+    paginationItemClassesPlugin,
+    stepConnectorClassesPlugin,
+    toggleButtonGroupClassesPlugin,
+    tabClassesPlugin,
+    tableSortLabelClassesPlugin,
+    selectClassesPlugin,
+    sliderClassesPlugin,
+  ],
+};

packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js

@@ -0,0 +1,173 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+import findComponentJSX from '../../util/findComponentJSX';
+import findComponentDefaultProps from '../../util/findComponentDefaultProps';
+import assignObject from '../../util/assignObject';
+import appendAttribute from '../../util/appendAttribute';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+    propName: 'PaperComponent',
+    slotName: 'paper',
+  });
+
+  movePropIntoSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+    propName: 'PopperComponent',
+    slotName: 'popper',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+    propName: 'ListboxProps',
+    slotName: 'listbox',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+    propName: 'ChipProps',
+    slotName: 'chip',
+  });
+
+  replaceComponentsWithSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+  });
+
+  // Move ListboxComponent JSX prop into slotProps.listbox.component
+  findComponentJSX(
+    j,
+    { root, packageName: options.packageName, componentName: 'Autocomplete' },
+    (elementPath) => {
+      const element = elementPath.node;
+      const propIndex = element.openingElement.attributes.findIndex(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'ListboxComponent',
+      );
+
+      if (propIndex !== -1) {
+        const removedValue = element.openingElement.attributes.splice(propIndex, 1)[0].value
+          .expression;
+        let hasSlotProps = false;
+        element.openingElement.attributes.forEach((attr) => {
+          if (attr.name?.name === 'slotProps') {
+            hasSlotProps = true;
+            const slots = attr.value.expression;
+            const slotIndex = slots.properties.findIndex((prop) => prop?.key?.name === 'listbox');
+            if (slotIndex === -1) {
+              assignObject(j, {
+                target: attr,
+                key: 'listbox',
+                expression: j.objectExpression([
+                  j.objectProperty(j.identifier('component'), removedValue),
+                ]),
+              });
+            } else {
+              const slotPropsSlotValue = slots.properties.splice(slotIndex, 1)[0].value;
+              assignObject(j, {
+                target: attr,
+                key: 'listbox',
+                expression: j.objectExpression([
+                  j.objectProperty(j.identifier('component'), removedValue),
+                  j.spreadElement(slotPropsSlotValue),
+                ]),
+              });
+            }
+          }
+        });
+
+        if (!hasSlotProps) {
+          appendAttribute(j, {
+            target: element,
+            attributeName: 'slotProps',
+            expression: j.objectExpression([
+              j.objectProperty(
+                j.identifier('listbox'),
+                j.objectExpression([j.objectProperty(j.identifier('component'), removedValue)]),
+              ),
+            ]),
+          });
+        }
+      }
+    },
+  );
+
+  // Move ListboxComponent default prop into slotProps.listbox.component
+  const defaultPropsPathCollection = findComponentDefaultProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Autocomplete',
+  });
+
+  defaultPropsPathCollection
+    .find(j.ObjectProperty, { key: { name: 'ListboxComponent' } })
+    .forEach((path) => {
+      const removedValue = path.value.value;
+      const defaultProps = path.parent.value;
+
+      let hasSlotProps = false;
+      defaultProps.properties.forEach((property) => {
+        if (property.key?.name === 'slotProps') {
+          hasSlotProps = true;
+          const slotIndex = property.value.properties.findIndex(
+            (prop) => prop?.key?.name === 'listbox',
+          );
+          if (slotIndex === -1) {
+            property.value.properties.push(
+              j.objectProperty(
+                j.identifier('listbox'),
+                j.objectExpression([j.objectProperty(j.identifier('component'), removedValue)]),
+              ),
+            );
+          } else {
+            const slotPropsSlotValue = property.value.properties.splice(slotIndex, 1)[0].value;
+            property.value.properties.push(
+              j.objectProperty(
+                j.identifier('listbox'),
+                j.objectExpression([
+                  j.objectProperty(j.identifier('component'), removedValue),
+                  j.spreadElement(slotPropsSlotValue),
+                ]),
+              ),
+            );
+          }
+        }
+      });
+
+      if (!hasSlotProps) {
+        defaultProps.properties.push(
+          j.objectProperty(
+            j.identifier('slotProps'),
+            j.objectExpression([
+              j.objectProperty(
+                j.identifier('listbox'),
+                j.objectExpression([j.objectProperty(j.identifier('component'), removedValue)]),
+              ),
+            ]),
+          ),
+        );
+      }
+
+      path.prune();
+    });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './autocomplete-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('autocomplete-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] autocomplete-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[package] autocomplete-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/autocomplete-props/index.js

@@ -0,0 +1 @@
+export { default } from './autocomplete-props';

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/actual.js

@@ -0,0 +1,64 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import {Autocomplete as MyAutocomplete} from '@mui/material';
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  slotProps={{
+    popupIndicator: { width: 20 }
+  }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<MyAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/expected.js

@@ -0,0 +1,77 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import {Autocomplete as MyAutocomplete} from '@mui/material';
+
+<Autocomplete
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }}
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }} />;
+
+<Autocomplete
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+
+    popupIndicator: {
+      ...{ width: 16 },
+      ...{ width: 20 }
+    },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }}
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }} />;
+
+<MyAutocomplete
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }}
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }} />;
+
+<CustomAutocomplete
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.actual.js

@@ -0,0 +1,64 @@
+import Autocomplete from '@org/ui/material/Autocomplete';
+import {Autocomplete as MyAutocomplete} from '@org/ui/material';
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  slotProps={{
+    popupIndicator: { width: 20 }
+  }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<MyAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/package.expected.js

@@ -0,0 +1,77 @@
+import Autocomplete from '@org/ui/material/Autocomplete';
+import {Autocomplete as MyAutocomplete} from '@org/ui/material';
+
+<Autocomplete
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }}
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }} />;
+
+<Autocomplete
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+
+    popupIndicator: {
+      ...{ width: 16 },
+      ...{ width: 20 }
+    },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }}
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }} />;
+
+<MyAutocomplete
+  slots={{
+    paper: CustomPaper,
+    popper: CustomPopper
+  }}
+  slotProps={{
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+
+    listbox: {
+      component: CustomListbox,
+      ...{ height: 12 }
+    }
+  }} />;
+
+<CustomAutocomplete
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
+/>;
+
+<CustomAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.actual.js

@@ -0,0 +1,38 @@
+fn({
+  MuiAutocomplete: {
+    defaultProps: {
+      ChipProps: { height: 10 },
+      PaperComponent: CustomPaper,
+      PopperComponent: CustomPopper,
+      ListboxComponent: CustomListbox,
+      ListboxProps: { height: 12 },
+      componentsProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
+      }
+    },
+  },
+});
+
+fn({
+  MuiAutocomplete: {
+    defaultProps: {
+      ChipProps: { height: 10 },
+      PaperComponent: CustomPaper,
+      PopperComponent: CustomPopper,
+      ListboxComponent: CustomListbox,
+      ListboxProps: { height: 12 },
+      slotProps: {
+        popupIndicator: { width: 20 }
+      },
+      componentsProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.expected.js

@@ -0,0 +1,52 @@
+fn({
+  MuiAutocomplete: {
+    defaultProps: {
+      slots: {
+        paper: CustomPaper,
+        popper: CustomPopper
+      },
+
+      slotProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
+        chip: { height: 10 },
+
+        listbox: {
+          component: CustomListbox,
+          ...{ height: 12 }
+        }
+      }
+    },
+  },
+});
+
+fn({
+  MuiAutocomplete: {
+    defaultProps: {
+      slotProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+
+        popupIndicator: {
+          ...{ width: 16 },
+          ...{ width: 20 }
+        },
+
+        chip: { height: 10 },
+
+        listbox: {
+          component: CustomListbox,
+          ...{ height: 12 }
+        }
+      },
+
+      slots: {
+        paper: CustomPaper,
+        popper: CustomPopper
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.js

@@ -0,0 +1,103 @@
+import assignObject from '../../util/assignObject';
+import findComponentJSX from '../../util/findComponentJSX';
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, {
+    root,
+    componentName: 'AvatarGroup',
+    packageName: options.packageName,
+  });
+
+  // replace `slotProps.additionalAvatar` with `slotProps.surplus` in JSX
+  findComponentJSX(
+    j,
+    { root, componentName: 'AvatarGroup', packageName: options.packageName },
+    (elementPath) => {
+      const slotPropsIndex = elementPath.node.openingElement.attributes.findIndex(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'slotProps',
+      );
+      if (slotPropsIndex !== -1) {
+        const slotProps =
+          elementPath.node.openingElement.attributes[slotPropsIndex].value.expression;
+        const additionalAvatarIndex = slotProps.properties.findIndex(
+          (prop) => prop?.key?.name === 'additionalAvatar',
+        );
+        if (additionalAvatarIndex !== -1) {
+          const surplusIndex = slotProps.properties.findIndex(
+            (prop) => prop?.key?.name === 'surplus',
+          );
+          const removedValue = slotProps.properties.splice(additionalAvatarIndex, 1)[0].value;
+          if (surplusIndex === -1) {
+            assignObject(j, {
+              target: elementPath.node.openingElement.attributes[slotPropsIndex],
+              key: 'surplus',
+              expression: removedValue,
+            });
+          } else {
+            const slotPropsSlotValue = slotProps.properties.splice(surplusIndex, 1)[0].value;
+            assignObject(j, {
+              target: elementPath.node.openingElement.attributes[slotPropsIndex],
+              key: 'surplus',
+              expression: j.objectExpression([
+                j.spreadElement(removedValue),
+                j.spreadElement(slotPropsSlotValue),
+              ]),
+            });
+          }
+        }
+      }
+    },
+  );
+
+  // replace `slotProps.additionalAvatar` with `slotProps.surplus` in theme
+  root.find(j.ObjectProperty, { key: { name: 'MuiAvatarGroup' } }).forEach((path) => {
+    const defaultPropsIndex = path.value.value.properties.findIndex(
+      (key) => key.key.name === 'defaultProps',
+    );
+    if (defaultPropsIndex !== -1) {
+      const defaultProps = path.value.value.properties[defaultPropsIndex];
+      const slotPropsIndex = defaultProps.value.properties.findIndex(
+        (prop) => prop.key.name === 'slotProps',
+      );
+      if (slotPropsIndex !== -1) {
+        const slotProps = defaultProps.value.properties[slotPropsIndex];
+        const additionalAvatarIndex = slotProps.value.properties.findIndex(
+          (prop) => prop.key.name === 'additionalAvatar',
+        );
+        if (additionalAvatarIndex !== -1) {
+          const removedValue = slotProps.value.properties.splice(additionalAvatarIndex, 1)[0].value;
+          const surplusIndex = slotProps.value.properties.findIndex(
+            (prop) => prop.key.name === 'surplus',
+          );
+          if (surplusIndex === -1) {
+            slotProps.value.properties.push(
+              j.objectProperty(j.identifier('surplus'), removedValue),
+            );
+          } else {
+            const slotPropsSlotValue = slotProps.value.properties.splice(surplusIndex, 1)[0].value;
+            slotProps.value.properties.push(
+              j.objectProperty(
+                j.identifier('surplus'),
+                j.objectExpression([
+                  j.spreadElement(removedValue),
+                  j.spreadElement(slotPropsSlotValue),
+                ]),
+              ),
+            );
+          }
+        }
+      }
+    }
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/avatar-group-props/avatar-group-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './avatar-group-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('avatar-group-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] avatar-group-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[package] avatar-group-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/avatar-group-props/index.js

@@ -0,0 +1 @@
+export { default } from './avatar-group-props';

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/actual.js

@@ -0,0 +1,37 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+componentsProps={{
+  additionalAvatar: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+  }}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+    surplus: {color: "yellow"},
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/expected.js

@@ -0,0 +1,38 @@
+import AvatarGroup from '@mui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@mui/material';
+
+<AvatarGroup
+  slotProps={{
+    surplus: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+slotProps={{
+  surplus: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{color: "red"},
+      ...{color: "blue"}
+    },
+  }} />;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{
+        ...{color: "red"},
+        ...{color: "blue"}
+      },
+
+      ...{color: "yellow"}
+    }
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.actual.js

@@ -0,0 +1,37 @@
+import AvatarGroup from '@org/ui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@org/ui/material';
+
+<AvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+componentsProps={{
+  additionalAvatar: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+  }}
+/>;
+<MyAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+  slotProps={{
+    additionalAvatar: {color: "blue"},
+    surplus: {color: "yellow"},
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/package.expected.js

@@ -0,0 +1,38 @@
+import AvatarGroup from '@org/ui/material/AvatarGroup';
+import { AvatarGroup as MyAvatarGroup } from '@org/ui/material';
+
+<AvatarGroup
+  slotProps={{
+    surplus: {color: "red"},
+  }}
+/>;
+<MyAvatarGroup
+slotProps={{
+  surplus: {color: "red"},
+}}
+/>;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{color: "red"},
+      ...{color: "blue"}
+    },
+  }} />;
+<MyAvatarGroup
+  slotProps={{
+    surplus: {
+      ...{
+        ...{color: "red"},
+        ...{color: "blue"}
+      },
+
+      ...{color: "yellow"}
+    }
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatarGroup
+  componentsProps={{
+    additionalAvatar: {color: "red"},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.actual.js

@@ -0,0 +1,36 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+      slotProps: {
+        additionalAvatar: {color: "blue"},
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      componentsProps: {
+        additionalAvatar: {color: "red"},
+      },
+      slotProps: {
+        additionalAvatar: {color: "blue"},
+        surplus: {color: "yellow"},
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/avatar-group-props/test-cases/theme.expected.js

@@ -0,0 +1,39 @@
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {color: "red"}
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {
+          ...{color: "red"},
+          ...{color: "blue"}
+        }
+      }
+    },
+  },
+});
+
+fn({
+  MuiAvatarGroup: {
+    defaultProps: {
+      slotProps: {
+        surplus: {
+          ...{
+            ...{color: "red"},
+            ...{color: "blue"}
+          },
+
+          ...{color: "yellow"}
+        }
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/avatar-props/avatar-props.js

@@ -0,0 +1,21 @@
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Avatar',
+    propName: 'imgProps',
+    slotName: 'img',
+    packageName: options.packageName,
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/avatar-props/avatar-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './avatar-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('avatar-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] avatar-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[package] avatar-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/avatar-props/index.js

@@ -0,0 +1 @@
+export { default } from './avatar-props';

packages/mui-codemod/src/deprecations/avatar-props/test-cases/actual.js

@@ -0,0 +1,33 @@
+import Avatar from '@mui/material/Avatar';
+import { Avatar as MyAvatar } from '@mui/material';
+
+<Avatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+<MyAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+<MyAvatar
+  imgProps={{
+    onLoad: () => {},
+  }}
+  slotProps={{
+    img: {
+      onError: () => {},
+    },
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-props/test-cases/expected.js

@@ -0,0 +1,39 @@
+import Avatar from '@mui/material/Avatar';
+import { Avatar as MyAvatar } from '@mui/material';
+
+<Avatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+<MyAvatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+<MyAvatar
+  slotProps={{
+    img: {
+      ...{
+        onLoad: () => {},
+      },
+
+      ...{
+        onError: () => {},
+      }
+    },
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.actual.js

@@ -0,0 +1,33 @@
+import Avatar from '@org/ui/material/Avatar';
+import { Avatar as MyAvatar } from '@org/ui/material';
+
+<Avatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+<MyAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+<MyAvatar
+  imgProps={{
+    onLoad: () => {},
+  }}
+  slotProps={{
+    img: {
+      onError: () => {},
+    },
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-props/test-cases/package.expected.js

@@ -0,0 +1,39 @@
+import Avatar from '@org/ui/material/Avatar';
+import { Avatar as MyAvatar } from '@org/ui/material';
+
+<Avatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+<MyAvatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+<MyAvatar
+  slotProps={{
+    img: {
+      ...{
+        onLoad: () => {},
+      },
+
+      ...{
+        onError: () => {},
+      }
+    },
+  }} />;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.actual.js

@@ -0,0 +1,25 @@
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      imgProps: {
+        onError: () => {},
+        onLoad: () => {},
+      },
+    },
+  },
+});
+
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      imgProps: {
+        onLoad: () => {},
+      },
+      slotProps: {
+        img: {
+          onError: () => {},
+        },
+      },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/avatar-props/test-cases/theme.expected.js

@@ -0,0 +1,30 @@
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      slotProps: {
+        img: {
+          onError: () => {},
+          onLoad: () => {},
+        }
+      },
+    },
+  },
+});
+
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      slotProps: {
+        img: {
+          ...{
+            onLoad: () => {},
+          },
+
+          ...{
+            onError: () => {},
+          }
+        },
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.js

@@ -0,0 +1,28 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Backdrop',
+  });
+
+  movePropIntoSlots(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Backdrop',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/backdrop-props/backdrop-props.test.js

@@ -0,0 +1,23 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './backdrop-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'backdrop-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+        {
+          actual: '/test-cases/package.actual.js',
+          expected: '/test-cases/package.expected.js',
+          options: {
+            packageName: '@org/ui/material',
+          },
+        },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/backdrop-props/index.js

@@ -0,0 +1 @@
+export { default } from './backdrop-props';

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/actual.js

@@ -0,0 +1,40 @@
+import Backdrop from '@mui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@mui/material';
+
+<Backdrop TransitionComponent={CustomTransition} />;
+<MyBackdrop TransitionComponent={CustomTransition} />;
+<Backdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    root: 'div',
+  }}
+/>;
+<MyBackdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    ...outerSlots,
+  }}
+/>;
+<Backdrop
+  TransitionComponent={ComponentTransition}
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
+
+<Backdrop components={{ Root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;
+<MyBackdrop components={{ Root: ComponentsRoot }} slotProps={{ root: slotsRootProps }} />;
+<Backdrop slots={{ root: SlotsRoot }} componentsProps={{ root: componentsRootProps }} />;
+<MyBackdrop
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+// should skip non MUI components
+<NonMuiBackdrop components={{ Root: ComponentsRoot }} />;

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/expected.js

@@ -0,0 +1,44 @@
+import Backdrop from '@mui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@mui/material';
+
+<Backdrop slots={{
+  transition: CustomTransition
+}} />;
+<MyBackdrop slots={{
+  transition: CustomTransition
+}} />;
+<Backdrop
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }} />;
+<MyBackdrop
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }} />;
+<Backdrop
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }} />;
+
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
+
+<Backdrop slots={{
+  root: ComponentsRoot
+}} slotProps={{ root: componentsRootProps }} />;
+<MyBackdrop slotProps={{ root: slotsRootProps }} slots={{
+  root: ComponentsRoot
+}} />;
+<Backdrop slots={{ root: SlotsRoot }} slotProps={{ root: componentsRootProps }} />;
+<MyBackdrop
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
+
+// should skip non MUI components
+<NonMuiBackdrop components={{ Root: ComponentsRoot }} />;

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.actual.js

@@ -0,0 +1,40 @@
+import Backdrop from '@org/ui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@org/ui/material';
+
+<Backdrop TransitionComponent={CustomTransition} />;
+<MyBackdrop TransitionComponent={CustomTransition} />;
+<Backdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    root: 'div',
+  }}
+/>;
+<MyBackdrop
+  TransitionComponent={CustomTransition}
+  slots={{
+    ...outerSlots,
+  }}
+/>;
+<Backdrop
+  TransitionComponent={ComponentTransition}
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
+
+<Backdrop components={{ Root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;
+<MyBackdrop components={{ Root: ComponentsRoot }} slotProps={{ root: slotsRootProps }} />;
+<Backdrop slots={{ root: SlotsRoot }} componentsProps={{ root: componentsRootProps }} />;
+<MyBackdrop
+  slots={{ root: SlotsRoot }}
+  components={{ Root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+// should skip non MUI components
+<NonMuiBackdrop components={{ Root: ComponentsRoot }} />;

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/package.expected.js

@@ -0,0 +1,44 @@
+import Backdrop from '@org/ui/material/Backdrop';
+import { Backdrop as MyBackdrop } from '@org/ui/material';
+
+<Backdrop slots={{
+  transition: CustomTransition
+}} />;
+<MyBackdrop slots={{
+  transition: CustomTransition
+}} />;
+<Backdrop
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }} />;
+<MyBackdrop
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }} />;
+<Backdrop
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }} />;
+
+// should skip non MUI components
+<NonMuiBackdrop TransitionComponent={CustomTransition} />;
+
+<Backdrop slots={{
+  root: ComponentsRoot
+}} slotProps={{ root: componentsRootProps }} />;
+<MyBackdrop slotProps={{ root: slotsRootProps }} slots={{
+  root: ComponentsRoot
+}} />;
+<Backdrop slots={{ root: SlotsRoot }} slotProps={{ root: componentsRootProps }} />;
+<MyBackdrop
+  slots={{ root: SlotsRoot }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
+
+// should skip non MUI components
+<NonMuiBackdrop components={{ Root: ComponentsRoot }} />;

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.actual.js

@@ -0,0 +1,68 @@
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      slots: {
+        root: 'div',
+      },
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      },
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+      components: { Root: ComponentsRoot },
+      slotProps: { root: slotsRootProps },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});

packages/mui-codemod/src/deprecations/backdrop-props/test-cases/theme.expected.js

@@ -0,0 +1,86 @@
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slotProps: { root: slotsRootProps },
+
+      slots: {
+        root: ComponentsRoot
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: { root: SlotsRoot },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBackdrop: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        }
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/badge-props/badge-props.js

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Badge', packageName: options.packageName });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/badge-props/badge-props.test.js

@@ -0,0 +1,77 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './badge-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('badge-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] badge-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[package] badge-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false }, packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/package.expected.js') },
+          { jscodeshift },
+          { packageName: '@org/ui/material' },
+        );
+
+        const expected = read('./test-cases/package.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/badge-props/index.js

@@ -0,0 +1 @@
+export { default } from './badge-props';

packages/mui-codemod/src/deprecations/badge-props/test-cases/actual.js

@@ -0,0 +1,24 @@
+import { Badge } from '@mui/material';
+
+<Badge components={{ root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{ badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps, badge: componentsBadgeProps }}
+/>;

packages/mui-codemod/src/deprecations/badge-props/test-cases/expected.js

@@ -0,0 +1,32 @@
+import { Badge } from '@mui/material';
+
+<Badge slots={{
+  root: ComponentsRoot
+}} slotProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{
+    badge: SlotsBadge,
+    root: ComponentsRoot
+  }}
+  slotProps={{
+    badge: slotsBadgeProps,
+    root: componentsRootProps
+  }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ badge: slotsBadgeProps, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  }, badge: {
+    ...componentsBadgeProps,
+    ...slotsBadgeProps
+  } }} />;

packages/mui-codemod/src/deprecations/badge-props/test-cases/package.actual.js

@@ -0,0 +1,24 @@
+import { Badge } from '@org/ui/material';
+
+<Badge components={{ root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{ badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps }}
+/>;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  components={{ root: ComponentsRoot }}
+  slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
+  componentsProps={{ root: componentsRootProps, badge: componentsBadgeProps }}
+/>;

packages/mui-codemod/src/deprecations/badge-props/test-cases/package.expected.js

@@ -0,0 +1,32 @@
+import { Badge } from '@org/ui/material';
+
+<Badge slots={{
+  root: ComponentsRoot
+}} slotProps={{ root: componentsRootProps }} />;
+
+<Badge
+  slots={{
+    badge: SlotsBadge,
+    root: ComponentsRoot
+  }}
+  slotProps={{
+    badge: slotsBadgeProps,
+    root: componentsRootProps
+  }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ badge: slotsBadgeProps, root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  } }} />;
+
+<Badge
+  slots={{ root: SlotsRoot, badge: SlotsBadge }}
+  slotProps={{ root: {
+    ...componentsRootProps,
+    ...slotsRootProps
+  }, badge: {
+    ...componentsBadgeProps,
+    ...slotsBadgeProps
+  } }} />;

packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.actual.js

@@ -0,0 +1,42 @@
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      componentsProps: { root: componentsRootProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { badge: slotsBadgeProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge, root: SlotsRoot },
+      componentsProps: { root: componentsRootProps },
+      slotProps: { root: slotsRootProps, badge: slotsBadgeProps },
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      components: { root: ComponentsRoot },
+      slots: { badge: SlotsBadge, root: SlotsRoot },
+      componentsProps: { root: componentsRootProps, badge: componentsBadgeProps },
+      slotProps: { badge: slotsBadgeProps, root: slotsRootProps },
+    },
+  },
+});
+

packages/mui-codemod/src/deprecations/badge-props/test-cases/theme.expected.js

@@ -0,0 +1,73 @@
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot
+      },
+
+      slotProps: {
+        root: componentsRootProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: ComponentsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: componentsRootProps,
+        badge: slotsBadgeProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        },
+
+        badge: slotsBadgeProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiBadge: {
+    defaultProps: {
+      slots: {
+        root: SlotsRoot,
+        badge: SlotsBadge
+      },
+
+      slotProps: {
+        root: {
+          ...componentsRootProps,
+          ...slotsRootProps
+        },
+
+        badge: {
+          ...componentsBadgeProps,
+          ...slotsBadgeProps
+        }
+      }
+    },
+  },
+});
+

packages/mui-codemod/src/deprecations/button-classes/button-classes.js

@@ -0,0 +1,120 @@
+import { classes } from './postcss-plugin';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+  classes.forEach(({ deprecatedClass, replacementSelector }) => {
+    const replacementSelectorPrefix = '&';
+    root
+      .find(j.ImportDeclaration)
+      .filter((path) =>
+        path.node.source.value.match(
+          new RegExp(`^${options.packageName || '@mui/material'}(/Button)?$`),
+        ),
+      )
+      .forEach((path) => {
+        path.node.specifiers.forEach((specifier) => {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'buttonClasses') {
+            const deprecatedAtomicClass = deprecatedClass.replace(
+              `${deprecatedClass.split('-')[0]}-`,
+              '',
+            );
+            root
+              .find(j.MemberExpression, {
+                object: { name: specifier.local.name },
+                property: { name: deprecatedAtomicClass },
+              })
+              .forEach((memberExpression) => {
+                const parent = memberExpression.parentPath.parentPath.value;
+                if (parent.type === j.TemplateLiteral.name) {
+                  const memberExpressionIndex = parent.expressions.findIndex(
+                    (expression) => expression === memberExpression.value,
+                  );
+                  const precedingTemplateElement = parent.quasis[memberExpressionIndex];
+                  const atomicClasses = replacementSelector
+                    .replaceAll('MuiButton-', '')
+                    .replaceAll(replacementSelectorPrefix, '')
+                    .replaceAll(' > ', '')
+                    .split('.')
+                    .filter(Boolean);
+
+                  if (
+                    precedingTemplateElement.value.raw.endsWith(
+                      deprecatedClass.startsWith(' ')
+                        ? `${replacementSelectorPrefix} .`
+                        : `${replacementSelectorPrefix}.`,
+                    )
+                  ) {
+                    parent.expressions.splice(
+                      memberExpressionIndex,
+                      1,
+                      j.memberExpression(
+                        memberExpression.value.object,
+                        j.identifier(atomicClasses[0]),
+                      ),
+
+                      j.memberExpression(
+                        memberExpression.value.object,
+                        j.identifier(atomicClasses[1]),
+                      ),
+                    );
+
+                    if (replacementSelector.includes(' > ')) {
+                      parent.quasis.splice(
+                        memberExpressionIndex,
+                        1,
+                        j.templateElement(
+                          {
+                            raw: precedingTemplateElement.value.raw.replace(' ', ''),
+                            cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
+                          },
+                          false,
+                        ),
+                        j.templateElement({ raw: ' > .', cooked: ' > .' }, false),
+                      );
+                    } else {
+                      parent.quasis.splice(
+                        memberExpressionIndex,
+                        1,
+                        j.templateElement(
+                          {
+                            raw: precedingTemplateElement.value.raw,
+                            cooked: precedingTemplateElement.value.cooked,
+                          },
+                          false,
+                        ),
+
+                        j.templateElement({ raw: '.', cooked: '.' }, false),
+                      );
+                    }
+                  }
+                }
+              });
+          }
+        });
+      });
+
+    const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`);
+    root
+      .find(
+        j.Literal,
+        (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
+      )
+      .forEach((path) => {
+        path.replace(
+          j.literal(
+            path.value.value.replace(
+              selectorRegex,
+              `${replacementSelectorPrefix}${replacementSelector}`,
+            ),
+          ),
+        );
+      });
+  });
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/button-classes/button-classes.test.js

@@ -0,0 +1,105 @@
+import path from 'path';
+import { expect } from 'chai';
+import postcss from 'postcss';
+import { jscodeshift } from '../../../testUtils';
+import jsTransform from './button-classes';
+import { plugin as postcssPlugin } from './postcss-plugin';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+const postcssProcessor = postcss([postcssPlugin]);
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('button-classes', () => {
+      describe('js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/actual.js') },
+            { jscodeshift },
+            { printOptions: { quote: 'double', trailingComma: true } },
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/expected.js') },
+            { jscodeshift },
+            {},
+          );
+
+          const expected = read('./test-cases/expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('[package] js-transform', () => {
+        it('transforms props as needed', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.actual.js') },
+            { jscodeshift },
+            {
+              printOptions: { quote: 'double', trailingComma: true },
+              packageName: '@org/ui/material',
+            },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', () => {
+          const actual = jsTransform(
+            { source: read('./test-cases/package.expected.js') },
+            { jscodeshift },
+            { packageName: '@org/ui/material' },
+          );
+
+          const expected = read('./test-cases/package.expected.js');
+          expect(actual).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('css-transform', () => {
+        it('transforms classes as needed', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/actual.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+
+        it('should be idempotent', async () => {
+          const actual = await postcssProcessor.process(read('./test-cases/expected.css'), {
+            from: undefined,
+          });
+
+          const expected = read('./test-cases/expected.css');
+          expect(actual.css).to.equal(expected, 'The transformed version should be correct');
+        });
+      });
+
+      describe('test-cases', () => {
+        it('should not be the same', () => {
+          const actualJS = read('./test-cases/actual.js');
+          const expectedJS = read('./test-cases/expected.js');
+          expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different');
+
+          const actualCSS = read('./test-cases/actual.css');
+          const expectedCSS = read('./test-cases/expected.css');
+          expect(actualCSS).not.to.equal(
+            expectedCSS,
+            'The actual and expected should be different',
+          );
+        });
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/button-classes/index.js

@@ -0,0 +1 @@
+export { default } from './button-classes';

packages/mui-codemod/src/deprecations/button-classes/postcss-plugin.js

@@ -0,0 +1,157 @@
+const classes = [
+  {
+    deprecatedClass: '.MuiButton-textInherit',
+    replacementSelector: '.MuiButton-text.MuiButton-colorInherit',
+  },
+  {
+    deprecatedClass: '.MuiButton-textPrimary',
+    replacementSelector: '.MuiButton-text.MuiButton-colorPrimary',
+  },
+  {
+    deprecatedClass: '.MuiButton-textSecondary',
+    replacementSelector: '.MuiButton-text.MuiButton-colorSecondary',
+  },
+  {
+    deprecatedClass: '.MuiButton-textSuccess',
+    replacementSelector: '.MuiButton-text.MuiButton-colorSuccess',
+  },
+  {
+    deprecatedClass: '.MuiButton-textError',
+    replacementSelector: '.MuiButton-text.MuiButton-colorError',
+  },
+  {
+    deprecatedClass: '.MuiButton-textInfo',
+    replacementSelector: '.MuiButton-text.MuiButton-colorInfo',
+  },
+  {
+    deprecatedClass: '.MuiButton-textWarning',
+    replacementSelector: '.MuiButton-text.MuiButton-colorWarning',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedInherit',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorInherit',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedPrimary',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorPrimary',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedSecondary',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorSecondary',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedSuccess',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorSuccess',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedError',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorError',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedInfo',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorInfo',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedWarning',
+    replacementSelector: '.MuiButton-outlined.MuiButton-colorWarning',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedInherit',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorInherit',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedPrimary',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorPrimary',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedSecondary',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorSecondary',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedSuccess',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorSuccess',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedError',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorError',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedInfo',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorInfo',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedWarning',
+    replacementSelector: '.MuiButton-contained.MuiButton-colorWarning',
+  },
+  {
+    deprecatedClass: '.MuiButton-textSizeSmall',
+    replacementSelector: '.MuiButton-text.MuiButton-sizeSmall',
+  },
+  {
+    deprecatedClass: '.MuiButton-textSizeLarge',
+    replacementSelector: '.MuiButton-text.MuiButton-sizeLarge',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedSizeSmall',
+    replacementSelector: '.MuiButton-outlined.MuiButton-sizeSmall',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedSizeLarge',
+    replacementSelector: '.MuiButton-outlined.MuiButton-sizeLarge',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedSizeSmall',
+    replacementSelector: '.MuiButton-contained.MuiButton-sizeSmall',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedSizeLarge',
+    replacementSelector: '.MuiButton-contained.MuiButton-sizeLarge',
+  },
+  {
+    deprecatedClass: '.MuiButton-textSizeMedium',
+    replacementSelector: '.MuiButton-text.MuiButton-sizeMedium',
+  },
+  {
+    deprecatedClass: '.MuiButton-outlinedSizeMedium',
+    replacementSelector: '.MuiButton-outlined.MuiButton-sizeMedium',
+  },
+  {
+    deprecatedClass: '.MuiButton-containedSizeMedium',
+    replacementSelector: '.MuiButton-contained.MuiButton-sizeMedium',
+  },
+  {
+    deprecatedClass: ' .MuiButton-iconSizeSmall',
+    replacementSelector: '.MuiButton-sizeSmall > .MuiButton-icon',
+  },
+  {
+    deprecatedClass: ' .MuiButton-iconSizeMedium',
+    replacementSelector: '.MuiButton-sizeMedium > .MuiButton-icon',
+  },
+  {
+    deprecatedClass: ' .MuiButton-iconSizeLarge',
+    replacementSelector: '.MuiButton-sizeLarge > .MuiButton-icon',
+  },
+];
+
+const plugin = () => {
+  return {
+    postcssPlugin: `Replace deprecated Button classes with new classes`,
+    Rule(rule) {
+      const { selector } = rule;
+
+      classes.forEach(({ deprecatedClass, replacementSelector }) => {
+        const selectorRegex = new RegExp(`${deprecatedClass}`);
+
+        if (selector.match(selectorRegex)) {
+          rule.selector = selector.replace(selectorRegex, replacementSelector);
+        }
+      });
+    },
+  };
+};
+plugin.postcss = true;
+
+module.exports = {
+  plugin,
+  classes,
+};

packages/mui-codemod/src/deprecations/button-classes/postcss.config.js

@@ -0,0 +1,5 @@
+const { plugin } = require('./postcss-plugin');
+
+module.exports = {
+  plugins: [plugin],
+};

packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.css

@@ -0,0 +1,133 @@
+.MuiButton-textInherit {
+  color: red;
+}
+
+.MuiButton-textPrimary {
+  color: red;
+}
+
+.MuiButton-textSecondary {
+  color: red;
+}
+
+.MuiButton-textSuccess {
+  color: red;
+}
+
+.MuiButton-textError {
+  color: red;
+}
+
+.MuiButton-textInfo {
+  color: red;
+}
+
+.MuiButton-textWarning {
+  color: red;
+}
+
+.MuiButton-outlinedInherit {
+  color: red;
+}
+
+.MuiButton-outlinedPrimary {
+  color: red;
+}
+
+.MuiButton-outlinedSecondary {
+  color: red;
+}
+
+.MuiButton-outlinedSuccess {
+  color: red;
+}
+
+.MuiButton-outlinedError {
+  color: red;
+}
+
+.MuiButton-outlinedInfo {
+  color: red;
+}
+
+.MuiButton-outlinedWarning {
+  color: red;
+}
+
+.MuiButton-containedInherit {
+  color: red;
+}
+
+.MuiButton-containedPrimary {
+  color: red;
+}
+
+.MuiButton-containedSecondary {
+  color: red;
+}
+
+.MuiButton-containedSuccess {
+  color: red;
+}
+
+.MuiButton-containedError {
+  color: red;
+}
+
+.MuiButton-containedInfo {
+  color: red;
+}
+
+.MuiButton-containedWarning {
+  color: red;
+}
+
+.MuiButton-textSizeSmall {
+  color: red;
+}
+
+.MuiButton-textSizeMedium {
+  color: red;
+}
+
+.MuiButton-textSizeLarge {
+  color: red;
+}
+
+.MuiButton-outlinedSizeSmall {
+  color: red;
+}
+
+.MuiButton-outlinedSizeMedium {
+  color: red;
+}
+
+.MuiButton-outlinedSizeLarge {
+  color: red;
+}
+
+.MuiButton-containedSizeSmall {
+  color: red;
+}
+
+.MuiButton-containedSizeMedium {
+  color: red;
+}
+
+.MuiButton-containedSizeLarge {
+  color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeSmall {
+  color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeMedium {
+  color: red;
+}
+
+.MuiButton-root .MuiButton-iconSizeLarge {
+  color: red;
+}
+
+

packages/mui-codemod/src/deprecations/button-classes/test-cases/actual.js

@@ -0,0 +1,68 @@
+import { buttonClasses } from '@mui/material/Button';
+
+('&.MuiButton-textInherit');
+('&.MuiButton-textPrimary');
+('&.MuiButton-textSecondary');
+('&.MuiButton-textSuccess');
+('&.MuiButton-textError');
+('&.MuiButton-textInfo');
+('&.MuiButton-textWarning');
+('&.MuiButton-outlinedInherit');
+('&.MuiButton-outlinedPrimary');
+('&.MuiButton-outlinedSecondary');
+('&.MuiButton-outlinedSuccess');
+('&.MuiButton-outlinedError');
+('&.MuiButton-outlinedInfo');
+('&.MuiButton-outlinedWarning');
+('&.MuiButton-containedInherit');
+('&.MuiButton-containedPrimary');
+('&.MuiButton-containedSecondary');
+('&.MuiButton-containedSuccess');
+('&.MuiButton-containedError');
+('&.MuiButton-containedInfo');
+('&.MuiButton-containedWarning');
+('&.MuiButton-textSizeSmall');
+('&.MuiButton-textSizeMedium');
+('&.MuiButton-textSizeLarge');
+('&.MuiButton-outlinedSizeSmall');
+('&.MuiButton-outlinedSizeMedium');
+('&.MuiButton-outlinedSizeLarge');
+('&.MuiButton-containedSizeSmall');
+('&.MuiButton-containedSizeMedium');
+('&.MuiButton-containedSizeLarge');
+('& .MuiButton-iconSizeSmall');
+('& .MuiButton-iconSizeMedium');
+('& .MuiButton-iconSizeLarge');
+`&.${buttonClasses.textInherit}`;
+`&.${buttonClasses.textPrimary}`;
+`&.${buttonClasses.textSecondary}`;
+`&.${buttonClasses.textSuccess}`;
+`&.${buttonClasses.textError}`;
+`&.${buttonClasses.textInfo}`;
+`&.${buttonClasses.textWarning}`;
+`&.${buttonClasses.outlinedInherit}`;
+`&.${buttonClasses.outlinedPrimary}`;
+`&.${buttonClasses.outlinedSecondary}`;
+`&.${buttonClasses.outlinedSuccess}`;
+`&.${buttonClasses.outlinedError}`;
+`&.${buttonClasses.outlinedInfo}`;
+`&.${buttonClasses.outlinedWarning}`;
+`&.${buttonClasses.containedInherit}`;
+`&.${buttonClasses.containedPrimary}`;
+`&.${buttonClasses.containedSecondary}`;
+`&.${buttonClasses.containedSuccess}`;
+`&.${buttonClasses.containedError}`;
+`&.${buttonClasses.containedInfo}`;
+`&.${buttonClasses.containedWarning}`;
+`&.${buttonClasses.textSizeSmall}`;
+`&.${buttonClasses.textSizeMedium}`;
+`&.${buttonClasses.textSizeLarge}`;
+`&.${buttonClasses.outlinedSizeSmall}`;
+`&.${buttonClasses.outlinedSizeMedium}`;
+`&.${buttonClasses.outlinedSizeLarge}`;
+`&.${buttonClasses.containedSizeSmall}`;
+`&.${buttonClasses.containedSizeMedium}`;
+`&.${buttonClasses.containedSizeLarge}`;
+`& .${buttonClasses.iconSizeSmall}`;
+`& .${buttonClasses.iconSizeMedium}`;
+`& .${buttonClasses.iconSizeLarge}`;