impact-ui 4.0.17-alpha.2 → 5.0.0

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

@@ -1,17 +1,17 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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 useBadge from "./useBadge.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useBadge } from "../node_modules/@mui/base/useBadge/useBadge.js";
-import usePreviousProps from "../../utils/usePreviousProps/usePreviousProps.js";
-import { useSlotProps } from "../node_modules/@mui/base/utils/useSlotProps.js";
-import capitalize from "../../utils/capitalize/capitalize.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import usePreviousProps from "../node_modules/@mui/utils/esm/usePreviousProps/usePreviousProps.js";
+import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.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";
 const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -51,112 +51,173 @@ const BadgeBadge = styled("span", {
     return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  justifyContent: "center",
-  alignContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  boxSizing: "border-box",
-  fontFamily: theme.typography.fontFamily,
-  fontWeight: theme.typography.fontWeightMedium,
-  fontSize: theme.typography.pxToRem(12),
-  minWidth: RADIUS_STANDARD * 2,
-  lineHeight: 1,
-  padding: "0 6px",
-  height: RADIUS_STANDARD * 2,
-  borderRadius: RADIUS_STANDARD,
-  zIndex: 1,
-  // Render the badge on top of potential ripples.
-  transition: theme.transitions.create("transform", {
-    easing: theme.transitions.easing.easeInOut,
-    duration: theme.transitions.duration.enteringScreen
-  })
-}, ownerState.color !== "default" && {
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-  color: (theme.vars || theme).palette[ownerState.color].contrastText
-}, ownerState.variant === "dot" && {
-  borderRadius: RADIUS_DOT,
-  height: RADIUS_DOT * 2,
-  minWidth: RADIUS_DOT * 2,
-  padding: 0
-}, ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular" && {
-  top: 0,
-  right: 0,
-  transform: "scale(1) translate(50%, -50%)",
-  transformOrigin: "100% 0%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(50%, -50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular" && {
-  bottom: 0,
-  right: 0,
-  transform: "scale(1) translate(50%, 50%)",
-  transformOrigin: "100% 100%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(50%, 50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular" && {
-  top: 0,
-  left: 0,
-  transform: "scale(1) translate(-50%, -50%)",
-  transformOrigin: "0% 0%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(-50%, -50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular" && {
-  bottom: 0,
-  left: 0,
-  transform: "scale(1) translate(-50%, 50%)",
-  transformOrigin: "0% 100%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(-50%, 50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular" && {
-  top: "14%",
-  right: "14%",
-  transform: "scale(1) translate(50%, -50%)",
-  transformOrigin: "100% 0%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(50%, -50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular" && {
-  bottom: "14%",
-  right: "14%",
-  transform: "scale(1) translate(50%, 50%)",
-  transformOrigin: "100% 100%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(50%, 50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular" && {
-  top: "14%",
-  left: "14%",
-  transform: "scale(1) translate(-50%, -50%)",
-  transformOrigin: "0% 0%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(-50%, -50%)"
-  }
-}, ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular" && {
-  bottom: "14%",
-  left: "14%",
-  transform: "scale(1) translate(-50%, 50%)",
-  transformOrigin: "0% 100%",
-  [`&.${badgeClasses.invisible}`]: {
-    transform: "scale(0) translate(-50%, 50%)"
-  }
-}, ownerState.invisible && {
-  transition: theme.transitions.create("transform", {
-    easing: theme.transitions.easing.easeInOut,
-    duration: theme.transitions.duration.leavingScreen
-  })
-}));
+  theme
+}) => {
+  var _theme$vars;
+  return {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    alignContent: "center",
+    alignItems: "center",
+    position: "absolute",
+    boxSizing: "border-box",
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.pxToRem(12),
+    minWidth: RADIUS_STANDARD * 2,
+    lineHeight: 1,
+    padding: "0 6px",
+    height: RADIUS_STANDARD * 2,
+    borderRadius: RADIUS_STANDARD,
+    zIndex: 1,
+    // Render the badge on top of potential ripples.
+    transition: theme.transitions.create("transform", {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter((key) => {
+      var _theme$vars2, _theme$vars3;
+      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main && ((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette[key].contrastText;
+    }).map((color) => ({
+      props: {
+        color
+      },
+      style: {
+        backgroundColor: (theme.vars || theme).palette[color].main,
+        color: (theme.vars || theme).palette[color].contrastText
+      }
+    })), {
+      props: {
+        variant: "dot"
+      },
+      style: {
+        borderRadius: RADIUS_DOT,
+        height: RADIUS_DOT * 2,
+        minWidth: RADIUS_DOT * 2,
+        padding: 0
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular",
+      style: {
+        top: 0,
+        right: 0,
+        transform: "scale(1) translate(50%, -50%)",
+        transformOrigin: "100% 0%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(50%, -50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular",
+      style: {
+        bottom: 0,
+        right: 0,
+        transform: "scale(1) translate(50%, 50%)",
+        transformOrigin: "100% 100%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(50%, 50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular",
+      style: {
+        top: 0,
+        left: 0,
+        transform: "scale(1) translate(-50%, -50%)",
+        transformOrigin: "0% 0%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(-50%, -50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular",
+      style: {
+        bottom: 0,
+        left: 0,
+        transform: "scale(1) translate(-50%, 50%)",
+        transformOrigin: "0% 100%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(-50%, 50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular",
+      style: {
+        top: "14%",
+        right: "14%",
+        transform: "scale(1) translate(50%, -50%)",
+        transformOrigin: "100% 0%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(50%, -50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular",
+      style: {
+        bottom: "14%",
+        right: "14%",
+        transform: "scale(1) translate(50%, 50%)",
+        transformOrigin: "100% 100%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(50%, 50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular",
+      style: {
+        top: "14%",
+        left: "14%",
+        transform: "scale(1) translate(-50%, -50%)",
+        transformOrigin: "0% 0%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(-50%, -50%)"
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular",
+      style: {
+        bottom: "14%",
+        left: "14%",
+        transform: "scale(1) translate(-50%, 50%)",
+        transformOrigin: "0% 100%",
+        [`&.${badgeClasses.invisible}`]: {
+          transform: "scale(0) translate(-50%, 50%)"
+        }
+      }
+    }, {
+      props: {
+        invisible: true
+      },
+      style: {
+        transition: theme.transitions.create("transform", {
+          easing: theme.transitions.easing.easeInOut,
+          duration: theme.transitions.duration.leavingScreen
+        })
+      }
+    }]
+  };
+});
 const Badge = /* @__PURE__ */ React.forwardRef(function Badge2(inProps, ref) {
   var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiBadge"
   });
@@ -246,10 +307,10 @@ const Badge = /* @__PURE__ */ React.forwardRef(function Badge2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Badge.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 anchor of the badge.
    * @default {
@@ -280,7 +341,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes = {
   /**
    * The color of the component.
    * 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).
    * @default 'default'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),

package/dist/node_modules/@mui/material/Badge/badgeClasses.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 getBadgeUtilityClass(slot) {
   return generateUtilityClass("MuiBadge", slot);
 }

package/dist/node_modules/@mui/material/{node_modules/@mui/base/useBadge → Badge}/useBadge.js

@@ -1,4 +1,4 @@
-import usePreviousProps from "../../../../../utils/usePreviousProps/usePreviousProps.js";
+import usePreviousProps from "../node_modules/@mui/utils/esm/usePreviousProps/usePreviousProps.js";
 function useBadge(parameters) {
   const {
     badgeContent: badgeContentProp,
@@ -27,5 +27,5 @@ function useBadge(parameters) {
   };
 }
 export {
-  useBadge
+  useBadge as default
 };

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

@@ -1,20 +1,21 @@
 import PropTypes from "../../../prop-types/index.js";
 import THEME_ID from "../styles/identifier.js";
+import boxClasses from "./boxClasses.js";
 import createBox from "../../system/esm/createBox.js";
-import ClassNameGenerator from "../../utils/ClassNameGenerator/ClassNameGenerator.js";
+import ClassNameGenerator from "../node_modules/@mui/utils/esm/ClassNameGenerator/ClassNameGenerator.js";
 import createTheme from "../styles/createTheme.js";
 const defaultTheme = createTheme();
 const Box = createBox({
   themeId: THEME_ID,
   defaultTheme,
-  defaultClassName: "MuiBox-root",
+  defaultClassName: boxClasses.root,
   generateClassName: ClassNameGenerator.generate
 });
 process.env.NODE_ENV !== "production" ? Box.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`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * @ignore
    */

package/dist/node_modules/@mui/material/Box/boxClasses.js

@@ -0,0 +1,5 @@
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
+const boxClasses = generateUtilityClasses("MuiBox", ["root"]);
+export {
+  boxClasses as default
+};

package/dist/node_modules/@mui/material/Breadcrumbs/BreadcrumbCollapsed.js

@@ -2,13 +2,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 import "react";
 import PropTypes from "../../../prop-types/index.js";
+import { emphasize as emphasize_1 } from "../../system/colorManipulator.js";
 import styled from "../styles/styled.js";
 import MoreHorizIcon from "../internal/svg-icons/MoreHoriz.js";
 import { jsx } from "react/jsx-runtime";
 import ButtonBase from "../ButtonBase/ButtonBase.js";
-import { emphasize } from "../../system/esm/colorManipulator.js";
 const _excluded = ["slots", "slotProps"];
-const BreadcrumbCollapsedButton = styled(ButtonBase)(({
+const BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: "MuiBreadcrumbCollapsed"
+})(({
   theme
 }) => _extends({
   display: "flex",
@@ -30,9 +32,9 @@ const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   "&:active": _extends({
     boxShadow: theme.shadows[0]
   }, theme.palette.mode === "light" ? {
-    backgroundColor: emphasize(theme.palette.grey[200], 0.12)
+    backgroundColor: emphasize_1(theme.palette.grey[200], 0.12)
   } : {
-    backgroundColor: emphasize(theme.palette.grey[600], 0.12)
+    backgroundColor: emphasize_1(theme.palette.grey[600], 0.12)
   })
 }));
 const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({

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

@@ -1,18 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import * as React from "react";
-import { r as reactIsExports } from "../node_modules/react-is/index.js";
+import { r as reactIsExports } from "../../../react-is/index.js";
 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 BreadcrumbCollapsed from "./BreadcrumbCollapsed.js";
 import breadcrumbsClasses, { getBreadcrumbsUtilityClass } from "./breadcrumbsClasses.js";
 import { jsx } from "react/jsx-runtime";
-import { useSlotProps } from "../node_modules/@mui/base/utils/useSlotProps.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 import Typography from "../Typography/Typography.js";
-import integerPropType from "../../utils/integerPropType/integerPropType.js";
+import integerPropType from "../node_modules/@mui/utils/esm/integerPropType/integerPropType.js";
 const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -73,7 +73,7 @@ function insertSeparators(items, className, separator, ownerState) {
   }, []);
 }
 const Breadcrumbs = /* @__PURE__ */ React.forwardRef(function Breadcrumbs2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiBreadcrumbs"
   });
@@ -158,10 +158,10 @@ const Breadcrumbs = /* @__PURE__ */ React.forwardRef(function Breadcrumbs2(inPro
   }));
 });
 process.env.NODE_ENV !== "production" ? Breadcrumbs.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/Breadcrumbs/breadcrumbsClasses.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 getBreadcrumbsUtilityClass(slot) {
   return generateUtilityClass("MuiBreadcrumbs", slot);
 }

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

@@ -3,16 +3,18 @@ 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, { rootShouldForwardProp } from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
+import { alpha as alpha_1 } from "../../system/colorManipulator.js";
+import styled from "../styles/styled.js";
 import buttonClasses, { getButtonUtilityClass } from "./buttonClasses.js";
 import ButtonGroupContext from "../ButtonGroup/ButtonGroupContext.js";
+import ButtonGroupButtonContext from "../ButtonGroup/ButtonGroupButtonContext.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import resolveProps from "../../utils/resolveProps/resolveProps.js";
-import capitalize from "../../utils/capitalize/capitalize.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import resolveProps from "../node_modules/@mui/utils/esm/resolveProps/resolveProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 import ButtonBase from "../ButtonBase/ButtonBase.js";
-import { alpha } from "../../system/esm/colorManipulator.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
 const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -24,10 +26,10 @@ const useUtilityClasses = (ownerState) => {
     classes
   } = ownerState;
   const slots = {
-    root: ["root", variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, color === "inherit" && "colorInherit", disableElevation && "disableElevation", fullWidth && "fullWidth"],
+    root: ["root", variant, `${variant}${capitalize(color)}`, `size${capitalize(size)}`, `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && "disableElevation", fullWidth && "fullWidth"],
     label: ["label"],
-    startIcon: ["startIcon", `iconSize${capitalize(size)}`],
-    endIcon: ["endIcon", `iconSize${capitalize(size)}`]
+    startIcon: ["icon", "startIcon", `iconSize${capitalize(size)}`],
+    endIcon: ["icon", "endIcon", `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
   return _extends({}, classes, composedClasses);
@@ -71,20 +73,20 @@ const ButtonRoot = styled(ButtonBase, {
     }),
     "&:hover": _extends({
       textDecoration: "none",
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
     }, ownerState.variant === "text" && ownerState.color !== "inherit" && {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
       }
     }, ownerState.variant === "outlined" && ownerState.color !== "inherit" && {
       border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       "@media (hover: none)": {
         backgroundColor: "transparent"
@@ -128,7 +130,7 @@ const ButtonRoot = styled(ButtonBase, {
     border: "1px solid currentColor"
   }, ownerState.variant === "outlined" && ownerState.color !== "inherit" && {
     color: (theme.vars || theme).palette[ownerState.color].main,
-    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha_1(theme.palette[ownerState.color].main, 0.5)}`
   }, ownerState.variant === "contained" && {
     color: theme.vars ? (
       // this is safe because grey does not change between default light/dark mode
@@ -218,8 +220,9 @@ const ButtonEndIcon = styled("span", {
 }, commonIconStyles(ownerState)));
 const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
   const contextProps = React.useContext(ButtonGroupContext);
+  const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
   const resolvedProps = resolveProps(contextProps, inProps);
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: resolvedProps,
     name: "MuiButton"
   });
@@ -261,9 +264,10 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
     ownerState,
     children: endIconProp
   });
+  const positionClassName = buttonGroupButtonContextPositionClassName || "";
   return /* @__PURE__ */ jsxs(ButtonRoot, _extends({
     ownerState,
-    className: clsx(contextProps.className, classes.root, className),
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
     component,
     disabled,
     focusRipple: !disableFocusRipple,
@@ -276,10 +280,10 @@ const Button = /* @__PURE__ */ React.forwardRef(function Button2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Button.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.
    */
@@ -295,7 +299,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes = {
   /**
    * The color of the component.
    * 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).
    * @default 'primary'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), PropTypes.string]),

package/dist/node_modules/@mui/material/Button/buttonClasses.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 getButtonUtilityClass(slot) {
   return generateUtilityClass("MuiButton", slot);
 }
-const buttonClasses = generateUtilityClasses("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]);
+const buttonClasses = generateUtilityClasses("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]);
 export {
   buttonClasses as default,
   getButtonUtilityClass