@mui/material 5.15.13 → 6.0.0-alpha.0

package/CssBaseline/CssBaseline.js

@@ -5,8 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useThemeProps from '../styles/useThemeProps';
 import GlobalStyles from '../GlobalStyles';
-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";
 export const html = (theme, enableColorScheme) => _extends({
   WebkitFontSmoothing: 'antialiased',
   // Antialiasing.
@@ -30,13 +29,11 @@ export const body = theme => _extends({
   }
 });
 export const styles = (theme, enableColorScheme = false) => {
-  var _theme$components;
   const colorSchemeStyles = {};
   if (enableColorScheme && theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
-      var _scheme$palette;
       colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
-        colorScheme: (_scheme$palette = scheme.palette) == null ? void 0 : _scheme$palette.mode
+        colorScheme: scheme.palette?.mode
       };
     });
   }
@@ -58,7 +55,7 @@ export const styles = (theme, enableColorScheme = false) => {
       }
     })
   }, colorSchemeStyles);
-  const themeOverrides = (_theme$components = theme.components) == null || (_theme$components = _theme$components.MuiCssBaseline) == null ? void 0 : _theme$components.styleOverrides;
+  const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides;
   if (themeOverrides) {
     defaultStyles = [defaultStyles, themeOverrides];
   }

package/DialogTitle/DialogTitle.js

@@ -51,7 +51,7 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp != null ? idProp : titleId
+    id: idProp ?? titleId
   }, other));
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {

package/Divider/Divider.js

@@ -1,17 +1,17 @@
 '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 = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 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 { getDividerUtilityClass } from './dividerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiDivider');
 const useUtilityClasses = ownerState => {
   const {
     absolute,
@@ -39,82 +39,134 @@ const DividerRoot = styled('div', {
     return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   margin: 0,
   // Reset browser default style.
   flexShrink: 0,
   borderWidth: 0,
   borderStyle: 'solid',
   borderColor: (theme.vars || theme).palette.divider,
-  borderBottomWidth: 'thin'
-}, ownerState.absolute && {
-  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  width: '100%'
-}, ownerState.light && {
-  borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
-}, ownerState.variant === 'inset' && {
-  marginLeft: 72
-}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {
-  marginLeft: theme.spacing(2),
-  marginRight: theme.spacing(2)
-}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {
-  marginTop: theme.spacing(1),
-  marginBottom: theme.spacing(1)
-}, ownerState.orientation === 'vertical' && {
-  height: '100%',
-  borderBottomWidth: 0,
-  borderRightWidth: 'thin'
-}, ownerState.flexItem && {
-  alignSelf: 'stretch',
-  height: 'auto'
-}), ({
-  ownerState
-}) => _extends({}, ownerState.children && {
-  display: 'flex',
-  whiteSpace: 'nowrap',
-  textAlign: 'center',
-  border: 0,
-  '&::before, &::after': {
-    content: '""',
-    alignSelf: 'center'
-  }
-}), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
-  '&::before, &::after': {
-    width: '100%',
-    borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
-  }
-}), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {
-  flexDirection: 'column',
-  '&::before, &::after': {
-    height: '100%',
-    borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
-  }
-}), ({
-  ownerState
-}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {
-  '&::before': {
-    width: '90%'
-  },
-  '&::after': {
-    width: '10%'
-  }
-}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {
-  '&::before': {
-    width: '10%'
-  },
-  '&::after': {
-    width: '90%'
-  }
+  borderBottomWidth: 'thin',
+  variants: [{
+    props: {
+      absolute: true
+    },
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: '100%'
+    }
+  }, {
+    props: {
+      light: true
+    },
+    style: {
+      borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)
+    }
+  }, {
+    props: {
+      variant: 'inset'
+    },
+    style: {
+      marginLeft: 72
+    }
+  }, {
+    props: {
+      variant: 'middle',
+      orientation: 'horizontal'
+    },
+    style: {
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2)
+    }
+  }, {
+    props: {
+      variant: 'middle',
+      orientation: 'vertical'
+    },
+    style: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1)
+    }
+  }, {
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      height: '100%',
+      borderBottomWidth: 0,
+      borderRightWidth: 'thin'
+    }
+  }, {
+    props: {
+      flexItem: true
+    },
+    style: {
+      alignSelf: 'stretch',
+      height: 'auto'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.children,
+    style: {
+      display: 'flex',
+      whiteSpace: 'nowrap',
+      textAlign: 'center',
+      border: 0,
+      '&::before, &::after': {
+        content: '""',
+        alignSelf: 'center'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.children && ownerState.orientation !== 'vertical',
+    style: {
+      '&::before, &::after': {
+        width: '100%',
+        borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.orientation === 'vertical' && ownerState.children,
+    style: {
+      flexDirection: 'column',
+      '&::before, &::after': {
+        height: '100%',
+        borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical',
+    style: {
+      '&::before': {
+        width: '90%'
+      },
+      '&::after': {
+        width: '10%'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical',
+    style: {
+      '&::before': {
+        width: '10%'
+      },
+      '&::after': {
+        width: '90%'
+      }
+    }
+  }]
 }));
 const DividerWrapper = styled('span', {
   name: 'MuiDivider',
@@ -126,15 +178,20 @@ const DividerWrapper = styled('span', {
     return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-block',
   paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,
-  paddingRight: `calc(${theme.spacing(1)} * 1.2)`
-}, ownerState.orientation === 'vertical' && {
-  paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
-  paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
+  paddingRight: `calc(${theme.spacing(1)} * 1.2)`,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      paddingTop: `calc(${theme.spacing(1)} * 1.2)`,
+      paddingBottom: `calc(${theme.spacing(1)} * 1.2)`
+    }
+  }]
 }));
 const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
   const props = useThemeProps({
@@ -184,7 +241,9 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
  * The following flag is used to ensure that this component isn't tabbable i.e.
  * does not get highlight/focus inside of MUI List.
  */
-Divider.muiSkipListHighlight = true;
+if (Divider) {
+  Divider.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Fab/Fab.js

@@ -39,65 +39,62 @@ const FabRoot = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => {
-  var _theme$palette$getCon, _theme$palette;
-  return _extends({}, theme.typography.button, {
-    minHeight: 36,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
-      duration: theme.transitions.duration.short
-    }),
-    borderRadius: '50%',
-    padding: 0,
-    minWidth: 0,
-    width: 56,
-    height: 56,
-    zIndex: (theme.vars || theme).zIndex.fab,
-    boxShadow: (theme.vars || theme).shadows[6],
-    '&:active': {
-      boxShadow: (theme.vars || theme).shadows[12]
-    },
-    color: theme.vars ? 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).palette.grey[300],
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette.grey.A100,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette.grey[300]
-      },
-      textDecoration: 'none'
+}) => _extends({}, theme.typography.button, {
+  minHeight: 36,
+  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+    duration: theme.transitions.duration.short
+  }),
+  borderRadius: '50%',
+  padding: 0,
+  minWidth: 0,
+  width: 56,
+  height: 56,
+  zIndex: (theme.vars || theme).zIndex.fab,
+  boxShadow: (theme.vars || theme).shadows[6],
+  '&:active': {
+    boxShadow: (theme.vars || theme).shadows[12]
+  },
+  color: theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
+  backgroundColor: (theme.vars || theme).palette.grey[300],
+  '&:hover': {
+    backgroundColor: (theme.vars || theme).palette.grey.A100,
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: (theme.vars || theme).palette.grey[300]
     },
-    [`&.${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'
-  });
-}, ({
+    textDecoration: 'none'
+  },
+  [`&.${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'
+}), ({
   theme,
   ownerState
 }) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {

package/FilledInput/FilledInput.js

@@ -40,7 +40,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
   theme,
   ownerState
 }) => {
-  var _palette;
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -70,7 +69,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&::after': {
-      borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -182,7 +181,6 @@ const FilledInputInput = styled(InputBaseInput, {
   paddingRight: 0
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$input;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFilledInput'
@@ -214,9 +212,9 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
       ownerState
     }
   };
-  const componentsProps = (slotProps != null ? slotProps : componentsPropsProp) ? deepmerge(filledInputComponentsProps, slotProps != null ? slotProps : componentsPropsProp) : filledInputComponentsProps;
-  const RootSlot = (_ref = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref : FilledInputRoot;
-  const InputSlot = (_ref2 = (_slots$input = slots.input) != null ? _slots$input : components.Input) != null ? _ref2 : FilledInputInput;
+  const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
+  const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
   return /*#__PURE__*/_jsx(InputBase, _extends({
     slots: {
       root: RootSlot,

package/FormControl/FormControl.js

@@ -7,14 +7,14 @@ 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 { isFilled, isAdornedStart } from '../InputBase/utils';
 import capitalize from '../utils/capitalize';
 import isMuiElement from '../utils/isMuiElement';
 import FormControlContext from './FormControlContext';
 import { getFormControlUtilityClasses } from './formControlClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormControl');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -34,9 +34,7 @@ const FormControlRoot = styled('div', {
   }, styles) => {
     return _extends({}, styles.root, styles[`margin${capitalize(ownerState.margin)}`], ownerState.fullWidth && styles.fullWidth);
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -45,16 +43,33 @@ const FormControlRoot = styled('div', {
   padding: 0,
   margin: 0,
   border: 0,
-  verticalAlign: 'top'
-}, ownerState.margin === 'normal' && {
-  marginTop: 16,
-  marginBottom: 8
-}, ownerState.margin === 'dense' && {
-  marginTop: 8,
-  marginBottom: 4
-}, ownerState.fullWidth && {
-  width: '100%'
-}));
+  verticalAlign: 'top',
+  // Fix alignment issue on Safari.
+  variants: [{
+    props: {
+      margin: 'normal'
+    },
+    style: {
+      marginTop: 16,
+      marginBottom: 8
+    }
+  }, {
+    props: {
+      margin: 'dense'
+    },
+    style: {
+      marginTop: 8,
+      marginBottom: 4
+    }
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }]
+});
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.