@mui/material 5.10.16 → 5.11.0

package/node/Slider/Slider.js

@@ -0,0 +1,784 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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;
+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 _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 _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["component", "components", "componentsProps", "color", "size", "slotProps", "slots"];
+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 SliderRoot = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    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];
+  }
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  borderRadius: 12,
+  boxSizing: 'content-box',
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'pointer',
+  touchAction: 'none',
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  WebkitTapHighlightColor: 'transparent'
+}, ownerState.orientation === 'horizontal' && (0, _extends2.default)({
+  height: 4,
+  width: '100%',
+  padding: '13px 0',
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  '@media (pointer: coarse)': {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: '20px 0'
+  }
+}, ownerState.size === 'small' && {
+  height: 2
+}, ownerState.marked && {
+  marginBottom: 20
+}), ownerState.orientation === 'vertical' && (0, _extends2.default)({
+  height: '100%',
+  width: 4,
+  padding: '0 13px',
+  // The primary input mechanism of the device includes a pointing device of limited accuracy.
+  '@media (pointer: coarse)': {
+    // Reach 42px touch target, about ~8mm on screen.
+    padding: '0 20px'
+  }
+}, ownerState.size === 'small' && {
+  width: 2
+}, ownerState.marked && {
+  marginRight: 44
+}), {
+  '@media print': {
+    colorAdjust: 'exact'
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    pointerEvents: 'none',
+    cursor: 'default',
+    color: (theme.vars || theme).palette.grey[400]
+  },
+  [`&.${sliderClasses.dragging}`]: {
+    [`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
+      transition: 'none'
+    }
+  }
+}));
+exports.SliderRoot = SliderRoot;
+process.env.NODE_ENV !== "production" ? SliderRoot.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderRail = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+  overridesResolver: (props, styles) => styles.rail
+})(({
+  ownerState
+}) => (0, _extends2.default)({
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  backgroundColor: 'currentColor',
+  opacity: 0.38
+}, ownerState.orientation === 'horizontal' && {
+  width: '100%',
+  height: 'inherit',
+  top: '50%',
+  transform: 'translateY(-50%)'
+}, ownerState.orientation === 'vertical' && {
+  height: '100%',
+  width: 'inherit',
+  left: '50%',
+  transform: 'translateX(-50%)'
+}, ownerState.track === 'inverted' && {
+  opacity: 1
+}));
+exports.SliderRail = SliderRail;
+process.env.NODE_ENV !== "production" ? SliderRail.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderTrack = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'Track',
+  overridesResolver: (props, styles) => styles.track
+})(({
+  theme,
+  ownerState
+}) => {
+  const color =
+  // Same logic as the LinearProgress track color
+  theme.palette.mode === 'light' ? (0, _system.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _system.darken)(theme.palette[ownerState.color].main, 0.5);
+  return (0, _extends2.default)({
+    display: 'block',
+    position: 'absolute',
+    borderRadius: 'inherit',
+    border: '1px solid currentColor',
+    backgroundColor: 'currentColor',
+    transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+      duration: theme.transitions.duration.shortest
+    })
+  }, ownerState.size === 'small' && {
+    border: 'none'
+  }, ownerState.orientation === 'horizontal' && {
+    height: 'inherit',
+    top: '50%',
+    transform: 'translateY(-50%)'
+  }, ownerState.orientation === 'vertical' && {
+    width: 'inherit',
+    left: '50%',
+    transform: 'translateX(-50%)'
+  }, ownerState.track === false && {
+    display: 'none'
+  }, ownerState.track === 'inverted' && {
+    backgroundColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color,
+    borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
+  });
+});
+exports.SliderTrack = SliderTrack;
+process.env.NODE_ENV !== "production" ? SliderTrack.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderThumb = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'Thumb',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.thumb, styles[`thumbColor${(0, _capitalize.default)(ownerState.color)}`], ownerState.size !== 'medium' && styles[`thumbSize${(0, _capitalize.default)(ownerState.size)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  position: 'absolute',
+  width: 20,
+  height: 20,
+  boxSizing: 'border-box',
+  borderRadius: '50%',
+  outline: 0,
+  backgroundColor: 'currentColor',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+    duration: theme.transitions.duration.shortest
+  })
+}, ownerState.size === 'small' && {
+  width: 12,
+  height: 12
+}, ownerState.orientation === 'horizontal' && {
+  top: '50%',
+  transform: 'translate(-50%, -50%)'
+}, ownerState.orientation === 'vertical' && {
+  left: '50%',
+  transform: 'translate(-50%, 50%)'
+}, {
+  '&:before': (0, _extends2.default)({
+    position: 'absolute',
+    content: '""',
+    borderRadius: 'inherit',
+    width: '100%',
+    height: '100%',
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.size === 'small' && {
+    boxShadow: 'none'
+  }),
+  '&::after': {
+    position: 'absolute',
+    content: '""',
+    borderRadius: '50%',
+    // 42px is the hit target
+    width: 42,
+    height: 42,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+  [`&:hover, &.${sliderClasses.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}`]: {
+    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}`]: {
+    '&:hover': {
+      boxShadow: 'none'
+    }
+  }
+}));
+exports.SliderThumb = SliderThumb;
+process.env.NODE_ENV !== "production" ? SliderThumb.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderValueLabel = (0, _styled.default)(_SliderUnstyled.SliderValueLabelUnstyled, {
+  name: 'MuiSlider',
+  slot: 'ValueLabel',
+  overridesResolver: (props, styles) => styles.valueLabel
+})(({
+  theme,
+  ownerState
+}) => (0, _extends2.default)({
+  [`&.${sliderClasses.valueLabelOpen}`]: {
+    transform: 'translateY(-100%) scale(1)'
+  },
+  zIndex: 1,
+  whiteSpace: 'nowrap'
+}, theme.typography.body2, {
+  fontWeight: 500,
+  transition: theme.transitions.create(['transform'], {
+    duration: theme.transitions.duration.shortest
+  }),
+  transform: 'translateY(-100%) scale(0)',
+  position: 'absolute',
+  backgroundColor: (theme.vars || theme).palette.grey[600],
+  borderRadius: 2,
+  color: (theme.vars || theme).palette.common.white,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0.25rem 0.75rem'
+}, ownerState.orientation === 'horizontal' && {
+  top: '-10px',
+  transformOrigin: 'bottom center',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
+    bottom: 0,
+    left: '50%'
+  }
+}, ownerState.orientation === 'vertical' && {
+  right: '30px',
+  top: '24px',
+  transformOrigin: 'right center',
+  '&:before': {
+    position: 'absolute',
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: 'translate(-50%, 50%) rotate(45deg)',
+    backgroundColor: 'inherit',
+    right: '-20%',
+    top: '25%'
+  }
+}, ownerState.size === 'small' && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: '0.25rem 0.5rem'
+}));
+exports.SliderValueLabel = SliderValueLabel;
+process.env.NODE_ENV !== "production" ? SliderValueLabel.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderMark = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'Mark',
+  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markActive',
+  overridesResolver: (props, styles) => {
+    const {
+      markActive
+    } = props;
+    return [styles.mark, markActive && styles.markActive];
+  }
+})(({
+  theme,
+  ownerState,
+  markActive
+}) => (0, _extends2.default)({
+  position: 'absolute',
+  width: 2,
+  height: 2,
+  borderRadius: 1,
+  backgroundColor: 'currentColor'
+}, ownerState.orientation === 'horizontal' && {
+  top: '50%',
+  transform: 'translate(-1px, -50%)'
+}, ownerState.orientation === 'vertical' && {
+  left: '50%',
+  transform: 'translate(-50%, 1px)'
+}, markActive && {
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  opacity: 0.8
+}));
+exports.SliderMark = SliderMark;
+process.env.NODE_ENV !== "production" ? SliderMark.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const SliderMarkLabel = (0, _styled.default)('span', {
+  name: 'MuiSlider',
+  slot: 'MarkLabel',
+  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markLabelActive',
+  overridesResolver: (props, styles) => styles.markLabel
+})(({
+  theme,
+  ownerState,
+  markLabelActive
+}) => (0, _extends2.default)({}, theme.typography.body2, {
+  color: (theme.vars || theme).palette.text.secondary,
+  position: 'absolute',
+  whiteSpace: 'nowrap'
+}, ownerState.orientation === 'horizontal' && {
+  top: 30,
+  transform: 'translateX(-50%)',
+  '@media (pointer: coarse)': {
+    top: 40
+  }
+}, ownerState.orientation === 'vertical' && {
+  left: 36,
+  transform: 'translateY(50%)',
+  '@media (pointer: coarse)': {
+    left: 44
+  }
+}, markLabelActive && {
+  color: (theme.vars || theme).palette.text.primary
+}));
+exports.SliderMarkLabel = SliderMarkLabel;
+process.env.NODE_ENV !== "production" ? SliderMarkLabel.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node
+} : void 0;
+const extendUtilityClasses = ownerState => {
+  const {
+    color,
+    size,
+    classes = {}
+  } = 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 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;
+  const props = (0, _useThemeProps.default)({
+    props: inputProps,
+    name: 'MuiSlider'
+  });
+  const theme = (0, _useTheme.default)();
+  const isRtl = theme.direction === 'rtl';
+  const {
+      // eslint-disable-next-line react/prop-types
+      component = 'span',
+      components = {},
+      componentsProps = {},
+      color = 'primary',
+      size = 'medium',
+      slotProps,
+      slots
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerState = (0, _extends2.default)({}, props, {
+    color,
+    size
+  });
+  const classes = extendUtilityClasses(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 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 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;
+  const thumbSlotProps = (_slotProps$thumb = slotProps == null ? void 0 : slotProps.thumb) != null ? _slotProps$thumb : componentsProps.thumb;
+  const valueLabelSlotProps = (_slotProps$valueLabel = slotProps == null ? void 0 : slotProps.valueLabel) != null ? _slotProps$valueLabel : componentsProps.valueLabel;
+  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
+    }),
+    classes: classes,
+    ref: ref
+  }));
+});
+process.env.NODE_ENV !== "production" ? Slider.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"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The label of the slider.
+   */
+  'aria-label': (0, _utils.chainPropTypes)(_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.');
+    }
+    return null;
+  }),
+  /**
+   * The id of the element containing a label for the slider.
+   */
+  'aria-labelledby': _propTypes.default.string,
+  /**
+   * A string value that provides a user-friendly name for the current value of the slider.
+   */
+  'aria-valuetext': (0, _utils.chainPropTypes)(_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.');
+    }
+    return null;
+  }),
+  /**
+   * @ignore
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * 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/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary']), _propTypes.default.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
+   *
+   * @default {}
+   */
+  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.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `slotProps` prop.
+   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   *
+   * @default {}
+   */
+  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.number,
+      valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
+    })])
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  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.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.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.
+   * @param {number} value The thumb label's value to format.
+   * @param {number} index The thumb label's index to format.
+   * @returns {string}
+   */
+  getAriaValueText: _propTypes.default.func,
+  /**
+   * Indicates whether the theme context has rtl direction. It is set automatically.
+   * @default false
+   */
+  isRtl: _propTypes.default.bool,
+  /**
+   * 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.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.default.number,
+  /**
+   * The minimum allowed value of the slider.
+   * Should not be equal to max.
+   * @default 0
+   */
+  min: _propTypes.default.number,
+  /**
+   * Name attribute of the hidden `input` element.
+   */
+  name: _propTypes.default.string,
+  /**
+   * Callback function that is fired when the slider's value changed.
+   *
+   * @param {Event} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (any).
+   * **Warning**: This is a generic event not a change event.
+   * @param {number | number[]} value The new value.
+   * @param {number} activeThumb Index of the currently moved thumb.
+   */
+  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 {number | number[]} value The new value.
+   */
+  onChangeCommitted: _propTypes.default.func,
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  /**
+   * A transformation function, to change the scale of the slider.
+   * @default (x) => x
+   */
+  scale: _propTypes.default.func,
+  /**
+   * The size of the slider.
+   * @default 'medium'
+   */
+  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.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.number,
+      valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
+    })])
+  }),
+  /**
+   * The components used for each slot inside the Slider.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  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.)
+   * The `min` prop serves as the origin for the valid values.
+   * We recommend (max - min) to be evenly divisible by the step.
+   *
+   * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+   * @default 1
+   */
+  step: _propTypes.default.number,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Tab index attribute of the hidden `input` element.
+   */
+  tabIndex: _propTypes.default.number,
+  /**
+   * The track presentation:
+   *
+   * - `normal` the track will render a bar representing the slider value.
+   * - `inverted` the track will render a bar representing the remaining slider value.
+   * - `false` the track will render without a bar.
+   * @default 'normal'
+   */
+  track: _propTypes.default.oneOf(['inverted', 'normal', false]),
+  /**
+   * The value of the slider.
+   * For ranged sliders, provide an array with two values.
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number]),
+  /**
+   * Controls when the value label is displayed:
+   *
+   * - `auto` the value label will display when the thumb is hovered or focused.
+   * - `on` will display persistently.
+   * - `off` will never display.
+   * @default 'off'
+   */
+  valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on']),
+  /**
+   * The format function the value label's value.
+   *
+   * When a function is provided, it should have the following signature:
+   *
+   * - {number} value The value label's value to format
+   * - {number} index The value label's index to format
+   * @default (x) => x
+   */
+  valueLabelFormat: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
+} : void 0;
+var _default = Slider;
+exports.default = _default;