@mui/material 5.11.13 → 5.11.15

package/modern/Breadcrumbs/BreadcrumbCollapsed.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { emphasize } from '@mui/system';
@@ -42,19 +44,40 @@ const BreadcrumbCollapsedIcon = styled(MoreHorizIcon)({
  * @ignore - internal component.
  */
 function BreadcrumbCollapsed(props) {
+  const {
+      slots = {},
+      slotProps = {}
+    } = props,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
     children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, _extends({
       focusRipple: true
-    }, props, {
+    }, otherProps, {
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
+      children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, _extends({
+        as: slots.CollapsedIcon,
         ownerState: ownerState
-      })
+      }, slotProps.collapsedIcon))
     }))
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
+  /**
+   * The props used for the CollapsedIcon slot.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the BreadcumbCollapsed.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Breadcrumbs/Breadcrumbs.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { integerPropType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Typography from '../Typography';
@@ -80,6 +80,8 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
       children,
       className,
       component = 'nav',
+      slots = {},
+      slotProps = {},
       expandText = 'Show path',
       itemsAfterCollapse = 1,
       itemsBeforeCollapse = 1,
@@ -98,6 +100,11 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     separator
   });
   const classes = useUtilityClasses(ownerState);
+  const collapsedIconSlotProps = useSlotProps({
+    elementType: slots.CollapsedIcon,
+    externalSlotProps: slotProps.collapsedIcon,
+    ownerState
+  });
   const listRef = React.useRef(null);
   const renderItemsBeforeAndAfter = allItems => {
     const handleClickExpand = () => {
@@ -123,6 +130,12 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     }
     return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/_jsx(BreadcrumbCollapsed, {
       "aria-label": expandText,
+      slots: {
+        CollapsedIcon: slots.CollapsedIcon
+      },
+      slotProps: {
+        collapsedIcon: collapsedIconSlotProps
+      },
       onClick: handleClickExpand
     }, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
@@ -203,6 +216,21 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
    * @default '/'
    */
   separator: PropTypes.node,
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    collapsedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    CollapsedIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Chip/Chip.js

@@ -77,7 +77,6 @@ const ChipRoot = styled('div', {
   theme,
   ownerState
 }) => {
-  const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends({
     maxWidth: '100%',
@@ -144,12 +143,12 @@ const ChipRoot = styled('div', {
     })),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+      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(deleteIconColor, 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,

package/modern/ListItemButton/ListItemButton.js

@@ -145,8 +145,10 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     value: childContext,
     children: /*#__PURE__*/_jsx(ListItemButtonRoot, _extends({
       ref: handleRef,
-      href: other.href || other.to,
-      component: (other.href || other.to) && component === 'div' ? 'a' : component,
+      href: other.href || other.to
+      // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+      ,
+      component: (other.href || other.to) && component === 'div' ? 'button' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: clsx(classes.root, className)

package/modern/Stack/Stack.js

@@ -45,6 +45,16 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: PropTypes.bool
 } : void 0;
 export default Stack;

package/modern/StepButton/StepButton.js

@@ -65,7 +65,8 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
-    disabled
+    disabled,
+    active
   } = React.useContext(StepContext);
   const {
     orientation
@@ -89,7 +90,8 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     },
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
+    ownerState: ownerState,
+    "aria-current": active ? 'step' : undefined
   }, other, {
     children: child
   }));

package/modern/TabScrollButton/TabScrollButton.js

@@ -1,12 +1,11 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _KeyboardArrowLeft, _KeyboardArrowRight;
-const _excluded = ["className", "direction", "orientation", "disabled"];
+const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 /* eslint-disable jsx-a11y/aria-role */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
@@ -58,6 +57,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
   });
   const {
       className,
+      slots = {},
+      slotProps = {},
       direction
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -67,6 +68,24 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     isRtl
   }, props);
   const classes = useUtilityClasses(ownerState);
+  const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
+  const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
+  const startButtonIconProps = useSlotProps({
+    elementType: StartButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState
+  });
+  const endButtonIconProps = useSlotProps({
+    elementType: EndButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    additionalProps: {
+      fontSize: 'small'
+    },
+    ownerState
+  });
   return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
     component: "div",
     className: clsx(classes.root, className),
@@ -75,11 +94,7 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ownerState: ownerState,
     tabIndex: null
   }, other, {
-    children: direction === 'left' ? _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {
-      fontSize: "small"
-    })) : _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {
-      fontSize: "small"
-    }))
+    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
   }));
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
@@ -112,6 +127,23 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
    * The component orientation (layout flow direction).
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Tabs/Tabs.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
+const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@mui/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
@@ -226,6 +226,8 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       ScrollButtonComponent = TabScrollButton,
       scrollButtons = 'auto',
       selectionFollowsFocus,
+      slots = {},
+      slotProps = {},
       TabIndicatorProps = {},
       TabScrollButtonProps = {},
       textColor = 'primary',
@@ -259,6 +261,16 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     scrollButtonsHideMobile: !allowScrollButtonsMobile
   });
   const classes = useUtilityClasses(ownerState);
+  const startScrollButtonIconProps = useSlotProps({
+    elementType: slots.StartScrollButtonIcon,
+    externalSlotProps: slotProps.startScrollButtonIcon,
+    ownerState
+  });
+  const endScrollButtonIconProps = useSlotProps({
+    elementType: slots.EndScrollButtonIcon,
+    externalSlotProps: slotProps.endScrollButtonIcon,
+    ownerState
+  });
   if (process.env.NODE_ENV !== 'production') {
     if (centered && scrollable) {
       console.error('MUI: You can not use the `centered={true}` and `variant="scrollable"` properties ' + 'at the same time on a `Tabs` component.');
@@ -423,6 +435,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     const scrollButtonsActive = displayScroll.start || displayScroll.end;
     const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);
     conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        StartScrollButtonIcon: slots.StartScrollButtonIcon
+      },
+      slotProps: {
+        startScrollButtonIcon: startScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'right' : 'left',
       onClick: handleStartScrollClick,
@@ -431,6 +449,12 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       className: clsx(classes.scrollButtons, TabScrollButtonProps.className)
     })) : null;
     conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({
+      slots: {
+        EndScrollButtonIcon: slots.EndScrollButtonIcon
+      },
+      slotProps: {
+        endScrollButtonIcon: endScrollButtonIconProps
+      },
       orientation: orientation,
       direction: isRtl ? 'left' : 'right',
       onClick: handleEndScrollClick,
@@ -732,6 +756,23 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
    * changes on activation.
    */
   selectionFollowsFocus: PropTypes.bool,
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    EndScrollButtonIcon: PropTypes.elementType,
+    StartScrollButtonIcon: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.13
+ * @mui/material v5.11.15
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/locale/index.js

@@ -2211,6 +2211,79 @@ export const koKR = {
     }
   }
 };
+export const kuCKB = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'ڕێچکە پیشان بدە'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'چوونە یەکەم پەڕە';
+          }
+          if (type === 'last') {
+            return 'چوونە کۆتا پەڕە';
+          }
+          if (type === 'next') {
+            return 'چوونە پەڕەی دواتر';
+          }
+          // if (type === 'previous') {
+          return 'گەڕانەوە بۆ پەڕەی پێشوو';
+        },
+        labelRowsPerPage: 'ژمارەی ڕیزەکان لە هەر پەڕەیەک:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} لە ${count !== -1 ? count : ` زیاترە لە${to}`}`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ${value !== 1 ? 'ئەستێرەکان' : 'ئەستێرە'}`,
+        emptyLabelText: 'خاڵیە'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'سڕینەوە',
+        closeText: 'داخستن',
+        loadingText: 'لە بارکردندایە...',
+        noOptionsText: 'هیچ بژاردەیەک نیە',
+        openText: 'کردنەوە'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'داخستن'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'گەڕان لە پەڕەکان',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : 'چوون بۆ '} پەڕەی ${page}`;
+          }
+          if (type === 'first') {
+            return 'چوونە یەکەم پەڕە';
+          }
+          if (type === 'last') {
+            return 'چوونە کۆتا پەڕە';
+          }
+          if (type === 'next') {
+            return 'چوونە پەڕەی دواتر';
+          }
+          // if (type === 'previous') {
+          return 'گەڕانەوە بۆ پەڕەی پێشوو';
+        }
+      }
+    }
+  }
+};
 export const kuLatn = {
   components: {
     MuiBreadcrumbs: {

package/node/Autocomplete/Autocomplete.js

@@ -656,6 +656,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
    * a different option or changes the character string in the input.
+   *
+   * When using `freeSolo` mode, the typed value will be the input value
+   * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
   autoSelect: _propTypes.default.bool,

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,6 +14,7 @@ var _styled = _interopRequireDefault(require("../styles/styled"));
 var _MoreHoriz = _interopRequireDefault(require("../internal/svg-icons/MoreHoriz"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
@@ -51,19 +53,40 @@ const BreadcrumbCollapsedIcon = (0, _styled.default)(_MoreHoriz.default)({
  * @ignore - internal component.
  */
 function BreadcrumbCollapsed(props) {
+  const {
+      slots = {},
+      slotProps = {}
+    } = props,
+    otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedButton, (0, _extends2.default)({
       focusRipple: true
-    }, props, {
+    }, otherProps, {
       ownerState: ownerState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedIcon, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedIcon, (0, _extends2.default)({
+        as: slots.CollapsedIcon,
         ownerState: ownerState
-      })
+      }, slotProps.collapsedIcon))
     }))
   });
 }
 process.env.NODE_ENV !== "production" ? BreadcrumbCollapsed.propTypes = {
+  /**
+   * The props used for the CollapsedIcon slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    collapsedIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside the BreadcumbCollapsed.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    CollapsedIcon: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Breadcrumbs/Breadcrumbs.js

@@ -19,7 +19,7 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _BreadcrumbCollapsed = _interopRequireDefault(require("./BreadcrumbCollapsed"));
 var _breadcrumbsClasses = _interopRequireWildcard(require("./breadcrumbsClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
+const _excluded = ["children", "className", "component", "slots", "slotProps", "expandText", "itemsAfterCollapse", "itemsBeforeCollapse", "maxItems", "separator"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -89,6 +89,8 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
       children,
       className,
       component = 'nav',
+      slots = {},
+      slotProps = {},
       expandText = 'Show path',
       itemsAfterCollapse = 1,
       itemsBeforeCollapse = 1,
@@ -107,6 +109,11 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     separator
   });
   const classes = useUtilityClasses(ownerState);
+  const collapsedIconSlotProps = (0, _base.useSlotProps)({
+    elementType: slots.CollapsedIcon,
+    externalSlotProps: slotProps.collapsedIcon,
+    ownerState
+  });
   const listRef = React.useRef(null);
   const renderItemsBeforeAndAfter = allItems => {
     const handleClickExpand = () => {
@@ -132,6 +139,12 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
     }
     return [...allItems.slice(0, itemsBeforeCollapse), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BreadcrumbCollapsed.default, {
       "aria-label": expandText,
+      slots: {
+        CollapsedIcon: slots.CollapsedIcon
+      },
+      slotProps: {
+        collapsedIcon: collapsedIconSlotProps
+      },
       onClick: handleClickExpand
     }, "ellipsis"), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
@@ -212,6 +225,21 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes /* remove-proptype
    * @default '/'
    */
   separator: _propTypes.default.node,
+  /**
+   * The props used for each slot inside the Breadcumb.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    collapsedIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside the Breadcumb.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    CollapsedIcon: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/Chip/Chip.js

@@ -85,7 +85,6 @@ const ChipRoot = (0, _styled.default)('div', {
   theme,
   ownerState
 }) => {
-  const deleteIconColor = (0, _system.alpha)(theme.palette.text.primary, 0.26);
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return (0, _extends2.default)({
     maxWidth: '100%',
@@ -152,12 +151,12 @@ const ChipRoot = (0, _styled.default)('div', {
     })),
     [`& .${_chipClasses.default.deleteIcon}`]: (0, _extends2.default)({
       WebkitTapHighlightColor: 'transparent',
-      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : (0, _system.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)` : (0, _system.alpha)(deleteIconColor, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _system.alpha)(theme.palette.text.primary, 0.4)
       }
     }, ownerState.size === 'small' && {
       fontSize: 16,

package/node/ListItemButton/ListItemButton.js

@@ -155,8 +155,10 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     value: childContext,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemButtonRoot, (0, _extends2.default)({
       ref: handleRef,
-      href: other.href || other.to,
-      component: (other.href || other.to) && component === 'div' ? 'a' : component,
+      href: other.href || other.to
+      // `ButtonBase` processes `href` or `to` if `component` is set to 'button'
+      ,
+      component: (other.href || other.to) && component === 'div' ? 'button' : component,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className)

package/node/Stack/Stack.js

@@ -52,7 +52,17 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
+   *
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
+   *
+   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
+   * @default false
+   */
+  useFlexGap: _propTypes.default.bool
 } : void 0;
 var _default = Stack;
 exports.default = _default;