@mui/codemod 7.2.0 → 7.3.0

package/README.md

@@ -2156,6 +2156,27 @@ npx @mui/codemod@latest deprecations/typography-props <path>
 
 ### v7.0.0
 
+#### `theme-color-functions`
+
+```bash
+npx @mui/codemod@latest v7.0.0/theme-color-functions <path>
+```
+
+Replace the usage of the `alpha()`, `lighten()`, and `darken()` functions from `@mui/system/colorManipulator` to use the `theme` object instead.
+
+```diff
+- import { alpha, lighten, darken } from '@mui/system/colorManipulator';
+
+- alpha(theme.palette.primary.main, 0.8)
++ theme.alpha((theme.vars || theme).palette.primary.main, 0.8)
+
+- lighten(theme.palette.primary.main, 0.1)
++ theme.lighten(theme.palette.primary.main, 0.1)
+
+- darken(theme.palette.primary.main, 0.3)
++ theme.darken(theme.palette.primary.main, 0.3)
+```
+
 #### `grid-props`
 
 <!-- #npm-tag-reference -->

package/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+const Value = styled('div')(({
+  theme
+}) => ({
+  width: '100%',
+  height: '100%',
+  lineHeight: '100%',
+  paddingRight: 8,
+  fontVariantNumeric: 'tabular-nums',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  '&.good': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.success.main, 0.3)
+  },
+  '&.bad': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.error.main, 0.3)
+  }
+}));

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.main, 0.2),
+  color: (0, _colorManipulator.lighten)(theme.palette.text.primary, 0.5),
+  border: `1px solid ${(0, _colorManipulator.lighten)(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: (0, _colorManipulator.lighten)(theme.palette.primary.dark, 0.3)
+  }
+}));

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

@@ -0,0 +1,12 @@
+"use strict";
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.lighten(theme.palette.primary.main, 0.2),
+  color: theme.lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${theme.lighten(theme.palette.divider, 0.1)}`,
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.dark, 0.3)
+  }
+}));

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _colorManipulator = require("@mui/system/colorManipulator");
+const ComplexComponent = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.1),
+  border: `2px solid ${(0, _colorManipulator.lighten)(theme.palette.primary.main, 0.5)}`,
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.2)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.2),
+    borderColor: (0, _colorManipulator.darken)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _colorManipulator.darken)(theme.palette.primary.dark, 0.1),
+    color: (0, _colorManipulator.lighten)(theme.palette.primary.contrastText, 0.3)
+  }
+}));

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

@@ -0,0 +1,16 @@
+"use strict";
+
+const ComplexComponent = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.1),
+  border: `2px solid ${theme.lighten(theme.palette.primary.main, 0.5)}`,
+  '&:hover': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.2),
+    borderColor: theme.darken(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.dark, 0.1),
+    color: theme.lighten(theme.palette.primary.contrastText, 0.3)
+  }
+}));

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: (0, _styles.lighten)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _styles.darken)(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mixed-imports.expected.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.2)
+  }
+}));

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _styles = require("@mui/material/styles");
+const Component = exports.Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : (0, _styles.alpha)(theme.palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: (0, _styles.lighten)(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: (0, _styles.darken)(theme.palette.primary.main, 0.2)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/mui-material-styles.expected.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+const Component = exports.Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.5),
+  '&:hover': {
+    backgroundColor: theme.lighten(theme.palette.primary.main, 0.2)
+  },
+  '&:active': {
+    backgroundColor: theme.darken(theme.palette.primary.main, 0.2)
+  }
+}));

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

@@ -0,0 +1,11 @@
+"use strict";
+
+// This file should not be transformed because it doesn't import from @mui/system/colorManipulator
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+  color: lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${darken(theme.palette.divider, 0.2)}`
+}));

package/v7.0.0/theme-color-functions/test-cases/no-import.expected.js

@@ -0,0 +1,11 @@
+"use strict";
+
+// This file should not be transformed because it doesn't import from @mui/system/colorManipulator
+
+const Component = styled('div')(({
+  theme
+}) => ({
+  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+  color: lighten(theme.palette.text.primary, 0.5),
+  border: `1px solid ${darken(theme.palette.divider, 0.2)}`
+}));

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemContent = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+const TreeItemContent = exports.TreeItemContent = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+}) < {
+  status: UseTreeItemStatus
+} > (({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  borderRadius: theme.shape.borderRadius,
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  '&[data-disabled]': {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    backgroundColor: 'transparent'
+  },
+  '&[data-focused]': {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  '&[data-selected]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+      }
+    }
+  },
+  '&[data-selected][data-focused]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  }
+}));

package/v7.0.0/theme-color-functions/test-cases/opacity-calc.expected.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItemContent = void 0;
+const TreeItemContent = exports.TreeItemContent = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'Content',
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+}) < {
+  status: UseTreeItemStatus
+} > (({
+  theme
+}) => ({
+  padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
+  borderRadius: theme.shape.borderRadius,
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.action.hover,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  '&[data-disabled]': {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    backgroundColor: 'transparent'
+  },
+  '&[data-focused]': {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  '&[data-selected]': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity)
+      }
+    }
+  },
+  '&[data-selected][data-focused]': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
+  }
+}));

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalClockItem = void 0;
+var _colorManipulator = require("@mui/system/colorManipulator");
+const DigitalClockItem = exports.DigitalClockItem = styled(MenuItem, {
+  name: 'MuiDigitalClock',
+  slot: 'Item',
+  shouldForwardProp: prop => prop !== 'itemValue' && prop !== 'formattedValue',
+  overridesResolver: (props, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: '8px 16px',
+  margin: '2px 4px',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity)
+  }
+}));
+function transform(t) {
+  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _colorManipulator.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
+}

package/v7.0.0/theme-color-functions/test-cases/opacity-var.expected.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalClockItem = void 0;
+const DigitalClockItem = exports.DigitalClockItem = styled(MenuItem, {
+  name: 'MuiDigitalClock',
+  slot: 'Item',
+  shouldForwardProp: prop => prop !== 'itemValue' && prop !== 'formattedValue',
+  overridesResolver: (props, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: '8px 16px',
+  margin: '2px 4px',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
+  }
+}));
+function transform(t) {
+  const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
+}