@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/Alert/Alert.js

@@ -1,26 +1,24 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 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';
-import alertClasses, { getAlertUtilityClass } from './alertClasses';
-import IconButton from '../IconButton';
-import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';
-import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';
-import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';
-import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';
-import CloseIcon from '../internal/svg-icons/Close';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import useSlot from "../utils/useSlot.js";
+import capitalize from "../utils/capitalize.js";
+import Paper from "../Paper/index.js";
+import alertClasses, { getAlertUtilityClass } from "./alertClasses.js";
+import IconButton from "../IconButton/index.js";
+import SuccessOutlinedIcon from "../internal/svg-icons/SuccessOutlined.js";
+import ReportProblemOutlinedIcon from "../internal/svg-icons/ReportProblemOutlined.js";
+import ErrorOutlineIcon from "../internal/svg-icons/ErrorOutline.js";
+import InfoOutlinedIcon from "../internal/svg-icons/InfoOutlined.js";
+import CloseIcon from "../internal/svg-icons/Close.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     variant,
@@ -45,16 +43,17 @@ const AlertRoot = styled(Paper, {
     } = props;
     return [styles.root, styles[ownerState.variant], styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => {
   const getColor = theme.palette.mode === 'light' ? darken : lighten;
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
-  return _extends({}, theme.typography.body2, {
+  return {
+    ...theme.typography.body2,
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'standard'
@@ -68,7 +67,7 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'outlined'
@@ -82,23 +81,24 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(([, value]) => 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)
-      })
+      style: {
+        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',
   slot: 'Icon',
@@ -145,41 +145,46 @@ const defaultIconMapping = {
   })
 };
 const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAlert'
   });
   const {
-      action,
-      children,
-      className,
-      closeText = 'Close',
-      color,
-      components = {},
-      componentsProps = {},
-      icon,
-      iconMapping = defaultIconMapping,
-      onClose,
-      role = 'alert',
-      severity = 'success',
-      slotProps = {},
-      slots = {},
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    action,
+    children,
+    className,
+    closeText = 'Close',
+    color,
+    components = {},
+    componentsProps = {},
+    icon,
+    iconMapping = defaultIconMapping,
+    onClose,
+    role = 'alert',
+    severity = 'success',
+    slotProps = {},
+    slots = {},
+    variant = 'standard',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     severity,
     variant,
     colorSeverity: color || severity
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: _extends({
+    slots: {
       closeButton: components.CloseButton,
-      closeIcon: components.CloseIcon
-    }, slots),
-    slotProps: _extends({}, componentsProps, slotProps)
+      closeIcon: components.CloseIcon,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
     elementType: IconButton,
@@ -191,13 +196,13 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(AlertRoot, _extends({
+  return /*#__PURE__*/_jsxs(AlertRoot, {
     role: role,
     elevation: 0,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {
       ownerState: ownerState,
       className: classes.icon,
@@ -213,19 +218,20 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
       ownerState: ownerState,
       className: classes.action,
-      children: /*#__PURE__*/_jsx(CloseButtonSlot, _extends({
+      children: /*#__PURE__*/_jsx(CloseButtonSlot, {
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
-        onClick: onClose
-      }, closeButtonProps, {
-        children: /*#__PURE__*/_jsx(CloseIconSlot, _extends({
-          fontSize: "small"
-        }, closeIconProps))
-      }))
+        onClick: onClose,
+        ...closeButtonProps,
+        children: /*#__PURE__*/_jsx(CloseIconSlot, {
+          fontSize: "small",
+          ...closeIconProps
+        })
+      })
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -264,7 +270,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -276,7 +282,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Alert/alertClasses.d.ts

@@ -18,73 +18,73 @@ export interface AlertClasses {
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardSuccess: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardInfo: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardWarning: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardError: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSuccess: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedInfo: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedWarning: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedError: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledSuccess: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledInfo: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledWarning: string;
     /** 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/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledError: string;
     /** Styles applied to the icon wrapper element. */

package/Alert/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Alert';
-export { default as alertClasses } from './alertClasses';
-export * from './alertClasses';
+export { default } from "./Alert.js";
+export { default as alertClasses } from "./alertClasses.js";
+export * from "./alertClasses.js";

package/AlertTitle/AlertTitle.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme, TypographyProps } from '..';
 import { AlertTitleClasses } from './alertTitleClasses';
 
-export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface AlertTitleProps extends TypographyProps<'div'> {
   /**
    * The content of the component.
    */
@@ -29,4 +29,4 @@ export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTML
  * - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
  * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
  */
-export default function AlertTitle(props: AlertTitleProps): JSX.Element;
+export default function AlertTitle(props: AlertTitleProps): React.JSX.Element;

package/AlertTitle/AlertTitle.js

@@ -1,17 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import Typography from '../Typography';
-import { getAlertTitleUtilityClass } from './alertTitleClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import Typography from "../Typography/index.js";
+import { getAlertTitleUtilityClass } from "./alertTitleClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiAlertTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -25,32 +23,33 @@ const AlertTitleRoot = styled(Typography, {
   name: 'MuiAlertTitle',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
+})(memoTheme(({
   theme
 }) => {
   return {
     fontWeight: theme.typography.fontWeightMedium,
     marginTop: -2
   };
-});
+}));
 const AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAlertTitle'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AlertTitleRoot, _extends({
+  return /*#__PURE__*/_jsx(AlertTitleRoot, {
     gutterBottom: true,
     component: "div",
     ownerState: ownerState,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? AlertTitle.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/AlertTitle/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './AlertTitle';
-export { default as alertTitleClasses } from './alertTitleClasses';
-export * from './alertTitleClasses';
+export { default } from "./AlertTitle.js";
+export { default as alertTitleClasses } from "./alertTitleClasses.js";
+export * from "./alertTitleClasses.js";

package/AppBar/AppBar.js

@@ -1,18 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "enableColorOnDark", "position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import capitalize from '../utils/capitalize';
-import Paper from '../Paper';
-import { getAppBarUtilityClass } from './appBarClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import Paper from "../Paper/index.js";
+import { getAppBarUtilityClass } from "./appBarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiAppBar');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -37,7 +35,7 @@ const AppBarRoot = styled(Paper, {
     } = props;
     return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',
@@ -108,14 +106,15 @@ const AppBarRoot = styled(Paper, {
     props: {
       color: 'default'
     },
-    style: _extends({
+    style: {
       '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
-      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
-    }, theme.applyStyles('dark', {
-      '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
-      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
-    }))
-  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100]),
+      ...theme.applyStyles('dark', {
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+      })
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
     props: {
       color
     },
@@ -124,64 +123,64 @@ const AppBarRoot = styled(Paper, {
       '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText
     }
   })), {
-    props: {
-      enableColorOnDark: true
-    },
+    props: props => props.enableColorOnDark === true && !['inherit', 'transparent'].includes(props.color),
     style: {
       backgroundColor: 'var(--AppBar-background)',
       color: 'var(--AppBar-color)'
     }
   }, {
-    props: {
-      enableColorOnDark: false
-    },
-    style: _extends({
+    props: props => props.enableColorOnDark === false && !['inherit', 'transparent'].includes(props.color),
+    style: {
       backgroundColor: 'var(--AppBar-background)',
-      color: 'var(--AppBar-color)'
-    }, theme.applyStyles('dark', {
-      backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
-      color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
-    }))
+      color: 'var(--AppBar-color)',
+      ...theme.applyStyles('dark', {
+        backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+        color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+      })
+    }
   }, {
     props: {
       color: 'transparent'
     },
-    style: _extends({
+    style: {
       '--AppBar-background': 'transparent',
       '--AppBar-color': 'inherit',
       backgroundColor: 'var(--AppBar-background)',
-      color: 'var(--AppBar-color)'
-    }, theme.applyStyles('dark', {
-      backgroundImage: 'none'
-    }))
+      color: 'var(--AppBar-color)',
+      ...theme.applyStyles('dark', {
+        backgroundImage: 'none'
+      })
+    }
   }]
-}));
+})));
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAppBar'
   });
   const {
-      className,
-      color = 'primary',
-      enableColorOnDark = false,
-      position = 'fixed'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    enableColorOnDark = false,
+    position = 'fixed',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     position,
     enableColorOnDark
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AppBarRoot, _extends({
+  return /*#__PURE__*/_jsx(AppBarRoot, {
     square: true,
     component: "header",
     ownerState: ownerState,
     elevation: 4,
     className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/AppBar/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './AppBar';
-export { default as appBarClasses } from './appBarClasses';
-export * from './appBarClasses';
+export { default } from "./AppBar.js";
+export { default as appBarClasses } from "./appBarClasses.js";
+export * from "./appBarClasses.js";