@mui/material 6.0.0-alpha.6 → 6.0.0-alpha.8

package/Avatar/Avatar.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -69,15 +66,17 @@ const AvatarRoot = styled('div', {
     props: {
       colorDefault: true
     },
-    style: _extends({
-      color: (theme.vars || theme).palette.background.default
-    }, theme.vars ? {
-      backgroundColor: theme.vars.palette.Avatar.defaultBg
-    } : _extends({
-      backgroundColor: theme.palette.grey[400]
-    }, theme.applyStyles('dark', {
-      backgroundColor: theme.palette.grey[600]
-    })))
+    style: {
+      color: (theme.vars || theme).palette.background.default,
+      ...(theme.vars ? {
+        backgroundColor: theme.vars.palette.Avatar.defaultBg
+      } : {
+        backgroundColor: theme.palette.grey[400],
+        ...theme.applyStyles('dark', {
+          backgroundColor: theme.palette.grey[600]
+        })
+      })
+    }
   }]
 }));
 const AvatarImg = styled('img', {
@@ -147,33 +146,35 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     name: 'MuiAvatar'
   });
   const {
-      alt,
-      children: childrenProp,
-      className,
-      component = 'div',
-      slots = {},
-      slotProps = {},
-      imgProps,
-      sizes,
-      src,
-      srcSet,
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    alt,
+    children: childrenProp,
+    className,
+    component = 'div',
+    slots = {},
+    slotProps = {},
+    imgProps,
+    sizes,
+    src,
+    srcSet,
+    variant = 'circular',
+    ...other
+  } = props;
   let children = null;
 
   // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded(_extends({}, imgProps, {
+  const loaded = useLoaded({
+    ...imgProps,
     src,
     srcSet
-  }));
+  });
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     colorDefault: !hasImgNotFailing,
     component,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const [ImgSlot, imgSlotProps] = useSlot('img', {
     className: classes.img,
@@ -181,7 +182,10 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     externalForwardedProps: {
       slots,
       slotProps: {
-        img: _extends({}, imgProps, slotProps.img)
+        img: {
+          ...imgProps,
+          ...slotProps.img
+        }
       }
     },
     additionalProps: {
@@ -193,7 +197,9 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     ownerState
   });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
+    children = /*#__PURE__*/_jsx(ImgSlot, {
+      ...imgSlotProps
+    });
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -206,14 +212,14 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-  return /*#__PURE__*/_jsx(AvatarRoot, _extends({
+  return /*#__PURE__*/_jsx(AvatarRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/AvatarGroup/AvatarGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -31,9 +28,10 @@ const useUtilityClasses = ownerState => {
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => _extends({
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar
-  }, styles.root)
+  overridesResolver: (props, styles) => ({
+    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
+    ...styles.root
+  })
 })(({
   theme
 }) => ({
@@ -54,25 +52,26 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     name: 'MuiAvatarGroup'
   });
   const {
-      children: childrenProp,
-      className,
-      component = 'div',
-      componentsProps = {},
-      max = 5,
-      renderSurplus,
-      slotProps = {},
-      spacing = 'medium',
-      total,
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children: childrenProp,
+    className,
+    component = 'div',
+    componentsProps = {},
+    max = 5,
+    renderSurplus,
+    slotProps = {},
+    spacing = 'medium',
+    total,
+    variant = 'circular',
+    ...other
+  } = props;
   let clampedMax = max < 2 ? 2 : max;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     max,
     spacing,
     component,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const children = React.Children.toArray(childrenProp).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
@@ -92,27 +91,28 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
   const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
-  return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
+  return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
-      variant: variant
-    }, additionalAvatarSlotProps, {
+    ref: ref,
+    ...other,
+    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, {
+      variant: variant,
+      ...additionalAvatarSlotProps,
       className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
-      style: _extends({
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
-      }, other.style),
+      style: {
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+        ...other.style
+      },
       children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
+    }) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         variant: child.props.variant || variant
       });
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Backdrop/Backdrop.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -58,29 +55,34 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     name: 'MuiBackdrop'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      invisible = false,
-      open,
-      components = {},
-      componentsProps = {},
-      slotProps = {},
-      slots = {},
-      TransitionComponent: TransitionComponentProp,
-      transitionDuration
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    component = 'div',
+    invisible = false,
+    open,
+    components = {},
+    componentsProps = {},
+    slotProps = {},
+    slots = {},
+    TransitionComponent: TransitionComponentProp,
+    transitionDuration,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     invisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const backwardCompatibleSlots = _extends({
+  const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
-    root: components.Root
-  }, slots);
-  const backwardCompatibleSlotProps = _extends({}, componentsProps, slotProps);
+    root: components.Root,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    ...componentsProps,
+    ...slotProps
+  };
   const externalForwardedProps = {
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
@@ -97,18 +99,19 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     ownerState
   });
   delete transitionProps.ownerState;
-  return /*#__PURE__*/_jsx(TransitionSlot, _extends({
+  return /*#__PURE__*/_jsx(TransitionSlot, {
     in: open,
-    timeout: transitionDuration
-  }, other, transitionProps, {
-    children: /*#__PURE__*/_jsx(RootSlot, _extends({
-      "aria-hidden": true
-    }, rootProps, {
+    timeout: transitionDuration,
+    ...other,
+    ...transitionProps,
+    children: /*#__PURE__*/_jsx(RootSlot, {
+      "aria-hidden": true,
+      ...rootProps,
       classes: classes,
       ref: ref,
       children: children
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Badge/Badge.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -77,7 +74,7 @@ const BadgeBadge = styled('span', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
-  variants: [...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
     props: {
       color
     },
@@ -217,26 +214,27 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     name: 'MuiBadge'
   });
   const {
-      anchorOrigin: anchorOriginProp = {
-        vertical: 'top',
-        horizontal: 'right'
-      },
-      className,
-      component,
-      components = {},
-      componentsProps = {},
-      children,
-      overlap: overlapProp = 'rectangular',
-      color: colorProp = 'default',
-      invisible: invisibleProp = false,
-      max: maxProp = 99,
-      badgeContent: badgeContentProp,
-      slots,
-      slotProps,
-      showZero = false,
-      variant: variantProp = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorOrigin: anchorOriginProp = {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    className,
+    classes: classesProp,
+    component,
+    components = {},
+    componentsProps = {},
+    children,
+    overlap: overlapProp = 'rectangular',
+    color: colorProp = 'default',
+    invisible: invisibleProp = false,
+    max: maxProp = 99,
+    badgeContent: badgeContentProp,
+    slots,
+    slotProps,
+    showZero = false,
+    variant: variantProp = 'standard',
+    ...other
+  } = props;
   const {
     badgeContent,
     invisible: invisibleFromHook,
@@ -263,7 +261,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     variant = variantProp
   } = invisible ? prevProps : props;
   const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     badgeContent,
     invisible,
     max,
@@ -273,7 +272,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     color,
     overlap,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
@@ -298,11 +297,13 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     ownerState,
     className: clsx(classes.badge, badgeSlotProps?.className)
   });
-  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
-    children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/_jsx(BadgeSlot, {
+      ...badgeProps,
       children: displayValue
-    }))]
-  }));
+    })]
+  });
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/BottomNavigation/BottomNavigation.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "onChange", "showLabels", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -39,25 +36,26 @@ const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation
     name: 'MuiBottomNavigation'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      onChange,
-      showLabels = false,
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    component = 'div',
+    onChange,
+    showLabels = false,
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     showLabels
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(BottomNavigationRoot, _extends({
+  return /*#__PURE__*/_jsx(BottomNavigationRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: React.Children.map(children, (child, childIndex) => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
@@ -75,7 +73,7 @@ const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation
         onChange
       });
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/BottomNavigationAction/BottomNavigationAction.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "icon", "label", "onChange", "onClick", "selected", "showLabel", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -100,17 +97,17 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     name: 'MuiBottomNavigationAction'
   });
   const {
-      className,
-      icon,
-      label,
-      onChange,
-      onClick
-      // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
-      ,
-
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    icon,
+    label,
+    onChange,
+    onClick,
+    // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
+    selected,
+    showLabel,
+    value,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
@@ -121,19 +118,19 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, _extends({
+  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     focusRipple: true,
     onClick: handleChange,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
       className: classes.label,
       ownerState: ownerState,
       children: label
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system/colorManipulator';
@@ -12,30 +9,33 @@ import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
-}) => _extends({
+}) => ({
   display: 'flex',
   marginLeft: `calc(${theme.spacing(1)} * 0.5)`,
-  marginRight: `calc(${theme.spacing(1)} * 0.5)`
-}, theme.palette.mode === 'light' ? {
-  backgroundColor: theme.palette.grey[100],
-  color: theme.palette.grey[700]
-} : {
-  backgroundColor: theme.palette.grey[700],
-  color: theme.palette.grey[100]
-}, {
-  borderRadius: 2,
-  '&:hover, &:focus': _extends({}, theme.palette.mode === 'light' ? {
-    backgroundColor: theme.palette.grey[200]
+  marginRight: `calc(${theme.spacing(1)} * 0.5)`,
+  ...(theme.palette.mode === 'light' ? {
+    backgroundColor: theme.palette.grey[100],
+    color: theme.palette.grey[700]
   } : {
-    backgroundColor: theme.palette.grey[600]
+    backgroundColor: theme.palette.grey[700],
+    color: theme.palette.grey[100]
   }),
-  '&:active': _extends({
-    boxShadow: theme.shadows[0]
-  }, theme.palette.mode === 'light' ? {
-    backgroundColor: emphasize(theme.palette.grey[200], 0.12)
-  } : {
-    backgroundColor: emphasize(theme.palette.grey[600], 0.12)
-  })
+  borderRadius: 2,
+  '&:hover, &:focus': {
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: theme.palette.grey[200]
+    } : {
+      backgroundColor: theme.palette.grey[600]
+    })
+  },
+  '&:active': {
+    boxShadow: theme.shadows[0],
+    ...(theme.palette.mode === 'light' ? {
+      backgroundColor: emphasize(theme.palette.grey[200], 0.12)
+    } : {
+      backgroundColor: emphasize(theme.palette.grey[600], 0.12)
+    })
+  }
 }));
 const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
   width: 24,
@@ -47,21 +47,22 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  */
 function BreadcrumbCollapsed(props) {
   const {
-      slots = {},
-      slotProps = {}
-    } = props,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    slots = {},
+    slotProps = {},
+    ...otherProps
+  } = props;
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
-    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
-      focusRipple: true
-    }, otherProps, {
+    children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, {
+      focusRipple: true,
+      ...otherProps,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
         as: slots.CollapsedIcon,
-        ownerState: ownerState
-      }, slotProps.collapsedIcon))
-    }))
+        ownerState: ownerState,
+        ...slotProps.collapsedIcon
+      })
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {