@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.6

package/node/OutlinedInput/NotchedOutline.js

@@ -6,18 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NotchedOutline;
-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 _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 var _span;
 const _excluded = ["children", "classes", "className", "label", "notched"];
 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 NotchedOutlineRoot = (0, _styled.default)('fieldset', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+const NotchedOutlineRoot = (0, _zeroStyled.styled)('fieldset', {
+  shouldForwardProp: _rootShouldForwardProp.default
 })({
   textAlign: 'left',
   position: 'absolute',
@@ -34,54 +35,70 @@ const NotchedOutlineRoot = (0, _styled.default)('fieldset', {
   overflow: 'hidden',
   minWidth: '0%'
 });
-const NotchedOutlineLegend = (0, _styled.default)('legend', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+const NotchedOutlineLegend = (0, _zeroStyled.styled)('legend', {
+  shouldForwardProp: _rootShouldForwardProp.default
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   float: 'unset',
   // Fix conflict with bootstrap
   width: 'auto',
   // Fix conflict with bootstrap
-  overflow: 'hidden'
-}, !ownerState.withLabel && {
-  padding: 0,
-  lineHeight: '11px',
-  // sync with `height` in `legend` styles
-  transition: theme.transitions.create('width', {
-    duration: 150,
-    easing: theme.transitions.easing.easeOut
-  })
-}, ownerState.withLabel && (0, _extends2.default)({
-  display: 'block',
-  // Fix conflict with normalize.css and sanitize.css
-  padding: 0,
-  height: 11,
-  // sync with `lineHeight` in `legend` styles
-  fontSize: '0.75em',
-  visibility: 'hidden',
-  maxWidth: 0.01,
-  transition: theme.transitions.create('max-width', {
-    duration: 50,
-    easing: theme.transitions.easing.easeOut
-  }),
-  whiteSpace: 'nowrap',
-  '& > span': {
-    paddingLeft: 5,
-    paddingRight: 5,
-    display: 'inline-block',
-    opacity: 0,
-    visibility: 'visible'
-  }
-}, ownerState.notched && {
-  maxWidth: '100%',
-  transition: theme.transitions.create('max-width', {
-    duration: 100,
-    easing: theme.transitions.easing.easeOut,
-    delay: 50
-  })
-})));
+  overflow: 'hidden',
+  // Fix Horizontal scroll when label too long
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.withLabel,
+    style: {
+      padding: 0,
+      lineHeight: '11px',
+      // sync with `height` in `legend` styles
+      transition: theme.transitions.create('width', {
+        duration: 150,
+        easing: theme.transitions.easing.easeOut
+      })
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel,
+    style: {
+      display: 'block',
+      // Fix conflict with normalize.css and sanitize.css
+      padding: 0,
+      height: 11,
+      // sync with `lineHeight` in `legend` styles
+      fontSize: '0.75em',
+      visibility: 'hidden',
+      maxWidth: 0.01,
+      transition: theme.transitions.create('max-width', {
+        duration: 50,
+        easing: theme.transitions.easing.easeOut
+      }),
+      whiteSpace: 'nowrap',
+      '& > span': {
+        paddingLeft: 5,
+        paddingRight: 5,
+        display: 'inline-block',
+        opacity: 0,
+        visibility: 'visible'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.withLabel && ownerState.notched,
+    style: {
+      maxWidth: '100%',
+      transition: theme.transitions.create('max-width', {
+        duration: 100,
+        easing: theme.transitions.easing.easeOut,
+        delay: 50
+      })
+    }
+  }]
+}));
 
 /**
  * @ignore - internal component.
@@ -115,7 +132,7 @@ function NotchedOutline(props) {
     })
   }));
 }
-process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
+process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes /* remove-proptypes */ = {
   /**
    * The content of the component.
    */

package/node/OutlinedInput/OutlinedInput.js

@@ -15,14 +15,15 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _NotchedOutline = _interopRequireDefault(require("./NotchedOutline"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
 var _outlinedInputClasses = _interopRequireWildcard(require("./outlinedInputClasses"));
 var _InputBase = _interopRequireWildcard(require("../InputBase/InputBase"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["components", "fullWidth", "inputComponent", "label", "multiline", "notched", "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)('MuiOutlinedInput');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -35,49 +36,83 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _outlinedInputClasses.getOutlinedInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const OutlinedInputRoot = (0, _styled.default)(_InputBase.InputBaseRoot, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const OutlinedInputRoot = (0, _zeroStyled.styled)(_InputBase.InputBaseRoot, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiOutlinedInput',
   slot: 'Root',
   overridesResolver: _InputBase.rootOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
-  return (0, _extends2.default)({
+  return {
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary
     },
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
-        borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
-      }
-    },
     [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2
     },
-    [`&.${_outlinedInputClasses.default.error} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.error.main
-    },
-    [`&.${_outlinedInputClasses.default.disabled} .${_outlinedInputClasses.default.notchedOutline}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabled
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 14
-  }, ownerState.endAdornment && {
-    paddingRight: 14
-  }, ownerState.multiline && (0, _extends2.default)({
-    padding: '16.5px 14px'
-  }, ownerState.size === 'small' && {
-    padding: '8.5px 14px'
-  }));
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        [`&.${_outlinedInputClasses.default.focused} .${_outlinedInputClasses.default.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette[color].main
+        }
+      }
+    })), {
+      props: {},
+      // to overide the above style
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          [`&:hover .${_outlinedInputClasses.default.notchedOutline}`]: {
+            borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
+          }
+        },
+        [`&.${_outlinedInputClasses.default.error} .${_outlinedInputClasses.default.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.error.main
+        },
+        [`&.${_outlinedInputClasses.default.disabled} .${_outlinedInputClasses.default.notchedOutline}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '16.5px 14px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        padding: '8.5px 14px'
+      }
+    }]
+  };
 });
-const NotchedOutlineRoot = (0, _styled.default)(_NotchedOutline.default, {
+const NotchedOutlineRoot = (0, _zeroStyled.styled)(_NotchedOutline.default, {
   name: 'MuiOutlinedInput',
   slot: 'NotchedOutline',
   overridesResolver: (props, styles) => styles.notchedOutline
@@ -89,13 +124,12 @@ const NotchedOutlineRoot = (0, _styled.default)(_NotchedOutline.default, {
     borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
   };
 });
-const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
+const OutlinedInputInput = (0, _zeroStyled.styled)(_InputBase.InputBaseInput, {
   name: 'MuiOutlinedInput',
   slot: 'Input',
   overridesResolver: _InputBase.inputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({
   padding: '16.5px 14px'
 }, !theme.vars && {
@@ -116,18 +150,40 @@ const OutlinedInputInput = (0, _styled.default)(_InputBase.InputBaseComponent, {
       caretColor: '#fff'
     }
   }
-}, ownerState.size === 'small' && {
-  padding: '8.5px 14px'
-}, ownerState.multiline && {
-  padding: 0
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
+}, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '8.5px 14px'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }]
 }));
 const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$input, _React$Fragment;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiOutlinedInput'
   });
@@ -353,5 +409,7 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
    */
   value: _propTypes.default.any
 } : void 0;
-OutlinedInput.muiName = 'Input';
+if (OutlinedInput) {
+  OutlinedInput.muiName = 'Input';
+}
 var _default = exports.default = OutlinedInput;

package/node/Pagination/Pagination.js

@@ -13,15 +13,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _paginationClasses = require("./paginationClasses");
 var _usePagination = _interopRequireDefault(require("../usePagination"));
 var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["boundaryCount", "className", "color", "count", "defaultPage", "disabled", "getItemAriaLabel", "hideNextButton", "hidePrevButton", "onChange", "page", "renderItem", "shape", "showFirstButton", "showLastButton", "siblingCount", "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)('MuiPagination');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paginationClasses.getPaginationUtilityClass, classes);
 };
-const PaginationRoot = (0, _styled.default)('nav', {
+const PaginationRoot = (0, _zeroStyled.styled)('nav', {
   name: 'MuiPagination',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -43,7 +43,7 @@ const PaginationRoot = (0, _styled.default)('nav', {
     return [styles.root, styles[ownerState.variant]];
   }
 })({});
-const PaginationUl = (0, _styled.default)('ul', {
+const PaginationUl = (0, _zeroStyled.styled)('ul', {
   name: 'MuiPagination',
   slot: 'Ul',
   overridesResolver: (props, styles) => styles.ul
@@ -62,7 +62,7 @@ function defaultGetAriaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiPagination'
   });

package/node/PaginationItem/PaginationItem.js

@@ -408,7 +408,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   components: _propTypes.default.shape({
     first: _propTypes.default.elementType,

package/node/Paper/Paper.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,15 +15,15 @@ var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropTyp
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _getOverlayAlpha = _interopRequireDefault(require("../styles/getOverlayAlpha"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _paperClasses = require("./paperClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "component", "elevation", "square", "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)('MuiPaper');
 const useUtilityClasses = ownerState => {
   const {
     square,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _paperClasses.getPaperUtilityClass, classes);
 };
-const PaperRoot = (0, _styled.default)('div', {
+const PaperRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiPaper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,31 +46,42 @@ const PaperRoot = (0, _styled.default)('div', {
     return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  var _theme$vars$overlays;
-  return (0, _extends2.default)({
-    backgroundColor: (theme.vars || theme).palette.background.paper,
-    color: (theme.vars || theme).palette.text.primary,
-    transition: theme.transitions.create('box-shadow')
-  }, !ownerState.square && {
-    borderRadius: theme.shape.borderRadius
-  }, ownerState.variant === 'outlined' && {
-    border: `1px solid ${(theme.vars || theme).palette.divider}`
-  }, ownerState.variant === 'elevation' && (0, _extends2.default)({
-    boxShadow: (theme.vars || theme).shadows[ownerState.elevation]
-  }, !theme.vars && theme.palette.mode === 'dark' && {
-    backgroundImage: `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(ownerState.elevation))})`
-  }, theme.vars && {
-    backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]
-  }));
-});
+  theme
+}) => ({
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.primary,
+  transition: theme.transitions.create('box-shadow'),
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.square,
+    style: {
+      borderRadius: theme.shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: {
+      variant: 'elevation'
+    },
+    style: {
+      boxShadow: 'var(--Paper-shadow)',
+      backgroundImage: 'var(--Paper-overlay)'
+    }
+  }]
+}));
 const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  var _theme$overlays;
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiPaper'
   });
+  const theme = (0, _useTheme.default)();
   const {
       className,
       component = 'div',
@@ -87,8 +98,6 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
   });
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const theme = (0, _useTheme.default)();
     if (theme.shadows[elevation] === undefined) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join('\n'));
     }
@@ -98,7 +107,15 @@ const Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
-  }, other));
+  }, other, {
+    style: (0, _extends2.default)({}, variant === 'elevation' && (0, _extends2.default)({
+      '--Paper-shadow': (theme.vars || theme).shadows[elevation]
+    }, theme.vars && {
+      '--Paper-overlay': (_theme$overlays = theme.overlays) == null ? void 0 : _theme$overlays[elevation]
+    }, !theme.vars && theme.palette.mode === 'dark' && {
+      '--Paper-overlay': `linear-gradient(${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))}, ${(0, _colorManipulator.alpha)('#fff', (0, _getOverlayAlpha.default)(elevation))})`
+    }), other.style)
+  }));
 });
 process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -142,6 +159,10 @@ process.env.NODE_ENV !== "production" ? Paper.propTypes /* remove-proptypes */ =
    * @default false
    */
   square: _propTypes.default.bool,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Radio/Radio.js

@@ -20,10 +20,10 @@ 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 = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
+const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className", "disableRipple"];
 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');
@@ -39,7 +39,7 @@ const useUtilityClasses = ownerState => {
   return (0, _extends2.default)({}, classes, (0, _composeClasses.default)(slots, _radioClasses.getRadioUtilityClass, classes));
 };
 const RadioRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiRadio',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -125,10 +125,12 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name: nameProp,
       onChange: onChangeProp,
       size = 'medium',
-      className
+      className,
+      disableRipple = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    disableRipple,
     color,
     size
   });

package/node/Radio/RadioButtonIcon.js

@@ -11,13 +11,13 @@ 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 = require("../styles/styled");
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 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, _zeroStyled.styled)('span', {
-  shouldForwardProp: _styled.rootShouldForwardProp
+  shouldForwardProp: _rootShouldForwardProp.default
 })({
   position: 'relative',
   display: 'flex'