@mui/material 5.15.3 → 5.15.5

package/TabScrollButton/TabScrollButton.js

@@ -101,10 +101,10 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
   }));
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.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/Table/Table.js

@@ -86,10 +86,10 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
   });
 });
 process.env.NODE_ENV !== "production" ? Table.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 table, normally `TableHead` and `TableBody`.
    */

package/TableBody/TableBody.js

@@ -58,10 +58,10 @@ const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref)
   });
 });
 process.env.NODE_ENV !== "production" ? TableBody.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, normally `TableRow`.
    */

package/TableCell/TableCell.js

@@ -154,10 +154,10 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? TableCell.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 table cell content.
    *

package/TableContainer/TableContainer.js

@@ -50,10 +50,10 @@ const TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(inP
   }, other));
 });
 process.env.NODE_ENV !== "production" ? TableContainer.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, normally `Table`.
    */

package/TableFooter/TableFooter.js

@@ -58,10 +58,10 @@ const TableFooter = /*#__PURE__*/React.forwardRef(function TableFooter(inProps,
   });
 });
 process.env.NODE_ENV !== "production" ? TableFooter.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, normally `TableRow`.
    */

package/TableHead/TableHead.js

@@ -58,10 +58,10 @@ const TableHead = /*#__PURE__*/React.forwardRef(function TableHead(inProps, ref)
   });
 });
 process.env.NODE_ENV !== "production" ? TableHead.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, normally `TableRow`.
    */

package/TablePagination/TablePagination.js

@@ -255,10 +255,10 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
   }));
 });
 process.env.NODE_ENV !== "production" ? TablePagination.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 component used for displaying the actions.
    * Either a string to use a HTML element or a component.

package/TableRow/TableRow.js

@@ -88,10 +88,10 @@ const TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {
   }, other));
 });
 process.env.NODE_ENV !== "production" ? TableRow.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Should be valid <tr> children such as `TableCell`.
    */

package/TableSortLabel/TableSortLabel.js

@@ -127,10 +127,10 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
   }));
 });
 process.env.NODE_ENV !== "production" ? TableSortLabel.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`, the label will have the active styling (should be true for the sorted column).
    * @default false

package/Tabs/Tabs.js

@@ -687,10 +687,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Tabs.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Callback fired when the component mounts.
    * This is useful when you want to trigger an action programmatically.

package/TextField/TextField.d.ts

@@ -36,7 +36,7 @@ export interface BaseTextFieldProps
   /**
    * @ignore
    */
-  children?: React.ReactNode;
+  children?: FormControlProps['children'];
   /**
    * Override or extend the styles applied to the component.
    */

package/TextField/TextField.js

@@ -200,10 +200,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/ToggleButton/ToggleButton.js

@@ -3,10 +3,12 @@
 // @inheritedComponent ButtonBase
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '../styles';
 import ButtonBase from '../ButtonBase';
@@ -14,6 +16,9 @@ import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import styled from '../styles/styled';
 import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
+import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
+import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
+import isValueSelected from '../ToggleButtonGroup/isValueSelected';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -88,8 +93,18 @@ const ToggleButtonRoot = styled(ButtonBase, {
   });
 });
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const _React$useContext = React.useContext(ToggleButtonGroupContext),
+    {
+      value: contextValue
+    } = _React$useContext,
+    contextProps = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
+  const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
+  const resolvedProps = resolveProps(_extends({}, contextProps, {
+    selected: isValueSelected(inProps.value, contextValue)
+  }), inProps);
   const props = useThemeProps({
-    props: inProps,
+    props: resolvedProps,
     name: 'MuiToggleButton'
   });
   const {
@@ -105,7 +120,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
       size = 'medium',
       value
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const ownerState = _extends({}, props, {
     color,
     disabled,
@@ -125,8 +140,9 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
       onChange(event, value);
     }
   };
+  const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsx(ToggleButtonRoot, _extends({
-    className: clsx(classes.root, className),
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     ref: ref,
@@ -140,10 +156,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/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";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,7 +26,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled']
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
   };
   return composeClasses(slots, getToggleButtonGroupUtilityClass, classes);
 };
@@ -38,6 +44,12 @@ const ToggleButtonGroupRoot = styled('div', {
       [`& .${toggleButtonGroupClasses.grouped}`]: styles.grouped
     }, {
       [`& .${toggleButtonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`]
+    }, {
+      [`& .${toggleButtonGroupClasses.firstButton}`]: styles.firstButton
+    }, {
+      [`& .${toggleButtonGroupClasses.lastButton}`]: styles.lastButton
+    }, {
+      [`& .${toggleButtonGroupClasses.middleButton}`]: styles.middleButton
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
@@ -52,36 +64,46 @@ const ToggleButtonGroupRoot = styled('div', {
   width: '100%'
 }, {
   [`& .${toggleButtonGroupClasses.grouped}`]: _extends({}, 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.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.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.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
       borderTop: 0,
       marginTop: 0
     }
   })
+}, ownerState.orientation === 'horizontal' ? {
+  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+    marginLeft: -1,
+    borderLeft: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }
+} : {
+  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+    marginTop: -1,
+    borderTop: '1px solid transparent',
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  }
+}, ownerState.orientation === 'horizontal' ? {
+  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+    borderLeft: '1px solid transparent'
+  }
+} : {
+  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+    borderTop: '1px solid transparent'
+  }
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   const props = useThemeProps({
@@ -108,7 +130,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;
     }
@@ -121,12 +143,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 = 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__*/_jsx(ToggleButtonGroupRoot, _extends({
     role: "group",
@@ -134,32 +181,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 (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((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,
-        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/ToggleButtonGroup/ToggleButtonGroupButtonContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+declare const ToggleButtonGroupButtonContext: React.Context<string | undefined>;
+export default ToggleButtonGroupButtonContext;

package/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

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

package/ToggleButtonGroup/ToggleButtonGroupContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ToggleButtonGroupProps } from './ToggleButtonGroup';
+interface ToggleButtonGroupContextType {
+    className?: string;
+    onChange?: ToggleButtonGroupProps['onChange'];
+    value?: ToggleButtonGroupProps['value'];
+    size?: ToggleButtonGroupProps['size'];
+    fullWidth?: ToggleButtonGroupProps['fullWidth'];
+    color?: ToggleButtonGroupProps['color'];
+    disabled?: ToggleButtonGroupProps['disabled'];
+}
+/**
+ * @ignore - internal component.
+ */
+declare const ToggleButtonGroupContext: React.Context<ToggleButtonGroupContextType>;
+export default ToggleButtonGroupContext;

package/ToggleButtonGroup/ToggleButtonGroupContext.js

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

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -13,6 +13,12 @@ export interface ToggleButtonGroupClasses {
     groupedVertical: string;
     /** Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: string;
+    /** Styles applied to the first button in the toggle button group. */
+    firstButton: string;
+    /** Styles applied to the last button in the toggle button group. */
+    lastButton: string;
+    /** Styles applied to buttons in the middle of the toggle button group. */
+    middleButton: string;
 }
 export type ToggleButtonGroupClassKey = keyof ToggleButtonGroupClasses;
 export declare function getToggleButtonGroupUtilityClass(slot: string): string;

package/ToggleButtonGroup/toggleButtonGroupClasses.js

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

package/Toolbar/Toolbar.js

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

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

@@ -121,10 +121,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'