impact-ui 4.0.18 → 5.0.0-beta.1

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

@@ -3,21 +3,22 @@ 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 useThemeProps from "../styles/useThemeProps.js";
-import styled, { slotShouldForwardProp } from "../styles/styled.js";
-import useTheme from "../styles/useTheme.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 shouldSpreadAdditionalProps from "../utils/shouldSpreadAdditionalProps.js";
-import SliderValueLabel from "./SliderValueLabel.js";
+import SliderValueLabel$1 from "./SliderValueLabel.js";
 import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-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"];
+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"];
 function Identity(x) {
   return x;
 }
@@ -31,116 +32,151 @@ 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,
-  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;
+  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
+      }
+    }]
+  };
+});
 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
-}, 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;
+  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
+    }
+  }]
+});
 const SliderTrack = styled("span", {
   name: "MuiSlider",
   slot: "Track",
   overridesResolver: (props, styles) => styles.track
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  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({
+  var _theme$vars3;
+  return {
     display: "block",
     position: "absolute",
     borderRadius: "inherit",
@@ -148,34 +184,61 @@ const SliderTrack = styled("span", {
     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
-  });
+    }),
+    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)
+      })))
+    }))]
+  };
 });
-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",
@@ -186,89 +249,107 @@ const SliderThumb = styled("span", {
     return [styles.thumb, styles[`thumbColor${capitalize(ownerState.color)}`], ownerState.size !== "medium" && styles[`thumbSize${capitalize(ownerState.size)}`]];
   }
 })(({
-  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",
-    content: '""',
-    borderRadius: "inherit",
-    width: "100%",
-    height: "100%",
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.size === "small" && {
-    boxShadow: "none"
-  }),
-  "&::after": {
+  theme
+}) => {
+  var _theme$vars5;
+  return {
     position: "absolute",
-    content: '""',
+    width: 20,
+    height: 20,
+    boxSizing: "border-box",
     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)` : 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, {
+    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, {
   name: "MuiSlider",
   slot: "ValueLabel",
   overridesResolver: (props, styles) => styles.valueLabel
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
-  [`&.${sliderClasses.valueLabelOpen}`]: {
-    transform: `${ownerState.orientation === "vertical" ? "translateY(-50%)" : "translateY(-100%)"} scale(1)`
-  },
   zIndex: 1,
   whiteSpace: "nowrap"
 }, theme.typography.body2, {
@@ -276,7 +357,6 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   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,
@@ -284,48 +364,70 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   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: 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"
+  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"
+    }
+  }]
 }));
-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",
@@ -337,73 +439,81 @@ const SliderMark = styled("span", {
     return [styles.mark, markActive && styles.markActive];
   }
 })(({
-  theme,
-  ownerState,
-  markActive
-}) => _extends({
+  theme
+}) => ({
   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
+  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
+    }
+  }]
 }));
-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,
-  ownerState,
-  markLabelActive
+  theme
 }) => _extends({}, 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
+  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
+    }
+  }]
 }));
-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,
@@ -436,12 +546,11 @@ 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 = useThemeProps({
+  const props = useDefaultProps({
     props: inputProps,
     name: "MuiSlider"
   });
-  const theme = useTheme();
-  const isRtl = theme.direction === "rtl";
+  const isRtl = useRtl();
   const {
     "aria-label": ariaLabel,
     "aria-valuetext": ariaValuetext,
@@ -461,6 +570,7 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
     max = 100,
     min = 0,
     orientation = "horizontal",
+    shiftStep = 10,
     size = "medium",
     step = 1,
     scale = Identity,
@@ -482,6 +592,7 @@ const Slider = /* @__PURE__ */ React.forwardRef(function Slider2(inputProps, ref
     color,
     size,
     step,
+    shiftStep,
     scale,
     track,
     valueLabelDisplay,
@@ -514,7 +625,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 : StyledSliderValueLabel;
+  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 = (_ref8 = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components.Input) != null ? _ref8 : "input";
@@ -646,10 +757,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 "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * The label of the slider.
    */
@@ -689,15 +800,14 @@ 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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary"]), PropTypes.string]),
+  color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), PropTypes.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.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -715,8 +825,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes = {
    * 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.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -823,6 +932,11 @@ 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'
@@ -926,6 +1040,6 @@ export {
   SliderRoot,
   SliderThumb,
   SliderTrack,
-  StyledSliderValueLabel as SliderValueLabel,
+  SliderValueLabel,
   Slider as default
 };