@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/modern/BottomNavigationAction/BottomNavigationAction.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -100,17 +97,17 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     name: 'MuiBottomNavigationAction'
   });
   const {
-      className,
-      icon,
-      label,
-      onChange,
-      onClick
-      // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
-      ,
-
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    icon,
+    label,
+    onChange,
+    onClick,
+    // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
+    selected,
+    showLabel,
+    value,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
@@ -121,19 +118,19 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, _extends({
+  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     focusRipple: true,
     onClick: handleChange,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
       className: classes.label,
       ownerState: ownerState,
       children: label
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,41 +1,41 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
+import { styled } from '../zero-styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
-}) => _extends({
+}) => ({
   display: 'flex',
   marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
-  marginRight: `calc(${theme.spacing(1)} * 0.5)`
-}, theme.palette.mode === 'light' ? {
-  backgroundColor: theme.palette.grey[100],
-  color: theme.palette.grey[700]
-} : {
-  backgroundColor: theme.palette.grey[700],
-  color: theme.palette.grey[100]
-}, {
-  borderRadius: 2,
-  '&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
-    backgroundColor: theme.palette.grey[200]
+  marginRight: `calc(${theme.spacing(1)} * 0.5)`,
+  ...(theme.palette.mode === 'light' ? {
+    backgroundColor: theme.palette.grey[100],
+    color: theme.palette.grey[700]
   } : {
-    backgroundColor: theme.palette.grey[600]
+    backgroundColor: theme.palette.grey[700],
+    color: theme.palette.grey[100]
   }),
-  '&:active': _extends({
-    boxShadow: theme.shadows[0]
-  }, theme.palette.mode === 'light' ? {
-    backgroundColor: emphasize(theme.palette.grey[200], 0.12)
-  } : {
-    backgroundColor: emphasize(theme.palette.grey[600], 0.12)
-  })
+  borderRadius: 2,
+  '&:hover, &:focus': {
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: theme.palette.grey[200]
+    } : {
+      backgroundColor: theme.palette.grey[600]
+    })
+  },
+  '&:active': {
+    boxShadow: theme.shadows[0],
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: emphasize(theme.palette.grey[200], 0.12)
+    } : {
+      backgroundColor: emphasize(theme.palette.grey[600], 0.12)
+    })
+  }
 }));
 const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
   width: 24,
@@ -47,21 +47,22 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  */
 function BreadcrumbCollapsed(props) {
   const {
-      slots = {},
-      slotProps = {}
-    } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    slots = {},
+    slotProps = {},
+    ...otherProps
+  } = props;
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
-    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
-      focusRipple: true
-    }, otherProps, {
+    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, {
+      focusRipple: true,
+      ...otherProps,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
         as: slots.CollapsedIcon,
-        ownerState: ownerState
-      }, slotProps.collapsedIcon))
-    }))
+        ownerState: ownerState,
+        ...slotProps.collapsedIcon
+      })
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {

package/modern/Breadcrumbs/Breadcrumbs.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -80,20 +77,21 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     name: 'MuiBreadcrumbs'
   });
   const {
-      children,
-      className,
-      component = 'nav',
-      slots = {},
-      slotProps = {},
-      expandText = 'Show path',
-      itemsAfterCollapse = 1,
-      itemsBeforeCollapse = 1,
-      maxItems = 8,
-      separator = '/'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'nav',
+    slots = {},
+    slotProps = {},
+    expandText = 'Show path',
+    itemsAfterCollapse = 1,
+    itemsBeforeCollapse = 1,
+    maxItems = 8,
+    separator = '/',
+    ...other
+  } = props;
   const [expanded, setExpanded] = React.useState(false);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     expanded,
     expandText,
@@ -101,7 +99,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     itemsBeforeCollapse,
     maxItems,
     separator
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const collapsedIconSlotProps = useSlotProps({
     elementType: slots.CollapsedIcon,
@@ -153,20 +151,20 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     className: classes.li,
     children: child
   }, `child-${index}`));
-  return /*#__PURE__*/_jsx(BreadcrumbsRoot, _extends({
+  return /*#__PURE__*/_jsx(BreadcrumbsRoot, {
     ref: ref,
     component: component,
     color: "text.secondary",
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(BreadcrumbsOl, {
       className: classes.ol,
       ref: listRef,
       ownerState: ownerState,
       children: insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator, ownerState)
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Button/Button.js

@@ -1,15 +1,12 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
@@ -34,7 +31,11 @@ const useUtilityClasses = ownerState => {
     endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
 const commonIconStyles = [{
   props: {
@@ -79,7 +80,8 @@ const ButtonRoot = styled(ButtonBase, {
 }) => {
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return _extends({}, theme.typography.button, {
+  return {
+    ...theme.typography.button,
     minWidth: 64,
     padding: '6px 16px',
     border: 0,
@@ -143,7 +145,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
       props: {
         color
       },
@@ -260,7 +262,7 @@ const ButtonRoot = styled(ButtonBase, {
         width: '100%'
       }
     }]
-  });
+  };
 });
 const ButtonStartIcon = styled('span', {
   name: 'MuiButton',
@@ -316,23 +318,24 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     name: 'MuiButton'
   });
   const {
-      children,
-      color = 'primary',
-      component = 'button',
-      className,
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
-      endIcon: endIconProp,
-      focusVisibleClassName,
-      fullWidth = false,
-      size = 'medium',
-      startIcon: startIconProp,
-      type,
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    color = 'primary',
+    component = 'button',
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    endIcon: endIconProp,
+    focusVisibleClassName,
+    fullWidth = false,
+    size = 'medium',
+    startIcon: startIconProp,
+    type,
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -342,7 +345,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     size,
     type,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -355,7 +358,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     children: endIconProp
   });
   const positionClassName = buttonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
+  return /*#__PURE__*/_jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     component: component,
@@ -363,11 +366,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes,
     children: [startIcon, children, endIcon]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ButtonBase/ButtonBase.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -88,36 +85,37 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     name: 'MuiButtonBase'
   });
   const {
-      action,
-      centerRipple = false,
-      children,
-      className,
-      component = 'button',
-      disabled = false,
-      disableRipple = false,
-      disableTouchRipple = false,
-      focusRipple = false,
-      LinkComponent = 'a',
-      onBlur,
-      onClick,
-      onContextMenu,
-      onDragLeave,
-      onFocus,
-      onFocusVisible,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onMouseUp,
-      onTouchEnd,
-      onTouchMove,
-      onTouchStart,
-      tabIndex = 0,
-      TouchRippleProps,
-      touchRippleRef,
-      type
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    action,
+    centerRipple = false,
+    children,
+    className,
+    component = 'button',
+    disabled = false,
+    disableRipple = false,
+    disableTouchRipple = false,
+    focusRipple = false,
+    focusVisibleClassName,
+    LinkComponent = 'a',
+    onBlur,
+    onClick,
+    onContextMenu,
+    onDragLeave,
+    onFocus,
+    onFocusVisible,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    tabIndex = 0,
+    TouchRippleProps,
+    touchRippleRef,
+    type,
+    ...other
+  } = props;
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -203,15 +201,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     const button = buttonRef.current;
     return component && component !== 'button' && !(button.tagName === 'A' && button.href);
   };
-
-  /**
-   * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
-   */
-  const keydownRef = React.useRef(false);
   const handleKeyDown = useEventCallback(event => {
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
+    if (focusRipple && !event.repeat && focusVisible && rippleRef.current && event.key === ' ') {
       rippleRef.current.stop(event, () => {
         rippleRef.current.start(event);
       });
@@ -235,7 +227,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
     // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
     if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
       rippleRef.current.stop(event, () => {
         rippleRef.current.pulsate(event);
       });
@@ -274,7 +265,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     centerRipple,
     component,
     disabled,
@@ -283,9 +275,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     focusRipple,
     tabIndex,
     focusVisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
+  return /*#__PURE__*/_jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -304,16 +296,18 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart: handleTouchStart,
     ref: handleRef,
     tabIndex: disabled ? -1 : tabIndex,
-    type: type
-  }, buttonProps, other, {
+    type: type,
+    ...buttonProps,
+    ...other,
     children: [children, enableTouchRipple ?
     /*#__PURE__*/
     /* TouchRipple is only needed client-side, x2 boost on the server. */
-    _jsx(TouchRipple, _extends({
+    _jsx(TouchRipple, {
       ref: handleRippleRef,
-      center: centerRipple
-    }, TouchRippleProps)) : null]
-  }));
+      center: centerRipple,
+      ...TouchRippleProps
+    }) : null]
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ButtonBase/TouchRipple.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["center", "classes", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
@@ -132,11 +129,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     name: 'MuiTouchRipple'
   });
   const {
-      center: centerProp = false,
-      classes = {},
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    center: centerProp = false,
+    classes = {},
+    className,
+    ...other
+  } = props;
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -298,16 +295,16 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
+  return /*#__PURE__*/_jsx(TouchRippleRoot, {
     className: clsx(touchRippleClasses.root, classes.root, className),
-    ref: container
-  }, other, {
+    ref: container,
+    ...other,
     children: /*#__PURE__*/_jsx(TransitionGroup, {
       component: null,
       exit: true,
       children: ripples
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TouchRipple.propTypes /* remove-proptypes */ = {
   /**

package/modern/ButtonGroup/ButtonGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -142,7 +139,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
@@ -210,7 +207,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
     props: {
       variant: 'contained',
       color
@@ -240,21 +237,22 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     name: 'MuiButtonGroup'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
-      disableRipple = false,
-      fullWidth = false,
-      orientation = 'horizontal',
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    disableRipple = false,
+    fullWidth = false,
+    orientation = 'horizontal',
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -265,7 +263,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     orientation,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const context = React.useMemo(() => ({
     className: classes.grouped,
@@ -294,13 +292,13 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
     }
     return classes.middleButton;
   };
-  return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(ButtonGroupRoot, {
     as: component,
     role: "group",
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
       value: context,
       children: validChildren.map((child, index) => {
@@ -310,7 +308,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
         }, index);
       })
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐