impact-ui 4.0.16 → 4.0.17-alpha.2

package/dist/node_modules/@mui/material/Slider/Slider.js

@@ -3,22 +3,21 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import { lighten as lighten_1, darken as darken_1, alpha as alpha_1 } from "../../system/colorManipulator.js";
-import { useRtl } from "../../system/esm/RtlProvider/index.js";
-import { useSlider, valueToPercent } from "./useSlider.js";
-import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
+import useThemeProps from "../styles/useThemeProps.js";
+import styled, { slotShouldForwardProp } from "../styles/styled.js";
+import useTheme from "../styles/useTheme.js";
 import shouldSpreadAdditionalProps from "../utils/shouldSpreadAdditionalProps.js";
-import SliderValueLabel$1 from "./SliderValueLabel.js";
+import SliderValueLabel from "./SliderValueLabel.js";
 import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
-import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.js";
-import isHostComponent from "../node_modules/@mui/utils/esm/isHostComponent/isHostComponent.js";
-import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
-import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
-import styled from "../styles/styled.js";
-import chainPropTypes from "../node_modules/@mui/utils/esm/chainPropTypes/chainPropTypes.js";
-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", "shiftStep", "size", "step", "scale", "slotProps", "slots", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat"];
+import { useSlider, valueToPercent } from "../node_modules/@mui/base/useSlider/useSlider.js";
+import { useSlotProps } from "../node_modules/@mui/base/utils/useSlotProps.js";
+import { isHostComponent } from "../node_modules/@mui/base/utils/isHostComponent.js";
+import capitalize from "../../utils/capitalize/capitalize.js";
+import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import { lighten, darken, alpha } from "../../system/esm/colorManipulator.js";
+import chainPropTypes from "../../utils/chainPropTypes/chainPropTypes.js";
+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 Identity(x) {
   return x;
 }
@@ -32,151 +31,116 @@ const SliderRoot = styled("span", {
     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];
   }
 })(({
-  theme
-}) => {
-  var _theme$vars;
-  return {
-    borderRadius: 12,
-    boxSizing: "content-box",
-    display: "inline-block",
-    position: "relative",
-    cursor: "pointer",
-    touchAction: "none",
-    WebkitTapHighlightColor: "transparent",
-    "@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"
-      }
-    },
-    variants: [...Object.keys(((_theme$vars = theme.vars) != null ? _theme$vars : theme).palette).filter((key) => {
-      var _theme$vars2;
-      return ((_theme$vars2 = theme.vars) != null ? _theme$vars2 : theme).palette[key].main;
-    }).map((color) => ({
-      props: {
-        color
-      },
-      style: {
-        color: (theme.vars || theme).palette[color].main
-      }
-    })), {
-      props: {
-        orientation: "horizontal"
-      },
-      style: {
-        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"
-        }
-      }
-    }, {
-      props: {
-        orientation: "horizontal",
-        size: "small"
-      },
-      style: {
-        height: 2
-      }
-    }, {
-      props: {
-        orientation: "horizontal",
-        marked: true
-      },
-      style: {
-        marginBottom: 20
-      }
-    }, {
-      props: {
-        orientation: "vertical"
-      },
-      style: {
-        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"
-        }
-      }
-    }, {
-      props: {
-        orientation: "vertical",
-        size: "small"
-      },
-      style: {
-        width: 2
-      }
-    }, {
-      props: {
-        orientation: "vertical",
-        marked: true
-      },
-      style: {
-        marginRight: 44
-      }
-    }]
-  };
-});
+  theme,
+  ownerState
+}) => _extends({
+  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" && _extends({
+  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" && _extends({
+  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"
+    }
+  }
+}));
+process.env.NODE_ENV !== "production" ? SliderRoot.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.node
+} : void 0;
 const SliderRail = styled("span", {
   name: "MuiSlider",
   slot: "Rail",
   overridesResolver: (props, styles) => styles.rail
-})({
+})(({
+  ownerState
+}) => _extends({
   display: "block",
   position: "absolute",
   borderRadius: "inherit",
   backgroundColor: "currentColor",
-  opacity: 0.38,
-  variants: [{
-    props: {
-      orientation: "horizontal"
-    },
-    style: {
-      width: "100%",
-      height: "inherit",
-      top: "50%",
-      transform: "translateY(-50%)"
-    }
-  }, {
-    props: {
-      orientation: "vertical"
-    },
-    style: {
-      height: "100%",
-      width: "inherit",
-      left: "50%",
-      transform: "translateX(-50%)"
-    }
-  }, {
-    props: {
-      track: "inverted"
-    },
-    style: {
-      opacity: 1
-    }
-  }]
-});
+  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
+}));
+process.env.NODE_ENV !== "production" ? SliderRail.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.node
+} : void 0;
 const SliderTrack = styled("span", {
   name: "MuiSlider",
   slot: "Track",
   overridesResolver: (props, styles) => styles.track
 })(({
-  theme
+  theme,
+  ownerState
 }) => {
-  var _theme$vars3;
-  return {
+  const color = (
+    // Same logic as the LinearProgress track color
+    theme.palette.mode === "light" ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.5)
+  );
+  return _extends({
     display: "block",
     position: "absolute",
     borderRadius: "inherit",
@@ -184,61 +148,34 @@ const SliderTrack = styled("span", {
     backgroundColor: "currentColor",
     transition: theme.transitions.create(["left", "width", "bottom", "height"], {
       duration: theme.transitions.duration.shortest
-    }),
-    variants: [{
-      props: {
-        size: "small"
-      },
-      style: {
-        border: "none"
-      }
-    }, {
-      props: {
-        orientation: "horizontal"
-      },
-      style: {
-        height: "inherit",
-        top: "50%",
-        transform: "translateY(-50%)"
-      }
-    }, {
-      props: {
-        orientation: "vertical"
-      },
-      style: {
-        width: "inherit",
-        left: "50%",
-        transform: "translateX(-50%)"
-      }
-    }, {
-      props: {
-        track: false
-      },
-      style: {
-        display: "none"
-      }
-    }, ...Object.keys(((_theme$vars3 = theme.vars) != null ? _theme$vars3 : theme).palette).filter((key) => {
-      var _theme$vars4;
-      return ((_theme$vars4 = theme.vars) != null ? _theme$vars4 : theme).palette[key].main;
-    }).map((color) => ({
-      props: {
-        color,
-        track: "inverted"
-      },
-      style: _extends({}, theme.vars ? {
-        backgroundColor: theme.vars.palette.Slider[`${color}Track`],
-        borderColor: theme.vars.palette.Slider[`${color}Track`]
-      } : _extends({
-        backgroundColor: lighten_1(theme.palette[color].main, 0.62),
-        borderColor: lighten_1(theme.palette[color].main, 0.62)
-      }, theme.applyStyles("dark", {
-        backgroundColor: darken_1(theme.palette[color].main, 0.5)
-      }), theme.applyStyles("dark", {
-        borderColor: darken_1(theme.palette[color].main, 0.5)
-      })))
-    }))]
-  };
+    })
+  }, 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
+  });
 });
+process.env.NODE_ENV !== "production" ? SliderTrack.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.node
+} : void 0;
 const SliderThumb = styled("span", {
   name: "MuiSlider",
   slot: "Thumb",
@@ -249,107 +186,89 @@ const SliderThumb = styled("span", {
     return [styles.thumb, styles[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== "medium" && styles[`thumbSize${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme
-}) => {
-  var _theme$vars5;
-  return {
+  theme,
+  ownerState
+}) => _extends({
+  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": _extends({
     position: "absolute",
-    width: 20,
-    height: 20,
-    boxSizing: "border-box",
+    content: '""',
+    borderRadius: "inherit",
+    width: "100%",
+    height: "100%",
+    boxShadow: (theme.vars || theme).shadows[2]
+  }, ownerState.size === "small" && {
+    boxShadow: "none"
+  }),
+  "&::after": {
+    position: "absolute",
+    content: '""',
     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
-    }),
-    "&::before": {
-      position: "absolute",
-      content: '""',
-      borderRadius: "inherit",
-      width: "100%",
-      height: "100%",
-      boxShadow: (theme.vars || theme).shadows[2]
-    },
-    "&::after": {
-      position: "absolute",
-      content: '""',
-      borderRadius: "50%",
-      // 42px is the hit target
-      width: 42,
-      height: 42,
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)"
-    },
-    [`&.${sliderClasses.disabled}`]: {
-      "&:hover": {
-        boxShadow: "none"
-      }
-    },
-    variants: [{
-      props: {
-        size: "small"
-      },
-      style: {
-        width: 12,
-        height: 12,
-        "&::before": {
-          boxShadow: "none"
-        }
-      }
-    }, {
-      props: {
-        orientation: "horizontal"
-      },
-      style: {
-        top: "50%",
-        transform: "translate(-50%, -50%)"
-      }
-    }, {
-      props: {
-        orientation: "vertical"
-      },
-      style: {
-        left: "50%",
-        transform: "translate(-50%, 50%)"
-      }
-    }, ...Object.keys(((_theme$vars5 = theme.vars) != null ? _theme$vars5 : theme).palette).filter((key) => {
-      var _theme$vars6;
-      return ((_theme$vars6 = theme.vars) != null ? _theme$vars6 : theme).palette[key].main;
-    }).map((color) => ({
-      props: {
-        color
-      },
-      style: {
-        [`&:hover, &.${sliderClasses.focusVisible}`]: _extends({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 8px ${alpha_1(theme.palette[color].main, 0.16)}`
-        }, {
-          "@media (hover: none)": {
-            boxShadow: "none"
-          }
-        }),
-        [`&.${sliderClasses.active}`]: _extends({}, theme.vars ? {
-          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
-        } : {
-          boxShadow: `0px 0px 0px 14px ${alpha_1(theme.palette[color].main, 0.16)}`
-        })
-      }
-    }))]
-  };
-});
-const SliderValueLabel = styled(SliderValueLabel$1, {
+    // 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)` : 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)` : alpha(theme.palette[ownerState.color].main, 0.16)}`
+  },
+  [`&.${sliderClasses.disabled}`]: {
+    "&:hover": {
+      boxShadow: "none"
+    }
+  }
+}));
+process.env.NODE_ENV !== "production" ? SliderThumb.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.node
+} : void 0;
+const StyledSliderValueLabel = styled(SliderValueLabel, {
   name: "MuiSlider",
   slot: "ValueLabel",
   overridesResolver: (props, styles) => styles.valueLabel
 })(({
-  theme
+  theme,
+  ownerState
 }) => _extends({
+  [`&.${sliderClasses.valueLabelOpen}`]: {
+    transform: `${ownerState.orientation === "vertical" ? "translateY(-50%)" : "translateY(-100%)"} scale(1)`
+  },
   zIndex: 1,
   whiteSpace: "nowrap"
 }, theme.typography.body2, {
@@ -357,6 +276,7 @@ const SliderValueLabel = styled(SliderValueLabel$1, {
   transition: theme.transitions.create(["transform"], {
     duration: theme.transitions.duration.shortest
   }),
+  transform: `${ownerState.orientation === "vertical" ? "translateY(-50%)" : "translateY(-100%)"} scale(0)`,
   position: "absolute",
   backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
@@ -364,70 +284,48 @@ const SliderValueLabel = styled(SliderValueLabel$1, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  padding: "0.25rem 0.75rem",
-  variants: [{
-    props: {
-      orientation: "horizontal"
-    },
-    style: {
-      transform: "translateY(-100%) scale(0)",
-      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%"
-      },
-      [`&.${sliderClasses.valueLabelOpen}`]: {
-        transform: "translateY(-100%) scale(1)"
-      }
-    }
-  }, {
-    props: {
-      orientation: "vertical"
-    },
-    style: {
-      transform: "translateY(-50%) scale(0)",
-      right: "30px",
-      top: "50%",
-      transformOrigin: "right center",
-      "&::before": {
-        position: "absolute",
-        content: '""',
-        width: 8,
-        height: 8,
-        transform: "translate(-50%, -50%) rotate(45deg)",
-        backgroundColor: "inherit",
-        right: -8,
-        top: "50%"
-      },
-      [`&.${sliderClasses.valueLabelOpen}`]: {
-        transform: "translateY(-50%) scale(1)"
-      }
-    }
-  }, {
-    props: {
-      size: "small"
-    },
-    style: {
-      fontSize: theme.typography.pxToRem(12),
-      padding: "0.25rem 0.5rem"
-    }
-  }, {
-    props: {
-      orientation: "vertical",
-      size: "small"
-    },
-    style: {
-      right: "20px"
-    }
-  }]
+  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: ownerState.size === "small" ? "20px" : "30px",
+  top: "50%",
+  transformOrigin: "right center",
+  "&:before": {
+    position: "absolute",
+    content: '""',
+    width: 8,
+    height: 8,
+    transform: "translate(-50%, -50%) rotate(45deg)",
+    backgroundColor: "inherit",
+    right: -8,
+    top: "50%"
+  }
+}, ownerState.size === "small" && {
+  fontSize: theme.typography.pxToRem(12),
+  padding: "0.25rem 0.5rem"
 }));
+process.env.NODE_ENV !== "production" ? StyledSliderValueLabel.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.node
+} : void 0;
 const SliderMark = styled("span", {
   name: "MuiSlider",
   slot: "Mark",
@@ -439,81 +337,73 @@ const SliderMark = styled("span", {
     return [styles.mark, markActive && styles.markActive];
   }
 })(({
-  theme
-}) => ({
+  theme,
+  ownerState,
+  markActive
+}) => _extends({
   position: "absolute",
   width: 2,
   height: 2,
   borderRadius: 1,
-  backgroundColor: "currentColor",
-  variants: [{
-    props: {
-      orientation: "horizontal"
-    },
-    style: {
-      top: "50%",
-      transform: "translate(-1px, -50%)"
-    }
-  }, {
-    props: {
-      orientation: "vertical"
-    },
-    style: {
-      left: "50%",
-      transform: "translate(-50%, 1px)"
-    }
-  }, {
-    props: {
-      markActive: true
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette.background.paper,
-      opacity: 0.8
-    }
-  }]
+  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
 }));
+process.env.NODE_ENV !== "production" ? SliderMark.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.node
+} : void 0;
 const SliderMarkLabel = styled("span", {
   name: "MuiSlider",
   slot: "MarkLabel",
   shouldForwardProp: (prop) => slotShouldForwardProp(prop) && prop !== "markLabelActive",
   overridesResolver: (props, styles) => styles.markLabel
 })(({
-  theme
+  theme,
+  ownerState,
+  markLabelActive
 }) => _extends({}, theme.typography.body2, {
   color: (theme.vars || theme).palette.text.secondary,
   position: "absolute",
-  whiteSpace: "nowrap",
-  variants: [{
-    props: {
-      orientation: "horizontal"
-    },
-    style: {
-      top: 30,
-      transform: "translateX(-50%)",
-      "@media (pointer: coarse)": {
-        top: 40
-      }
-    }
-  }, {
-    props: {
-      orientation: "vertical"
-    },
-    style: {
-      left: 36,
-      transform: "translateY(50%)",
-      "@media (pointer: coarse)": {
-        left: 44
-      }
-    }
-  }, {
-    props: {
-      markLabelActive: true
-    },
-    style: {
-      color: (theme.vars || theme).palette.text.primary
-    }
-  }]
+  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
 }));
+process.env.NODE_ENV !== "production" ? SliderMarkLabel.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.node
+} : void 0;
 const useUtilityClasses = (ownerState) => {
   const {
     disabled,
@@ -546,11 +436,12 @@ const Forward = ({
 }) => children;
 const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref) {
   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 = useDefaultProps({
+  const props = useThemeProps({
     props: inputProps,
     name: "MuiSlider"
   });
-  const isRtl = useRtl();
+  const theme = useTheme();
+  const isRtl = theme.direction === "rtl";
   const {
     "aria-label": ariaLabel,
     "aria-valuetext": ariaValuetext,
@@ -570,7 +461,6 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
     max = 100,
     min = 0,
     orientation = "horizontal",
-    shiftStep = 10,
     size = "medium",
     step = 1,
     scale = Identity,
@@ -592,7 +482,6 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
     color,
     size,
     step,
-    shiftStep,
     scale,
     track,
     valueLabelDisplay,
@@ -625,7 +514,7 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
   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 = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : "input";
@@ -757,10 +646,10 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
   }));
 });
 process.env.NODE_ENV !== "production" ? Slider.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm 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.
    */
@@ -800,14 +689,15 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes = {
   /**
    * 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).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
    * @default 'primary'
    */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary"]), PropTypes.string]),
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * This prop is an alias for the `slots` prop.
+   * It's recommended to use the `slots` prop instead.
    *
    * @default {}
    */
@@ -825,7 +715,8 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes = {
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * 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 {}
    */
@@ -932,11 +823,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes = {
    * }
    */
   scale: PropTypes.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,
   /**
    * The size of the slider.
    * @default 'medium'
@@ -1040,6 +926,6 @@ export {
   SliderRoot,
   SliderThumb,
   SliderTrack,
-  SliderValueLabel,
+  StyledSliderValueLabel as SliderValueLabel,
   Slider as default
 };