@mui/material 5.11.5 → 5.11.7

package/Tooltip/Tooltip.js

@@ -193,6 +193,10 @@ const TooltipArrow = styled('span', {
 }));
 let hystersisOpen = false;
 let hystersisTimer = null;
+let cursorPosition = {
+  x: 0,
+  y: 0
+};
 export function testReset() {
   hystersisOpen = false;
   clearTimeout(hystersisTimer);
@@ -434,17 +438,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (!title && title !== 0) {
     open = false;
   }
-  const positionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
   const popperRef = React.useRef();
   const handleMouseMove = event => {
     const childrenProps = children.props;
     if (childrenProps.onMouseMove) {
       childrenProps.onMouseMove(event);
     }
-    positionRef.current = {
+    cursorPosition = {
       x: event.clientX,
       y: event.clientY
     };
@@ -550,10 +550,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       placement: placement,
       anchorEl: followCursor ? {
         getBoundingClientRect: () => ({
-          top: positionRef.current.y,
-          left: positionRef.current.x,
-          right: positionRef.current.x,
-          bottom: positionRef.current.y,
+          top: cursorPosition.y,
+          left: cursorPosition.x,
+          right: cursorPosition.x,
+          bottom: cursorPosition.y,
           width: 0,
           height: 0
         })

package/index.js

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

package/internal/SwitchBase.d.ts

@@ -19,9 +19,13 @@ export interface SwitchBaseProps
    * The default checked state. Use when the component is not controlled.
    */
   defaultChecked?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
   disabled?: boolean;
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple?: boolean;
   /**
@@ -65,6 +69,7 @@ export interface SwitchBaseProps
   readOnly?: boolean;
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required?: boolean;
   tabIndex?: number;

package/internal/SwitchBase.js

@@ -72,7 +72,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       onChange,
       onFocus,
       readOnly,
-      required,
+      required = false,
       tabIndex,
       type,
       value

package/legacy/Button/Button.js

@@ -111,8 +111,6 @@ var ButtonRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
     border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
-  }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
   }, ownerState.variant === 'contained' && {
     color: (theme.vars || theme).palette.action.disabled,
     boxShadow: (theme.vars || theme).shadows[0],

package/legacy/Checkbox/Checkbox.js

@@ -141,10 +141,12 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   defaultChecked: PropTypes.bool,
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -186,6 +188,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/legacy/Radio/Radio.js

@@ -154,6 +154,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -187,6 +188,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/legacy/Slider/Slider.js

@@ -6,15 +6,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+import { useSlider } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
-import SliderValueLabelComponent from './SliderValueLabel';
-import sliderClasses from './sliderClasses';
+import SliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var valueToPercent = function valueToPercent(value, min, max) {
@@ -260,7 +260,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-var SliderValueLabel = styled(SliderValueLabelComponent, {
+var StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -318,7 +318,7 @@ var SliderValueLabel = styled(SliderValueLabelComponent, {
     padding: '0.25rem 0.5rem'
   });
 });
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -328,7 +328,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
    */
   children: PropTypes.node
 } : void 0;
-export { SliderValueLabel };
+export { StyledSliderValueLabel as SliderValueLabel };
 var SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -545,7 +545,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var RailSlot = (_ref10 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref10 : SliderRail;
   var TrackSlot = (_ref11 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref11 : SliderTrack;
   var ThumbSlot = (_ref12 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref12 : SliderThumb;
-  var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : SliderValueLabel;
+  var ValueLabelSlot = (_ref13 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref13 : StyledSliderValueLabel;
   var MarkSlot = (_ref14 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref14 : SliderMark;
   var MarkLabelSlot = (_ref15 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref15 : SliderMarkLabel;
   var InputSlot = (_ref16 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref16 : 'input';

package/legacy/Slider/SliderValueLabel.js

@@ -22,6 +22,9 @@ export default function SliderValueLabel(props) {
     className = props.className,
     value = props.value;
   var classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
   return /*#__PURE__*/React.cloneElement(children, {
     className: clsx(children.props.className)
   }, /*#__PURE__*/_jsxs(React.Fragment, {

package/legacy/Slider/index.js

@@ -1,3 +1,4 @@
 export { default } from './Slider';
 export * from './Slider';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderClasses } from './sliderClasses';
+export * from './sliderClasses';

package/legacy/Slider/sliderClasses.js

@@ -1,5 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
-var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+import generateUtilityClass from '../generateUtilityClass';
+export function getSliderUtilityClass(slot) {
+  return generateUtilityClass('MuiSlider', slot);
+}
+var sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
 export default sliderClasses;

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -134,6 +134,8 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     hideBackdrop = props.hideBackdrop,
     _props$hysteresis = props.hysteresis,
     hysteresis = _props$hysteresis === void 0 ? 0.52 : _props$hysteresis,
+    _props$allowSwipeInCh = props.allowSwipeInChildren,
+    allowSwipeInChildren = _props$allowSwipeInCh === void 0 ? false : _props$allowSwipeInCh,
     _props$minFlingVeloci = props.minFlingVelocity,
     minFlingVelocity = _props$minFlingVeloci === void 0 ? 450 : _props$minFlingVeloci,
     _props$ModalProps = props.ModalProps;
@@ -153,7 +155,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     transitionDuration = _props$transitionDura === void 0 ? transitionDurationDefault : _props$transitionDura,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'temporary' : _props$variant,
-    other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
+    other = _objectWithoutProperties(props, ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"]);
   var _React$useState = React.useState(false),
     maybeSwiping = _React$useState[0],
     setMaybeSwiping = _React$useState[1];
@@ -261,6 +263,31 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       });
     }
   });
+  var startMaybeSwiping = function startMaybeSwiping() {
+    var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (!maybeSwiping) {
+      // on Safari Mobile, if you want to be able to have the 'click' event fired on child elements, nothing in the DOM can be changed.
+      // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
+      // so do this change on first touchmove instead of touchstart
+      if (force || !(disableDiscovery && allowSwipeInChildren)) {
+        flushSync(function () {
+          setMaybeSwiping(true);
+        });
+      }
+      var horizontalSwipe = isHorizontal(anchor);
+      if (!open && paperRef.current) {
+        // The ref may be null when a parent component updates while swiping.
+        setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
+          changeTransition: false
+        });
+      }
+      swipeInstance.current.velocity = 0;
+      swipeInstance.current.lastTime = null;
+      swipeInstance.current.lastTranslate = null;
+      swipeInstance.current.paperHit = false;
+      touchDetected.current = true;
+    }
+  };
   var handleBodyTouchMove = useEventCallback(function (nativeEvent) {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -271,6 +298,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     var anchorRtl = getAnchor(theme, anchor);
     var horizontalSwipe = isHorizontal(anchor);
     var currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
@@ -381,7 +409,12 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     var currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     var currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
     if (!open) {
-      if (disableSwipeToOpen || nativeEvent.target !== swipeAreaRef.current) {
+      var _paperRef$current;
+      // logic for if swipe should be ignored:
+      // if disableSwipeToOpen
+      // if target != swipeArea, and target is not a child of paper ref
+      // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
+      if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
         return;
       }
       if (horizontalSwipe) {
@@ -396,20 +429,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    flushSync(function () {
-      setMaybeSwiping(true);
-    });
-    if (!open && paperRef.current) {
-      // The ref may be null when a parent component updates while swiping.
-      setPosition(getMaxTranslate(horizontalSwipe, paperRef.current) + (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL), {
-        changeTransition: false
-      });
-    }
-    swipeInstance.current.velocity = 0;
-    swipeInstance.current.lastTime = null;
-    swipeInstance.current.lastTranslate = null;
-    swipeInstance.current.paperHit = false;
-    touchDetected.current = true;
+    startMaybeSwiping();
   });
   React.useEffect(function () {
     if (variant === 'temporary') {
@@ -459,7 +479,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {
         style: _extends({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -481,6 +501,19 @@ process.env.NODE_ENV !== "production" ? SwipeableDrawer.propTypes /* remove-prop
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
+  /**
+   * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
+   * This can be useful in scenarios where the drawer is partially visible.
+   * You can customize it further with a callback that determines which children the user can drag over to open the drawer
+   * (for example, to ignore other elements that handle touch move events, like sliders).
+   *
+   * @param {TouchEvent} event The 'touchstart' event
+   * @param {HTMLDivElement} swipeArea The swipe area element
+   * @param {HTMLDivElement} paper The drawer's paper element
+   *
+   * @default false
+   */
+  allowSwipeInChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   /**
    * @ignore
    */

package/legacy/Switch/Switch.js

@@ -251,6 +251,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -287,6 +288,7 @@ process.env.NODE_ENV !== "production" ? Switch.propTypes /* remove-proptypes */
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/legacy/TabScrollButton/TabScrollButton.js

@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
   direction: PropTypes.oneOf(['left', 'right']).isRequired,
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**

package/legacy/Tooltip/Tooltip.js

@@ -185,6 +185,10 @@ var TooltipArrow = styled('span', {
 });
 var hystersisOpen = false;
 var hystersisTimer = null;
+var cursorPosition = {
+  x: 0,
+  y: 0
+};
 export function testReset() {
   hystersisOpen = false;
   clearTimeout(hystersisTimer);
@@ -447,17 +451,13 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   if (!title && title !== 0) {
     open = false;
   }
-  var positionRef = React.useRef({
-    x: 0,
-    y: 0
-  });
   var popperRef = React.useRef();
   var handleMouseMove = function handleMouseMove(event) {
     var childrenProps = children.props;
     if (childrenProps.onMouseMove) {
       childrenProps.onMouseMove(event);
     }
-    positionRef.current = {
+    cursorPosition = {
       x: event.clientX,
       y: event.clientY
     };
@@ -564,10 +564,10 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       anchorEl: followCursor ? {
         getBoundingClientRect: function getBoundingClientRect() {
           return {
-            top: positionRef.current.y,
-            left: positionRef.current.x,
-            right: positionRef.current.x,
-            bottom: positionRef.current.y,
+            top: cursorPosition.y,
+            left: cursorPosition.x,
+            right: cursorPosition.x,
+            bottom: cursorPosition.y,
             width: 0,
             height: 0
           };

package/legacy/index.js

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

package/legacy/internal/SwitchBase.js

@@ -72,7 +72,8 @@ var SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {
     onChange = props.onChange,
     onFocus = props.onFocus,
     readOnly = props.readOnly,
-    required = props.required,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
     tabIndex = props.tabIndex,
     type = props.type,
     value = props.value,

package/legacy/styles/CssVarsProvider.js

@@ -5,7 +5,9 @@ import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 var shouldSkipGeneratingVar = function shouldSkipGeneratingVar(keys) {
   var _keys$;
-  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 };
 var defaultTheme = experimental_extendTheme();
 var _createCssVarsProvide = createCssVarsProvider({

package/modern/Button/Button.js

@@ -111,8 +111,6 @@ const ButtonRoot = styled(ButtonBase, {
     color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
     border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-  }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
   }, ownerState.variant === 'contained' && {
     color: (theme.vars || theme).palette.action.disabled,
     boxShadow: (theme.vars || theme).shadows[0],

package/modern/Checkbox/Checkbox.js

@@ -139,10 +139,12 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   defaultChecked: PropTypes.bool,
   /**
    * If `true`, the component is disabled.
+   * @default false
    */
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -184,6 +186,7 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes /* remove-proptypes *
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/modern/Radio/Radio.js

@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   disabled: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
+   * @default false
    */
   disableRipple: PropTypes.bool,
   /**
@@ -188,6 +189,7 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
   onChange: PropTypes.func,
   /**
    * If `true`, the `input` element is required.
+   * @default false
    */
   required: PropTypes.bool,
   /**

package/modern/Slider/Slider.js

@@ -6,15 +6,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+import { useSlider } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
-import SliderValueLabelComponent from './SliderValueLabel';
-import sliderClasses from './sliderClasses';
+import SliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-const SliderValueLabel = styled(SliderValueLabelComponent, {
+const StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -319,7 +319,7 @@ const SliderValueLabel = styled(SliderValueLabelComponent, {
   fontSize: theme.typography.pxToRem(12),
   padding: '0.25rem 0.5rem'
 }));
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -329,7 +329,7 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
    */
   children: PropTypes.node
 } : void 0;
-export { SliderValueLabel };
+export { StyledSliderValueLabel as SliderValueLabel };
 const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
@@ -522,7 +522,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
   const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
   const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
-  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
+  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? StyledSliderValueLabel;
   const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
   const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
   const InputSlot = slots?.input ?? components.Input ?? 'input';

package/modern/Slider/SliderValueLabel.js

@@ -26,6 +26,9 @@ export default function SliderValueLabel(props) {
     value
   } = props;
   const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
   return /*#__PURE__*/React.cloneElement(children, {
     className: clsx(children.props.className)
   }, /*#__PURE__*/_jsxs(React.Fragment, {

package/modern/Slider/index.js

@@ -1,3 +1,4 @@
 export { default } from './Slider';
 export * from './Slider';
-export { default as sliderClasses } from './sliderClasses';
+export { default as sliderClasses } from './sliderClasses';
+export * from './sliderClasses';

package/modern/Slider/sliderClasses.js

@@ -1,5 +1,7 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
-const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+import generateUtilityClass from '../generateUtilityClass';
+export function getSliderUtilityClass(slot) {
+  return generateUtilityClass('MuiSlider', slot);
+}
+const sliderClasses = generateUtilityClasses('MuiSlider', ['root', 'active', 'colorPrimary', 'colorSecondary', 'disabled', 'dragging', 'focusVisible', 'mark', 'markActive', 'marked', 'markLabel', 'markLabelActive', 'rail', 'sizeSmall', 'thumb', 'thumbColorPrimary', 'thumbColorSecondary', 'track', 'trackInverted', 'trackFalse', 'thumbSizeSmall', 'valueLabel', 'valueLabelOpen', 'valueLabelCircle', 'valueLabelLabel', 'vertical']);
 export default sliderClasses;