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

package/node/TextField/TextField.js

@@ -6,16 +6,13 @@ 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"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _refType = _interopRequireDefault(require("@mui/utils/refType"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Input = _interopRequireDefault(require("../Input"));
 var _FilledInput = _interopRequireDefault(require("../FilledInput"));
 var _OutlinedInput = _interopRequireDefault(require("../OutlinedInput"));
@@ -24,10 +21,11 @@ var _FormControl = _interopRequireDefault(require("../FormControl"));
 var _FormHelperText = _interopRequireDefault(require("../FormHelperText"));
 var _Select = _interopRequireDefault(require("../Select"));
 var _textFieldClasses = require("./textFieldClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "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)('MuiTextField');
 const variantComponent = {
   standard: _Input.default,
   filled: _FilledInput.default,
@@ -42,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _textFieldClasses.getTextFieldUtilityClass, classes);
 };
-const TextFieldRoot = (0, _styled.default)(_FormControl.default, {
+const TextFieldRoot = (0, _zeroStyled.styled)(_FormControl.default, {
   name: 'MuiTextField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -81,46 +79,49 @@ const TextFieldRoot = (0, _styled.default)(_FormControl.default, {
  * - using the underlying components directly as shown in the demos
  */
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiTextField'
   });
   const {
-      autoComplete,
-      autoFocus = false,
-      children,
-      className,
-      color = 'primary',
-      defaultValue,
-      disabled = false,
-      error = false,
-      FormHelperTextProps,
-      fullWidth = false,
-      helperText,
-      id: idOverride,
-      InputLabelProps,
-      inputProps,
-      InputProps,
-      inputRef,
-      label,
-      maxRows,
-      minRows,
-      multiline = false,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      placeholder,
-      required = false,
-      rows,
-      select = false,
-      SelectProps,
-      type,
-      value,
-      variant = 'outlined'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    autoComplete,
+    autoFocus = false,
+    children,
+    className,
+    color = 'primary',
+    defaultValue,
+    disabled = false,
+    error = false,
+    FormHelperTextProps: FormHelperTextPropsProp,
+    fullWidth = false,
+    helperText,
+    id: idOverride,
+    InputLabelProps: InputLabelPropsProp,
+    inputProps: inputPropsProp,
+    InputProps: InputPropsProp,
+    inputRef,
+    label,
+    maxRows,
+    minRows,
+    multiline = false,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    required = false,
+    rows,
+    select = false,
+    SelectProps: SelectPropsProp,
+    slots = {},
+    slotProps = {},
+    type,
+    value,
+    variant = 'outlined',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     autoFocus,
     color,
     disabled,
@@ -130,32 +131,70 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required,
     select,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
     if (select && !children) {
       console.error('MUI: `children` must be passed when using the `TextField` component with `select`.');
     }
   }
-  const InputMore = {};
+  const id = (0, _useId.default)(idOverride);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const InputComponent = variantComponent[variant];
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      input: InputPropsProp,
+      inputLabel: InputLabelPropsProp,
+      htmlInput: inputPropsProp,
+      formHelperText: FormHelperTextPropsProp,
+      select: SelectPropsProp,
+      ...slotProps
+    }
+  };
+  const inputAdditionalProps = {};
+  const inputLabelSlotProps = externalForwardedProps.slotProps.inputLabel;
   if (variant === 'outlined') {
-    if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
-      InputMore.notched = InputLabelProps.shrink;
+    if (inputLabelSlotProps && typeof inputLabelSlotProps.shrink !== 'undefined') {
+      inputAdditionalProps.notched = inputLabelSlotProps.shrink;
     }
-    InputMore.label = label;
+    inputAdditionalProps.label = label;
   }
   if (select) {
     // unset defaults from textbox inputs
-    if (!SelectProps || !SelectProps.native) {
-      InputMore.id = undefined;
+    if (!SelectPropsProp || !SelectPropsProp.native) {
+      inputAdditionalProps.id = undefined;
     }
-    InputMore['aria-describedby'] = undefined;
+    inputAdditionalProps['aria-describedby'] = undefined;
   }
-  const id = (0, _useId.default)(idOverride);
-  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
-  const inputLabelId = label && id ? `${id}-label` : undefined;
-  const InputComponent = variantComponent[variant];
-  const InputElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, (0, _extends2.default)({
+  const [InputSlot, inputProps] = (0, _useSlot.default)('input', {
+    elementType: InputComponent,
+    externalForwardedProps,
+    additionalProps: inputAdditionalProps,
+    ownerState
+  });
+  const [InputLabelSlot, inputLabelProps] = (0, _useSlot.default)('inputLabel', {
+    elementType: _InputLabel.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [HtmlInputSlot, htmlInputProps] = (0, _useSlot.default)('htmlInput', {
+    elementType: 'input',
+    externalForwardedProps,
+    ownerState
+  });
+  const [FormHelperTextSlot, formHelperTextProps] = (0, _useSlot.default)('formHelperText', {
+    elementType: _FormHelperText.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const [SelectSlot, selectProps] = (0, _useSlot.default)('select', {
+    elementType: _Select.default,
+    externalForwardedProps,
+    ownerState
+  });
+  const InputElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
     "aria-describedby": helperTextId,
     autoComplete: autoComplete,
     autoFocus: autoFocus,
@@ -174,9 +213,13 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     onChange: onChange,
     onFocus: onFocus,
     placeholder: placeholder,
-    inputProps: inputProps
-  }, InputMore, InputProps));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextFieldRoot, (0, _extends2.default)({
+    inputProps: htmlInputProps,
+    slots: {
+      input: slots.htmlInput ? HtmlInputSlot : undefined
+    },
+    ...inputProps
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextFieldRoot, {
     className: (0, _clsx.default)(classes.root, className),
     disabled: disabled,
     error: error,
@@ -185,27 +228,27 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
     required: required,
     color: color,
     variant: variant,
-    ownerState: ownerState
-  }, other, {
-    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+    ownerState: ownerState,
+    ...other,
+    children: [label != null && label !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(InputLabelSlot, {
       htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
+      id: inputLabelId,
+      ...inputLabelProps,
       children: label
-    })), select ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({
+    }), select ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectSlot, {
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
       value: value,
-      input: InputElement
-    }, SelectProps, {
+      input: InputElement,
+      ...selectProps,
       children: children
-    })) : InputElement, helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
-      id: helperTextId
-    }, FormHelperTextProps, {
+    }) : InputElement, helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(FormHelperTextSlot, {
+      id: helperTextId,
+      ...formHelperTextProps,
       children: helperText
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -258,6 +301,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   error: _propTypes.default.bool,
   /**
    * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: _propTypes.default.object,
   /**
@@ -277,10 +321,12 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: _propTypes.default.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: _propTypes.default.object,
   /**
@@ -288,6 +334,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: _propTypes.default.object,
   /**
@@ -356,12 +403,35 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   select: _propTypes.default.bool,
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps: _propTypes.default.object,
   /**
    * The size of the component.
    */
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    formHelperText: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    htmlInput: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    inputLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    select: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    formHelperText: _propTypes.default.elementType,
+    htmlInput: _propTypes.default.elementType,
+    input: _propTypes.default.elementType,
+    inputLabel: _propTypes.default.elementType,
+    select: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/ToggleButton/ToggleButton.js

@@ -7,27 +7,23 @@ 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"));
 var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _styles = require("../styles");
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _toggleButtonClasses = _interopRequireWildcard(require("./toggleButtonClasses"));
 var _ToggleButtonGroupContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupContext"));
 var _ToggleButtonGroupButtonContext = _interopRequireDefault(require("../ToggleButtonGroup/ToggleButtonGroupButtonContext"));
 var _isValueSelected = _interopRequireDefault(require("../ToggleButtonGroup/isValueSelected"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value"],
-  _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "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)('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _toggleButtonClasses.getToggleButtonUtilityClass, classes);
 };
-const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
+const ToggleButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiToggleButton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -52,90 +48,121 @@ const ToggleButtonRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
-  let selectedColorChannel;
-  if (theme.vars) {
-    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
-    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
-  }
-  return (0, _extends2.default)({}, theme.typography.button, {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    color: (theme.vars || theme).palette.action.active
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, {
-    [`&.${_toggleButtonClasses.default.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  theme
+}) => ({
+  ...theme.typography.button,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  padding: 11,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  color: (theme.vars || theme).palette.action.active,
+  [`&.${_toggleButtonClasses.default.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    // Reset on mouse devices
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: [{
+    props: {
+      color: 'standard'
     },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette.text.primary,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+          }
+        }
       }
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
+    props: {
+      color
     },
-    [`&.${_toggleButtonClasses.default.selected}`]: {
-      color: selectedColor,
-      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(selectedColor, theme.palette.action.selectedOpacity)
+    style: {
+      [`&.${_toggleButtonClasses.default.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.selectedOpacity)
+          }
         }
       }
     }
-  }, ownerState.size === 'small' && {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15)
-  });
-});
+  })), {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: 7,
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      padding: 15,
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
+}));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const _React$useContext = React.useContext(_ToggleButtonGroupContext.default),
-    {
-      value: contextValue
-    } = _React$useContext,
-    contextProps = (0, _objectWithoutPropertiesLoose2.default)(_React$useContext, _excluded);
+  const {
+    value: contextValue,
+    ...contextProps
+  } = React.useContext(_ToggleButtonGroupContext.default);
   const toggleButtonGroupButtonContextPositionClassName = React.useContext(_ToggleButtonGroupButtonContext.default);
-  const resolvedProps = (0, _resolveProps.default)((0, _extends2.default)({}, contextProps, {
+  const resolvedProps = (0, _resolveProps.default)({
+    ...contextProps,
     selected: (0, _isValueSelected.default)(inProps.value, contextValue)
-  }), inProps);
-  const props = (0, _useThemeProps.default)({
+  }, inProps);
+  const props = useThemeProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });
   const {
-      children,
-      className,
-      color = 'standard',
-      disabled = false,
-      disableFocusRipple = false,
-      fullWidth = false,
-      onChange,
-      onClick,
-      selected,
-      size = 'medium',
-      value
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const ownerState = (0, _extends2.default)({}, props, {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    disableFocusRipple = false,
+    fullWidth = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     disableFocusRipple,
     fullWidth,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
     if (onClick) {
@@ -149,7 +176,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     }
   };
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleButtonRoot, {
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
     disabled: disabled,
     focusRipple: !disableFocusRipple,
@@ -158,10 +185,10 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     onChange: onChange,
     value: value,
     ownerState: ownerState,
-    "aria-pressed": selected
-  }, other, {
+    "aria-pressed": selected,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐