@mui/material 5.11.4 → 5.11.6

package/node/Slider/Slider.js

@@ -4,26 +4,31 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sliderClasses = exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = void 0;
+exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = 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"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _SliderUnstyled = _interopRequireWildcard(require("@mui/base/SliderUnstyled"));
+var _base = require("@mui/base");
+var _SliderUnstyled = require("@mui/base/SliderUnstyled");
 var _system = require("@mui/system");
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
+var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
+const _excluded = ["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"];
 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 sliderClasses = (0, _extends2.default)({}, _SliderUnstyled.sliderUnstyledClasses, (0, _utils.unstable_generateUtilityClasses)('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
-exports.sliderClasses = sliderClasses;
+const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
+function Identity(x) {
+  return x;
+}
 const SliderRoot = (0, _styled.default)('span', {
   name: 'MuiSlider',
   slot: 'Root',
@@ -75,13 +80,13 @@ const SliderRoot = (0, _styled.default)('span', {
   '@media print': {
     colorAdjust: 'exact'
   },
-  [`&.${sliderClasses.disabled}`]: {
+  [`&.${_sliderClasses.default.disabled}`]: {
     pointerEvents: 'none',
     cursor: 'default',
     color: (theme.vars || theme).palette.grey[400]
   },
-  [`&.${sliderClasses.dragging}`]: {
-    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+  [`&.${_sliderClasses.default.dragging}`]: {
+    [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
       transition: 'none'
     }
   }
@@ -238,16 +243,16 @@ const SliderThumb = (0, _styled.default)('span', {
     left: '50%',
     transform: 'translate(-50%, -50%)'
   },
-  [`&:hover, &.${sliderClasses.focusVisible}`]: {
+  [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
     boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
     '@media (hover: none)': {
       boxShadow: 'none'
     }
   },
-  [`&.${sliderClasses.active}`]: {
+  [`&.${_sliderClasses.default.active}`]: {
     boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _system.alpha)(theme.palette[ownerState.color].main, 0.16)}`
   },
-  [`&.${sliderClasses.disabled}`]: {
+  [`&.${_sliderClasses.default.disabled}`]: {
     '&:hover': {
       boxShadow: 'none'
     }
@@ -264,7 +269,7 @@ process.env.NODE_ENV !== "production" ? SliderThumb.propTypes /* remove-proptype
    */
   children: _propTypes.default.node
 } : void 0;
-const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUnstyled, {
+const StyledSliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -272,7 +277,7 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   theme,
   ownerState
 }) => (0, _extends2.default)({
-  [`&.${sliderClasses.valueLabelOpen}`]: {
+  [`&.${_sliderClasses.default.valueLabelOpen}`]: {
     transform: 'translateY(-100%) scale(1)'
   },
   zIndex: 1,
@@ -322,8 +327,8 @@ const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUn
   fontSize: theme.typography.pxToRem(12),
   padding: '0.25rem 0.5rem'
 }));
-exports.SliderValueLabel = SliderValueLabel;
-process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-proptypes */ = {
+exports.SliderValueLabel = StyledSliderValueLabel;
+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"     |
@@ -413,19 +418,38 @@ process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-prop
    */
   children: _propTypes.default.node
 } : void 0;
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
+    disabled,
+    dragging,
+    marked,
+    orientation,
+    track,
+    classes,
     color,
-    size,
-    classes = {}
+    size
   } = ownerState;
-  return (0, _extends2.default)({}, classes, {
-    root: (0, _clsx.default)(classes.root, (0, _SliderUnstyled.getSliderUtilityClass)(`color${(0, _capitalize.default)(color)}`), classes[`color${(0, _capitalize.default)(color)}`], size && [(0, _SliderUnstyled.getSliderUtilityClass)(`size${(0, _capitalize.default)(size)}`), classes[`size${(0, _capitalize.default)(size)}`]]),
-    thumb: (0, _clsx.default)(classes.thumb, (0, _SliderUnstyled.getSliderUtilityClass)(`thumbColor${(0, _capitalize.default)(color)}`), classes[`thumbColor${(0, _capitalize.default)(color)}`], size && [(0, _SliderUnstyled.getSliderUtilityClass)(`thumbSize${(0, _capitalize.default)(size)}`), classes[`thumbSize${(0, _capitalize.default)(size)}`]])
-  });
+  const slots = {
+    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${(0, _capitalize.default)(color)}`, size && `size${(0, _capitalize.default)(size)}`],
+    rail: ['rail'],
+    track: ['track'],
+    mark: ['mark'],
+    markActive: ['markActive'],
+    markLabel: ['markLabel'],
+    markLabelActive: ['markLabelActive'],
+    valueLabel: ['valueLabel'],
+    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${(0, _capitalize.default)(size)}`, color && `thumbColor${(0, _capitalize.default)(color)}`],
+    active: ['active'],
+    disabled: ['disabled'],
+    focusVisible: ['focusVisible']
+  };
+  return (0, _base.unstable_composeClasses)(slots, _sliderClasses.getSliderUtilityClass, classes);
 };
+const Forward = ({
+  children
+}) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
+  var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
   const props = (0, _useThemeProps.default)({
     props: inputProps,
     name: 'MuiSlider'
@@ -433,31 +457,84 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const theme = (0, _useTheme.default)();
   const isRtl = theme.direction === 'rtl';
   const {
+      'aria-label': ariaLabel,
+      'aria-valuetext': ariaValuetext,
+      'aria-labelledby': ariaLabelledby,
       // eslint-disable-next-line react/prop-types
       component = 'span',
       components = {},
       componentsProps = {},
       color = 'primary',
+      classes: classesProp,
+      // eslint-disable-next-line react/prop-types
+      className,
+      disableSwap = false,
+      disabled = false,
+      getAriaLabel,
+      getAriaValueText,
+      marks: marksProp = false,
+      max = 100,
+      min = 0,
+      orientation = 'horizontal',
       size = 'medium',
+      step = 1,
+      scale = Identity,
       slotProps,
-      slots
+      slots,
+      track = 'normal',
+      valueLabelDisplay = 'off',
+      valueLabelFormat = Identity
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = (0, _extends2.default)({}, props, {
+    isRtl,
+    max,
+    min,
+    classes: classesProp,
+    disabled,
+    disableSwap,
+    orientation,
+    marks: marksProp,
     color,
-    size
+    size,
+    step,
+    scale,
+    track,
+    valueLabelDisplay,
+    valueLabelFormat
   });
-  const classes = extendUtilityClasses(ownerState);
+  const {
+    axisProps,
+    getRootProps,
+    getHiddenInputProps,
+    getThumbProps,
+    open,
+    active,
+    axis,
+    focusedThumbIndex,
+    range,
+    dragging,
+    marks,
+    values,
+    trackOffset,
+    trackLeap
+  } = (0, _SliderUnstyled.useSlider)((0, _extends2.default)({}, ownerState, {
+    ref
+  }));
+  ownerState.marked = marks.length > 0 && marks.some(mark => mark.label);
+  ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : SliderRoot;
   const RailSlot = (_ref2 = (_slots$rail = slots == null ? void 0 : slots.rail) != null ? _slots$rail : components.Rail) != null ? _ref2 : SliderRail;
   const TrackSlot = (_ref3 = (_slots$track = slots == null ? void 0 : slots.track) != null ? _slots$track : components.Track) != null ? _ref3 : SliderTrack;
   const ThumbSlot = (_ref4 = (_slots$thumb = slots == null ? void 0 : slots.thumb) != null ? _slots$thumb : components.Thumb) != null ? _ref4 : SliderThumb;
-  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : SliderValueLabel;
+  const ValueLabelSlot = (_ref5 = (_slots$valueLabel = slots == null ? void 0 : slots.valueLabel) != null ? _slots$valueLabel : components.ValueLabel) != null ? _ref5 : StyledSliderValueLabel;
   const MarkSlot = (_ref6 = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : components.Mark) != null ? _ref6 : SliderMark;
   const MarkLabelSlot = (_ref7 = (_slots$markLabel = slots == null ? void 0 : slots.markLabel) != null ? _slots$markLabel : components.MarkLabel) != null ? _ref7 : SliderMarkLabel;
-  const InputSlot = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input;
+  const InputSlot = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : 'input';
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const railSlotProps = (_slotProps$rail = slotProps == null ? void 0 : slotProps.rail) != null ? _slotProps$rail : componentsProps.rail;
   const trackSlotProps = (_slotProps$track = slotProps == null ? void 0 : slotProps.track) != null ? _slotProps$track : componentsProps.track;
@@ -466,51 +543,123 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = (_slotProps$mark = slotProps == null ? void 0 : slotProps.mark) != null ? _slotProps$mark : componentsProps.mark;
   const markLabelSlotProps = (_slotProps$markLabel = slotProps == null ? void 0 : slotProps.markLabel) != null ? _slotProps$markLabel : componentsProps.markLabel;
   const inputSlotProps = (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps.input;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SliderUnstyled.default, (0, _extends2.default)({}, other, {
-    isRtl: isRtl,
-    slots: {
-      root: RootSlot,
-      rail: RailSlot,
-      track: TrackSlot,
-      thumb: ThumbSlot,
-      valueLabel: ValueLabelSlot,
-      mark: MarkSlot,
-      markLabel: MarkLabelSlot,
-      input: InputSlot
-    },
-    slotProps: (0, _extends2.default)({}, componentsProps, {
-      root: (0, _extends2.default)({}, rootSlotProps, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
-        as: component,
-        ownerState: (0, _extends2.default)({}, rootSlotProps == null ? void 0 : rootSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      rail: railSlotProps,
-      thumb: (0, _extends2.default)({}, thumbSlotProps, (0, _shouldSpreadAdditionalProps.default)(ThumbSlot) && {
-        ownerState: (0, _extends2.default)({}, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      track: (0, _extends2.default)({}, trackSlotProps, (0, _shouldSpreadAdditionalProps.default)(TrackSlot) && {
-        ownerState: (0, _extends2.default)({}, trackSlotProps == null ? void 0 : trackSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      valueLabel: (0, _extends2.default)({}, valueLabelSlotProps, (0, _shouldSpreadAdditionalProps.default)(ValueLabelSlot) && {
-        ownerState: (0, _extends2.default)({}, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState, {
-          color,
-          size
-        })
-      }),
-      mark: markSlotProps,
-      markLabel: markLabelSlotProps,
-      input: inputSlotProps
+  const rootProps = (0, _base.useSlotProps)({
+    elementType: RootSlot,
+    getSlotProps: getRootProps,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: (0, _extends2.default)({}, (0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
+      as: component
     }),
-    classes: classes,
-    ref: ref
+    ownerState: (0, _extends2.default)({}, ownerState, rootSlotProps == null ? void 0 : rootSlotProps.ownerState),
+    className: [classes.root, className]
+  });
+  const railProps = (0, _base.useSlotProps)({
+    elementType: RailSlot,
+    externalSlotProps: railSlotProps,
+    ownerState,
+    className: classes.rail
+  });
+  const trackProps = (0, _base.useSlotProps)({
+    elementType: TrackSlot,
+    externalSlotProps: trackSlotProps,
+    additionalProps: {
+      style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: (0, _extends2.default)({}, ownerState, trackSlotProps == null ? void 0 : trackSlotProps.ownerState),
+    className: classes.track
+  });
+  const thumbProps = (0, _base.useSlotProps)({
+    elementType: ThumbSlot,
+    getSlotProps: getThumbProps,
+    externalSlotProps: thumbSlotProps,
+    ownerState: (0, _extends2.default)({}, ownerState, thumbSlotProps == null ? void 0 : thumbSlotProps.ownerState)
+  });
+  const valueLabelProps = (0, _base.useSlotProps)({
+    elementType: ValueLabelSlot,
+    externalSlotProps: valueLabelSlotProps,
+    ownerState: (0, _extends2.default)({}, ownerState, valueLabelSlotProps == null ? void 0 : valueLabelSlotProps.ownerState),
+    className: classes.valueLabel
+  });
+  const markProps = (0, _base.useSlotProps)({
+    elementType: MarkSlot,
+    externalSlotProps: markSlotProps,
+    ownerState,
+    className: classes.mark
+  });
+  const markLabelProps = (0, _base.useSlotProps)({
+    elementType: MarkLabelSlot,
+    externalSlotProps: markLabelSlotProps,
+    ownerState
+  });
+  const inputSliderProps = (0, _base.useSlotProps)({
+    elementType: InputSlot,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: inputSlotProps,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, (0, _extends2.default)({}, rootProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, (0, _extends2.default)({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+      const percent = valueToPercent(mark.value, min, max);
+      const style = axisProps[axis].offset(percent);
+      let 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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, (0, _extends2.default)({
+          "data-index": index
+        }, markProps, !(0, _base.isHostComponent)(MarkSlot) && {
+          markActive
+        }, {
+          style: (0, _extends2.default)({}, style, markProps.style),
+          className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
+        })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, (0, _extends2.default)({
+          "aria-hidden": true,
+          "data-index": index
+        }, markLabelProps, !(0, _base.isHostComponent)(MarkLabelSlot) && {
+          markLabelActive: markActive
+        }, {
+          style: (0, _extends2.default)({}, style, markLabelProps.style),
+          className: (0, _clsx.default)(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          children: mark.label
+        })) : null]
+      }, index);
+    }), values.map((value, index) => {
+      const percent = valueToPercent(value, min, max);
+      const style = axisProps[axis].offset(percent);
+      const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueLabelComponent, (0, _extends2.default)({}, !(0, _base.isHostComponent)(ValueLabelComponent) && {
+          valueLabelFormat,
+          valueLabelDisplay,
+          value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
+          index,
+          open: open === index || active === index || valueLabelDisplay === 'on',
+          disabled
+        }, valueLabelProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, (0, _extends2.default)({
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+            style: (0, _extends2.default)({}, style, {
+              pointerEvents: disableSwap && active !== index ? 'none' : undefined
+            }, thumbProps.style),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, (0, _extends2.default)({
+              "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 */ = {
@@ -680,7 +829,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   orientation: _propTypes.default.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.default.func,
   /**
@@ -771,7 +924,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.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
 } : void 0;

package/node/Slider/SliderValueLabel.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SliderValueLabel;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _sliderClasses = _interopRequireDefault(require("./sliderClasses"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 useValueLabelClasses = props => {
+  const {
+    open
+  } = props;
+  const utilityClasses = {
+    offset: (0, _clsx.default)(open && _sliderClasses.default.valueLabelOpen),
+    circle: _sliderClasses.default.valueLabelCircle,
+    label: _sliderClasses.default.valueLabelLabel
+  };
+  return utilityClasses;
+};
+
+/**
+ * @ignore - internal component.
+ */
+function SliderValueLabel(props) {
+  const {
+    children,
+    className,
+    value
+  } = props;
+  const classes = useValueLabelClasses(props);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.cloneElement(children, {
+    className: (0, _clsx.default)(children.props.className)
+  }, /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [children.props.children, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _clsx.default)(classes.offset, className),
+      "aria-hidden": true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: classes.circle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: classes.label,
+          children: value
+        })
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  className: _propTypes.default.string,
+  value: _propTypes.default.node
+} : void 0;

package/node/Slider/SliderValueLabel.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Slider/index.js

@@ -3,13 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  sliderClasses: true
+};
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
     return _Slider.default;
   }
 });
+Object.defineProperty(exports, "sliderClasses", {
+  enumerable: true,
+  get: function () {
+    return _sliderClasses.default;
+  }
+});
 var _Slider = _interopRequireWildcard(require("./Slider"));
 Object.keys(_Slider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -22,5 +30,17 @@ Object.keys(_Slider).forEach(function (key) {
     }
   });
 });
+var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
+Object.keys(_sliderClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _sliderClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _sliderClasses[key];
+    }
+  });
+});
 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; }

package/node/Slider/sliderClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getSliderUtilityClass = getSliderUtilityClass;
+var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
+function getSliderUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiSlider', slot);
+}
+const sliderClasses = (0, _utils.unstable_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']);
+var _default = sliderClasses;
+exports.default = _default;