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

package/node/ButtonGroup/ButtonGroup.js

@@ -6,8 +6,8 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -15,8 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _getValidReactChildren = _interopRequireDefault(require("@mui/utils/getValidReactChildren"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _buttonGroupClasses = _interopRequireWildcard(require("./buttonGroupClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
 var _ButtonGroupButtonContext = _interopRequireDefault(require("./ButtonGroupButtonContext"));
@@ -24,6 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "fullWidth", "orientation", "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)('MuiButtonGroup');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -65,88 +65,185 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _buttonGroupClasses.getButtonGroupUtilityClass, classes);
 };
-const ButtonGroupRoot = (0, _styled.default)('div', {
+const ButtonGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiButtonGroup',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === 'contained' && {
-  boxShadow: (theme.vars || theme).shadows[2]
-}, ownerState.disableElevation && {
-  boxShadow: 'none'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, {
-  [`& .${_buttonGroupClasses.default.grouped}`]: (0, _extends2.default)({
-    minWidth: 40,
-    '&:hover': (0, _extends2.default)({}, ownerState.variant === 'contained' && {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      boxShadow: (theme.vars || theme).shadows[2]
+    }
+  }, {
+    props: {
+      disableElevation: true
+    },
+    style: {
       boxShadow: 'none'
-    })
-  }, ownerState.variant === 'contained' && {
-    boxShadow: 'none'
-  }),
-  [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: (0, _extends2.default)({}, ownerState.orientation === 'horizontal' && {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
-    borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-    [`&.${_buttonGroupClasses.default.disabled}`]: {
-      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
     }
-  }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
-    borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-    [`&.${_buttonGroupClasses.default.disabled}`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderTopLeftRadius: 0
+      },
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
+      }
     }
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.5)
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    borderRightColor: 'transparent'
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    borderBottomColor: 'transparent'
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
-    borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-    [`&.${_buttonGroupClasses.default.disabled}`]: {
-      borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
     }
-  }, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
-    [`&.${_buttonGroupClasses.default.disabled}`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+  }, {
+    props: {
+      variant: 'text',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
     }
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    borderColor: (theme.vars || theme).palette[ownerState.color].dark
   }, {
-    '&:hover': (0, _extends2.default)({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-      borderRightColor: 'currentColor'
-    }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-      borderBottomColor: 'currentColor'
-    })
-  }),
-  [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: (0, _extends2.default)({}, ownerState.orientation === 'horizontal' && {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }, ownerState.orientation === 'vertical' && {
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
-    marginLeft: -1
-  }, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
-    marginTop: -1
-  })
+    props: {
+      variant: 'text',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).flatMap(([color]) => [{
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.5)
+      }
+    }
+  }]), {
+    props: {
+      variant: 'outlined',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderRightColor: 'transparent',
+        '&:hover': {
+          borderRightColor: 'currentColor'
+        }
+      },
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        marginLeft: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'outlined',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderBottomColor: 'transparent',
+        '&:hover': {
+          borderBottomColor: 'currentColor'
+        }
+      },
+      [`& .${_buttonGroupClasses.default.lastButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        marginTop: -1
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
+          borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'contained',
+      orientation: 'vertical'
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
+        [`&.${_buttonGroupClasses.default.disabled}`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
+        }
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.dark).map(([color]) => ({
+    props: {
+      variant: 'contained',
+      color
+    },
+    style: {
+      [`& .${_buttonGroupClasses.default.firstButton},& .${_buttonGroupClasses.default.middleButton}`]: {
+        borderColor: (theme.vars || theme).palette[color].dark
+      }
+    }
+  }))],
+  [`& .${_buttonGroupClasses.default.grouped}`]: {
+    minWidth: 40,
+    boxShadow: 'none',
+    props: {
+      variant: 'contained'
+    },
+    style: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    }
+  }
 }));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiButtonGroup'
   });

package/node/Grid/Grid.js

@@ -42,6 +42,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function getOffset(val) {
   const parse = parseFloat(val);
+  if (Number.isNaN(parse)) {
+    return val;
+  }
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 }
 function generateGrid({

package/node/RadioGroup/RadioGroup.js

@@ -10,21 +10,36 @@ 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 _FormGroup = _interopRequireDefault(require("../FormGroup"));
+var _radioGroupClasses = require("./radioGroupClasses");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["actions", "children", "defaultValue", "name", "onChange", "value"];
+const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "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 useUtilityClasses = props => {
+  const {
+    classes,
+    row,
+    error
+  } = props;
+  const slots = {
+    root: ['root', row && 'row', error && 'error']
+  };
+  return (0, _composeClasses.default)(slots, _radioGroupClasses.getRadioGroupUtilityClass, classes);
+};
 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,
@@ -32,6 +47,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootRef = React.useRef(null);
+  const classes = useUtilityClasses(props);
   const [value, setValueState] = (0, _useControlled.default)({
     controlled: valueProp,
     default: defaultValue,
@@ -64,7 +80,8 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormGroup.default, (0, _extends2.default)({
       role: "radiogroup",
-      ref: handleRef
+      ref: handleRef,
+      className: (0, _clsx.default)(classes.root, className)
     }, other, {
       children: children
     }))
@@ -79,6 +96,10 @@ process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes
    * The content of the component.
    */
   children: _propTypes.default.node,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
   /**
    * The default value. Use when the component is not controlled.
    */

package/node/RadioGroup/index.js

@@ -5,12 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useRadioGroup: true,
+  radioGroupClasses: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _RadioGroup.default;
   }
 });
+Object.defineProperty(exports, "radioGroupClasses", {
+  enumerable: true,
+  get: function () {
+    return _radioGroupClasses.default;
+  }
+});
 Object.defineProperty(exports, "useRadioGroup", {
   enumerable: true,
   get: function () {
@@ -18,4 +28,18 @@ Object.defineProperty(exports, "useRadioGroup", {
   }
 });
 var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
-var _useRadioGroup = _interopRequireDefault(require("./useRadioGroup"));
+var _useRadioGroup = _interopRequireDefault(require("./useRadioGroup"));
+var _radioGroupClasses = _interopRequireWildcard(require("./radioGroupClasses"));
+Object.keys(_radioGroupClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _radioGroupClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radioGroupClasses[key];
+    }
+  });
+});
+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; }

package/node/RadioGroup/radioGroupClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getRadioGroupUtilityClass = getRadioGroupUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getRadioGroupUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiRadioGroup', slot);
+}
+const radioGroupClasses = (0, _generateUtilityClasses.default)('MuiRadioGroup', ['root', 'row', 'error']);
+var _default = exports.default = radioGroupClasses;

package/node/Slider/Slider.js

@@ -299,30 +299,7 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
         boxShadow: 'none'
       }
     },
-    variants: [...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
-      var _theme$vars6;
-      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-    }).map(color => ({
-      props: {
-        color
-      },
-      style: {
-        [`&:hover, &.${_sliderClasses.default.focusVisible}`]: (0, _extends2.default)({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
-        }, {
-          '@media (hover: none)': {
-            boxShadow: 'none'
-          }
-        }),
-        [`&.${_sliderClasses.default.active}`]: (0, _extends2.default)({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
-        } : {
-          boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
-        })
-      }
-    })), {
+    variants: [{
       props: {
         size: 'small'
       },
@@ -349,7 +326,30 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
         left: '50%',
         transform: 'translate(-50%, 50%)'
       }
-    }]
+    }, ...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter(key => {
+      var _theme$vars6;
+      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
+    }).map(color => ({
+      props: {
+        color
+      },
+      style: {
+        [`&:hover, &.${_sliderClasses.default.focusVisible}`]: (0, _extends2.default)({}, theme.vars ? {
+          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
+        }, {
+          '@media (hover: none)': {
+            boxShadow: 'none'
+          }
+        }),
+        [`&.${_sliderClasses.default.active}`]: (0, _extends2.default)({}, theme.vars ? {
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+        } : {
+          boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
+        })
+      }
+    }))]
   };
 });
 const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_SliderValueLabel.default, {

package/node/Table/Table.js

@@ -127,8 +127,6 @@ process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ =
   size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
   /**
    * Set the header sticky.
-   *
-   * ⚠️ It doesn't work with IE11.
    * @default false
    */
   stickyHeader: _propTypes.default.bool,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.0
+ * @mui/material v6.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/experimental_extendTheme.js

@@ -10,6 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _system = require("@mui/system");
+var _spacing = require("@mui/system/spacing");
+var _cssVars = require("@mui/system/cssVars");
 var _styleFunctionSx = _interopRequireWildcard(require("@mui/system/styleFunctionSx"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
@@ -52,6 +54,21 @@ function setColorChannel(obj, key) {
     obj[`${key}Channel`] = (0, _colorManipulator.private_safeColorChannel)(toRgb(obj[key]), `MUI: Can't create \`palette.${key}Channel\` because \`palette.${key}\` is not one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` + '\n' + `To suppress this warning, you need to explicitly provide the \`palette.${key}Channel\` as a string (in rgb format, for example "12 12 12") or undefined if you want to remove the channel token.`);
   }
 }
+function getSpacingVal(spacingInput) {
+  if (typeof spacingInput === 'number') {
+    return `${spacingInput}px`;
+  }
+  if (typeof spacingInput === 'string') {
+    return spacingInput;
+  }
+  if (typeof spacingInput === 'function') {
+    return getSpacingVal(spacingInput(1));
+  }
+  if (Array.isArray(spacingInput)) {
+    return spacingInput;
+  }
+  return '8px';
+}
 const silent = fn => {
   try {
     return fn();
@@ -112,7 +129,8 @@ function extendTheme(options = {}, ...args) {
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
-    })
+    }),
+    spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette;
@@ -312,7 +330,7 @@ function extendTheme(options = {}, ...args) {
     vars,
     generateThemeVars,
     generateStyleSheets
-  } = (0, _system.unstable_prepareCssVars)(theme, parserConfig);
+  } = (0, _cssVars.prepareCssVars)(theme, parserConfig);
   theme.attribute = 'data-mui-color-scheme';
   theme.colorSchemeSelector = ':root';
   theme.vars = vars;
@@ -321,7 +339,11 @@ function extendTheme(options = {}, ...args) {
   });
   theme.generateThemeVars = generateThemeVars;
   theme.generateStyleSheets = generateStyleSheets;
+  theme.generateSpacing = function generateSpacing() {
+    return (0, _system.createSpacing)(input.spacing, (0, _spacing.createUnarySpacing)(this));
+  };
   theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = (0, _extends2.default)({}, _styleFunctionSx.unstable_defaultSxConfig, input == null ? void 0 : input.unstable_sxConfig);
   theme.unstable_sx = function sx(props) {

package/node/zero-styled/index.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createUseThemeProps = createUseThemeProps;
+Object.defineProperty(exports, "keyframes", {
+  enumerable: true,
+  get: function () {
+    return _system.keyframes;
+  }
+});
 Object.defineProperty(exports, "styled", {
   enumerable: true,
   get: function () {
@@ -12,6 +18,7 @@ Object.defineProperty(exports, "styled", {
   }
 });
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _system = require("@mui/system");
 var _styled = _interopRequireDefault(require("../styles/styled"));
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function createUseThemeProps(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -27,18 +27,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.4",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "^6.0.0-alpha.0",
-    "@mui/utils": "^5.15.14",
-    "@mui/types": "^7.2.14",
-    "@mui/base": "5.0.0-beta.41",
-    "@mui/core-downloads-tracker": "^6.0.0-alpha.0"
+    "@mui/base": "5.0.0-beta.42",
+    "@mui/core-downloads-tracker": "^6.0.0-alpha.1",
+    "@mui/system": "^6.0.0-alpha.1",
+    "@mui/utils": "^6.0.0-alpha.1",
+    "@mui/types": "^7.2.14"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/components.d.ts

@@ -392,6 +392,11 @@ export interface Components<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiRadio'];
     variants?: ComponentsVariants<Theme>['MuiRadio'];
   };
+  MuiRadioGroup?: {
+    defaultProps?: ComponentsProps['MuiRadioGroup'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiRadioGroup'];
+    variants?: ComponentsVariants<Theme>['MuiRadioGroup'];
+  };
   MuiRating?: {
     defaultProps?: ComponentsProps['MuiRating'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiRating'];

package/styles/experimental_extendTheme.d.ts

@@ -334,6 +334,7 @@ export interface ThemeVars {
   overlays: Overlays;
   shadows: Shadows;
   shape: Theme['shape'];
+  spacing: string;
   zIndex: ZIndex;
 }
 
@@ -431,6 +432,7 @@ export interface CssVarsTheme extends ColorSystem {
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
   generateThemeVars: () => ThemeVars;
   generateStyleSheets: () => Array<Record<string, any>>;
+  generateSpacing: () => Theme['spacing'];
 
   // Default theme tokens
   spacing: Theme['spacing'];