@mui/material 7.1.2 → 7.3.0

package/Accordion/Accordion.d.ts

@@ -23,10 +23,16 @@ export interface AccordionSlots {
    * @default Collapse
    */
   transition: React.ElementType;
+  /**
+   * The component that renders the region.
+   * @default 'div'
+   */
+  region: React.ElementType;
 }
 export interface AccordionRootSlotPropsOverrides {}
 export interface AccordionHeadingSlotPropsOverrides {}
 export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionRegionSlotPropsOverrides {}
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots, {
   /**
    * Props forwarded to the root slot.
@@ -43,6 +49,11 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots,
    * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
    */
   transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
+  /**
+   * Props forwarded to the region slot.
+   * By default, the available props are based on the div element.
+   */
+  region: SlotProps<'div', AccordionRegionSlotPropsOverrides, AccordionOwnerState>;
 }>;
 export type AccordionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendPaperTypeMap<{
   props: AdditionalProps & {

package/Accordion/Accordion.js

@@ -132,6 +132,10 @@ const AccordionHeading = (0, _zeroStyled.styled)('h3', {
 })({
   all: 'unset'
 });
+const AccordionRegion = (0, _zeroStyled.styled)('div', {
+  name: 'MuiAccordion',
+  slot: 'Region'
+})({});
 const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
@@ -216,6 +220,17 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     externalForwardedProps,
     ownerState
   });
+  const [AccordionRegionSlot, accordionRegionProps] = (0, _useSlot.default)('region', {
+    elementType: AccordionRegion,
+    externalForwardedProps,
+    ownerState,
+    className: classes.region,
+    additionalProps: {
+      'aria-labelledby': summary.props.id,
+      id: summary.props['aria-controls'],
+      role: 'region'
+    }
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionHeadingSlot, {
@@ -228,11 +243,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
       in: expanded,
       timeout: "auto",
       ...transitionProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "aria-labelledby": summary.props.id,
-        id: summary.props['aria-controls'],
-        role: "region",
-        className: classes.region,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AccordionRegionSlot, {
+        ...accordionRegionProps,
         children: children
       })
     })]
@@ -297,6 +309,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slotProps: _propTypes.default.shape({
     heading: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    region: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
@@ -306,6 +319,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slots: _propTypes.default.shape({
     heading: _propTypes.default.elementType,
+    region: _propTypes.default.elementType,
     root: _propTypes.default.elementType,
     transition: _propTypes.default.elementType
   }),

package/Alert/Alert.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -54,8 +53,8 @@ const AlertRoot = (0, _zeroStyled.styled)(_Paper.default, {
 })((0, _memoTheme.default)(({
   theme
 }) => {
-  const getColor = theme.palette.mode === 'light' ? _colorManipulator.darken : _colorManipulator.lighten;
-  const getBackgroundColor = theme.palette.mode === 'light' ? _colorManipulator.lighten : _colorManipulator.darken;
+  const getColor = theme.palette.mode === 'light' ? theme.darken : theme.lighten;
+  const getBackgroundColor = theme.palette.mode === 'light' ? theme.lighten : theme.darken;
   return {
     ...theme.typography.body2,
     backgroundColor: 'transparent',

package/Autocomplete/Autocomplete.js

@@ -19,7 +19,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
@@ -375,16 +374,16 @@ const AutocompleteListbox = (0, _zeroStyled.styled)('ul', {
       backgroundColor: (theme.vars || theme).palette.action.focus
     },
     '&[aria-selected="true"]': {
-      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),
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),
       [`&.${_autocompleteClasses.default.focused}`]: {
-        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),
+        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.vars || theme).palette.action.selected
         }
       },
       [`&.${_autocompleteClasses.default.focusVisible}`]: {
-        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)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
       }
     }
   }
@@ -924,6 +923,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * Used to determine the disabled state for a given option.
    *
    * @param {Value} option The option to test.
+   * @template Value The option shape. Will be the same shape as an item of the options.
    * @returns {boolean}
    */
   getOptionDisabled: _propTypes.default.func,

package/Backdrop/Backdrop.js

@@ -91,6 +91,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     ...slotProps
   };
   const externalForwardedProps = {
+    component,
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
   };

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -15,7 +15,9 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
-const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default)((0, _memoTheme.default)(({
+const BreadcrumbCollapsedButton = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  name: 'MuiBreadcrumbCollapsed'
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   display: 'flex',

package/Button/Button.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _utils = require("../utils");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
@@ -166,15 +165,15 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       style: {
         '--variant-textColor': (theme.vars || theme).palette[color].main,
         '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
-        '--variant-outlinedBorder': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5),
+        '--variant-outlinedBorder': theme.alpha((theme.vars || theme).palette[color].main, 0.5),
         '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
         '--variant-containedBg': (theme.vars || theme).palette[color].main,
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': (theme.vars || theme).palette[color].dark,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity),
             '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }
@@ -189,8 +188,8 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         '@media (hover: hover)': {
           '&:hover': {
             '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-            '--variant-textBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-            '--variant-outlinedBg': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+            '--variant-textBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity),
+            '--variant-outlinedBg': theme.alpha((theme.vars || theme).palette.text.primary, (theme.vars || theme).palette.action.hoverOpacity)
           }
         }
       }

package/ButtonGroup/ButtonGroup.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
@@ -129,7 +128,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
     },
     style: {
       [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
-        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        borderRight: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -142,7 +141,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
     },
     style: {
       [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
-        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        borderBottom: theme.vars ? `1px solid ${theme.alpha(theme.vars.palette.common.onBackground, 0.23)}` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
         [`&.${_buttonGroupClasses.default.disabled}`]: {
           borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
         }
@@ -155,7 +154,7 @@ const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
     },
     style: {
       [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5)
+        borderColor: theme.alpha((theme.vars || theme).palette[color].main, 0.5)
       }
     }
   }]), {

package/CHANGELOG.md

@@ -1,5 +1,146 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.0
+
+<!-- generated comparing v7.2.0..master -->
+
+_Aug 5, 2025_
+
+A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Shipped `nativeColor` feature that eliminates JS color manipulation and unlocks support for all modern color spaces (#43942) @siriwatknp!
+
+  To learn more, check out the [Native Color](https://mui.com/material-ui/customization/css-theme-variables/native-color/) guide.
+
+### `@mui/material@7.3.0`
+
+- Support native color without JS manipulation (#43942) @siriwatknp
+- [Accordion] Add `region` slot (#46659) @sai6855
+- [SpeedDial] Fix navigation with arrow keys when slotProps.fab is defined (#46508) @sai6855
+- [Select] Improve `MenuProps.slotProps` implementation (#46612) @ZeeshanTamboli
+- [Select] Implement pointer cancellation (#45789) @Kartik-Murthy
+- [Switch] Add role="switch" (#46482) @ZeeshanTamboli
+- [Autocomplete] Fix auto highlight when options change but not the length (#46489) @yafeng-c
+
+### `@mui/codemod@7.3.0`
+
+- Fix `v5.0.0/top-level-imports` codemod changing color imports (#46405) @AidanLDev
+
+### Docs
+
+- Add JetBrains IDEs MCP configuration (#46470) @bernardobelchior
+- Add warning to array spacing section (#46542) @cherniavskii
+- Add MCP server installation details for Claude Code (#46621) @saschabratton
+- Fix incorrect command for MCP Inspector in mcp.md (#46630) @EndiM
+- Fix incorrect Typography override example for responsive styles (#46558) @aditi291soni
+- Improve MCP docs (#46557) @siriwatknp
+- Fix displaying of components in dark mode (#46544) @sai6855
+- Generate `template` entries about documented generics (#46540) @LukasTy
+- Use fixed dates for stable CRUD dashboard screenshots (#46546) @apedroferreira
+- Add "Edit in Mui Chat" button on demos (#46480) @siriwatknp
+- Fix Menu customization demo (#46535) @siriwatknp
+- Add dashboard with CRUD template based on Toolpad Core (#46376) @apedroferreira
+- Clarify `createTheme` warning for future compatibility (#46476) @satendra03
+- Remove typo in `_redirects` (#46463) @bharatkashyap
+- Change API docs to stay inside Material UI (#46414) @bharatkashyap
+- [Dialog] Fix Form dialog demo's actions button padding (#46506) @frontman-git
+- [SpeedDial] Remove deprecated props from demos (#46485) @sai6855
+- [Switch] Use `slotProps.input` instead of deprecated `inputProps` for accessible controlled switch (#46625) @adiitxa
+
+### Core
+
+- Fix ESLint reference name (80d32a2) @oliviertassinari
+- Fix ESLint reference name (5fc166e) @oliviertassinari
+- Add `@base-ui-components/*` to env info (#46539) @Janpot
+- Remove dead property from routes (#46534) @oliviertassinari
+- Fix unpinned version regression (#46438) @oliviertassinari
+- [code-infra] Accomodate build requirements from mui-x (#46551) @brijeshb42
+- [code-infra] Extend renovate preset from infra repo (#46483) @brijeshb42
+- [code-infra] Use flat eslint config (#46258) @brijeshb42
+- [docs-infra] Remove comment saving in G-sheet option (#46617) @alexfauquette
+- [docs-infra] Move `Open in MUI Chat` to Demo toolbar and adjust styles (#46579) @siriwatknp
+- [docs-infra] Fix codeblock issues (#46323) @atharva3333
+- [docs-infra] Handle white spaces and generate either TS or JS demo for llms files (#46494) @siriwatknp
+- [examples] Rename PopOverMenu.tsx file to match its usage (#46532) @rjray
+- [infra] Fix `test_types_next`, `test_react_18`, `test_react_next` jobs (#46182) @Janpot
+- [infra] Remove package.json `module` field (#46620) @Janpot
+- [infra] Upgrade form-data to >4.0.4 (#46618) @Janpot
+- [infra] Use cpu option only in CI (#46588) @Janpot
+- [infra] Update scripts to delete publishConfig.directory (#46563) @brijeshb42
+- [infra] Remove `transform-runtime` from `next/babel` (#46552) @Janpot
+- [infra] Revert nx update (#46538) @Janpot
+- [infra] Replace Argos script with code-infra CLI and update deps (#46475) @Janpot
+- [infra] Update node group in renovate config (#46474) @Janpot
+- [infra] Move @playwright/test to peer deps in @mui/internal-test-utils (#46459) @Janpot
+- [infra] Add instructions for patch release (#46382) @mnajdova
+
+All contributors of this release in alphabetical order: @adiitxa, @aditi291soni, @AidanLDev, @alexfauquette, @apedroferreira, @atharva3333, @bernardobelchior, @bharatkashyap, @brijeshb42, @cherniavskii, @EndiM, @frontman-git, @Janpot, @Kartik-Murthy, @LukasTy, @mnajdova, @oliviertassinari, @rjray, @sai6855, @saschabratton, @satendra03, @siriwatknp, @yafeng-c, @ZeeshanTamboli
+
+## 7.2.0
+
+<!-- generated comparing v7.1.1..master -->
+
+_Jun 26, 2025_
+
+A big thanks to the 17 contributors who made this release possible. Here are the highlights ✨:
+
+- ⚡️ Added `modularCssLayers` theme option for splitting styles into multiple CSS layers (#46001) @siriwatknp.
+- 📖 Added example for using Material UI with React Router v7 (#46406) @siriwatknp.
+
+### `@mui/material@7.2.0`
+
+- [Backdrop] Fix handling of `component` prop (#46269) @sai6855
+- [Chip] Explicitly define line-height (#46260) @DiegoAndai
+- [Chip] Fix handling on event handlers (#46263) @sai6855
+- [OutlinedInput][Input] Deprecate composed classes (#46316) @sai6855
+- [Select] Pass MenuProps.slotProps.list alongside MenuListProps (#46274) @scousino
+- [l10] Enable `labelDisplayedRows` translation for Romanian (#46377) @dhu-redwoodtech
+- Skip generating `modularCssLayers` CSS var (#46329) @siriwatknp
+
+### `@mui/system@7.2.0`
+
+- Add `modularCssLayers` theme flag to split styles into multiple CSS layers (#46001) @siriwatknp
+
+### `@mui/styled-engine@7.2.0`
+
+- Do not reuse the emotion cache across SSR requests (#46276) @robbtraister
+
+### `@mui/codemod@7.2.0`
+
+- [Dialog] Add codemod for deprecated props (#46328) @sai6855
+
+### Docs
+
+- Don't forward `hasAiSuggestion` (#46415) @bharatkashyap
+- Add introduction to MCP (#46224) @bharatkashyap
+- Fallback for searchbar during SSR (#46364) @Janpot
+- Update InitColorSchemeScript options to match colorSchemeSelector (#46302) @humble-barnacle001
+- Add `ListItemButton` to make the deprecation clear (#46356) @siriwatknp
+- Remove "Unstyled" section from component docs (#46272) @mapache-salvaje
+- Add Testing section to Rating component doc (#46268) @0210shivam
+- Fix fade modal demo (#46271) @brijeshb42
+- [ai] Add suggestions to edit with MUI Chat (#46309) @bharatkashyap
+- [Dialog] Fix form dialog uses ARIA roles on incompatible elements (#46307) @ZeeshanTamboli
+- [Menu] Fix dark mode styling of grouped header demo (#46317) @sai6855
+- [TextField] Removed type="number" demos (#46314) @KirankumarAmbati
+- [examples] Add `material-ui-react-router-ts` example (#46406) @siriwatknp
+
+### Core
+
+- pnpm docs:sync-team (3641a0b) @oliviertassinari
+- Add cross-env to eslint script (#46358) @ZeeshanTamboli
+- Support merging of className and style from theme (#45975) @sai6855
+- [code-infra] Create bundle size package (#45911) @Janpot
+- [docs-infra] Add a script to generate Material UI `llms.txt` and docs markdown. (#46308) @siriwatknp
+- [docs-infra] Fix stackblitz for js projects (#46220) @Janpot
+- [infra] Add emotion as external for bundle monitor (#46372) @Janpot
+- [infra] Create update PR on every canary publish for internal packages (#46367) @Janpot
+- [infra] Remove deprecated esmExternals (#46365) @Janpot
+- [infra] Support project-specific changelog in build scripts (#46425) @michaldudak
+- [toolpad][website] Remove references to Toolpad (#46311) @prakhargupta1
+
+All contributors of this release in alphabetical order: @0210shivam, @bharatkashyap, @brijeshb42, @dhu-redwoodtech, @DiegoAndai, @humble-barnacle001, @Janpot, @KirankumarAmbati, @mapache-salvaje, @michaldudak, @oliviertassinari, @prakhargupta1, @robbtraister, @sai6855, @scousino, @siriwatknp, @ZeeshanTamboli
+
 ## 7.1.2
 
 _Jun 18, 2025_

package/Checkbox/Checkbox.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
 var _CheckBoxOutlineBlank = _interopRequireDefault(require("../internal/svg-icons/CheckBoxOutlineBlank"));
 var _CheckBox = _interopRequireDefault(require("../internal/svg-icons/CheckBox"));
@@ -64,7 +63,7 @@ const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
@@ -74,7 +73,7 @@ const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
     },
     style: {
       '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+        backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
       }
     }
   })), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({

package/Chip/Chip.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _Cancel = _interopRequireDefault(require("../internal/svg-icons/Cancel"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
@@ -93,6 +92,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
     alignItems: 'center',
     justifyContent: 'center',
     height: 32,
+    lineHeight: 1.5,
     color: (theme.vars || theme).palette.text.primary,
     backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
@@ -142,12 +142,12 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
     },
     [`& .${_chipClasses.default.deleteIcon}`]: {
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.26),
+      color: theme.alpha((theme.vars || theme).palette.text.primary, 0.26),
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.4)
+        color: theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
       }
     },
     variants: [{
@@ -176,7 +176,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
           backgroundColor: (theme.vars || theme).palette[color].main,
           color: (theme.vars || theme).palette[color].contrastText,
           [`& .${_chipClasses.default.deleteIcon}`]: {
-            color: theme.vars ? `rgba(${theme.vars.palette[color].contrastTextChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[color].contrastText, 0.7),
+            color: theme.alpha((theme.vars || theme).palette[color].contrastText, 0.7),
             '&:hover, &:active': {
               color: (theme.vars || theme).palette[color].contrastText
             }
@@ -203,7 +203,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
       },
       style: {
         [`&.${_chipClasses.default.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         }
       }
     }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)(['dark'])).map(([color]) => {
@@ -227,10 +227,10 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
         WebkitTapHighlightColor: 'transparent',
         cursor: 'pointer',
         '&:hover': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)
         },
         [`&.${_chipClasses.default.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
         },
         '&:active': {
           boxShadow: (theme.vars || theme).shadows[1]
@@ -286,15 +286,15 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
       },
       style: {
         color: (theme.vars || theme).palette[color].main,
-        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.7)}`,
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.7)}`,
         [`&.${_chipClasses.default.clickable}:hover`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
         },
         [`&.${_chipClasses.default.focusVisible}`]: {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.focusOpacity)
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.focusOpacity)
         },
         [`& .${_chipClasses.default.deleteIcon}`]: {
-          color: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.7)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.7),
+          color: theme.alpha((theme.vars || theme).palette[color].main, 0.7),
           '&:hover, &:active': {
             color: (theme.vars || theme).palette[color].main
           }

package/Divider/Divider.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -68,7 +67,7 @@ const DividerRoot = (0, _zeroStyled.styled)('div', {
       light: true
     },
     style: {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : (0, _colorManipulator.alpha)(theme.palette.divider, 0.08)
+      borderColor: theme.alpha((theme.vars || theme).palette.divider, 0.08)
     }
   }, {
     props: {

package/FilledInput/FilledInput.js

@@ -112,7 +112,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           }
         },
         '&::before': {
-          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          borderBottom: `1px solid ${theme.vars ? theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline) : bottomLineColor}`,
           left: 0,
           bottom: 0,
           content: '"\\00a0"',

package/IconButton/IconButton.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _utils = require("../utils");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -63,7 +62,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   variants: [{
     props: props => !props.disableRipple,
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity),
       '&:hover': {
         backgroundColor: 'var(--IconButton-hoverBg)',
         // Reset on touch devices, it doesn't add specificity
@@ -127,7 +126,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       color
     },
     style: {
-      '--IconButton-hoverBg': theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity)
+      '--IconButton-hoverBg': theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   })), {
     props: {

package/Input/Input.js

@@ -53,7 +53,7 @@ const InputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
+    bottomLineColor = theme.alpha(theme.vars.palette.common.onBackground, theme.vars.opacity.inputUnderline);
   }
   return {
     position: 'relative',

package/Input/inputClasses.d.ts

@@ -21,13 +21,21 @@ export interface InputClasses {
   fullWidth: string;
   /** Styles applied to the input element. */
   input: string;
-  /** Styles applied to the input element if `size="small"`. */
+  /** Styles applied to the input element if `size="small"`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#inputbase-classes-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputSizeSmall: string;
-  /** Styles applied to the input element if `multiline={true}`. */
+  /** Styles applied to the input element if `multiline={true}`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#inputbase-classes-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputMultiline: string;
-  /** Styles applied to the input element if `startAdornment` is provided. */
+  /** Styles applied to the input element if `startAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#inputbase-classes-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedStart: string;
-  /** Styles applied to the input element if `endAdornment` is provided. */
+  /** Styles applied to the input element if `endAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#inputbase-classes-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#inputbase-classes-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
   inputAdornedEnd: string;
   /** Styles applied to the input element if `type="search"`. */
   inputTypeSearch: string;

package/LinearProgress/LinearProgress.js

@@ -11,7 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
@@ -100,7 +99,7 @@ const getColorShade = (theme, color) => {
   if (theme.vars) {
     return theme.vars.palette.LinearProgress[`${color}Bg`];
   }
-  return theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[color].main, 0.5);
+  return theme.palette.mode === 'light' ? theme.lighten(theme.palette[color].main, 0.62) : theme.darken(theme.palette[color].main, 0.5);
 };
 const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',