@mui/material 5.15.14 → 6.0.0-alpha.0

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.

package/FormControlLabel/FormControlLabel.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 = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,15 +9,14 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, { getFormControlLabelUtilityClasses } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
-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";
+const useThemeProps = createUseThemeProps('MuiFormControlLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -45,9 +44,8 @@ export const FormControlLabelRoot = styled('label', {
     }, styles.root, styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -59,24 +57,42 @@ export const FormControlLabelRoot = styled('label', {
   // used for row presentation of radio/checkbox
   [`&.${formControlLabelClasses.disabled}`]: {
     cursor: 'default'
-  }
-}, ownerState.labelPlacement === 'start' && {
-  flexDirection: 'row-reverse',
-  marginLeft: 16,
-  // used for row presentation of radio/checkbox
-  marginRight: -11
-}, ownerState.labelPlacement === 'top' && {
-  flexDirection: 'column-reverse',
-  marginLeft: 16
-}, ownerState.labelPlacement === 'bottom' && {
-  flexDirection: 'column',
-  marginLeft: 16
-}, {
+  },
   [`& .${formControlLabelClasses.label}`]: {
     [`&.${formControlLabelClasses.disabled}`]: {
       color: (theme.vars || theme).palette.text.disabled
     }
-  }
+  },
+  variants: [{
+    props: {
+      labelPlacement: 'start'
+    },
+    style: {
+      flexDirection: 'row-reverse',
+      marginRight: -11
+    }
+  }, {
+    props: {
+      labelPlacement: 'top'
+    },
+    style: {
+      flexDirection: 'column-reverse'
+    }
+  }, {
+    props: {
+      labelPlacement: 'bottom'
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      labelPlacement
+    }) => labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom',
+    style: {
+      marginLeft: 16 // used for row presentation of radio/checkbox
+    }
+  }]
 }));
 const AsteriskComponent = styled('span', {
   name: 'MuiFormControlLabel',
@@ -95,7 +111,6 @@ const AsteriskComponent = styled('span', {
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref, _slotProps$typography;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -113,8 +128,8 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
-  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
-  const required = requiredProp != null ? requiredProp : control.props.required;
+  const disabled = disabledProp ?? control.props.disabled ?? muiFormControl?.disabled;
+  const required = requiredProp ?? control.props.required;
   const controlProps = {
     disabled,
     required
@@ -136,13 +151,13 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+  const typographySlotProps = slotProps.typography ?? componentsProps.typography;
   let label = labelProp;
   if (label != null && label.type !== Typography && !disableTypography) {
     label = /*#__PURE__*/_jsx(Typography, _extends({
       component: "span"
     }, typographySlotProps, {
-      className: clsx(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
+      className: clsx(classes.label, typographySlotProps?.className),
       children: label
     }));
   }