@mui/material 5.11.4 → 5.11.6

package/SwipeableDrawer/SwipeableDrawer.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
+  _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 import * as React from 'react';
 import { flushSync } from 'react-dom';
 import PropTypes from 'prop-types';
@@ -133,6 +133,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       disableSwipeToOpen = iOS,
       hideBackdrop,
       hysteresis = 0.52,
+      allowSwipeInChildren = false,
       minFlingVelocity = 450,
       ModalProps: {
         BackdropProps
@@ -252,6 +253,30 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       });
     }
   });
+  const startMaybeSwiping = (force = 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(() => {
+          setMaybeSwiping(true);
+        });
+      }
+      const 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;
+    }
+  };
   const handleBodyTouchMove = useEventCallback(nativeEvent => {
     // the ref may be null when a parent component updates while swiping
     if (!paperRef.current || !touchDetected.current) {
@@ -262,6 +287,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     if (claimedSwipeInstance !== null && claimedSwipeInstance !== swipeInstance.current) {
       return;
     }
+    startMaybeSwiping(true);
     const anchorRtl = getAnchor(theme, anchor);
     const horizontalSwipe = isHorizontal(anchor);
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
@@ -372,7 +398,12 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
     const 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) {
@@ -387,20 +418,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     claimedSwipeInstance = null;
     swipeInstance.current.startX = currentX;
     swipeInstance.current.startY = currentY;
-    flushSync(() => {
-      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(() => {
     if (variant === 'temporary') {
@@ -448,7 +466,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       hideBackdrop: hideBackdrop,
       PaperProps: _extends({}, PaperProps, {
         style: _extends({
-          pointerEvents: variant === 'temporary' && !open ? 'none' : ''
+          pointerEvents: variant === 'temporary' && !open && !allowSwipeInChildren ? 'none' : ''
         }, PaperProps.style),
         ref: handleRef
       }),
@@ -470,6 +488,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/index.js

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

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/Slider/Slider.js

@@ -4,16 +4,25 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
+import { chainPropTypes } from '@mui/utils';
+import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
+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 SliderValueLabel from './SliderValueLabel';
+import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var valueToPercent = function valueToPercent(value, min, max) {
+  return (value - min) * 100 / (max - min);
+};
+function Identity(x) {
+  return x;
+}
 var SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
@@ -251,7 +260,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
   children: PropTypes.node
 } : void 0;
 export { SliderThumb };
-var SliderValueLabel = styled(SliderValueLabelUnstyled, {
+var StyledSliderValueLabel = styled(SliderValueLabel, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -309,7 +318,7 @@ var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     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"     |
@@ -319,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',
@@ -406,25 +415,47 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
   children: PropTypes.node
 } : void 0;
 export { SliderMarkLabel };
-var extendUtilityClasses = function extendUtilityClasses(ownerState) {
-  var color = ownerState.color,
-    size = ownerState.size,
-    _ownerState$classes = ownerState.classes,
-    classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
-  return _extends({}, classes, {
-    root: clsx(classes.root, getSliderUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))], size && [getSliderUtilityClass("size".concat(capitalize(size))), classes["size".concat(capitalize(size))]]),
-    thumb: clsx(classes.thumb, getSliderUtilityClass("thumbColor".concat(capitalize(color))), classes["thumbColor".concat(capitalize(color))], size && [getSliderUtilityClass("thumbSize".concat(capitalize(size))), classes["thumbSize".concat(capitalize(size))]])
-  });
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var disabled = ownerState.disabled,
+    dragging = ownerState.dragging,
+    marked = ownerState.marked,
+    orientation = ownerState.orientation,
+    track = ownerState.track,
+    classes = ownerState.classes,
+    color = ownerState.color,
+    size = ownerState.size;
+  var slots = {
+    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && "color".concat(capitalize(color)), size && "size".concat(capitalize(size))],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled', size && "thumbSize".concat(capitalize(size)), color && "thumbColor".concat(capitalize(color))],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible']
+  };
+  return composeClasses(slots, getSliderUtilityClass, classes);
+};
+var Forward = function Forward(_ref8) {
+  var children = _ref8.children;
+  return children;
 };
 var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref8, _slots$root, _ref9, _slots$rail, _ref10, _slots$track, _ref11, _slots$thumb, _ref12, _slots$valueLabel, _ref13, _slots$mark, _ref14, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+  var _ref9, _slots$root, _ref10, _slots$rail, _ref11, _slots$track, _ref12, _slots$thumb, _ref13, _slots$valueLabel, _ref14, _slots$mark, _ref15, _slots$markLabel, _ref16, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   var props = useThemeProps({
     props: inputProps,
     name: 'MuiSlider'
   });
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
-  var _props$component = props.component,
+  var ariaLabel = props['aria-label'],
+    ariaValuetext = props['aria-valuetext'],
+    ariaLabelledby = props['aria-labelledby'],
+    _props$component = props.component,
     component = _props$component === void 0 ? 'span' : _props$component,
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
@@ -432,26 +463,92 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
     _props$color = props.color,
     color = _props$color === void 0 ? 'primary' : _props$color,
+    classesProp = props.classes,
+    className = props.className,
+    _props$disableSwap = props.disableSwap,
+    disableSwap = _props$disableSwap === void 0 ? false : _props$disableSwap,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    getAriaLabel = props.getAriaLabel,
+    getAriaValueText = props.getAriaValueText,
+    _props$marks = props.marks,
+    marksProp = _props$marks === void 0 ? false : _props$marks,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    name = props.name,
+    onChange = props.onChange,
+    onChangeCommitted = props.onChangeCommitted,
+    _props$orientation = props.orientation,
+    orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
     _props$size = props.size,
     size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? Identity : _props$scale,
     slotProps = props.slotProps,
     slots = props.slots,
-    other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"]);
+    tabIndex = props.tabIndex,
+    _props$track = props.track,
+    track = _props$track === void 0 ? 'normal' : _props$track,
+    valueProp = props.value,
+    _props$valueLabelDisp = props.valueLabelDisplay,
+    valueLabelDisplay = _props$valueLabelDisp === void 0 ? 'off' : _props$valueLabelDisp,
+    _props$valueLabelForm = props.valueLabelFormat,
+    valueLabelFormat = _props$valueLabelForm === void 0 ? Identity : _props$valueLabelForm,
+    other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "aria-labelledby", "component", "components", "componentsProps", "color", "classes", "className", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"]);
   var ownerState = _extends({}, props, {
+    isRtl: isRtl,
+    max: max,
+    min: min,
+    classes: classesProp,
+    disabled: disabled,
+    disableSwap: disableSwap,
+    orientation: orientation,
+    marks: marksProp,
     color: color,
-    size: size
+    size: size,
+    step: step,
+    scale: scale,
+    track: track,
+    valueLabelDisplay: valueLabelDisplay,
+    valueLabelFormat: valueLabelFormat
   });
-  var classes = extendUtilityClasses(ownerState);
+  var _useSlider = useSlider(_extends({}, ownerState, {
+      ref: ref
+    })),
+    axisProps = _useSlider.axisProps,
+    getRootProps = _useSlider.getRootProps,
+    getHiddenInputProps = _useSlider.getHiddenInputProps,
+    getThumbProps = _useSlider.getThumbProps,
+    open = _useSlider.open,
+    active = _useSlider.active,
+    axis = _useSlider.axis,
+    focusedThumbIndex = _useSlider.focusedThumbIndex,
+    range = _useSlider.range,
+    dragging = _useSlider.dragging,
+    marks = _useSlider.marks,
+    values = _useSlider.values,
+    trackOffset = _useSlider.trackOffset,
+    trackLeap = _useSlider.trackLeap;
+  ownerState.marked = marks.length > 0 && marks.some(function (mark) {
+    return mark.label;
+  });
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  var classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  var RootSlot = (_ref8 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref8 : SliderRoot;
-  var RailSlot = (_ref9 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref9 : SliderRail;
-  var TrackSlot = (_ref10 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref10 : SliderTrack;
-  var ThumbSlot = (_ref11 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref11 : SliderThumb;
-  var ValueLabelSlot = (_ref12 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref12 : SliderValueLabel;
-  var MarkSlot = (_ref13 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref13 : SliderMark;
-  var MarkLabelSlot = (_ref14 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref14 : SliderMarkLabel;
-  var InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
+  var RootSlot = (_ref9 = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref9 : SliderRoot;
+  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 : 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';
   var rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   var railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
   var trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -460,51 +557,125 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   var markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   var inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  return /*#__PURE__*/_jsx(SliderUnstyled, _extends({}, other, {
-    isRtl: isRtl,
-    slots: {
-      root: RootSlot,
-      rail: RailSlot,
-      track: TrackSlot,
-      thumb: ThumbSlot,
-      valueLabel: ValueLabelSlot,
-      mark: MarkSlot,
-      markLabel: MarkLabelSlot,
-      input: InputSlot
-    },
-    slotProps: _extends({}, componentsProps, {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          color: color,
-          size: size
-        })
-      }),
-      rail: railSlotProps,
-      thumb: _extends({}, thumbSlotProps, shouldSpreadAdditionalProps(ThumbSlot) && {
-        ownerState: _extends({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
-          color: color,
-          size: size
-        })
-      }),
-      track: _extends({}, trackSlotProps, shouldSpreadAdditionalProps(TrackSlot) && {
-        ownerState: _extends({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
-          color: color,
-          size: size
-        })
-      }),
-      valueLabel: _extends({}, valueLabelSlotProps, shouldSpreadAdditionalProps(ValueLabelSlot) && {
-        ownerState: _extends({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
-          color: color,
-          size: size
-        })
-      }),
-      mark: markSlotProps,
-      markLabel: markLabelSlotProps,
-      input: inputSlotProps
+  var rootProps = useSlotProps({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: _extends({}, shouldSpreadAdditionalProps(RootSlot) && {
+      as: component
     }),
-    classes: classes,
-    ref: ref
+    ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    className: [classes.root, className]
+  });
+  var railProps = useSlotProps({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState: ownerState,
+    className: classes.rail
+  });
+  var trackProps = useSlotProps({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: _extends({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+    className: classes.track
+  });
+  var thumbProps = useSlotProps({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: _extends({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+  });
+  var valueLabelProps = useSlotProps({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: _extends({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    className: classes.valueLabel
+  });
+  var markProps = useSlotProps({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState: ownerState,
+    className: classes.mark
+  });
+  var markLabelProps = useSlotProps({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState: ownerState
+  });
+  var inputSliderProps = useSlotProps({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(RailSlot, _extends({}, railProps)), /*#__PURE__*/_jsx(TrackSlot, _extends({}, trackProps)), marks.filter(function (mark) {
+      return mark.value >= min && mark.value <= max;
+    }).map(function (mark, index) {
+      var percent = valueToPercent(mark.value, min, max);
+      var style = axisProps[axis].offset(percent);
+      var markActive;
+      if (track === false) {
+        markActive = values.indexOf(mark.value) !== -1;
+      } else {
+        markActive = track === 'normal' && (range ? mark.value >= values[0] && mark.value <= values[values.length - 1] : mark.value <= values[0]) || track === 'inverted' && (range ? mark.value <= values[0] || mark.value >= values[values.length - 1] : mark.value >= values[0]);
+      }
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(MarkSlot, _extends({
+          "data-index": index
+        }, markProps, !isHostComponent(MarkSlot) && {
+          markActive: markActive
+        }, {
+          style: _extends({}, style, markProps.style),
+          className: clsx(markProps.className, markActive && classes.markActive)
+        })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, _extends({
+          "aria-hidden": true,
+          "data-index": index
+        }, markLabelProps, !isHostComponent(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: _extends({}, style, markLabelProps.style),
+          className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          children: mark.label
+        })) : null]
+      }, index);
+    }), values.map(function (value, index) {
+      var percent = valueToPercent(value, min, max);
+      var style = axisProps[axis].offset(percent);
+      var ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+          valueLabelFormat: valueLabelFormat,
+          valueLabelDisplay: valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index: index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled: disabled
+        }, valueLabelProps, {
+          children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: _extends({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/_jsx(InputSlot, _extends({
+              "data-index": index,
+              "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
+              "aria-valuenow": scale(value),
+              "aria-labelledby": ariaLabelledby,
+              "aria-valuetext": getAriaValueText ? getAriaValueText(scale(value), index) : ariaValuetext,
+              value: values[index]
+            }, inputSliderProps))
+          }))
+        }))
+      }, index);
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */ = {
@@ -674,7 +845,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * A transformation function, to change the scale of the slider.
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   scale: PropTypes.func,
   /**
@@ -765,7 +940,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *
    * - {number} value The value label's value to format
    * - {number} index The value label's index to format
-   * @default (x) => x
+   * @param {any} x
+   * @returns {any}
+   * @default function Identity(x) {
+   *   return x;
+   * }
    */
   valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 } : void 0;

package/legacy/Slider/SliderValueLabel.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import sliderClasses from './sliderClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useValueLabelClasses = function useValueLabelClasses(props) {
+  var open = props.open;
+  var utilityClasses = {
+    offset: clsx(open && sliderClasses.valueLabelOpen),
+    circle: sliderClasses.valueLabelCircle,
+    label: sliderClasses.valueLabelLabel
+  };
+  return utilityClasses;
+};
+
+/**
+ * @ignore - internal component.
+ */
+export default function SliderValueLabel(props) {
+  var children = props.children,
+    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, {
+    children: [children.props.children, /*#__PURE__*/_jsx("span", {
+      className: clsx(classes.offset, className),
+      "aria-hidden": true,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classes.circle,
+        children: /*#__PURE__*/_jsx("span", {
+          className: classes.label,
+          children: value
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+  className: PropTypes.string,
+  value: PropTypes.node
+} : void 0;

package/legacy/Slider/SliderValueLabel.types.js

@@ -0,0 +1 @@
+export {};

package/legacy/Slider/index.js

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

package/legacy/Slider/sliderClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+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;