@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/node/FilledInput/FilledInput.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
@@ -19,7 +17,6 @@ var _zeroStyled = require("../zero-styled");
 var _filledInputClasses = _interopRequireWildcard(require("./filledInputClasses"));
 var _InputBase2 = require("../InputBase/InputBase");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["disableUnderline", "components", "componentsProps", "fullWidth", "hiddenLabel", "inputComponent", "multiline", "slotProps", "slots", "type"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFilledInput');
@@ -33,7 +30,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _filledInputClasses.getFilledInputUtilityClass, classes);
-  return (0, _extends2.default)({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward classes to the InputBase
+    ...composedClasses
+  };
 };
 const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
   shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
@@ -124,7 +125,7 @@ const FilledInputRoot = (0, _zeroStyled.styled)(_InputBase2.InputBaseRoot, {
           borderBottomStyle: 'dotted'
         }
       }
-    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main) // check all the used fields in the style below
     .map(([color]) => {
       var _palette$color;
       return {
@@ -193,32 +194,33 @@ const FilledInputInput = (0, _zeroStyled.styled)(_InputBase2.InputBaseInput, {
   overridesResolver: _InputBase2.inputOverridesResolver
 })(({
   theme
-}) => (0, _extends2.default)({
+}) => ({
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
-  paddingLeft: 12
-}, !theme.vars && {
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
-    WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
-    caretColor: theme.palette.mode === 'light' ? null : '#fff',
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  }
-}, theme.vars && {
-  '&:-webkit-autofill': {
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit'
-  },
-  [theme.getColorSchemeSelector('dark')]: {
+  paddingLeft: 12,
+  ...(!theme.vars && {
     '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #266798 inset',
-      WebkitTextFillColor: '#fff',
-      caretColor: '#fff'
+      WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+      caretColor: theme.palette.mode === 'light' ? null : '#fff',
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
     }
-  }
-}, {
+  }),
+  ...(theme.vars && {
+    '&:-webkit-autofill': {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit'
+    },
+    [theme.getColorSchemeSelector('dark')]: {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: '#fff',
+        caretColor: '#fff'
+      }
+    }
+  }),
   variants: [{
     props: {
       size: 'small'
@@ -276,25 +278,27 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     name: 'MuiFilledInput'
   });
   const {
-      disableUnderline = false,
-      components = {},
-      componentsProps: componentsPropsProp,
-      fullWidth = false,
-      // declare here to prevent spreading to DOM
-      inputComponent = 'input',
-      multiline = false,
-      slotProps,
-      slots = {},
-      type = 'text'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    disableUnderline = false,
+    components = {},
+    componentsProps: componentsPropsProp,
+    fullWidth = false,
+    hiddenLabel,
+    // declare here to prevent spreading to DOM
+    inputComponent = 'input',
+    multiline = false,
+    slotProps,
+    slots = {},
+    type = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
     type
-  });
+  };
   const classes = useUtilityClasses(props);
   const filledInputComponentsProps = {
     root: {
@@ -307,7 +311,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
   const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? (0, _deepmerge.default)(filledInputComponentsProps, slotProps != null ? slotProps : componentsPropsProp) : filledInputComponentsProps;
   const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
   const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, {
     slots: {
       root: RootSlot,
       input: InputSlot
@@ -317,10 +321,10 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     inputComponent: inputComponent,
     multiline: multiline,
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/FilledInput/filledInputClasses.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.getFilledInputUtilityClass = getFilledInputUtilityClass;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _InputBase = require("../InputBase");
 function getFilledInputUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiFilledInput', slot);
 }
-const filledInputClasses = (0, _extends2.default)({}, _InputBase.inputBaseClasses, (0, _generateUtilityClasses.default)('MuiFilledInput', ['root', 'underline', 'input']));
+const filledInputClasses = {
+  ..._InputBase.inputBaseClasses,
+  ...(0, _generateUtilityClasses.default)('MuiFilledInput', ['root', 'underline', 'input'])
+};
 var _default = exports.default = filledInputClasses;

package/node/FormControl/FormControl.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -19,7 +17,6 @@ var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _FormControlContext = _interopRequireDefault(require("./FormControlContext"));
 var _formControlClasses = require("./formControlClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFormControl');
@@ -40,7 +37,11 @@ const FormControlRoot = (0, _zeroStyled.styled)('div', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return (0, _extends2.default)({}, styles.root, styles[`margin${(0, _capitalize.default)(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
+    return {
+      ...styles.root,
+      ...styles[`margin${(0, _capitalize.default)(ownerState.margin)}`],
+      ...(ownerState.fullWidth && styles.fullWidth)
+    };
   }
 })({
   display: 'inline-flex',
@@ -109,22 +110,23 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     name: 'MuiFormControl'
   });
   const {
-      children,
-      className,
-      color = 'primary',
-      component = 'div',
-      disabled = false,
-      error = false,
-      focused: visuallyFocused,
-      fullWidth = false,
-      hiddenLabel = false,
-      margin = 'none',
-      required = false,
-      size = 'medium',
-      variant = 'outlined'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    children,
+    className,
+    color = 'primary',
+    component = 'div',
+    disabled = false,
+    error = false,
+    focused: visuallyFocused,
+    fullWidth = false,
+    hiddenLabel = false,
+    margin = 'none',
+    required = false,
+    size = 'medium',
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -135,7 +137,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
     required,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [adornedStart, setAdornedStart] = React.useState(() => {
     // We need to iterate through the children and find the Input in order
@@ -220,14 +222,14 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
   }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlContext.default.Provider, {
     value: childContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlRoot, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlRoot, {
       as: component,
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? FormControl.propTypes /* remove-proptypes */ = {

package/node/FormControlLabel/FormControlLabel.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FormControlLabelRoot = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -22,7 +20,6 @@ var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLab
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFormControlLabel');
@@ -126,18 +123,23 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     name: 'MuiFormControlLabel'
   });
   const {
-      className,
-      componentsProps = {},
-      control,
-      disabled: disabledProp,
-      disableTypography,
-      label: labelProp,
-      labelPlacement = 'end',
-      required: requiredProp,
-      slots = {},
-      slotProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    checked,
+    className,
+    componentsProps = {},
+    control,
+    disabled: disabledProp,
+    disableTypography,
+    inputRef,
+    label: labelProp,
+    labelPlacement = 'end',
+    name,
+    onChange,
+    required: requiredProp,
+    slots = {},
+    slotProps = {},
+    value,
+    ...other
+  } = props;
   const muiFormControl = (0, _FormControl.useFormControl)();
   const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
   const required = requiredProp != null ? requiredProp : control.props.required;
@@ -155,16 +157,20 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     muiFormControl,
     states: ['error']
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     disabled,
     labelPlacement,
     required,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [TypographySlot, typographySlotProps] = (0, _useSlot.default)('typography', {
     elementType: _Typography.default,
@@ -173,18 +179,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   });
   let label = labelProp;
   if (label != null && label.type !== _Typography.default && !disableTypography) {
-    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographySlot, (0, _extends2.default)({
-      component: "span"
-    }, typographySlotProps, {
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographySlot, {
+      component: "span",
+      ...typographySlotProps,
       className: (0, _clsx.default)(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
       children: label
-    }));
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControlLabelRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControlLabelRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
       display: "block",
       children: [label, /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
@@ -194,7 +200,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
         children: ["\u2009", '*']
       })]
     }) : label]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/FormGroup/FormGroup.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,7 +15,6 @@ var _formGroupClasses = require("./formGroupClasses");
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "row"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFormGroup');
@@ -66,26 +63,28 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
     name: 'MuiFormGroup'
   });
   const {
-      className,
-      row = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    className,
+    row = false,
+    ...other
+  } = props;
   const muiFormControl = (0, _useFormControl.default)();
   const fcs = (0, _formControlState.default)({
     props,
     muiFormControl,
     states: ['error']
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     row,
     error: fcs.error
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormGroupRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormGroupRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? FormGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/FormHelperText/FormHelperText.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -19,7 +17,6 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _formHelperTextClasses = _interopRequireWildcard(require("./formHelperTextClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
-const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFormHelperText');
@@ -50,9 +47,9 @@ const FormHelperTextRoot = (0, _zeroStyled.styled)('p', {
   }
 })(({
   theme
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -87,18 +84,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     name: 'MuiFormHelperText'
   });
   const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = (0, _useFormControl.default)();
   const fcs = (0, _formControlState.default)({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -108,20 +113,23 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
+
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperTextRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperTextRoot, {
     as: component,
-    ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/node/FormLabel/FormLabel.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FormLabelRoot = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -18,7 +16,6 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _formLabelClasses = _interopRequireWildcard(require("./formLabelClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiFormLabel');
@@ -44,17 +41,21 @@ const FormLabelRoot = exports.FormLabelRoot = (0, _zeroStyled.styled)('label', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return (0, _extends2.default)({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+    return {
+      ...styles.root,
+      ...(ownerState.color === 'secondary' && styles.colorSecondary),
+      ...(ownerState.filled && styles.filled)
+    };
   }
 })(({
   theme
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.body1, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -92,18 +93,25 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     name: 'MuiFormLabel'
   });
   const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
   const muiFormControl = (0, _useFormControl.default)();
   const fcs = (0, _formControlState.default)({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -111,21 +119,21 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormLabelRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [children, fcs.required && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
       ownerState: ownerState,
       "aria-hidden": true,
       className: classes.asterisk,
       children: ["\u2009", '*']
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐