@mui/material 5.15.3 → 5.15.4

package/node/TextField/TextField.js

@@ -207,10 +207,10 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
   }));
 });
 process.env.NODE_ENV !== "production" ? TextField.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.

package/node/ToggleButton/ToggleButton.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
 var _composeClasses = require("@mui/base/composeClasses");
 var _styles = require("../styles");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
@@ -19,8 +20,12 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasses"));
+var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
+var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupButtonContext"));
+var _isValueSelected = _interopRequireDefault(require("../ToggleButtonGroup/isValueSelected"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
+const _excluded = ["value"],
+  _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -96,8 +101,18 @@ const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   });
 });
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const _React$useContext = React.useContext(_ToggleButtonGroupContext.default),
+    {
+      value: contextValue
+    } = _React$useContext,
+    contextProps = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext, _excluded);
+  const toggleButtonGroupButtonContextPositionClassName = React.useContext(_ToggleButtonGroupButtonContext.default);
+  const resolvedProps = (0, _utils.internal_resolveProps)((0, _extends2.default)({}, contextProps, {
+    selected: (0, _isValueSelected.default)(inProps.value, contextValue)
+  }), inProps);
   const props = (0, _useThemeProps.default)({
-    props: inProps,
+    props: resolvedProps,
     name: 'MuiToggleButton'
   });
   const {
@@ -113,7 +128,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
       size = 'medium',
       value
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const ownerState = (0, _extends2.default)({}, props, {
     color,
     disabled,
@@ -133,8 +148,9 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
       onChange(event, value);
     }
   };
+  const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
+    className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,
@@ -148,10 +164,10 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
   }));
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.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/node/ToggleButtonGroup/ToggleButtonGroup.js

@@ -13,11 +13,14 @@ var _reactIs = require("react-is");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = require("@mui/base/composeClasses");
+var _utils = require("@mui/utils");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _isValueSelected = _interopRequireDefault(require("./isValueSelected"));
 var _toggleButtonGroupClasses = _interopRequireWildcard(require("./toggleButtonGroupClasses"));
+var _ToggleButtonGroupContext = _interopRequireDefault(require("./ToggleButtonGroupContext"));
+var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("./ToggleButtonGroupButtonContext"));
+var _toggleButtonClasses = _interopRequireDefault(require("../ToggleButton/toggleButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -31,7 +34,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
-    grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, disabled && 'disabled']
+    grouped: ['grouped', `grouped${(0, _capitalize.default)(orientation)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
   };
   return (0, _composeClasses.unstable_composeClasses)(slots, _toggleButtonGroupClasses.getToggleButtonGroupUtilityClass, classes);
 };
@@ -46,6 +52,12 @@ const ToggleButtonGroupRoot = (0, _styled.default)('div', {
       [`& .${_toggleButtonGroupClasses.default.grouped}`]: styles.grouped
     }, {
       [`& .${_toggleButtonGroupClasses.default.grouped}`]: styles[`grouped${(0, _capitalize.default)(ownerState.orientation)}`]
+    }, {
+      [`& .${_toggleButtonGroupClasses.default.firstButton}`]: styles.firstButton
+    }, {
+      [`& .${_toggleButtonGroupClasses.default.lastButton}`]: styles.lastButton
+    }, {
+      [`& .${_toggleButtonGroupClasses.default.middleButton}`]: styles.middleButton
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
@@ -60,36 +72,46 @@ const ToggleButtonGroupRoot = (0, _styled.default)('div', {
   width: '100%'
 }, {
   [`& .${_toggleButtonGroupClasses.default.grouped}`]: (0, _extends2.default)({}, ownerState.orientation === 'horizontal' ? {
-    '&:not(:first-of-type)': {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    },
-    '&:not(:last-of-type)': {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    },
     [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
       borderLeft: 0,
       marginLeft: 0
     }
   } : {
-    '&:not(:first-of-type)': {
-      marginTop: -1,
-      borderTop: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0
-    },
-    '&:not(:last-of-type)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0
-    },
     [`&.${_toggleButtonGroupClasses.default.selected} + .${_toggleButtonGroupClasses.default.grouped}.${_toggleButtonGroupClasses.default.selected}`]: {
       borderTop: 0,
       marginTop: 0
     }
   })
+}, ownerState.orientation === 'horizontal' ? {
+  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+    marginLeft: -1,
+    borderLeft: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }
+} : {
+  [`& .${_toggleButtonGroupClasses.default.firstButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  [`& .${_toggleButtonGroupClasses.default.lastButton},& .${_toggleButtonGroupClasses.default.middleButton}`]: {
+    marginTop: -1,
+    borderTop: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  }
+}, ownerState.orientation === 'horizontal' ? {
+  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+    borderLeft: '1px solid transparent'
+  }
+} : {
+  [`& .${_toggleButtonGroupClasses.default.lastButton}.${_toggleButtonClasses.default.disabled},& .${_toggleButtonGroupClasses.default.middleButton}.${_toggleButtonClasses.default.disabled}`]: {
+    borderTop: '1px solid transparent'
+  }
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   const props = (0, _useThemeProps.default)({
@@ -116,7 +138,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     size
   });
   const classes = useUtilityClasses(ownerState);
-  const handleChange = (event, buttonValue) => {
+  const handleChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
       return;
     }
@@ -129,12 +151,37 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
       newValue = value ? value.concat(buttonValue) : [buttonValue];
     }
     onChange(event, newValue);
-  };
-  const handleExclusiveChange = (event, buttonValue) => {
+  }, [onChange, value]);
+  const handleExclusiveChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
       return;
     }
     onChange(event, value === buttonValue ? null : buttonValue);
+  }, [onChange, value]);
+  const context = React.useMemo(() => ({
+    className: classes.grouped,
+    onChange: exclusive ? handleExclusiveChange : handleChange,
+    value,
+    size,
+    fullWidth,
+    color,
+    disabled
+  }), [classes.grouped, exclusive, handleExclusiveChange, handleChange, value, size, fullWidth, color, disabled]);
+  const validChildren = (0, _utils.getValidReactChildren)(children);
+  const childrenCount = validChildren.length;
+  const getButtonPositionClassName = index => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === childrenCount - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonGroupRoot, (0, _extends2.default)({
     role: "group",
@@ -142,32 +189,27 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: React.Children.map(children, child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-      if (process.env.NODE_ENV !== 'production') {
-        if ((0, _reactIs.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__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupContext.default.Provider, {
+      value: context,
+      children: validChildren.map((child, index) => {
+        if (process.env.NODE_ENV !== 'production') {
+          if ((0, _reactIs.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: (0, _clsx.default)(classes.grouped, child.props.className),
-        onChange: exclusive ? handleExclusiveChange : handleChange,
-        selected: child.props.selected === undefined ? (0, _isValueSelected.default)(child.props.value, value) : child.props.selected,
-        size: child.props.size || size,
-        fullWidth,
-        color: child.props.color || color,
-        disabled: child.props.disabled || disabled
-      });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleButtonGroupButtonContext.default.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/node/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @ignore - internal component.
+ */
+const ToggleButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupButtonContext.displayName = 'ToggleButtonGroupButtonContext';
+}
+var _default = exports.default = ToggleButtonGroupButtonContext;

package/node/ToggleButtonGroup/ToggleButtonGroupContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @ignore - internal component.
+ */
+const ToggleButtonGroupContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';
+}
+var _default = exports.default = ToggleButtonGroupContext;

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getToggleButtonGroupUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth']);
+const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 var _default = exports.default = toggleButtonGroupClasses;

package/node/Toolbar/Toolbar.js

@@ -85,10 +85,10 @@ const 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/node/Tooltip/Tooltip.js

@@ -594,10 +594,10 @@ const 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/node/Typography/Typography.js

@@ -129,10 +129,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   }, 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/node/Unstable_Grid2/Grid2.js

@@ -22,10 +22,10 @@ const Grid2 = (0, _Unstable_Grid.createGrid)({
   })
 });
 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/node/Zoom/Zoom.js

@@ -136,10 +136,10 @@ const 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/node/index.js

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

package/node/styles/CssVarsProvider.js

@@ -1,6 +1,9 @@
 "use strict";
 '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
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.15.3",
+  "version": "5.15.4",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.6",
-    "@mui/base": "5.0.0-beta.30",
-    "@mui/core-downloads-tracker": "^5.15.3",
-    "@mui/system": "^5.15.3",
-    "@mui/types": "^7.2.12",
-    "@mui/utils": "^5.15.3",
+    "@babel/runtime": "^7.23.7",
     "@types/react-transition-group": "^4.4.10",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "csstype": "^3.1.2",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@mui/base": "5.0.0-beta.31",
+    "@mui/utils": "^5.15.4",
+    "@mui/types": "^7.2.13",
+    "@mui/system": "^5.15.4",
+    "@mui/core-downloads-tracker": "^5.15.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -60,7 +60,8 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "build"
   },
   "engines": {
     "node": ">=12.0.0"

package/styles/CssVarsProvider.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SupportedColorScheme } from './experimental_extendTheme';
-declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
     theme?: {
         cssVarPrefix?: string | undefined;
         colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
@@ -16,5 +16,5 @@ declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
-}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
 export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider, };

package/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';