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

package/modern/Fab/Fab.js

@@ -9,10 +9,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFab');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -37,8 +38,7 @@ const FabRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.button, {
   minHeight: 36,
   transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
@@ -66,47 +66,87 @@ const FabRoot = styled(ButtonBase, {
   },
   [`&.${fabClasses.focusVisible}`]: {
     boxShadow: (theme.vars || theme).shadows[6]
-  }
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 40
-}, ownerState.size === 'medium' && {
-  width: 48,
-  height: 48
-}, ownerState.variant === 'extended' && {
-  borderRadius: 48 / 2,
-  padding: '0 16px',
-  width: 'auto',
-  minHeight: 'auto',
-  minWidth: 48,
-  height: 48
-}, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-  width: 'auto',
-  padding: '0 8px',
-  borderRadius: 34 / 2,
-  minWidth: 34,
-  height: 34
-}, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-  width: 'auto',
-  padding: '0 16px',
-  borderRadius: 40 / 2,
-  minWidth: 40,
-  height: 40
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      size: 'medium'
+    },
+    style: {
+      width: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended'
+    },
+    style: {
+      borderRadius: 48 / 2,
+      padding: '0 16px',
+      width: 'auto',
+      minHeight: 'auto',
+      minWidth: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'small'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'medium'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }]
 }), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
-  color: (theme.vars || theme).palette[ownerState.color].contrastText,
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-  '&:hover': {
-    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
+  theme
+}) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[color].main,
+      '&:hover': {
+        backgroundColor: (theme.vars || theme).palette[color].dark,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette[color].main
+        }
+      }
     }
-  }
+  }))]
 }), ({
   theme
 }) => ({

package/modern/FormHelperText/FormHelperText.js

@@ -41,8 +41,7 @@ const FormHelperTextRoot = styled('p', {
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.caption, {
@@ -56,12 +55,23 @@ const FormHelperTextRoot = styled('p', {
   },
   [`&.${formHelperTextClasses.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
 }));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
   const props = useThemeProps({

package/modern/IconButton/IconButton.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,12 +9,12 @@ import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiIconButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,9 +38,8 @@ const IconButtonRoot = styled(ButtonBase, {
     return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -51,49 +50,107 @@ const IconButtonRoot = styled(ButtonBase, {
   color: (theme.vars || theme).palette.action.active,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
-  })
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  }),
+  variants: [{
+    props: {
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
     }
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: ownerState.size === 'small' ? -3 : -12
-}, ownerState.edge === 'end' && {
-  marginRight: ownerState.size === 'small' ? -3 : -12
+  }, {
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: 'start',
+      size: 'small'
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -12
+    }
+  }, {
+    props: {
+      edge: 'end',
+      size: 'small'
+    },
+    style: {
+      marginRight: -3
+    }
+  }]
 }), ({
-  theme,
-  ownerState
+  theme
 }) => {
-  const palette = (theme.vars || theme).palette?.[ownerState.color];
-  return _extends({}, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: palette?.main
-  }, !ownerState.disableRipple && {
-    '&:hover': _extends({}, palette && {
-      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+  return {
+    variants: [{
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit'
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        color,
+        disableRipple: false
+      },
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    })), {
+      props: {
+        size: 'small'
+      },
+      style: {
+        padding: 5,
+        fontSize: theme.typography.pxToRem(18)
+      }
     }, {
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+      props: {
+        size: 'large'
+      },
+      style: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(28)
       }
-    })
-  }), ownerState.size === 'small' && {
-    padding: 5,
-    fontSize: theme.typography.pxToRem(18)
-  }, ownerState.size === 'large' && {
-    padding: 12,
-    fontSize: theme.typography.pxToRem(28)
-  }, {
+    }],
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
       color: (theme.vars || theme).palette.action.disabled
     }
-  });
+  };
 });
 
 /**

package/modern/ImageList/ImageList.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
@@ -32,19 +32,21 @@ const ImageListRoot = styled('ul', {
     } = props;
     return [styles.root, styles[ownerState.variant]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({
-    display: 'grid',
-    overflowY: 'auto',
-    listStyle: 'none',
-    padding: 0,
-    // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch'
-  }, ownerState.variant === 'masonry' && {
-    display: 'block'
-  });
+})({
+  display: 'grid',
+  overflowY: 'auto',
+  listStyle: 'none',
+  padding: 0,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  variants: [{
+    props: {
+      variant: 'masonry'
+    },
+    style: {
+      display: 'block'
+    }
+  }]
 });
 const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
   const props = useThemeProps({

package/modern/ImageListItem/ImageListItem.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "className", "cols", "component", "rows", "style"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
@@ -37,32 +37,47 @@ const ImageListItemRoot = styled('li', {
       [`& .${imageListItemClasses.img}`]: styles.img
     }, styles.root, styles[ownerState.variant]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'block',
-  position: 'relative'
-}, ownerState.variant === 'standard' && {
-  // For titlebar under list item
-  display: 'flex',
-  flexDirection: 'column'
-}, ownerState.variant === 'woven' && {
-  height: '100%',
-  alignSelf: 'center',
-  '&:nth-of-type(even)': {
-    height: '70%'
-  }
-}, {
-  [`& .${imageListItemClasses.img}`]: _extends({
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
     objectFit: 'cover',
     width: '100%',
     height: '100%',
     display: 'block'
-  }, ownerState.variant === 'standard' && {
-    height: 'auto',
-    flexGrow: 1
-  })
-}));
+  },
+  variants: [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      // For titlebar under list item
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      variant: 'woven'
+    },
+    style: {
+      height: '100%',
+      alignSelf: 'center',
+      '&:nth-of-type(even)': {
+        height: '70%'
+      }
+    }
+  }, {
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        height: 'auto',
+        flexGrow: 1
+      }
+    }
+  }]
+});
 const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/ImageListItemBar/ImageListItemBar.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
@@ -38,26 +38,41 @@ const ImageListItemBarRoot = styled('div', {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     position: 'absolute',
     left: 0,
     right: 0,
     background: 'rgba(0, 0, 0, 0.5)',
     display: 'flex',
     alignItems: 'center',
-    fontFamily: theme.typography.fontFamily
-  }, ownerState.position === 'bottom' && {
-    bottom: 0
-  }, ownerState.position === 'top' && {
-    top: 0
-  }, ownerState.position === 'below' && {
-    position: 'relative',
-    background: 'transparent',
-    alignItems: 'normal'
-  });
+    fontFamily: theme.typography.fontFamily,
+    variants: [{
+      props: {
+        position: 'bottom'
+      },
+      style: {
+        bottom: 0
+      }
+    }, {
+      props: {
+        position: 'top'
+      },
+      style: {
+        top: 0
+      }
+    }, {
+      props: {
+        position: 'below'
+      },
+      style: {
+        position: 'relative',
+        background: 'transparent',
+        alignItems: 'normal'
+      }
+    }]
+  };
 });
 const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
@@ -69,22 +84,37 @@ const ImageListItemBarTitleWrap = styled('div', {
     return [styles.titleWrap, styles[`titleWrap${capitalize(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     flexGrow: 1,
     padding: '12px 16px',
     color: (theme.vars || theme).palette.common.white,
-    overflow: 'hidden'
-  }, ownerState.position === 'below' && {
-    padding: '6px 0 12px',
-    color: 'inherit'
-  }, ownerState.actionIcon && ownerState.actionPosition === 'left' && {
-    paddingLeft: 0
-  }, ownerState.actionIcon && ownerState.actionPosition === 'right' && {
-    paddingRight: 0
-  });
+    overflow: 'hidden',
+    variants: [{
+      props: {
+        position: 'below'
+      },
+      style: {
+        padding: '6px 0 12px',
+        color: 'inherit'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'left',
+      style: {
+        paddingLeft: 0
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'right',
+      style: {
+        paddingRight: 0
+      }
+    }]
+  };
 });
 const ImageListItemBarTitle = styled('div', {
   name: 'MuiImageListItemBar',
@@ -125,12 +155,15 @@ const ImageListItemBarActionIcon = styled('div', {
     } = props;
     return [styles.actionIcon, styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({}, ownerState.actionPosition === 'left' && {
-    order: -1
-  });
+})({
+  variants: [{
+    props: {
+      actionPosition: 'left'
+    },
+    style: {
+      order: -1
+    }
+  }]
 });
 const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar(inProps, ref) {
   const props = useThemeProps({