@mui/material 7.0.0-alpha.0 → 7.0.0-alpha.1

package/Slider/Slider.js

@@ -1,38 +1,45 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import chainPropTypes from '@mui/utils/chainPropTypes';
-import composeClasses from '@mui/utils/composeClasses';
-import { alpha, lighten, darken } from '@mui/system/colorManipulator';
-import { useRtl } from '@mui/system/RtlProvider';
-import useSlotProps from '@mui/utils/useSlotProps';
-import { useSlider, valueToPercent } from "./useSlider.js";
-import isHostComponent from "../utils/isHostComponent.js";
-import { styled } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
-import shouldSpreadAdditionalProps from "../utils/shouldSpreadAdditionalProps.js";
-import capitalize from "../utils/capitalize.js";
-import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
-import BaseSliderValueLabel from "./SliderValueLabel.js";
-import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SliderValueLabel = exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRail = exports.SliderMarkLabel = exports.SliderMark = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _useSlider = require("./useSlider");
+var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
+var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
+var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
+var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
+var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
+var _jsxRuntime = require("react/jsx-runtime");
 function Identity(x) {
   return x;
 }
-export const SliderRoot = styled('span', {
+const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[`color${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
+    return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.marked && styles.marked, ownerState.orientation === 'vertical' && styles.vertical, ownerState.track === 'inverted' && styles.trackInverted, ownerState.track === false && styles.trackFalse];
   }
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   borderRadius: 12,
@@ -45,17 +52,17 @@ export const SliderRoot = styled('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'
     }
   },
-  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
@@ -124,7 +131,7 @@ export const SliderRoot = styled('span', {
     }
   }]
 })));
-export const SliderRail = styled('span', {
+const SliderRail = exports.SliderRail = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Rail',
   overridesResolver: (props, styles) => styles.rail
@@ -163,11 +170,11 @@ export const SliderRail = styled('span', {
     }
   }]
 });
-export const SliderTrack = styled('span', {
+const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => {
   return {
@@ -211,7 +218,7 @@ export const SliderTrack = styled('span', {
       style: {
         display: 'none'
       }
-    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
       props: {
         color,
         track: 'inverted'
@@ -221,29 +228,29 @@ export const SliderTrack = styled('span', {
           backgroundColor: theme.vars.palette.Slider[`${color}Track`],
           borderColor: theme.vars.palette.Slider[`${color}Track`]
         } : {
-          backgroundColor: lighten(theme.palette[color].main, 0.62),
-          borderColor: lighten(theme.palette[color].main, 0.62),
+          backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
+          borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
           ...theme.applyStyles('dark', {
-            backgroundColor: darken(theme.palette[color].main, 0.5)
+            backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
           }),
           ...theme.applyStyles('dark', {
-            borderColor: darken(theme.palette[color].main, 0.5)
+            borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
           })
         })
       }
     }))]
   };
 }));
-export const SliderThumb = styled('span', {
+const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.thumb, styles[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${capitalize(ownerState.size)}`]];
+    return [styles.thumb, styles[`thumbColor${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${(0, _capitalize.default)(ownerState.size)}`]];
   }
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'absolute',
@@ -278,7 +285,7 @@ export const SliderThumb = styled('span', {
     left: '50%',
     transform: 'translate(-50%, -50%)'
   },
-  [`&.${sliderClasses.disabled}`]: {
+  [`&.${_sliderClasses.default.disabled}`]: {
     '&:hover': {
       boxShadow: 'none'
     }
@@ -310,36 +317,36 @@ export const SliderThumb = styled('span', {
       left: '50%',
       transform: 'translate(-50%, 50%)'
     }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
     props: {
       color
     },
     style: {
-      [`&:hover, &.${sliderClasses.focusVisible}`]: {
+      [`&:hover, &.${_sliderClasses.default.focusVisible}`]: {
         ...(theme.vars ? {
           boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
         } : {
-          boxShadow: `0px 0px 0px 8px ${alpha(theme.palette[color].main, 0.16)}`
+          boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
         }),
         '@media (hover: none)': {
           boxShadow: 'none'
         }
       },
-      [`&.${sliderClasses.active}`]: {
+      [`&.${_sliderClasses.default.active}`]: {
         ...(theme.vars ? {
           boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
         } : {
-          boxShadow: `0px 0px 0px 14px ${alpha(theme.palette[color].main, 0.16)}`
+          boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
         })
       }
     }
   }))]
 })));
-const SliderValueLabel = styled(BaseSliderValueLabel, {
+const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   zIndex: 1,
@@ -375,7 +382,7 @@ const SliderValueLabel = styled(BaseSliderValueLabel, {
         bottom: 0,
         left: '50%'
       },
-      [`&.${sliderClasses.valueLabelOpen}`]: {
+      [`&.${_sliderClasses.default.valueLabelOpen}`]: {
         transform: 'translateY(-100%) scale(1)'
       }
     }
@@ -398,7 +405,7 @@ const SliderValueLabel = styled(BaseSliderValueLabel, {
         right: -8,
         top: '50%'
       },
-      [`&.${sliderClasses.valueLabelOpen}`]: {
+      [`&.${_sliderClasses.default.valueLabelOpen}`]: {
         transform: 'translateY(-50%) scale(1)'
       }
     }
@@ -428,32 +435,31 @@ process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes /* remove-pro
   /**
    * @ignore
    */
-  children: PropTypes.element.isRequired,
+  children: _propTypes.default.element.isRequired,
   /**
    * @ignore
    */
-  index: PropTypes.number.isRequired,
+  index: _propTypes.default.number.isRequired,
   /**
    * @ignore
    */
-  open: PropTypes.bool.isRequired,
+  open: _propTypes.default.bool.isRequired,
   /**
    * @ignore
    */
-  value: PropTypes.node
+  value: _propTypes.default.node
 } : void 0;
-export { SliderValueLabel };
-export const SliderMark = styled('span', {
+const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Mark',
-  shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markActive',
   overridesResolver: (props, styles) => {
     const {
       markActive
     } = props;
     return [styles.mark, markActive && styles.markActive];
   }
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'absolute',
@@ -487,12 +493,12 @@ export const SliderMark = styled('span', {
     }
   }]
 })));
-export const SliderMarkLabel = styled('span', {
+const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
-  shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markLabelActive',
   overridesResolver: (props, styles) => styles.markLabel
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   ...theme.typography.body2,
@@ -542,7 +548,7 @@ const useUtilityClasses = ownerState => {
     size
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', dragging && 'dragging', marked && 'marked', orientation === 'vertical' && 'vertical', track === 'inverted' && 'trackInverted', track === false && 'trackFalse', color && `color${capitalize(color)}`, size && `size${capitalize(size)}`],
+    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'],
@@ -550,22 +556,22 @@ const useUtilityClasses = ownerState => {
     markLabel: ['markLabel'],
     markLabelActive: ['markLabelActive'],
     valueLabel: ['valueLabel'],
-    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${capitalize(size)}`, color && `thumbColor${capitalize(color)}`],
+    thumb: ['thumb', disabled && 'disabled', size && `thumbSize${(0, _capitalize.default)(size)}`, color && `thumbColor${(0, _capitalize.default)(color)}`],
     active: ['active'],
     disabled: ['disabled'],
     focusVisible: ['focusVisible']
   };
-  return composeClasses(slots, getSliderUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _sliderClasses.getSliderUtilityClass, classes);
 };
 const Forward = ({
   children
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
-  const props = useDefaultProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inputProps,
     name: 'MuiSlider'
   });
-  const isRtl = useRtl();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     'aria-label': ariaLabel,
     'aria-valuetext': ariaValuetext,
@@ -636,7 +642,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     trackOffset,
     trackLeap,
     getThumbStyle
-  } = useSlider({
+  } = (0, _useSlider.useSlider)({
     ...ownerState,
     rootRef: ref
   });
@@ -662,13 +668,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markSlotProps = slotProps?.mark ?? componentsProps.mark;
   const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel;
   const inputSlotProps = slotProps?.input ?? componentsProps.input;
-  const rootProps = useSlotProps({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: RootSlot,
     getSlotProps: getRootProps,
     externalSlotProps: rootSlotProps,
     externalForwardedProps: other,
     additionalProps: {
-      ...(shouldSpreadAdditionalProps(RootSlot) && {
+      ...((0, _shouldSpreadAdditionalProps.default)(RootSlot) && {
         as: component
       })
     },
@@ -678,13 +684,13 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: [classes.root, className]
   });
-  const railProps = useSlotProps({
+  const railProps = (0, _useSlotProps.default)({
     elementType: RailSlot,
     externalSlotProps: railSlotProps,
     ownerState,
     className: classes.rail
   });
-  const trackProps = useSlotProps({
+  const trackProps = (0, _useSlotProps.default)({
     elementType: TrackSlot,
     externalSlotProps: trackSlotProps,
     additionalProps: {
@@ -699,7 +705,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.track
   });
-  const thumbProps = useSlotProps({
+  const thumbProps = (0, _useSlotProps.default)({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
@@ -709,7 +715,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.thumb
   });
-  const valueLabelProps = useSlotProps({
+  const valueLabelProps = (0, _useSlotProps.default)({
     elementType: ValueLabelSlot,
     externalSlotProps: valueLabelSlotProps,
     ownerState: {
@@ -718,32 +724,32 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     },
     className: classes.valueLabel
   });
-  const markProps = useSlotProps({
+  const markProps = (0, _useSlotProps.default)({
     elementType: MarkSlot,
     externalSlotProps: markSlotProps,
     ownerState,
     className: classes.mark
   });
-  const markLabelProps = useSlotProps({
+  const markLabelProps = (0, _useSlotProps.default)({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
     ownerState,
     className: classes.markLabel
   });
-  const inputSliderProps = useSlotProps({
+  const inputSliderProps = (0, _useSlotProps.default)({
     elementType: InputSlot,
     getSlotProps: getHiddenInputProps,
     externalSlotProps: inputSlotProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(RootSlot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,
-    children: [/*#__PURE__*/_jsx(RailSlot, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RailSlot, {
       ...railProps
-    }), /*#__PURE__*/_jsx(TrackSlot, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TrackSlot, {
       ...trackProps
     }), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
-      const percent = valueToPercent(mark.value, min, max);
+      const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
       const style = axisProps[axis].offset(percent);
       let markActive;
       if (track === false) {
@@ -751,39 +757,39 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       } 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, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MarkSlot, {
           "data-index": index,
           ...markProps,
-          ...(!isHostComponent(MarkSlot) && {
+          ...(!(0, _isHostComponent.default)(MarkSlot) && {
             markActive
           }),
           style: {
             ...style,
             ...markProps.style
           },
-          className: clsx(markProps.className, markActive && classes.markActive)
-        }), mark.label != null ? /*#__PURE__*/_jsx(MarkLabelSlot, {
+          className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
+        }), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabelSlot, {
           "aria-hidden": true,
           "data-index": index,
           ...markLabelProps,
-          ...(!isHostComponent(MarkLabelSlot) && {
+          ...(!(0, _isHostComponent.default)(MarkLabelSlot) && {
             markLabelActive: markActive
           }),
           style: {
             ...style,
             ...markLabelProps.style
           },
-          className: clsx(classes.markLabel, markLabelProps.className, markActive && classes.markLabelActive),
+          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 percent = (0, _useSlider.valueToPercent)(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */_jsx(ValueLabelComponent, {
-        ...(!isHostComponent(ValueLabelComponent) && {
+      return /*#__PURE__*/ /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */(0, _jsxRuntime.jsx)(ValueLabelComponent, {
+        ...(!(0, _isHostComponent.default)(ValueLabelComponent) && {
           valueLabelFormat,
           valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -792,16 +798,16 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled
         }),
         ...valueLabelProps,
-        children: /*#__PURE__*/_jsx(ThumbSlot, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbSlot, {
           "data-index": index,
           ...thumbProps,
-          className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
+          className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
           style: {
             ...style,
             ...getThumbStyle(index),
             ...thumbProps.style
           },
-          children: /*#__PURE__*/_jsx(InputSlot, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InputSlot, {
             "data-index": index,
             "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
             "aria-valuenow": scale(value),
@@ -823,7 +829,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The label of the slider.
    */
-  'aria-label': chainPropTypes(PropTypes.string, props => {
+  'aria-label': (0, _chainPropTypes.default)(_propTypes.default.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
     if (range && props['aria-label'] != null) {
       return new Error('MUI: You need to use the `getAriaLabel` prop instead of `aria-label` when using a range slider.');
@@ -833,11 +839,11 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The id of the element containing a label for the slider.
    */
-  'aria-labelledby': PropTypes.string,
+  'aria-labelledby': _propTypes.default.string,
   /**
    * A string value that provides a user-friendly name for the current value of the slider.
    */
-  'aria-valuetext': chainPropTypes(PropTypes.string, props => {
+  'aria-valuetext': (0, _chainPropTypes.default)(_propTypes.default.string, props => {
     const range = Array.isArray(props.value || props.defaultValue);
     if (range && props['aria-valuetext'] != null) {
       return new Error('MUI: You need to use the `getAriaValueText` prop instead of `aria-valuetext` when using a range slider.');
@@ -847,22 +853,22 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * @ignore
    */
-  className: PropTypes.string,
+  className: _propTypes.default.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'error', 'info', 'success', 'warning']), _propTypes.default.string]),
   /**
    * The components used for each slot inside.
    *
@@ -870,15 +876,15 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *
    * @default {}
    */
-  components: PropTypes.shape({
-    Input: PropTypes.elementType,
-    Mark: PropTypes.elementType,
-    MarkLabel: PropTypes.elementType,
-    Rail: PropTypes.elementType,
-    Root: PropTypes.elementType,
-    Thumb: PropTypes.elementType,
-    Track: PropTypes.elementType,
-    ValueLabel: PropTypes.elementType
+  components: _propTypes.default.shape({
+    Input: _propTypes.default.elementType,
+    Mark: _propTypes.default.elementType,
+    MarkLabel: _propTypes.default.elementType,
+    Rail: _propTypes.default.elementType,
+    Root: _propTypes.default.elementType,
+    Thumb: _propTypes.default.elementType,
+    Track: _propTypes.default.elementType,
+    ValueLabel: _propTypes.default.elementType
   }),
   /**
    * The extra props for the slot components.
@@ -888,44 +894,44 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *
    * @default {}
    */
-  componentsProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      children: PropTypes.element,
-      className: PropTypes.string,
-      open: PropTypes.bool,
-      style: PropTypes.object,
-      value: PropTypes.node,
-      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
+  componentsProps: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    mark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    markLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    rail: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    valueLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      children: _propTypes.default.element,
+      className: _propTypes.default.string,
+      open: _propTypes.default.bool,
+      style: _propTypes.default.object,
+      value: _propTypes.default.node,
+      valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
     })])
   }),
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled: PropTypes.bool,
+  disabled: _propTypes.default.bool,
   /**
    * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
    * @default false
    */
-  disableSwap: PropTypes.bool,
+  disableSwap: _propTypes.default.bool,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
    * This is important for screen reader users.
    * @param {number} index The thumb label's index to format.
    * @returns {string}
    */
-  getAriaLabel: PropTypes.func,
+  getAriaLabel: _propTypes.default.func,
   /**
    * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
    * This is important for screen reader users.
@@ -933,33 +939,33 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * @param {number} index The thumb label's index to format.
    * @returns {string}
    */
-  getAriaValueText: PropTypes.func,
+  getAriaValueText: _propTypes.default.func,
   /**
    * Marks indicate predetermined values to which the user can move the slider.
    * If `true` the marks are spaced according the value of the `step` prop.
    * If an array, it should contain objects with `value` and an optional `label` keys.
    * @default false
    */
-  marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.node,
-    value: PropTypes.number.isRequired
-  })), PropTypes.bool]),
+  marks: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.node,
+    value: _propTypes.default.number.isRequired
+  })), _propTypes.default.bool]),
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.
    * @default 100
    */
-  max: PropTypes.number,
+  max: _propTypes.default.number,
   /**
    * The minimum allowed value of the slider.
    * Should not be equal to max.
    * @default 0
    */
-  min: PropTypes.number,
+  min: _propTypes.default.number,
   /**
    * Name attribute of the hidden `input` element.
    */
-  name: PropTypes.string,
+  name: _propTypes.default.string,
   /**
    * Callback function that is fired when the slider's value changed.
    *
@@ -969,19 +975,19 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * @param {Value} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
   /**
    * Callback function that is fired when the `mouseup` is triggered.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {Value} value The new value.
    */
-  onChangeCommitted: PropTypes.func,
+  onChangeCommitted: _propTypes.default.func,
   /**
    * The component orientation.
    * @default 'horizontal'
    */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
   /**
    * A transformation function, to change the scale of the slider.
    * @param {any} x
@@ -990,36 +996,36 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *   return x;
    * }
    */
-  scale: PropTypes.func,
+  scale: _propTypes.default.func,
   /**
    * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
    * @default 10
    */
-  shiftStep: PropTypes.number,
+  shiftStep: _propTypes.default.number,
   /**
    * The size of the slider.
    * @default 'medium'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
+  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
   /**
    * The props used for each slot inside the Slider.
    * @default {}
    */
-  slotProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-      children: PropTypes.element,
-      className: PropTypes.string,
-      open: PropTypes.bool,
-      style: PropTypes.object,
-      value: PropTypes.node,
-      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
+  slotProps: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    mark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    markLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    rail: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    valueLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      children: _propTypes.default.element,
+      className: _propTypes.default.string,
+      open: _propTypes.default.bool,
+      style: _propTypes.default.object,
+      value: _propTypes.default.node,
+      valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
     })])
   }),
   /**
@@ -1027,15 +1033,15 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Either a string to use a HTML element or a component.
    * @default {}
    */
-  slots: PropTypes.shape({
-    input: PropTypes.elementType,
-    mark: PropTypes.elementType,
-    markLabel: PropTypes.elementType,
-    rail: PropTypes.elementType,
-    root: PropTypes.elementType,
-    thumb: PropTypes.elementType,
-    track: PropTypes.elementType,
-    valueLabel: PropTypes.elementType
+  slots: _propTypes.default.shape({
+    input: _propTypes.default.elementType,
+    mark: _propTypes.default.elementType,
+    markLabel: _propTypes.default.elementType,
+    rail: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    thumb: _propTypes.default.elementType,
+    track: _propTypes.default.elementType,
+    valueLabel: _propTypes.default.elementType
   }),
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)
@@ -1045,15 +1051,15 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
    * @default 1
    */
-  step: PropTypes.number,
+  step: _propTypes.default.number,
   /**
    * The system prop that 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.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * Tab index attribute of the hidden `input` element.
    */
-  tabIndex: PropTypes.number,
+  tabIndex: _propTypes.default.number,
   /**
    * The track presentation:
    *
@@ -1062,12 +1068,12 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * - `false` the track will render without a bar.
    * @default 'normal'
    */
-  track: PropTypes.oneOf(['inverted', 'normal', false]),
+  track: _propTypes.default.oneOf(['inverted', 'normal', false]),
   /**
    * The value of the slider.
    * For ranged sliders, provide an array with two values.
    */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
   /**
    * Controls when the value label is displayed:
    *
@@ -1076,7 +1082,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * - `off` will never display.
    * @default 'off'
    */
-  valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
+  valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on']),
   /**
    * The format function the value label's value.
    *
@@ -1090,6 +1096,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    *   return x;
    * }
    */
-  valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+  valueLabelFormat: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
 } : void 0;
-export default Slider;
+var _default = exports.default = Slider;