@mui/material 5.15.13 → 6.0.0-alpha.0

package/node/Slider/Slider.js

@@ -17,8 +17,8 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useSlider = require("@mui/base/useSlider");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
+var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
 var _shouldSpreadAdditionalProps = _interopRequireDefault(require("../utils/shouldSpreadAdditionalProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
@@ -26,11 +26,12 @@ var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSlider');
 function Identity(x) {
   return x;
 }
-const SliderRoot = exports.SliderRoot = (0, _styled.default)('span', {
+const SliderRoot = exports.SliderRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -40,95 +41,151 @@ const SliderRoot = exports.SliderRoot = (0, _styled.default)('span', {
     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.default.disabled}`]: {
-    pointerEvents: 'none',
-    cursor: 'default',
-    color: (theme.vars || theme).palette.grey[400]
-  },
-  [`&.${_sliderClasses.default.dragging}`]: {
-    [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.track}`]: {
-      transition: 'none'
-    }
-  }
-}));
-const SliderRail = exports.SliderRail = (0, _styled.default)('span', {
+  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.default.disabled}`]: {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: (theme.vars || theme).palette.grey[400]
+    },
+    [`&.${_sliderClasses.default.dragging}`]: {
+      [`& .${_sliderClasses.default.thumb}, & .${_sliderClasses.default.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 = exports.SliderRail = (0, _zeroStyled.styled)('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
-}));
-const SliderTrack = exports.SliderTrack = (0, _styled.default)('span', {
+  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 = exports.SliderTrack = (0, _zeroStyled.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' ? (0, _colorManipulator.lighten)(theme.palette[ownerState.color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[ownerState.color].main, 0.5);
-  return (0, _extends2.default)({
+  var _theme$vars3;
+  return {
     display: 'block',
     position: 'absolute',
     borderRadius: 'inherit',
@@ -136,25 +193,62 @@ const SliderTrack = exports.SliderTrack = (0, _styled.default)('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: (0, _extends2.default)({}, theme.vars ? {
+        backgroundColor: theme.vars.palette.Slider[`${color}Track`],
+        borderColor: theme.vars.palette.Slider[`${color}Track`]
+      } : (0, _extends2.default)({
+        backgroundColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62),
+        borderColor: (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62)
+      }, theme.applyStyles('dark', {
+        backgroundColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+      }), theme.applyStyles('dark', {
+        borderColor: (0, _colorManipulator.darken)(theme.palette[color].main, 0.5)
+      })))
+    }))]
+  };
 });
-const SliderThumb = exports.SliderThumb = (0, _styled.default)('span', {
+const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: (props, styles) => {
@@ -164,79 +258,107 @@ const SliderThumb = exports.SliderThumb = (0, _styled.default)('span', {
     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': {
+  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.default.focusVisible}`]: {
-    boxShadow: `0px 0px 0px 8px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`,
-    '@media (hover: none)': {
-      boxShadow: 'none'
-    }
-  },
-  [`&.${_sliderClasses.default.active}`]: {
-    boxShadow: `0px 0px 0px 14px ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.16)` : (0, _colorManipulator.alpha)(theme.palette[ownerState.color].main, 0.16)}`
-  },
-  [`&.${_sliderClasses.default.disabled}`]: {
-    '&:hover': {
-      boxShadow: 'none'
-    }
-  }
-}));
-const SliderValueLabel = exports.SliderValueLabel = (0, _styled.default)(_SliderValueLabel.default, {
+    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.default.disabled}`]: {
+      '&:hover': {
+        boxShadow: 'none'
+      }
+    },
+    variants: [...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.default.focusVisible}`]: (0, _extends2.default)({}, theme.vars ? {
+          boxShadow: `0px 0px 0px 8px rgba(${theme.vars.palette[color].mainChannel} / 0.16)`
+        } : {
+          boxShadow: `0px 0px 0px 8px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
+        }, {
+          '@media (hover: none)': {
+            boxShadow: 'none'
+          }
+        }),
+        [`&.${_sliderClasses.default.active}`]: (0, _extends2.default)({}, theme.vars ? {
+          boxShadow: `0px 0px 0px 14px rgba(${theme.vars.palette[color].mainChannel} / 0.16)}`
+        } : {
+          boxShadow: `0px 0px 0px 14px ${(0, _colorManipulator.alpha)(theme.palette[color].main, 0.16)}`
+        })
+      }
+    })), {
+      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%)'
+      }
+    }]
+  };
+});
+const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_SliderValueLabel.default, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({
-  [`&.${_sliderClasses.default.valueLabelOpen}`]: {
-    transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
-  },
   zIndex: 1,
   whiteSpace: 'nowrap'
 }, theme.typography.body2, {
@@ -244,7 +366,6 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _styled.default)(_Slider
   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,
@@ -252,42 +373,74 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _styled.default)(_Slider
   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.default.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.default.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'
+    }
+  }]
 }));
-const SliderMark = exports.SliderMark = (0, _styled.default)('span', {
+const SliderMark = exports.SliderMark = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'Mark',
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markActive',
   overridesResolver: (props, styles) => {
     const {
       markActive
@@ -295,52 +448,80 @@ const SliderMark = exports.SliderMark = (0, _styled.default)('span', {
     return [styles.mark, markActive && styles.markActive];
   }
 })(({
-  theme,
-  ownerState,
-  markActive
-}) => (0, _extends2.default)({
+  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
+    }
+  }]
 }));
-const SliderMarkLabel = exports.SliderMarkLabel = (0, _styled.default)('span', {
+const SliderMarkLabel = exports.SliderMarkLabel = (0, _zeroStyled.styled)('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
-  shouldForwardProp: prop => (0, _styled.slotShouldForwardProp)(prop) && prop !== 'markLabelActive',
+  shouldForwardProp: prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'markLabelActive',
   overridesResolver: (props, styles) => styles.markLabel
 })(({
-  theme,
-  ownerState,
-  markLabelActive
+  theme
 }) => (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
+  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
+    }
+  }]
 }));
 const useUtilityClasses = ownerState => {
   const {
@@ -374,7 +555,7 @@ const Forward = ({
 }) => children;
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _ref, _slots$root, _ref2, _slots$rail, _ref3, _slots$track, _ref4, _slots$thumb, _ref5, _slots$valueLabel, _ref6, _slots$mark, _ref7, _slots$markLabel, _ref8, _slots$input, _slotProps$root, _slotProps$rail, _slotProps$track, _slotProps$thumb, _slotProps$valueLabel, _slotProps$mark, _slotProps$markLabel, _slotProps$input;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inputProps,
     name: 'MuiSlider'
   });