@mui/material 5.15.11 → 5.15.13

package/Alert/Alert.d.ts

@@ -33,7 +33,7 @@ export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
   }
 >;
 
-export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
+export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertSlotsAndSlotProps {
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
@@ -133,4 +133,4 @@ export interface AlertOwnerState extends AlertProps {}
  * - [Alert API](https://mui.com/material-ui/api/alert/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function Alert(props: AlertProps & AlertSlotsAndSlotProps): JSX.Element;
+export default function Alert(props: AlertProps): JSX.Element;

package/Alert/Alert.js

@@ -6,10 +6,9 @@ const _excluded = ["action", "children", "className", "closeText", "color", "com
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { darken, lighten } from '@mui/system';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import composeClasses from '@mui/utils/composeClasses';
+import { darken, lighten } from '@mui/system/colorManipulator';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useSlot from '../utils/useSlot';
 import capitalize from '../utils/capitalize';
 import Paper from '../Paper';
@@ -22,6 +21,7 @@ import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
 import CloseIcon from '../internal/svg-icons/Close';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${variant}${capitalize(color || severity)}`, `${variant}`],
+    root: ['root', `color${capitalize(color || severity)}`, `${variant}${capitalize(color || severity)}`, `${variant}`],
     icon: ['icon'],
     message: ['message'],
     action: ['action']
@@ -47,41 +47,58 @@ const AlertRoot = styled(Paper, {
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const getColor = theme.palette.mode === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  const color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
     backgroundColor: 'transparent',
     display: 'flex',
-    padding: '6px 16px'
-  }, color && ownerState.variant === 'standard' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'outlined' && {
-    color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
-    border: `1px solid ${(theme.vars || theme).palette[color].light}`,
-    [`& .${alertClasses.icon}`]: theme.vars ? {
-      color: theme.vars.palette.Alert[`${color}IconColor`]
-    } : {
-      color: theme.palette[color].main
-    }
-  }, color && ownerState.variant === 'filled' && _extends({
-    fontWeight: theme.typography.fontWeightMedium
-  }, theme.vars ? {
-    color: theme.vars.palette.Alert[`${color}FilledColor`],
-    backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
-  } : {
-    backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
-    color: theme.palette.getContrastText(theme.palette[color].main)
-  }));
+    padding: '6px 16px',
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'standard'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color}StandardBg`] : getBackgroundColor(theme.palette[color].light, 0.9),
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'outlined'
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color}Color`] : getColor(theme.palette[color].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color].light}`,
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color}IconColor`]
+        } : {
+          color: theme.palette[color].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
+      props: {
+        colorSeverity: color,
+        variant: 'filled'
+      },
+      style: _extends({
+        fontWeight: theme.typography.fontWeightMedium
+      }, theme.vars ? {
+        color: theme.vars.palette.Alert[`${color}FilledColor`],
+        backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`]
+      } : {
+        backgroundColor: theme.palette.mode === 'dark' ? theme.palette[color].dark : theme.palette[color].main,
+        color: theme.palette.getContrastText(theme.palette[color].main)
+      })
+    }))]
+  });
 });
 const AlertIcon = styled('div', {
   name: 'MuiAlert',
@@ -154,7 +171,8 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const ownerState = _extends({}, props, {
     color,
     severity,
-    variant
+    variant,
+    colorSeverity: color || severity
   });
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {

package/Alert/alertClasses.d.ts

@@ -7,29 +7,85 @@ export interface AlertClasses {
     outlined: string;
     /** Styles applied to the root element if `variant="standard"`. */
     standard: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="success"`. */
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `variant="standard"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardSuccess: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardInfo: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="warning"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardWarning: string;
-    /** Styles applied to the root element if `variant="standard"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="standard"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     standardError: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="success"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedSuccess: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedInfo: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedWarning: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     outlinedError: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="success"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="success"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledSuccess: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="info"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="info"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledInfo: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="warning"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="warning"`
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledWarning: string;
-    /** Styles applied to the root element if `variant="filled"` and `color="error"`. */
+    /** Styles applied to the root element if `variant="filled"` and `color="error"`.
+     * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
+     * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
+     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     */
     filledError: string;
     /** Styles applied to the icon wrapper element. */
     icon: string;

package/Alert/alertClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getAlertUtilityClass(slot) {
   return generateUtilityClass('MuiAlert', slot);
 }
-const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
+const alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'colorSuccess', 'colorInfo', 'colorWarning', 'colorError', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);
 export default alertClasses;

package/AlertTitle/AlertTitle.js

@@ -7,11 +7,11 @@ 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 Typography from '../Typography';
 import { getAlertTitleUtilityClass } from './alertTitleClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAlertTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/Autocomplete/Autocomplete.js

@@ -554,6 +554,63 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
   const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
   const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+    as: PopperComponent,
+    disablePortal: disablePortal,
+    style: {
+      width: anchorEl ? anchorEl.clientWidth : null
+    },
+    ownerState: ownerState,
+    role: "presentation",
+    anchorEl: anchorEl,
+    open: popupOpen
+  }, popperSlotProps, {
+    className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+    children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
+      ownerState: ownerState,
+      as: PaperComponent
+    }, paperSlotProps, {
+      className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+      children: children
+    }))
+  }));
+  let autocompletePopper = null;
+  if (!loading && groupedOptions.length > 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+      as: ListboxComponent,
+      className: classes.listbox,
+      ownerState: ownerState
+    }, otherListboxProps, ListboxProps, {
+      ref: combinedListboxRef,
+      children: groupedOptions.map((option, index) => {
+        if (groupBy) {
+          return renderGroup({
+            key: option.key,
+            group: option.group,
+            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+          });
+        }
+        return renderListOption(option, index);
+      })
+    })));
+  } else if (loading && groupedOptions.length === 0) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
+      className: classes.loading,
+      ownerState: ownerState,
+      children: loadingText
+    }));
+  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+      className: classes.noOptions,
+      ownerState: ownerState,
+      role: "presentation",
+      onMouseDown: event => {
+        // Prevent input blur when interacting with the "no options" content
+        event.preventDefault();
+      },
+      children: noOptionsText
+    }));
+  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -603,55 +660,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-      as: PopperComponent,
-      disablePortal: disablePortal,
-      style: {
-        width: anchorEl ? anchorEl.clientWidth : null
-      },
-      ownerState: ownerState,
-      role: "presentation",
-      anchorEl: anchorEl,
-      open: popupOpen
-    }, popperSlotProps, {
-      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
-        ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
-        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
-          className: classes.loading,
-          ownerState: ownerState,
-          children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-          className: classes.noOptions,
-          ownerState: ownerState,
-          role: "presentation",
-          onMouseDown: event => {
-            // Prevent input blur when interacting with the "no options" content
-            event.preventDefault();
-          },
-          children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-          as: ListboxComponent,
-          className: classes.listbox,
-          ownerState: ownerState
-        }, otherListboxProps, ListboxProps, {
-          ref: combinedListboxRef,
-          children: groupedOptions.map((option, index) => {
-            if (groupBy) {
-              return renderGroup({
-                key: option.key,
-                group: option.group,
-                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-              });
-            }
-            return renderListOption(option, index);
-          })
-        })) : null]
-      }))
-    })) : null]
+    })), anchorEl ? autocompletePopper : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/Avatar/Avatar.js

@@ -7,12 +7,12 @@ 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 Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import useSlot from '../utils/useSlot';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/Button/Button.js

@@ -28,10 +28,10 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, color === 'inherit' && 'colorInherit', disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
+    root: ['root', variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth'],
     label: ['label'],
-    startIcon: ['startIcon', `iconSize${capitalize(size)}`],
-    endIcon: ['endIcon', `iconSize${capitalize(size)}`]
+    startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`],
+    endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return _extends({}, classes, composedClasses);