@mui/material 5.14.8 → 5.14.10

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.8
+ * @mui/material v5.14.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2118,7 +2118,8 @@
   }
 
   /**
-   * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+   * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892
+   * See RFC in https://github.com/reactjs/rfcs/pull/220
    */
 
   function useEventCallback(fn) {
@@ -8333,31 +8334,29 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     return /*#__PURE__*/jsxRuntime_1("script", {
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML: {
-        __html: `(function() { try {
-        var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
-        var cssColorScheme = mode;
-        var colorScheme = '';
-        if (mode === 'system') {
-          // handle system mode
-          var mql = window.matchMedia('(prefers-color-scheme: dark)');
-          if (mql.matches) {
-            cssColorScheme = 'dark';
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
-          } else {
-            cssColorScheme = 'light';
-            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
-          }
-        }
-        if (mode === 'light') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
-        }
-        if (mode === 'dark') {
-          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
-        }
-        if (colorScheme) {
-          ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
-        }
-      } catch (e) {} })();`
+        __html: `(function() {
+try {
+  var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
+  var colorScheme = '';
+  if (mode === 'system') {
+    // handle system mode
+    var mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+    } else {
+      colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+    }
+  }
+  if (mode === 'light') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
+  }
+  if (mode === 'dark') {
+    colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
+  }
+  if (colorScheme) {
+    ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);
+  }
+} catch(e){}})();`
       }
     }, "mui-color-scheme-init");
   }
@@ -15827,51 +15826,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         return;
       }
       const doc = ownerDocument(rootRef.current);
-      const contain = nativeEvent => {
-        const {
-          current: rootElement
-        } = rootRef;
-
-        // Cleanup functions are executed lazily in React 17.
-        // Contain can be called between the component being unmounted and its cleanup function being run.
-        if (rootElement === null) {
-          return;
-        }
-        if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {
-          ignoreNextEnforceFocus.current = false;
-          return;
-        }
-        if (!rootElement.contains(doc.activeElement)) {
-          // if the focus event is not coming from inside the children's react tree, reset the refs
-          if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {
-            reactFocusEventTarget.current = null;
-          } else if (reactFocusEventTarget.current !== null) {
-            return;
-          }
-          if (!activated.current) {
-            return;
-          }
-          let tabbable = [];
-          if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
-            tabbable = getTabbable(rootRef.current);
-          }
-          if (tabbable.length > 0) {
-            var _lastKeydown$current, _lastKeydown$current2;
-            const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
-            const focusNext = tabbable[0];
-            const focusPrevious = tabbable[tabbable.length - 1];
-            if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
-              if (isShiftTab) {
-                focusPrevious.focus();
-              } else {
-                focusNext.focus();
-              }
-            }
-          } else {
-            rootElement.focus();
-          }
-        }
-      };
       const loopFocus = nativeEvent => {
         lastKeydown.current = nativeEvent;
         if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -15889,6 +15843,62 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           }
         }
       };
+      const contain = () => {
+        const rootElement = rootRef.current;
+
+        // Cleanup functions are executed lazily in React 17.
+        // Contain can be called between the component being unmounted and its cleanup function being run.
+        if (rootElement === null) {
+          return;
+        }
+        if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
+          ignoreNextEnforceFocus.current = false;
+          return;
+        }
+
+        // The focus is already inside
+        if (rootElement.contains(doc.activeElement)) {
+          return;
+        }
+
+        // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
+        if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+          return;
+        }
+
+        // if the focus event is not coming from inside the children's react tree, reset the refs
+        if (doc.activeElement !== reactFocusEventTarget.current) {
+          reactFocusEventTarget.current = null;
+        } else if (reactFocusEventTarget.current !== null) {
+          return;
+        }
+        if (!activated.current) {
+          return;
+        }
+        let tabbable = [];
+        if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+          tabbable = getTabbable(rootRef.current);
+        }
+
+        // one of the sentinel nodes was focused, so move the focus
+        // to the first/last tabbable element inside the focus trap
+        if (tabbable.length > 0) {
+          var _lastKeydown$current, _lastKeydown$current2;
+          const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');
+          const focusNext = tabbable[0];
+          const focusPrevious = tabbable[tabbable.length - 1];
+          if (typeof focusNext !== 'string' && typeof focusPrevious !== 'string') {
+            if (isShiftTab) {
+              focusPrevious.focus();
+            } else {
+              focusNext.focus();
+            }
+          }
+          // no tabbable elements in the trap focus or the focus was outside of the focus trap
+        } else {
+          rootElement.focus();
+        }
+      };
       doc.addEventListener('focusin', contain);
       doc.addEventListener('keydown', loopFocus, true);
 
@@ -15900,7 +15910,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
       const interval = setInterval(() => {
         if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
-          contain(null);
+          contain();
         }
       }, 50);
       return () => {
@@ -18555,7 +18565,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
     const createHandleKeyDown = otherHandlers => event => {
       var _otherHandlers$onKeyD;
-      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
 
       // The handler doesn't take event.defaultPrevented into account:
       //
@@ -18576,7 +18586,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const createHandleBackdropClick = otherHandlers => event => {
       var _otherHandlers$onClic;
-      (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+      (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
       if (event.target !== event.currentTarget) {
         return;
       }
@@ -18624,8 +18634,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       };
       return {
-        onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-        onExited: createChainedFunction(handleExited, children.props.onExited)
+        onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
+        onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
       };
     };
     return {
@@ -18794,7 +18804,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const doc = ownerDocument(sliderRef.current);
     if (!((_sliderRef$current = sliderRef.current) != null && _sliderRef$current.contains(doc.activeElement)) || Number(doc == null || (_doc$activeElement = doc.activeElement) == null ? void 0 : _doc$activeElement.getAttribute('data-index')) !== activeIndex) {
       var _sliderRef$current2;
-      (_sliderRef$current2 = sliderRef.current) == null ? void 0 : _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
+      (_sliderRef$current2 = sliderRef.current) == null || _sliderRef$current2.querySelector(`[type="range"][data-index="${activeIndex}"]`).focus();
     }
     if (setActive) {
       setActive(activeIndex);
@@ -18943,7 +18953,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(index);
       }
       setOpen(index);
-      otherHandlers == null || (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onFocu = otherHandlers.onFocus) == null || _otherHandlers$onFocu.call(otherHandlers, event);
     };
     const createHandleHiddenInputBlur = otherHandlers => event => {
       var _otherHandlers$onBlur;
@@ -18952,7 +18962,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         setFocusedThumbIndex(-1);
       }
       setOpen(-1);
-      otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null ? void 0 : _otherHandlers$onBlur.call(otherHandlers, event);
+      otherHandlers == null || (_otherHandlers$onBlur = otherHandlers.onBlur) == null || _otherHandlers$onBlur.call(otherHandlers, event);
     };
     useEnhancedEffect$1(() => {
       if (disabled && sliderRef.current.contains(document.activeElement)) {
@@ -18961,7 +18971,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         // on a disabled element:
         // https://codesandbox.io/s/mui-pr-22247-forked-h151h?file=/src/App.js
         // @ts-ignore
-        (_document$activeEleme = document.activeElement) == null ? void 0 : _document$activeEleme.blur();
+        (_document$activeEleme = document.activeElement) == null || _document$activeEleme.blur();
       }
     }, [disabled]);
     if (disabled && active !== -1) {
@@ -18972,7 +18982,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
     const createHandleHiddenInputChange = otherHandlers => event => {
       var _otherHandlers$onChan;
-      (_otherHandlers$onChan = otherHandlers.onChange) == null ? void 0 : _otherHandlers$onChan.call(otherHandlers, event);
+      (_otherHandlers$onChan = otherHandlers.onChange) == null || _otherHandlers$onChan.call(otherHandlers, event);
       const index = Number(event.currentTarget.getAttribute('data-index'));
       const value = values[index];
       const marksIndex = marksValues.indexOf(value);
@@ -19210,7 +19220,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [disabled, stopListening]);
     const createHandleMouseDown = otherHandlers => event => {
       var _otherHandlers$onMous;
-      (_otherHandlers$onMous = otherHandlers.onMouseDown) == null ? void 0 : _otherHandlers$onMous.call(otherHandlers, event);
+      (_otherHandlers$onMous = otherHandlers.onMouseDown) == null || _otherHandlers$onMous.call(otherHandlers, event);
       if (disabled) {
         return;
       }
@@ -19261,13 +19271,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     };
     const createHandleMouseOver = otherHandlers => event => {
       var _otherHandlers$onMous2;
-      (_otherHandlers$onMous2 = otherHandlers.onMouseOver) == null ? void 0 : _otherHandlers$onMous2.call(otherHandlers, event);
+      (_otherHandlers$onMous2 = otherHandlers.onMouseOver) == null || _otherHandlers$onMous2.call(otherHandlers, event);
       const index = Number(event.currentTarget.getAttribute('data-index'));
       setOpen(index);
     };
     const createHandleMouseLeave = otherHandlers => event => {
       var _otherHandlers$onMous3;
-      (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null ? void 0 : _otherHandlers$onMous3.call(otherHandlers, event);
+      (_otherHandlers$onMous3 = otherHandlers.onMouseLeave) == null || _otherHandlers$onMous3.call(otherHandlers, event);
       setOpen(-1);
     };
     const getThumbProps = (otherHandlers = {}) => {
@@ -19343,7 +19353,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
    *
    * - [useSnackbar API](https://mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
    */
-  function useSnackbar(parameters) {
+  function useSnackbar(parameters = {}) {
     const {
       autoHideDuration = null,
       disableWindowBlurListener = false,
@@ -19365,7 +19375,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           // IE11, Edge (prior to using Blink?) use 'Esc'
           if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
             // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
-            onClose == null ? void 0 : onClose(nativeEvent, 'escapeKeyDown');
+            onClose == null || onClose(nativeEvent, 'escapeKeyDown');
           }
         }
       }
@@ -19375,7 +19385,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
     }, [open, onClose]);
     const handleClose = useEventCallback((event, reason) => {
-      onClose == null ? void 0 : onClose(event, reason);
+      onClose == null || onClose(event, reason);
     });
     const setAutoHideTimer = useEventCallback(autoHideDurationParam => {
       if (!onClose || autoHideDurationParam == null) {
@@ -19395,7 +19405,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       };
     }, [open, autoHideDuration, setAutoHideTimer]);
     const handleClickAway = event => {
-      onClose == null ? void 0 : onClose(event, 'clickaway');
+      onClose == null || onClose(event, 'clickaway');
     };
 
     // Pause the timer when the user is interacting with the Snackbar
@@ -19413,22 +19423,22 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
     const createHandleBlur = otherHandlers => event => {
       const onBlurCallback = otherHandlers.onBlur;
-      onBlurCallback == null ? void 0 : onBlurCallback(event);
+      onBlurCallback == null || onBlurCallback(event);
       handleResume();
     };
     const createHandleFocus = otherHandlers => event => {
       const onFocusCallback = otherHandlers.onFocus;
-      onFocusCallback == null ? void 0 : onFocusCallback(event);
+      onFocusCallback == null || onFocusCallback(event);
       handlePause();
     };
     const createMouseEnter = otherHandlers => event => {
       const onMouseEnterCallback = otherHandlers.onMouseEnter;
-      onMouseEnterCallback == null ? void 0 : onMouseEnterCallback(event);
+      onMouseEnterCallback == null || onMouseEnterCallback(event);
       handlePause();
     };
     const createMouseLeave = otherHandlers => event => {
       const onMouseLeaveCallback = otherHandlers.onMouseLeave;
-      onMouseLeaveCallback == null ? void 0 : onMouseLeaveCallback(event);
+      onMouseLeaveCallback == null || onMouseLeaveCallback(event);
       handleResume();
     };
     React__namespace.useEffect(() => {
@@ -19443,14 +19453,13 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       return undefined;
     }, [disableWindowBlurListener, handleResume, open]);
-    const getRootProps = (otherHandlers = {}) => {
-      const propsEventHandlers = extractEventHandlers(parameters);
-      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+    const getRootProps = (externalProps = {}) => {
+      const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
       return _extends({
         // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
         // See https://github.com/mui/material-ui/issues/29080
         role: 'presentation'
-      }, externalEventHandlers, {
+      }, externalProps, externalEventHandlers, {
         onBlur: createHandleBlur(externalEventHandlers),
         onFocus: createHandleFocus(externalEventHandlers),
         onMouseEnter: createMouseEnter(externalEventHandlers),
@@ -21116,6 +21125,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderRadius: 32 / 2,
       whiteSpace: 'nowrap',
       transition: theme.transitions.create(['background-color', 'box-shadow']),
+      // reset cursor explicitly in case ButtonBase is used
+      cursor: 'unset',
       // We disable the focus ring for mouse, touch and keyboard users.
       outline: 0,
       textDecoration: 'none',
@@ -23513,8 +23524,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (hasImgNotFailing) {
       children = /*#__PURE__*/jsxRuntime_1(AvatarImg, _extends({
         alt: alt,
-        src: src,
         srcSet: srcSet,
+        src: src,
         sizes: sizes,
         ownerState: ownerState,
         className: classes.img
@@ -25175,6 +25186,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
   var ButtonGroupContext$1 = ButtonGroupContext;
 
+  /**
+   * @ignore - internal component.
+   */
+  const ButtonGroupButtonContext = /*#__PURE__*/React__namespace.createContext(undefined);
+  {
+    ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
+  }
+  var ButtonGroupButtonContext$1 = ButtonGroupButtonContext;
+
   const _excluded$1D = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
   const useUtilityClasses$1p = ownerState => {
     const {
@@ -25380,6 +25400,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const Button = /*#__PURE__*/React__namespace.forwardRef(function Button(inProps, ref) {
     // props priority: `inProps` > `contextProps` > `themeDefaultProps`
     const contextProps = React__namespace.useContext(ButtonGroupContext$1);
+    const buttonGroupButtonContextPositionClassName = React__namespace.useContext(ButtonGroupButtonContext$1);
     const resolvedProps = resolveProps(contextProps, inProps);
     const props = useThemeProps({
       props: resolvedProps,
@@ -25424,9 +25445,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       ownerState: ownerState,
       children: endIconProp
     });
+    const positionClassName = buttonGroupButtonContextPositionClassName || '';
     return /*#__PURE__*/jsxRuntime_2(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,
@@ -25537,7 +25559,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   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']);
   var buttonGroupClasses$1 = buttonGroupClasses;
 
   const _excluded$1C = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
@@ -25555,6 +25577,12 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       [`& .${buttonGroupClasses$1.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
     }, {
       [`& .${buttonGroupClasses$1.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
+    }, {
+      [`& .${buttonGroupClasses$1.firstButton}`]: styles.firstButton
+    }, {
+      [`& .${buttonGroupClasses$1.lastButton}`]: styles.lastButton
+    }, {
+      [`& .${buttonGroupClasses$1.middleButton}`]: styles.middleButton
     }, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
   };
   const useUtilityClasses$1o = ownerState => {
@@ -25569,7 +25597,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     } = 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);
   };
@@ -25594,63 +25625,63 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, {
     [`& .${buttonGroupClasses$1.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$1.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$1.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$1.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$1.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$1.firstButton},& .${buttonGroupClasses$1.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$1.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$1.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$1.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$1.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$1.lastButton},& .${buttonGroupClasses$1.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__namespace.forwardRef(function ButtonGroup(inProps, ref) {
@@ -25697,6 +25728,20 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       size,
       variant
     }), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
+    const getButtonPositionClassName = (index, childrenParam) => {
+      const isFirstButton = index === 0;
+      const isLastButton = index === React__namespace.Children.count(childrenParam) - 1;
+      if (isFirstButton && isLastButton) {
+        return '';
+      }
+      if (isFirstButton) {
+        return classes.firstButton;
+      }
+      if (isLastButton) {
+        return classes.lastButton;
+      }
+      return classes.middleButton;
+    };
     return /*#__PURE__*/jsxRuntime_1(ButtonGroupRoot, _extends({
       as: component,
       role: "group",
@@ -25706,7 +25751,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }, other, {
       children: /*#__PURE__*/jsxRuntime_1(ButtonGroupContext$1.Provider, {
         value: context,
-        children: children
+        children: React__namespace.Children.map(children, (child, index) => {
+          if (! /*#__PURE__*/React__namespace.isValidElement(child)) {
+            return child;
+          }
+          return /*#__PURE__*/jsxRuntime_1(ButtonGroupButtonContext$1.Provider, {
+            value: getButtonPositionClassName(index, children),
+            children: child
+          });
+        })
       })
     }));
   });
@@ -27382,7 +27435,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   const modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
   var modalClasses$1 = modalClasses;
 
-  const _excluded$1s = ["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$1s = ["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"];
   const useUtilityClasses$1e = ownerState => {
     const {
       open,
@@ -40851,7 +40904,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   /**
    * @ignore - internal component.
    */
-  function SliderValueLabel(props) {
+  function SliderValueLabel$1(props) {
     const {
       children,
       className,
@@ -40877,7 +40930,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       })]
     }));
   }
-  SliderValueLabel.propTypes = {
+  SliderValueLabel$1.propTypes = {
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
     value: PropTypes.node
@@ -40949,16 +41002,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
   }));
-  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
-  } ;
   const SliderRail = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Rail',
@@ -40984,16 +41027,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, ownerState.track === 'inverted' && {
     opacity: 1
   }));
-  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
-  } ;
   const SliderTrack = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Track',
@@ -41031,16 +41064,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
     });
   });
-  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
-  } ;
   const SliderThumb = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Thumb',
@@ -41113,17 +41136,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     }
   }));
-  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
-  } ;
-  const StyledSliderValueLabel = styled$1(SliderValueLabel, {
+  const SliderValueLabel = styled$1(SliderValueLabel$1, {
     name: 'MuiSlider',
     slot: 'ValueLabel',
     overridesResolver: (props, styles) => styles.valueLabel
@@ -41181,16 +41194,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     fontSize: theme.typography.pxToRem(12),
     padding: '0.25rem 0.5rem'
   }));
-  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
-  } ;
   const SliderMark = styled$1('span', {
     name: 'MuiSlider',
     slot: 'Mark',
@@ -41221,16 +41224,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     backgroundColor: (theme.vars || theme).palette.background.paper,
     opacity: 0.8
   }));
-  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
-  } ;
   const SliderMarkLabel = styled$1('span', {
     name: 'MuiSlider',
     slot: 'MarkLabel',
@@ -41259,16 +41252,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }, markLabelActive && {
     color: (theme.vars || theme).palette.text.primary
   }));
-  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
-  } ;
   const useUtilityClasses$u = ownerState => {
     const {
       disabled,
@@ -41382,7 +41365,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const RailSlot = (_ref2 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref2 : SliderRail;
     const TrackSlot = (_ref3 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref3 : SliderTrack;
     const ThumbSlot = (_ref4 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref4 : SliderThumb;
-    const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : StyledSliderValueLabel;
+    const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
     const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
     const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
     const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
@@ -48326,10 +48309,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     width: 2,
     right: 0
   }));
-  const TabsScrollbarSize = styled$1(ScrollbarSize, {
-    name: 'MuiTabs',
-    slot: 'ScrollbarSize'
-  })({
+  const TabsScrollbarSize = styled$1(ScrollbarSize)({
     overflowX: 'auto',
     overflowY: 'hidden',
     // Hide dimensionless scrollbar on macOS
@@ -48935,7 +48915,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
      *
      *  - `scrollable` will invoke scrolling properties and allow for horizontally
      *  scrolling (or swiping) of the tab bar.
-     *  -`fullWidth` will make the tabs grow to use all the available space,
+     *  - `fullWidth` will make the tabs grow to use all the available space,
      *  which should be used for small views, like on mobile.
      *  - `standard` will render the default state.
      * @default 'standard'
@@ -49909,7 +49889,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.SliderRoot = SliderRoot;
   exports.SliderThumb = SliderThumb;
   exports.SliderTrack = SliderTrack;
-  exports.SliderValueLabel = StyledSliderValueLabel;
+  exports.SliderValueLabel = SliderValueLabel;
   exports.Snackbar = Snackbar$1;
   exports.SnackbarContent = SnackbarContent$1;
   exports.SpeedDial = SpeedDial$1;