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

package/legacy/Button/Button.js

@@ -1,7 +1,9 @@
 'use client';
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,14 +11,15 @@ import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiButton');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     disableElevation = ownerState.disableElevation,
@@ -33,21 +36,34 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   var composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return _extends({}, classes, composedClasses);
 };
-var commonIconStyles = function commonIconStyles(ownerState) {
-  return _extends({}, ownerState.size === 'small' && {
+var commonIconStyles = [{
+  props: {
+    size: 'small'
+  },
+  style: {
     '& > *:nth-of-type(1)': {
       fontSize: 18
     }
-  }, ownerState.size === 'medium' && {
+  }
+}, {
+  props: {
+    size: 'medium'
+  },
+  style: {
     '& > *:nth-of-type(1)': {
       fontSize: 20
     }
-  }, ownerState.size === 'large' && {
+  }
+}, {
+  props: {
+    size: 'large'
+  },
+  style: {
     '& > *:nth-of-type(1)': {
       fontSize: 22
     }
-  });
-};
+  }
+}];
 var ButtonRoot = styled(ButtonBase, {
   shouldForwardProp: function shouldForwardProp(prop) {
     return rootShouldForwardProp(prop) || prop === 'classes';
@@ -60,122 +76,191 @@ var ButtonRoot = styled(ButtonBase, {
   }
 })(function (_ref) {
   var _theme$palette$getCon, _theme$palette;
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+  var theme = _ref.theme;
   var inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   var inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return _extends({}, theme.typography.button, _defineProperty(_defineProperty({
     minWidth: 64,
     padding: '6px 16px',
+    border: 0,
     borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
-    '&:hover': _extends({
-      textDecoration: 'none',
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    '&:hover': {
+      textDecoration: 'none'
+    }
+  }, "&.".concat(buttonClasses.disabled), {
+    color: (theme.vars || theme).palette.action.disabled
+  }), "variants", [{
+    props: {
+      variant: 'contained'
+    },
+    style: _defineProperty(_defineProperty({
+      color: "var(--variant-containedColor)",
+      backgroundColor: "var(--variant-containedBg)",
+      boxShadow: (theme.vars || theme).shadows[2],
+      '&:hover': {
+        boxShadow: (theme.vars || theme).shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: (theme.vars || theme).shadows[2]
+        }
+      },
+      '&:active': {
+        boxShadow: (theme.vars || theme).shadows[8]
       }
-    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      border: "1px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    }, "&.".concat(buttonClasses.focusVisible), {
+      boxShadow: (theme.vars || theme).shadows[6]
+    }), "&.".concat(buttonClasses.disabled), {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    })
+  }, {
+    props: {
+      variant: 'outlined'
+    },
+    style: _defineProperty({
+      padding: '5px 15px',
+      border: '1px solid currentColor',
+      borderColor: "var(--variant-outlinedBorder, currentColor)",
+      backgroundColor: "var(--variant-outlinedBg)",
+      color: "var(--variant-outlinedColor)"
+    }, "&.".concat(buttonClasses.disabled), {
+      border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
+    })
+  }, {
+    props: {
+      variant: 'text'
+    },
+    style: {
+      padding: '6px 8px',
+      color: "var(--variant-textColor)",
+      backgroundColor: "var(--variant-textBg)"
+    }
+  }].concat(_toConsumableArray(Object.entries(theme.palette).filter(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      palette = _ref3[1];
+    return palette.main && palette.dark && palette.contrastText;
+  }).map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 1),
+      color = _ref5[0];
+    return {
+      props: {
+        color: color
+      },
+      style: {
+        '--variant-textColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedColor': (theme.vars || theme).palette[color].main,
+        '--variant-outlinedBorder': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / 0.5)") : alpha(theme.palette[color].main, 0.5),
+        '--variant-containedColor': (theme.vars || theme).palette[color].contrastText,
+        '--variant-containedBg': (theme.vars || theme).palette[color].main,
+        '@media (hover: hover)': {
+          '&:hover': {
+            '--variant-containedBg': (theme.vars || theme).palette[color].dark,
+            '--variant-textBg': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+            '--variant-outlinedBorder': (theme.vars || theme).palette[color].main,
+            '--variant-outlinedBg': theme.vars ? "rgba(".concat(theme.vars.palette[color].mainChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+          }
+        }
       }
-    }, ownerState.variant === 'contained' && {
-      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-      boxShadow: (theme.vars || theme).shadows[4],
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        boxShadow: (theme.vars || theme).shadows[2],
-        backgroundColor: (theme.vars || theme).palette.grey[300]
+    };
+  })), [{
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      '--variant-containedColor': theme.vars ?
+      // this is safe because grey does not change between default light/dark mode
+      theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, inheritContainedBackgroundColor),
+      '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+      '@media (hover: hover)': {
+        '&:hover': {
+          '--variant-containedBg': theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+          '--variant-textBg': theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+          '--variant-outlinedBg': theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(theme.vars.palette.action.hoverOpacity, ")") : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity)
+        }
       }
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'text'
+    },
+    style: {
+      padding: '4px 5px',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large',
+      variant: 'text'
+    },
+    style: {
+      padding: '8px 11px',
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'outlined'
+    },
+    style: {
+      padding: '3px 9px',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large',
+      variant: 'outlined'
+    },
+    style: {
+      padding: '7px 21px',
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'contained'
+    },
+    style: {
+      padding: '4px 10px',
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large',
+      variant: 'contained'
+    },
+    style: {
+      padding: '8px 22px',
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }, {
+    props: {
+      disableElevation: true
+    },
+    style: _defineProperty(_defineProperty(_defineProperty({
+      boxShadow: 'none',
+      '&:hover': {
+        boxShadow: 'none'
       }
-    }),
-    '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: (theme.vars || theme).shadows[8]
-    })
-  }, "&.".concat(buttonClasses.focusVisible), _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: (theme.vars || theme).shadows[6]
-  })), "&.".concat(buttonClasses.disabled), _extends({
-    color: (theme.vars || theme).palette.action.disabled
-  }, ownerState.variant === 'outlined' && {
-    border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
-  }, ownerState.variant === 'contained' && {
-    color: (theme.vars || theme).palette.action.disabled,
-    boxShadow: (theme.vars || theme).shadows[0],
-    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
-  })), ownerState.variant === 'text' && {
-    padding: '6px 8px'
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }, ownerState.variant === 'outlined' && {
-    padding: '5px 15px',
-    border: '1px solid currentColor'
-  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
-  }, ownerState.variant === 'contained' && {
-    color: theme.vars ?
-    // this is safe because grey does not change between default light/dark mode
-    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].contrastText,
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit',
-    borderColor: 'currentColor'
-  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
-    padding: '4px 5px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
-    padding: '8px 11px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-    padding: '3px 9px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-    padding: '7px 21px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-    padding: '4px 10px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-    padding: '8px 22px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.fullWidth && {
-    width: '100%'
-  });
-}, function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  return ownerState.disableElevation && _defineProperty(_defineProperty(_defineProperty({
-    boxShadow: 'none',
-    '&:hover': {
+    }, "&.".concat(buttonClasses.focusVisible), {
       boxShadow: 'none'
+    }), '&:active', {
+      boxShadow: 'none'
+    }), "&.".concat(buttonClasses.disabled), {
+      boxShadow: 'none'
+    })
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  }, "&.".concat(buttonClasses.focusVisible), {
-    boxShadow: 'none'
-  }), '&:active', {
-    boxShadow: 'none'
-  }), "&.".concat(buttonClasses.disabled), {
-    boxShadow: 'none'
-  });
+  }])));
 });
 var ButtonStartIcon = styled('span', {
   name: 'MuiButton',
@@ -184,15 +269,20 @@ var ButtonStartIcon = styled('span', {
     var ownerState = props.ownerState;
     return [styles.startIcon, styles["iconSize".concat(capitalize(ownerState.size))]];
   }
-})(function (_ref4) {
-  var ownerState = _ref4.ownerState;
-  return _extends({
+})(function () {
+  return {
     display: 'inherit',
     marginRight: 8,
-    marginLeft: -4
-  }, ownerState.size === 'small' && {
-    marginLeft: -2
-  }, commonIconStyles(ownerState));
+    marginLeft: -4,
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        marginLeft: -2
+      }
+    }].concat(commonIconStyles)
+  };
 });
 var ButtonEndIcon = styled('span', {
   name: 'MuiButton',
@@ -201,15 +291,20 @@ var ButtonEndIcon = styled('span', {
     var ownerState = props.ownerState;
     return [styles.endIcon, styles["iconSize".concat(capitalize(ownerState.size))]];
   }
-})(function (_ref5) {
-  var ownerState = _ref5.ownerState;
-  return _extends({
+})(function () {
+  return {
     display: 'inherit',
     marginRight: -4,
-    marginLeft: 8
-  }, ownerState.size === 'small' && {
-    marginRight: -2
-  }, commonIconStyles(ownerState));
+    marginLeft: 8,
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        marginRight: -2
+      }
+    }].concat(commonIconStyles)
+  };
 });
 var Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`

package/legacy/ButtonBase/ButtonBase.js

@@ -9,14 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useForkRef from '../utils/useForkRef';
 import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiButtonBase');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var disabled = ownerState.disabled,
     focusVisible = ownerState.focusVisible,

package/legacy/ButtonBase/Ripple.js

@@ -51,7 +51,7 @@ function Ripple(props) {
     })
   });
 }
-process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
+process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */ = {
   /**
    * Override or extend the styles applied to the component.
    */

package/legacy/ButtonBase/TouchRipple.js

@@ -9,13 +9,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
-import { keyframes } from '@mui/system';
 import useTimeout from '@mui/utils/useTimeout';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { keyframes, styled, createUseThemeProps } from '../zero-styled';
 import Ripple from './Ripple';
 import touchRippleClasses from './touchRippleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiTouchRipple');
 var DURATION = 550;
 export var DELAY_RIPPLE = 80;
 var enterKeyframe = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n"])));
@@ -250,7 +249,7 @@ var TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, re
     })
   }));
 });
-process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
+process.env.NODE_ENV !== "production" ? TouchRipple.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the ripple starts at the center of the component
    * rather than at the point of interaction.