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

package/Radio/Radio.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,14 +7,15 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
 import RadioButtonIcon from './RadioButtonIcon';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -27,7 +25,10 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
   };
-  return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+  return {
+    ...classes,
+    ...composeClasses(slots, getRadioUtilityClass, classes)
+  };
 };
 const RadioRoot = styled(SwitchBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -40,26 +41,55 @@ const RadioRoot = styled(SwitchBase, {
     return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${radioClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }
-}, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${radioClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
+  },
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${radioClasses.checked}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {
@@ -79,20 +109,23 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: 'MuiRadio'
   });
   const {
-      checked: checkedProp,
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon = defaultIcon,
-      name: nameProp,
-      onChange: onChangeProp,
-      size = 'medium',
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    checked: checkedProp,
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon = defaultIcon,
+    name: nameProp,
+    onChange: onChangeProp,
+    size = 'medium',
+    className,
+    disableRipple = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    disableRipple,
     color,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
@@ -106,7 +139,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  return /*#__PURE__*/_jsx(RadioRoot, _extends({
+  return /*#__PURE__*/_jsx(RadioRoot, {
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: defaultIcon.props.fontSize ?? size
@@ -120,8 +153,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checked: checked,
     onChange: onChange,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Radio/RadioButtonIcon.js

@@ -1,11 +1,11 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
@@ -18,22 +18,27 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   transform: 'scale(1)'
 });
 const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
-  })
-}, ownerState.checked && {
-  transform: 'scale(1)',
-  transition: theme.transitions.create('transform', {
-    easing: theme.transitions.easing.easeOut,
-    duration: theme.transitions.duration.shortest
-  })
+  }),
+  variants: [{
+    props: {
+      checked: true
+    },
+    style: {
+      transform: 'scale(1)',
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest
+      })
+    }
+  }]
 }));
 
 /**
@@ -45,9 +50,10 @@ function RadioButtonIcon(props) {
     classes = {},
     fontSize
   } = props;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     checked
-  });
+  };
   return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
     className: classes.root,
     ownerState: ownerState,
@@ -62,7 +68,7 @@ function RadioButtonIcon(props) {
     })]
   });
 }
-process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
+process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the component is checked.
    */

package/RadioGroup/RadioGroup.d.ts

@@ -29,11 +29,11 @@ export interface RadioGroupProps extends Omit<FormGroupProps, 'onChange'> {
  *
  * Demos:
  *
- * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
+ * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
  *
  * API:
  *
- * - [RadioGroup API](https://mui.com/material-ui/api/radio-group/)
- * - inherits [FormGroup API](https://mui.com/material-ui/api/form-group/)
+ * - [RadioGroup API](https://next.mui.com/material-ui/api/radio-group/)
+ * - inherits [FormGroup API](https://next.mui.com/material-ui/api/form-group/)
  */
-export default function RadioGroup(props: RadioGroupProps): JSX.Element;
+export default function RadioGroup(props: RadioGroupProps): React.JSX.Element;

package/RadioGroup/RadioGroup.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 = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -27,17 +24,17 @@ const useUtilityClasses = props => {
 };
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      children,
-      className,
-      defaultValue,
-      name: nameProp,
-      onChange,
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    children,
+    className,
+    defaultValue,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...other
+  } = props;
   const rootRef = React.useRef(null);
   const classes = useUtilityClasses(props);
   const [value, setValueState] = useControlled({
@@ -70,13 +67,13 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(FormGroup, _extends({
+    children: /*#__PURE__*/_jsx(FormGroup, {
       role: "radiogroup",
       ref: handleRef,
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes */ = {

package/Rating/Rating.d.ts

@@ -118,10 +118,10 @@ export interface RatingProps
  *
  * Demos:
  *
- * - [Rating](https://mui.com/material-ui/react-rating/)
+ * - [Rating](https://next.mui.com/material-ui/react-rating/)
  *
  * API:
  *
- * - [Rating API](https://mui.com/material-ui/api/rating/)
+ * - [Rating API](https://next.mui.com/material-ui/api/rating/)
  */
-export default function Rating(props: RatingProps): JSX.Element;
+export default function Rating(props: RatingProps): React.JSX.Element;

package/Rating/Rating.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value"],
-  _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -15,10 +11,11 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { capitalize, useForkRef, useIsFocusVisible, useControlled, unstable_useId as useId } from '../utils';
 import Star from '../internal/svg-icons/Star';
 import StarBorder from '../internal/svg-icons/StarBorder';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { slotShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
+import slotShouldForwardProp from '../styles/slotShouldForwardProp';
 import ratingClasses, { getRatingUtilityClass } from './ratingClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiRating');
 function getDecimalPrecision(num) {
   const decimalPart = num.toString().split('.')[1];
   return decimalPart ? decimalPart.length : 0;
@@ -66,9 +63,8 @@ const RatingRoot = styled('span', {
     }, styles.root, styles[`size${capitalize(ownerState.size)}`], ownerState.readOnly && styles.readOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
   // Required to position the pristine input absolutely
   position: 'relative',
@@ -85,13 +81,30 @@ const RatingRoot = styled('span', {
   [`&.${ratingClasses.focusVisible} .${ratingClasses.iconActive}`]: {
     outline: '1px solid #999'
   },
-  [`& .${ratingClasses.visuallyHidden}`]: visuallyHidden
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(30)
-}, ownerState.readOnly && {
-  pointerEvents: 'none'
+  [`& .${ratingClasses.visuallyHidden}`]: visuallyHidden,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(30)
+    }
+  }, {
+    // TODO v6: use the .Mui-readOnly global state class
+    props: ({
+      ownerState
+    }) => ownerState.readOnly,
+    style: {
+      pointerEvents: 'none'
+    }
+  }]
 }));
 const RatingLabel = styled('label', {
   name: 'MuiRating',
@@ -99,17 +112,21 @@ const RatingLabel = styled('label', {
   overridesResolver: ({
     ownerState
   }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
-})(({
-  ownerState
-}) => _extends({
-  cursor: 'inherit'
-}, ownerState.emptyValueFocused && {
-  top: 0,
-  bottom: 0,
-  position: 'absolute',
-  outline: '1px solid #999',
-  width: '100%'
-}));
+})({
+  cursor: 'inherit',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.emptyValueFocused,
+    style: {
+      top: 0,
+      bottom: 0,
+      position: 'absolute',
+      outline: '1px solid #999',
+      width: '100%'
+    }
+  }]
+});
 const RatingIcon = styled('span', {
   name: 'MuiRating',
   slot: 'Icon',
@@ -120,9 +137,8 @@ const RatingIcon = styled('span', {
     return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
   transition: theme.transitions.create('transform', {
@@ -130,11 +146,22 @@ const RatingIcon = styled('span', {
   }),
   // Fix mouseLeave issue.
   // https://github.com/facebook/react/issues/4492
-  pointerEvents: 'none'
-}, ownerState.iconActive && {
-  transform: 'scale(1.2)'
-}, ownerState.iconEmpty && {
-  color: (theme.vars || theme).palette.action.disabled
+  pointerEvents: 'none',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.iconEmpty,
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }]
 }));
 const RatingDecimal = styled('span', {
   name: 'MuiRating',
@@ -146,16 +173,25 @@ const RatingDecimal = styled('span', {
     } = props;
     return [styles.decimal, iconActive && styles.iconActive];
   }
-})(({
-  iconActive
-}) => _extends({
-  position: 'relative'
-}, iconActive && {
-  transform: 'scale(1.2)'
-}));
+})({
+  position: 'relative',
+  variants: [{
+    props: ({
+      iconActive
+    }) => iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }]
+});
 function IconContainer(props) {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx("span", _extends({}, other));
+  const {
+    value,
+    ...other
+  } = props;
+  return /*#__PURE__*/_jsx("span", {
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? IconContainer.propTypes = {
   value: PropTypes.number.isRequired
@@ -193,32 +229,35 @@ function RatingItem(props) {
     as: IconContainerComponent,
     value: itemValue,
     className: clsx(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
-    ownerState: _extends({}, ownerState, {
+    ownerState: {
+      ...ownerState,
       iconEmpty: !isFilled,
       iconFilled: isFilled,
       iconHover: isHovered,
       iconFocus: isFocused,
       iconActive: isActive
-    }),
+    },
     children: emptyIcon && !isFilled ? emptyIcon : icon
   });
   if (readOnly) {
-    return /*#__PURE__*/_jsx("span", _extends({}, labelProps, {
+    return /*#__PURE__*/_jsx("span", {
+      ...labelProps,
       children: container
-    }));
+    });
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(RatingLabel, _extends({
-      ownerState: _extends({}, ownerState, {
+    children: [/*#__PURE__*/_jsxs(RatingLabel, {
+      ownerState: {
+        ...ownerState,
         emptyValueFocused: undefined
-      }),
-      htmlFor: id
-    }, labelProps, {
+      },
+      htmlFor: id,
+      ...labelProps,
       children: [container, /*#__PURE__*/_jsx("span", {
         className: classes.visuallyHidden,
         children: getLabelText(itemValue)
       })]
-    })), /*#__PURE__*/_jsx("input", {
+    }), /*#__PURE__*/_jsx("input", {
       className: classes.visuallyHidden,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -271,27 +310,27 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
-      className,
-      defaultValue = null,
-      disabled = false,
-      emptyIcon = defaultEmptyIcon,
-      emptyLabelText = 'Empty',
-      getLabelText = defaultLabelText,
-      highlightSelectedOnly = false,
-      icon = defaultIcon,
-      IconContainerComponent = IconContainer,
-      max = 5,
-      name: nameProp,
-      onChange,
-      onChangeActive,
-      onMouseLeave,
-      onMouseMove,
-      precision = 1,
-      readOnly = false,
-      size = 'medium',
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    className,
+    defaultValue = null,
+    disabled = false,
+    emptyIcon = defaultEmptyIcon,
+    emptyLabelText = 'Empty',
+    getLabelText = defaultLabelText,
+    highlightSelectedOnly = false,
+    icon = defaultIcon,
+    IconContainerComponent = IconContainer,
+    max = 5,
+    name: nameProp,
+    onChange,
+    onChangeActive,
+    onMouseLeave,
+    onMouseMove,
+    precision = 1,
+    readOnly = false,
+    size = 'medium',
+    value: valueProp,
+    ...other
+  } = props;
   const name = useId(nameProp);
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
@@ -417,7 +456,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     }));
   };
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     defaultValue,
     disabled,
     emptyIcon,
@@ -431,17 +471,17 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     precision,
     readOnly,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(RatingRoot, _extends({
+  return /*#__PURE__*/_jsxs(RatingRoot, {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
     className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
-    "aria-label": readOnly ? getLabelText(value) : null
-  }, other, {
+    "aria-label": readOnly ? getLabelText(value) : null,
+    ...other,
     children: [Array.from(new Array(max)).map((_, index) => {
       const itemValue = index + 1;
       const ratingItemProps = {
@@ -473,7 +513,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
           iconActive: isActive,
           children: items.map(($, indexDecimal) => {
             const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
-            return /*#__PURE__*/_jsx(RatingItem, _extends({}, ratingItemProps, {
+            return /*#__PURE__*/_jsx(RatingItem, {
+              ...ratingItemProps,
               // The icon is already displayed as active
               isActive: false,
               itemValue: itemDecimalValue,
@@ -484,14 +525,15 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
                   position: 'absolute'
                 }
               }
-            }), itemDecimalValue);
+            }, itemDecimalValue);
           })
         }, itemValue);
       }
-      return /*#__PURE__*/_jsx(RatingItem, _extends({}, ratingItemProps, {
+      return /*#__PURE__*/_jsx(RatingItem, {
+        ...ratingItemProps,
         isActive: isActive,
         itemValue: itemValue
-      }), itemValue);
+      }, itemValue);
     }), !readOnly && !disabled && /*#__PURE__*/_jsxs(RatingLabel, {
       className: clsx(classes.label, classes.labelEmptyValue),
       ownerState: ownerState,
@@ -510,7 +552,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         children: emptyLabelText
       })]
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐