impact-ui 4.0.18 → 5.0.0-beta.1

package/dist/node_modules/@mui/material/Alert/Alert.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { darken as darken_1, lighten as lighten_1 } from "../../system/colorManipulator.js";
+import useSlot from "../utils/useSlot.js";
 import alertClasses, { getAlertUtilityClass } from "./alertClasses.js";
 import SuccessOutlinedIcon from "../internal/svg-icons/SuccessOutlined.js";
 import ReportProblemOutlinedIcon from "../internal/svg-icons/ReportProblemOutlined.js";
@@ -12,11 +12,12 @@ import ErrorOutlineIcon from "../internal/svg-icons/ErrorOutline.js";
 import InfoOutlinedIcon from "../internal/svg-icons/InfoOutlined.js";
 import ClearIcon from "../internal/svg-icons/Close.js";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
 import IconButton from "../IconButton/IconButton.js";
-import capitalize from "../../utils/capitalize/capitalize.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import styled from "../styles/styled.js";
 import Paper from "../Paper/Paper.js";
-import { darken, lighten } from "../../system/esm/colorManipulator.js";
 const _excluded = ["action", "children", "className", "closeText", "color", "components", "componentsProps", "icon", "iconMapping", "onClose", "role", "severity", "slotProps", "slots", "variant"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -26,7 +27,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"]
@@ -43,41 +44,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;
+  const getColor = theme.palette.mode === "light" ? darken_1 : lighten_1;
+  const getBackgroundColor = theme.palette.mode === "light" ? lighten_1 : darken_1;
   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",
@@ -125,8 +143,7 @@ const defaultIconMapping = {
   })
 };
 const Alert = /* @__PURE__ */ React.forwardRef(function Alert2(inProps, ref) {
-  var _ref, _slots$closeButton, _ref2, _slots$closeIcon, _slotProps$closeButto, _slotProps$closeIcon;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiAlert"
   });
@@ -150,13 +167,27 @@ const Alert = /* @__PURE__ */ React.forwardRef(function Alert2(inProps, ref) {
   const ownerState = _extends({}, props, {
     color,
     severity,
-    variant
+    variant,
+    colorSeverity: color || severity
   });
   const classes = useUtilityClasses(ownerState);
-  const AlertCloseButton = (_ref = (_slots$closeButton = slots.closeButton) != null ? _slots$closeButton : components.CloseButton) != null ? _ref : IconButton;
-  const AlertCloseIcon = (_ref2 = (_slots$closeIcon = slots.closeIcon) != null ? _slots$closeIcon : components.CloseIcon) != null ? _ref2 : ClearIcon;
-  const closeButtonProps = (_slotProps$closeButto = slotProps.closeButton) != null ? _slotProps$closeButto : componentsProps.closeButton;
-  const closeIconProps = (_slotProps$closeIcon = slotProps.closeIcon) != null ? _slotProps$closeIcon : componentsProps.closeIcon;
+  const externalForwardedProps = {
+    slots: _extends({
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon
+    }, slots),
+    slotProps: _extends({}, componentsProps, slotProps)
+  };
+  const [CloseButtonSlot, closeButtonProps] = useSlot("closeButton", {
+    elementType: IconButton,
+    externalForwardedProps,
+    ownerState
+  });
+  const [CloseIconSlot, closeIconProps] = useSlot("closeIcon", {
+    elementType: ClearIcon,
+    externalForwardedProps,
+    ownerState
+  });
   return /* @__PURE__ */ jsxs(AlertRoot, _extends({
     role,
     elevation: 0,
@@ -179,14 +210,14 @@ const Alert = /* @__PURE__ */ React.forwardRef(function Alert2(inProps, ref) {
     }) : null, action == null && onClose ? /* @__PURE__ */ jsx(AlertAction, {
       ownerState,
       className: classes.action,
-      children: /* @__PURE__ */ jsx(AlertCloseButton, _extends({
+      children: /* @__PURE__ */ jsx(CloseButtonSlot, _extends({
         size: "small",
         "aria-label": closeText,
         title: closeText,
         color: "inherit",
         onClick: onClose
       }, closeButtonProps, {
-        children: /* @__PURE__ */ jsx(AlertCloseIcon, _extends({
+        children: /* @__PURE__ */ jsx(CloseIconSlot, _extends({
           fontSize: "small"
         }, closeIconProps))
       }))
@@ -194,10 +225,10 @@ const Alert = /* @__PURE__ */ React.forwardRef(function Alert2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Alert.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
@@ -224,14 +255,13 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes = {
   /**
    * The color of the component. Unless provided, the value is taken from the `severity` prop.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["error", "info", "success", "warning"]), PropTypes.string]),
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -243,8 +273,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -285,24 +314,17 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes = {
    * The severity of the alert. This defines the color and icon used.
    * @default 'success'
    */
-  severity: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  severity: PropTypes.oneOfType([PropTypes.oneOf(["error", "info", "success", "warning"]), PropTypes.string]),
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    closeButton: PropTypes.object,
-    closeIcon: PropTypes.object
+    closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/dist/node_modules/@mui/material/Alert/alertClasses.js

@@ -1,9 +1,9 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 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 {
   alertClasses as default,
   getAlertUtilityClass

package/dist/node_modules/@mui/material/AlertTitle/AlertTitle.js

@@ -3,11 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import { getAlertTitleUtilityClass } from "./alertTitleClasses.js";
 import { jsx } from "react/jsx-runtime";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import styled from "../styles/styled.js";
 import Typography from "../Typography/Typography.js";
 const _excluded = ["className"];
 const useUtilityClasses = (ownerState) => {
@@ -32,7 +32,7 @@ const AlertTitleRoot = styled(Typography, {
   };
 });
 const AlertTitle = /* @__PURE__ */ React.forwardRef(function AlertTitle2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiAlertTitle"
   });
@@ -50,10 +50,10 @@ const AlertTitle = /* @__PURE__ */ React.forwardRef(function AlertTitle2(inProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? AlertTitle.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/dist/node_modules/@mui/material/AlertTitle/alertTitleClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getAlertTitleUtilityClass(slot) {
   return generateUtilityClass("MuiAlertTitle", slot);
 }

package/dist/node_modules/@mui/material/Avatar/Avatar.js

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import Person from "../internal/svg-icons/Person.js";
 import { getAvatarUtilityClass } from "./avatarClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx } from "react/jsx-runtime";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
-const _excluded = ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"];
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import styled from "../styles/styled.js";
+const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 const useUtilityClasses = (ownerState) => {
   const {
     classes,
@@ -33,9 +34,8 @@ const AvatarRoot = styled("div", {
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: "relative",
   display: "flex",
   alignItems: "center",
@@ -48,18 +48,36 @@ const AvatarRoot = styled("div", {
   lineHeight: 1,
   borderRadius: "50%",
   overflow: "hidden",
-  userSelect: "none"
-}, ownerState.variant === "rounded" && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.variant === "square" && {
-  borderRadius: 0
-}, ownerState.colorDefault && _extends({
-  color: (theme.vars || theme).palette.background.default
-}, theme.vars ? {
-  backgroundColor: theme.vars.palette.Avatar.defaultBg
-} : {
-  backgroundColor: theme.palette.mode === "light" ? theme.palette.grey[400] : theme.palette.grey[600]
-})));
+  userSelect: "none",
+  variants: [{
+    props: {
+      variant: "rounded"
+    },
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius
+    }
+  }, {
+    props: {
+      variant: "square"
+    },
+    style: {
+      borderRadius: 0
+    }
+  }, {
+    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]
+    })))
+  }]
+}));
 const AvatarImg = styled("img", {
   name: "MuiAvatar",
   slot: "Img",
@@ -122,7 +140,7 @@ function useLoaded({
   return loaded;
 }
 const Avatar = /* @__PURE__ */ React.forwardRef(function Avatar2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiAvatar"
   });
@@ -131,6 +149,8 @@ const Avatar = /* @__PURE__ */ React.forwardRef(function Avatar2(inProps, ref) {
     children: childrenProp,
     className,
     component = "div",
+    slots = {},
+    slotProps = {},
     imgProps,
     sizes,
     src,
@@ -150,16 +170,26 @@ const Avatar = /* @__PURE__ */ React.forwardRef(function Avatar2(inProps, ref) {
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  if (hasImgNotFailing) {
-    children = /* @__PURE__ */ jsx(AvatarImg, _extends({
+  const [ImgSlot, imgSlotProps] = useSlot("img", {
+    className: classes.img,
+    elementType: AvatarImg,
+    externalForwardedProps: {
+      slots,
+      slotProps: {
+        img: _extends({}, imgProps, slotProps.img)
+      }
+    },
+    additionalProps: {
       alt,
       src,
       srcSet,
-      sizes,
-      ownerState,
-      className: classes.img
-    }, imgProps));
-  } else if (childrenProp != null) {
+      sizes
+    },
+    ownerState
+  });
+  if (hasImgNotFailing) {
+    children = /* @__PURE__ */ jsx(ImgSlot, _extends({}, imgSlotProps));
+  } else if (!!childrenProp || childrenProp === 0) {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];
@@ -179,10 +209,10 @@ const Avatar = /* @__PURE__ */ React.forwardRef(function Avatar2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Avatar.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Used in combination with `src` or `srcSet` to
    * provide an alt attribute for the rendered `img` element.
@@ -209,12 +239,27 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes = {
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
    * It can be used to listen for the loading error event.
+   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: PropTypes.object,
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    img: PropTypes.elementType
+  }),
   /**
    * The `src` attribute for the `img` element.
    */

package/dist/node_modules/@mui/material/Avatar/avatarClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getAvatarUtilityClass(slot) {
   return generateUtilityClass("MuiAvatar", slot);
 }

package/dist/node_modules/@mui/material/Backdrop/Backdrop.js

@@ -4,11 +4,11 @@ import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import { getBackdropUtilityClass } from "./backdropClasses.js";
 import { jsx } from "react/jsx-runtime";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
 import Fade from "../Fade/Fade.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -47,7 +47,7 @@ const BackdropRoot = styled("div", {
 }));
 const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, ref) {
   var _slotProps$root, _ref, _slots$root;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiBackdrop"
   });
@@ -87,10 +87,10 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(function Backdrop2(inProps, re
   }));
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The content of the component.
    */

package/dist/node_modules/@mui/material/Backdrop/backdropClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getBackdropUtilityClass(slot) {
   return generateUtilityClass("MuiBackdrop", slot);
 }