@mui/material 5.15.3 → 5.15.5

package/legacy/ToggleButtonGroup/ToggleButtonGroup.js

@@ -8,11 +8,14 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import { getValidReactChildren } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import capitalize from '../utils/capitalize';
-import isValueSelected from './isValueSelected';
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
+import ToggleButtonGroupContext from './ToggleButtonGroupContext';
+import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
+import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -21,7 +24,10 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     disabled = ownerState.disabled;
   var slots = {
     root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
-    grouped: ['grouped', "grouped".concat(capitalize(orientation)), disabled && 'disabled']
+    grouped: ['grouped', "grouped".concat(capitalize(orientation)), disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
   };
   return composeClasses(slots, getToggleButtonGroupUtilityClass, classes);
 };
@@ -30,11 +36,11 @@ var ToggleButtonGroupRoot = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [_defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), styles.grouped), _defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
+    return [_defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), styles.grouped), _defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), styles["grouped".concat(capitalize(ownerState.orientation))]), _defineProperty({}, "& .".concat(toggleButtonGroupClasses.firstButton), styles.firstButton), _defineProperty({}, "& .".concat(toggleButtonGroupClasses.lastButton), styles.lastButton), _defineProperty({}, "& .".concat(toggleButtonGroupClasses.middleButton), styles.middleButton), styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
-})(function (_ref3) {
-  var ownerState = _ref3.ownerState,
-    theme = _ref3.theme;
+})(function (_ref6) {
+  var ownerState = _ref6.ownerState,
+    theme = _ref6.theme;
   return _extends({
     display: 'inline-flex',
     borderRadius: (theme.vars || theme).shape.borderRadius
@@ -42,35 +48,33 @@ var ToggleButtonGroupRoot = styled('div', {
     flexDirection: 'column'
   }, ownerState.fullWidth && {
     width: '100%'
-  }, _defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), _extends({}, ownerState.orientation === 'horizontal' ? _defineProperty({
-    '&:not(:first-of-type)': {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    },
-    '&:not(:last-of-type)': {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }
-  }, "&.".concat(toggleButtonGroupClasses.selected, " + .").concat(toggleButtonGroupClasses.grouped, ".").concat(toggleButtonGroupClasses.selected), {
+  }, _defineProperty({}, "& .".concat(toggleButtonGroupClasses.grouped), _extends({}, ownerState.orientation === 'horizontal' ? _defineProperty({}, "&.".concat(toggleButtonGroupClasses.selected, " + .").concat(toggleButtonGroupClasses.grouped, ".").concat(toggleButtonGroupClasses.selected), {
     borderLeft: 0,
     marginLeft: 0
-  }) : _defineProperty({
-    '&:not(:first-of-type)': {
-      marginTop: -1,
-      borderTop: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    },
-    '&:not(:last-of-type)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
-    }
-  }, "&.".concat(toggleButtonGroupClasses.selected, " + .").concat(toggleButtonGroupClasses.grouped, ".").concat(toggleButtonGroupClasses.selected), {
+  }) : _defineProperty({}, "&.".concat(toggleButtonGroupClasses.selected, " + .").concat(toggleButtonGroupClasses.grouped, ".").concat(toggleButtonGroupClasses.selected), {
     borderTop: 0,
     marginTop: 0
-  }))));
+  }))), ownerState.orientation === 'horizontal' ? _defineProperty(_defineProperty({}, "& .".concat(toggleButtonGroupClasses.firstButton, ",& .").concat(toggleButtonGroupClasses.middleButton), {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  }), "& .".concat(toggleButtonGroupClasses.lastButton, ",& .").concat(toggleButtonGroupClasses.middleButton), {
+    marginLeft: -1,
+    borderLeft: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }) : _defineProperty(_defineProperty({}, "& .".concat(toggleButtonGroupClasses.firstButton, ",& .").concat(toggleButtonGroupClasses.middleButton), {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  }), "& .".concat(toggleButtonGroupClasses.lastButton, ",& .").concat(toggleButtonGroupClasses.middleButton), {
+    marginTop: -1,
+    borderTop: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  }), ownerState.orientation === 'horizontal' ? _defineProperty({}, "& .".concat(toggleButtonGroupClasses.lastButton, ".").concat(toggleButtonClasses.disabled, ",& .").concat(toggleButtonGroupClasses.middleButton, ".").concat(toggleButtonClasses.disabled), {
+    borderLeft: '1px solid transparent'
+  }) : _defineProperty({}, "& .".concat(toggleButtonGroupClasses.lastButton, ".").concat(toggleButtonClasses.disabled, ",& .").concat(toggleButtonGroupClasses.middleButton, ".").concat(toggleButtonClasses.disabled), {
+    borderTop: '1px solid transparent'
+  }));
 });
 var ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   var props = useThemeProps({
@@ -101,7 +105,7 @@ var ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup
     size: size
   });
   var classes = useUtilityClasses(ownerState);
-  var handleChange = function handleChange(event, buttonValue) {
+  var handleChange = React.useCallback(function (event, buttonValue) {
     if (!onChange) {
       return;
     }
@@ -114,12 +118,39 @@ var ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup
       newValue = value ? value.concat(buttonValue) : [buttonValue];
     }
     onChange(event, newValue);
-  };
-  var handleExclusiveChange = function handleExclusiveChange(event, buttonValue) {
+  }, [onChange, value]);
+  var handleExclusiveChange = React.useCallback(function (event, buttonValue) {
     if (!onChange) {
       return;
     }
     onChange(event, value === buttonValue ? null : buttonValue);
+  }, [onChange, value]);
+  var context = React.useMemo(function () {
+    return {
+      className: classes.grouped,
+      onChange: exclusive ? handleExclusiveChange : handleChange,
+      value: value,
+      size: size,
+      fullWidth: fullWidth,
+      color: color,
+      disabled: disabled
+    };
+  }, [classes.grouped, exclusive, handleExclusiveChange, handleChange, value, size, fullWidth, color, disabled]);
+  var validChildren = getValidReactChildren(children);
+  var childrenCount = validChildren.length;
+  var getButtonPositionClassName = function getButtonPositionClassName(index) {
+    var isFirstButton = index === 0;
+    var isLastButton = index === childrenCount - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
   };
   return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, _extends({
     role: "group",
@@ -127,32 +158,27 @@ var ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if (isFragment(child)) {
-          console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+    children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
+      value: context,
+      children: validChildren.map(function (child, index) {
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(["MUI: The ToggleButtonGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          }
         }
-      }
-      return /*#__PURE__*/React.cloneElement(child, {
-        className: clsx(classes.grouped, child.props.className),
-        onChange: exclusive ? handleExclusiveChange : handleChange,
-        selected: child.props.selected === undefined ? isValueSelected(child.props.value, value) : child.props.selected,
-        size: child.props.size || size,
-        fullWidth: fullWidth,
-        color: child.props.color || color,
-        disabled: child.props.disabled || disabled
-      });
+        return /*#__PURE__*/_jsx(ToggleButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index),
+          children: child
+        }, index);
+      })
     })
   }));
 });
 process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/legacy/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+var ToggleButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupButtonContext.displayName = 'ToggleButtonGroupButtonContext';
+}
+export default ToggleButtonGroupButtonContext;

package/legacy/ToggleButtonGroup/ToggleButtonGroupContext.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+var ToggleButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
+}
+export default ToggleButtonGroupContext;

package/legacy/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-var toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth']);
+var toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/legacy/Toolbar/Toolbar.js

@@ -75,10 +75,10 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`.
    * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children.

package/legacy/Tooltip/Tooltip.js

@@ -598,10 +598,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   });
 });
 process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * If `true`, adds an arrow to the tooltip.
    * @default false

package/legacy/Typography/Typography.js

@@ -121,10 +121,10 @@ var Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Set the text-align on the component.
    * @default 'inherit'

package/legacy/Unstable_Grid2/Grid2.js

@@ -20,10 +20,10 @@ var Grid2 = createGrid2({
   }
 });
 process.env.NODE_ENV !== "production" ? Grid2.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/legacy/Zoom/Zoom.js

@@ -129,10 +129,10 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Zoom.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Add a custom transition end trigger. Called with the transitioning DOM
    * node and a done callback. Allows for more fine grained transition end

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.3
+ * @mui/material v5.15.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/styles/CssVarsProvider.js

@@ -1,5 +1,8 @@
 'use client';
 
+// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// @ts-ignore
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_createCssVarsProvider as createCssVarsProvider, unstable_styleFunctionSx as styleFunctionSx } from '@mui/system';
 import experimental_extendTheme from './experimental_extendTheme';

package/legacy/utils/types.js

@@ -0,0 +1 @@
+export {};

package/legacy/utils/useSlot.js

@@ -0,0 +1,71 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { appendOwnerState, resolveComponentProps, mergeSlotProps } from '@mui/base/utils';
+/**
+ * An internal function to create a Material UI slot.
+ *
+ * This is an advanced version of Base UI `useSlotProps` because Material UI allows leaf component to be customized via `component` prop
+ * while Base UI does not need to support leaf component customization.
+ *
+ * @param {string} name: name of the slot
+ * @param {object} parameters
+ * @returns {[Slot, slotProps]} The slot's React component and the slot's props
+ *
+ * Note: the returned slot's props
+ * - will never contain `component` prop.
+ * - might contain `as` prop.
+ */
+export default function useSlot(
+/**
+ * The slot's name. All Material UI components should have `root` slot.
+ *
+ * If the name is `root`, the logic behaves differently from other slots,
+ * e.g. the `externalForwardedProps` are spread to `root` slot but not other slots.
+ */
+name, parameters) {
+  var className = parameters.className,
+    initialElementType = parameters.elementType,
+    ownerState = parameters.ownerState,
+    externalForwardedProps = parameters.externalForwardedProps,
+    getSlotOwnerState = parameters.getSlotOwnerState,
+    internalForwardedProps = parameters.internalForwardedProps,
+    useSlotPropsParams = _objectWithoutProperties(parameters, ["className", "elementType", "ownerState", "externalForwardedProps", "getSlotOwnerState", "internalForwardedProps"]);
+  var rootComponent = externalForwardedProps.component,
+    _externalForwardedPro = externalForwardedProps.slots,
+    slots = _externalForwardedPro === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro,
+    _externalForwardedPro2 = externalForwardedProps.slotProps,
+    slotProps = _externalForwardedPro2 === void 0 ? _defineProperty({}, name, undefined) : _externalForwardedPro2,
+    other = _objectWithoutProperties(externalForwardedProps, ["component", "slots", "slotProps"]);
+  var elementType = slots[name] || initialElementType;
+
+  // `slotProps[name]` can be a callback that receives the component's ownerState.
+  // `resolvedComponentsProps` is always a plain object.
+  var resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  var _mergeSlotProps = mergeSlotProps(_extends({
+      className: className
+    }, useSlotPropsParams, {
+      externalForwardedProps: name === 'root' ? other : undefined,
+      externalSlotProps: resolvedComponentsProps
+    })),
+    _mergeSlotProps$props = _mergeSlotProps.props,
+    slotComponent = _mergeSlotProps$props.component,
+    mergedProps = _objectWithoutProperties(_mergeSlotProps$props, ["component"]),
+    internalRef = _mergeSlotProps.internalRef;
+  var ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  var slotOwnerState = getSlotOwnerState ? getSlotOwnerState(mergedProps) : {};
+  var finalOwnerState = _extends({}, ownerState, slotOwnerState);
+  var LeafComponent = name === 'root' ? slotComponent || rootComponent : slotComponent;
+  var props = appendOwnerState(elementType, _extends({}, name === 'root' && !rootComponent && !slots[name] && internalForwardedProps, name !== 'root' && !slots[name] && internalForwardedProps, mergedProps, LeafComponent && {
+    as: LeafComponent
+  }, {
+    ref: ref
+  }), finalOwnerState);
+  Object.keys(slotOwnerState).forEach(function (propName) {
+    delete props[propName];
+  });
+  return [elementType, props];
+}

package/legacy/zero-styled/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as styled } from '../styles/styled';

package/modern/Accordion/Accordion.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"];
+const _excluded = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "slots", "slotProps", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -15,6 +15,7 @@ import Collapse from '../Collapse';
 import Paper from '../Paper';
 import AccordionContext from './AccordionContext';
 import useControlled from '../utils/useControlled';
+import useSlot from '../utils/useSlot';
 import accordionClasses, { getAccordionUtilityClass } from './accordionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -127,8 +128,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
       expanded: expandedProp,
       onChange,
       square = false,
-      TransitionComponent = Collapse,
-      TransitionProps
+      slots = {},
+      slotProps = {},
+      TransitionComponent: TransitionComponentProp,
+      TransitionProps: TransitionPropsProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [expanded, setExpandedState] = useControlled({
@@ -157,6 +160,21 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     expanded
   });
   const classes = useUtilityClasses(ownerState);
+  const backwardCompatibleSlots = _extends({
+    transition: TransitionComponentProp
+  }, slots);
+  const backwardCompatibleSlotProps = _extends({
+    transition: TransitionPropsProp
+  }, slotProps);
+  const [TransitionSlot, transitionProps] = useSlot('transition', {
+    elementType: Collapse,
+    externalForwardedProps: {
+      slots: backwardCompatibleSlots,
+      slotProps: backwardCompatibleSlotProps
+    },
+    ownerState
+  });
+  delete transitionProps.ownerState;
   return /*#__PURE__*/_jsxs(AccordionRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
@@ -166,10 +184,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     children: [/*#__PURE__*/_jsx(AccordionContext.Provider, {
       value: contextValue,
       children: summary
-    }), /*#__PURE__*/_jsx(TransitionComponent, _extends({
+    }), /*#__PURE__*/_jsx(TransitionSlot, _extends({
       in: expanded,
       timeout: "auto"
-    }, TransitionProps, {
+    }, transitionProps, {
       children: /*#__PURE__*/_jsx("div", {
         "aria-labelledby": summary.props.id,
         id: summary.props['aria-controls'],
@@ -181,10 +199,10 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
   }));
 });
 process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */
@@ -233,6 +251,20 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    * @param {boolean} expanded The `expanded` state of the accordion.
    */
   onChange: PropTypes.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    transition: PropTypes.elementType
+  }),
   /**
    * If `true`, rounded corners are disabled.
    * @default false
@@ -245,12 +277,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7.
    */
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/modern/AccordionActions/AccordionActions.js

@@ -63,10 +63,10 @@ const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions
   }, other));
 });
 process.env.NODE_ENV !== "production" ? AccordionActions.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/modern/AccordionDetails/AccordionDetails.js

@@ -47,10 +47,10 @@ const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails
   }, other));
 });
 process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/modern/AccordionSummary/AccordionSummary.js

@@ -153,10 +153,10 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
   }));
 });
 process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/modern/Alert/Alert.js

@@ -197,10 +197,10 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
@@ -288,7 +288,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'
    */
-  severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),
+  severity: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'success', 'warning']), PropTypes.string]),
   /**
    * The extra props for the slot components.
    * You can override the existing props or add new ones.

package/modern/AlertTitle/AlertTitle.js

@@ -53,10 +53,10 @@ const AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(inProps, re
   }, other));
 });
 process.env.NODE_ENV !== "production" ? AlertTitle.propTypes /* remove-proptypes */ = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */