impact-ui 5.0.0 → 5.0.1-alpha.1

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

@@ -4,16 +4,16 @@ 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 TouchRipple from "./TouchRipple.js";
 import buttonBaseClasses, { getButtonBaseUtilityClass } from "./buttonBaseClasses.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
-import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
-import useIsFocusVisible from "../node_modules/@mui/utils/esm/useIsFocusVisible/useIsFocusVisible.js";
-import useEventCallback from "../node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js";
-import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
-import elementTypeAcceptingRef from "../node_modules/@mui/utils/esm/elementTypeAcceptingRef/elementTypeAcceptingRef.js";
-import refType from "../node_modules/@mui/utils/esm/refType/refType.js";
+import useForkRef from "../../utils/useForkRef/useForkRef.js";
+import useIsFocusVisible from "../../utils/useIsFocusVisible/useIsFocusVisible.js";
+import useEventCallback from "../../utils/useEventCallback/useEventCallback.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import elementTypeAcceptingRef from "../../utils/elementTypeAcceptingRef/elementTypeAcceptingRef.js";
+import refType from "../../utils/refType/refType.js";
 const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -76,7 +76,7 @@ const ButtonBaseRoot = styled("button", {
   }
 });
 const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiButtonBase"
   });
@@ -295,10 +295,10 @@ const ButtonBase = /* @__PURE__ */ React.forwardRef(function ButtonBase2(inProps
   }));
 });
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * A ref for imperative actions.
    * It currently only supports `focusVisible()` action.

package/dist/node_modules/@mui/material/ButtonBase/Ripple.js

@@ -46,6 +46,7 @@ function Ripple(props) {
 process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
   /**
    * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,

package/dist/node_modules/@mui/material/ButtonBase/TouchRipple.js

@@ -4,11 +4,10 @@ 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 Ripple from "./Ripple.js";
 import touchRippleClasses from "./touchRippleClasses.js";
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
-import useTimeout from "../node_modules/@mui/utils/esm/useTimeout/useTimeout.js";
 import TransitionGroup from "../../../react-transition-group/esm/TransitionGroup.js";
 import { keyframes } from "../../../@emotion/react/dist/emotion-react.browser.esm.js";
 const _excluded = ["center", "classes", "className"];
@@ -118,7 +117,7 @@ const TouchRippleRipple = styled(Ripple, {
   theme
 }) => theme.transitions.easing.easeInOut);
 const TouchRipple = /* @__PURE__ */ React.forwardRef(function TouchRipple2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiTouchRipple"
   });
@@ -137,9 +136,16 @@ const TouchRipple = /* @__PURE__ */ React.forwardRef(function TouchRipple2(inPro
     }
   }, [ripples]);
   const ignoringMouseDown = React.useRef(false);
-  const startTimer = useTimeout();
+  const startTimer = React.useRef(0);
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (startTimer.current) {
+        clearTimeout(startTimer.current);
+      }
+    };
+  }, []);
   const startCommit = React.useCallback((params) => {
     const {
       pulsate: pulsate2,
@@ -223,12 +229,12 @@ const TouchRipple = /* @__PURE__ */ React.forwardRef(function TouchRipple2(inPro
             cb
           });
         };
-        startTimer.start(DELAY_RIPPLE, () => {
+        startTimer.current = setTimeout(() => {
           if (startTimerCommit.current) {
             startTimerCommit.current();
             startTimerCommit.current = null;
           }
-        });
+        }, DELAY_RIPPLE);
       }
     } else {
       startCommit({
@@ -239,18 +245,18 @@ const TouchRipple = /* @__PURE__ */ React.forwardRef(function TouchRipple2(inPro
         cb
       });
     }
-  }, [centerProp, startCommit, startTimer]);
+  }, [centerProp, startCommit]);
   const pulsate = React.useCallback(() => {
     start({}, {
       pulsate: true
     });
   }, [start]);
   const stop = React.useCallback((event, cb) => {
-    startTimer.clear();
+    clearTimeout(startTimer.current);
     if ((event == null ? void 0 : event.type) === "touchend" && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
-      startTimer.start(0, () => {
+      startTimer.current = setTimeout(() => {
         stop(event, cb);
       });
       return;
@@ -263,7 +269,7 @@ const TouchRipple = /* @__PURE__ */ React.forwardRef(function TouchRipple2(inPro
       return oldRipples;
     });
     rippleCallback.current = cb;
-  }, [startTimer]);
+  }, []);
   React.useImperativeHandle(ref, () => ({
     pulsate,
     start,
@@ -288,6 +294,7 @@ process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
   center: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
    */
   classes: PropTypes.object,
   /**

package/dist/node_modules/@mui/material/ButtonBase/buttonBaseClasses.js

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

package/dist/node_modules/@mui/material/ButtonBase/touchRippleClasses.js

@@ -1,4 +1,4 @@
-import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
 const touchRippleClasses = generateUtilityClasses("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]);
 export {
   touchRippleClasses as default

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

@@ -4,12 +4,12 @@ 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 { getCardUtilityClass } from "./cardClasses.js";
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
-import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
 import Paper from "../Paper/Paper.js";
-import chainPropTypes from "../node_modules/@mui/utils/esm/chainPropTypes/chainPropTypes.js";
+import chainPropTypes from "../../utils/chainPropTypes/chainPropTypes.js";
 const _excluded = ["className", "raised"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -30,7 +30,7 @@ const CardRoot = styled(Paper, {
   };
 });
 const Card = /* @__PURE__ */ React.forwardRef(function Card2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiCard"
   });
@@ -50,10 +50,10 @@ const Card = /* @__PURE__ */ React.forwardRef(function Card2(inProps, ref) {
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Card.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */

package/dist/node_modules/@mui/material/Card/cardClasses.js

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

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

@@ -3,19 +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 { alpha as alpha_1 } from "../../system/colorManipulator.js";
 import SwitchBase from "../internal/SwitchBase.js";
 import CheckBoxOutlineBlankIcon from "../internal/svg-icons/CheckBoxOutlineBlank.js";
 import CheckBoxIcon from "../internal/svg-icons/CheckBox.js";
 import IndeterminateCheckBoxIcon from "../internal/svg-icons/IndeterminateCheckBox.js";
-import styled from "../styles/styled.js";
+import useThemeProps from "../styles/useThemeProps.js";
+import styled, { rootShouldForwardProp } from "../styles/styled.js";
 import checkboxClasses, { getCheckboxUtilityClass } from "./checkboxClasses.js";
 import { jsx } from "react/jsx-runtime";
-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 rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
-import refType from "../node_modules/@mui/utils/esm/refType/refType.js";
+import capitalize from "../../utils/capitalize/capitalize.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { alpha } from "../../system/esm/colorManipulator.js";
+import refType from "../../utils/refType/refType.js";
 const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -38,7 +37,7 @@ const CheckboxRoot = styled(SwitchBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`]];
+    return [styles.root, ownerState.indeterminate && styles.indeterminate, ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
   theme,
@@ -47,7 +46,7 @@ const CheckboxRoot = styled(SwitchBase, {
   color: (theme.vars || theme).palette.text.secondary
 }, !ownerState.disableRipple && {
   "&:hover": {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === "default" ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha_1(ownerState.color === "default" ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+    backgroundColor: theme.vars ? `rgba(${ownerState.color === "default" ? theme.vars.palette.action.activeChannel : theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(ownerState.color === "default" ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
     // Reset on touch devices, it doesn't add specificity
     "@media (hover: none)": {
       backgroundColor: "transparent"
@@ -66,7 +65,7 @@ const defaultIcon = /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, {});
 const defaultIndeterminateIcon = /* @__PURE__ */ jsx(IndeterminateCheckBoxIcon, {});
 const Checkbox = /* @__PURE__ */ React.forwardRef(function Checkbox2(inProps, ref) {
   var _icon$props$fontSize, _indeterminateIcon$pr;
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiCheckbox"
   });
@@ -107,10 +106,10 @@ const Checkbox = /* @__PURE__ */ React.forwardRef(function Checkbox2(inProps, re
   }));
 });
 process.env.NODE_ENV !== "production" ? Checkbox.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * If `true`, the component is checked.
    */
@@ -131,7 +130,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.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/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),

package/dist/node_modules/@mui/material/Checkbox/checkboxClasses.js

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

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

@@ -3,17 +3,17 @@ 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 { alpha as alpha_1 } from "../../system/colorManipulator.js";
 import CancelIcon from "../internal/svg-icons/Cancel.js";
+import useThemeProps from "../styles/useThemeProps.js";
 import styled from "../styles/styled.js";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
-import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
+import useForkRef from "../../utils/useForkRef/useForkRef.js";
 import ButtonBase from "../ButtonBase/ButtonBase.js";
-import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
-import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
-import unsupportedProp from "../node_modules/@mui/utils/esm/unsupportedProp/unsupportedProp.js";
+import capitalize from "../../utils/capitalize/capitalize.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { alpha } from "../../system/esm/colorManipulator.js";
+import unsupportedProp from "../../utils/unsupportedProp/unsupportedProp.js";
 const _excluded = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -90,8 +90,6 @@ const ChipRoot = styled("div", {
     borderRadius: 32 / 2,
     whiteSpace: "nowrap",
     transition: theme.transitions.create(["background-color", "box-shadow"]),
-    // reset cursor explicitly in case ButtonBase is used
-    cursor: "unset",
     // We disable the focus ring for mouse, touch and keyboard users.
     outline: 0,
     textDecoration: "none",
@@ -142,19 +140,19 @@ const ChipRoot = styled("div", {
     })),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: "transparent",
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha_1(theme.palette.text.primary, 0.26),
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
       cursor: "pointer",
       margin: "0 5px 0 -6px",
       "&:hover": {
-        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha_1(theme.palette.text.primary, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
       }
     }, ownerState.size === "small" && {
       fontSize: 16,
       marginRight: 4,
       marginLeft: -4
     }, ownerState.color !== "default" && {
-      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha_1(theme.palette[ownerState.color].contrastText, 0.7),
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
       "&:hover, &:active": {
         color: (theme.vars || theme).palette[ownerState.color].contrastText
       }
@@ -166,7 +164,7 @@ const ChipRoot = styled("div", {
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha_1(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   }, ownerState.onDelete && ownerState.color !== "default" && {
     [`&.${chipClasses.focusVisible}`]: {
@@ -181,10 +179,10 @@ const ChipRoot = styled("div", {
   WebkitTapHighlightColor: "transparent",
   cursor: "pointer",
   "&:hover": {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha_1(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha_1(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   },
   "&:active": {
     boxShadow: (theme.vars || theme).shadows[1]
@@ -225,15 +223,15 @@ const ChipRoot = styled("div", {
   }
 }, ownerState.variant === "outlined" && ownerState.color !== "default" && {
   color: (theme.vars || theme).palette[ownerState.color].main,
-  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha_1(theme.palette[ownerState.color].main, 0.7)}`,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
   [`&.${chipClasses.clickable}:hover`]: {
-    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)
+    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)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha_1(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
   },
   [`& .${chipClasses.deleteIcon}`]: {
-    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha_1(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
     "&:hover, &:active": {
       color: (theme.vars || theme).palette[ownerState.color].main
     }
@@ -259,21 +257,15 @@ const ChipLabel = styled("span", {
   paddingLeft: 12,
   paddingRight: 12,
   whiteSpace: "nowrap"
-}, ownerState.variant === "outlined" && {
-  paddingLeft: 11,
-  paddingRight: 11
 }, ownerState.size === "small" && {
   paddingLeft: 8,
   paddingRight: 8
-}, ownerState.size === "small" && ownerState.variant === "outlined" && {
-  paddingLeft: 7,
-  paddingRight: 7
 }));
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === "Backspace" || keyboardEvent.key === "Delete";
 }
 const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiChip"
   });
@@ -390,10 +382,10 @@ const Chip = /* @__PURE__ */ React.forwardRef(function Chip2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Chip.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The Avatar element to display.
    */
@@ -423,7 +415,7 @@ process.env.NODE_ENV !== "production" ? Chip.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/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'default'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),

package/dist/node_modules/@mui/material/Chip/chipClasses.js

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

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

@@ -3,14 +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 useThemeProps from "../styles/useThemeProps.js";
 import styled from "../styles/styled.js";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.js";
 import { jsx } from "react/jsx-runtime";
-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 capitalize from "../../utils/capitalize/capitalize.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
 import { css, keyframes } from "../../../@emotion/react/dist/emotion-react.browser.esm.js";
-import chainPropTypes from "../node_modules/@mui/utils/esm/chainPropTypes/chainPropTypes.js";
+import chainPropTypes from "../../utils/chainPropTypes/chainPropTypes.js";
 const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 let _ = (t) => t, _t, _t2, _t3, _t4;
 const SIZE = 44;
@@ -111,7 +111,7 @@ const CircularProgressCircle = styled("circle", {
       animation: ${0} 1.4s ease-in-out infinite;
     `), circularDashKeyframe));
 const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgress2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiCircularProgress"
   });
@@ -172,10 +172,10 @@ const CircularProgress = /* @__PURE__ */ React.forwardRef(function CircularProgr
   }));
 });
 process.env.NODE_ENV !== "production" ? CircularProgress.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Override or extend the styles applied to the component.
    */
@@ -187,7 +187,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.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/#custom-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? CircularProgress.propTypes = {
   /**
    * The size of the component.
    * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * If using a string, you need to provide the CSS unit, e.g '3rem'.
    * @default 40
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/dist/node_modules/@mui/material/CircularProgress/circularProgressClasses.js

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

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

@@ -4,17 +4,16 @@ import * as React from "react";
 import { clsx } from "../../../clsx/dist/clsx.js";
 import PropTypes from "../../../prop-types/index.js";
 import styled from "../styles/styled.js";
+import useThemeProps from "../styles/useThemeProps.js";
 import { duration } from "../styles/createTransitions.js";
 import { getTransitionProps } from "../transitions/utils.js";
 import useTheme from "../styles/useTheme.js";
 import { getCollapseUtilityClass } from "./collapseClasses.js";
 import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
 import Transition from "../../../react-transition-group/esm/Transition.js";
-import useTimeout from "../node_modules/@mui/utils/esm/useTimeout/useTimeout.js";
-import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
-import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
-import elementTypeAcceptingRef from "../node_modules/@mui/utils/esm/elementTypeAcceptingRef/elementTypeAcceptingRef.js";
+import useForkRef from "../../utils/useForkRef/useForkRef.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import elementTypeAcceptingRef from "../../utils/elementTypeAcceptingRef/elementTypeAcceptingRef.js";
 const _excluded = ["addEndListener", "children", "className", "collapsedSize", "component", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "orientation", "style", "timeout", "TransitionComponent"];
 const useUtilityClasses = (ownerState) => {
   const {
@@ -85,7 +84,7 @@ const CollapseWrapperInner = styled("div", {
   height: "100%"
 }));
 const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, ref) {
-  const props = useDefaultProps({
+  const props = useThemeProps({
     props: inProps,
     name: "MuiCollapse"
   });
@@ -115,12 +114,17 @@ const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, re
   });
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
-  const timer = useTimeout();
+  const timer = React.useRef();
   const wrapperRef = React.useRef(null);
   const autoTransitionDuration = React.useRef();
   const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === "horizontal";
   const size = isHorizontal ? "width" : "height";
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(ref, nodeRef);
   const normalizedTransitionCallback = (callback) => (maybeIsAppearing) => {
@@ -211,7 +215,7 @@ const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, re
   });
   const handleAddEndListener = (next) => {
     if (timeout === "auto") {
-      timer.start(autoTransitionDuration.current || 0, next);
+      timer.current = setTimeout(next, autoTransitionDuration.current || 0);
     }
     if (addEndListener) {
       addEndListener(nodeRef.current, next);
@@ -238,13 +242,11 @@ const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, re
       style: _extends({
         [isHorizontal ? "minWidth" : "minHeight"]: collapsedSize
       }, style),
-      ref: handleRef
-    }, childProps, {
-      // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
-      // that might have been forwarded from the Transition component.
       ownerState: _extends({}, ownerState, {
         state
       }),
+      ref: handleRef
+    }, childProps, {
       children: /* @__PURE__ */ jsx(CollapseWrapper, {
         ownerState: _extends({}, ownerState, {
           state
@@ -263,10 +265,10 @@ const Collapse = /* @__PURE__ */ React.forwardRef(function Collapse2(inProps, re
   }));
 });
 process.env.NODE_ENV !== "production" ? Collapse.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Add a custom transition end trigger. Called with the transitioning DOM
    * node and a done callback. Allows for more fine grained transition end