@mui/material 5.14.8 → 5.14.9

package/legacy/ButtonGroup/ButtonGroupButtonContext.js

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

package/legacy/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
+var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;

package/legacy/Modal/Modal.js

@@ -109,11 +109,13 @@ var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
     onBackdropClick = props.onBackdropClick,
     onClose = props.onClose,
+    onTransitionEnter = props.onTransitionEnter,
+    onTransitionExited = props.onTransitionExited,
     open = props.open,
     slotProps = props.slotProps,
     slots = props.slots,
     theme = props.theme,
-    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"]);
+    other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"]);
   var propsWithDefaults = _extends({}, props, {
     closeAfterTransition: closeAfterTransition,
     disableAutoFocus: disableAutoFocus,

package/legacy/Slider/Slider.js

@@ -15,14 +15,14 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
-import SliderValueLabel from './SliderValueLabel';
+import BaseSliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Identity(x) {
   return x;
 }
-var SliderRoot = styled('span', {
+export var SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -80,18 +80,7 @@ var SliderRoot = styled('span', {
     transition: 'none'
   })), _extends2));
 });
-process.env.NODE_ENV !== "production" ? SliderRoot.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderRoot };
-var SliderRail = styled('span', {
+export var SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
   overridesResolver: function overridesResolver(props, styles) {
@@ -119,18 +108,7 @@ var SliderRail = styled('span', {
     opacity: 1
   });
 });
-process.env.NODE_ENV !== "production" ? SliderRail.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderRail };
-var SliderTrack = styled('span', {
+export var SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: function overridesResolver(props, styles) {
@@ -168,18 +146,7 @@ var SliderTrack = styled('span', {
     borderColor: theme.vars ? theme.vars.palette.Slider["".concat(ownerState.color, "Track")] : color
   });
 });
-process.env.NODE_ENV !== "production" ? SliderTrack.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderTrack };
-var SliderThumb = styled('span', {
+export var SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: function overridesResolver(props, styles) {
@@ -248,18 +215,7 @@ var SliderThumb = styled('span', {
     }
   }), _extends3));
 });
-process.env.NODE_ENV !== "production" ? SliderThumb.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderThumb };
-var StyledSliderValueLabel = styled(SliderValueLabel, {
+export var SliderValueLabel = styled(BaseSliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -317,18 +273,7 @@ var StyledSliderValueLabel = styled(SliderValueLabel, {
     padding: '0.25rem 0.5rem'
   });
 });
-process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { StyledSliderValueLabel as SliderValueLabel };
-var SliderMark = styled('span', {
+export var SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -359,18 +304,7 @@ var SliderMark = styled('span', {
     opacity: 0.8
   });
 });
-process.env.NODE_ENV !== "production" ? SliderMark.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderMark };
-var SliderMarkLabel = styled('span', {
+export var SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -403,17 +337,6 @@ var SliderMarkLabel = styled('span', {
     color: (theme.vars || theme).palette.text.primary
   });
 });
-process.env.NODE_ENV !== "production" ? SliderMarkLabel.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"     |
-  // ----------------------------------------------------------------------
-  /**
-   * @ignore
-   */
-  children: PropTypes.node
-} : void 0;
-export { SliderMarkLabel };
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var disabled = ownerState.disabled,
     dragging = ownerState.dragging,
@@ -545,7 +468,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
   var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
   var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
-  var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : StyledSliderValueLabel;
+  var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
   var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
   var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
   var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';

package/legacy/Tabs/Tabs.js

@@ -180,10 +180,7 @@ var TabsIndicator = styled('span', {
     right: 0
   });
 });
-var TabsScrollbarSize = styled(ScrollbarSize, {
-  name: 'MuiTabs',
-  slot: 'ScrollbarSize'
-})({
+var TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: 'auto',
   overflowY: 'hidden',
   // Hide dimensionless scrollbar on macOS

package/legacy/index.js

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

package/legacy/useTouchRipple/useTouchRipple.js

@@ -12,7 +12,7 @@ var useTouchRipple = function useTouchRipple(props) {
   React.useEffect(function () {
     if (focusVisible && !disableFocusRipple && !disableRipple) {
       var _rippleRef$current;
-      (_rippleRef$current = rippleRef.current) == null ? void 0 : _rippleRef$current.pulsate();
+      (_rippleRef$current = rippleRef.current) == null || _rippleRef$current.pulsate();
     }
   }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
   function useRippleHandler(rippleAction) {
@@ -30,7 +30,7 @@ var useTouchRipple = function useTouchRipple(props) {
       keydownRef.current = true;
       rippleRef.current.stop(event, function () {
         var _rippleRef$current2;
-        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null ? void 0 : _rippleRef$current2.start(event);
+        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null || _rippleRef$current2.start(event);
       });
     }
   });
@@ -41,7 +41,7 @@ var useTouchRipple = function useTouchRipple(props) {
       keydownRef.current = false;
       rippleRef.current.stop(event, function () {
         var _rippleRef$current3;
-        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null ? void 0 : _rippleRef$current3.pulsate(event);
+        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null || _rippleRef$current3.pulsate(event);
       });
     }
   });
@@ -83,7 +83,7 @@ var useTouchRipple = function useTouchRipple(props) {
           name: eventName,
           handler: function handler(ev) {
             var _otherEvents$eventNam;
-            (_otherEvents$eventNam = otherEvents[eventName]) == null ? void 0 : _otherEvents$eventNam.call(otherEvents, ev);
+            (_otherEvents$eventNam = otherEvents[eventName]) == null || _otherEvents$eventNam.call(otherEvents, ev);
             rippleHandlers[eventName](ev);
           }
         };

package/modern/Button/Button.js

@@ -15,6 +15,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
+import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -220,6 +221,7 @@ const ButtonEndIcon = styled('span', {
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
   const resolvedProps = resolveProps(contextProps, inProps);
   const props = useThemeProps({
     props: resolvedProps,
@@ -264,9 +266,10 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
+  const positionClassName = buttonGroupButtonContextPositionClassName || '';
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(contextProps.className, classes.root, className),
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,

package/modern/ButtonGroup/ButtonGroup.js

@@ -13,6 +13,7 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
+import ButtonGroupButtonContext from './ButtonGroupButtonContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
   const {
@@ -28,6 +29,12 @@ const overridesResolver = (props, styles) => {
     [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
   }, {
     [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+  }, {
+    [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
+  }, {
+    [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
+  }, {
+    [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
   }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
 };
 const useUtilityClasses = ownerState => {
@@ -42,7 +49,10 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
-    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled']
+    grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
+    firstButton: ['firstButton'],
+    lastButton: ['lastButton'],
+    middleButton: ['middleButton']
   };
   return composeClasses(slots, getButtonGroupUtilityClass, classes);
 };
@@ -67,63 +77,63 @@ const ButtonGroupRoot = styled('div', {
 }, {
   [`& .${buttonGroupClasses.grouped}`]: _extends({
     minWidth: 40,
-    '&:not(:first-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      marginLeft: -1
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      marginTop: -1
-    }),
-    '&:not(:last-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    }, ownerState.orientation === 'vertical' && {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0
-    }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-      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)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-      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)'}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'transparent'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'transparent'
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-      borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-      [`&.${buttonGroupClasses.disabled}`]: {
-        borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
-      }
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      borderColor: (theme.vars || theme).palette[ownerState.color].dark
-    }, {
-      '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-        borderRightColor: 'currentColor'
-      }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-        borderBottomColor: 'currentColor'
-      })
-    }),
     '&:hover': _extends({}, ownerState.variant === 'contained' && {
       boxShadow: 'none'
     })
   }, ownerState.variant === 'contained' && {
     boxShadow: 'none'
+  }),
+  [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  }, ownerState.orientation === 'vertical' && {
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0
+  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
+    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)'}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
+    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)'}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+    borderRightColor: 'transparent'
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+    borderBottomColor: 'transparent'
+  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
+    borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
+    borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+    [`&.${buttonGroupClasses.disabled}`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+    }
+  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+    borderColor: (theme.vars || theme).palette[ownerState.color].dark
+  }, {
+    '&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+      borderRightColor: 'currentColor'
+    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+      borderBottomColor: 'currentColor'
+    })
+  }),
+  [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  }, ownerState.orientation === 'vertical' && {
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
+    marginLeft: -1
+  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
+    marginTop: -1
   })
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
@@ -170,6 +180,20 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     size,
     variant
   }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
+  const getButtonPositionClassName = (index, childrenParam) => {
+    const isFirstButton = index === 0;
+    const isLastButton = index === React.Children.count(childrenParam) - 1;
+    if (isFirstButton && isLastButton) {
+      return '';
+    }
+    if (isFirstButton) {
+      return classes.firstButton;
+    }
+    if (isLastButton) {
+      return classes.lastButton;
+    }
+    return classes.middleButton;
+  };
   return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
     as: component,
     role: "group",
@@ -179,7 +203,15 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
   }, other, {
     children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
       value: context,
-      children: children
+      children: React.Children.map(children, (child, index) => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          return child;
+        }
+        return /*#__PURE__*/_jsx(ButtonGroupButtonContext.Provider, {
+          value: getButtonPositionClassName(index, children),
+          children: child
+        });
+      })
     })
   }));
 });

package/modern/ButtonGroup/ButtonGroupButtonContext.js

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

package/modern/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
+const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;

package/modern/Modal/Modal.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';