@mui/material 6.0.0-alpha.3 → 6.0.0-alpha.4

package/node/ListItemButton/ListItemButton.js

@@ -53,9 +53,8 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-start',
@@ -96,18 +95,39 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   },
   [`&.${_listItemButtonClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, ownerState.alignItems === 'flex-start' && {
-  alignItems: 'flex-start'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/ListItemSecondaryAction/ListItemSecondaryAction.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"));
@@ -39,16 +39,20 @@ const ListItemSecondaryActionRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, ownerState.disableGutters && styles.disableGutters];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   position: 'absolute',
   right: 16,
   top: '50%',
-  transform: 'translateY(-50%)'
-}, ownerState.disableGutters && {
-  right: 0
-}));
+  transform: 'translateY(-50%)',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.disableGutters,
+    style: {
+      right: 0
+    }
+  }]
+});
 
 /**
  * Must be used as the last child of ListItem to function properly.

package/node/ListItemText/ListItemText.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"));
@@ -49,19 +49,28 @@ const ListItemTextRoot = (0, _styled.default)('div', {
       [`& .${_listItemTextClasses.default.secondary}`]: styles.secondary
     }, styles.root, ownerState.inset && styles.inset, ownerState.primary && ownerState.secondary && styles.multiline, ownerState.dense && styles.dense];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   flex: '1 1 auto',
   minWidth: 0,
   marginTop: 4,
-  marginBottom: 4
-}, ownerState.primary && ownerState.secondary && {
-  marginTop: 6,
-  marginBottom: 6
-}, ownerState.inset && {
-  paddingLeft: 56
-}));
+  marginBottom: 4,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.primary && ownerState.secondary,
+    style: {
+      marginTop: 6,
+      marginBottom: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.inset,
+    style: {
+      paddingLeft: 56
+    }
+  }]
+});
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,

package/node/ListSubheader/ListSubheader.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"));
@@ -43,30 +43,55 @@ const ListSubheaderRoot = (0, _styled.default)('li', {
     return [styles.root, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   boxSizing: 'border-box',
   lineHeight: '48px',
   listStyle: 'none',
   color: (theme.vars || theme).palette.text.secondary,
   fontFamily: theme.typography.fontFamily,
   fontWeight: theme.typography.fontWeightMedium,
-  fontSize: theme.typography.pxToRem(14)
-}, ownerState.color === 'primary' && {
-  color: (theme.vars || theme).palette.primary.main
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.inset && {
-  paddingLeft: 72
-}, !ownerState.disableSticky && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 1,
-  backgroundColor: (theme.vars || theme).palette.background.paper
+  fontSize: theme.typography.pxToRem(14),
+  variants: [{
+    props: {
+      color: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.inset,
+    style: {
+      paddingLeft: 72
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableSticky,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+      backgroundColor: (theme.vars || theme).palette.background.paper
+    }
+  }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/Radio/Radio.js

@@ -15,17 +15,18 @@ var _refType = _interopRequireDefault(require("@mui/utils/refType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _SwitchBase = _interopRequireDefault(require("../internal/SwitchBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createChainedFunction = _interopRequireDefault(require("../utils/createChainedFunction"));
 var _useRadioGroup = _interopRequireDefault(require("../RadioGroup/useRadioGroup"));
 var _radioClasses = _interopRequireWildcard(require("./radioClasses"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _styled = require("../styles/styled");
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 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)('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
 };
-const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
+const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
   name: 'MuiRadio',
   slot: 'Root',
@@ -48,26 +49,55 @@ const RadioRoot = (0, _styled.default)(_SwitchBase.default, {
     return [styles.root, ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  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})` : (0, _colorManipulator.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.default.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }
-}, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${_radioClasses.default.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})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
+    }
+  }, ...Object.entries(theme.palette).filter(([, 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})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${_radioClasses.default.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) {
@@ -83,7 +113,7 @@ const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.de
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButtonIcon.default, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
   var _defaultIcon$props$fo, _defaultCheckedIcon$p;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiRadio'
   });

package/node/Radio/RadioButtonIcon.js

@@ -11,37 +11,43 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonUnchecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonUnchecked"));
 var _RadioButtonChecked = _interopRequireDefault(require("../internal/svg-icons/RadioButtonChecked"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _styled = require("../styles/styled");
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 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 RadioButtonIconRoot = (0, _styled.default)('span', {
+const RadioButtonIconRoot = (0, _zeroStyled.styled)('span', {
   shouldForwardProp: _styled.rootShouldForwardProp
 })({
   position: 'relative',
   display: 'flex'
 });
-const RadioButtonIconBackground = (0, _styled.default)(_RadioButtonUnchecked.default)({
+const RadioButtonIconBackground = (0, _zeroStyled.styled)(_RadioButtonUnchecked.default)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = (0, _styled.default)(_RadioButtonChecked.default)(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+const RadioButtonIconDot = (0, _zeroStyled.styled)(_RadioButtonChecked.default)(({
+  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
+      })
+    }
+  }]
 }));
 
 /**
@@ -70,7 +76,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/node/Rating/Rating.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"));
@@ -74,9 +74,8 @@ const RatingRoot = (0, _styled.default)('span', {
     }, styles.root, styles[`size${(0, _utils.capitalize)(ownerState.size)}`], ownerState.readOnly && styles.readOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'inline-flex',
   // Required to position the pristine input absolutely
   position: 'relative',
@@ -93,13 +92,30 @@ const RatingRoot = (0, _styled.default)('span', {
   [`&.${_ratingClasses.default.focusVisible} .${_ratingClasses.default.iconActive}`]: {
     outline: '1px solid #999'
   },
-  [`& .${_ratingClasses.default.visuallyHidden}`]: _visuallyHidden.default
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(30)
-}, ownerState.readOnly && {
-  pointerEvents: 'none'
+  [`& .${_ratingClasses.default.visuallyHidden}`]: _visuallyHidden.default,
+  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 = (0, _styled.default)('label', {
   name: 'MuiRating',
@@ -107,17 +123,21 @@ const RatingLabel = (0, _styled.default)('label', {
   overridesResolver: ({
     ownerState
   }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
-})(({
-  ownerState
-}) => (0, _extends2.default)({
-  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 = (0, _styled.default)('span', {
   name: 'MuiRating',
   slot: 'Icon',
@@ -128,9 +148,8 @@ const RatingIcon = (0, _styled.default)('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
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
   transition: theme.transitions.create('transform', {
@@ -138,11 +157,22 @@ const RatingIcon = (0, _styled.default)('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 = (0, _styled.default)('span', {
   name: 'MuiRating',
@@ -154,13 +184,17 @@ const RatingDecimal = (0, _styled.default)('span', {
     } = props;
     return [styles.decimal, iconActive && styles.iconActive];
   }
-})(({
-  iconActive
-}) => (0, _extends2.default)({
-  position: 'relative'
-}, iconActive && {
-  transform: 'scale(1.2)'
-}));
+})({
+  position: 'relative',
+  variants: [{
+    props: ({
+      iconActive
+    }) => iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }]
+});
 function IconContainer(props) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({}, other));

package/node/Table/Table.js

@@ -40,9 +40,8 @@ const TableRoot = (0, _styled.default)('table', {
     return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
@@ -52,9 +51,15 @@ const TableRoot = (0, _styled.default)('table', {
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
-  })
-}, ownerState.stickyHeader && {
-  borderCollapse: 'separate'
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      borderCollapse: 'separate'
+    }
+  }]
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {