@mui/material 5.15.13 → 6.0.0-alpha.0

package/legacy/BottomNavigationAction/BottomNavigationAction.js

@@ -1,19 +1,18 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from './bottomNavigationActionClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBottomNavigationAction');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     showLabel = ownerState.showLabel,
@@ -32,9 +31,8 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     return [styles.root, !ownerState.showLabel && !ownerState.selected && styles.iconOnly];
   }
 })(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
-  return _extends({
+  var theme = _ref.theme;
+  return _defineProperty(_defineProperty({
     transition: theme.transitions.create(['color', 'padding-top'], {
       duration: theme.transitions.duration.short
     }),
@@ -44,13 +42,28 @@ var BottomNavigationActionRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.text.secondary,
     flexDirection: 'column',
     flex: '1'
-  }, !ownerState.showLabel && !ownerState.selected && {
-    paddingTop: 14
-  }, !ownerState.showLabel && !ownerState.selected && !ownerState.label && {
-    paddingTop: 0
-  }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
+  }, "&.".concat(bottomNavigationActionClasses.selected), {
     color: (theme.vars || theme).palette.primary.main
-  }));
+  }), "variants", [{
+    props: function props(_ref2) {
+      var showLabel = _ref2.showLabel,
+        selected = _ref2.selected;
+      return !showLabel && !selected;
+    },
+    style: {
+      paddingTop: 14
+    }
+  }, {
+    props: function props(_ref3) {
+      var showLabel = _ref3.showLabel,
+        selected = _ref3.selected,
+        label = _ref3.label;
+      return !showLabel && !selected && !label;
+    },
+    style: {
+      paddingTop: 0
+    }
+  }]);
 });
 var BottomNavigationActionLabel = styled('span', {
   name: 'MuiBottomNavigationAction',
@@ -58,21 +71,27 @@ var BottomNavigationActionLabel = styled('span', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.label;
   }
-})(function (_ref2) {
-  var theme = _ref2.theme,
-    ownerState = _ref2.ownerState;
-  return _extends({
+})(function (_ref5) {
+  var theme = _ref5.theme;
+  return _defineProperty(_defineProperty({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(12),
     opacity: 1,
     transition: 'font-size 0.2s, opacity 0.2s',
     transitionDelay: '0.1s'
-  }, !ownerState.showLabel && !ownerState.selected && {
-    opacity: 0,
-    transitionDelay: '0s'
-  }, _defineProperty({}, "&.".concat(bottomNavigationActionClasses.selected), {
+  }, "&.".concat(bottomNavigationActionClasses.selected), {
     fontSize: theme.typography.pxToRem(14)
-  }));
+  }), "variants", [{
+    props: function props(_ref6) {
+      var showLabel = _ref6.showLabel,
+        selected = _ref6.selected;
+      return !showLabel && !selected;
+    },
+    style: {
+      opacity: 0,
+      transitionDelay: '0s'
+    }
+  }]);
 });
 var BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavigationAction(inProps, ref) {
   var props = useThemeProps({

package/legacy/Breadcrumbs/Breadcrumbs.js

@@ -11,12 +11,12 @@ import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from './breadcrumbsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiBreadcrumbs');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/Button/Button.js

@@ -16,8 +16,7 @@ import capitalize from '../utils/capitalize';
 import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
 import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var color = ownerState.color,
     disableElevation = ownerState.disableElevation,

package/legacy/ButtonBase/ButtonBase.js

@@ -16,8 +16,7 @@ import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var disabled = ownerState.disabled,
     focusVisible = ownerState.focusVisible,

package/legacy/ButtonGroup/ButtonGroup.js

@@ -29,7 +29,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     orientation = ownerState.orientation,
     variant = ownerState.variant;
   var slots = {
-    root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
+    root: ['root', variant, orientation, fullWidth && 'fullWidth', disableElevation && 'disableElevation', "color".concat(capitalize(color))],
     grouped: ['grouped', "grouped".concat(capitalize(orientation)), "grouped".concat(capitalize(variant)), "grouped".concat(capitalize(variant)).concat(capitalize(orientation)), "grouped".concat(capitalize(variant)).concat(capitalize(color)), disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],

package/legacy/ButtonGroup/buttonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiButtonGroup', slot);
 }
-var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
+var buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'horizontal', 'vertical', 'colorPrimary', 'colorSecondary', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
 export default buttonGroupClasses;

package/legacy/Card/Card.js

@@ -7,11 +7,11 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Paper from '../Paper';
 import { getCardUtilityClass } from './cardClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCard');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -25,10 +25,8 @@ var CardRoot = styled(Paper, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(function () {
-  return {
-    overflow: 'hidden'
-  };
+})({
+  overflow: 'hidden'
 });
 var Card = /*#__PURE__*/React.forwardRef(function Card(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardActionArea/CardActionArea.js

@@ -7,12 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardActionArea');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/CardActions/CardActions.js

@@ -1,15 +1,15 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardActionsUtilityClass } from './cardActionsClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardActions');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     disableSpacing = ownerState.disableSpacing;
@@ -25,17 +25,20 @@ var CardActionsRoot = styled('div', {
     var ownerState = props.ownerState;
     return [styles.root, !ownerState.disableSpacing && styles.spacing];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'flex',
-    alignItems: 'center',
-    padding: 8
-  }, !ownerState.disableSpacing && {
-    '& > :not(style) ~ :not(style)': {
-      marginLeft: 8
+})({
+  display: 'flex',
+  alignItems: 'center',
+  padding: 8,
+  variants: [{
+    props: {
+      disableSpacing: false
+    },
+    style: {
+      '& > :not(style) ~ :not(style)': {
+        marginLeft: 8
+      }
     }
-  });
+  }]
 });
 var CardActions = /*#__PURE__*/React.forwardRef(function CardActions(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardContent/CardContent.js

@@ -6,10 +6,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardContentUtilityClass } from './cardContentClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardContent');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -23,13 +23,11 @@ var CardContentRoot = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(function () {
-  return {
-    padding: 16,
-    '&:last-child': {
-      paddingBottom: 24
-    }
-  };
+})({
+  padding: 16,
+  '&:last-child': {
+    paddingBottom: 24
+  }
 });
 var CardContent = /*#__PURE__*/React.forwardRef(function CardContent(inProps, ref) {
   var props = useThemeProps({

package/legacy/CardHeader/CardHeader.js

@@ -8,11 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import cardHeaderClasses, { getCardHeaderUtilityClass } from './cardHeaderClasses';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardHeader');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {

package/legacy/CardMedia/CardMedia.js

@@ -1,16 +1,16 @@
 'use client';
 
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getCardMediaUtilityClass } from './cardMediaClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+var useThemeProps = createUseThemeProps('MuiCardMedia');
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
     isMediaComponent = ownerState.isMediaComponent,
@@ -29,19 +29,27 @@ var CardMediaRoot = styled('div', {
       isImageComponent = ownerState.isImageComponent;
     return [styles.root, isMediaComponent && styles.media, isImageComponent && styles.img];
   }
-})(function (_ref) {
-  var ownerState = _ref.ownerState;
-  return _extends({
-    display: 'block',
-    backgroundSize: 'cover',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center'
-  }, ownerState.isMediaComponent && {
-    width: '100%'
-  }, ownerState.isImageComponent && {
-    // ⚠️ object-fit is not supported by IE11.
-    objectFit: 'cover'
-  });
+})({
+  display: 'block',
+  backgroundSize: 'cover',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  variants: [{
+    props: {
+      isMediaComponent: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      isImageComponent: true
+    },
+    style: {
+      // ⚠️ object-fit is not supported by IE11.
+      objectFit: 'cover'
+    }
+  }]
 });
 var MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
 var IMAGE_COMPONENTS = ['picture', 'img'];